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

<template>
  <div class="apply-content task-detail">
    <div class="task-body">
      <div v-if="IS_APPLY" 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">
        <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>
            <span>{{ attachment.name }}卷</span>
            <span class="color-gray-2" v-if="attachment.isExposed"
              >(已曝光)</span
            >
          </td>
          <td>
            <el-button
              v-if="!attachment.isExposed && IS_APPLY"
              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>
            <el-button
              v-else
              type="text"
              class="btn-primary"
              @click="downloadPaper(attachment)"
            >
              <i
                class="icon icon-download mr-1"
                v-if="attachment.attachmentId"
              ></i>
              <i>{{ attachment.filename }}</i>
            </el-button>
          </td>
          <td :rowspan="paperAttachments.length" v-if="index === 0">
            {{ createCardTypeName }}
          </td>
          <td :rowspan="paperAttachments.length" v-if="index === 0">
            <el-button
              type="text"
              class="btn-primary"
              v-if="!exposedMode && IS_APPLY"
              @click="toCreateOrViewCard"
              >{{ cardTodoName }}</el-button
            >
            <el-button
              v-else
              type="text"
              class="btn-primary"
              @click="toViewCard"
            >
              查看题卡
            </el-button>
            <el-button
              v-if="
                curTaskApply.makeMethod &&
                  curTaskApply.makeMethod !== 'CUST' &&
                  !exposedMode &&
                  IS_APPLY
              "
              type="text"
              class="btn-danger"
              @click="changeCreateCardType"
              >切换题卡创建方式</el-button
            >
          </td>
          <td v-if="IS_APPLY">
            <el-button
              v-if="attachment.canDelete"
              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"
            :controls="false"
            step-strictly
            disabled
          ></el-input-number>
          <!-- :disabled="!IS_APPLY || exposedMode" -->
        </el-form-item>
      </el-form>

      <h4 class="mb-2">附件<span v-if="IS_APPLY">（最多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 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>
      <div
        v-if="!IS_APPLY && !paperConfirmAttachments.length"
        class="image-list-none"
      >
        暂无数据
      </div>

      <h4 class="mb-2">附件说明：</h4>
      <el-input
        v-if="IS_APPLY"
        class="mb-2"
        v-model="curTaskApply.remark"
        type="textarea"
        resize="none"
        :rows="2"
        :maxlength="100"
        clearable
        show-word-limit
        placeholder="建议不超过100个字"
      ></el-input>
      <div class="color-gray-2" v-else>
        <p v-if="curTaskApply.remark">{{ curTaskApply.remark }}</p>
        <p v-else>暂无</p>
      </div>

      <!-- 入库申请-审核阶段 -->
      <!-- audit history -->
      <div
        v-if="flowHistoryList.length && curTaskApply.flowStatus !== 'START'"
        class="task-audit-history flow-timeline"
      >
        <h4 class="mb-4">审核记录：</h4>
        <el-timeline>
          <el-timeline-item
            v-for="flow in flowHistoryList"
            :key="flow.stepKey"
            :type="flow.type"
            hide-timestamp
            size="large"
            placement="top"
            :class="{ 'timeline-item-stop': flow.nextIsNewFlow }"
          >
            <div class="flow-item">
              <div class="flow-item-content">
                <p v-if="flow.createTime" class="flow-item-time">
                  {{ flow.createTime | timestampFilter }}
                </p>
                <h4 class="flow-item-title">{{ flow.approveUserName }}</h4>
                <p class="flow-item-desc">
                  <span
                    v-if="flow.approveOperation"
                    :class="{
                      'color-danger': flow.approveOperation === 'REJECT'
                    }"
                    >{{
                      flow.approveOperation | flowApproveOperationTypeFilter
                    }}</span
                  >
                  <span>{{ flow.approveRemark }}</span>
                </p>
                <div
                  v-if="flow.attachments.length"
                  class="flow-item-attachment"
                >
                  <span>附件：</span>
                  <el-button
                    v-for="item in flow.attachments"
                    :key="item.name"
                    type="text"
                    class="btn-primary"
                    @click="downloadPaper(item)"
                    >{{ item.name }}卷:{{ item.filename }}</el-button
                  >
                </div>
                <div
                  v-if="flow.isApproveSetFlowNextNode && approveUsers.length"
                  class="flow-item-users"
                >
                  <span>审批人：</span>
                  <el-tag
                    v-for="user in approveUsers"
                    :key="user.id"
                    size="small"
                    :disable-transitions="false"
                  >
                    {{ user.name }}
                  </el-tag>
                </div>
              </div>
              <div
                v-if="
                  flow.isApproveSetFlowNextNode &&
                    auditModal.approvePass === 'PASS'
                "
                class="flow-item-action"
              >
                <el-button
                  class="user-select"
                  icon="el-icon-plus"
                  @click="toSelectNextFlowUser"
                ></el-button>
                <p v-if="!approveUsers.length" class="tips-info tips-error">
                  请选择审核人
                </p>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
      <!-- 入库申请-申请阶段 -->
      <div
        v-if="flowList.length && curTaskApply.flowStatus === 'START'"
        class="task-audit-history flow-timeline"
      >
        <h4 class="mb-4">流程：</h4>
        <el-timeline>
          <el-timeline-item
            v-for="flow in flowList"
            :key="flow.taskKey"
            :type="flow.type"
          >
            <div class="flow-item">
              <div class="flow-item-content">
                <h4 class="flow-item-title">{{ flow.taskName }}</h4>
                <p v-if="flow.approveUserNames" class="flow-item-desc">
                  {{ flow.approveUserNames }}
                </p>
                <div
                  v-if="flow.isApproveSetFlowNextNode && approveUsers.length"
                  class="flow-item-users"
                >
                  <span>审批人：</span>
                  <el-tag
                    v-for="user in approveUsers"
                    :key="user.id"
                    size="small"
                    :disable-transitions="false"
                  >
                    {{ user.name }}
                  </el-tag>
                </div>
              </div>
              <div
                v-if="flow.isApproveSetFlowNextNode"
                class="flow-item-action"
              >
                <el-button
                  class="user-select"
                  icon="el-icon-plus"
                  @click="toSelectNextFlowUser"
                ></el-button>
                <p v-if="!approveUsers.length" class="tips-info tips-error">
                  请选择审核人
                </p>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>

      <!-- audit -->
      <div v-if="IS_AUDIT" class="task-audit">
        <el-form
          ref="auditModalComp"
          :model="auditModal"
          :rules="auditRules"
          label-width="90px"
        >
          <el-form-item prop="approvePass" label="审批操作：">
            <el-radio-group
              v-model="auditModal.approvePass"
              @change="approvePassChange"
            >
              <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="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in rejectSetupList"
                :key="item.taskKey"
                :value="item.setup"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="auditModal.approvePass !== 'EXCHANGE'"
            :key="auditModal.approvePass"
            prop="remark"
            label="审批意见："
          >
            <el-input
              class="mb-2"
              v-model="auditModal.remark"
              type="textarea"
              resize="none"
              :rows="5"
              :maxlength="100"
              clearable
              show-word-limit
              placeholder="建议不超过100个字"
              ref="ReasonInput"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="auditModal.approvePass === 'EXCHANGE'"
            prop="userId"
            label="审批人："
          >
            <el-tag
              v-for="user in exchangeUsers"
              :key="user.id"
              :disable-transitions="false"
              size="medium"
            >
              {{ user.name }}
            </el-tag>
            <el-button
              class="ml-2"
              size="mini"
              type="primary"
              @click="toSelectExchangeUser"
              >选择用户</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </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="toAuditSubmit"
        >确定</el-button
      >
      <!-- <el-button
        v-if="IS_AUDIT_APPLY"
        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"
      @confirm="cardConfirm"
    ></card-option-dialog>
    <!-- image-preview -->
    <simple-image-preview
      :cur-image="curImage"
      @on-prev="toPrevImage"
      @on-next="toNextImage"
      ref="SimpleImagePreview"
    ></simple-image-preview>
    <!-- select-user-dialog -->
    <select-user-dialog
      v-if="IS_AUDIT || IS_NEED_SELECT_APPROVE_USER"
      ref="SelectUserDialog"
      :user-limit-count="userLimitCount"
      :filter-roles="userFilterRoles"
      :users="curSelectedUsers"
      @modified="userSelected"
    ></select-user-dialog>
    <!-- ModifyCard -->
    <modify-card ref="ModifyCard" @modified="cardModified"></modify-card>
  </div>
