teachcloud-print-web/src/modules/mark/components/markParam/MarkParamClass.vue

<template>
  <div class="mark-param-class">
    <div class="box-justify part-box part-box-pad">
      <div></div>
      <div>
        <el-button type="primary" @click="toImport">导入</el-button>
      </div>
    </div>

    <div class="part-box part-box-pad">
      <el-table :data="classList" border>
        <el-table-column type="index" width="50"> </el-table-column>

        <el-table-column label="班级">
          <template slot-scope="scope">
            <el-tag size="medium" type="info">
              {{ scope.row.className }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="评阅题目" prop="groupQuestions" width="200">
        </el-table-column>
        <el-table-column label="评卷员" width="200">
          <template slot-scope="scope">
            <el-tag
              v-for="item in scope.row.classMarkerList"
              :key="item"
              size="medium"
              type="info"
              class="mb-1 mr-1"
            >
              {{ scope.row.name }}（{{ scope.row.orgName }}）
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column class-name="action-column" label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              class="btn-primary"
              type="text"
              @click="toSelectMarker(scope.row)"
              >选择评卷员</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 选择评卷员 -->
    <el-dialog
      :visible.sync="modalIsShow"
      title="选择评卷员"
      top="10px"
      width="600px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <el-form ref="modalFormComp" :model="modalForm" :rules="rules">
        <el-form-item prop="selectedMarkerIds">
          <el-checkbox-group v-model="modalForm.selectedMarkerIds">
            <el-checkbox
              v-for="mark in curClass.markerList"
              :key="mark.userId"
              :label="mark.userId"
            >
              {{ mark.name }}（{{ mark.orgName }}）
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" :disabled="isSubmit" @click="conform"
          >确认</el-button
        >
        <el-button @click="modalIsShow = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { markClassList, markClassSave } from "../../api";
import { mapState } from "vuex";

export default {
  name: "mark-param-class",
  components: {},
  data() {
    return {
      classList: [],
      curClass: {},
      // modify
      modalIsShow: false,
      isSubmit: false,
      modalForm: { selectedMarkerIds: [] },
      rules: {
        selectedMarkerIds: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value.length) {
                callback(new Error("请选择评卷员"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState("markParam", ["basicInfo", "paperStructureInfo"]),
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      const params = {
        examId: this.basicInfo.examId,
        paperNumber: this.basicInfo.paperNumber,
      };
      const res = await markClassList(params);
      this.classList = res || [];
    },
    toSelectMarker(row) {
      this.curClass = row;
      this.modalIsShow = true;
    },
    toImport() {
      // TODO:
    },
    async conform() {
      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
      if (!valid) return;

      this.isSubmit = true;
      const classMarkerList = this.curClass.markerList.filter((item) =>
        this.modalForm.selectedMarkerIds.includes(item.userId)
      );
      const res = await markClassSave({
        examId: this.basicInfo.examId,
        paperNumber: this.basicInfo.paperNumber,
        className: this.curClass.className,
        groupNumber: this.curClass.groupNumber,
        classMarkerList,
      }).catch(() => {});
      this.isSubmit = false;
      if (!res) return;
      this.$message.success("操作成功！");
      this.curClass.classMarkerList = classMarkerList;
      this.modalIsShow = false;
    },
    getData() {
      return {
        openClassReading: this.openClassReading,
        classInfo: this.markerClassList.map((item) => {
          let nitem = { ...item };
          nitem.className = item.className.join();
          return nitem;
        }),
      };
    },
  },
};
</script>