generation table - color & indicator style

src/views/elective/generation/components/elective-color-map-mixins.js

@@ -0,0 +1,27 @@
+import config from '@/common/mx-config'
+
+export default {
+  data() {
+    return {
+      electiveColorMap: {
+        R: config.color.error,
+        r: config.color.error,
+        G: config.color.success,
+        g: config.color.success,
+        B: config.color.blue_up,
+        b: config.color.blue_up,
+        p: config.color.primary,
+        P: config.color.primary,
+        y: config.color.yellow_report,
+        Y: config.color.yellow_report,
+        o: config.color.yellow_report,
+        O: config.color.yellow_report
+      }
+    }
+  },
+  methods: {
+    matchElectiveColor(color) {
+      return this.electiveColorMap[color] || color
+    }
+  }
+}

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

@@ -1,13 +1,16 @@
 <template>
   <mx-table ref="table" :prop-defines="resolvedTable.columns" :rows="resolvedTable.rows" border>
-    <template #elective-cell="{value, label, prop}">
+    <template #elective-cell="{value, label, prop, key}">
       <el-tooltip :disabled="(value&&value.disabled)||!!!prop.queryCode" effect="light">
         <div slot="content">
           查看名单
         </div>
         <div v-if="value" class="pointer" :style="getCellStyles(value)" @click="goDetails(value, label, $event)">
-          <span v-if="value.star">*</span>
-          <span>{{ value && value.value }}</span>
+          <template v-if="!useUnderOverBadge(key)">
+            <span v-if="value.star">*</span>
+            <span>{{ value && value.value }}</span>
+          </template>
+          <over-under-badge v-else :value="value.value" exchange></over-under-badge>
         </div>
       </el-tooltip>
     </template>
@@ -15,11 +18,13 @@
 </template>
 
 <script>
-import config from '@/common/mx-config'
 import MxTransferMixin from '@/components/mx-transfer-mixin'
