12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- <template>
- <mx-table ref="table" :prop-defines="resolvedTable.columns" :rows="resolvedTable.rows" border>
- <template #elective-cell="{value}">
- {{ value && value.value }}
- </template>
- </mx-table>
- </template>
- <script>
- import MxGroupTranslateMixin from '@/components/Cache/modules/mx-select-translate-mixin'
- export default {
- mixins: [MxGroupTranslateMixin],
- name: 'elective-generation-table',
- props: ['chartBinding'],
- computed: {
- resolvedTable() {
- console.log('resolvedTable called', this.listGroupsOptions, this.chartBinding)
- if (!this.listGroupsOptions.length) return {}
- 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
- }))
- 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) {
- item.categories.forEach((subItem, idx) => {
- const prefix = item.categories.length > 1 ? `第${idx + 1}志愿` : ''
- subItem.forEach(data => this.resolveTableGeneration(ext, data, columns, rows, mergedColumns, prefix))
- })
- } else {
- item.categories.forEach(data => this.resolveTableGeneration(ext, data, columns, rows, mergedColumns))
- }
- })
- this.$refs.table.scrollToRight()
- return {
- mergedColumns,
- columns,
- rows
- }
- }
- },
- mounted() {
- window.tableVue = this
- },
- provide() {
- return {
- mergeTable: this.mergeTable
- }
- },
- methods: {
- resolveTableGeneration(ext, data, columnsRef, rowsRef, mergedColumnsRef, prefix = '') {
- // resolve core
- const prop = prefix + ext.generation + '_' + data.category
- const name = prefix + data.displayName
- const shouldMerge = data.values.length != rowsRef.length
- || data.values.some(v => v.groupId == 0)
- columnsRef[prop] = { label: name, slot: 'elective-cell' }
- if (!shouldMerge) {
- data.values.forEach(val => {
- const row = rowsRef.find(row => row.groupId == val.groupId)
- if (row) {
- row[prop] = val
- }
- })
- } else {
- // mark for table rows merge
- mergedColumnsRef.push(prop)
- // keep value in display row
- const val = data.values.first()
- 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]
- }
- }
- }
- }
- </script>
- <style scoped>
- </style>
|