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

<template>
  <el-row>
    <mx-table :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 #countSet="{row}">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="editCount(row)"
        >设定
        </el-button>
      </template>
      <!-- 分班编辑-->
      <template #edit="{row}">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="editClass(row)"
        >编辑
        </el-button>
      </template>
      <!-- 班级调整 -->
      <template #adjust="{row}">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="adjust"
        >调整
        </el-button>
      </template>
    </mx-table>
    <choose-class  :year="round.year" :roundId="round.roundId"  ref="editClassDialog"></choose-class>
    <set-classcount ref="setClassDialog"></set-classcount>
    <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 ChooseClass from './choose-class'
import ClassAdjust from './class-adjust'
import SetClasscount from './set-classcount'

export default {
  components: {
    ChooseClass,
    SetClasscount,
    ClassAdjust,
  },
  mixins: [MxClassTreeTranslateMixin, MxSelectTranslateMixin],
  props: {
    round: {
      type: Object,
      default: {},
    },
    settings: {
      type: Array,
      default: [],
    }
  },
  data() {
    return {
      settingList: [],
      dataList: [],
      propDefines: {
        groupName: {
          label: '组合'
        },
        number: {
          label: '录取人数'
        },
        classCount: {
          label: '班级数',
          slot: 'classCount'
        },
        edit: {
          label: '分班编辑',
          slot: 'edit'
        },
        groupClass: {
          label: '班级名称'
        },
        countSet: {
          label: '人数设定',
          slot: 'countSet'
        },
        expectedCount: {
          label: '人数'
        },
        adjust: {
          label: '操作',
          slot: 'adjust'
        }
      }
    }
  },
  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.groupList.map(rg => ({
        groupId: rg.groupId,
        roundId: this.round.roundId,
        groupName: rg.name,
        number: this.round.enrollGroupCount[rg.groupId] || 200, // 录取人数
        classCount: rg.classCount || 5, // 班级数
        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: {
    adjust() {
      this.$refs.adjustDialog.open()
    },
    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
    },
    editClass(row) {
      // 分配班级
      if (!row.classCount) {
        this.$message.warning('班级数为0时不可分班')
        return
      }
      // 获取分班配置
      // getSettings({
      //   roundId: row.roundId
      // }).then(res => {
      //   this.$refs.editClassDialog.open(row, res.data)
      // })
      this.$refs.editClassDialog.open(row, this.settings)
    }
  }
}
</script>
<style scoped>
</style>