jiliangxiaochengxu/pages/verification/utensilList.vue

<!-- @format -->

<template>
  <view class="container">
    <view
      v-for="item of ledgerList"
      :key="item.orderInstrumentId"
      style="margin-top: 15rpx"
      class="content-header"
      @click="handleDetail(item.instrumentId)"
    >
      <view class="">
        <view style="justify-content: space-between" class="content">
          <view
            style="color: black; font-size: 36rpx; font-weight: 700"
            class="message"
          >
            {{ item.name }}
          </view>
          <view
            style="padding-top: 5rpx"
            :style="{
              color:
                applicationColor[applicationStatus(item.checkRecordStatus)],
            }"
            >{{ applicationStatus(item.checkRecordStatus) }}</view
          >
        </view>
        <!--<view style="display: flex" class="content">
          <view class="title"
            >唯一标识：<span class="message">{{ item.instrNo }} </span>
          </view>
        </view>-->

        <view style="display: flex; align-items: center" class="content">
          <view class="title">规格型号：</view>
          <view class="message">{{ item.modelSpecific }}</view>
        </view>
        <view style="display: flex; align-items: center" class="content">
          <view class="title">检定机构：</view>
          <view class="message">{{ item.organizationName }}</view>
        </view>
        <view style="display: flex; align-items: center" class="content">
          <view class="title">检定实验室：</view>
          <view class="message">{{ item.deptName }}</view>
        </view>
        <view style="display: flex; align-items: center" class="content">
          <view class="title">部门联系方式：</view>
          <view class="message">{{ item.phone }}</view>
        </view>
        <!-- </view> -->
        <view style="display: flex; justify-content: space-between" class="">
          <view style="display: flex" class="content">
            <view class="title">出厂编号：</view>
            <view style="padding-top: 5rpx" class="message">
              {{ item.serialNumber }}
            </view>
          </view>
        </view>
        <view style="display: flex; justify-content: space-between" class="">
          <view style="display: flex" class="content">
            <view class="title">制造单位：</view>
            <view style="padding-top: 5rpx" class="message">
              {{ item.manufactoryName }}
            </view>
          </view>
        </view>
        <u-divider></u-divider>
        <view style="display: flex">
          <view
            v-if="item.checkCertPath != null && item.checkCertPath != ''"
            style="margin-left: auto; width: 200rpx; margin-right: 20rpx"
          >
            <u-button
              @click="downloadCert(item.checkCertPath)"
              type="primary"
              size="small"
              >证书下载</u-button
            >
          </view>
          <view style="margin-left: auto; width: 200rpx">
            <u-button
              @click="handleCirculation(item)"
              size="small"
              type="primary"
              >器具流转记录</u-button
            >
          </view>
        </view>
      </view>
    </view>

    <view style="height: 200rpx"></view>

    <view style="display: flex; justify-content: center" class="submitBtn">
      <!-- <u-button @click="downLoadPDF" type="primary" style="margin: 0 auto; width:47%">备案申请单PDF下载</u-button> -->
      <view style="width: 300rpx">
        <u-button v-if="showChehui" @click="chehui" type="error">撤回</u-button>
      </view>
    </view>
    <u-modal
      :show="show"
      :showCancelButton="true"
      @cancel="show = false"
      @confirm="handleGD"
      title="提示"
      content="确认要撤回此检定机构任务单吗？"
    ></u-modal>
  </view>
