选科 - 动态表格

mock/modules/elective-generation.js

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

src/components/MxTable/index.vue

@@ -1,8 +1,9 @@
 <template>
-  <el-table ref="table" :border="border" :data="rows" @selection-change="$emit('selection-change', $event)">
+  <el-table ref="table" :border="border" :data="rows" :span-method="mergeRowsColumns"
+            @selection-change="$emit('selection-change', $event)" tooltip-effect="dark">
     <template v-for="(prop, key) in propDefines">
       <template v-if="prop.hidden"></template>
-      <el-table-column v-else-if="!prop.type" :key="key" :label="prop.label" :width="prop.width"
+      <el-table-column v-else-if="!prop.type" :key="key" :label="prop.label" :prop="key" :width="prop.width"
                        :min-width="prop.minWidth" :align="prop.align || 'center'" :fixed="prop.fixed">
         <template v-if="prop.slotHeader" #header="scopeHeader">
           <slot :name="prop.slotHeader" v-bind="{
@@ -33,6 +34,7 @@
 </template>
 <script>
 export default {
+  inject: ['mergeTable'],
   props: {
     border: {
       type: Boolean,
@@ -63,6 +65,17 @@ export default {
   methods: {
     getRuntimeTable() {
       return this.$refs.table
+    },
+    mergeRowsColumns(scope) {
+      if (typeof this['mergeTable'] === 'function') {
+        return this['mergeTable'](scope)
+      }
+    },
+    scrollToRight() {
+      setTimeout(() => {
+        console.log('will set table ', this.$refs.table.bodyWrapper.scrollLeft, this.$refs.table.bodyWidth)
+        this.$refs.table.bodyWrapper.scrollLeft = Number(this.$refs.table.bodyWidth.replace('px', ''))
+      }, 500)
     }
   }
 }

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

@@ -42,10 +42,7 @@ export default {
     },
     categories() {
       // summary - categories for display in table
-      debugger
-      const filterResult = this.generation.summary.filter(item => item.generation <= this.generation.active)
-      console.log('re-calculate categories', filterResult)
-      return filterResult
+      return this.generation.summary.filter(item => item.generation <= this.generation.active)
     },
     accumulates() {
       // summary - accumulate for display in charts

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

@@ -8,7 +8,17 @@
         <template #title>
           <div class="rel"
                :class="{'bold':activeStep==idx+1, 'f-333':activeStep==idx+1&&step.value>generation.current}">
-            <i v-if="activeStep==idx+1" class="el-icon-thumb current-pointer abs"></i>
+            <i v-if="activeStep==idx+1" class="el-icon-thumb current-pointer current-animation abs"></i>
+            <el-popover v-else-if="step.value<generation.current&&step.value<activeStep" trigger="hover"
+                        class="abs current-view">
+              <el-checkbox :value="generation.hiddenGenerations.includes(step.value)"
+                           @input="toggleGenerationTableData($event,step)">
+                隐藏{{ step.title }}表格数据
+              </el-checkbox>
+              <i slot="reference" class="el-icon-view pointer"
+                 :class="{'current-disabled': generation.hiddenGenerations.includes(step.value)}"
+                 @click="toggleGenerationTableData(!generation.hiddenGenerations.includes(step.value), step)"></i>
+            </el-popover>
             <span class="pointer" @click="handleStepChange(step)">
               {{ step.title }}</span>
           </div>
@@ -88,11 +98,21 @@ export default {
   },
   methods: {
     handleStepChange(step) {
-      const target = this.steps.findIndex(item => item.key == step.key) + 1
+      const target = this.steps.find(item => item.key == step.key).value
+      this.generation.hiddenGenerations.remove(target) // force display
       if (target != this.activeStep) {
         this.activeStep = target
         this.$emit('change', step.key)
       }
+    },
+    toggleGenerationTableData(e, step) {
+      if (e) {
+        if (!this.generation.hiddenGenerations.includes(step.value)) {
+          this.generation.hiddenGenerations.push(step.value)
+        }
+      } else {
+        this.generation.hiddenGenerations.remove(step.value)
+      }
     }
   }
 }
@@ -102,6 +122,17 @@ export default {
 .current-pointer {
   left: -20px;
   top: 10px;
+}
+
+.current-view {
+  left: -20px;
+}
+
+.current-disabled {
+  color: #999999;
+}
+
+.current-animation {
   animation: finger infinite 2s;
 }
 

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

@@ -1,5 +1,5 @@
 <template>
-  <mx-table :prop-defines="resolvedTable.columns" :rows="resolvedTable.rows" border>
+  <mx-table ref="table" :prop-defines="resolvedTable.columns" :rows="resolvedTable.rows" border>
     <template #elective-cell="{value}">
       {{ value && value.value }}
     </template>
@@ -25,6 +25,7 @@ export default {
       }))
       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))
         if (isPreference) {
@@ -36,6 +37,8 @@ export default {
           item.categories.forEach(data => this.resolveTableGeneration(ext, data, columns, rows, mergedColumns))
         }
       })
+
+      this.$refs.table.scrollToRight()
       return {
         mergedColumns,
         columns,
@@ -46,6 +49,11 @@ export default {
   mounted() {
     window.tableVue = this
   },
+  provide() {
+    return {
+      mergeTable: this.mergeTable
+    }
+  },
   methods: {
     resolveTableGeneration(ext, data, columnsRef, rowsRef, mergedColumnsRef, prefix = '') {
       // resolve core
@@ -71,6 +79,11 @@ export default {
         const row = rowsRef.first()
         row[prop] = val
       }
+    },
+    mergeTable({ row, column, rowIndex }) {
+      if (this.resolvedTable.mergedColumns.includes(column.property)) {
+        return rowIndex === 0 ? [this.resolvedTable.rows.length, 1] : [0, 0]
+      }
     }
   }
 }

src/views/elective/generation/index.vue

@@ -38,7 +38,8 @@ export default {
       electiveSummary: [],
       // local data
       activeStep: '',
-      options: config.electiveGenerationOptions
+      options: config.electiveGenerationOptions,
+      tableHiddenGenerations: []
     }
   },
   computed: {
@@ -67,7 +68,9 @@ export default {
         activeOpt: this.activeOpt,
         /// root data inject
         summary: this.electiveSummary,
-        status: this.electiveStatus
+        status: this.electiveStatus,
+        /// local display setting
+        hiddenGenerations: this.tableHiddenGenerations
       }
     }
   },
@@ -81,7 +84,6 @@ export default {
       this.electiveStatus = resStatus.data
       const resSummary = await getElectiveSummary(this.queryParams)
       this.electiveSummary = resSummary.data
-      debugger
       window.electiveVue = this
       console.log('query completed')
     }