school-in-out/school-in-out-ui/src/views/system/clazz/module/BindTeacherClass.vue

<template>
  <el-dialog 
    v-loading="loading"  
    element-loading-text="正在绑定中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    title="绑定班主任" width="450px" 
    :visible.sync="open"
    @close="closeDialog"
  >
    <el-form 
        :model="form" 
        :rules="rules" 
        ref="bindRuleForm" 
    >
        <el-form-item label="教师" label-width="60px" prop="teacherId">
            <el-select 
                v-model="form.teacherId" 
                :loading="bindOptionLoding" 
                loading-text="正在加载中~~~"
                reserve-keyword 
                @visible-change="searchTeacherOption" 
                placeholder="请选择该班级教师" style="width: 100%;">
            <el-option 
                v-for="item in teacherOptions" 
                :key="item.value" 
                :label="item.label" 
                :value="item.value"></el-option>
          </el-select>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
 </el-dialog>
</template>

<script>
import {updateTeacherClassRelation, getRelationInfoList} from '@/api/system/teacher_class_relation'
export default {
    data() {
        return {
            loading: false,
            form: {},
            open: false,
            option: [],
            bindOptionLoding: false,
            teacherOptions: [],
            rules: {
                teacherId: [
                    { required: true, message: '请选择教师', trigger: 'change' }
                ],
            }
        }
    },
    methods: {
        openDialog() {
            this.open = true;

        },
        closeDialog() {
            this.open = false;
            this.reset();
            this.$refs.bindRuleForm.resetFields()
            this.teacherOptions = []
        },
        dialogFormVisibleChange(val) {
            this.dialogFormVisible = val;
        },
        reset() {
            this.form = {};
        },
        searchTeacherOption(openSelect) {
            if (openSelect) {
                this.bindOptionLoding = true
                // 发送请求
                getRelationInfoList(this.form).then(res => {
                
                    let data = res.data;
                    this.teacherOptions = data.map(item => {
                        let obj = {};
                        obj.label = item.teacherName;
                        obj.value = item.teacherId;
                        return obj;
                    })
                }).finally(() =>
                    this.bindOptionLoding = false
                )
            }
        },
        submitForm() {
            this.$refs.bindRuleForm.validate(isOk => {
                if (isOk) {
                    this.loading = true
                    this.form.teacherMain = 'Y';
       
                    updateTeacherClassRelation(this.form).then(res => {
                        // 发送请求
                        this.$message.success('绑定成功！');
                        // 关闭表单
                        this.closeDialog();
                        // 重置列表
                        this.$emit('resetTable');
                       
                    }).finally(() => {
                        setTimeout(() => {
                            this.loading = false;
                        }, 500)
                    })
                }
            })
        }
    },
}
</script>

<style>

</style>