jiliangxiaochengxu/pages/assay/detailsList.vue

<template>
  <view class="container">
    <view
      v-for="item in ledgerList"
      :key="item.id"
      style="margin-top: 15rpx"
      class="content-header"
    >
      <view class="">
        <view style="justify-content: space-between" class="content">
          <view
            style="color: black; font-size: 36rpx; font-weight: 700"
            class="message"
          >
            {{ item.miInstrument.name }}
          </view>
          <view
            style="padding-top: 5rpx"
            :style="{
              color: recordColor[recordStatus(item.miInstrument.fillingStatus)],
            }"
            >{{ recordStatus(item.miInstrument.fillingStatus) }}</view
          >
        </view>
        <view style="display: flex" class="content">
          <view class="title"
            >唯一标识：<span class="message"
              >{{ item.miInstrument.instrNo }}
            </span>
          </view>
        </view>
        <view style="display: flex" class="content">
          <view class="title">器具用途：</view>
          <view class="message">{{ item.miInstrument.purposeName }}</view>
        </view>
        <view class="content">
          <view class="title">制造单位：</view>
          <view class="message">{{ item.miInstrument.manufactoryName }}</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.miInstrument.typeName }}
            </view>
          </view>
          <view style="display: flex; align-items: center" class="content">
            <view class="title">规格型号：</view>
            <view class="message">{{ item.miInstrument.modelSpecific }}</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.miInstrument.serialNumber }}
            </view>
          </view>
          <view style="display: flex; align-items: center" class="content">
            <view class="title">内部编号：</view>
            <view class="message">{{ item.miInstrument.internalNumber }}</view>
          </view>
        </view>
      </view>
    </view>
    <view style="display: flex" class="submitBtn">
      <!-- <u-button @click="downLoadPDF" type="primary" style="margin: 0 auto; width:47%">备案申请单PDF下载</u-button> -->
      <u-button
        v-if="showChehui"
        @click="chehui"
        type="error"
        style="margin: 0rpx auto; width: 47%"
        >撤回</u-button
      >
    </view>
    <u-modal
      :show="show"
      :showCancelButton="true"
      @cancel="show = false"
      @confirm="handleGD"
      title="提示"
      content="确认要撤回此备案单吗？"
    ></u-modal>
  </view>
</template>

<script>
import {
  getMiAuditApplyOneList,
  getMiAuditApplyRoobtList,
  backAudit,
} from "@/api/assay";
import { useDict, paraseDict } from "@/utils/index";
export default {
  data() {
    return {
      show: false,
      recordColor: {
        已撤回: "#fa3534",
        已接收: "#2979ff",
        待提交: "#2979ff",
        备案中: "#2979ff",
        已拒绝: "#fa3534",
        勿备案: "#fa3534",
        未备案: "#909399",
        免备案: "#909399",
        已退回: "#fa3534",
      },
      record: [], //备案字典
      ledgerList: [],
      total: 0,
      record: [],
      showChehui: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        auditOrderId: "",
        auditOrderApplyId: "",
      },
    };
  },
  onLoad(option) {
    useDict("ejian_instrFillingStatus").then((res) => {
      this.record = res;
    });
    (this.queryParams.auditOrderId = option.auditOrderId),
      (this.queryParams.auditOrderApplyId = option.auditOrderApplyId);
    getMiAuditApplyRoobtList({
      ...this.queryParams,
    }).then((res) => {
      this.ledgerList = res.rows;
      this.total = res.total;
      if (this.ledgerList[0].miInstrument.fillingStatus == "7") {
        this.showChehui = false;
      }
    });
    console.log(
      "this.ledgerList[0].miInstrument.fillingStatus",
      this.ledgerList
    );
    // for(let i=0;i<this.ledgerList)
  },
  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);
      };
    },
  },
  methods: {
    chehui() {
      this.show = true;
    },
    handleGD() {
      backAudit({
        applyId: this.queryParams.auditOrderApplyId,
      }).then((res) => {
        uni.showToast({
          title: "撤回成功",
          icon: "none",
          duration: 1000,
        });
        getMiAuditApplyRoobtList({
          ...this.queryParams,
        }).then((res) => {
          this.ledgerList = res.rows;
          this.total = res.total;
          if (this.ledgerList[0].miInstrument.fillingStatus == "7") {
            this.showChehui = false;
          }
          this.show = false;
        });

        // setTimeout(() => {
        // 	uni.navigateBack()
        // })
      });
    },
    // downLoadPDF() {
    // 		console.log('’', path)
    // 		uni.downloadFile({
    // 			url: path,
    // 			success: (res) => {
    // 				var filePath = res.tempFilePath;
    // 				uni.openDocument({
    // 					filePath: filePath,
    // 					showMenu: true,
    // 					success: function(res) {
    // 						console.log('打开文档成功');
    // 					}
    // 				});
    // 			}
    // 		})
    // },
    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 {
          uni.showLoading({
            title: "加载中",
          });
          this.queryParams.pageNum++;

          getMiAuditApplyRoobtList({
            ...this.queryParams,
          }).then(({ rows, total }) => {
            this.ledgerList = [...this.ledgerList, ...rows];
            this.total = total;
          });
        }
        setTimeout(() => {
          uni.hideLoading();
        }, 500);
      }
    },
  },
};
</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>