front/src/views/elective/dispatch/components/dispatch-table.vue

<template>
  <el-row>
    <mx-table v-loading="loading" :propDefines="propDefines" :rows="displayRows">
      <template #classCount="{row,$index}">
        <el-input-number size="small" v-model="row.classCount" @change="classCountChange(row,$index)" :min="0"
                         :disabled="row.classCount != 0" label="label"
        ></el-input-number>
      </template>
      <!-- 分班编辑-->
      <template #edit="{row}">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="openEditDialog(row)"
        >编辑
        </el-button>
      </template>
      <!-- 班级调整 -->
      <template #adjust="{row}">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="adjust(row)"
        >调整
        </el-button>
      </template>
      <template #detail="{row}">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="toDetail(row)"
        >详情
        </el-button>
      </template>
    </mx-table>
    <edit-group :year="round.year"  ref="editDialog"></edit-group>
    <class-adjust ref="adjustDialog"></class-adjust>
  </el-row>
</template>
<script>
import MxClassTreeTranslateMixin from '@/components/Cache/modules/mx-classTree-translate-mixin.js'
import MxSelectTranslateMixin from '@/components/Cache/modules/mx-select-translate-mixin.js'
import ClassAdjust from './class-adjust'
import SetClasscount from './set-classcount'
import EditGroup from './edit-group'
import MxTransferMixin from '@/components/mx-transfer-mixin.js'

export default {
  components: {
    EditGroup,
    SetClasscount,
    ClassAdjust,
  },
  mixins: [MxClassTreeTranslateMixin, MxSelectTranslateMixin,MxTransferMixin],
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    round: {
      type: Object,
      default: {},
    },
    settings: {
      type: Array,
      default: [],
    }
  },
  data() {
    return {
      modifyGroupSettings: [],
      dataList: [],
      propDefines: {
        groupName: {
          label: '组合'
        },
        number: {
          label: '录取人数'
        },
        classCount: {
          label: '班级数',
          slot: 'classCount'
        },
        edit: {
          label: '分班编辑',
          slot: 'edit'
        },
        groupClass: {
          label: '班级名称'
        },
        expectedCount: {
          label: '人数'
        },
        adjust: {
          label: '操作',
          slot: 'adjust'
        },
        proportion: {
          label: '男女比例',
        },
        detail: {
          label: '详情',
          slot: 'detail'
        }
      }
    }
  },
  computed: {
    displayRows() {
      if (!this.classTree.length) return []
      if (!this.listGroupsOptions.length) return []
      // if (!this.settings.length) return []
      if (!this.round.groupList) return []
      const rows = this.round.roundGroups.map(rg => ({
          groupId: rg.groupId,
          roundId: this.round.roundId,
          groupName: this.translateGroup(rg.groupId),
          number: this.round.enrollGroupCount[rg.groupId] || 0, // 录取人数
          classCount: rg.classCount, // 班级数
          expectedCount: this.settings.filter(item => item.groupId == rg.groupId).map(item => item.expectedCount).toString(),
          groupClass: this.settings
            .filter(item => item.groupId == rg.groupId)
            .map(item => this.getClassName(item.classId)).toString()
        }))
      console.log('displayRows computed:', rows)
      return rows
    }
  },
  created() {

  },
  methods: {
    openEditDialog(row) {
      if (!row.classCount) {
        this.$message.warning('班级数为0时不可分班')
        return
      }
      this.modifyGroupSettings = this.deepClone(this.settings)
      this.$refs.editDialog.open(row, this.modifyGroupSettings)
    },
    adjust(row) {
      // 调整 未分班不可调整
      const filterSettings = this.settings.filter(item => item.groupId == row.groupId)
      if(filterSettings.length == 0){
        this.$message.warning('未分班不可调整')
        return
      }
      this.$refs.adjustDialog.open(row,this.settings.filter(item => item.groupId == row.groupId))
    },
    toDetail(row) {
      const params = {group: row,groupIds: (this.round.groupIds &&this.round.groupIds.split(','))||[]}
      const path = '/elective/dispatch/detail'
      console.log('prev transfer', row, this.round)
      this.transferTo(path, params)
    },
    editCount(row) {
      // 设定分配人数
      const filter = this.settings.filter(item => item.groupId == row.groupId)
      if (filter.length == 0) {
        this.$message.warning('班级未编辑')
        return
      }
      // if(){
      //   this.$message.warning('需要选择')
      // }
      this.$refs.setClassDialog.open(row, this.settings)
    },
    classCountChange(newVal, index) {
      this.round.groupList[index] = newVal
    }
  }
}
</script>
<style scoped>
</style>