jiliangxiaochengxu/pages/Ledger/recordHistory.vue

<!-- @format -->

<template>
  <view class="container">
    <view class="">
      <view style="">
        <!-- <u-search
          :showAction="false"
          bgColor="#fff"
          placeholder="请输入检定单编号"
          style="width: 95%; margin: 30rpx auto"
        ></u-search> -->

        <view
          class="contentItems"
          @click="handleVerDetails"
          v-for="item of recordList"
        >
          <view class="title">
            <span class="name">{{ item.name }}</span>
            <span
              class="createTime"
              :style="{
                color: recordColor[recordStatus(item.auditStatus)],
              }"
              >备案状态：{{ recordStatus(item.auditStatus) }}</span
            >
          </view>
          <view class="contentItem">
            <view class="item">
              <span
                style="color: #fa3534; font-size: 28rpx; margin-right: 40rpx"
                >备案编号：{{ item.filingApplyNo }}</span
              >
              <span>出厂编号：{{ item.serialNumber }}</span>
            </view>
            <view class="item">
              <view>审核机构：{{ item.auditOrgName }}</view>
            </view>
            <view class="item">
              <view>审核人员：{{ item.auditUserName }}</view>
            </view>
            <view class="item">
              <span>申请时间：{{ item.createTime }}</span>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { getauditRecordList } from "@/api/Ledger";
import { useDict, paraseDict } from "@/utils/index";
export default {
  data() {
    return {
      recordId: null,
      recordList: [],
      recordColor: {
        已撤回: "#fa3534",
        已接收: "#19be6b",
        待提交: "#2979ff",
        备案中: "#2979ff",
        已拒绝: "#fa3534",
        勿备案: "#fa3534",
        未备案: "#909399",
        免备案: "#909399",
        已退回: "#fa3534",
      },
      record: [], //备案字典
    };
  },
  computed: {
    //备案状态
    recordStatus() {
      return (row) => {
        return paraseDict(this.record, row);
      };
    },
  },
  async onLoad(options) {
    useDict("ejian_instrFillingStatus").then((res) => {
      this.record = res;
    });
    this.recordId = options.id;
    try {
      let { data } = await getauditRecordList({
        instrumentId: this.recordId,
      });
      this.recordList = data;
    } catch (error) {}
  },
};
</script>
<style lang="scss">
.item {
  color: #909399;
  font-size: 24rpx;
  margin: 15rpx 0;
}
.title {
  padding-bottom: 10rpx;
  border-bottom: 1px solid rgb(242, 242, 242);
  display: flex;
  align-items: center;
  justify-content: space-between;

  .name {
    font-size: 28rpx;
    color: black;
    font-weight: bold;
  }
  .createTime {
    color: #909399;
    font-size: 28rpx;
    font-weight: bold;
  }
}
.container {
  height: 100vh;
  background: rgb(248, 249, 250);
  padding: 30rpx;
}
.contentItems {
  width: 97%;
  border-radius: 6px;
  background: #fff;
  margin: 0rpx auto 30rpx;
  padding: 20rpx 30rpx 20rpx;

  .content {
    border-bottom: 1px solid rgb(242, 242, 242);
    padding: 24rpx 0;
    display: flex;
    justify-content: space-between;
  }

  .content:last-child {
    border-bottom: none;
  }

  .title {
    font-size: 26rpx;
    color: black;
    letter-spacing: 3rpx;
  }

  .message {
    font-size: 26rpx;
    color: rgb(146, 146, 146);
  }
}
</style>