jiliangxiaochengxu/pages/Ledger/details.vue

<!-- @format -->

<template>
  <view class="container">
    <view class="contentItems">
      <view class="content">
        <view class="title">器具类型</view>
        <view class="message">{{ ledgerDetails.typeName }} </view>
      </view>
      <view class="content">
        <view class="title">器具用途</view>
        <view class="message">{{ ledgerDetails.purposeName }} </view>
      </view>
      <view class="content">
        <view class="title">器具名称</view>
        <view class="message">{{ ledgerDetails.name }}</view>
      </view>
      <view class="content">
        <view class="title">器具种别 </view>
        <view class="message">{{ ledgerDetails.className }}</view>
      </view>
      <view class="content">
        <view class="title">创建时间</view>
        <view class="message">{{ ledgerDetails.createTime }}</view>
      </view>
      <!-- <view class="content">
        <view class="title">制作单位</view>
        <view class="message">{{ ledgerDetails.manufactoryName }}</view>
      </view> -->

      <view class="content">
        <view class="title">规格型号</view>
        <view class="message">{{ ledgerDetails.modelSpecific }}</view>
      </view>

      <view class="content">
        <view class="title">出厂编号</view>
        <view class="message">{{ ledgerDetails.serialNumber }}</view>
      </view>

      <view class="content">
        <view class="title">生产日期</view>
        <view class="message">{{ ledgerDetails.productionDate }}</view>
      </view>
      <view class="content">
        <view class="title">内部编号</view>
        <view class="message">{{ ledgerDetails.internalNumber }}</view>
      </view>

      <view class="content">
        <view class="title">申请状态</view>
        <view
          class="message"
          :style="{
            color:
              applicationColor[applicationStatus(ledgerDetails.checkStatus)],
          }"
          >{{ applicationStatus(ledgerDetails.checkStatus) }}</view
        >
      </view>
      <view class="content">
        <view class="title">器具检定状态</view>
        <view
          class="message"
          :style="{
            color:
              verificationColor[verificationStatus(ledgerDetails.checkStatus)],
          }"
          >{{ verificationStatus(ledgerDetails.checkStatus) }}</view
        >
      </view>
      <view class="content">
        <view class="title">备案状态</view>
        <view
          class="message"
          :style="{
            color: recordColor[recordStatus(ledgerDetails.checkStatus)],
          }"
          >{{ recordStatus(ledgerDetails.checkStatus) }}</view
        >
      </view>
      <view class="content">
        <view class="title">使用单位</view>
        <view class="message">{{ ledgerDetails.useUnitName }}</view>
      </view>

      <view class="content">
        <view class="title">单位区域</view>
        <view class="message">{{ ledgerDetails.useAddrName }}</view>
      </view>

      <view class="content">
        <view class="title">使用地点</view>
        <view class="message">{{ ledgerDetails.setupPlace }}</view>
      </view>

      <!-- <view class="content">
        <view class="title">购置日期</view>
        <view class="message">{{  }}</view>
      </view> -->
    </view>
    <view class="history">
      <u-button type="primary" size="small">检定记录</u-button>
      <u-button type="primary" size="small">备案记录</u-button>
    </view>
    <view style="height: 20rpx"></view>
  </view>
</template>

<script>
import { getLedgerDetails } from "@/api/Ledger";
import { useDict, paraseDict } from "@/utils/index";

export default {
  data() {
    return {
      ledgerDetails: {},
      verificationColor: {
        未检定: "#909399",
        已校准: "#19be6b",
        已检定: "#19be6b",
        不合格: "#fa3534",
        已超期: "#fa3534",
      },
      applicationColor: {
        已中止: "#fa3534",
        已完成: "#19be6b",
        未申请: "#909399",
        不受理: "#fa3534",
        办理中: "#2979ff",
      },
      recordColor: {
        已撤回: "#fa3534",
        已接收: "#19be6b",
        待提交: "#2979ff",
        备案中: "#2979ff",
        已拒绝: "#fa3534",
        勿备案: "#fa3534",
        未备案: "#909399",
        免备案: "#909399",
        已退回: "#fa3534",
      },
      verification: [], //检定字典
      verification: [], //检定字典
      application: [], //申请字典
      record: [], //备案字典
    };
  },
  computed: {
    //检定状态
    verificationStatus() {
      return (row) => {
        return paraseDict(this.verification, row);
      };
    },
    //申请状态
    applicationStatus() {
      return (row) => {
        return paraseDict(this.application, row);
      };
    },
    //备案状态
    recordStatus() {
      return (row) => {
        return paraseDict(this.record, row);
      };
    },
  },
  onLoad(options) {
    useDict("ejian_instrCheckStatus").then((res) => {
      this.verification = res;
    });
    useDict("ejian_instrCheckRecordStatusV2").then((res) => {
      this.application = res;
    });
    useDict("ejian_instrFillingStatus").then((res) => {
      this.record = res;
    });

    getLedgerDetails({ id: options.id }).then((res) => {
      this.ledgerDetails = res.data;
    });
  },
};
</script>

<style lang="scss" scoped>
.history {
  background: #fff;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
}
.container {
  height: 100vh;
  background: rgb(243, 244, 249);
  padding: 30rpx 0 110rpx;

  .contentItems {
    width: 95%;
    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>