zy-wechat/pages/medicalWaste/medicalWasteBind/medicalWasteBind.vue

<template>
  <view class="Scanning_Result">
    <view class="Scanning_top">
      <view class="Scanning_top_icon">
        <text class="cubeic-ok icon_transport transport-duigou"></text>
      </view>
      <view class="Scanning_top_text">
        请填写以下信息绑定条码
      </view>
    </view>

    <view class="Scanning_cont yf">
      <view class="Scanning_cont_list">
        <view>序号：{{queryObj.qrcode}}</view>
        <view class="red">{{id ? '已绑定' : ''}}</view>
      </view>
      <view class="Scanning_cont_list">
        <view class="Scanning_cont_list_title">
          科室：
        </view>
        <view class="Scanning_cont_list_desc" v-if="disabledDept">
          <text>{{deptName}}</text>
        </view>
        <view class="Scanning_cont_list_desc" v-else>
          <input disabled class="deptInput" placeholder="请搜索科室" placeholder-style="color:#C3BFBF;font-size:28rpx;padding:8rpx;line-height:1;" v-model="deptName" />
          <view class="mask" @click="changeDept"></view>
          <text class="icon_transport transport-sousuo"></text>
          <text class="newicon newicon-saoma" @click="scanDept"></text>
        </view>
      </view>
      <view class="Scanning_cont_list">
        <view class="Scanning_cont_list_title">
          医废类型：
        </view>
        <view class="Scanning_cont_list_desc">
          <picker @change="bindMedicalWasteType" :value="medicalWasteTypeIndex" :range="medicalWasteTypes" range-key="typeName">
            <view class="typeInput">{{medicalWasteTypes[medicalWasteTypeIndex] ? medicalWasteTypes[medicalWasteTypeIndex].typeName : ''}}</view>
            <text class="newicon newicon-xiala1"></text>
          </picker>
        </view>
      </view>
      <view class="Scanning_cont_list">
        <view class="Scanning_cont_list_title">
          重量：
        </view>
        <view class="Scanning_cont_list_desc">
          <input class="deptInput" type="digit" placeholder-style="color:#C3BFBF;font-size:28rpx;padding:8rpx;line-height:1;" @input="inputWeight" v-model="weight" />kg
        </view>
      </view>
      <view class="Scanning_cont_list">
        <view class="Scanning_cont_list_title">
          备注：
        </view>
        <view class="Scanning_cont_list_desc">
          <textarea class="remarkInput" placeholder-style="color:#C3BFBF;font-size:28rpx;padding:8rpx;line-height:normal;" v-model="remark" placeholder="请输入备注信息" />
        </view>
      </view>
    </view>

    <view class="foot_btn">
      <view class="btn" @click="scanNext(true)"> 继续扫描 </view>
      <view class="btn" @click="scanNext(false)"> 核对回收 </view>
    </view>
  </view>
