zy-wechat/pages/check_blood/check_blood.vue

<template>
  <view class="checkBlood">
    <view class="page_tab">
      <view class="page_tab_bar" :class="{ active: item.value === selectedLabelSlots }" v-for="item in tabs"
        :key="item.value" @click="clickHandler(item.value)">
        {{ item.label }}
        <text class="tab_num" v-if="item.value == 1">( {{ item.num }} )</text>
      </view>
    </view>
    <block v-if="selectedLabelSlots == 1">
      <view class="bloodType">
        <view class="bloodTypeItem" v-for="(item, key, index) in unComplete" :key="index">
          {{key}}：<text class="link" @click="goToList(item)">{{item.length}}</text>
        </view>
      </view>
    </block>
    <block v-if="selectedLabelSlots == 2">
      <view class="title">
        血制品核对
      </view>
      <view class="order">
        <view class="">
          工单号：{{order.gdcode||'无'}}
        </view>
        <view class="">
          所属科室：{{order.startDept?order.startDept.dept:'无'}}
        </view>
        <view class="">
          接收数量：{{receiveNum}}
        </view>
      </view>
      <view class="bloodType">
        <view class="bloodTypeItem" v-for="(item, key, index) in complete" :key="index">
          {{key}}：<text class="link" @click="goToList(item)">{{item.length}}</text>
        </view>
      </view>
    </block>
    <view class="foot_btn_spe">
      <view class="btn1" @click="Scanning_again()"> 继续扫描 </view>
      <view class="btn3" @click="checkComplete()">核对完成</view>
    </view>
  </view>
</template>

