BomApp/pages/audit/detail.vue

<template>
  <view class="page-detail">
    <view class="page-center">
      <uni-section title="清单名称" type="line"></uni-section>
      <text style="padding-left: 20rpx">{{ version.version_name }}</text>

      <!-- 表单数据 -->
      <template v-if="formList.length > 0">
        <uni-section title="表单数据" type="line"></uni-section>
        <uni-forms class="form" label-align="right" :labelWidth="100">
          <uni-forms-item
            v-for="item in formList"
            :label="item.name"
            name="email"
          >
            <view class="content">{{ item.value.join(",") }}</view>
          </uni-forms-item>
        </uni-forms>
      </template>

      <!-- 附件信息 -->
      <template v-if="excelFileList.length > 0">
        <uni-section title="附件信息" type="line"></uni-section>
        <view class="attachment" v-for="item in excelFileList" :key="item.id">
          <!-- {{item.name}} -->
          <previewFile :src="item.url" :name="item.name" />
        </view>
      </template>

      <!-- 审批信息 -->
      <uni-section title="审批信息" type="line"></uni-section>
      <uni-steps
        :options="flow.list.FlowNodes"
        :active="flow.current"
        direction="column"
      ></uni-steps>

      <!-- 清单详情 -->
      <uni-section title="清单详情" type="line"></uni-section>
      <view class="excel-detail" @click="toExcelDetail">查看详情</view>
      <!-- 审批按钮 -->
      <view class="btns" v-if="isAuditor">
        <button type="primary" @click="showAuditModal">通过</button>
        <button type="warn" @click="showRejectModal">拒绝</button>
      </view>
    </view>

    <!-- 审核通过弹窗 -->
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        type="info"
        mode="base"
        title="审批"
        content="是否通过审批"
        :duration="2000"
        :before-close="true"
        @close="auditClose"
        @confirm="auditConfirm"
      ></uni-popup-dialog>
    </uni-popup>

    <!-- 审批拒绝弹窗 -->
    <uni-popup ref="rejectPopup" type="dialog">
      <uni-popup-dialog
        mode="input"
        placeholder="请输入拒绝原因"
        :duration="2000"
        :before-close="true"
        @close="rejectClose"
        @confirm="rejectConfirm"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import {
  queryVersionsList,
  queryAttachment,
  queryAuditList,
  approve,
  queryVersionDetail,
} from "@/services/bom.js";
import { gerCurrentUser } from "@/services/user.js";
import previewFile from "@/components/preview-file/preview-file.vue";

