teachcloud-print-web/src/modules/exam/components/createExamAndPrintTask/InfoExamTask.vue

<template>
  <div class="info-exam-task">
    <div class="part-box part-box-pad part-box-border part-box-gray">
      <el-form
        ref="examTaskComp"
        :model="examTask"
        :rules="rules"
        label-width="120px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item prop="semesterId" label="使用学期：">
              <semester-select
                v-model="examTask.semesterId"
                class="width-full"
                @change="semesterChange"
              ></semester-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="examId" label="考试：">
              <exam-select
                v-model="examTask.examId"
                :semester-id="examTask.semesterId"
                :clearable="false"
                class="width-full"
                @change="examChange"
              ></exam-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="teachingRoomId" label="部门：">
              <teaching-room-select
                v-model="examTask.teachingRoomId"
                class="width-full"
                @change="teachingRoomChange"
              ></teaching-room-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="courseCode" label="课程（代码）：">
              <el-select
                v-model="examTask.courseCode"
                placeholder="请选择"
                filterable
                class="width-full"
                :disabled="!examTask.examId"
                @change="courseChange"
              >
                <el-option
                  v-for="item in courses"
                  :key="item.code"
                  :value="item.code"
                  :label="`${item.name}（${item.code}）`"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="paperNumber" label="试卷编号：">
              <el-input
                v-model.trim="examTask.paperNumber"
                placeholder="试卷编号不填写时会自动生成"
                :maxlength="50"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="teacherName" label="拟卷教师：">
              <el-input
                v-model.trim="examTask.teacherName"
                placeholder="请输入拟卷教师"
                :maxlength="50"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="apply-content task-detail">
      <div class="task-body">
        <div class="mb-2 text-right">
          <el-button
            type="info"
            icon="el-icon-circle-plus-outline"
            @click="addAtachment"
            >增加卷型</el-button
          >
        </div>
        <table class="table mb-2">
          <colgroup>
            <col width="100" />
            <col width="280" />
            <col />
            <col width="60" />
          </colgroup>
          <tr>
            <th>试卷类型</th>
            <th>试卷文件</th>
            <th>答题卡</th>
            <th>操作</th>
          </tr>
          <tr v-for="(attachment, index) in paperAttachments" :key="index">
            <td>{{ attachment.name }}卷</td>
            <td>
              <el-button
                type="text"
                class="btn-primary"
                @click="toUpload(attachment)"
              >
                <i
                  :class="[
                    'icon',
                    attachment.attachmentId ? 'icon-files-act' : 'icon-files'
                  ]"
                ></i
                >{{
                  attachment.attachmentId
                    ? attachment.filename
                    : "点击上传试卷文件"
                }}
              </el-button>
            </td>
            <td>
              <el-select
                class="mr-2"
                v-model="attachment.cardId"
                placeholder="请选择"
                style="width: 200px"
                filterable
                @change="cardChange(attachment)"
              >
                <el-option
                  v-for="item in cards"
                  :key="item.id"
                  :value="item.id"
                  :label="item.title"
                >
                </el-option>
              </el-select>
              <el-button
                class="btn-primary"
                type="text"
                :disabled="!attachment.cardId"
                @click="toViewCard(attachment)"
                >预览</el-button
              >
              <el-button
                class="btn-primary"
                type="text"
                :disabled="
                  !attachment.cardId || attachment.cardType === 'GENERIC'
                "
                @click="toEditCard(attachment)"
                >编辑</el-button
              >
              <el-button
                class="btn-primary"
                type="text"
                :disabled="!canCreateCard"
                @click="toCreateCard(attachment)"
                >新建</el-button
              >
            </td>
            <td>
              <el-button
                class="btn-danger"
                type="text"
                @click="deleteAttachment(index)"
                >删除</el-button
              >
            </td>
          </tr>
          <tr v-if="!paperAttachments.length">
            <td colspan="5">
              <p class="tips-info text-center">暂无数据</p>
            </td>
          </tr>
        </table>

        <p class="tips-info tips-dark mb-2">
          提示：多卷型试卷由于会绑定一个答题卡模板，因此试卷结构必须相同。多卷型试卷之间客观题要求试题内容相同，可允许大题内的小题题序不同。
        </p>

        <el-form>
          <el-form-item label="单次抽卷卷型数量：" label-width="150">
            <el-input-number
              v-model="examTaskDetail.drawCount"
              :min="1"
              :max="maxFetchCount"
              :step="1"
              step-strictly
              :controls="false"
            ></el-input-number>
          </el-form-item>
        </el-form>

        <h4 class="mb-2">附件<span>（最多4张）</span>：</h4>
        <div class="image-list">
          <div
            class="image-item"
            v-for="(img, index) in paperConfirmAttachments"
            :key="index"
          >
            <img
              :src="img.url"
              :alt="img.filename"
              title="点击查看大图"
              @click="toPreview(index)"
            />
            <div class="image-delete">
              <i
                class="el-icon-delete-solid"
                @click="deletePaperConfirmAttachment(index)"
              ></i>
            </div>
          </div>
          <div
            v-if="paperConfirmAttachments.length < 4"
            class="image-item image-add"
            title="上传入库审核表"
            @click="toUploadPaperConfirm"
          >
            <i class="el-icon-plus"></i>
          </div>
        </div>

        <h4 class="mb-2">附件说明：</h4>
        <el-input
          class="mb-2"
          v-model="examTaskDetail.remark"
          type="textarea"
          resize="none"
          :rows="2"
          :maxlength="100"
          clearable
          show-word-limit
          placeholder="建议不超过100个字"
        ></el-input>
      </div>
    </div>

    <!-- upload-paper-dialog -->
    <upload-paper-dialog
      :paper-attachment="curAttachment"
      :upload-type="curUploadType"
      @confirm="uploadConfirm"
      ref="UploadPaperDialog"
    ></upload-paper-dialog>
    <!-- image-preview -->
    <simple-image-preview
      :cur-image="curImage"
      @on-prev="toPrevImage"
      @on-next="toNextImage"
      ref="SimpleImagePreview"
    ></simple-image-preview>
    <!-- ModifyCard -->
    <modify-card ref="ModifyCard" @modified="cardModified"></modify-card>
  </div>
