front/src/views/system/user/profile/components/headteacher-form.vue

<template>
  <div class="fx-column">
    <el-form label-width="80px" label-position="right">
      <el-form-item label="带班" class="form-item-readonly">{{ headteacherClassName }}</el-form-item>
      <el-form-item label="状态" class="form-item-readonly">{{ status }}</el-form-item>
    </el-form>
    <div class="fx-row fx-cen-cen mt20">
      <template v-if="isFrontHeadteacher">
        <el-button type="primary" @click="handleChangeHeadteacherClass">更换班主任</el-button>
        <el-button type="danger" @click="handleUnbindHeadteacher">解除班主任</el-button>
      </template>
      <el-button v-else type="primary" @click="handleBindHeadteacher">申请班主任</el-button>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="400px">
      <div class="fx-row fx-cen-cen">
        <template v-if="popupShowClassPicker">
          <span class="mr10">申请班级：</span>
          <el-cascader v-model="applyHeadteacherClassId" placeholder="选择年级-班级" :options="standardClassTree"
                       :props="{emitPath: false}">
          </el-cascader>
        </template>
        <div v-else class="fx-1 fx-row fx-cen-cen">{{ confirmText }}？！</div>
      </div>
      <div class="fx-row fx-end-cen mt40">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="handleFormSubmit">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import consts from '@/common/mx-const'
import classTreeTranslateMixin from '@/components/Cache/modules/mx-classTree-translate-mixin'
import { applyTeacherForm } from '@/api/webApi/form'

export default {
  mixins: [classTreeTranslateMixin],
  name: 'headteacher-form',
  props: {
    status: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // popup
      dialogVisible: false,
      applyFormType: '',
      applyFormId: '',
      applyHeadteacherClassId: ''
    }
  },
  computed: {
    ...mapGetters(['currentUser', 'isFrontTeacher', 'isFrontHeadteacher']),
    headteacherClassName() {
      const classId = this.currentUser.headteacherClassId
      if (!classId) return '当前不是班主任'
      return this.getFullClassName(classId)
    },
    popupShowClassPicker() {
      return this.applyFormType &&
        this.applyFormType != consts.enum.formType.delClassMaster
    },
    confirmText() {
      return this.applyFormType ? '确认解除班主任' : '确认取消'
    }
  },
  methods: {
    handleBindHeadteacher() {
      this.applyFormType = consts.enum.formType.addClassMaster
      this.dialogVisible = true
    },
    handleUnbindHeadteacher() {
      this.applyFormType = consts.enum.formType.delClassMaster
      this.applyHeadteacherClassId = ''
      this.$confirm(this.confirmText).then(() => this.handleFormSubmit())
    },
    handleChangeHeadteacherClass() {
      this.applyFormType = consts.enum.formType.updateClassMaster
      this.dialogVisible = true
    },
    handleFormSubmit() {
      if (!this.applyHeadteacherClassId &&
        this.applyFormType != consts.enum.formType.delClassMaster) {
        this.msgError('请选择班级')
        return
      }
      if (this.applyHeadteacherClassId == this.currentUser.headteacherClassId) {
        this.msgError('申请班级不能与当前班级相同')
        return
      }
      applyTeacherForm({
        formType: this.applyFormType,
        newValue: this.applyHeadteacherClassId,
        oldValue: this.currentUser.headteacherClassId
      }).then(res => {
        this.msgSuccess('提交成功')
        this.dialogVisible = false
        this.applyHeadteacherClassId = ''
        this.$emit('formCompleted')
      })
    }
  }
}
</script>

<style scoped>
</style>