分润认领调整

src/views/bonus/process/index.vue

@@ -63,4 +63,7 @@ export default {
 
 <style lang="scss" scoped>
   /* 自定义样式 */
+  ::v-deep .el-tabs__content {
+    overflow: visible !important;
+  }
 </style>

src/views/bonus/process/network/index.vue

@@ -46,7 +46,8 @@ export default {
         { label: '绩效奖金处理状态', prop: 'status' }
       ],
       items: [],
-      loading: false
+      loading: false,
+      defaultOrganization: null
     }
   },
   computed: {
@@ -89,6 +90,7 @@ export default {
   mounted () {
     if (this.organizationTree.length > 0) {
       this.searchValues.parentOrganizationNo = this.organizationItems[0].organizationNo
+      this.defaultOrganization = this.organizationItems[0].organizationNo
     }
   },
   methods: {
@@ -104,6 +106,9 @@ export default {
       }
     },
     onSearch () {
+      if (!this.searchValues.parentOrganizationNo) {
+        this.searchValues.parentOrganizationNo = this.defaultOrganization
+      }
       this.onInit()
     }
   }

src/views/salary/claim/claimConfig/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <ParamsSetting ref="paramsSettingRefs" :card-title="cardTitle" configuration-category="绩效分润配置"></ParamsSetting>
+  </div>
+</template>
+
+<script>
+import ParamsSetting from '@/components/ParamsSetting'
+export default {
+  name: 'ClaimConfig',
+  components: {
+    ParamsSetting
+  },
+  data () {
+    return {
+      cardTitle: null
+    }
+  },
+  methods: {
+    onInit (title) {
+      this.cardTitle = title
+      this.$refs.paramsSettingRefs.onInit()
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/salary/claim/components/form.vue

@@ -1,30 +1,32 @@
 <template>
   <m-dialog title="分润认领" ref="dialog" @sure="onSure">
-    <m-divider content-position="left">基准分润</m-divider>
-    <m-form :items="showItemForm" v-model="itemData"></m-form>
-    <m-divider content-position="left">新增分润认领</m-divider>
-    <m-form ref="form" :items="formItems" v-model="formValues" v-loading="loading"></m-form>
+    <m-form ref="form" :items="formItems" v-model="formValues" v-loading="loading">
+      <template #customerId>
+        <el-tag>{{ itemData.customerId }}</el-tag>
+      </template>
+      <template #employeeProfitSharingRatio>
+        <el-tag>{{ itemData.employeeProfitSharingRatio * 100 }}</el-tag>
+      </template>
+      <template #[`employeeProfitSharingRatio.append`]>
+        %
+      </template>
+    </m-form>
   </m-dialog>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import {
-  getCustomerProfitSharingClaimDeptAdd,
-  getCustomerProfitSharingClaimStaffAdd,
-  getCustomerProfitSharingClaimAdd
-} from '@/api/salary'
+// import {
+//   getCustomerProfitSharingClaimDeptAdd,
+//   getCustomerProfitSharingClaimStaffAdd,
+//   getCustomerProfitSharingClaimAdd
+// } from '@/api/salary'
 import { getRosterList } from '@/api/system'
 export default {
   name: 'ClaimForm',
-  props: {
-    staff: {
-      type: Boolean,
-      default: false
-    }
-  },
   data () {
     return {
+      isStaff: false,
       formValues: {
         serialNumber: null,
         unifiedCertificationNumber: null,
@@ -32,30 +34,11 @@ export default {
         employeeProfitSharingRatio: null
       },
       itemData: {},
-      showItemForm: [{
-        label: '客户编号',
-        prop: 'customerId',
-        type: 'select',
-        items: [],
-        options: {
-          filterable: true,
-          remote: true,
-          disabled: true
-        }
-      }, {
-        label: '员工分润比例',
-        prop: 'ratioShow',
-        type: 'select',
-        options: {
-          filterable: true,
-          remote: true,
-          disabled: true
-        }
-      }],
       filterLoading: false,
       loading: false,
       empList: [],
-      items: []
+      items: [],
+      submitApi: null
     }
   },
   computed: {
@@ -68,9 +51,17 @@ export default {
     },
     formItems () {
       return [
+        {
+          label: '客户编号',
+          prop: 'customerId'
+        }, {
+          label: '员工分润比例',
+          prop: 'employeeProfitSharingRatio'
+        },
         {
           label: '所属机构',
           prop: 'organizationNo',
+          hidden: !this.isStaff,
           type: 'cascader',
           rules: [
             { required: true, message: '请选择所属机构', trigger: 'change' }
@@ -93,7 +84,7 @@ export default {
           handles: {
             change: (v) => {
               const nodes = this.$refs.form.$refs.organizationNo.getCheckedNodes()
-              this.getEmpData(nodes[0]?.data?.organizationNo, nodes[0]?.data?.organizationCategory)
+              this.getEmpData(nodes[0]?.data?.organizationNo)
             }
           }
         },
@@ -102,7 +93,7 @@ export default {
           prop: 'unifiedCertificationNumber',
           type: 'select',
           options: {
-            placeholder: '请选择分润员工',
+            placeholder: '请输入员工姓名',
             filterable: true,
             remote: true,
             labelText: 'employeeName',
@@ -119,32 +110,44 @@ export default {
         {
           label: '分润比例',
           prop: 'employeeProfitSharingRatio',
-          type: 'number',
+          type: 'input',
+          slots: ['append'],
           options: {
-            precision: 0,
-            min: 1,
-            max: 100,
             placeholder: '请输入分润比例'
           },
           rules: [
-            { required: true, message: '请输入分润比例', trigger: 'blur' }
+            {
+              validator: (rule, value, callback) => {
+                if (!value) {
+                  return callback(new Error('请输入分润比例'))
+                }
+                if (isNaN(value) || isNaN(parseFloat(value))) {
+                  callback(new Error('请输入数字值'))
+                } else {
+                  if (value > 100 || value < 0) {
+                    callback(new Error('请输入0-100的数字值'))
+                  } else {
+                    callback()
+                  }
+                }
+              },
+              trigger: ['blur', 'change']
+            }
           ]
         }
       ]
     }
   },
   methods: {
-    async getEmpData (id, organizationCategory) {
-      if (!id) {
+    async getEmpData (organizationNo) {
+      if (!organizationNo) {
         this.empList = []
         return
       }
       try {
         this.filterLoading = true
-        const organizationNoKey = organizationCategory === '支行' ? 'parentOrganizationNo' : 'organizationNo'
         const params = {
-          // entity: { [organizationNoKey]: id },
-          [organizationNoKey]: id,
+          organizationNo,
           page: { current: 1, size: 9999 }
         }
         const { data } = await getRosterList(params)
@@ -156,44 +159,56 @@ export default {
         this.filterLoading = false
       }
     },
-    async open (item) {
+    async open (item, isStaff, api) {
+      this.submitApi = api
+      this.isStaff = isStaff
       this.loading = true
       this.itemData = item || {}
-      if (item?.employeeProfitSharingRatio) this.itemData.ratioShow = item.employeeProfitSharingRatio * 100
+      this.$refs.dialog.open()
       this.formValues = {
         serialNumber: item.serialNumber,
         customerId: item.customerId,
-        organizationNo: null,
+        organizationNo: item.organizationNo,
         unifiedCertificationNumber: null,
         employeeProfitSharingRatio: null
       }
-      this.$refs.dialog.open()
-
+      await this.getEmpData(item.organizationNo)
       this.$nextTick(() => {
         this.$refs.form.clearValidate()
         this.loading = false
       })
     },
+    close () {
+      this.$refs.dialog.close()
+    },
+    setLoading (val) {
+      this.loading = val
+    },
     onSure () {
       this.$refs.form.validate(async valid => {
         if (!valid) {
           return
         }
-        this.loading = true
-        try {
-          const api = this.itemData?.isDept ? getCustomerProfitSharingClaimDeptAdd : this.staff ? getCustomerProfitSharingClaimStaffAdd : getCustomerProfitSharingClaimAdd
-          await api({
-            ...this.formValues,
-            employeeProfitSharingRatio: this.formValues.employeeProfitSharingRatio / 100
-          })
-          this.$refs.dialog.close()
-          this.$message.success('操作成功')
-          this.$emit('success')
-        } catch (error) {
-          this.$message.error(error)
-        } finally {
-          this.loading = false
-        }
+        const { employeeProfitSharingRatio, ...query } = this.formValues
+        this.$emit('submit', {
+          ...query,
+          employeeProfitSharingRatio: employeeProfitSharingRatio / 100
+        })
+        // this.loading = true
+        // try {
+        //   // const api = this.itemData?.isDept ? getCustomerProfitSharingClaimDeptAdd : this.isStaff ? getCustomerProfitSharingClaimStaffAdd : getCustomerProfitSharingClaimAdd
+        //   await this.submitApi({
+        //     ...this.formValues,
+        //     employeeProfitSharingRatio: this.formValues.employeeProfitSharingRatio / 100
+        //   })
+        //   this.$refs.dialog.close()
+        //   this.$message.success('操作成功')
+        //   this.$emit('success')
+        // } catch (error) {
+        //   this.$message.error(error)
+        // } finally {
+        //   this.loading = false
+        // }
       })
     }
   }

src/views/salary/claim/components/table.vue

@@ -1,130 +0,0 @@
-<template>
-  <div>
-    <m-search class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
-    <m-table
-      v-loading="loading"
-      :items="items"
-      :headers="headers"
-      :page-size="pageInfo.size"
-      :page-current="pageInfo.current"
-      :total="total"
-      @page-change="onPageChange"
-    >
-      <!-- <template #card-tools>
-        <m-button type="orange" icon="el-icon-plus" @click="onAdd">新增</m-button>
-      </template> -->
-      <template #actions="{ row }">
-        <m-button type="primary" text @click="onEdit(row)">分润认领</m-button>
-        <!-- <m-button type="danger" text @click="onDelete(row)">删除</m-button> -->
-      </template>
-    </m-table>
-  </div>
-</template>
-
-<script>
-import { getCustomerProfitSharingClaim } from '@/api/salary'
-export default {
-  name: 'salaryClaimCommonTable',
-  props: {
-    type: {
-      type: String,
-      default: '0'
-    }
-  },
-  data () {
-    return {
-      searchItems: [
-        {
-          label: '客户编号',
-          prop: 'customerId',
-          type: 'input',
-          options: {
-            placeholder: '请输入客户编号'
-          }
-        },
-        {
-          label: '科目名称',
-          prop: 'subjectName',
-          type: 'input',
-          options: {
-            placeholder: '请输入科目名称'
-          }
-        }
-      ],
-      searchValues: {
-        subjectName: null,
-        customerId: null
-      },
-      headers: [
-        { label: '客户编号', prop: 'customerId' },
-        { label: '一级科目编码/名称', prop: 'oneLevelSubject' },
-        { label: '二级科目编码/名称', prop: 'twoLevelSubject' },
-        { label: '金额', prop: 'amount' },
-        { label: '统一认证号1', prop: 'unifiedCertificationNumber1' },
-        { label: '统一认证号2', prop: 'unifiedCertificationNumber2' },
-        { label: '数据日期', prop: 'dataDate' },
-        { label: '管户层级标识', prop: 'customerLevelIdentifier' },
-        { label: '客户类别标识', prop: 'customerCategoryIdentifier' },
-        { label: '员工分润比例', prop: 'employeeProfitSharingRatio' },
-        { label: '操作', prop: 'actions', fixed: 'right' }
-      ],
-      items: [],
-      total: 0,
-      pageInfo: {
-        current: 1,
-        size: 10
-      },
-      loading: false
-    }
-  },
-  methods: {
-    async onInit () {
-      this.loading = true
-      try {
-        const { data } = await getCustomerProfitSharingClaim({
-          ...this.pageInfo,
-          level: this.type,
-          ...this.searchValues
-        })
-        this.items = data.records
-        this.total = data.total
-      } catch (error) {
-        this.$message.error(error)
-      } finally {
-        this.loading = false
-      }
-    },
-    onAdd () {
-      this.$refs.templateRefs.open()
-    },
-    onEdit (item) {
-      this.$refs.templateRefs.open(item)
-    },
-    onDelete (row) {
-      this.$confirm('确定删除吗？', '提示')
-        .then(async () => {
-          try {
-            // await ApiName({ id: row.id })
-            this.$message.success('删除成功')
-            this.onInit()
-          } catch (error) {
-            this.$message.error(error)
-          }
-        })
-        .catch(_ => {})
-    },
-    onSearch () {
-      this.pageInfo.current = 1
-      this.onInit()
-    },
-    onPageChange (index) {
-      this.pageInfo.current = index
-      this.onInit()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  /* 自定义样式 */
-</style>

src/views/salary/claim/corporateFinance/index.vue

@@ -1,29 +0,0 @@
-<template>
-  <div>
-    <table-page ref="tableRef" type="4" />
-  </div>
-</template>
-
-<script>
-// 公司金融业务部业绩分润
-import TablePage from '../components/table.vue'
-export default {
-  name: 'salaryClaimCorporateFinance',
-  components: {
-    TablePage
-  },
-  data () {
-    return {
-    }
-  },
-  methods: {
-    onInit () {
-      this.$refs.tableRef.onInit()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  /* 自定义样式 */
-</style>

src/views/salary/claim/index copy.vue

@@ -1,65 +0,0 @@
-<template>
-  <div class="pa-3 white">
-    <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane
-        v-for="item in items"
-        :key="item.name"
-        :label="item.label"
-        :name="item.name"
-      >
-        <component :is="item.component" :ref="item.name" :label="item.label" @hook:mounted="onComponentMounted"></component>
-      </el-tab-pane>
-    </el-tabs>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'SalaryClaimIndex',
-  data () {
-    return {
-      activeName: '',
-      items: []
-    }
-  },
-  created () {
-    this.items = this.$route.meta.roles.filter(e => e.hidden === 1).sort((a, b) => a.sort - b.sort).map(e => {
-      return {
-        name: e.name,
-        label: e.label,
-        component: () => import(`./${e.component}/index.vue`)
-      }
-    })
-    if (this.$route.query.name) {
-      this.activeName = this.$route.query.name
-    } else {
-      this.activeName = this.items[0].name
-    }
-  },
-  computed: {
-    name () {
-      return this.items.find(e => e.name === this.activeName)?.label ?? ''
-    }
-  },
-  methods: {
-    onComponentMounted () {
-      this.$nextTick(() => {
-        if (!this.$refs[this.activeName]) {
-          return
-        }
-        this.$refs[this.activeName][0].onInit && this.$refs[this.activeName][0].onInit(this.name)
-      })
-    },
-    handleClick () {
-      this.$router.push(`${this.$route.path}?name=${this.activeName}`)
-      this.$nextTick(() => {
-        this.$refs[this.activeName][0].onInit && this.$refs[this.activeName][0].onInit(this.name)
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  /* 自定义样式 */
-</style>

src/views/salary/claim/index.vue

@@ -48,13 +48,13 @@ export default {
           return
         }
         // 员工分润认领必须输入客户编号才能搜索
-        if (this.activeName === 'staff') return
+        // if (this.activeName === 'staff') return
         this.$refs[this.activeName][0].onInit && this.$refs[this.activeName][0].onInit(this.name)
       })
     },
     handleClick () {
       this.$router.push(`${this.$route.path}?name=${this.activeName}`)
-      if (this.activeName === 'staff') return
+      // if (this.activeName === 'staff') return
       this.$nextTick(() => {
         this.$refs[this.activeName][0].onInit && this.$refs[this.activeName][0].onInit(this.name)
       })
@@ -65,4 +65,7 @@ export default {
 
 <style lang="scss" scoped>
   /* 自定义样式 */
+  ::v-deep .el-tabs__content {
+    overflow: visible !important;
+  }
 </style>

src/views/salary/claim/institutionalBanking/index.vue

@@ -1,29 +0,0 @@
-<template>
-  <div>
-    <table-page ref="tableRef" type="5" />
-  </div>
-</template>
-
-<script>
-// 机构金融业务部业绩分润
-import TablePage from '../components/table.vue'
-export default {
-  name: 'salaryClaimInstitutionalBanking',
-  components: {
-    TablePage
-  },
-  data () {
-    return {
-    }
-  },
-  methods: {
-    onInit () {
-      this.$refs.tableRef.onInit()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  /* 自定义样式 */
-</style>

src/views/salary/claim/network/index.vue

@@ -1,28 +0,0 @@
-<template>
-  <div>
-    <table-page ref="tableRef" type="1" />
-  </div>
-</template>
-
-<script>
-// 网点业绩分润
-import TablePage from '../components/table.vue'
-export default {
-  name: 'salaryClaimNetwork',
-  components: {
-    TablePage
-  },
-  data () {
-    return {}
-  },
-  methods: {
-    onInit () {
-      this.$refs.tableRef.onInit()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  /* 自定义样式 */
-</style>

src/views/salary/claim/personalFinance/index.vue

@@ -1,29 +0,0 @@
-<template>
-  <div>
-    <table-page ref="tableRef" type="2" />
-  </div>
-</template>
-
-<script>
-// 个人金融业务部业绩分润
-import TablePage from '../components/table.vue'
-export default {
-  name: 'salaryClaimPersonalFinance',
-  components: {
-    TablePage
-  },
-  data () {
-    return {
-    }
-  },
-  methods: {
-    onInit () {
-      this.$refs.tableRef.onInit()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  /* 自定义样式 */
-</style>

src/views/salary/claim/personalLoans/index.vue

@@ -1,29 +0,0 @@
-<template>
-  <div>
-    <table-page ref="tableRef" type="3" />
-  </div>
-</template>
-
-<script>
-// 个人贷款业务部业绩分润
-import TablePage from '../components/table.vue'
-export default {
-  name: 'salaryClaimPersonalLoans',
-  components: {
-    TablePage
-  },
-  data () {
-    return {
-    }
-  },
-  methods: {
-    onInit () {
-      this.$refs.tableRef.onInit()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  /* 自定义样式 */
-</style>

src/views/salary/claim/sharingClaim/index.vue

@@ -2,7 +2,9 @@
   <div>
     <m-search class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
     <m-table
+      :cardTitle="cardTitle"
       v-loading="loading"
+      v-permission="['salary:claim:sharingClaim:list']"
       :items="items"
       :headers="headers"
       :page-size="pageInfo.size"
@@ -10,19 +12,30 @@
       :total="total"
       @page-change="onPageChange"
     >
+      <template #employeeProfitSharingRatio="{ row }">
+        {{ row.employeeProfitSharingRatio * 100 + '%' }}
+      </template>
       <template #actions="{ row }">
-        <m-button type="primary" text @click="onClaim(row)">分润认领</m-button>
-        <m-button type="primary" text @click="onClaim(row, true)">专业部门分配</m-button>
+        <m-button type="primary" text @click="onClaim(row, false)" v-permission="['salary:claim:sharingClaim:claim']">分润认领</m-button>
+        <m-button type="primary" text @click="onClaim(row, true)" v-permission="['salary:claim:sharingClaim:allot']">专业部门分配</m-button>
       </template>
     </m-table>
 
-    <ClaimForm ref="claimFormRef" @success="onInit" />
+    <ClaimForm ref="claimFormRef" @submit="onSubmit" />
   </div>
 </template>
 
 <script>
 import { dateFormat } from '@/utils/date'
-import { getProfitSharingClaim } from '@/api/salary'
+import {
+  getProfitSharingClaim,
+  getCustomerProfitSharingClaimDeptAdd,
+  getCustomerProfitSharingClaimAdd
+} from '@/api/salary'
+// import {
+
+//
+// } from '@/api/salary'
 import ClaimForm from '../components/form.vue'
 export default {
   name: 'salaryClaimSharing',
@@ -67,20 +80,20 @@ export default {
         month: dateFormat('YYYY-mm', new Date())
       },
       headers: [
-        { label: '客户编号', prop: 'customerId' },
-        { label: '一级科目编码/名称', prop: 'oneLevelSubject' },
-        { label: '二级科目编码/名称', prop: 'twoLevelSubject' },
+        { label: '客户编号', prop: 'customerId', align: 'center' },
+        { label: '一级科目编码/名称', prop: 'oneLevelSubject', width: 180 },
+        { label: '二级科目编码/名称', prop: 'twoLevelSubject', width: 180 },
         { label: '金额', prop: 'amount' },
         { label: '机构名称', prop: 'organizationName' },
-        { label: '统一认证号1', prop: 'unifiedCertificationNumber1' },
-        { label: '员工姓名1', prop: 'employeeName1' },
-        { label: '统一认证号2', prop: 'unifiedCertificationNumber2' },
-        { label: '员工姓名2', prop: 'employeeName2' },
-        { label: '数据日期', prop: 'dataDate' },
+        { label: '统一认证号1', prop: 'unifiedCertificationNumber1', width: 150 },
+        { label: '员工姓名1', prop: 'employeeName1', width: 120 },
+        { label: '统一认证号2', prop: 'unifiedCertificationNumber2', width: 150 },
+        { label: '员工姓名2', prop: 'employeeName2', width: 120 },
         { label: '管户层级标识', prop: 'customerLevelIdentifier' },
         { label: '客户类别标识', prop: 'customerCategoryIdentifier' },
-        { label: '员工分润比例', prop: 'employeeProfitSharingRatio' },
-        { label: '操作', prop: 'actions', fixed: 'right' }
+        { label: '员工分润比例', prop: 'employeeProfitSharingRatio', align: 'center' },
+        { label: '数据日期', prop: 'dataDate', width: 120 },
+        { label: '操作', prop: 'actions', fixed: 'right', width: 180 }
       ],
       items: [],
       total: 0,
@@ -88,14 +101,16 @@ export default {
         current: 1,
         size: 10
       },
-      loading: false
+      loading: false,
+      cardTitle: null,
+      isDept: false
     }
   },
-  created () {
-    this.onInit()
-  },
   methods: {
-    async onInit () {
+    async onInit (cardTitle) {
+      if (this.cardTitle) {
+        this.cardTitle = cardTitle
+      }
       this.loading = true
       try {
         const { data } = await getProfitSharingClaim({
@@ -110,9 +125,23 @@ export default {
         this.loading = false
       }
     },
-    onClaim (item, isDept = false) {
-      item.isDept = isDept
-      this.$refs.claimFormRef.open(item)
+    onClaim (item, isDept) {
+      this.isDept = isDept
+      this.$refs.claimFormRef.open(item, isDept)
+    },
+    async onSubmit (query) {
+      this.$refs.claimFormRef.setLoading(true)
+      const submitApi = this.isDept ? getCustomerProfitSharingClaimDeptAdd : getCustomerProfitSharingClaimAdd
+      try {
+        await submitApi(query)
+        this.$refs.claimFormRef.close()
+        this.$message.success('操作成功')
+        this.onInit()
+      } catch (error) {
+        this.$message.error(error)
+      } finally {
+        this.$refs.claimFormRef.setLoading(false)
+      }
     },
     onSearch () {
       this.pageInfo.current = 1

src/views/salary/claim/staff/index.vue

@@ -1,30 +1,36 @@
 <template>
   <div>
-    <m-search class="mb-3" :items="searchItems" v-model="searchValues" :customReset="true" @search="onSearch" @reset="onReset"></m-search>
-    <m-table
-      v-loading="loading"
-      :items="items"
-      :headers="headers"
-      :page-size="pageInfo.size"
-      :page-current="pageInfo.current"
-      :total="total"
-      @page-change="onPageChange"
-    >
-      <!-- <template #card-tools>
-        <m-button type="orange" icon="el-icon-plus" @click="onAdd">新增</m-button>
-      </template> -->
-      <template #actions="{ row }">
-        <m-button type="primary" text @click="onEdit(row)">分润认领</m-button>
-      </template>
-    </m-table>
+    <div v-if="!customerId" style="min-height: 400px;" class="d-flex justify-center align-center">
+      <div>
+        <el-input v-model="customerIdModel" placeholder="请输入客户编号"></el-input>
+      </div>
+      <m-button class="ml-3" type="orange" @click="onSearchCustomer">查询</m-button>
+    </div>
+    <template v-if="customerId">
+      <m-search class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
+      <m-table
+        v-loading="loading"
+        :cardTitle="cardTitle"
+        :items="items"
+        :headers="headers"
+        :page-size="pageInfo.size"
+        :page-current="pageInfo.current"
+        :total="total"
+        @page-change="onPageChange"
+      >
+        <template #actions="{ row }">
+          <m-button type="primary" text @click="onEdit(row)">分润认领</m-button>
+        </template>
+      </m-table>
+    </template>
 
-    <ClaimForm ref="claimFormRef" staff @success="onInit" />
+    <ClaimForm ref="claimFormRef"  @submit="onSubmit" />
   </div>
 </template>
 
 <script>
 import { dateFormat } from '@/utils/date'
-import { getCustomerProfitSharingClaim } from '@/api/salary'
+import { getCustomerProfitSharingClaim, getCustomerProfitSharingClaimStaffAdd } from '@/api/salary'
 import ClaimForm from '../components/form.vue'
 export default {
   name: 'salaryClaimStaff',
@@ -33,7 +39,18 @@ export default {
   },
   data () {
     return {
+      customerIdModel: null,
+      customerId: null,
       searchItems: [
+        {
+          label: '客户编号',
+          prop: 'customerId',
+          type: 'input',
+          options: {
+            clearable: false,
+            placeholder: '请输入客户编号'
+          }
+        },
         {
           label: '月份',
           prop: 'month',
@@ -46,14 +63,6 @@ export default {
             placeholder: '选择查询月份'
           }
         },
-        {
-          label: '客户编号',
-          prop: 'customerId',
-          type: 'input',
-          options: {
-            placeholder: '请输入客户编号'
-          }
-        },
         {
           label: '科目名称',
           prop: 'subjectName',
@@ -69,20 +78,20 @@ export default {
         month: dateFormat('YYYY-mm', new Date())
       },
       headers: [
-        { label: '客户编号', prop: 'customerId' },
-        { label: '一级科目编码/名称', prop: 'oneLevelSubject' },
-        { label: '二级科目编码/名称', prop: 'twoLevelSubject' },
+        { label: '客户编号', prop: 'customerId', align: 'center' },
+        { label: '一级科目编码/名称', prop: 'oneLevelSubject', width: 180 },
+        { label: '二级科目编码/名称', prop: 'twoLevelSubject', width: 180 },
         { label: '金额', prop: 'amount' },
         { label: '机构名称', prop: 'organizationName' },
-        { label: '统一认证号1', prop: 'unifiedCertificationNumber1' },
-        { label: '员工姓名1', prop: 'employeeName1' },
-        { label: '统一认证号2', prop: 'unifiedCertificationNumber2' },
-        { label: '员工姓名2', prop: 'employeeName2' },
-        { label: '数据日期', prop: 'dataDate' },
+        { label: '统一认证号1', prop: 'unifiedCertificationNumber1', width: 150 },
+        { label: '员工姓名1', prop: 'employeeName1', width: 120 },
+        { label: '统一认证号2', prop: 'unifiedCertificationNumber2', width: 150 },
+        { label: '员工姓名2', prop: 'employeeName2', width: 120 },
         { label: '管户层级标识', prop: 'customerLevelIdentifier' },
         { label: '客户类别标识', prop: 'customerCategoryIdentifier' },
-        { label: '员工分润比例', prop: 'employeeProfitSharingRatio' },
-        { label: '操作', prop: 'actions', fixed: 'right' }
+        { label: '员工分润比例', prop: 'employeeProfitSharingRatio', align: 'center' },
+        { label: '数据日期', prop: 'dataDate', width: 120 },
+        { label: '操作', prop: 'actions', fixed: 'right', width: 180 }
       ],
       items: [],
       total: 0,
@@ -90,11 +99,17 @@ export default {
         current: 1,
         size: 10
       },
-      loading: false
+      loading: false,
+      cardTitle: null
     }
   },
   methods: {
-    async onInit () {
+    async onSearchCustomer () {
+      this.customerId = this.customerIdModel
+      this.searchValues.customerId = this.customerIdModel
+      this.initPage()
+    },
+    async initPage () {
       this.loading = true
       try {
         const { data } = await getCustomerProfitSharingClaim({
@@ -109,24 +124,39 @@ export default {
         this.loading = false
       }
     },
+    async onInit (cardTitle) {
+      this.cardTitle = cardTitle
+      this.customerIdModel = null
+      this.customerId = null
+      this.searchValues.customerId = null
+    },
     onAdd () {
       this.$refs.templateRefs.open()
     },
     onEdit (item) {
-      this.$refs.claimFormRef.open(item)
+      this.$refs.claimFormRef.open(item, true)
     },
     onSearch () {
       if (!this.searchValues.customerId) return this.$message.warning('请输入要查询的客户编码')
       this.pageInfo.current = 1
-      this.onInit()
-    },
-    onReset () {
-      this.items = []
-      this.total = 0
+      this.initPage()
     },
     onPageChange (index) {
       this.pageInfo.current = index
-      this.onInit()
+      this.initPage()
+    },
+    async onSubmit (query) {
+      this.$refs.claimFormRef.setLoading(true)
+      try {
+        await getCustomerProfitSharingClaimStaffAdd(query)
+        this.$refs.claimFormRef.close()
+        this.$message.success('操作成功')
+        this.initPage()
+      } catch (error) {
+        this.$message.error(error)
+      } finally {
+        this.$refs.claimFormRef.setLoading(false)
+      }
     }
   }
 }

src/views/salary/claim/subBranch/index.vue

@@ -1,28 +0,0 @@
-<template>
-  <div>
-    <table-page ref="tableRef" type="0" />
-  </div>
-</template>
-
-<script>
-// 支行业绩分润
-import TablePage from '../components/table.vue'
-export default {
-  name: 'salaryClaimSubBranch',
-  components: {
-    TablePage
-  },
-  data () {
-    return {}
-  },
-  methods: {
-    onInit () {
-      this.$refs.tableRef.onInit()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  /* 自定义样式 */
-</style>