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

<template>
  <div class="apply-submit-history">
    <div v-if="submitHistory.length">
      <el-table border :data="submitHistory">
        <el-table-column prop="operateTime" label="提交日期">
          <span slot-scope="scope"
            >{{ scope.row.operateTime | timestampFilter }}
          </span>
        </el-table-column>
        <el-table-column prop="submitUserName" label="提交人"></el-table-column>
        <el-table-column prop="approveUsers" label="下级审核人">
          <div slot-scope="scope">
            <span
              v-if="!scope.row.approveUsers && FLOW_IS_END"
              class="color-primary"
              >流程结束</span
            >
            <span
              v-if="!scope.row.approveUsers && !FLOW_IS_END"
              class="color-danger"
              >流程终止</span
            >
            <span v-else>{{ scope.row.approveUsers }}</span>
          </div>
        </el-table-column>
        <el-table-column
          prop="paperUrls"
          label="附件"
          class-name="action-column"
          align="left"
        >
          <div slot-scope="scope">
            <el-button
              v-for="item in scope.row.paperUrls"
              :key="item.name"
              type="text"
              class="btn-primary"
              @click="downloadPaper(item)"
              >{{ item.name }}卷：{{ item.filename }}</el-button
            >
          </div>
        </el-table-column>
      </el-table>
    </div>
    <div class="history-none" v-else>
      <p class="tips-info text-center">暂无数据</p>
    </div>
  </div>
</template>

<script>
import { taskApplySubmitHistory } from "../api";
import { attachmentPreview } from "../../login/api";

export default {
  name: "apply-submit-history",
  props: {
    examTask: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      submitHistory: [],
    };
  },
  computed: {
    FLOW_IS_END() {
      return this.examTask.setup === 0;
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      if (!this.examTask.id) return;
      const data = await taskApplySubmitHistory(this.examTask.id);
      const result = data || [];
      this.submitHistory = result.map((item) => {
        return {
          operateTime: item.submitUser.createTime,
          submitUserName: `${item.submitUser.realName}(${item.submitUser.orgName})`,
          approveUsers: !item.approveUserList
            ? ""
            : item.approveUserList
                .map((user) => `${user.realName}(${user.orgName})`)
                .join("，"),
          paperUrls: item.submitUser.paperUrls
            ? JSON.parse(item.submitUser.paperUrls)
            : [],
        };
      });
    },
    async downloadPaper(attachment) {
      if (!attachment.attachmentId) return;
      const data = await attachmentPreview(attachment.attachmentId);
      window.open(data[0]?.url);
    },
  },
};
</script>