feat: 提取业绩归属组件

src/views/create-order/components/performanceBelongs.vue

@@ -0,0 +1,442 @@
+<template>
+  <!-- 业绩归属 -->
+  <el-form ref="form" label-width="156px" class="performance-belongs-container">
+    <el-form-item class="performance-belongs-line" label="销售人员" :required="required.salePerson">
+      <SelectTree
+        class="sales-person-select"
+        :value="salePerson"
+        @input="updateSyncData('salePerson', $event)"
+        @change="onSalePersonSelectChange"
+        :options="salesDepList"
+        placeholder="请选择销售人员">
+      </SelectTree>
+      <div class="sale-person-list-container" v-if="salePerson.length > 1">
+        <el-table
+          :data="salePersonTableList"
+          :summary-method="getSummaries"
+          show-summary
+          stripe
+          border>
+          <el-table-column
+            prop="name"
+            header-align="center"
+            align="center"
+            label="销售人员">
+          </el-table-column>
+          <el-table-column
+            prop="money"
+            header-align="center"
+            align="center"
+            label="销售业绩（元）">
+            <template slot-scope="scope">
+              <number-input
+                :value="salePersonTableList[scope.$index].money"
+                @input="onSalePersonSplitMoneyChange(scope, $event)"
+                :disabled="scope.$index === getLastEditLineIndex()"
+                type="number"
+                :decimal="2"
+                placeholder="请输入"
+                size="medium"
+              ></number-input>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="saleWay"
+            header-align="center"
+            align="center"
+            label="销售渠道">
+            <template slot-scope="scope" >
+              <el-cascader
+                :options="saleChannelOptions"
+                :props="conf.cascaderProps"
+                :value="salePersonTableList[scope.$index].saleWay"
+                @input="onChangeTableLineData('saleWay', scope.$index, $event)"
+                size="medium"
+                placeholder="请选择销售渠道"
+                clearable></el-cascader>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-form-item>
+    <el-form-item class="performance-belongs-line" label="销售渠道" v-if="onlyOneSale" :required="required.saleWay && onlyOneSale">
+      <el-cascader
+        :value="saleWay"
+        @input="updateSyncData('saleWay', $event)"
+        :options="saleChannelOptions"
+        :props="conf.cascaderProps"
+        size="medium"
+        placeholder="请选择销售渠道"
+        clearable></el-cascader>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import NumberInput from '@/views/create-order/ui/NumberInput.vue'
+import SelectTree from '@/views/create-order/components/product-info-submodule/select-tree'
+import { mapState, mapGetters } from 'vuex'
+import { SalePersonTableRow } from '@/views/create-order/data/interface'
+import { add, sub } from '@/utils/number'
+import { cloneDeep } from 'lodash'
+
+export default {
+  name: 'PerformanceBelongs',
+  components: {
+    NumberInput,
+    SelectTree,
+  },
+  props: {
+    setDefaultUser: {
+      type: Boolean,
+      default: false
+    },
+    salesMoneyTotal: {
+      required: true,
+      type: [String, Number],
+      default: ''
+    },
+    hasContract: {
+      required: true,
+      type: Boolean,
+      default: false
+    },
+    salePerson: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    saleWay: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    salePersonTableList: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      required: {
+        salePerson: true,
+        saleWay: true,
+      },
+      conf: {
+        cascaderProps: {
+          label: 'item_name',
+          value: 'item_code',
+          multiple: false,
+        },
+        saleWayOptions: [],
+      },
+      loading: {
+        salePerson: false,
+        saleWay: false,
+      },
+      form: {
+        // salePerson: [],
+        // saleWay: [],
+        // salePersonTableList: [],
+      },
+    }
+  },
+  computed: {
+    ...mapState({
+      currentUserId: state => state.order.conf.currentUserEntId,
+      defaultSaleChannel: state => state.order.conf.defaultSaleChannel,
+    }),
+    ...mapGetters('order', [
+      'depTreeList',
+      'saleChannelOptions',
+    ]),
+    salesDepList() {
+      return this.depTreeList
+    },
+    onlyOneSale() {
+      return this.salePerson.length === 1
+    },
+    salePersonDetailInfo() {
+      return this.salePerson.map(fs => {
+        return this.deepestNodesArr.find(r => r.value === fs)
+      })
+    },
+    salesMoneyTotalNum() {
+      // 销售业绩=合同金额-渠道佣金
+      // return this.pageTotalMoney.contract - this.pageForm.channelCommission
+      return this.salesMoneyTotal
+    },
+    deepestNodesArr() {
+      return this.findDeepestNodes(this.salesDepList)
+    },
+    requiredList() {
+      return [
+        {
+          field: 'paymentCount',
+          message: '回款次数为必填项', // 错误提示文案
+          rank: 2, // 提示优先级，值越小优先级越高
+          required: this.required.paymentCount,
+        },
+        {
+          field: 'paymentDeadline',
+          message: '回款时间为必填项', // 错误提示文案
+          rank: 2,
+          required: this.required.paymentDeadline,
+        },
+      ].filter(f => f.required)
+    },
+  },
+  watch: {
+    salePerson() {
+      this.initSaleWayDefaultValue()
+    },
+    currentUserId: {
+      immediate: true,
+      handler() {
+        this.setDefaultUserFn()
+      }
+    }
+  },
+  methods: {
+    updateSyncData(type, e) {
+      this.$emit(`update:${type}`, e)
+    },
+    validate() {
+      return new Promise((resolve, reject) => {
+        const salePerson = this.salePerson
+        const saleWay = this.saleWay
+        const pass = salePerson.length > 0 && saleWay.length > 0
+        if (pass) {
+          resolve()
+        } else {
+          reject()
+        }
+      })
+    },
+    setDefaultUserFn() {
+      if (this.setDefaultUser) {
+        if (this.currentUserId) {
+          this.updateSyncData('salePerson', [this.currentUserId])
+        }
+      }
+    },
+    findDeepestNodes(treeData = []) {
+      let deepestNodes = []
+      function findDeepestValues(node) {
+        if (!node.children || node.children.length === 0) {
+          return [node];
+        }
+        let nodes = [];
+        node.children.forEach(child => {
+          nodes = nodes.concat(findDeepestValues(child));
+        });
+        return nodes
+      }
+      treeData.forEach(node => {
+        deepestNodes = deepestNodes.concat(findDeepestValues(node));
+      });
+
+      return deepestNodes
+    },
+    getSelectSalePersonDetailList(personList = this.salePerson) {
+      // 按照选择的顺序取
+      const arr = []
+      personList.forEach(id => {
+        const target = this.deepestNodesArr.find(opt => opt.value === id)
+        if (target) {
+          arr.push(target)
+        }
+      })
+      return arr
+    },
+    onSalePersonSelectChange(e) {
+      this.initSalePersonList(e)
+    },
+    initSalePersonList(e) {
+      const selectDetailList = this.getSelectSalePersonDetailList(e)
+      const arr = selectDetailList.map(item => {
+        const saleWayKey = this.getDefaultSaleWayKey(item) || ''
+        return new SalePersonTableRow(item.label, item.value, '', saleWayKey)
+      })
+      this.updateSyncData('salePersonTableList', arr)
+    },
+    calcSalePersonLastColumnMoney() {
+      // 1. 计算最后一个格子的金额
+      let eNum = 0
+      this.salePersonTableList.forEach((p, index) => {
+        if (index <= this.getLastEditLineIndex()) {
+          eNum += Number(p.money)
+        }
+      })
+      return eNum
+    },
+    compareDepName(a = '', b = '') {
+      return a.includes(b) || b.includes(a)
+    },
+    getSummaries(param) {
+      const { columns } = param
+      const sums = [];
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '合计';
+          return;
+        }
+        if (index === 1) {
+          sums[index] = this.salesMoneyTotalNum || '-';
+          return
+        }
+        if (index === 2) {
+          sums[index] = '-';
+          return
+        }
+      });
+      return sums;
+    },
+    initSaleWayDefaultValue() {
+      if (this.salePerson.length === 1) {
+        const depInfo = this.salePersonDetailInfo[0]
+        const saleWayKey = this.getDefaultSaleWayKey(depInfo)
+        if (saleWayKey) {
+          this.updateSyncData('saleWay', saleWayKey)
+        }
+      } else {
+        this.salePersonDetailInfo.forEach((depInfo, index) => {
+          const saleWayKey = this.getDefaultSaleWayKey(depInfo)
+          // this.form.salePersonTableList[index].saleWay = saleWayKey
+          if (saleWayKey) {
+            this.onChangeTableLineData('saleWay', index, saleWayKey)
+          }
+        })
+      }
+    },
+    getSaleWayIdWith2(id) {
+      const prop = this.conf.cascaderProps.value
+      const target = this.saleChannelOptions.find(channel => {
+        if (Array.isArray(channel.children)) {
+          return channel.children.find(c => c[prop] === id)
+        }
+      })
+      if (target) {
+        return target[prop]
+      }
+    },
+    getDefaultSaleWayKey(depInfo) {
+      if (!depInfo) return
+      const deptId = depInfo.deptId
+      if (this.defaultSaleChannel) {
+        const defaultSaleWayId = this.defaultSaleChannel[deptId]
+        if (defaultSaleWayId) {
+          const saleWayKey2 = this.getSaleWayIdWith2(defaultSaleWayId)
+          if (saleWayKey2) {
+            const saleWayKey = [saleWayKey2, defaultSaleWayId]
+            return saleWayKey
+          }
+        }
+      }
+    },
+    calcLastColumnMoney(changedIndex, data) {
+      // 1. 计算最后一个格子的金额
+      // 1.1 先计算除了最后一个的总和
+      let eNum = 0
+      this.salePersonTableList.forEach((p, index) => {
+        // 如果是当前更改index，则替换新值
+        const money = index === changedIndex ? data : p.money
+        if (index <= this.salePersonTableList.length - 2) {
+          // eNum += Number(p.money)
+          // 高精度计算
+          eNum = add(eNum, Number(money))
+        }
+      })
+      
+      // const lastMoney = this.salesMoneyTotalNum - eNum
+      // 高精度计算
+      const lastMoney = sub(this.salesMoneyTotalNum ,eNum)
+
+      return lastMoney
+    },
+    getLastEditLineIndex() {
+      return this.salePersonTableList.length - 1
+    },
+    onSalePersonSplitMoneyChange(scope, e) {
+      const index = scope.$index
+      this.onChangeTableLineData('money', index, e)
+      if (!this.hasContract) {
+        this.onChangeTableLineData('money', index, '')
+        return this.$message({
+          message: '请先输入合同金额',
+          type: 'warning'
+        })
+      }
+      if (scope.row.money === 0 || scope.row.money === '0') {
+        this.onChangeTableLineData('money', index, '')
+        return this.$message({
+          message: '不可为0',
+          type: 'warning'
+        })
+      }
+
+      let lastMoney = this.calcLastColumnMoney(index, e)
+      // 1.2 限制当前格子的金额
+      if (lastMoney < 0) {
+        this.$message({
+          message: '合计值需小于应收金额',
+          type: 'warning'
+        })
+        this.onChangeTableLineData('money', index, '')
+        lastMoney = this.calcLastColumnMoney(index, 0)
+      }
+      // 同一个函数内只执行一行的更新，否则会造成数据丢失
+      this.$nextTick(() => {
+        this.onChangeTableLineData('money', this.getLastEditLineIndex(), lastMoney)
+      })
+    },
+    onChangeTableLineData(key, index, e) {
+      this.updatePageFormArrayObjectValue({
+        arrayName: 'salePersonTableList',
+        index,
+        key,
+        newValue: e
+      })
+    },
+    updatePageFormArrayObjectValue(conf = {}) {
+      const { arrayName, index, key, newValue } = conf
+      const newArray = cloneDeep(this[arrayName])
+      newArray[index][key] = newValue
+      this.updateSyncData('salePersonTableList', newArray)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.performance-belongs-line {
+  $radius: 4px;
+  ::v-deep {
+    .el-input-group__append {
+      background: transparent;
+      border: none;
+      color: $gray_10;
+    }
+    .el-input-group--append {
+      width: auto;
+      .el-input__inner {
+        width: 128px;
+        border-top-right-radius: $radius;
+        border-bottom-right-radius: $radius;
+      }
+    }
+  }
+
+  .sales-person-select {
+    ::v-deep {
+      .el-select {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>

src/views/create-order/components/performanceBelongsModule.vue

@@ -1,91 +1,30 @@
 <template>
   <!-- 业绩归属 -->
-  <el-form ref="form" label-width="156px" class="performance-belongs-container">
-    <el-form-item class="performance-belongs-line" label="销售人员" :required="required.salePerson">
-      <SelectTree
-        class="sales-person-select"
-        :value="pageForm.salePerson"
-        @input="setPageFormData('salePerson', $event)"
-        @change="onSalePersonSelectChange"
-        :options="salesDepList"
-        placeholder="请选择销售人员">
-      </SelectTree>
-      <div class="sale-person-list-container" v-if="pageForm.salePerson.length > 1">
-        <el-table
-          :data="pageForm.salePersonTableList"
-          :summary-method="getSummaries"
-          show-summary
-          stripe
-          border>
-          <el-table-column
-            prop="name"
-            header-align="center"
-            align="center"
-            label="销售人员">
-          </el-table-column>
-          <el-table-column
-            prop="money"
-            header-align="center"
-            align="center"
-            label="销售业绩（元）">
-            <template slot-scope="scope">
-              <number-input
-                :value="pageForm.salePersonTableList[scope.$index].money"
-                @input="onSalePersonSplitMoneyChange(scope, $event)"
-                :disabled="scope.$index === getLastEditLineIndex()"
-                type="number"
-                :decimal="2"
-                placeholder="请输入"
-                size="medium"
-              ></number-input>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="saleWay"
-            header-align="center"
-            align="center"
-            label="销售渠道">
-            <template slot-scope="scope" >
-              <el-cascader
-                :options="saleChannelOptions"
-                :props="conf.cascaderProps"
-                :value="pageForm.salePersonTableList[scope.$index].saleWay"
-                @input="onChangeTableLineData('saleWay', scope.$index, $event)"
-                size="medium"
-                placeholder="请选择销售渠道"
-                clearable></el-cascader>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-    </el-form-item>
-    <el-form-item class="performance-belongs-line" label="销售渠道" v-if="onlyOneSale" :required="required.saleWay && onlyOneSale">
-      <el-cascader
-        :value="pageForm.saleWay"
-        @input="setPageFormData('saleWay', $event)"
-        :options="saleChannelOptions"
-        :props="conf.cascaderProps"
-        size="medium"
-        placeholder="请选择销售渠道"
-        clearable></el-cascader>
-    </el-form-item>
-  </el-form>
+  <div class="performance-belongs-container-wrapper">
+    <performanceBelongs
+      :salePerson="pageForm.salePerson"
+      @update:salePerson="setPageFormData('salePerson', $event)"
+      :saleWay="pageForm.saleWay"
+      @update:saleWay="setPageFormData('saleWay', $event)"
+      :salePersonTableList="pageForm.salePersonTableList"
+      @update:salePersonTableList="setPageFormData('salePersonTableList', $event)"
+      :salesMoneyTotal="salesMoneyTotal"
+      :hasContract="pageTotalMoney.hasContract"
+      :setDefaultUser="setDefaultUser"
+    />
+  </div>
 </template>
 
 <script>
-import NumberInput from '@/views/create-order/ui/NumberInput.vue'
-import SelectTree from '@/views/create-order/components/product-info-submodule/select-tree'
-import { mapState, mapGetters } from 'vuex'
+import performanceBelongs from './performanceBelongs'
+import { mapGetters } from 'vuex'
 import { pageFormState } from '@/views/create-order/mixins'
-import { SalePersonTableRow } from '@/views/create-order/data/interface'
-import { add, sub } from '@/utils/number'
 
 export default {
   name: 'PerformanceBelongsModule',
   mixins: [pageFormState],
   components: {
-    NumberInput,
-    SelectTree,
+    performanceBelongs,
   },
   props: {
     setDefaultUser: {
@@ -119,288 +58,15 @@ export default {
     }
   },
   computed: {
-    ...mapState({
-      currentUserId: state => state.order.conf.currentUserEntId,
-      defaultSaleChannel: state => state.order.conf.defaultSaleChannel,
-    }),
     ...mapGetters('order', [
-      'depTreeList',
-      'saleChannelOptions',
       'pageTotalMoney',
       'salesMoneyTotal',
     ]),
-    salesDepList() {
-      return this.depTreeList
-    },
-    onlyOneSale() {
-      return this.pageForm.salePerson.length === 1
-    },
-    salePersonDetailInfo() {
-      return this.pageForm.salePerson.map(fs => {
-        return this.deepestNodesArr.find(r => r.value === fs)
-      })
-    },
-    salesMoneyTotalNum() {
-      // 销售业绩=合同金额-渠道佣金
-      // return this.pageTotalMoney.contract - this.pageForm.channelCommission
-      return this.salesMoneyTotal
-    },
-    deepestNodesArr() {
-      return this.findDeepestNodes(this.salesDepList)
-    },
-    requiredList() {
-      return [
-        {
-          field: 'paymentCount',
-          message: '回款次数为必填项', // 错误提示文案
-          rank: 2, // 提示优先级，值越小优先级越高
-          required: this.required.paymentCount,
-        },
-        {
-          field: 'paymentDeadline',
-          message: '回款时间为必填项', // 错误提示文案
-          rank: 2,
-          required: this.required.paymentDeadline,
-        },
-      ].filter(f => f.required)
-    },
-  },
-  watch: {
-    'pageForm.salePerson': function() {
-      this.initSaleWayDefaultValue()
-    },
-    currentUserId: {
-      immediate: true,
-      handler() {
-        this.setDefaultUserFn()
-      }
-    }
   },
-  methods: {
-    validate() {
-      return new Promise((resolve, reject) => {
-        const { salePerson, saleWay } = this.pageForm
-        const pass = salePerson.length > 0 && saleWay.length > 0
-        if (pass) {
-          resolve()
-        } else {
-          reject()
-        }
-      })
-    },
-    setDefaultUserFn() {
-      if (this.setDefaultUser) {
-        if (this.currentUserId) {
-          this.setPageFormData('salePerson', [this.currentUserId])
-        }
-      }
-    },
-    findDeepestNodes(treeData = []) {
-      let deepestNodes = []
-      function findDeepestValues(node) {
-        if (!node.children || node.children.length === 0) {
-          return [node];
-        }
-        let nodes = [];
-        node.children.forEach(child => {
-          nodes = nodes.concat(findDeepestValues(child));
-        });
-        return nodes
-      }
-      treeData.forEach(node => {
-        deepestNodes = deepestNodes.concat(findDeepestValues(node));
-      });
-
-      return deepestNodes
-    },
-    getSelectSalePersonDetailList() {
-      // 按照选择的顺序取
-      const { salePerson } = this.pageForm
-      const arr = []
-      salePerson.forEach(id => {
-        const target = this.deepestNodesArr.find(opt => opt.value === id)
-        if (target) {
-          arr.push(target)
-        }
-      })
-      return arr
-    },
-    onSalePersonSelectChange() {
-      this.initSalePersonList()
-    },
-    initSalePersonList() {
-      const selectDetailList = this.getSelectSalePersonDetailList()
-      const arr = selectDetailList.map(item => {
-        const saleWayKey = this.getDefaultSaleWayKey(item) || ''
-        return new SalePersonTableRow(item.label, item.value, '', saleWayKey)
-      })
-      this.setPageFormData('salePersonTableList', arr)
-    },
-    calcSalePersonLastColumnMoney() {
-      // 1. 计算最后一个格子的金额
-      let eNum = 0
-      this.pageForm.salePersonTableList.forEach((p, index) => {
-        if (index <= this.getLastEditLineIndex()) {
-          eNum += Number(p.money)
-        }
-      })
-      return eNum
-    },
-    compareDepName(a = '', b = '') {
-      return a.includes(b) || b.includes(a)
-    },
-    getSummaries(param) {
-      const { columns } = param
-      const sums = [];
-      columns.forEach((column, index) => {
-        if (index === 0) {
-          sums[index] = '合计';
-          return;
-        }
-        if (index === 1) {
-          sums[index] = this.salesMoneyTotalNum || '-';
-          return
-        }
-        if (index === 2) {
-          sums[index] = '-';
-          return
-        }
-      });
-      return sums;
-    },
-    initSaleWayDefaultValue() {
-      const { salePerson } = this.pageForm
-      if (salePerson.length === 1) {
-        const depInfo = this.salePersonDetailInfo[0]
-        const saleWayKey = this.getDefaultSaleWayKey(depInfo)
-        // this.form.saleWay = saleWayKey
-        if (saleWayKey) {
-          this.setPageFormData('saleWay', saleWayKey)
-        }
-      } else {
-        this.salePersonDetailInfo.forEach((depInfo, index) => {
-          const saleWayKey = this.getDefaultSaleWayKey(depInfo)
-          // this.form.salePersonTableList[index].saleWay = saleWayKey
-          if (saleWayKey) {
-            this.onChangeTableLineData('saleWay', index, saleWayKey)
-          }
-        })
-      }
-    },
-    getSaleWayIdWith2(id) {
-      const prop = this.conf.cascaderProps.value
-      const target = this.saleChannelOptions.find(channel => {
-        if (Array.isArray(channel.children)) {
-          return channel.children.find(c => c[prop] === id)
-        }
-        console.log(channel.children)
-      })
-      if (target) {
-        return target[prop]
-      }
-    },
-    getDefaultSaleWayKey(depInfo) {
-      if (!depInfo) return
-      const deptId = depInfo.deptId
-      if (this.defaultSaleChannel) {
-        const defaultSaleWayId = this.defaultSaleChannel[deptId]
-        if (defaultSaleWayId) {
-          const saleWayKey2 = this.getSaleWayIdWith2(defaultSaleWayId)
-          if (saleWayKey2) {
-            const saleWayKey = [saleWayKey2, defaultSaleWayId]
-            return saleWayKey
-          }
-        }
-      }
-    },
-    calcLastColumnMoney() {
-      // 1. 计算最后一个格子的金额
-      // 1.1 先计算除了最后一个的总和
-      let eNum = 0
-      this.pageForm.salePersonTableList.forEach((p, index) => {
-        if (index <= this.pageForm.salePersonTableList.length - 2) {
-          // eNum += Number(p.money)
-          // 高精度计算
-          eNum = add(eNum, Number(p.money))
-        }
-      })
-      
-      // const lastMoney = this.salesMoneyTotalNum - eNum
-      // 高精度计算
-      const lastMoney = sub(this.salesMoneyTotalNum ,eNum)
-
-      return lastMoney
-    },
-    getLastEditLineIndex() {
-      return this.pageForm.salePersonTableList.length - 1
-    },
-    onSalePersonSplitMoneyChange(scope, e) {
-      const index = scope.$index
-      this.onChangeTableLineData('money', index, e)
-      if (!this.pageTotalMoney.hasContract) {
-        this.onChangeTableLineData('money', index, '')
-        return this.$message({
-          message: '请先输入合同金额',
-          type: 'warning'
-        })
-      }
-      if (scope.row.money === 0 || scope.row.money === '0') {
-        this.onChangeTableLineData('money', index, '')
-        return this.$message({
-          message: '不可为0',
-          type: 'warning'
-        })
-      }
-
-      let lastMoney = this.calcLastColumnMoney()
-      // 1.2 限制当前格子的金额
-      if (lastMoney < 0) {
-        this.$message({
-          message: '合计值需小于应收金额',
-          type: 'warning'
-        })
-        this.onChangeTableLineData('money', index, '')
-        lastMoney = this.calcLastColumnMoney()
-      }
-      this.onChangeTableLineData('money', this.getLastEditLineIndex(), lastMoney)
-    },
-    onChangeTableLineData(key, index, e) {
-      this.updatePageFormArrayObjectValue({
-        arrayName: 'salePersonTableList',
-        index,
-        key,
-        newValue: e
-      })
-    },
-  }
+  methods: {}
 }
 </script>
 
 <style lang="scss" scoped>
-.performance-belongs-line {
-  $radius: 4px;
-  ::v-deep {
-    .el-input-group__append {
-      background: transparent;
-      border: none;
-      color: $gray_10;
-    }
-    .el-input-group--append {
-      width: auto;
-      .el-input__inner {
-        width: 128px;
-        border-top-right-radius: $radius;
-        border-bottom-right-radius: $radius;
-      }
-    }
-  }
 
-  .sales-person-select {
-    ::v-deep {
-      .el-select {
-        width: 100%;
-      }
-    }
-  }
-}
 </style>