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

<template>
  <div class="mark-paper-class">
    <div class="box-justify mb-2">
      <div>
        <span>分班阅卷：</span>
        <el-switch
          v-model="openClassReading"
          @change="openClassReadingChange"
        ></el-switch>
      </div>
      <mark-status class="mr-4" field="markerClass"></mark-status>
    </div>

    <div v-if="openClassReading" class="part-box part-box-pad">
      <el-table :data="markerClassList" border>
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column label="评卷员" width="200">
          <template slot-scope="scope">
            <el-tag class="tag-spin" size="medium">
              {{ scope.row.name }}（{{ scope.row.orgName }}）
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="评卷班级">
          <template slot-scope="scope">
            <el-tag
              v-for="item in scope.row.className"
              :key="item"
              size="medium"
              type="info"
              class="mb-1 mr-1"
            >
              {{ item }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column class-name="action-column" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              class="btn-primary"
              type="text"
              @click="toEditClass(scope.row)"
              >选择班级</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- SelectClassByCourse -->
    <select-class-by-course
      ref="SelectClassByCourse"
      :filter-data="{
        examId: datas.basicPaperInfo.examId,
        paperNumber: datas.basicPaperInfo.paperNumber,
      }"
      :selected-ids="selectedClassIds"
      :disable-ids="disabledClassIds"
      @confirm="classSelected"
    ></select-class-by-course>
  </div>
</template>

<script>
import SelectClassByCourse from "../SelectClassByCourse.vue";
import MarkStatus from "./MarkStatus.vue";

export default {
  name: "mark-paper-class",
  components: {
    SelectClassByCourse,
    MarkStatus,
  },
  props: {
    datas: {
      type: Object,
      default() {
        return {
          classInfo: [],
          groupInfo: [],
          basicPaperInfo: {},
        };
      },
    },
  },
  data() {
    return {
      openClassReading: false,
      markerClassList: [],
      curMarkClass: {},
      selectedClassIds: [],
      disabledClassIds: [],
      casheMarkerClass: {},
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.openClassReading = this.datas.basicPaperInfo.openClassReading;
      if (!this.openClassReading) return;

      this.markerClassList = this.datas.classInfo.map((item) => {
        let nitem = { ...item };
        nitem.className = nitem.className ? nitem.className.split(",") : [];
        return nitem;
      });
      this.updateCasheMarkerClass();
      this.initMarkerClassList();
    },
    groupChange() {
      if (!this.openClassReading) return;
      this.updateCasheMarkerClass();
      this.initMarkerClassList();
    },
    openClassReadingChange(val) {
      if (val) {
        this.initMarkerClassList();
      } else {
        this.updateCasheMarkerClass();
        this.markerClassList = [];
      }
    },
    initMarkerClassList() {
      let markerClassList = [];
      let markIds = [];
      this.datas.groupInfo.forEach((group) => {
        group.markerList.forEach((marker) => {
          if (markIds.includes(marker.id)) return;
          markIds.push(marker.id);
          markerClassList.push({
            id: marker.id,
            loginName: marker.loginName,
            name: marker.name,
            orgName: marker.orgName,
            className: this.casheMarkerClass[marker.id] || [],
          });
        });
      });
      this.markerClassList = markerClassList;
    },
    updateCasheMarkerClass() {
      let casheMarkerClass = {};
      this.markerClassList.forEach((item) => {
        casheMarkerClass[item.id] = item.className;
      });
      this.casheMarkerClass = casheMarkerClass;
    },
    toEditClass(row) {
      this.curMarkClass = row;
      this.selectedClassIds = row.className;
      this.$refs.SelectClassByCourse.open();
    },
    classSelected(className) {
      this.curMarkClass.className = className;
    },
    checkData() {
      let errorMessages = [];
      if (!this.openClassReading) return errorMessages;

      this.markerClassList.forEach((item) => {
        if (!item.className.length) {
          errorMessages.push(`评卷员${item.name}的阅卷班级没有设置`);
        }
      });

      return errorMessages;
    },
    getData() {
      return {
        openClassReading: this.openClassReading,
        classInfo: this.markerClassList.map((item) => {
          let nitem = { ...item };
          nitem.className = item.className.join();
          return nitem;
        }),
      };
    },
  },
};
</script>