BomApp/pages/audit/OA/detail.vue

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

      <!-- 表单数据 -->
      <template v-if="formList.length > 0">
        <uni-section title="表单数据" type="line" />
        <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="attachments.length > 0">
        <uni-section title="附件信息" type="line" />
        <view class="attachment" v-for="item in attachments" :key="item.id">
          <!-- {{item.name}} -->
          <previewFile :src="item.url" :name="item.name" />
        </view>
      </template>

      <!-- 审批信息 -->
      <uni-section title="审批信息" type="line" />
      <uni-steps
        :options="auditList"
        :active="currentStep"
        direction="column"
      />

      <!-- 清单详情 -->
      <!-- 	<uni-section title="清单详情" type="line" />
			<view class="excel-detail" @click="toExcelDetail">查看详情</view> -->

      <!-- 审批按钮 -->
      <view class="btns" v-if="isAuditor">
        <button
          type="primary"
          @click="showAuditModal"
          style="width: 200rpx; height: 45px"
        >
          通过
        </button>
        <button
          type="warn"
          @click="showRejectModal"
          style="width: 200rpx; height: 45px"
        >
          拒绝
        </button>
      </view>
    </view>

    <!-- 审核通过弹窗 -->
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        mode="input"
        placeholder="请输入审批意见"
        :duration="2000"
        :before-close="true"
        @close="auditClose"
        @confirm="auditConfirm"
      />
    </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 { gerCurrentUser } from "@/services/user.js";

import previewFile from "@/components/preview-file/preview-file.vue";
import { audit, getOAAuditDetail } from "../../../services/oa";

export default {
  components: {
    previewFile,
  },
  data() {
    return {
      id: "",
      detail: {},
      attachments: [],
      auditList: [],
      currentStep: 0,
      isAuditor: true,
      query: {},
      excelFileList: [],
    };
  },
  onLoad(query) {
    if (!uni.getStorageSync("token")) {
      uni.setStorageSync("token", query["JWT-TOKEN"]);
    }
    this.id = query.id;
    this.query = query;
    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);

      // if (!this.isMobile) {
      // 	// 如果是在电脑上打开，转到PC端的页面去
      // 	window.location.href =
      // 		`http://120.55.44.4:8896/#/bom/home/detail/${version.project_id}/${version.template_id}?version_id=${this.versionId}&JWT-TOKEN=${this.query['JWT-TOKEN']}`
      // }

      const detail = await getOAAuditDetail(this.id);
      // 如果传入链接是已完成审批的，则重定向到已审批详情中
      if (detail.audit_status === 3) {
        uni.redirectTo({
          url: `/pages/approved/detail?id=${this.id}`,
        });
      }
      this.detail = detail;
      this.attachments = detail.Files;
      this.getAuditList(detail.OaAuditList, detail.AuditorInfo);
    },

    getAuditList(list, currentAuditor) {
      // 填充审核人列表
      if (list && list.length) {
        this.auditList = list.map((item, index) => {
          if (currentAuditor.ID === item.auditor) {
            this.currentStep = index;
          }
          return {
            title: item.seq_name,
            desc: `审核人：${item.AuditorUser.CName || "-"}`,
          };
        });
      }
    },

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

    // 通过审批
    async auditConfirm(audit_comment) {
      await audit({
        id: this.id,
        status: 1,
        desc: audit_comment,
      });
      uni.showToast({
        title: "操作成功",
      });
      this.auditClose();
      uni.redirectTo({
        url: `/pages/approved/detail?id=${this.id}`,
      });
    },

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

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

    async rejectConfirm(audit_comment) {
      await audit({
        id: this.id,
        status: 2,
        desc: audit_comment,
      });
      uni.showToast({
        title: "操作成功",
      });

      this.rejectClose();
    },

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

    toExcelDetail() {
      uni.navigateTo({
        url: `./excelDetail?templateNodeId=${this.templateNodeId}&versionId=${this.versionId}`,
      });
    },
  },
  computed: {
    formList() {
      const form = this.detail?.form;
      if (!form) {
        return [];
      }
      try {
        const formDatas = JSON.parse(form);
        if (formDatas && formDatas.length) {
          return formDatas.filter((item) => item.type !== "DIYTable");
        }
        return [];
      } catch {
        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 auto;

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

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