front/src/views/elective/master/index.vue

<template>
  <div class="app-container">
    <el-card class="mb20">
      <mx-condition ref="condition" :query-params="queryParams" :require-fields="requireFields" @query="handleQuery"
                    @invalid="handleInvalidQuery"></mx-condition>
    </el-card>

    <el-card>
      <div v-if="queryParams.roundId">
        <div class="fx-row jc-between mb10" >
          <el-button type="primary" @click="keepAll">一键维持原班级</el-button>
          <el-button  type="primary" @click="send">发送名单</el-button>
        </div>
        <mx-table :propDefines="propDefines" :rows="formatRows">
          <template #temp="{row}">
            <el-popover
              placement="bottom"
              trigger="click">
              <span class="btn-green mr5" @click="changeMaster">班主任</span>
              <span  class="btn-green" @click="changeClass(row)">班级</span>

              <el-button type="primary" slot="reference" size="mini">更换</el-button>
            </el-popover>
          </template>
          <template #cancel="{row}">
            <el-button type="danger" size="mini" @click="cancel(row)">取消</el-button>
          </template>
        </mx-table>
      </div>
      <evaluation-empty v-else-if="!queryParams.roundId" shadow title="当前学年没有班主任选班数据"></evaluation-empty>
    </el-card>
<!--    <choose-master-teacher ref="chooseMasterTeacher"></choose-master-teacher>-->
    <choose-class ref="chooseClass" :year="queryParams.year"></choose-class>
  </div>
</template>
<script>
import ChooseMasterTeacher from './components/choose-master-teacher'
import classTreeMixin from '@/components/Cache/modules/mx-classTree-translate-mixin'
import ChooseClass from './components/choose-class'
import MxCondition from '@/components/MxCondition/mx-condition'
export default  {
  components :{
    MxCondition,
    ChooseMasterTeacher,
    ChooseClass
  },
  mixins: [classTreeMixin],
  data() {
    return {
      propDefines: {
        year:{
          label:'学年'
        },
        className:{
          label:'原班级'
        },
        headteacherName:{
          label:'原班主任姓名'
        },
        temp:{
          label:'确认班主任',
          slot:'temp'
        },
        newClassName:{
          label:'新班级号'
        },
        newMasterName:{
          label:'新班主任姓名'
        },
        cancel: {
          label:'操作',
          slot:'cancel'
        }
      },
      requireFields: ['year','roundId'],
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        total: '',
        year: '',
        roundId: '',
      },
    }
  },
  computed:{
    formatRows() {
      if(!this.classTree) return []
      if(!this.queryParams.year) return []

      return this.classTree.find(item => {
        return item.year == this.queryParams.year
      })?.classList.map(item => {
        item.year = this.queryParams.year
        return item
      })
    }
  },
  methods: {
    keepAll() {

    },
    send() {
      const isSend = this.rows.filter(item => {
         return item.newMasterId != 0
      }).length ==  this.rows.length
      console.log(isSend)
      if(!isSend) {
        this.$message.warning('还有班级未分配')
        return
      }

    },
    cancel(row){

    },
    handleQuery() {
      // 获取班主任 settings
    },
    changeMaster(){
      this.$refs.chooseMasterTeacher.dialogVisible = true
    },
    changeClass(row) {
      this.$refs.chooseClass.init(row)
    },
    handleInvalidQuery() {
      this.dataList = []
    },
  }

}
</script>
<style>

</style>