</template>

<script>
import UploadPaperDialog from "../UploadPaperDialog";
import SimpleImagePreview from "@/components/SimpleImagePreview";
import ModifyCard from "../../../card/components/ModifyCard";
import { COMMON_CARD_RULE_ID } from "../../../../constants/enumerate";
import { cardForSelectList } from "../../api";
import { courseQuery, examConfigByExamIdOrgId } from "../../../base/api";
import { mapState, mapMutations } from "vuex";

export default {
  name: "info-exam-task",
  components: { UploadPaperDialog, SimpleImagePreview, ModifyCard },
  data() {
    return {
      task: {},
      rules: {
        semesterId: [
          {
            required: true,
            message: "请选择使用学期",
            trigger: "change"
          }
        ],
        examId: [
          {
            required: true,
            message: "请选择考试",
            trigger: "change"
          }
        ],
        teachingRoomId: [
          {
            required: true,
            message: "请选择机构",
            trigger: "change"
          }
        ],
        courseCode: [
          {
            required: true,
            message: "请选择课程",
            trigger: "change"
          }
        ],
        paperNumber: [
          {
            message: "试卷编号不能超过50个字符",
            max: 50,
            trigger: "change"
          }
        ],
        teacherName: [
          {
            message: "拟卷教师不能超过50个字符",
            max: 50,
            trigger: "change"
          }
        ]
      },
      examTask: {},
      cards: [],
      courses: [],
      semesters: [],
      cardRuleName: "全部通卡",
      // exam-task-detail
      examTaskDetail: { makeMethod: "" },
      paperConfirmAttachmentId: { attachmentId: "", filename: "", url: "" },
      paperAttachments: [],
      paperConfirmAttachments: [],
      curAttachment: {},
      curUploadType: "paper",
      attachmentLimitCount: 26,
      abc: "abcdefghijklmnopqrstuvwxyz".toUpperCase(),
      // image-preview
      curImage: {},
      curImageIndex: 0
    };
  },
  computed: {
    ...mapState("exam", [
      "infoExamTask",
      "infoExamTaskDetail",
      "infoExamPrintPlan"
    ]),
    maxFetchCount() {
      return this.paperAttachments.length < 1
        ? 1
        : this.paperAttachments.length;
    },
    canCreateCard() {
      return (
        this.examTask.courseCode &&
        this.examTask.examId &&
        this.examTask.cardRuleId !== COMMON_CARD_RULE_ID
      );
    }
  },
  watch: {
    "examTask.examId": function(val, oldval) {
      if (val !== oldval) this.examAndRoomChange();
    },
    "examTask.teachingRoomId": function(val, oldval) {
      if (val !== oldval) this.examAndRoomChange();
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    ...mapMutations("exam", ["updateTaskInfo"]),
    initData() {
      this.examTask = { ...this.infoExamTask };
      this.examTaskDetail = { ...this.infoExamTaskDetail };
      this.paperAttachments = this.examTaskDetail.paperAttachmentIds
        ? JSON.parse(this.examTaskDetail.paperAttachmentIds)
        : [];

      if (!this.paperAttachments.length) {
        this.addAtachment();
      }

      this.paperConfirmAttachments = this.examTaskDetail
        .paperConfirmAttachmentIds
        ? JSON.parse(this.examTaskDetail.paperConfirmAttachmentIds)
        : [];

      this.getCourses();
      this.getCardList();

      this.$nextTick(() => {
        this.$refs.examTaskComp.clearValidate();
      });
    },
    async getCardList() {
      if (!this.examTask.courseCode || !this.examTask.examId) return;
      const data = await cardForSelectList({
        courseCode: this.examTask.courseCode,
        examId: this.examTask.examId
      });
      this.cards = data || [];
    },
    async getCourses() {
      if (!this.examTask.teachingRoomId) return;
      const res = await courseQuery({
        teachingRoomId: this.examTask.teachingRoomId
      });
      this.courses = res || [];
    },
    semesterChange(val) {
      this.examTask.paperName = val.name;
    },
    examChange(val) {
      console.log(val);
      this.examTask.examModel = val.examModel;
      this.paperAttachments.forEach(item => {
        item.cardId = "";
        item.cardType = "";
        item.cardTitle = "";
      });
      this.cards = [];
      this.getCardList();
    },
    teachingRoomChange() {
      this.examTask.courseCode = "";
      this.examTask.courseName = "";
      this.courses = [];
      this.paperAttachments.forEach(item => {
        item.cardId = "";
        item.cardType = "";
        item.cardTitle = "";
      });
      this.cards = [];
      this.getCourses();
    },
    courseChange(val) {
      if (val) {
        const course = this.courses.find(item => item.code === val);
        this.examTask.courseName = course.name;
        this.examTask.courseId = course.id;
      } else {
        this.examTask.courseName = "";
        this.examTask.courseId = "";
      }
      this.paperAttachments.forEach(item => {
        item.cardId = "";
        item.cardType = "";
        item.cardTitle = "";
      });
      this.cards = [];
      this.getCardList();
      this.updateTaskInfo({ infoExamTask: this.examTask });
    },
    async examAndRoomChange() {
      this.updateTaskInfo({ infoExamTask: this.examTask });

      const { examId, teachingRoomId } = this.examTask;
      if (examId && teachingRoomId) {
        const examPrintPlan = await examConfigByExamIdOrgId({
          examId,
          orgId: teachingRoomId
        });
        this.examTask.cardRuleId = examPrintPlan.cardRuleId;
        this.updateTaskInfo({
          infoExamPrintPlan: Object.assign(
            {},
            this.infoExamPrintPlan,
            examPrintPlan
          ),
          infoExamTask: this.examTask
        });
      }
    },
    cardChange(attachment) {
      const card = this.cards.find(item => item.id === attachment.cardId);
      if (card) {
        attachment.cardType = card.type;
        attachment.cardTitle = card.title;
      }
    },
    toCreateCard(attachment) {
      if (!this.examTask.cardRuleId) {
        this.$message.error("题卡规则缺失！");
        return;
      }
      this.curAttachment = { ...attachment };
      this.$ls.set("prepareTcPCard", {
        courseCode: this.examTask.courseCode,
        courseName: this.examTask.courseName,
        schoolName: this.$ls.get("schoolName"),
        makeMethod: "SELF",
        cardRuleId: this.examTask.cardRuleId,
        type: "CUSTOM",
        createMethod: "STANDARD"
      });
      this.$refs.ModifyCard.open();
    },
    toEditCard(attachment) {
      this.curAttachment = { ...attachment };
      this.$ls.set("prepareTcPCard", {
        id: attachment.cardId,
        courseCode: this.examTask.courseCode,
        courseName: this.examTask.courseName,
        schoolName: this.$ls.get("schoolName"),
        makeMethod: "SELF",
        cardRuleId: this.examTask.cardRuleId,
        type: "CUSTOM",
        createMethod: "STANDARD"
      });
      this.$refs.ModifyCard.open();
    },
    toViewCard(attachment) {
      window.open(
        this.getRouterPath({
          name: "CardPreview",
          params: {
            cardId: attachment.cardId,
            viewType: "view"
          }
        })
      );
    },
    async cardModified(cardId) {
      if (!cardId) return;
      let card = this.cards.find(item => item.id === cardId);
      if (!card) {
        await this.getCardList();
        card = this.cards.find(item => item.id === cardId);
      }

      const aind = this.paperAttachments.findIndex(
        item => item.name === this.curAttachment.name
      );
      if (aind !== -1 && card) {
        this.paperAttachments[aind].cardId = card.id;
        this.paperAttachments[aind].cardType = card.type;
        this.paperAttachments[aind].cardTitle = card.title;
      }
    },
    async checkData() {
      const valid = await this.$refs.examTaskComp.validate().catch(() => {});
      if (!valid) return Promise.reject();

      const attachmentValid = !this.paperAttachments.some(
        item => !item.attachmentId
      );
      // 设置了入库强制包含试卷时，校验试卷是否上传。
      if (this.examTaskDetail.includePaper && !attachmentValid) {
        this.$message.error("请完成试卷文件上传！");
        return Promise.reject();
      }
      // if (!this.paperConfirmAttachments.length) {
      //   this.$message.error("请上传附件！");
      //   return;
      // }

      const cardValid = !this.paperAttachments.some(item => !item.cardId);
      if (!cardValid) {
        this.$message.error("有试卷类型未选择题卡！");
        return Promise.reject();
      }

      return Promise.resolve(true);
    },
    updateData() {
      let data = {
        infoExamTask: this.examTask,
        infoExamTaskDetail: this.getTaskDetailData()
      };
      this.updateTaskInfo(data);
    },
    emitRelateInfo(type) {
      this.$emit("relate-info-change", this.getData(), type);
    },
    // exam-task-detail edit
    addAtachment() {
      if (this.paperAttachments.length >= this.attachmentLimitCount) return;

      const newAttachment = {
        name: this.abc[this.paperAttachments.length],
        attachmentId: "",
        cardId: "",
        cardType: "",
        cardTitle: "",
        filename: "",
        pages: 0
      };
      this.paperAttachments.push(newAttachment);
    },
    deleteAttachment(index) {
      if (this.paperAttachments.length <= 1) {
        this.$message.error("试卷类型数量不得少于1");
        return;
      }
      this.paperAttachments.splice(index, 1);
      this.paperAttachments.forEach((item, itemIndex) => {
        item.name = this.abc[itemIndex];
      });
      if (
        this.examTaskDetail.drawCount &&
        this.examTaskDetail.drawCount > this.paperAttachments.length
      ) {
        this.examTaskDetail.drawCount = this.paperAttachments.length;
      }
    },
    toUpload(attachment) {
      this.curUploadType = "paper";
      this.curAttachment = {
        ...attachment
      };
      this.$refs.UploadPaperDialog.open();
    },
    toUploadPaperConfirm() {
      if (this.paperConfirmAttachments.length >= 4) return;
      this.curUploadType = "paperConfirm";
      this.curAttachment = {
        ...this.paperConfirmAttachmentId
      };
      this.$refs.UploadPaperDialog.open();
    },
    uploadConfirm(attachment, uploadType) {
      if (uploadType === "paper") {
        const index = this.paperAttachments.findIndex(
          item => item.name === attachment.name
        );
        this.paperAttachments.splice(index, 1, { ...attachment });
      } else {
        this.paperConfirmAttachments.push(attachment);
      }
    },
    deletePaperConfirmAttachment(index) {
      this.paperConfirmAttachments.splice(index, 1);
    },
    // cardConfirm(data) {
    //   this.examTaskDetail = this.$objAssign(this.examTaskDetail, data);
    // },
    getTaskDetailData() {
      let data = { ...this.examTaskDetail };
      data.paperType = this.paperAttachments.map(item => item.name).join(",");
      data.paperAttachmentIds = JSON.stringify(this.paperAttachments, (k, v) =>
        k === "url" ? undefined : v
      );
      data.paperConfirmAttachmentIds = JSON.stringify(
        this.paperConfirmAttachments
      );
      return data;
    },
    // image-preview
    toPreview(index) {
      this.curImageIndex = index;
      this.selectImage(index);
      this.$refs.SimpleImagePreview.open();
    },
    selectImage(index) {
      this.curImage = this.paperConfirmAttachments[index];
    },
    toPrevImage() {
      if (this.curImageIndex === 0) {
        this.curImageIndex = this.paperConfirmAttachments.length - 1;
      } else {
        this.curImageIndex--;
      }

      this.selectImage(this.curImageIndex);
    },
    toNextImage() {
      if (this.curImageIndex === this.paperConfirmAttachments.length - 1) {
        this.curImageIndex = 0;
      } else {
        this.curImageIndex++;
      }

      this.selectImage(this.curImageIndex);
    }
  }
};
</script>