</template>

<script>
import UploadPaperDialog from "./UploadPaperDialog";
import CardOptionDialog from "./CardOptionDialog";
import {
  taskApplyDetail,
  updateTaskApply,
  // updateTaskReview,
  taskAuditApply,
  switchCardCreateMethod
  // taskAllFlowSetups,
  // taskAllApproverPeople,
  // taskAllApproverExchangePeople,
  // taskApproverNextPeople
} from "../api";
import { attachmentPreview } from "../../login/api";
import SimpleImagePreview from "@/components/SimpleImagePreview";
import SelectUserDialog from "../../base/components/SelectUserDialog";
import ModifyCard from "../../card/components/ModifyCard";
import { CARD_SOURCE_TYPE, TASK_AUDIT_RESULT } from "@/constants/enumerate";
import {
  taskFlowDetail,
  taskFlowApproverExchange,
  taskFlowNodeInfo,
  taskFlowApprover,
  flowDetailByFlowId
} from "../../base/api";

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

export default {
  name: "apply-content",
  components: {
    UploadPaperDialog,
    CardOptionDialog,
    SimpleImagePreview,
    SelectUserDialog,
    ModifyCard
  },
  props: {
    examTask: {
      type: Object,
      default() {
        return {};
      }
    },
    editType: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      isSubmit: false,
      curTaskApply: { ...initTaskApply },
      paperConfirmAttachmentId: { attachmentId: "", filename: "", url: "" },
      paperAttachments: [],
      paperConfirmAttachments: [],
      curAttachment: {},
      curUploadType: "paper",
      attachmentLimitCount: 26,
      abc: "abcdefghijklmnopqrstuvwxyz".toUpperCase(),
      task: {},
      reason: "",
      TASK_AUDIT_RESULT: { ...TASK_AUDIT_RESULT, EXCHANGE: "转他人审批" },
      // audit
      flowList: [],
      flowInfo: {},
      auditModal: {
        approvePass: "PASS",
        setup: "",
        remark: "",
        userId: ""
      },
      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: false,
            validator: (rule, value, callback) => {
              if (this.auditModal.approvePass === "REJECT" && !value) {
                callback(new Error(`请输入审批意见`));
              } else {
                callback();
              }
            },
            trigger: "change"
          }
        ],
        userId: [
          {
            required: true,
            message: "请选择审批人",
            trigger: "change"
          }
        ]
      },
      flowHistoryList: [],
      rejectSetupList: [], // 可以驳回的节点
      exchangeUsers: [],
      selectUserType: "exchange", // exchange:转审，approve:下一节点审核
      curSelectedUsers: [],
      // 选择下一节点审批人
      IS_NEED_SELECT_APPROVE_USER: false,
      nextFlowTaskResult: {}, //下一节点信息
      approveUsers: [],
      userLimitCount: 1,
      userFilterRoles: [],
      // image-preview
      curImage: {},
      curImageIndex: 0
    };
  },
  computed: {
    IS_APPLY() {
      return this.editType
        ? this.editType === "APPLY"
        : this.curTaskApply.setup === 1 || this.curTaskApply.setup === null;
    },
    IS_PREVIEW() {
      return this.editType
        ? this.editType === "PREVIEW"
        : this.curTaskApply.setup !== null && this.curTaskApply.setup <= 0;
    },
    IS_AUDIT() {
      const IS_COMMON_AUDIT = this.editType
        ? this.editType === "AUDIT"
        : this.curTaskApply.setup > 1;
      return IS_COMMON_AUDIT;
    },
    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;
    },
    exposedMode() {
      return !!this.curTaskApply.exposedPaperType;
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      const data = await taskApplyDetail(
        this.examTask.id,
        this.examTask.source
      );
      this.$emit("info-update", {
        semesterName: data.semesterName,
        examName: data.examName,
        examModel: data.examModel
      });
      this.curTaskApply = this.$objAssign(initTaskApply, data || {});
      this.curTaskApply.examId =
        this.curTaskApply.examId || this.examTask.examId;
      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)
        : [];

      const exposedPaperType = data.exposedPaperType || "";
      let exposedPaperTypes = exposedPaperType.split(",");
      exposedPaperTypes.sort((a, b) => (a > b ? -1 : 1));
      const maxExposedPaperType = exposedPaperTypes[0];
      this.paperAttachments.forEach(paper => {
        paper.canDelete = maxExposedPaperType
          ? paper.name > maxExposedPaperType
          : true;
        paper.isExposed = exposedPaperTypes.includes(paper.name);
      });

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

      if (this.curTaskApply.flowStatus === "START") {
        await this.getFlowList();
      } else {
        await this.getFlowHistory();
      }

      if (this.IS_AUDIT) this.getCurFlowNodeInfo();
    },
    async getFlowHistory() {
      if (!this.curTaskApply.flowId) return;

      const data = await taskFlowDetail(
        this.curTaskApply.flowId
      ).catch(() => {});
      if (!data) return;

      const FLOW_STATUS = {
        SUBMIT: "success",
        APPROVE: "success",
        EXCHANGE: "success",
        REJECT: "danger",
        END: "success"
      };
      let nextFlowId = "";
      this.flowHistoryList = data.tfFlowViewLogResultList.map((item, index) => {
        const nextItem = data.tfFlowViewLogResultList[index + 1];
        nextFlowId = nextItem ? nextItem.flowId : item.flowId;
        item.nextIsNewFlow = nextFlowId !== item.flowId;
        item.type = FLOW_STATUS[item.approveOperation];
        item.attachments = item.paperAttachmentId
          ? JSON.parse(item.paperAttachmentId)
          : [];
        item.isApproveSetFlowNextNode = false;
        return item;
      });
      const flowIsEnd = data.currFlowTaskResult.taskKey === "end";
      this.flowHistoryList.push({
        type: flowIsEnd ? "success" : "current",
        stepKey: this.$randomCode(),
        approveSetup: data.currFlowTaskResult.setup, //审批人节点
        approveRemark: data.currFlowTaskResult.taskName, //审批信息
        approveOperation: flowIsEnd ? "END" : "",
        approveUserName: data.currFlowTaskResult.approveUserNames, //审批人
        createTime: null,
        nextIsNewFlow: false,
        isApproveSetFlowNextNode: false,
        attachments: []
      });
    },
    async getFlowList() {
      if (!this.curTaskApply.flowId) return;
      const data = await flowDetailByFlowId(this.curTaskApply.flowId);
      if (!data) return;

      const modelType =
        data.flowTaskResultList[0] && data.flowTaskResultList[0].modelType;
      this.flowInfo = {
        customFlowId: data.id,
        version: data.version
      };
      const nextFlowNodeIndex = 1;
      this.IS_NEED_SELECT_APPROVE_USER = modelType === "APPROVE_SET";
      const flowList = data.flowTaskResultList || [];
      this.flowList = flowList.map((flow, index) => {
        flow.isApproveSetFlowNextNode =
          this.IS_NEED_SELECT_APPROVE_USER && index === nextFlowNodeIndex;
        return flow;
      });

      if (this.flowList.length) {
        this.flowList[0].type = "success";
      }

      this.nextFlowTaskResult = this.flowList[nextFlowNodeIndex];
    },
    async getCurFlowNodeInfo() {
      const data = await taskFlowNodeInfo(this.curTaskApply.flowTaskId);
      this.rejectSetupList = (data && data.rejectSetupList) || [];
      this.rejectSetupList.forEach(item => {
        item.name = `【${item.taskName}】${item.approveUserNames}`;
      });
      this.nextFlowTaskResult = data.nextFlowTaskResult;
      // 被打回给命题老师之后，命题老师只能通过。
      if (data.setup === 1 && !this.rejectSetupList.length) {
        this.TASK_AUDIT_RESULT = { PASS: "通过" };
        this.auditModal.approvePass = "PASS";
      }
      // 判断发起人自选，是否需要选择下个审核人员
      const { modelType, approveUserNames, taskKey } = this.nextFlowTaskResult;
      this.IS_NEED_SELECT_APPROVE_USER =
        modelType === "APPROVE_SET" &&
        taskKey.toLowerCase() !== "end" &&
        !approveUserNames;
      this.flowHistoryList[
        this.flowHistoryList.length - 1
      ].isApproveSetFlowNextNode = this.IS_NEED_SELECT_APPROVE_USER;
    },
    approvePassChange() {
      this.auditRules.remark[0].required =
        this.auditModal.approvePass === "REJECT";
    },
    addAtachment() {
      if (this.paperAttachments.length >= this.attachmentLimitCount) return;

      const name = this.abc[this.paperAttachments.length];
      const newAttachment = {
        name,
        attachmentId: "",
        filename: "",
        pages: 0,
        canDelete: true,
        isExposed: false
      };
      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.curTaskApply.drawCount &&
        this.curTaskApply.drawCount > this.paperAttachments.length
      ) {
        this.curTaskApply.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);
    },
    toViewCard() {
      window.open(
        this.getRouterPath({
          name: "CardPreview",
          params: {
            cardId: this.curTaskApply.cardId,
            viewType: "view"
          }
        })
      );
    },
    toEditCard() {
      this.$ls.set("prepareTcPCard", {
        cardId: this.task.cardId,
        examTaskId: this.task.examTaskId,
        courseCode: this.task.courseCode,
        courseName: this.task.courseName,
        makeMethod: this.task.makeMethod,
        cardRuleId: this.task.cardRuleId,
        type: "CUSTOM",
        createMethod: "STANDARD"
      });
      this.$refs.ModifyCard.open();
    },
    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) {
      const { makeMethod } = data;

      if (makeMethod === "CUST") {
        this.silentSave();
        this.curTaskApply = this.$objAssign(this.curTaskApply, data);
      } else if (makeMethod === "SELECT") {
        this.curTaskApply = this.$objAssign(this.curTaskApply, data);
      } else {
        this.$ls.set("prepareTcPCard", data);
        this.$refs.ModifyCard.open();
      }
    },
    async cardModified(cardId) {
      if (!cardId) return;
      this.curTaskApply = this.$objAssign(this.curTaskApply, {
        cardId,
        makeMethod: "SELF"
      });
      this.silentSave();
    },
    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 && this.curTaskApply.makeMethod !== "CUST") {
        await switchCardCreateMethod(this.examTask.id);
      }

      this.curTaskApply.makeMethod = "";
      this.curTaskApply.cardId = "";
    },
    toSelectNextFlowUser() {
      if (!this.IS_NEED_SELECT_APPROVE_USER) return;

      this.userLimitCount =
        this.nextFlowTaskResult.approveUserCountType === "ONE" ? 1 : 0;
      this.userFilterRoles =
        this.nextFlowTaskResult.approveUserSelectRange === "ROLE"
          ? this.nextFlowTaskResult.approveUserSelectRoles.map(item => item.id)
          : [];
      this.selectUserType = "approve";
      this.curSelectedUsers = this.approveUsers;
      this.$refs.SelectUserDialog.open();
    },
    toSelectExchangeUser() {
      this.userLimitCount = 1;
      this.userFilterRoles = [];
      this.curSelectedUsers = this.exchangeUsers;
      this.selectUserType = "exchange";
      this.$refs.SelectUserDialog.open();
    },
    userSelected(users) {
      if (this.selectUserType === "exchange") {
        this.exchangeUsers = users;
        this.auditModal.userId = users[0].id;
      } else {
        this.approveUsers = users;
      }
    },
    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
      );
      if (this.IS_NEED_SELECT_APPROVE_USER)
        data.approveUserIds = this.approveUsers.map(item => item.id);
      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;
      }

      if (this.IS_NEED_SELECT_APPROVE_USER && !this.approveUsers.length) {
        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 toAuditSubmit() {
      const valid = await this.$refs.auditModalComp.validate().catch(() => {});
      if (!valid) return;

      if (
        this.auditModal.approvePass === "PASS" &&
        this.IS_NEED_SELECT_APPROVE_USER &&
        !this.approveUsers.length
      ) {
        this.$message.error("请设置审核人员！");
        return;
      }

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

      if (this.auditModal.approvePass === "EXCHANGE") {
        let datas = {
          taskId: this.curTaskApply.flowTaskId,
          userId: this.auditModal.userId
        };
        const data = await taskFlowApproverExchange(datas).catch(() => {});
        if (!data) return;
      } else {
        let datas = { ...this.auditModal };
        datas.taskId = this.curTaskApply.flowTaskId;

        if (
          this.auditModal.approvePass === "PASS" &&
          this.IS_NEED_SELECT_APPROVE_USER
        )
          datas.approveUserIds = this.approveUsers.map(item => item.id);

        const data = await taskFlowApprover(datas).catch(() => {});
        if (!data) return;
      }

      this.$message.success("审批成功！");
      this.$emit("modified");
    },
    async toAuditApply() {
      const result = await this.$confirm("确定提交该任务吗？", "提示", {
        type: "warning"
      }).catch(() => {});
      if (result !== "confirm") return;

      const datas = {
        examTaskDetail: this.getTaskData(),
        flowTaskId: this.curTaskApply.flowTaskId,
        approvePass: "PASS"
      };
      const data = await taskAuditApply(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>