<script>
  import {
    get,
    post,
    SM,
    webHandle
  } from "../../http/http.js";
  export default {
    data() {
      return {
        queryObj: {},
        SMFlag: true,
        // 接收数量
        receiveNum: 0,
        // 未扫描
        unComplete:{},
        // 已扫描
        complete:{},
        // 工单
        order: {},
        // 工单ID
        orderId: null,
        // 血液类型
        bloodTypes:[],
        // 当前选中tab页名称
        selectedLabelSlots: '2',
        // tab页信息
        tabs: [{
            label: "未扫描", //tab页名称
            value: "1", //值
            num: 0, //数量
          },
          {
            label: "已扫描",
            value: "2",
          },
        ],
      };
    },
    methods:{
      // 跳转血制品列表
      goToList(bloods){
        uni.navigateTo({
          url: `../blood_list/blood_list?bloods=${encodeURIComponent(JSON.stringify(bloods))}`,
        });
      },
      // 点击tab页切换
      clickHandler(value) {
        this.selectedLabelSlots = value;
      },
      //获取血液类型
      getBloodTypes(){
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post('/common/common/getDictionary', {
          "type": "list",
          "key": "blood_trans_type"
        }).then(res => {
          this.bloodTypes = res;
          this.getInfo();
        })
      },
      //获取页面信息
      getInfo(){
        post('/transflow/checkData', {
          "type": "blood",
          "orderId": this.orderId
        }).then(res => {
          uni.hideLoading();
          if(res.state == 200){
            console.log(res);
            this.order = res.data.dto;
            this.complete = res.data.complete;
            this.unComplete = res.data.unComplete;
            this.receiveNum = 0;
            for (let key in this.unComplete) {
              this.tabs[0].num += this.unComplete[key].length;
            }
            for (let key in this.complete) {
              this.receiveNum += this.complete[key].length;
            }
          }else{
            uni.showToast({
              icon: "none",
              title: "请求失败！",
            });
          }
        })
      },
      // 继续扫描
      Scanning_again() {
        if (!this.SMFlag) {
          return;
        }
        this.SMFlag = false;
        SM().then((ress1) => {
          this.hand_scanning_common(ress1, 'scan');
        }).catch(err => {
          this.SMFlag = true;
        });
      },
      // 手动输入和扫码公共方法
      hand_scanning_common(ress1, type) {
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        //检验二维码的有效性
        post("/dept/scanning", {
          content: ress1,
        }).then((result) => {
          this.SMFlag = true;
          if (result.state == 200 || result.state == 201) {
            let codes = result.code;
            if (codes) {
              post("/transflow/scanBind", {type: 'blood',orderId: this.queryObj.orderId, code: ress1}).then((ress) => {
                uni.hideLoading();
                if (ress.state == 200) {
                  //扫描标本后会自动调用摄像头，继续扫描，直到status不是200
                  setTimeout(()=>{
                    if (type === 'scan') {
                      this.Scanning_again();
                    }
                  },500)
                  //todo
                  uni.redirectTo({
                    url: `../scanning_blood_process/scanning_blood_process?orderId=${this.queryObj.orderId}&bloodDTO=${encodeURIComponent(JSON.stringify(ress.data.dto))}&scanCount=${ress.data.scanCount}&status=${ress.state}&scanOrHand=${type}`,
                  });
                } else {
                  uni.redirectTo({
                    url: `../scanning_blood_process/scanning_blood_process?orderId=${this.queryObj.orderId}&status=${ress.state}&scanOrHand=${type}&qrcode=${ress1}`,
                  });
                }
              });
            } else {
              uni.hideLoading();
            }
          } else {
            uni.hideLoading();
            uni.showToast({
              icon: "none",
              title: "请求失败！",
            });
          }
        });
        // ------------------------------
      },
      // 核对完成
      checkComplete(){
        uni.showModal({
          title: "提示",
          content: "请确认是否核对完成？",
          success: (result) => {
            if (result.confirm) {
              console.log("用户点击确定");
              let postData = {
                "type": "blood",
                "orderId": this.orderId
              };
              uni.showLoading({
                title: "加载中",
                mask: true,
              });
              post("/transflow/checkComplete", postData).then((ress) => {
                uni.hideLoading();
                if (ress.state == 200) {
                  uni.navigateTo({
                    url: `../receiptpage/receiptpage`,
                  });
                } else {
                  uni.showToast({
                    icon: "none",
                    title: "请求失败！",
                  });
                }
              });
            } else if (result.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      }
    },
    onLoad(options) {
      console.log(options, 'options');
      this.queryObj = options;
      this.orderId = options.orderId;
      this.getBloodTypes();
    },
    onShow() {
      this.SMFlag = true;
    },
  }
</script>

<style lang="less" scoped>
.checkBlood{
  width: 100%;
  height: 100%;
  position: relative;
  padding-top: 96rpx;
  .page_tab {
    width: 100%;
    height: 96rpx;
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
  
    .page_tab_bar {
      flex: 1;
      font-size: 36rpx;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
  
      &:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2rpx;
        width: 100%;
        background-color: transparent;
      }
  
      .tab_num {
        color: #ff3b53;
        margin-left: 8rpx;
      }
  
      .more {
        position: absolute;
        right: 20rpx;
        width: 40rpx;
        height: 4rpx;
        border-top: 2px solid #49b856;
        border-bottom: 2px solid #49b856;
        background-color: #49b856;
        padding: 5px 0;
        background-clip: content-box;
      }
  
      .more_picker {
        position: absolute;
        right: 0;
        height: 100%;
        opacity: 0;
      }
  
      &.active {
        color: #49b856;
  
        &:after {
          background-color: #49b856;
        }
      }
    }
  }
  .title{
    text-align: center;
    padding: 20rpx 0;
    border: 2rpx solid #e5e9ed;
  }
  .order{
    text-indent: 2em;
    padding: 20rpx 0;
  }
  .bloodType{
    width: 90%;
    border: 2rpx solid #e5e9ed;
    margin: 0 auto;
    margin-top: 40rpx;
    .bloodTypeItem{
      padding: 20rpx 0;
      text-indent: 2em;
      .link{
        text-decoration: underline;
      }
    }
  }
  .foot_btn_spe {
    line-height: 88rpx;
    height: 100rpx;
    margin-top: 40rpx;
    text-align: center;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  
    &::after {
      content: '';
      flex: 1;
    }
  
    view {
      height: 88rpx;
      width: 48%;
      margin: 0 1%;
      background-image: linear-gradient(to right, #72c172, #3bb197);
      color: #fff;
      border-radius: 8rpx;
      font-size: 32rpx;
      margin-top: 16rpx;
    }
  }
}
</style>