</template>
<script>
import {
  orderApplyInstrumentList,
  recallCheckOrderApply,
} from "@/api/verification";
import { useDict, paraseDict } from "@/utils/index";
export default {
  data() {
    return {
      baseUrl: this.$baseUrl,
      showChehui: true,
      rollbackDisabled: null,
      rollbacked: null,
      show: false,
      verificationColor: {
        未检定: "#909399",
        已校准: "#19be6b",
        已检定: "#19be6b",
        不合格: "#fa3534",
        已完成: "#19be6b",
        已分发: "#2979ff",
        不受理: "#fa3534",
        已中止: "#fa3534",
      },
      record: [], //备案字典
      ledgerList: [],
      total: 0,
      application: null,
      queryParams: {
        id: "",
      },
      orderApplyId: null,
    };
  },
  onLoad(option) {
    this.rollbackDisabled = option.rollbackDisabled;
    this.rollbacked = option.rollbacked;
    this.showChehui = option.rollbackDisabled == 0 && option.rollbacked == 0;
    console.log(this.showChehui);

    useDict("ejian_instrCheckRecordStatus").then((res) => {
      this.application = res;
    });

    orderApplyInstrumentList(option.id).then(({ data }) => {
      this.ledgerList = data;
    });
    this.orderApplyId = option.id;
  },
  computed: {
    //申请状态
    applicationStatus() {
      return (row) => {
        return paraseDict(this.application, row);
      };
    },
  },
  methods: {
    chehui() {
      this.show = true;
    },
    handleGD() {
      recallCheckOrderApply({ orderApplyId: this.orderApplyId }).then((res) => {
        uni.showToast({
          title: "撤回成功",
          icon: "none",
          duration: 1000,
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);

        // getMiAuditApplyRoobtList({
        //   ...this.queryParams,
        // }).then(({ rows, total }) => {
        //   this.ledgerList = [...this.ledgerList, ...rows];
        //   this.total = total;
        // });
        // this.showChehui = false;

        this.show = false;
      });
    },
    handleDetail(id) {
      uni.navigateTo({
        url: "/pagesB/Ledger/details?id=" + id,
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
    //流转记录
    handleCirculation(item) {
      console.log(item.orderInstrumentId);
      uni.navigateTo({
        url: "/pages/verification/circulation?id=" + item.orderInstrumentId,
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
    onReachBottom() {
      //触底事件
      if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) {
        uni.showToast({
          title: "没有更多数据了",
          icon: "none",
          duration: 1000,
        });
        setTimeout(() => {
          uni.hideLoading();
        }, 500);
      } else {
        if (this.queryParams.pageNum <= this.queryParams.pageNum - 1) {
          setTimeout(() => {
            uni.hideLoading();
          }, 500);
        } else {
          this.queryParams.pageNum++;

          getMiAuditApplyRoobtList({
            ...this.queryParams,
          }).then(({ rows, total }) => {
            this.ledgerList = [...this.ledgerList, ...rows];
            this.total = total;
          });
        }
        setTimeout(() => {
          uni.hideLoading();
        }, 500);
      }
    },
    downloadCert: function (path) {
      uni.showLoading({
        title: "加载中",
      });
      console.log(path);
      uni.downloadFile({
        url: this.baseUrl + "/api/instrument/sysFileDownload?path=" + path,
        success: (res) => {
          var filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {
              console.log("打开文档成功");
              uni.hideLoading();
            },
          });
        },
      });
    },
  },
};
</script>

<style lang="scss">
.submitBtn {
  width: 100%;
  background: #fff;
  padding: 15rpx 0;
  position: fixed;
  bottom: 0;
}

.content-header {
  width: 95%;
  border-radius: 6px;
  background: #fff;
  margin: 10rpx auto 10rpx;
  padding: 20rpx 30rpx 10rpx;

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

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

  .passIcon {
    position: absolute;
    top: 20rpx;
    right: 40rpx;
  }

  .title {
    font-size: 28rpx;
    color: rgb(146, 146, 146);
    letter-spacing: 3rpx;
  }

  .message {
    font-size: 28rpx;
    color: rgb(146, 146, 146);
  }
}

.container {
  height: 100vh;
  background: rgb(243, 244, 249);
  padding: 0rpx 0 110rpx;

  .contentItems {
    width: 95%;
    border-radius: 6px;
    background: #fff;
    margin: 0rpx auto 10rpx;
    padding: 10rpx 30rpx 10rpx;

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

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

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

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