zy-wechat/pages/scanning_blood_process/scanning_blood_process.vue

<template>
  <view class="Scanning_Result">
    <view class="Scanning_top" v-if="status == 200">
      <view class="Scanning_top_icon">
        <view>
          <view class="red fweight speNum"> {{ speNum }} </view>
        </view>
      </view>
      <view class="Scanning_top_text">
        <view class="text1"> 操作成功 </view>
      </view>
    </view>
    
    <view class="Scanning_top" v-else-if="status == 400">
      <view class="Scanning_top_icon">
        <text class="cubeic-close icon_transport transport-shibai"></text>
      </view>
      <view class="Scanning_top_text">
        <view class="text1"> 操作失败 </view>
        <view class="text1 f30"> 血袋号：{{bloodDTO.bloodCode || '无'}} </view>
        <view class="text1 f30"> 产品码：{{bloodDTO.productCode || '无'}} </view>
        <view class="text1 f30"> 患者：{{bloodDTO.patientName}}<text v-if="bloodDTO.patientNo">({{bloodDTO.patientNo}})</text> </view>
        <view class="text1 f30"> 您扫描的血制品与工单的终点科室不一致，是否收录到此工单？ </view>
        <view class="text1 f30 mt8">
          <checkbox-group @change="forceDeptInputBlur">
            <checkbox value="forceDept" :checked="forceDept" color="#49b856" />勾选后本次扫描过程中不再出现此提示
          </checkbox-group>
        </view>
      </view>
    </view>

    <view class="Scanning_top" v-else>
      <view class="Scanning_top_icon">
        <text class="cubeic-close icon_transport transport-shibai"></text>
      </view>
      <view class="Scanning_top_text">
        <view class="text1"> 操作失败 </view>
        <view class="text1 f30" v-if="queryObj.qrcode"> 扫描内容：{{queryObj.qrcode}} </view>
      </view>
    </view>

    <view class="Scanning_cont" v-if="status == 200">
      <view>{{bloodDTO.type ? bloodDTO.type.name : "无"}}<text v-if="bloodDTO.type">({{bloodDTO.bloodCode||'无'}}) {{ bloodDTO.volume?bloodDTO.volume+'ML':'无' }}</text></view>
      <view>采血日期：<text v-if="bloodDTO.printDate">{{bloodDTO.printDate | formatDate('yyyy-MM-dd hh:mm')}}</text><text v-else>无</text></view>
      <view>有效期至：<text v-if="bloodDTO.overDate">{{bloodDTO.overDate | formatDate('yyyy-MM-dd hh:mm')}}</text><text v-else>无</text></view>
      <view>
        血型：{{ bloodDTO.aboType||'无' }}
        &emsp;&emsp;
        RH(D)：<text>{{bloodDTO.rhType || '无'}}</text>
      </view>
      <view>患者：<text>{{ bloodDTO.patientName }}<text v-if="bloodDTO.hosNum">({{ bloodDTO.hosNum }})</text></text></view>
      <view>申请科室：{{ bloodDTO.applyDeptDTO?bloodDTO.applyDeptDTO.dept:'无' }}</view>
    </view>

    <view class="foot_btn_spe">
      <view class="btn2" style="width: 98%;" @click="input_common(queryObj.qrcode, 'scan', true)" v-if="status == 400"> 收录到此工单 </view>
      <view class="btn1" @click="Scanning_again()"> 继续扫描 </view>
      <view class="btn3" @click="hand_again()">手动录入</view>
      <view class="btn2" style="width: 98%;" @click="countAndCheck()"> 清点核对 </view>
    </view>

    <!-- 手动查询弹窗 -->
    <handViewBlood v-if="speModels.disjunctor" :title="speModels.title" :disjunctor="speModels.disjunctor"
      @ok="speOk" @cancel="speCancel">
    </handViewBlood>
  </view>
