teachcloud-print-web/src/modules/exam/components/ApplyContent.vue

<template>
  <div class="apply-content task-detail">
    <div class="mb-4" v-if="flows.length">
      <el-steps align-center>
        <el-step
          v-for="flow in flows"
          :key="flow.taskKey"
          :title="flow.taskName"
          :status="flow.status"
        >
          <div slot="description">
            <p class="step-desc">{{ flow.desc }}</p>
            <div class="step-info" v-if="flow.firstUser">
              <span>{{ flow.firstUser }}</span>
              <el-popover
                v-if="flow.moreUser"
                placement="top-start"
                width="300"
                trigger="hover"
                :content="flow.moreUser"
              >
                <span class="color-primary" slot="reference">更多</span>
              </el-popover>
            </div>
          </div>
        </el-step>
      </el-steps>
    </div>

    <div class="task-body">
      <div v-if="IS_APPLY" class="mb-2 text-right">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="addAtachment"
          >增加卷型</el-button
        >
      </div>
      <table class="table mb-2">
        <tr>
          <th>试卷类型</th>
          <th>试卷文件</th>
          <th>答题卡创建方式</th>
          <th>答题卡</th>
          <th v-if="IS_APPLY">操作</th>
        </tr>
        <tr v-for="(attachment, index) in paperAttachments" :key="index">
          <td>{{ attachment.name }}卷</td>
          <td class="td-link">
            <span
              v-if="IS_APPLY"
              @click="toUpload(attachment)"
              title="点击上传试卷"
            >
              <i
                :class="[
                  'icon',
                  attachment.attachmentId ? 'icon-files-act' : 'icon-files'
                ]"
              ></i
              >{{
                attachment.attachmentId
                  ? attachment.filename
                  : "点击上传试卷文件"
              }}
            </span>
            <span
              v-else
              @click="downloadPaper(attachment)"
              title="点击查看试卷"
            >
              <i class="el-icon-download" v-if="attachment.attachmentId"></i>
              <i>{{ attachment.filename }}</i>
            </span>
          </td>
          <td :rowspan="paperAttachments.length" v-if="index === 0">
            {{ createCardTypeName }}
          </td>
          <td
            class="td-link"
            :rowspan="paperAttachments.length"
            v-if="index === 0"
          >
            <span v-if="IS_APPLY" @click="toCreateOrViewCard">{{
              cardTodoName
            }}</span>
            <span v-else @click="toViewCard">
              <i>查看题卡</i>
            </span>
            <el-button
              v-if="curTaskApply.makeMethod && IS_APPLY"
              size="mini"
              type="primary"
              @click="changeCreateCardType"
              >切换题卡创建方式</el-button
            >
          </td>
          <td v-if="IS_APPLY">
            <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="curTaskApply.drawCount"
            :min="1"
            :max="maxFetchCount"
            :step="1"
            step-strictly
            :controls="false"
            :disabled="!IS_APPLY"
          ></el-input-number>
        </el-form-item>
      </el-form>

      <h4 class="mb-2">备注说明：</h4>
      <el-input
        class="mb-2"
        v-model="curTaskApply.remark"
        type="textarea"
        resize="none"
        :rows="2"
        :maxlength="100"
        clearable
        show-word-limit
        placeholder="建议不超过100个字"
        :disabled="!IS_APPLY"
      ></el-input>

      <h4 class="mb-2" v-if="IS_APPLY">上传入库审核表（最多4张）</h4>
      <h4 class="mb-2" v-else>入库审核表</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 v-if="IS_APPLY" class="image-delete">
            <i
              class="el-icon-delete-solid"
              @click="deletePaperConfirmAttachment(index)"
            ></i>
          </div>
        </div>
        <div
          v-if="paperConfirmAttachments.length < 4 && IS_APPLY"
          class="image-item image-add"
          title="上传入库审核表"
          @click="toUploadPaperConfirm"
        >
          <i class="el-icon-plus"></i>
        </div>
      </div>

      <!-- audit -->
      <el-form
        v-if="IS_AUDIT"
        ref="auditModalComp"
        :model="auditModal"
        :rules="auditRules"
        label-width="90px"
      >
        <el-form-item prop="approvePass" label="审批操作：">
          <el-radio-group v-model="auditModal.approvePass">
            <el-radio
              v-for="(val, key) in TASK_AUDIT_RESULT"
              :key="key"
              :label="key"
              >{{ val }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="auditModal.approvePass === 'REJECT'"
          prop="setup"
          label="驳回节点："
        >
          <el-select v-model="auditModal.setup" placeholder="请选择">
            <el-option
              v-for="item in setups"
              :key="item.taskKey"
              :value="item.setup"
              :label="item.taskName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="auditModal.approvePass === 'REJECT'"
          prop="remark"
          label="审批意见："
        >
          <el-input
            class="mb-2"
            v-model="auditModal.remark"
            type="textarea"
            resize="none"
            :rows="5"
            :maxlength="1000"
            clearable
            show-word-limit
            placeholder="建议不超过1000个字"
            ref="ReasonInput"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="task-action">
      <el-button
        v-if="IS_APPLY"
        type="primary"
        :disabled="isSubmit"
        @click="submit"
        >确认提交</el-button
      >
      <el-button
        v-if="IS_APPLY"
        type="primary"
        :disabled="isSubmit"
        @click="toSave"
        >暂存</el-button
      >
      <el-button
        v-if="IS_AUDIT"
        type="primary"
        :disabled="isSubmit"
        @click="toAuditApply"
        >确定</el-button
      >
      <el-button @click="cancel">取消</el-button>
    </div>

    <!-- upload-paper-dialog -->
    <upload-paper-dialog
      :paper-attachment="curAttachment"
      :upload-type="curUploadType"
      @confirm="uploadConfirm"
      ref="UploadPaperDialog"
    ></upload-paper-dialog>
    <!-- card-option-dialog -->
    <card-option-dialog
      ref="CardOptionDialog"
      :data="task"
      @upload-sample-over="initData"
      @draft-task="silentSave"
      @confirm="cardConfirm"
    ></card-option-dialog>
    <!-- image-preview -->
    <simple-image-preview
      :cur-image="curImage"
      @on-prev="toPrevImage"
      @on-next="toNextImage"
      ref="SimpleImagePreview"
    ></simple-image-preview>
  </div>
</template>

<script>
import UploadPaperDialog from "./UploadPaperDialog";
import CardOptionDialog from "./CardOptionDialog";
import {
  taskApplyDetail,
  updateTaskApply,
  updateTaskReview,
  switchCardCreateMethod,
  taskAllFlowSetups,
  taskAllApproverPeople
} from "../api";
import { attachmentPreview } from "../../login/api";
import SimpleImagePreview from "@/components/SimpleImagePreview";
import { CARD_SOURCE_TYPE, TASK_AUDIT_RESULT } from "@/constants/enumerate";

const initTaskApply = {
  examTaskId: "",
  paperType: "A",
  paperAttachmentIds: "",
  paperConfirmAttachmentIds: "",
  cardId: "",
  cardRuleId: "",
  makeMethod: "",
  remark: "",
  courseCode: "",
  courseName: "",
  drawCount: 1,
  // 流程
  flowId: "",
  setup: 0,
  // 工作台任务id
  flowTaskId: "",
  // 题卡状态
  status: "",
  // 考务规则
  review: false,
  includePaper: false,
  customCard: false
};

export default {
  name: "apply-content",
  components: { UploadPaperDialog, CardOptionDialog, SimpleImagePreview },
  props: {
    examTask: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      isSubmit: false,
      curTaskApply: { ...initTaskApply },
      paperConfirmAttachmentId: { attachmentId: "", filename: "", url: "" },
      paperAttachments: [],
      paperConfirmAttachments: [],
      curAttachment: {},
      curUploadType: "paper",
      attachmentLimitCount: 26,
      abc: "abcdefghijklmnopqrstuvwxyz".toUpperCase(),
      task: {},
      reason: "",
      // audit
      TASK_AUDIT_RESULT,
      flows: [],
      setups: [],
      auditModal: {
        approvePass: "PASS",
        setup: "",
        remark: ""
      },
      auditRules: {
        approvePass: [
          {
            required: true
          }
        ],
        setup: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.auditModal.approvePass === "REJECT" && !value) {
                callback(new Error(`请选择要驳回到的节点`));
              } else {
                callback();
              }
            },
            trigger: "change"
          }
        ],
        remark: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.auditModal.approvePass === "REJECT" && !value) {
                callback(new Error(`请输入审批意见`));
              } else {
                callback();
              }
            },
            trigger: "change"
          }
        ]
      },
      // image-preview
      curImage: {},
      curImageIndex: 0
    };
  },
  computed: {
    IS_APPLY() {
      return this.curTaskApply.setup === 1;
    },
    IS_PREVIEW() {
      return this.curTaskApply.setup === 0;
    },
    IS_AUDIT() {
      return this.curTaskApply.setup > 1;
    },
    cardTodoName() {
      let name = "创建答题卡";
      if (this.curTaskApply.cardId) {
        if (this.curTaskApply.makeMethod === "SELECT") {
          name = "选择题卡";
        } else if (this.curTaskApply.makeMethod === "SELF") {
          name = "编辑题卡";
        } else {
          // 已经审核的题卡可以自行编辑，未审核的题卡只能查看
          name =
            this.curTaskApply.status === "SUBMIT" ? "编辑题卡" : "查看题卡";
        }
      }
      return name;
    },
    createCardTypeName() {
      return CARD_SOURCE_TYPE[this.curTaskApply.makeMethod] || "";
    },
    maxFetchCount() {
      return this.paperAttachments.length < 1
        ? 1
        : this.paperAttachments.length;
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      const data = await taskApplyDetail(
        this.examTask.id,
        this.examTask.source
      );
      this.curTaskApply = this.$objAssign(initTaskApply, data || {});
      this.curTaskApply.examTaskId = this.examTask.id;
      this.curTaskApply.courseCode = this.examTask.courseCode;
      this.curTaskApply.courseName = this.examTask.courseName;
      this.curTaskApply.cardRuleId = this.examTask.cardRuleId;
      this.curTaskApply.customCard = this.examTask.customCard;
      this.curTaskApply.setup = this.examTask.setup;
      this.paperAttachments = this.curTaskApply.paperAttachmentIds
        ? JSON.parse(this.curTaskApply.paperAttachmentIds)
        : [];
      this.paperConfirmAttachments = this.curTaskApply.paperConfirmAttachmentIds
        ? JSON.parse(this.curTaskApply.paperConfirmAttachmentIds)
        : [];

      this.buildSteps();
    },
    async buildSteps() {
      if (!this.curTaskApply.flowId) return;

      const flowStatus = {
        wait: "待进行",
        process: "进行中",
        success: "已完成"
      };
      const approveData = await taskAllApproverPeople({
        taskId: this.curTaskApply.flowTaskId
      });
      let approvePeople = {};
      approveData.approveUserList.forEach(item => {
        item.users = item.approveUser.map(
          user => `${user.realName}(${user.orgName})`
        );
        item.firstUser = item.users[0];
        item.moreUser = item.users.length > 1 ? item.users.join("，") : null;
        approvePeople[item.setup] = item;
      });

      const flowData = await taskAllFlowSetups(this.curTaskApply.flowId);
      const curSetup = this.curTaskApply.setup;
      this.flows = flowData.map(item => {
        item.status =
          curSetup > item.setup
            ? "success"
            : curSetup === item.setup
            ? "process"
            : "wait";
        item.desc = flowStatus[item.status];
        item.isCurrent = curSetup === item.setup;
        item = { ...item, ...approvePeople[item.setup] };
        return item;
      });

      if (this.flows.length) {
        const curFlow = this.flows.find(item => item.isCurrent);
        if (curFlow)
          this.setups = this.flows
            .filter(item => item.setup < curFlow.setup)
            .map(item => {
              return {
                taskKey: item.taskKey,
                setup: item.setup,
                taskName: item.taskName
              };
            });
      }
    },
    addAtachment() {
      if (this.paperAttachments.length >= this.attachmentLimitCount) return;

      const newAttachment = {
        name: this.abc[this.paperAttachments.length],
        attachmentId: "",
        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];
      });
    },
    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);
    },
    toViewCard() {
      window.open(
        this.getRouterPath({
          name: "CardPreview",
          params: {
            cardId: this.curTaskApply.cardId,
            viewType: "view"
          }
        })
      );
    },
    toEditCard() {
      this.cachePrepareTcpCard();
      this.$router.push({
        name: "CardDesign",
        params: {
          cardId: this.curTaskApply.cardId
        }
      });
    },
    cachePrepareTcpCard() {
      this.$ls.set("prepareTcPCard", {
        examTaskId: this.task.examTaskId,
        courseCode: this.task.courseCode,
        courseName: this.task.courseName,
        makeMethod: this.task.makeMethod,
        cardRuleId: this.task.cardRuleId,
        paperType: this.task.paperType
      });
    },
    async toCreateOrViewCard() {
      await this.silentSave();
      this.task = this.getTaskData();
      if (!this.curTaskApply.cardId) {
        this.$refs.CardOptionDialog.open();
        return;
      }

      if (this.curTaskApply.makeMethod === "SELECT") {
        this.$refs.CardOptionDialog.open();
      } else if (this.curTaskApply.makeMethod === "SELF") {
        this.toEditCard();
      } else {
        // 客服制卡：制作完毕则可以编辑，未制作完毕则可以查看
        if (this.curTaskApply.status === "SUBMIT") {
          this.toEditCard();
        } else {
          this.toViewCard();
        }
      }
    },
    cancel() {
      this.$emit("cancel");
    },
    async downloadPaper(attachment) {
      if (!attachment.attachmentId) return;
      const data = await attachmentPreview(attachment.attachmentId);
      window.open(data.url);
    },
    cardConfirm(data) {
      this.curTaskApply = this.$objAssign(this.curTaskApply, data);
    },
    async changeCreateCardType() {
      const h = this.$createElement;
      const result = await this.$msgbox({
        title: "切换题卡操作说明",
        message: h("div", null, [
          h("p", null, "1、切换题卡会将之前选择题卡数据删除。"),
          h(
            "p",
            null,
            "2、之前选择专卡进行绘制，切换题卡后再次选择专卡，需要重新开始绘制。"
          )
        ]),
        showCancelButton: true,

        type: "warning"
      }).catch(() => {});
      if (result !== "confirm") return;
      await this.clearMakeMethod();
      this.toCreateOrViewCard();
    },
    async clearMakeMethod() {
      // 清除后台记录的题卡
      if (this.curTaskApply.cardId)
        await switchCardCreateMethod(this.examTask.id);

      this.curTaskApply.makeMethod = "";
      this.curTaskApply.cardId = "";
    },
    getTaskData() {
      let data = { ...this.curTaskApply };
      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;
    },
    checkDataValid() {
      const attachmentValid = !this.paperAttachments.some(
        item => !item.attachmentId
      );
      // 设置了入库强制包含试卷时，校验试卷是否上传。
      if (this.curTaskApply.includePaper && !attachmentValid) {
        this.$message.error("请完成试卷文件上传！");
        return;
      }
      // if (!this.paperConfirmAttachments.length) {
      //   this.$message.error("请上传入库审核表！");
      //   return;
      // }

      if (!this.curTaskApply.cardId) {
        this.$message.error("请选择题卡创建方式！");
        return;
      }

      if (
        this.curTaskApply.makeMethod !== "SELECT" &&
        this.curTaskApply.status !== "SUBMIT"
      ) {
        this.$message.error("请先提交题卡！");
        return;
      }
      return true;
    },
    async toSave() {
      if (this.isSubmit) return;
      this.isSubmit = true;
      const datas = this.getTaskData();
      datas.operateType = "STAGE";
      const data = await updateTaskApply(datas).catch(() => {});
      this.isSubmit = false;
      if (!data) return;

      this.$message.success("保存成功！");
    },
    async silentSave() {
      const datas = this.getTaskData();
      datas.operateType = "STAGE";
      await updateTaskApply(datas).catch(() => {});
    },
    async submit() {
      if (!this.checkDataValid()) return;

      const result = await this.$confirm(
        "任务确定提交后，则不可更改试卷及答题卡内容，确定提交该任务？",
        "提示",
        {
          type: "warning"
        }
      ).catch(() => {});
      if (result !== "confirm") return;

      const datas = this.getTaskData();
      datas.operateType = "SUBMIT";
      const data = await updateTaskApply(datas).catch(() => {});
      if (!data) return;
      this.$message.success("提交成功！");
      this.$emit("modified");
    },
    async toAuditApply() {
      const valid = await this.$refs.auditModalComp.validate().catch(() => {});
      if (!valid) return;

      const actionName =
        this.auditModal.approvePass === "REJECT" ? "不通过" : "通过";
      const result = await this.$confirm(
        `确定${actionName}该申请吗？`,
        "提示",
        {
          type: "warning"
        }
      ).catch(() => {});
      if (result !== "confirm") return;

      let datas = { ...this.auditModal };
      datas.taskId = this.curTaskApply.flowTaskId;
      const data = await updateTaskReview(datas).catch(() => {});
      if (!data) return;
      this.$message.success("审批成功！");
      this.$emit("modified");
    },
    // 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>