合并表头

mock/modules/elective-generation.js

@@ -1,9 +1,9 @@
 const Mock = require('mockjs')
 const Random = Mock['Random']
 
-const mockGeneration = 7 // primary
+const mockGeneration = 3 // primary
 const mockGroups = [1, 2, 3, 4, 5, 6]
-const mockPreferenceCount = 1 // 1 or 3 // 1志愿/3志愿
+const mockPreferenceCount = 3 // 1 or 3 // 1志愿/3志愿
 
 module.exports = [
   {

src/components/MxTable/index.vue

@@ -26,6 +26,35 @@
           </slot>
           <span v-else>{{ scope.row[key] }}</span>
         </template>
+        <!--    TODO: hht 22.4.11 未实现跨组件传递slot, 先支持固定级别    -->
+        <template v-if="prop.children">
+          <el-table-column v-for="(childProp, childKey) in prop.children" :key="childKey" :label="childProp.label"
+                           :prop="childKey"
+                           :width="childProp.width" :fixed="childProp.fixed"
+                           :min-width="childProp.minWidth" :align="childProp.align || 'center'">
+            <template v-if="childProp.slotHeader" #header="scopeHeader">
+              <slot :name="childProp.slotHeader" v-bind="{
+                  ...scopeHeader,
+                  key: childKey,
+                  label: childProp.label,
+                  prop: childProp
+                }">{{ childProp.label }}
+              </slot>
+            </template>
+            <template slot-scope="scope">
+              <slot v-if="childProp.slot" :name="childProp.slot" v-bind="{
+                  ...scope,
+                  key: childKey,
+                  label: childProp.label,
+                  value: scope.row[childKey],
+                  prop: childProp
+                }">
+                <span>{{ scope.row[childKey] }}</span>
+              </slot>
+              <span v-else>{{ scope.row[childKey] }}</span>
+            </template>
+          </el-table-column>
+        </template>
       </el-table-column>
       <el-table-column :key="key" v-else :type="prop.type" :label="prop.label" :width="prop.width"
                        :align="prop.align || 'center'"></el-table-column>
@@ -33,7 +62,10 @@
   </el-table>
 </template>
 <script>
+import MxTableColumn from '@/components/MxTable/mx-table-column'
+
 export default {
+  components: { MxTableColumn },
   inject: ['mergeTable'],
   props: {
     border: {

src/components/MxTable/mx-table-column.vue

@@ -0,0 +1,48 @@
+<template>
+  <el-table-column v-bind="propAttrs">
+    <template v-if="propAttrs.slotHeader" #header="scopeHeader">
+      <slot :name="propAttrs.slotHeader" v-bind="{
+            ...scopeHeader,
+            key: propKey,
+            label: propAttrs.label,
+            prop: propAttrs
+          }">{{ propAttrs.label }}
+      </slot>
+    </template>
+    <template slot-scope="scope">
+      <slot v-if="propAttrs.slot" :name="propAttrs.slot" v-bind="{
+            ...scope,
+            key: propKey,
+            label: propAttrs.label,
+            value: scope.row[propKey],
+            prop: propAttrs
+          }">
+        <span>{{ scope.row[propKey] }}</span>
+      </slot>
+      <span v-else>{{ scope.row[propKey] }}</span>
+    </template>
+    <template v-if="propAttrs.children">
+      <mx-table-column v-for="(childProp, childKey) in propAttrs.children" :key="childKey" :prop="childProp">
+      </mx-table-column>
+    </template>
+  </el-table-column>
+</template>
+
+<script>
+export default {
+  // TODO: hht, 22.4.11 需要实现跨组件传递slot, 才能使用该组件
+  name: 'mx-table-column',
+  props: {
+    propKey: {
+      type: String
+    },
+    propAttrs: {
+      type: Object
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/elective/generation/components/elective-generation-master.vue

@@ -20,8 +20,7 @@ export default {
   components: { ElectiveGenerationTable },
   props: {
     generation: {
-      type: Object,
-      default: () => ({})
+      type: Object
     }
   },
   data() {

src/views/elective/generation/components/elective-generation-steps.vue

@@ -98,7 +98,7 @@ export default {
   },
   methods: {
     handleStepChange(step) {
-      const target = this.steps.find(item => item.key == step.key).value
+      const target = step.value
       this.generation.hiddenGenerations.remove(target) // force display
       if (target != this.activeStep) {
         this.activeStep = target

src/views/elective/generation/components/elective-generation-table.vue

@@ -17,27 +17,43 @@ export default {
     resolvedTable() {
       console.log('resolvedTable called', this.listGroupsOptions, this.chartBinding)
       if (!this.listGroupsOptions.length) return {}
+      // setting data
       const columns = { groupName: { label: '组合', fixed: true }, expectedCount: { label: '设置人数', fixed: true } }
       const rows = this.chartBinding.generation.status.roundGroups.map(rg => ({
         groupId: rg.groupId,
         groupName: this.translateGroup(rg.groupId),
         expectedCount: rg.personCount
       }))
+      // generation data
       const mergedColumns = []
       this.chartBinding.tableData.forEach(item => {
         if (this.chartBinding.generation.hiddenGenerations.includes(item.generation)) return
         const ext = { roundId: item.roundId, generation: item.generation }
         const isPreference = item.categories.every(item => Array.isArray(item))
+
+        const subColumns = {}
+        const mergedHeaderKey = 'generation_' + item.generation
+        const options = Object.values(this.chartBinding.generation.options)
+        const mergedHeaderOpt = options.find(opt => opt.value == item.generation)
+        const mergedHeaderDefine = { label: mergedHeaderOpt.title, children: subColumns }
         if (isPreference) {
           item.categories.forEach((subItem, idx) => {
+            const innerHeaderKey = mergedHeaderKey + '_' + idx
+            const innerHeaderDefine = item.categories.length > 1
+              ? { label: `第${idx + 1}志愿`, children: {} }
+              : mergedHeaderDefine
             const prefix = item.categories.length > 1 ? `第${idx + 1}志愿` : ''
-            subItem.forEach(data => this.resolveTableGeneration(ext, data, columns, rows, mergedColumns, prefix))
+            subItem.forEach(data => this.resolveTableGeneration(ext, data, innerHeaderDefine.children, rows, mergedColumns, innerHeaderKey))
+            columns[innerHeaderKey] = innerHeaderDefine
           })
         } else {
-          item.categories.forEach(data => this.resolveTableGeneration(ext, data, columns, rows, mergedColumns))
+          item.categories.forEach(data => this.resolveTableGeneration(ext, data, subColumns, rows, mergedColumns))
+          columns[mergedHeaderKey] = mergedHeaderDefine
         }
       })
+      // accumulate data
 
+      // completed
       this.$refs.table.scrollToRight()
       return {
         mergedColumns,
@@ -58,7 +74,7 @@ export default {
     resolveTableGeneration(ext, data, columnsRef, rowsRef, mergedColumnsRef, prefix = '') {
       // resolve core
       const prop = prefix + ext.generation + '_' + data.category
-      const name = prefix + data.displayName
+      const name = data.displayName
       const shouldMerge = data.values.length != rowsRef.length
         || data.values.some(v => v.groupId == 0)