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

<template>
  <div>
    <el-form  :rules="rules" ref="form" :model="form" label-width="80px" @submit.native.prevent>
      <el-form-item label-width="0">
        <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-item>
      <el-form-item label="输入班级" prop="name" v-if="inputVisible" >
        <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-button v-else type="primary" size="small" @click="showInput">新增班级</el-button>
    </el-form>
  </div>
</template>

<script>
import MxClassTreeTranslateMixin from '@/components/Cache/modules/mx-classTree-translate-mixin.js'
import * as busiClass from '@/api/webApi/busi-classes.js'

export default {
  name: 'choose-class',
  props: {
    year: {
      type: Number
    },
  },
  mixins: [MxClassTreeTranslateMixin],
  data() {
    return {
      tmpClasses: [],
      roundGroup: {},
      settingContainer: [],
      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.gradeId = 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.handleInputConfirm()
    },
    validate() {
      //
      if (this.tmpClassIds.length !== this.roundGroup.classCount) return false
      return true
    },
    open(roundGroup, settingContainer) {
      this.roundGroup = roundGroup
      this.settingContainer = settingContainer
      this.tmpClasses = settingContainer.filter(setting => setting.groupId == roundGroup.groupId)
      this.tmpClassIds = this.tmpClasses.map(c => c.classId)
    },
    confirm() {
      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()
      return this.settingContainer
    },
    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() {
      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>