</template>
<script>
  import {
    get,
    post,
    SM,
    webHandle
  } from "../../../http/http.js";
  export default {
    data() {
      return {
        id: null,
        disabledDept: false,
        SMFlag: true,
        remark: '',
        deptId: null,
        deptName: '',
        weight: '',
        medicalWasteTypes: [],
        medicalWasteTypeIndex: 0,
        hosId: uni.getStorageSync('userData').user.currentHospital.id,
        queryObj: {}, //路由传递过来的数据
      };
    },
    onShow() {
      this.SMFlag = true;
    },
    methods: {
      // 扫科室
      scanDept() {
        if (!this.SMFlag) {
          return;
        }
        this.SMFlag = false;
        SM().then((content) => {
          uni.showLoading({
            title: "加载中",
            mask: true,
          });
          //检验二维码的有效性(扫码前必须验证)
          post("/dept/scanning", {
              content,
            })
            .then((result) => {
              this.SMFlag = true;
              // 200检测通过，201没有有效期也通过。
              if (result.state == 200 || result.state == 201) {
                let data = {
                  code: result.code, //二维码
                };
                
                post("/medicalWaste/scanByCode", {
                  code: result.code,
                  hosId: this.hosId,
                })
                  .then((res) => {
                    uni.hideLoading();
                    if (res.status == 200 && res.data) {
                      this.deptId = res.data.id;
                      this.deptName = res.data.dept;
                    } else {
                      uni.showToast({
                        icon: "none",
                        title: res.msg || "接口获取数据失败！",
                      });
                    }
                  });
              } else {
                uni.hideLoading();
                uni.showToast({
                  icon: "none",
                  title: result.info || "接口获取数据失败！",
                });
              }
            })
        }).catch(err => {
          this.SMFlag = true;
        });
      },
      scanNestCommonGoOn(isScan = false){
        if(isScan){
          // 继续扫描
          SM().then((content) => {
            uni.showLoading({
              title: "加载中",
              mask: true,
            });
            //检验二维码的有效性(扫码前必须验证)
            post("/dept/scanning", {
                content,
              })
              .then((result) => {
                // 200检测通过，201没有有效期也通过。
                if (result.state == 200 || result.state == 201) {
                  // 判断是否是医废
                  post("/medicalWaste/continueScan", { code: result.code, hosId: this.hosId })
                    .then((res) => {
                      uni.hideLoading();
                      if (res.status == 200) {
                        this.disabledDept = true;
                        if(res.wasteInfo){
                          // 编辑
                          this.id = res.wasteInfo.id;
                          this.queryObj.qrcode = res.wasteInfo.clinicalWasteSn;
                          this.weight = res.wasteInfo.weight;
                          this.medicalWasteTypeIndex = this.medicalWasteTypes.findIndex(v => v.id == res.wasteInfo.clinicalWasteType.id);
                          this.remark = res.wasteInfo.remark;
                          this.deptName = res.wasteInfo.dept.dept;
                          this.deptId= res.wasteInfo.dept.id;
                        } else {
                          // 新增
                          this.id = undefined;
                          this.queryObj.qrcode = res.code;
                          this.weight = '';
                          this.medicalWasteTypeIndex = 0;
                          this.remark = '';
                        }
                      } else {
                        uni.showToast({
                          icon: "none",
                          title: res.msg || "接口获取数据失败！",
                        });
                      }
                    });
                } else {
                  uni.hideLoading();
                  uni.showToast({
                    icon: "none",
                    title: result.info || "接口获取数据失败！",
                  });
                }
              })
          }).catch(err => {});
        }else{
          // 核对回收
          uni.navigateTo({
            url: `/pages/medicalWaste/medicalWasteBindCheck/medicalWasteBindCheck?deptName=${this.deptName}&deptId=${this.deptId}`,
          });
        }
      },
      // 继续扫描
      scanNextCommon(isScan = false){
        let postData = {
          wasteInfo: {
            clinicalWasteType: this.medicalWasteTypes[this.medicalWasteTypeIndex],
            clinicalWasteSn: this.queryObj.qrcode,
            weight: +this.weight,
            deptId: +this.deptId,
            remark: this.remark,
            hosId: this.hosId,
            id: this.id || undefined,
          }
        }
        console.log(postData);
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post("/medicalWaste/bindInfo", postData)
          .then((result1) => {
            uni.hideLoading();
            if (result1.status == 200) {
              this.scanNestCommonGoOn(isScan);
            } else {
              uni.showToast({
                icon: "none",
                title: result1.msg || "接口获取数据失败！",
              });
            }
          });
      },
      // 继续扫描-判断重量
      scanNext(isScan = false) {
        if(!this.deptId){
          uni.showModal({
            title: "提示",
            content: "请选择科室！",
            showCancel: false,
            success: function(res) {
              if (res.confirm) {
                console.log("用户点击确定");
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
          return;
        }
        if(this.medicalWasteTypeIndex == 0){
          uni.showModal({
            title: "提示",
            content: "请选择医废类型！",
            showCancel: false,
            success: function(res) {
              if (res.confirm) {
                console.log("用户点击确定");
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
          return;
        }
        if(this.weight === ''){
          uni.showModal({
            title: "提示",
            content: "请填写重量！",
            showCancel: false,
            success: function(res) {
              if (res.confirm) {
                console.log("用户点击确定");
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
          return;
        }
        if(!(/^\d+(\.\d{1,2})?$/.test(this.weight))){
          uni.showModal({
            title: "提示",
            content: "重量只支持最多两位小数！",
            showCancel: false,
            success: function(res) {
              if (res.confirm) {
                console.log("用户点击确定");
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
          return;
        }
        let postData = {
            clinicalWasteTypeId: this.medicalWasteTypes[this.medicalWasteTypeIndex].id,
            weight: +this.weight,
            deptId: +this.deptId,
            hosId: this.hosId,
        }
        console.log(postData);
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post("/medicalWaste/checkLimit", postData)
          .then((result) => {
            uni.hideLoading();
            if (result.status == 200) {
              this.scanNextCommon(isScan);
            }else if (result.status == 201) {
              uni.showModal({
              	title: '提示',
              	content: result.msg,
              	success: (res) => {
              		if (res.confirm) {
              			console.log('用户点击确定');
                    this.scanNextCommon(isScan);
              		} else if (res.cancel) {
              			console.log('用户点击取消');
              		}
              	}
              });
            } else {
              uni.showToast({
                icon: "none",
                title: result.msg || "接口获取数据失败！",
              });
            }
          });
      },
      // 选择科室
      changeDept() {
        uni.navigateTo({
          url: `/pages/search/search?type=medicalWasteBind&code=${this.queryObj.qrcode}&remark=${this.remark}&weight=${this.weight}&medicalWasteTypeIndex=${this.medicalWasteTypeIndex}`,
        });
      },
      inputWeight(){
        this.weight = this.weight ? Math.abs(parseFloat(this.weight)) : '';
      },
      bindMedicalWasteType: function(e) {
          console.log('picker发送选择改变，携带值为', e.detail.value)
          this.medicalWasteTypeIndex = e.detail.value
      },
      getMedicalWasteType(){
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post("/simple/data/fetchDataList/clinicalWasteType", {
          idx: 0,
          sum: 9999,
          clinicalWasteType: {
            hosId: this.hosId
          }
        }).then((result) => {
          uni.hideLoading();
          if (result.status == 200) {
            let medicalWasteTypes = result.list || [];
            medicalWasteTypes.unshift({id: 0, typeName: '请选择医废类型'});
            this.medicalWasteTypes = medicalWasteTypes;
          } else {
            uni.showToast({
              icon: "none",
              title: result.msg || "接口获取数据失败！",
            });
          }
        });
      },
    },
    onLoad(options) {
      console.log(options, "result");
      this.queryObj = options;
      if (options.deptId && options.deptName) {
        this.deptId = options.deptId;
        this.deptName = options.deptName;
        this.remark = options.remark;
        this.weight = options.weight;
        this.medicalWasteTypeIndex = options.medicalWasteTypeIndex;
      }
      this.getMedicalWasteType();
      // #ifdef APP-PLUS
      webHandle("no", "app");
      // #endif
      // #ifdef H5
      webHandle("no", "wx");
      // #endif
    },
  };
</script>
<style lang="less" scoped>
  .Scanning_Result {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    .yf /deep/ .uni-input-input[disabled]{
      text-overflow: ellipsis;
    }
    .Scanning_top {
      flex-shrink: 0;
      .Scanning_top_icon {
        padding-top: 26rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

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

        .text1 {
          font-size: 40rpx;
          font-weight: bold;
        }
      }
      .Scanning_top_text{
        text-align: center;
        font-size: 34rpx;
        font-weight: bold;
        padding: 26rpx 0 38rpx 0;
      }
    }

    .Scanning_cont {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      width: 710rpx;
      margin: 0 20rpx;
      padding: 6rpx;
      background-color: #FBFCFE;
      box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0,0,0,0.16);
      font-size: 28rpx;
      line-height: 1;
      .Scanning_cont_list{
        font-weight: bold;
        padding: 27rpx 55rpx;
        border-bottom: 1rpx solid #D9D9D9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 32rpx;
        &:last-of-type{
          border-bottom: none;
        }
        .Scanning_cont_list_title{
          font-size: 32rpx;
        }
        .Scanning_cont_list_desc{
          display: flex;
          align-items: center;
          position: relative;
          .mask{
            content: '';
            position: absolute;
            top: 0;
            right: 50rpx;
            bottom: 0;
            left: 0;
          }
          .transport-sousuo{
            position: absolute;
            right: 56rpx;
            color:#C3BFBF;
          }
          .newicon-saoma{
            color: #50b249;
          }
          .newicon-xiala1{
            position: absolute;
            top: 50%;
            right: 16rpx;
            color:#C3BFBF;
            transform: translateY(-50%);
          }
          .deptInput{
            width: 213rpx;
            height: 56rpx;
            border: 1rpx solid #D9D9D9;
            margin-right: 12rpx;
            padding: 8rpx;
            font-size: 28rpx;
            padding-right: 50rpx;
            box-sizing: border-box;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          .typeInput{
            font-size: 28rpx;
            width: 260rpx;
            height: 56rpx;
            border: 1rpx solid #D9D9D9; 
            padding: 8rpx;
            padding-right: 50rpx;
            box-sizing: border-box;
            line-height: 38rpx;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          .remarkInput{
            font-size: 28rpx;
            width: 500rpx;
            height: 174rpx;
            line-height: mormal;
            border: 1rpx solid #D9D9D9; 
            padding: 8rpx;
            box-sizing: border-box;
          }
        }
      }
    }

    .foot_btn {
      flex-shrink: 0;
      line-height: 88rpx;
      display: flex;
      justify-content: center;
    
      .btn {
        height: 88rpx;
        flex: 1;
        margin-right: 1%;
        background-image: linear-gradient(to right, #72c172, #3bb197);
        color: #fff;
        border-radius: 8rpx;
        font-size: 28rpx;
        text-align: center;
        &:last-of-type{
          margin-right: 0;
        }
      }
    }
  }
</style>