jiliangxiaochengxu/pagesB/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.categoryName }}</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.majorName }}</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.internalNumber }}</view>
      </view>

      <view class="content">
        <view class="title">使用状态</view>
        <view class="message">{{ useStatus(ledgerDetails.useStatus) }}</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 ? ledgerDetails.setupPlace : ""
        }}</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">{{ ledgerDetails.lastExpireDate }}</view>
      </view>
      <view class="content">
        <view class="title">备案状态</view>
        <view
          class="message"
          :style="{
            color: recordColor[recordStatus(ledgerDetails.fillingStatus)],
          }"
          >{{ recordStatus(ledgerDetails.fillingStatus) }}</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.useUnitName }}</view>
      </view>

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

      <!--<view class="content">
        <view class="title">
          <u-button
            @click="showBindWxModal=true"
            type="error"
            size="small"
            :customStyle="{ width: '180rpx' }"
            >删除</u-button
          >
        </view>
        &lt;!&ndash;<view class="message">
          <u-button
            @click="handleEdit"
            type="primary"
            size="small"
            :customStyle="{ width: '180rpx' }"
            >编辑</u-button
          >
        </view>&ndash;&gt;
      </view>-->
      <!-- <view class="content">
        <view class="title">购置日期</view>
        <view class="message">{{  }}</view>
      </view> -->
    </view>

    <u-divider text="技术参数" :textSize="18" textColor="black"></u-divider>

    <view class="contentItems">
      <view class="content">
        <view class="title">测量范围</view>
        <view class="message">
          <u-parse :content="ledgerDetails.measureRange"></u-parse
        ></view>
      </view>
      <view class="content">
        <view class="title">准确度等级</view>
        <view class="message">
          <u-parse :content="ledgerDetails.accuracyLevel"></u-parse
        ></view>
      </view>
      <view class="content">
        <view class="title">允许误差</view>
        <view class="message">
          <u-parse :content="ledgerDetails.indicationError"></u-parse
        ></view>
      </view>
    </view>

    <u-divider text="其他信息" :textSize="18" textColor="black"></u-divider>

    <view class="contentItems">
      <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.purchaseDate }}</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">{{ ledgerDetails.useDeptName }}</view>
      </view>
      <view class="content">
        <view class="title">保管人员</view>
        <view class="message">{{ ledgerDetails.custodianName }}</view>
      </view>
      <view class="content">
        <view class="title">保管手机号</view>
        <view class="message">{{ ledgerDetails.custodianMobile }}</view>
      </view>
      <view class="content">
        <view class="title">保管身份证号</view>
        <view class="message">{{ ledgerDetails.custodianIdCard }}</view>
      </view>
    </view>

    <u-divider text="强检证明材料" :textSize="18" textColor="black"></u-divider>

    <view class="contentItems">
      <view
        class="content"
        v-for="(value, key, index) in imgMapping"
        :key="key"
      >
        <view class="title">{{ value[0].name }}</view>
        <view
          v-if="
            value[0].url != null &&
            value[0].url != '' &&
            !isImageFile(value[0].url)
          "
          class="message"
          @click="previewPdf(value)"
        >
          <u--image
            width="150rpx"
            height="150rpx"
            mode="aspectFit"
            :src="baseUrl + '/ruoyi/PDF.png'"
          />
        </view>
        <view
          v-if="value[0].url != null && value[0].url != ''"
          @click="previewImage(value)"
          class="message"
        >
          <u--image
            width="150rpx"
            height="150rpx"
            mode="aspectFit"
            :src="
              baseUrl + '/api/instrument/sysFileDownload?path=' + value[0].url
            "
          />
        </view>
      </view>
      <view
        class="content"
        v-if="
          ledgerDetails.name == '出租汽车计价器' ||
          ledgerDetails.name == '出租汽车税控计价器'
        "
      >
        <view class="title">
          <u-button
            @click="showBindWxModal = true"
            type="error"
            size="small"
            :customStyle="{ width: '180rpx' }"
            >删除</u-button
          >
        </view>
        <view class="message">
          <u-button
            @click="handleEdit"
            type="primary"
            size="small"
            :customStyle="{ width: '180rpx' }"
            >编辑</u-button
          >
        </view>
      </view>
    </view>

    <view class="history">
      <u-button
        @click="handleVerificationHistory"
        :customStyle="{ width: '300rpx' }"
        type="success"
        shape="circle"
        :plain="true"
        size="small"
        >检定记录</u-button
      >
      <u-button
        @click="handleRecordHistory"
        :customStyle="{ width: '300rpx' }"
        type="primary"
        shape="circle"
        :plain="true"
        size="small"
        >备案记录</u-button
      >
    </view>
    <view style="height: 100rpx"></view>

    <u-modal
      showCancelButton
      cancelText="取消"
      @cancel="showBindWxModal = false"
      @close="showBindWxModal = false"
      confirmText="确认"
      @confirm="handleDelete"
      :show="showBindWxModal"
      :title="'提示'"
      :content="'确定删除该器具吗?'"
    ></u-modal>
  </view>