</template>
<script>
  import {
    get,
    post,
    SM,
    webHandle
  } from "../../http/http.js";
  export default {
    data() {
      return {
        forceDept: false,
        bloodDTO:{},
        status: 200,
        speNum: 0,
        // 手动查询弹窗model
        speModels: {
          disjunctor: false,
        },
        SMFlag: true,
        queryObj: {}, //路由传递过来的数据
      };
    },
    methods: {
      // 录入到工单
      input_common(ress1, type, isFlag = false){
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        let isInput = this.forceDept ? this.forceDept : (isFlag || undefined);
        post("/transflow/scanBind", {type: 'blood',orderId: this.queryObj.orderId, code: ress1, forceDept: isInput}).then((ress) => {
          uni.hideLoading();
          if (ress.state == 200 && ress.data.state != 400) {
            //扫描标本后会自动调用摄像头，继续扫描，直到status不是200
            setTimeout(()=>{
              if (type === 'scan') {
                this.Scanning_again(this.forceDept);
              }
            },500)
            //todo
            if(this.forceDept){
              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=200&scanOrHand=${type}&isInput=1`,
              });
            }else{
              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=200&scanOrHand=${type}`,
              });
            }
          }else if (ress.state == 200 && ress.data.state == 400 && ress.data.orderState != 5) {
            if(this.forceDept){
              uni.redirectTo({
                url: `../scanning_blood_process/scanning_blood_process?orderId=${this.queryObj.orderId}&bloodDTO=${encodeURIComponent(JSON.stringify(ress.data.data))}&status=400&scanOrHand=${type}&qrcode=${ress1}&isInput=1`,
              });
            }else{
              uni.redirectTo({
                url: `../scanning_blood_process/scanning_blood_process?orderId=${this.queryObj.orderId}&bloodDTO=${encodeURIComponent(JSON.stringify(ress.data.data))}&status=400&scanOrHand=${type}&qrcode=${ress1}`,
              });
            }
          } else {
            if(this.forceDept){
              uni.redirectTo({
                url: `../scanning_blood_process/scanning_blood_process?orderId=${this.queryObj.orderId}&status=500&scanOrHand=${type}&qrcode=${ress1}&isInput=1`,
              });
            }else{
              uni.redirectTo({
                url: `../scanning_blood_process/scanning_blood_process?orderId=${this.queryObj.orderId}&status=500&scanOrHand=${type}&qrcode=${ress1}`,
              });
            }
          }
        });
      },
      // 勾选后本次扫描过程中不再出现此提示
      forceDeptInputBlur(e) {
        this.forceDept = e.detail.value.length > 0;
      },
      // 手动查询-确认
      speOk(data) {
        console.log(data);
        if (!data.id) {
          //没有查询到
          uni.showModal({
            title: '提示',
            content: "没有查询到血袋！",
            showCancel: false,
            success: function(res) {
              if (res.confirm) {
                console.log('用户点击确定');
              } else if (res.cancel) {
                console.log('用户点击取消');
              }
            }
          });
          return;
        }
        this.speModels.disjunctor = false;
        this.hand_scanning_common(data.bloodCode, 'hand');
      },
      // 手动查询-取消
      speCancel() {
        this.speModels.disjunctor = false;
      },
      // 手动查询弹窗
      showHandViewSpecimen() {
        this.speModels = {
          title: '填写血袋号',
          disjunctor: true,
        }
      },
      // 手动录入
      hand_again() {
        this.showHandViewSpecimen();
      },
      // 手动输入和扫码公共方法
      hand_scanning_common(ress1, type, isFlag = false) {
        // ----------------
        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) {
              // 判断是否有多个血袋号 start
              post("/transflow/scanCheckList", {
                type: 'blood',
                code: codes,
              }).then((res) => {
                if (res.state == 200) {
                  res.data = res.data || [];
                  if(res.data.length > 1){
                    if(this.forceDept){
                      uni.navigateTo({
                        url: `/pages/bloodSelect/bloodSelect?qrcode=${codes}&navigateTo=scanning_blood_process&orderId=${this.queryObj.orderId}&scanOrHand=${type}&isInput=1`,
                      });
                    }else{
                      uni.navigateTo({
                        url: `/pages/bloodSelect/bloodSelect?qrcode=${codes}&navigateTo=scanning_blood_process&orderId=${this.queryObj.orderId}&scanOrHand=${type}`,
                      });
                    }
                  }else{
                    // 继续扫描
                    this.input_common(ress1, type, isFlag);
                  }
                } else {
                  uni.hideLoading();
                  uni.showToast({
                    icon: "none",
                    title: res.msg || "接口获取数据失败！",
                  });
                }
              });
              // 判断是否有多个血袋号 end
            } else {
              uni.hideLoading();
            }
          } else {
            uni.hideLoading();
            uni.showToast({
              icon: "none",
              title: result.info || "接口获取数据失败！",
            });
          }
        });
        // ------------------------------
      },
      // 继续扫描
      Scanning_again(isFlag = false) {
        if (!this.SMFlag) {
          return;
        }
        this.SMFlag = false;
        SM().then((ress1) => {
          this.hand_scanning_common(ress1, 'scan', isFlag);
        }).catch(err => {
          this.SMFlag = true;
        });
      },
      // 清点核对
      countAndCheck() {
        if(this.forceDept){
          uni.navigateTo({
            url: `../check_blood/check_blood?orderId=${this.queryObj.orderId}&isInput=1`,
          });
        }else{
          uni.navigateTo({
            url: `../check_blood/check_blood?orderId=${this.queryObj.orderId}`,
          });
        }
      },
    },
    onShow() {
      this.SMFlag = true;
    },
    onLoad(options) {
      console.log(options, "result", this.forceDept);
      if(options.isInput == 1){
        this.forceDept = true;
      }else{
        this.forceDept = false;
      }
      if (options.status == 200 && options.scanOrHand === 'hand') {
        this.hand_again();
      }
      if (options.status == 200 && options.scanOrHand === 'scan' && options.isSelect == 1) {
        //扫描标本后会自动调用摄像头，继续扫描，直到status不是200
        // isSelect是多血袋选择后自动调用
        setTimeout(()=>{
          this.Scanning_again();
        },500)
      }
      
      this.queryObj = options;
      if (options.bloodDTO) {
        this.bloodDTO = JSON.parse(options.bloodDTO);
      }
      this.status = options.status;
      this.speNum = options.scanCount;
      // #ifdef APP-PLUS
      webHandle("no", "app");
      // #endif
      // #ifdef H5
      webHandle("no", "wx");
      // #endif
    },
  };
