BomApp/pages/approved/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"
      />
    </view>
  </view>
</template>

<script>
import { getOAAuditDetail } from "@/services/oa";

export default {
  data() {
    return {
      id: -1,
      detail: {},
      auditList: [],
      currentStep: 0,
    };
  },

  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 [];
      }
    },
    attachments() {
      if (this.detail?.Files?.length) {
        return this.detail.Files;
      }
      return [];
    },
  },

  onLoad(query) {
    if (query?.id !== undefined) {
      this.id = Number(query.id);
    } else {
      return;
    }

    this.getDetail();
  },

  methods: {
    getDetail() {
      getOAAuditDetail(this.id)
        .then((result) => {
          this.detail = result;
          this.getAuditList(result.OaAuditList, result.AuditorInfo);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    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 || "-"}`,
          };
        });
      }
    },
  },
};
</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>