front/src/views/elective/dispatch/components/choose-class.vue

<template>
  <el-dialog
    :title="`选择班级(${roundGroup.groupName || ''})`"
    :visible.sync="show"
    :close-on-click-modal="false"
    width="50%"
  >
    <div>
      <el-checkbox-group
        v-model="tmpClassIds"
        :max="roundGroup.classCount"
      >
        <el-checkbox style="margin-bottom: 20px" v-for="item in classList"
                     :disabled="item.disabled" :label="item.classId" :key="item.classId"
        >{{ item.className }}
        </el-checkbox>
      </el-checkbox-group>
      <el-form v-if="inputVisible" :rules="rules" ref="form" :model="form" label-width="80px" @submit.native.prevent>
        <el-form-item label="输入班级"  prop="name" >
          <el-tooltip class="item" effect="dark" content="输入班级名称后回车创建班级" :hide-after="1500" placement="bottom-start">
            <el-input
              style="width:60%"
              class="input-new-tag"
              v-model="form.name"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputEnter"
            >
            </el-input>
          </el-tooltip>
          <div class="size-icon" @click="handleInputConfirm">
            <i class="icon el-icon-circle-close" ></i>
          </div>
        </el-form-item>
      </el-form>

      <el-button v-else type="primary" size="small" @click="showInput">新增班级</el-button>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="close">取 消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
import MxClassTreeTranslateMixin from '@/components/Cache/modules/mx-classTree-translate-mixin.js'
import * as busiClass from '@/api/webApi/busi-classes.js'
import { add } from '@/api/webApi/busi-classes.js'
export default {
  name: 'choose-class',
  props: {
    year:{
      type: Number ,
      default: 0
    }
  },
  mixins: [MxClassTreeTranslateMixin],
  data() {
    return {
      show: false,
      roundGroup: null,
      settingContainer: [],
      tmpClasses: [],
      inputVisible: false,
      form: {
        name: '',
        type: 1, // 默认为行政班
        year: '', // 学年
        gradeId: '', // 年级
        subjectId: "1,2,3,4,5,6,7,8,9" // 默认为全科目
      },
      rules: {
        name: [
          { required: true, message: '班级名称不能为空', trigger: 'blur' }
        ],
      },
      tmpClassIds: []
    }
  },
  computed: {
    classList() {
      if (!this.classTree?.length) return []
      if (!this.year) return []
      // 获取该年份下的年级
      const classTree= this.classTree[this.classTree.findIndex(i => i.year = this.year)]
      this.form.grade = classTree.gradeId
      this.form.year = classTree.year
      return this.classTree[this.classTree.findIndex(i => i.year = this.year)].classList.map(item => {
        item['disabled'] = this.settingContainer.some(c => c.classId == item.classId && c.groupId !== this.roundGroup.groupId)
        return item
      })
    }
  },
  methods: {
    close() {
      this.show = false
      this.handleInputConfirm()
    },
    open(roundGroup, settingContainer) {
      console.log(roundGroup)
      this.show = true
      this.roundGroup = roundGroup
      this.settingContainer = settingContainer
      this.tmpClasses = settingContainer.filter(setting => setting.groupId == roundGroup.groupId)
      this.tmpClassIds = this.tmpClasses.map(c => c.classId)
    },
    confirm() {
      this.show = false
      // int groupId; // 组合ID
      // int classId; // 班级
      const mergeClasses = this.tmpClassIds.map(id => {
        return this.tmpClasses.find(c => c.classId == id) || {
          classId: id, // 班级Id
          roundId: this.roundGroup.roundId, // 轮次Id
          groupId: this.roundGroup.groupId, // 组合Id
          actualCount: 0, // 应用才产生 实际人数
          expectedCount: 0, // 期望人数
          actualCountInMale: 0, // 应用才产生 实际男生
          actualCountInFemale: 0 // 应用才产生 实际女生
        }
      })
      console.log(mergeClasses)
      this.tmpClasses.forEach(c => this.settingContainer.remove(c))
      mergeClasses.forEach(c => this.settingContainer.push(c))
      this.handleInputConfirm()
    },
    handleInputConfirm() {
      this.inputVisible = false;
    },
    handleInputEnter() {
      console.log('回车')
      this.$refs.form.validate(valid => {
        if(valid){
          console.log('提交')
          this.addClass()
        }
      })
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    addClass() {
      // gradeId: 500
      // name: "数学,英语,历史,地理,化学,物理,生物,政治,语文行政班2021"
      // subjectId: "2,3,4,5,9,8,7,6,1"
      // type: "1"
      // year: 2021
      busiClass.add(this.form).then(res => {
        this.form.name = ''
        this.msgSuccess('保存成功')
        // this.getClassTreeByCache(false)
        this.refreshClassTree()
      }).finally()
    },
    refreshClassTree() {
      this.$store.dispatch('GetInfo') // 借机清除了用户缓存 // clear cache
      this.loadTranslateClassTree()
    }
  }
}
</script>

<style scoped>
.size-icon{
  font-size: 25px;
  cursor: pointer;
  display: inline-block;
  height: 100%;
  position: absolute;
}
.icon{
  margin-left: 20px;
  color: red;
}
</style>