</template>

<script>
import { getLedgerDetails } from "@/api/Ledger";
import { useDict, paraseDict } from "@/utils/index";
import { deleteExternal } from "@/api/qj";
import UImage from "../../uni_modules/uview-ui/components/u--image/u--image";
export default {
  components: { UImage },
  data() {
    return {
      baseUrl: this.$baseUrl,
      showBindWxModal: false,
      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: [], //备案字典
      qjsyzt: [], // 使用状态
      imgMapping: {
        tradeProved: [
          {
            name: "贸易结算的相关证明",
            url: null,
          },
        ],
        lastTest: [
          {
            name: "最近一次检定证书或新购置器具的购销合同或发票",
            url: null,
          },
        ],
        modelImage: [
          {
            name: "含有出厂编号规格型号的铭牌图片",
            url: null,
          },
        ],
      },
    };
  },
  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);
      };
    },
    //使用状态
    useStatus() {
      return (row) => {
        return paraseDict(this.qjsyzt, row);
      };
    },
  },
  onLoad(options) {
    getLedgerDetails({ id: options.id }).then((res) => {
      this.ledgerDetails = res.data;
      if (this.ledgerDetails.imgPath != null) {
        this.imgMapping = JSON.parse(this.ledgerDetails.imgPath);
      }
    });
    useDict("ejian_instrCheckStatus").then((res) => {
      this.verification = res;
    });
    useDict("ejian_instrCheckRecordStatusV2").then((res) => {
      this.application = res;
    });
    useDict("ejian_instrFillingStatus").then((res) => {
      this.record = res;
    });
    useDict("ejian_qjsyzt").then((res) => {
      this.qjsyzt = res;
    });
  },
  methods: {
    isImageFile(url) {
      // 获取文件扩展名
      const extension = url.substring(url.lastIndexOf(".") + 1).toLowerCase();
      // 支持的图片扩展名列表
      const imageExtensions = ["jpg", "jpeg", "png", "gif", "bmp"];
      // 判断当前文件扩展名是否为图片扩展名
      if (imageExtensions.includes(extension)) {
        return true;
      }
      return false;
    },
    previewImage: function (path) {
      uni.previewImage({
        indictor: "none",
        loop: false,
        urls: [
          this.baseUrl + "/api/instrument/sysFileDownload?path=" + path[0].url,
        ],
      });
    },
    previewPdf: function (path) {
      console.log(path[0].url);
      uni.downloadFile({
        url:
          this.baseUrl + "/api/instrument/sysFileDownload?path=" + path[0].url,
        success: (res) => {
          var filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {
              console.log("打开文档成功");
              uni.hideLoading();
            },
          });
        },
      });
    },
    async handleDelete() {
      uni.showLoading({
        title: "删除中...",
      });
      await deleteExternal(this.ledgerDetails.id);
      uni.showToast({
        title: "删除成功",
        duration: 1000,
      });
      this.showBindWxModal = false;
      setTimeout(() => {
        uni.navigateBack();
      }, 1000);
    },
    //检定记录
    handleVerificationHistory() {
      console.log(this.ledgerDetails);
      uni.navigateTo({
        url: `/pagesB/Ledger/verificationHistory?id=${this.ledgerDetails.id}`,
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
    //备案记录
    handleRecordHistory() {
      uni.navigateTo({
        url: `/pagesB/Ledger/recordHistory?id=${this.ledgerDetails.id}`,
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
    handleEdit() {
      uni.navigateTo({
        url: "/pagesB/Ledger/edit?id=" + this.ledgerDetails.id,
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.history {
  display: flex;

  padding: 20rpx 10rpx;
  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>