teachcloud-print-web/src/modules/base/components/course-simple/TeacherSimpleAssignCourseDialog.vue

<template>
  <el-dialog
    class="page-dialog"
    :visible.sync="modalIsShow"
    title="分配班级"
    top="10vh"
    width="800px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @opened="visibleChange"
  >
    <div class="part-box part-box-pad">
      <el-form ref="FilterForm" label-position="left" label-width="85px" inline>
        <el-form-item>
          <el-input
            v-model.trim="filterLabel"
            placeholder="请输入班级名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table ref="TableList" :data="dataList">
        <el-table-column width="55" align="center">
          <template slot="header">
            <el-checkbox
              v-model="checkAll"
              @change="checkAllChagne"
            ></el-checkbox>
          </template>
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.checked"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="clazzName" label="教学班"></el-table-column>
        <el-table-column prop="teachers" label="当前分配人"></el-table-column>
      </el-table>
    </div>
    <div slot="footer">
      <el-button type="primary" :loading="loading" @click="submit"
        >确认</el-button
      >
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { teacherSimpleCourseQuery, teacherSimpleAssignCourse } from "../../api";

export default {
  name: "teacher-simple-assign-course-dialog",
  props: {
    teacher: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      dataList: [],
      filterLabel: "",
      checkAll: false,
      loading: false,
    };
  },
  methods: {
    async getList() {
      const data = await teacherSimpleCourseQuery({
        teachCourseId: this.teacher.teachCourseId,
        clazzName: this.filterLabel,
      });
      this.dataList = (data || []).map((item) => {
        if (item.teacherList && item.teacherList.length) {
          item.teachers = item.teacherList.map((t) => t.name).join("，");
          item.checked = item.teacherList.some(
            (t) => t.id === this.teacher.userId
          );
        } else {
          item.teachers = "公共班级";
          item.checked = false;
        }
        return item;
      });
    },
    checkAllChagne(checked) {
      this.dataList.forEach((item) => {
        item.checked = checked;
      });
    },
    visibleChange() {
      this.filterLabel = "";
      this.getList();
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      ``;
      this.modalIsShow = true;
    },
    async submit() {
      const clazzIdList = this.dataList
        .filter((item) => item.checked)
        .map((item) => item.clazzId);

      if (!clazzIdList.length) {
        this.$message.error("请选择班级");
        return;
      }

      if (this.loading) return;
      this.loading = true;
      const res = await teacherSimpleAssignCourse({
        teachCourseId: this.teacher.teachCourseId,
        teacherId: this.teacher.userId,
        clazzIdList,
      }).catch(() => {});
      this.loading = false;
      if (!res) return;
      this.$message.success("保存成功！");
      this.cancel();
    },
  },
};
</script>