</script>
<style lang="less" scoped>
  /deep/ uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
    border-color: #49b856 !important;
  }
  .Scanning_Result {
    padding: 0 20rpx;

    .Scanning_top {
      .Scanning_top_icon {
        width: 140rpx;
        height: 140rpx;
        margin: 0 auto;
        border-radius: 50%;
        line-height: 140rpx;
        
        .speNum{
          text-align: center;
          font-size: 140rpx;
        }

        .cubeic-ok {
          font-size: 140rpx;
          color: #35b34a;
        }

        .cubeic-close {
          font-size: 140rpx;
          color: #ff3b53;
        }
      }

      .Scanning_top_text {
        .text1 {
          font-size: 48rpx;
          text-align: center;
        }

        .success_tips {
          color: red;
          font-size: 30rpx;
        }
      }
    }

    .Scanning_cont {
      font-size: 32rpx;
      text-align: center;

      view {
        margin-bottom: 16rpx;
      }

      .Scanning_cont_center {
        text-align: center;
      }

      .text {
        margin-top: 24rpx;
        color: #35b34a;
      }

      .text1 {
        margin-top: 24rpx;
        color: #ff3b53;
      }
    }

    .foot_btn {
      line-height: 88rpx;
      height: 100rpx;
      margin-top: 40rpx;
      display: flex;
      justify-content: center;

      .btn1,
      .btn2,
      .btn3 {
        height: 88rpx;
        flex: 1;
        margin: 0 1%;
        background-image: linear-gradient(to right, #72c172, #3bb197);
        color: #fff;
        border-radius: 8rpx;
        font-size: 32rpx;
        margin-top: 16rpx;
        text-align: center;
      }
    }
    .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>