jiliangxiaochengxu/pages/Ledger/verificationHistory.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: verificationColor[recordStatus(item.checkRecordStatus)],
              }"
              >检定状态：{{ recordStatus(item.checkRecordStatus) }}</span
            >
          </view>
          <view class="contentItem">
            <view class="item">
              <span
                style="color: #fa3534; font-size: 28rpx; margin-right: 40rpx"
                >检定编号：{{ item.number }}</span
              >
            </view>
            <view class="item">
              <span>唯一标识：{{ item.instrNo }}</span>
            </view>
            <view class="item">
              <view>审核机构：{{ item.organizationName }}</view>
            </view>
            <view class="item">
              <view>检定部门：{{ item.deptName }}</view>
            </view>
            <view class="item">
              <span>申请时间：{{ item.createTime }}</span>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { getCheckRecordList } from "@/api/Ledger";
import { useDict, paraseDict } from "@/utils/index";
export default {
  data() {
    return {
      recordId: null,
      recordList: [],
      verificationColor: {
        未检定: "#909399",
        已校准: "#19be6b",
        已检定: "#19be6b",
        不合格: "#fa3534",
        已超期: "#fa3534",
      },
      verification: [], //备案字典
    };
  },
  computed: {
    //备案状态
    recordStatus() {
      return (row) => {
        return paraseDict(this.verification, row);
      };
    },
  },
  async onLoad(options) {
    useDict("ejian_instrCheckRecordStatus").then((res) => {
      this.verification = res;
    });
    this.recordId = options.id;
    try {
      let { data } = await getCheckRecordList({
        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: 30rpx;
    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>