钻取

src/views/humanResources/payroll/PayrollDrill.vue

@@ -1,11 +1,14 @@
 <template>
   <m-dialog title="绩效明细" ref="dialog">
-    <el-breadcrumb separator="/">
-      <el-breadcrumb-item
-        v-for="type in parentDetailType"
-        :key="type.value"
-      >{{ type.label }}</el-breadcrumb-item>
-    </el-breadcrumb>
+    <div class="mb-3">
+      <span
+        v-for="(type, index) in parentDetailTypes"
+        :key="type.detailType"
+      >
+        <span :class="{ 'text-link': index < parentDetailTypes.length - 1 }" @click="onChange(index)">{{ type.label }}</span>
+        <span v-if="index < parentDetailTypes.length - 1" class="px-3">/</span>
+      </span>
+    </div>
     <el-empty v-if="headers.length === 0"></el-empty>
     <template v-else>
       <m-table
@@ -13,16 +16,13 @@
         clearHeader
         :headers="headers"
         :items="items"
-        :loading="loading"
+        v-loading="loading"
       >
-        <template
-          v-for="header in headers"
-          #[header.prop]="{ row }"
-        >
+        <template v-for="header in headers" #[header.prop]="{ row }">
           <span
             :class="{ 'text-link': header.existsDetail }"
             :key="header.prop"
-            @click="header.existsDetail && onRender(row, header)"
+            @click="header.existsDetail && onDrill(row, header)"
           >{{ row[header.prop] }}</span>
         </template>
       </m-table>
@@ -41,36 +41,53 @@ export default {
       loading: false,
       items: [],
       headers: [],
-      parentDetailType: []
+      parentDetailTypes: []
     }
   },
   methods: {
     async open (item) {
       this.$refs.dialog.open()
-      this.parentDetailType = [{
+      // this.parentDetailTypes = [{
+      //   label: '上级员工薪资绩效钻取',
+      //   detailType: '上级员工薪资绩效钻取',
+      //   item: {}
+      // }]
+      this.parentDetailTypes = [{
         label: '上级员工薪资绩效钻取',
-        value: '上级员工薪资绩效钻取'
+        detailType: '员工薪资绩效钻取',
+        parentDetailType: '上级员工薪资绩效钻取',
+        entity: { employeeCode: '201500008' }
       }]
-      this.onRender(
-        { employeeCode: '201500008' },
-        { detailType: '员工薪资绩效钻取' }
-      )
+      this.onRender()
+    },
+    onDrill (entity, { detailType }) {
+      const { detailType: parentDetailType } = this.parentDetailTypes.at(-1)
+      this.parentDetailTypes.push({
+        label: detailType,
+        detailType,
+        parentDetailType,
+        entity
+      })
+      this.onRender()
     },
-    async onRender (item, header) {
+    onChange (index) {
+      if (index === this.parentDetailTypes.length - 1) return
+      this.parentDetailTypes.splice(index + 1, this.parentDetailTypes.length)
+      this.onRender()
+    },
+    // item 当前行数据
+    // obj 包含当前检索的 { detailType, label }
+    // parentDetailType 上级类型
+    async onRender () {
+      const { label, ...obj } = this.parentDetailTypes.at(-1)
       this.loading = true
       try {
         const { data } = await drilling({
-          parentDetailType: this.parentDetailType.at(-1).value,
-          detailType: header.detailType,
-          entity: item,
+          ...obj,
           page: {
             size: 9999
           }
         })
-        this.parentDetailType.push({
-          label: header.detailType,
-          value: header.detailType
-        })
         this.headers = data.columns.map(e => {
           return {
             label: e.title,