BomApp/pages/approved/list.vue

<template>
  <view class="page-detail">
    <view class="page-center">
      <uni-section title="已审批列表" type="line" style="margin-top: 0" />
      <uni-card
        v-for="item in list"
        :key="item.id"
        :title="item.name || '无标题'"
        @click="toDetail(item)"
      >
        <view class="item">
          <view class="label">发起时间</view>
          <view class="value">{{ formateDate(item.create_time) }}</view>
        </view>
        <view class="item">
          <view class="label">发起人</view>
          <view class="value">{{
            item.AuthorInfo && item.AuthorInfo.CName
          }}</view>
        </view>
        <button
          size="mini"
          type="default"
          class="detailBtn"
          @click="toDetail(item)"
        >
          查看详情
        </button>
        <!-- <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 { queryApprovedList } from "@/services/oa.js";

export default {
  data() {
    return {
      list: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },

  onShow() {
    this.queryList();
  },

  methods: {
    async queryList() {
      var { list, pagination } = await queryApprovedList();
      this.list = list;
      this.pagination = pagination;
    },

    formateDate(date) {
      const origin = new Date(date);
      const datePart =
        origin.getFullYear() +
        "-" +
        (origin.getMonth() + 1) +
        "-" +
        origin.getDate();
      const timePart =
        origin.getHours() +
        ":" +
        origin.getMinutes() +
        ":" +
        origin.getSeconds();
      return datePart + " " + timePart;
    },

    toDetail(item) {
      uni.navigateTo({
        url: `./detail?id=${item.id}`,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.page-detail {
  min-height: 100vh;
  padding: 15px;
  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;
    }
  }
}

.detailBtn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: #2979ff;
  color: #fff;
}
</style>