export default {
  components: {
    previewFile,
  },
  data() {
    return {
      projectId: 580,
      templateNodeId: 0,
      id: 0,
      version: {},
      excelFileList: [],
      auditMessage: "",
      flow: {
        active: 0,
        active_id: null,
        current: 0,
        currentNode: {},
        list: {
          FlowNodes: [],
        },
      },
      isAuditor: false,
      isMobile: true,
      options: {},
    };
  },
  onLoad(options) {
    this.templateNodeId = options.templateNodeId;
    this.projectId = Number(options.projectId);
    this.id = options.excel_id;
    // 如果链接带着token， 则强制替换最新的token
    if (options["JWT-TOKEN"]) {
      uni.setStorageSync("token", options["JWT-TOKEN"]);
    }
    this.options = options;
    this.checkDeviceType();
    this.init();
  },
  methods: {
    checkDeviceType() {
      const userAgent = navigator.userAgent.toLowerCase();
      const mobileKeywords = ["android", "iphone", "ipad", "ipod", "mobile"];
      this.isMobile = mobileKeywords.some((keyword) =>
        userAgent.includes(keyword)
      );
      return this.isMobile;
    },

    async init() {
      var currentUser = await gerCurrentUser();
      if (!currentUser) {
        return;
      }
      uni.setStorageSync("user", currentUser);

      var version = await queryVersionDetail({
        userID: currentUser.ID,
        excelID: this.id,
      });
      if (version === null) {
        uni.redirectTo({
          url: `/pages/approved/BOM/detail?templateNodeId=${this.templateNodeId}&excel_id=${this.id}&projectId=${this.projectId}`,
        });
      }
      if (!this.isMobile) {
        // 如果是在电脑上打开，转到PC端的页面去
        window.location.href = `http://120.55.44.4:8896/#/bom/home/detail/${version.project_id}/${version.template_id}?excel_id=${this.id}&JWT-TOKEN=${this.options["JWT-TOKEN"]}`;
      }

      if (version.flow_id) {
        this.getFlow(version);
      }
      this.version = version;

      if (version.attachment_id) {
        var {
          data: { list: excelFileList },
        } = await queryAttachment({
          excel_id: version.attachment_id,
        });
        this.excelFileList = excelFileList.map((item) => {
          const list = item.url.split("/");
          const name = list[list.length - 1];
          return {
            ...item,
            name,
          };
        });
        // console.log(this.excelFileList)
      }
    },

    // 显示通过审批弹窗
    async showAuditModal() {
      this.$refs.popup.open();
    },

    // 通过审批
    async auditConfirm() {
      let flow = this.flow;
      let flowNode = flow.currentNode;
      var { data: newVersion } = await approve({
        id: flow.active_id,
        project_id: this.projectId,
        audit_status: 3,
        flow_id: flowNode.flow_id,
        node_id: flowNode.seq,
      });
      this.version = {
        ...this.version,
        id: newVersion.id,
      };
      this.getFlow(this.version);
      uni.showToast({
        title: "操作成功",
      });
      this.$refs.popup.close();
    },

    // 显示拒绝审批弹窗
    showRejectModal() {
      this.$refs.rejectPopup.open();
    },

    auditClose() {
      this.$refs.popup.close();
    },

    rejectClose() {
      this.$refs.rejectPopup.close();
    },

    async rejectConfirm(audit_comment) {
      const flow = this.flow;
      const flowNode = flow.currentNode;

      var { data: newVersion } = await approve({
        id: flow.active_id,
        project_id: this.projectId,
        audit_status: 2,
        flow_id: flowNode.flow_id,
        node_id: flowNode.seq,
        audit_comment,
      });
      uni.showToast({
        title: "操作成功",
      });
      this.version = {
        ...this.version,
        id: newVersion.id,
      };
      this.getFlow(this.version);
      this.rejectClose();
    },
    // 查询审批信息
    async getFlow(version) {
      const { data: auditList } = await queryAuditList({
        template_id: version.template_id,
        template_node_id: version.template_node_id,
        flow_id: version.flow_id,
        version_id: version.version_id,
        audit_series: version.audit_series,
      });
      if (auditList.length > 0) {
        let item = auditList.find((item) => item.list.id == version.flow_id);
        if (!item) return;
        // 查询当前节点
        let current = item.list.FlowNodes.findIndex(
          (node) => node.seq == item.active
        );
        item.current = current == -1 ? 0 : current;
        // 保存当前所处节点
        item.currentNode = item.list.FlowNodes[item.current];
        item.list.FlowNodes.forEach((item) => {
          item.title = item.node;
          item.desc = item.AuditRoleInfo
            ? `审批人：${item?.AuditRoleInfo.Name || "-"}`
            : `审批人：${item?.AuditorUser.CName || "-"}`;
        });
        this.flow = item;
        // 判断是否含有审批权限
        this.isAuditor = false;
        if (item.active_audit == 1) {
          let user = uni.getStorageSync("user");
          if (item.currentNode && item.currentNode.auditor == user.ID) {
            this.isAuditor = true;
          }
        }
      }
    },

    toExcelDetail() {
      uni.navigateTo({
        url: `./excelDetail?templateNodeId=${this.templateNodeId}&versionId=${this.version.version_id}`,
      });
    },
  },
  computed: {
    formList() {
      if (!this.version.formStr) {
        return [];
      }
      try {
        const formStrArray = JSON.parse(this.version.formStr);
        const formComponents = [];
        if (formStrArray && formStrArray.length) {
          formStrArray.forEach((item) => {
            formComponents.push(JSON.parse(item));
          });
        }
        const formComponent = formComponents.filter(
          (item) => item.template_node_id === this.version.template_node_id
        );
        console.log(formComponent);
        return (
          formComponent[0].formComponentValues.filter(
            (item) => !item.id.includes("DIYTable")
          ) || []
        );
      } catch (e) {
        return [];
      }
    },
  },
};
</script>

<style lang="less" scoped>
.page-detail {
  min-height: 100vh;
  padding: 20rpx 30rpx 40rpx;
  background: url("~@/static/index/bg.png") no-repeat center;
  background-size: cover;
  background-attachment: fixed;

  .page-center {
    padding: 30rpx;
    padding-top: 0;
    background-color: #fff;
  }
}

.btns {
  display: flex;
  margin-top: 40rpx;
}

.excel-detail {
  color: #2f42ca;
  text-decoration: underline;
  padding-left: 20rpx;
}

.form {
  width: 90%;
  margin: 0;
  box-shadow: 0 0 1 3 rgba(0, 0, 0, 0.1);

  .content {
    line-height: 44rpx;
    padding: 14rpx;
    word-break: break-all;
  }
}

.attachment {
  padding-left: 20rpx;
  margin-bottom: 20rpx;
}
</style>