teachcloud-print-web/src/modules/stmms/components/markParam/MarkParamMarkerLeader.vue

<template>
  <div class="mark-param-marker-leader">
    <div class="box-justify part-box part-box-pad">
      <div>
        <p class="tips-info">
          1.科组长支持查看该课程下全部学生的成绩及查看分析报告！
        </p>
        <p class="tips-info">2.支持绑定多个科组长！</p>
      </div>
      <div>
        <span
          ><i class="el-icon-success color-success"></i>科组长绑定成功！</span
        >
        <span
          ><i class="el-icon-success color-danger"></i>
          科组长同步阅卷模块失败！</span
        >
      </div>
    </div>

    <div class="part-box part-box-pad">
      <table class="table">
        <colgroup>
          <col />
          <col width="100" />
        </colgroup>
        <tr>
          <th>科组长</th>
          <th>操作</th>
        </tr>
        <tr>
          <td>
            <el-tag
              v-for="user in users"
              :key="user.id"
              closable
              :disable-transitions="false"
              @close="toDeleteUser(user)"
            >
              {{ user.label }}
            </el-tag>
          </td>
          <td>
            <el-button class="btn-primary" type="text" @click="toEdit"
              >编辑</el-button
            >
          </td>
        </tr>
      </table>
    </div>

    <div class="text-center">
      <el-button type="primary" :disabled="loading" @click="submit"
        >提交</el-button
      >
      <el-button @click="cancel">取消</el-button>
    </div>

    <select-type-user
      ref="SelectTypeUser"
      special-privilege="SUBJECT_HEADER"
      dialog-title="选择科组长"
      :user-ids="curMarkLeaders"
      :user-limit-count="0"
      @confirm="userSelected"
    ></select-type-user>
  </div>
</template>

<script>
import { examBindMarkLeader } from "../../api";
import SelectTypeUser from "../SelectTypeUser.vue";

export default {
  name: "mark-param-marker-leader",
  components: { SelectTypeUser },
  data() {
    return {
      loading: false,
      users: [],
    };
  },
  computed: {
    curMarkLeaders() {
      return this.users.map((item) => item.id);
    },
  },
  methods: {
    toDeleteUser(user) {
      this.users = this.users.filter((item) => item.id !== user.id);
    },
    userSelected(users) {
      this.users = users;
    },
    toEdit() {
      this.$refs.SelectTypeUser.open();
    },
    async submit() {
      if (!this.users.length) {
        this.$message.error("请选择科组长");
        return;
      }

      if (this.loading) return;
      this.loading = true;

      const res = await examBindMarkLeader({
        id: this.instance.id,
        markLeader: this.users.map((item) => {
          return {
            id: item.id,
            loginName: item.loginName,
          };
        }),
      }).catch(() => {});
      this.loading = false;
      if (!res) return;
      this.$message.success("绑定成功！");
    },
    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>