+import ElectiveColorMap from './elective-color-map-mixins'
+import OverUnderBadge from '@/views/elective/publish/components/steps/fauclty/over-under-badge'
 
 export default {
-  mixins: [MxTransferMixin],
+  components: { OverUnderBadge },
+  mixins: [MxTransferMixin, ElectiveColorMap],
   name: 'elective-generation-table',
   props: ['chartBinding'],
   computed: {
@@ -71,7 +76,8 @@ export default {
           roundId: this.chartBinding.generation.status.roundId,
           generation: -1, // for detail page special display,
           queryableCategories: [], // 本代支持查询的列
-          ignoreGroupCategories: [] // 本代支持查询，且与组合无关的列
+          ignoreGroupCategories: [], // 本代支持查询，且与组合无关的列
+          isAccumulate: true
         }
         this.chartBinding.chartData.accumulates.forEach(acc => this.resolveTableGeneration(ext, acc, columns, rows, mergedColumns, prefix, true))
       }
@@ -93,6 +99,9 @@ export default {
     }
   },
   methods: {
+    useUnderOverBadge(label) {
+      return ['indicateCount'].includes(label)
+    },
     resolveTableGeneration(ext, data, columnsRef, rowsRef, mergedColumnsRef, prefix = '', fixed = false, overrideQueryName = '') {
       // resolve core
       const prop = prefix + ext.generation + '_' + data.category
@@ -131,36 +140,11 @@ export default {
     getCellStyles(option) {
       const styles = {}
       if (option.color) {
-        const map = {
-          R: config.color.error,
-          r: config.color.error,
-          G: config.color.success,
-          g: config.color.success,
-          B: config.color.blue_up,
-          b: config.color.blue_up,
-          p: config.color.primary,
-          P: config.color.primary,
-          y: config.color.yellow_report,
-          Y: config.color.yellow_report
-        }
-        styles.color = map[option.color] || option.color
+        styles.color = this.matchElectiveColor(option.color)
       }
       return styles
     },
     goDetails(option, label, e) {
-      // try close accessor el-popover
-      // const $btn = e?.currentTarget?.__vue__
-      // if ($btn) {
-      //   let parent = $btn.$parent
-      //   while (parent) {
-      //     if (parent.$options.name === 'ElPopover') {
-      //       parent.doClose()
-      //       break
-      //     }
-      //     parent = parent.$parent
-      //   }
-      // }
-
       // jump logic
       const path = '/elective/generation/detail'
       const nextData = {
@@ -168,6 +152,7 @@ export default {
         roundId: this.chartBinding.generation.status.roundId,
         roundName: this.chartBinding.generation.status.roundName,
         activeGeneration: this.chartBinding.generation.active,
+        isAccumulate: option.isAccumulate || false,
         queryGeneration: option.generation,
         queryGroupId: option.groupId,
         queryCode: option.queryCode,

src/views/elective/generation/detail.vue

@@ -16,6 +16,9 @@
           </el-popover>
         </div>
       </template>
+      <template #studentName="{value, row}">
+        <span :style="getStudentNameCellStyle(row)">{{ value }}</span>
+      </template>
       <template #group-flow="{value}">
         <elective-flow-major v-if="value.matchedMajors.length" :icon-classes="['f-primary']"
                              :matched-majors="value.matchedMajors"></elective-flow-major>
@@ -54,6 +57,7 @@
 import config from '@/common/mx-config'
 import transferMixin from '@/components/mx-transfer-mixin'
 import groupTranslateMixin from '@/components/Cache/modules/mx-select-translate-mixin'
+import ElectiveColorMap from './components/elective-color-map-mixins'
 import { mapGetters } from 'vuex'
 import MxCondition from '@/components/MxCondition/mx-condition'
 import {
@@ -67,7 +71,7 @@ import ElectiveFlowRankDescriptor from '@/views/elective/generation/components/e
 
 export default {
   components: { ElectiveFlowRankDescriptor, ElectiveFlowMajor, ElectiveGenerationFlowLog, MxCondition },
-  mixins: [transferMixin, groupTranslateMixin],
+  mixins: [transferMixin, groupTranslateMixin, ElectiveColorMap],
   name: 'generation-detail',
   computed: {
     ...mapGetters(['school']),
@@ -78,7 +82,8 @@ export default {
       return y + s + n
     },
     subTitle() {
-      const g = Object.values(config.electiveGenerationOptions).find(opt => opt.value == this.prevData.queryGeneration)
+      if (this.prevData.isAccumulate) return ''
+      const g = Object.values(config.electiveGenerationOptions).find(opt => opt.value == this.prevData.activeGeneration)
       const hideGeneration = g == config.electiveGenerationOptions.init || g == config.electiveGenerationOptions.terminate
       return hideGeneration ? '' : g?.title || ''
     },
@@ -101,7 +106,7 @@ export default {
       const ignoreGroups = this.prevData.ignoreGroupCategories.includes(this.queryParams.generationQueryCode)
       const columns = {
         className: { label: '班级' },
-        studentName: { label: '姓名' }
+        studentName: { label: '姓名', slot: 'studentName' }
       }
       if (!ignoreGroups) {
         columns.groupName = { label: queryCategory.detailName || '组合' }
@@ -221,6 +226,11 @@ export default {
         rankDescriptors: mergedHistories.last(i => !!i.rankDescriptors?.length)?.rankDescriptors
       }
     },
+    getStudentNameCellStyle(row) {
+      const style = {}
+      if (row.color) style.color = this.matchElectiveColor(row.color)
+      return style
+    },
     handleFlowLog(row) {
       this.logRow = row
       this.logVisible = true

src/views/elective/publish/components/round-settings.vue

@@ -5,10 +5,8 @@
                     @invalid="handleInvalidQuery"></mx-condition>
     </el-card>
     <div class="mt20">
-      <div class="fx-row fx-end-cen">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" class="mb5" @click="handleSettingAdd">新增
-        </el-button>
-      </div>
+      <el-button type="primary" plain icon="el-icon-plus" size="mini" class="mb5" @click="handleSettingAdd">新增
+      </el-button>
       <mx-table :prop-defines="tableDefines" :rows="dataList">
         <template #actions="{row}">
           <el-button type="text" @click="handleSettingEdit(row)">