BomApp/pages/approved/BOM/list.vue

<template>
  <view class="page-detail">
    <view class="page-center">
      <uni-section title="已审批列表" type="line"> </uni-section>
      <uni-card
        v-for="item in list"
        :title="project[item.project_id] || '未知项目'"
        @click="toDetail(item)"
      >
        <view class="item">
          <view class="label">审批节点</view>
          <view class="value">{{
            item.TemplateNodeInfo ? item.TemplateNodeInfo.label : "-"
          }}</view>
        </view>
        <view class="item">
          <view class="label">清单名称</view>
          <view class="value"
            >{{ item.version_name }}.{{ item.version_no }}</view
          >
        </view>
        <view class="row">
          <view class="item">
            <view class="label">分类</view>
            <view class="value">{{
              classify[item.classify_id] || "未知分类"
            }}</view>
          </view>
          <view class="item">
            <view class="label">提交人</view>
            <view class="value">{{
              item.AuthorInfo && item.AuthorInfo.CName
            }}</view>
          </view>
        </view>
      </uni-card>
      <view style="text-align: center" v-if="list.length == 0">暂无审批项</view>
    </view>
  </view>
</template>

<script>
import {
  queryCheckedList,
  queryProjectList,
  queryClassify,
} from "@/services/bom.js";
import { queryUser } from "@/services/index";

export default {
  data() {
    return {
      user: {},
      list: [],
      classify: {},
      project: {},
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  mounted() {
    this.init();
  },
  onShow() {
    this.queryList();
  },
  methods: {
    async init() {
      let project = {},
        classify = {};
      const userInfo = await queryUser();
      if (userInfo?.data) {
        uni.setStorageSync("user", userInfo.data);
      }
      var { data: projectData } = await queryProjectList();
      var { data: classifyData } = await queryClassify();
      projectData.forEach((p) => {
        project[p.id] = p.project_name;
      });
      classifyData.forEach((item) => {
        classify[item.id] = item.name;
      });
      this.project = project;
      this.classify = classify;
    },

    async queryList() {
      let user = uni.getStorageSync("user");
      var { data: list } = await queryCheckedList(user.ID, {
        pageSize: 9999,
      });
      this.list = list.list;
    },

    toDetail(item) {
      uni.navigateTo({
        url: `./detail?templateNodeId=${item.TemplateNodeInfo.Id}&excel_id=${item.id}&projectId=${item.project_id}`,
      });
    },
  },
};
</script>

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

  .page-center {
    padding: 20rpx;
    padding-top: 0;
    border-radius: 5px;
    background-color: #fff;
  }
}

.item {
  margin-bottom: 14px;

  .label {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
  }

  .value {
    font-size: 14;
  }
}

.row {
  display: flex;

  .item {
    width: 50%;
    display: flex;
    align-items: center;

    .label {
      margin-right: 12px;
      margin-bottom: 0;
    }
  }
}
</style>