teachcloud-print-web/src/modules/exam/components/taskApply/TaskFlow.vue

<template>
  <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>
                <more-btn
                  v-for="item in flow.attachments"
                  :key="item.name"
                  type="text"
                  class="btn-primary"
                  :data="`${item.name}卷:${item.filename}`"
                  :show-count="20"
                  @click="downloadPaper(item)"
                ></more-btn>
              </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 &&
                ((taskStatus.IS_AUDIT && auditModal.approvePass === 'PASS') ||
                  curTaskApply.flowStatus === 'REJECT' ||
                  curTaskApply.flowStatus === 'CANCEL')
              "
              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="taskStatus.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>

    <!-- select-user-dialog -->
    <select-user-dialog
      v-if="taskStatus.IS_AUDIT || IS_NEED_SELECT_APPROVE_USER"
      ref="SelectUserDialog"
      :user-limit-count="userLimitCount"
      :filter-roles="userFilterRoles"
      :users="curSelectedUsers"
      @modified="userSelected"
    ></select-user-dialog>
  </div>
</template>

<script>
import { mapStates, mapMutations } from "vuex";
import {
  taskFlowDetail,
  taskFlowNodeInfo,
  flowDetailByFlowId,
} from "../../../base/api";
import { attachmentPreview } from "../../../login/api";
import { TASK_AUDIT_RESULT } from "@/constants/enumerate";

import SelectUserDialog from "../../../base/components/SelectUserDialog";

export default {
  name: "task-flow",
  components: { SelectUserDialog },
  data() {
    return {
      flowList: [],
      flowInfo: {},
      flowHistoryList: [],
      exchangeUsers: [],
      selectUserType: "exchange", // exchange:转审，approve:下一节点审核
      curSelectedUsers: [],
      auditLogCache: { paper: {}, card: {} },
      // 选择下一节点审批人
      IS_NEED_SELECT_APPROVE_USER: false,
      nextFlowTaskResult: {}, //下一节点信息
      approveUsers: [],
      userLimitCount: 1,
      userFilterRoles: [],
      // audit
      TASK_AUDIT_RESULT: { ...TASK_AUDIT_RESULT, EXCHANGE: "转他人审批" },
      rejectSetupList: [], // 可以驳回的节点
      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",
          },
        ],
      },
    };
  },
  computed: {
    ...mapStates("exam", [
      "editType",
      "examTask",
      "curTaskApply",
      "taskStatus",
    ]),
  },
  methods: {
    ...mapMutations("exam", ["setEditType", "setExamTask", "setCurTaskApply"]),
    async initData() {
      const paperAttachments = this.curTaskApply.paperAttachmentIds
        ? JSON.parse(this.curTaskApply.paperAttachmentIds)
        : [];

      const auditLogCache = { paper: {}, card: {} };
      paperAttachments.forEach((paper) => {
        if (
          paper.attachmentId &&
          this.curTaskApply.auditContent.includes("PAPER")
        )
          auditLogCache.paper[paper.attachmentId] = false;
        if (paper.cardId && this.curTaskApply.auditContent.includes("CARD"))
          auditLogCache.card[paper.cardId] = false;
      });
      this.auditLogCache = auditLogCache;

      if (this.curTaskApply.flowStatus === "START") {
        await this.getFlowList();
      } else {
        await this.getFlowHistory();
        if (!this.taskStatus.IS_PREVIEW && this.curTaskApply.review)
          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";
      }
      // 判断发起人自选，不管approveUserNames有没有值，都可以选择下个审核人员
      const { modelType, taskKey } = this.nextFlowTaskResult;
      this.IS_NEED_SELECT_APPROVE_USER =
        modelType === "APPROVE_SET" && taskKey.toLowerCase() !== "end";
      this.flowHistoryList[
        this.flowHistoryList.length - 1
      ].isApproveSetFlowNextNode = this.IS_NEED_SELECT_APPROVE_USER;
    },
    approvePassChange() {
      this.auditRules.remark[0].required =
        this.auditModal.approvePass === "REJECT";
    },
    async downloadPaper(attachment) {
      if (!attachment.attachmentId) return;
      this.addPreviewLog(attachment, "paper");
      const data = await attachmentPreview(attachment.attachmentId);
      window.open(data.url);
    },
    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;
      }
    },
    // action
    async checkAuditData() {
      const res =
        !Object.values(this.auditLogCache.paper).some((item) => !item) &&
        !Object.values(this.auditLogCache.card).some((item) => !item);
      if (!res) {
        this.$message.error(
          "还有未被查看过的题卡或试卷，请点击试卷及题卡进行查看审核"
        );
        return;
      }

      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;
      }

      return true;
    },
    getAuditData() {
      let datas = {};
      if (this.auditModal.approvePass === "EXCHANGE") {
        datas = {
          approvePass: this.auditModal.approvePass,
          taskId: this.curTaskApply.flowTaskId,
          userId: this.auditModal.userId,
        };
      } else {
        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);
      }
      return datas;
    },
    getData() {
      if (this.IS_NEED_SELECT_APPROVE_USER) {
        return {
          approveUserIds: this.approveUsers.map((item) => item.id),
        };
      }
      return {};
    },
    checkData() {
      if (this.IS_NEED_SELECT_APPROVE_USER && !this.approveUsers.length) {
        this.$message.error("请设置审核人员！");
        return;
      }
      return true;
    },
  },
};
</script>