统一tabs组件

src/api/salary.js

@@ -190,3 +190,8 @@ export function getCustomerProfitSharingClaimStaffAdd (data) {
 export function getAccessOrganization () {
   return http.post('/customer/performance/current/login/manage/organization')
 }
+
+// 获取分润类分组
+export function getPerformanceGroupPage (data) {
+  return http.post('/customer/performance/group/page', data)
+}

src/components/TabsTemplate/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <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" v-on="$listeners"></component>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+export default {
+  name: 'salaryFixedRules',
+  props: {
+    importContext: {
+      type: Function,
+      required: true
+    }
+  },
+  data () {
+    return {
+      activeName: '',
+      items: [],
+      isRender: false
+    }
+  },
+  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: () => this.importContext(`${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 () {
+      // 初始只渲染当前页面
+      if (this.isRender) {
+        return
+      }
+      this.isRender = true
+      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>
+::v-deep .el-tabs__content {
+  overflow: visible !important;
+}
+</style>

src/views/bonus/process/index.vue

@@ -1,62 +1,15 @@
 <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>
+    <TabTemplate :import-context="(path) => import(`./${path}`)"></TabTemplate>
   </div>
 </template>
 
 <script>
+import TabTemplate from '@/components/TabsTemplate'
 export default {
   name: 'ProcessIndex',
-  data () {
-    return {
-      activeName: '',
-      items: []
-    }
-  },
-  created () {
-    console.log(this.$route.meta.roles)
-    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)
-      })
-    }
+  components: {
+    TabTemplate
   }
 }
 </script>

src/views/bonus/setting/authority/index.vue

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

src/views/bonus/setting/index.vue

@@ -1,66 +1,27 @@
 <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>
+    <ParamsSetting ref="paramsSettingRefs"></ParamsSetting>
   </div>
 </template>
 
 <script>
+import ParamsSetting from '@/components/ParamsSetting'
 export default {
   name: 'bonusSetting',
+  components: {
+    ParamsSetting
+  },
   data () {
     return {
-      activeName: '',
-      items: []
-    }
-  },
-  created () {
-    console.log(this.$route.meta.roles)
-    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
+      cardTitle: null
     }
   },
-  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)
-      })
-    }
+  mounted () {
+    this.$refs.paramsSettingRefs.onInit()
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  /* 自定义样式 */
+
 </style>

src/views/bonus/setting/proportion/AllocationProportionEdit.vue

@@ -1,181 +0,0 @@
-<template>
-  <m-dialog :title="isEdit ? '编辑配置' : '新增配置'" ref="dialog" @sure="onSure">
-    <m-form ref="form" :items="formItems" v-model="formValues" v-loading="loading"></m-form>
-
-  </m-dialog>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import {
-  getRosterList
-} from '@/api/system'
-import {
-  saveAllocationConfig
-} from '@/api/bonus'
-export default {
-  name: 'AllocationProportionEdit',
-  data () {
-    return {
-      formValues: {
-        employeeCode: null,
-        employeeName: null,
-        organizationNo: null,
-        organizationName: null
-      },
-      itemData: {},
-      filterLoading: false,
-      loading: false,
-      items: []
-    }
-  },
-  computed: {
-    isEdit () {
-      return Object.keys(this.itemData).length > 0
-    },
-    ...mapGetters(['organizationTree']),
-    organizationItems () {
-      if (this.organizationTree.length > 0) {
-        return this.organizationTree[0].child
-      }
-      return []
-    },
-    formItems () {
-      return [
-        {
-          label: '管理者',
-          prop: 'employeeCode',
-          type: 'select',
-          options: {
-            placeholder: '请选择管理者',
-            filterable: true,
-            remote: true,
-            labelText: 'employeeName',
-            labelValue: 'personnelCode',
-            remoteMethod: this.remoteMethod,
-            valueKey: 'personnelCode',
-            defaultFirstOption: true,
-            loading: this.filterLoading,
-            items: this.items
-          },
-          handles: {
-            change: (v) => {
-              const item = this.items.find(e => e.personnelCode === v)
-              this.formValues.employeeName = item.employeeName
-              this.formValues.employeeCode = item.personnelCode
-            }
-          },
-          rules: [
-            { required: true, message: '请选择管理者', trigger: 'change' }
-          ]
-        },
-        {
-          label: '管理机构',
-          prop: 'organizationNo',
-          type: 'cascader',
-          rules: [
-            { required: true, message: '请选择机构', trigger: 'change' }
-          ],
-          options: {
-            ref: 'organizationNo',
-            filterable: true,
-            clearable: true,
-            placeholder: '请选择机构',
-            options: this.organizationItems,
-            showAllLevels: false,
-            props: {
-              emitPath: false,
-              checkStrictly: true,
-              value: 'organizationNo',
-              label: 'organizationName',
-              children: 'child'
-            }
-          },
-          handles: {
-            change: (v) => {
-              const nodes = this.$refs.form.$refs.organizationNo.getCheckedNodes()
-              this.formValues.organizationNo = nodes[0].data.organizationNo
-              this.formValues.organizationName = nodes[0].data.organizationName
-            }
-          }
-        }
-      ]
-    }
-  },
-  methods: {
-    async open (item) {
-      this.loading = true
-      this.$refs.dialog.open()
-      if (!item) {
-        // 默认获取一次
-        await this.remoteMethod()
-        this.itemData = {}
-        this.formValues = {
-          employeeCode: null,
-          employeeName: null,
-          organizationNo: null,
-          organizationName: null
-        }
-      } else {
-        await this.remoteMethod(item.employeeName)
-        this.itemData = item
-        this.formValues = {
-          employeeCode: item.employeeCode,
-          organizationName: item.organizationName,
-          organizationNo: item.organizationNo,
-          employeeName: item.employeeName
-        }
-      }
-      this.$nextTick(() => {
-        this.$refs.form.clearValidate()
-        this.loading = false
-      })
-    },
-    async remoteMethod (str) {
-      this.filterLoading = true
-      try {
-        const { data } = await getRosterList({
-          entity: {
-            employeeName: str
-          },
-          page: {
-            current: 1,
-            size: 99
-          }
-        })
-        this.items = data.records
-      } catch (error) {
-        this.items = []
-        this.$message.error(error)
-      } finally {
-        this.filterLoading = false
-      }
-    },
-    onSure () {
-      this.$refs.form.validate(async valid => {
-        if (!valid) {
-          return
-        }
-        this.loading = true
-        try {
-          await saveAllocationConfig({
-            performanceSalaryManageEmployeeId: this.itemData.performanceSalaryManageEmployeeId,
-            ...this.formValues
-          })
-          this.$refs.dialog.close()
-          this.$message.success('操作成功')
-          this.$emit('success')
-        } catch (error) {
-          this.$message.error(error)
-        } finally {
-          this.loading = false
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/views/bonus/setting/proportion/index.vue

@@ -1,155 +0,0 @@
-<template>
-  <div>
-    <m-search class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
-    <m-table
-      :card-title="cardTitle"
-      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>
-    <AllocationProportionEdit ref="allocationProportionEditRefs" @success="onInit"></AllocationProportionEdit>
-  </div>
-</template>
-
-<script>
-import {
-  getAllocationConfigList,
-  deleteAllocationConfig
-} from '@/api/bonus'
-import AllocationProportionEdit from './AllocationProportionEdit.vue'
-import { mapGetters } from 'vuex'
-export default {
-  name: 'AllocationProportion',
-  components: {
-    AllocationProportionEdit
-  },
-  data () {
-    return {
-      searchValues: {
-        employeeName: null
-      },
-      headers: [
-        { label: '管理者名称', prop: 'employeeName' },
-        { label: '管理机构', prop: 'organizationName' },
-        // { label: '分配占比', prop: 'manageProportion', align: 'center' },
-        { label: '创建时间', prop: 'createDate' },
-        { label: '操作', prop: 'actions' }
-      ],
-      items: [],
-      total: 0,
-      pageInfo: {
-        current: 1,
-        size: 10
-      },
-      loading: false,
-      cardTitle: null
-    }
-  },
-  computed: {
-    ...mapGetters(['organizationTree']),
-    organizationItems () {
-      if (this.organizationTree.length > 0) {
-        return this.organizationTree[0].child
-      }
-      return []
-    },
-    searchItems () {
-      return [
-        {
-          label: '管理者',
-          prop: 'employeeName',
-          type: 'input',
-          options: {
-            placeholder: '请输入名称'
-          }
-        },
-        {
-          label: '管理机构',
-          prop: 'organizationNo',
-          type: 'cascader',
-          options: {
-            ref: 'organizationNo',
-            filterable: true,
-            clearable: true,
-            placeholder: '请选择机构',
-            options: this.organizationItems,
-            showAllLevels: false,
-            props: {
-              emitPath: false,
-              checkStrictly: true,
-              value: 'organizationNo',
-              label: 'organizationName',
-              children: 'child'
-            }
-          }
-        }
-      ]
-    }
-  },
-  // created () {
-  //   this.onInit()
-  // },
-  methods: {
-    async onInit (title) {
-      if (title) {
-        this.cardTitle = title
-      }
-      this.loading = true
-      try {
-        const { data } = await getAllocationConfigList({
-          ...this.searchValues
-        })
-        this.items = data.records
-        this.total = data.total
-      } catch (error) {
-        this.$message.error(error)
-      } finally {
-        this.loading = false
-      }
-    },
-    onAdd () {
-      this.$refs.allocationProportionEditRefs.open()
-    },
-    onEdit (item) {
-      this.$refs.allocationProportionEditRefs.open(item)
-    },
-    onDelete (row) {
-      this.$confirm('确定删除吗？', '提示')
-        .then(async () => {
-          try {
-            await deleteAllocationConfig({ performanceSalaryManageEmployeeId: row.performanceSalaryManageEmployeeId })
-            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/calculate/index copy.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="white pa-3">
-    <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: 'salary-calculate',
-  data () {
-    return {
-      activeName: '',
-      items: [],
-      itemData: {}
-    }
-  },
-  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
-    }
-  },
-  methods: {
-    handleClick () {
-      this.$router.push(`${this.$route.path}?name=${this.activeName}`)
-      this.$nextTick(() => {
-        this.$refs[this.activeName] && this.$refs[this.activeName][0].onInit && this.$refs[this.activeName][0].onInit()
-      })
-    },
-    onComponentMounted () {
-      this.$refs[this.activeName] && this.$refs[this.activeName][0].onInit && this.$refs[this.activeName][0].onInit()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-::v-deep .el-tabs__content  {
-  overflow: visible !important;
-}
-</style>

src/views/salary/claim/index.vue

@@ -1,71 +1,19 @@
 <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>
+    <TabTemplate :import-context="(path) => import(`./${path}`)"></TabTemplate>
   </div>
 </template>
 
 <script>
+import TabTemplate from '@/components/TabsTemplate'
 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
-        }
-        // 员工分润认领必须输入客户编号才能搜索
-        // 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
-      this.$nextTick(() => {
-        this.$refs[this.activeName][0].onInit && this.$refs[this.activeName][0].onInit(this.name)
-      })
-    }
+  components: {
+    TabTemplate
   }
 }
 </script>
 
 <style lang="scss" scoped>
   /* 自定义样式 */
-  ::v-deep .el-tabs__content {
-    overflow: visible !important;
-  }
 </style>

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

@@ -1,11 +1,9 @@
 <template>
   <div>
-    <m-empty v-if="!permission.includes('salary:claim:sharingClaim:list')"></m-empty>
-    <m-search v-permission="['salary:claim:sharingClaim:list']" class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
+    <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"
@@ -14,36 +12,28 @@
       @page-change="onPageChange"
       @sort-change="onSortChange"
     >
-      <template #employeeProfitSharingRatio="{ row }">
-        {{ row.employeeProfitSharingRatio * 100 + '%' }}
-      </template>
       <template #actions="{ row }">
-        <m-button type="primary" text @click="onClaim(row, false)" v-if="!majorOrganization">分润认领</m-button>
-        <m-button type="primary" text @click="onClaim(row, true)" v-if="majorOrganization">专业部门分配</m-button>
+        <m-button type="primary" text @click="onDetails(row)">查看明细</m-button>
       </template>
     </m-table>
-
-    <ClaimForm ref="claimFormRef" @submit="onSubmit" />
+    <SharingClaimDetails ref="sharingClaimDetailsRefs" />
   </div>
 </template>
 
 <script>
 import { dateFormat } from '@/utils/date'
 import {
-  getProfitSharingClaim,
-  getCustomerProfitSharingClaimDeptAdd,
-  getCustomerProfitSharingClaimAdd,
+  getPerformanceGroupPage,
+  // getCustomerProfitSharingClaimDeptAdd,
+  // getCustomerProfitSharingClaimAdd,
   getAccessOrganization
 } from '@/api/salary'
-import ClaimForm from '../components/form.vue'
-import {
-  HEADERS
-} from '../utils'
+import SharingClaimDetails from './sharingClaimDetails.vue'
 import { mapGetters } from 'vuex'
 export default {
   name: 'salaryClaimSharing',
   components: {
-    ClaimForm
+    SharingClaimDetails
   },
   data () {
     return {
@@ -53,7 +43,23 @@ export default {
         customerId: null,
         month: dateFormat('YYYY-mm', new Date())
       },
-      headers: HEADERS,
+      queryValues: {},
+      headers: [
+        { label: '机构名称', prop: 'organizationName', sortable: false },
+        { label: '数据日期', prop: 'dataDate', width: 120 },
+        { label: '客户编号', prop: 'customerId', align: 'center', width: 120 },
+        { label: '一级科目编码/名称', prop: 'oneLevelSubject' },
+        { label: '二级科目编码/名称', prop: 'twoLevelSubject' },
+        // { label: '金额', prop: 'amount' },
+        // { label: '员工分润比例', prop: 'employeeProfitSharingRatio', align: 'center', width: 140 },
+        { label: '管户层级标识', prop: 'customerLevelIdentifier', width: 140 },
+        { label: '客户类别标识', prop: 'customerCategoryIdentifier', width: 140 },
+        // { 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: 'actions', fixed: 'right', width: 180 }
+      ],
       items: [],
       total: 0,
       pageInfo: {
@@ -63,10 +69,8 @@ export default {
       orders: [],
       loading: false,
       cardTitle: null,
-      isDept: false,
       organizationItems: [],
-      defaultManageOrganization: {},
-      majorOrganization: false
+      defaultManageOrganization: {}
     }
   },
   computed: {
@@ -126,7 +130,6 @@ export default {
       }
       this.searchValues.manageOrganizationNo = data[0].organizationNo
       this.defaultManageOrganization = data[0]
-      this.majorOrganization = data[0].majorOrganization
       this.getPage()
     },
     async getPage () {
@@ -136,14 +139,14 @@ export default {
       }
       this.loading = true
       try {
-        const { data } = await getProfitSharingClaim({
+        const { data } = await getPerformanceGroupPage({
           page: {
             ...this.pageInfo,
             orders: this.orders
           },
           ...this.searchValues
         })
-        this.majorOrganization = this.organizationItems.find(e => e.organizationNo === this.searchValues.manageOrganizationNo).majorOrganization
+        this.queryValues = { ...this.searchValues }
         this.items = data.records
         this.total = data.total
       } catch (error) {
@@ -169,24 +172,31 @@ export default {
         this.$message.error(error)
       }
     },
-    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.getPage()
-      } catch (error) {
-        this.$message.error(error)
-      } finally {
-        this.$refs.claimFormRef.setLoading(false)
-      }
+    onDetails (item) {
+      this.$refs.sharingClaimDetailsRefs.open({
+        month: this.queryValues.month,
+        majorOrganization: this.organizationItems.find(e => e.organizationNo === this.queryValues.manageOrganizationNo)?.majorOrganization ?? null,
+        manageOrganizationNo: item.organizationNo,
+        ...item
+      })
     },
+    // onClaim (item) {
+    //   this.$refs.sharingClaimEditRefs.open(item)
+    // },
+    // 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.getPage()
+    //   } catch (error) {
+    //     this.$message.error(error)
+    //   } finally {
+    //     this.$refs.claimFormRef.setLoading(false)
+    //   }
+    // },
     onSearch () {
       if (!this.searchValues.manageOrganizationNo) {
         this.searchValues.manageOrganizationNo = this.defaultManageOrganization.organizationNo

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

@@ -0,0 +1,116 @@
+<template>
+  <m-dialog title="分润明细" ref="dialog" width="1280px">
+    <m-table
+      clearHeader
+      shadow="never"
+      v-loading="loading"
+      :items="items"
+      :headers="headers"
+      :page-size="pageInfo.size"
+      :page-current="pageInfo.current"
+      :total="total"
+      @page-change="onPageChange"
+      @sort-change="onSortChange"
+    >
+      <template #actions="{ row }">
+        <!-- <m-button type="primary" text @click="onDetails(row)">查看明细</m-button> -->
+        <m-button type="primary" text @click="onClaim(row)" >分润认领</m-button>
+        <m-button type="primary" text @click="onClaim(row)" >专业部门分配</m-button>
+      </template>
+    </m-table>
+    <SharingClaimDetailsClaim ref="sharingClaimDetailsClaimRefs"></SharingClaimDetailsClaim>
+  </m-dialog>
+</template>
+
+<script>
+import {
+  getProfitSharingClaim
+} from '@/api/salary'
+import SharingClaimDetailsClaim from './sharingClaimDetailsClaim'
+export default {
+  name: 'sharingClaimDetails',
+  components: {
+    SharingClaimDetailsClaim
+  },
+  data () {
+    return {
+      headers: [
+        { label: '机构名称', prop: 'organizationName', sortable: false },
+        { label: '数据日期', prop: 'dataDate', width: 120 },
+        { label: '客户编号', prop: 'customerId', align: 'center', width: 120 },
+        { label: '一级科目编码/名称', prop: 'oneLevelSubject', width: 180 },
+        { label: '二级科目编码/名称', prop: 'twoLevelSubject', width: 180 },
+        { label: '金额', prop: 'amount' },
+        { label: '员工分润比例', prop: 'employeeProfitSharingRatio', align: 'center', width: 140 },
+        { label: '管户层级标识', prop: 'customerLevelIdentifier', width: 140 },
+        { label: '客户类别标识', prop: 'customerCategoryIdentifier', width: 140 },
+        { 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: 'actions', fixed: 'right', width: 180 }
+      ],
+      items: [],
+      total: 0,
+      pageInfo: {
+        current: 1,
+        size: 10
+      },
+      orders: [],
+      loading: false,
+      searchValues: {
+        month: null,
+        manageOrganizationNo: null,
+        customerId: null,
+        oneLevelSubject: null,
+        twoLevelSubject: null,
+        customerLevelIdentifier: null,
+        customerCategoryIdentifier: null
+      }
+    }
+  },
+  methods: {
+    open (item) {
+      Object.keys(this.searchValues).forEach(key => {
+        this.searchValues[key] = item[key]
+      })
+      this.$refs.dialog.open()
+      this.getPage()
+    },
+    async getPage () {
+      this.loading = true
+      try {
+        const { data } = await getProfitSharingClaim({
+          page: {
+            ...this.pageInfo,
+            orders: this.orders
+          },
+          ...this.searchValues
+        })
+        // this.majorOrganization = this.organizationItems.find(e => e.organizationNo === this.searchValues.manageOrganizationNo).majorOrganization
+        this.items = data.records
+        this.total = data.total
+      } catch (error) {
+        this.$message.error(error)
+      } finally {
+        this.loading = false
+      }
+    },
+    onClaim (item) {
+      this.$refs.sharingClaimDetailsClaimRefs.open(item)
+    },
+    onPageChange (index) {
+      this.pageInfo.current = index
+      this.getPage()
+    },
+    onSortChange (v) {
+      this.orders = v
+      this.getPage()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,155 @@
+<template>
+  <m-dialog title="分润认领" ref="dialog" append-to-body @sure="onSure">
+    <m-form ref="form" :items="formItems" v-model="formValues" v-loading="loading">
+      <template #customerId>
+        <el-tag>{{ formValues.customerId }}</el-tag>
+      </template>
+      <template #organizationName>
+        <el-tag>{{ formValues.organizationName }}</el-tag>
+      </template>
+      <template #sharing>
+        <el-form ref="form" :model="formQuery">
+          <m-table
+            clearHeader
+            shadow="never"
+            :headers="headers"
+            :items="formQuery.items"
+          >
+            <template #unifiedCertificationNumber="scope">
+              <el-form-item
+                :prop="`items.${scope.$index}.unifiedCertificationNumber`"
+                :rules="{ required: true, message: '请选择员工', trigger: 'change' }"
+              >
+                <el-select v-model="scope.unifiedCertificationNumber" filterable placeholder="请选择员工">
+                  <el-option
+                    v-for="item in employeeItems"
+                    :key="item.personnelCode"
+                    :label="item.employeeName"
+                    :value="item.personnelCode">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </template>
+            <template #employeeProfitSharingRatio="{ row }">
+              <el-form-item
+                :prop="`items.${scope.$index}.employeeProfitSharingRatio`"
+                :rules="{ required: true, message: '请填写分润比例', trigger: 'blur' }"
+              >
+                <el-input v-model="row.employeeProfitSharingRatio"></el-input>
+              </el-form-item>
+            </template>
+            <div class="d-flex justify-center pa-3">
+              <m-button size="small" type="orange" icon="el-icon-plus" @click="addItem">新增一个分润</m-button>
+            </div>
+          </m-table>
+        </el-form>
+      </template>
+    </m-form>
+  </m-dialog>
+</template>
+
+<script>
+import { getRosterList } from '@/api/system'
+const defaultItem = {
+  unifiedCertificationNumber: null,
+  employeeProfitSharingRatio: null
+}
+export default {
+  name: 'sharingClaimEdit',
+  data () {
+    return {
+      formValues: {},
+      loading: false,
+      employeeItems: [],
+      formQuery: {
+        items: []
+      },
+      headers: [
+        { label: '员工姓名', prop: 'unifiedCertificationNumber' },
+        { label: '分润比例', prop: 'employeeProfitSharingRatio' }
+      ],
+      formItems: [
+        {
+          label: '客户编号',
+          prop: 'customerId'
+        }, {
+          label: '机构名称',
+          prop: 'organizationName'
+        },
+        {
+          label: '分润',
+          prop: 'sharing'
+        }
+        // {
+        //   label: '分润比例(%)',
+        //   prop: 'employeeProfitSharingRatio',
+        //   type: 'input',
+        //   slots: ['append'],
+        //   required: true,
+        //   options: {
+        //     placeholder: '请输入分润比例'
+        //   },
+        //   rules: [
+        //     {
+        //       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: {
+    open (item) {
+      this.formValues = {
+        organizationName: item.organizationName,
+        customerId: item.customerId
+      }
+      this.formQuery.items = [{ ...defaultItem }]
+      this.$refs.dialog.open()
+      this.getEmployeeItems(item.organizationNo)
+    },
+    async getEmployeeItems (organizationNo) {
+      if (!organizationNo) {
+        this.employeeItems = []
+        return
+      }
+      this.loading = true
+      try {
+        const params = {
+          organizationNo,
+          page: { current: 1, size: 9999 }
+        }
+        const { data } = await getRosterList(params)
+        this.employeeItems = data.records
+      } catch (error) {
+        this.employeeItems = []
+        this.$message.error(error)
+      } finally {
+        this.loading = false
+      }
+    },
+    addItem () {
+      this.formQuery.items.push({ ...defaultItem })
+    },
+    onSure () {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/salary/solution/index.vue

@@ -1,15 +1,6 @@
 <template>
   <div class="white pa-3">
-    <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" @history="onHistory"></component>
-      </el-tab-pane>
-    </el-tabs>
+    <TabTemplate :import-context="(path) => import(`./${path}`)" @history="onHistory"></TabTemplate>
     <el-drawer
       :title="itemData.title"
       :visible.sync="show"
@@ -23,6 +14,7 @@
 </template>
 
 <script>
+import TabTemplate from '@/components/TabsTemplate'
 import {
   getSolutionDetails
 } from '@/api/salary'
@@ -30,43 +22,17 @@ import SolutionDetails from './components/solutionDetails.vue'
 export default {
   name: 'salary-solution',
   components: {
-    SolutionDetails
+    SolutionDetails,
+    TabTemplate
   },
   data () {
     return {
-      activeName: '',
-      items: [],
       itemData: {},
       show: false,
       loading: false
     }
   },
-  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
-    }
-  },
   methods: {
-    handleClick () {
-      this.$router.push(`${this.$route.path}?name=${this.activeName}`)
-      this.$nextTick(() => {
-        this.$refs[this.activeName][0].onInit()
-      })
-    },
-    onComponentMounted () {
-      this.$nextTick(() => {
-        this.$refs[this.activeName] && this.$refs[this.activeName][0].onInit()
-      })
-    },
     async onHistory ({ performanceSolutionId }) {
       this.show = true
       this.loading = true
@@ -99,7 +65,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .el-tabs__content  {
-  overflow: visible !important;
-}
+
 </style>

src/views/salaryFixed/salaryFixedRules/index.vue

@@ -1,65 +1,19 @@
 <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>
+    <TabTemplate :import-context="(path) => import(`./${path}`)" @history="onHistory"></TabTemplate>
   </div>
 </template>
 
 <script>
+import TabTemplate from '@/components/TabsTemplate'
 export default {
   name: 'salaryFixedRules',
-  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)
-      })
-    }
+  components: {
+    TabTemplate
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  /* 自定义样式 */
+
 </style>