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

<template>
  <view class="Scanning_Result">
    <view class="Scanning_top">
      <view class="Scanning_top_icon">
        医废出库
      </view>
      <view class="Scanning_top_text">
        请确认填写以下医废信息，进行核对
      </view>
    </view>

    <scroll-view scroll-y class="Scanning_cont">
      <view class="Scanning_cont_list">
        <view class="Scanning_cont_list_head">
          <view class="Scanning_cont_list_title">运输内容</view>
        </view>
        <view class="Scanning_cont_list_body1">
          <view class="Scanning_cont_list_body1_item" v-for="item in wastList" :key="item.id">
            <view class="column1">{{item.name}}</view>
            <view class="column2">{{item.wasteWeight}}kg</view>
            <view class="column3">{{item.wasteCount}}袋</view>
          </view>
          <view class="Scanning_cont_list_body1_item">
            <view class="column1">总计</view>
            <view class="column2">{{wasteWeightTotal}}kg</view>
            <view class="column3">{{wasteCountTotal}}袋</view>
          </view>
          <view class="Scanning_cont_list_body1_item" v-for="(item, index) in storageUnits" :key="index">
            <view class="Scanning_cont_list_title">
              {{item}}装数量：
            </view>
            <view class="Scanning_cont_list_desc" v-if="item == '箱'">
              <input class="numInput" type="digit" v-model="totalBox" @blur="blurItem(item)" />{{item}}
            </view>
            <view class="Scanning_cont_list_desc" v-else-if="item == '桶'">
              <input class="numInput" type="digit" v-model="totalBucket" @blur="blurItem(item)" />{{item}}
            </view>
          </view>
          <view class="Scanning_cont_list_body1_item">
            <view class="Scanning_cont_list_title">
              凭证编号：
            </view>
            <view class="Scanning_cont_list_desc">
              <input class="textInput" v-model="credentialsNumber" placeholder="请输入凭证编号" />
            </view>
          </view>
        </view>
      </view>

      <view class="Scanning_cont_list">
        <view class="Scanning_cont_list_head">
          <view class="Scanning_cont_list_title">运输信息</view>
        </view>
        <view class="Scanning_cont_list_body2">
          <view class="Scanning_cont_list_body2_item">
            <view class="Scanning_cont_list_title">
              运输单位：
            </view>
            <view class="Scanning_cont_list_desc">
              <picker @change="bindTransCompany" :value="transCompanyIndex" :range="transCompanyList" range-key="name">
                <view class="typeInput">{{transCompanyList[transCompanyIndex] ? transCompanyList[transCompanyIndex].name : ''}}</view>
                <text class="newicon newicon-xiala1"></text>
              </picker>
            </view>
          </view>

          <view class="Scanning_cont_list_body2_item">
            <view class="Scanning_cont_list_title">
              联系电话：
            </view>
            <view class="Scanning_cont_list_desc">
              {{mphone}}
            </view>
          </view>

          <view class="Scanning_cont_list_body2_item">
            <view class="Scanning_cont_list_title">
              运营证件号：
            </view>
            <view class="Scanning_cont_list_desc">
              {{businessCode}}
            </view>
          </view>

          <view class="Scanning_cont_list_body2_item" v-if="address">
            <view class="Scanning_cont_list_title">
              单位地址：
            </view>
            <view class="Scanning_cont_list_desc">
              {{address}}
            </view>
          </view>
          <view class="Scanning_cont_list_body2_item">
            <view class="Scanning_cont_list_title">
              司机信息：
            </view>
            <view class="Scanning_cont_list_desc">
              <picker @change="bindLaborer" :value="laborerIndex" :range="laborerList" range-key="name">
                <view class="typeInput">{{laborerList[laborerIndex] ? laborerList[laborerIndex].name : ''}}</view>
                <text class="newicon newicon-xiala1"></text>
              </picker>
            </view>
          </view>
          <view class="Scanning_cont_list_body2_item">
            <view class="Scanning_cont_list_title">
              联系电话：
            </view>
            <view class="Scanning_cont_list_desc">
              {{laborerList[laborerIndex].mphone}}
            </view>
          </view>
          <view class="Scanning_cont_list_body2_item">
            <view class="Scanning_cont_list_title">
              车牌号码：
            </view>
            <view class="Scanning_cont_list_desc">
              <picker @change="bindCarNo" :value="carNoIndex" :range="carNoList" range-key="name">
                <view class="typeInput">{{carNoList[carNoIndex] ? carNoList[carNoIndex].name : ''}}</view>
                <text class="newicon newicon-xiala1"></text>
              </picker>
            </view>
          </view>
        </view>
      </view>

      <view class="Scanning_cont_list">
        <view class="Scanning_cont_list_head">
          <view class="Scanning_cont_list_title">接收单位</view>
        </view>
        <view class="Scanning_cont_list_body2">
          <view class="Scanning_cont_list_body2_item">
            <view class="Scanning_cont_list_title">
              接收公司：
            </view>
            <view class="Scanning_cont_list_desc">
              <picker @change="bindReceiveCompany" :value="receiveCompanyIndex" :range="receiveCompanyList" range-key="name">
                <view class="typeInput">{{receiveCompanyList[receiveCompanyIndex] ? receiveCompanyList[receiveCompanyIndex].name : ''}}</view>
                <text class="newicon newicon-xiala1"></text>
              </picker>
            </view>
          </view>

          <view class="Scanning_cont_list_body2_item">
            <view class="Scanning_cont_list_title">
              许可证编号：
            </view>
            <view class="Scanning_cont_list_desc">
              {{businessCode2}}
            </view>
          </view>
          <view class="Scanning_cont_list_body2_item" v-if="address2">
            <view class="Scanning_cont_list_title">
              单位地址：
            </view>
            <view class="Scanning_cont_list_desc">
              {{address2}}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <view class="foot_btn">
      <view class="btn" @click="goBack()"> 取消 </view>
      <view class="btn" @click="submitOk()"> 确定 </view>
    </view>
    <!-- 弹窗 -->
    <showModel :title="models1.title" :icon="models1.icon" :disjunctor="models1.disjunctor" :content="models1.content"
      @ok="ok1" @cancel="cancel1" :operate="models1.operate"></showModel>
  </view>
</template>
<script>
  import {
    get,
    post,
    SM,
    webHandle
  } from "../../../http/http.js";
  import Big from 'big.js';
  export default {
    data() {
      return {
        laborerIndex: 0,
        laborerList: [{id: 0, name: '请选择司机信息'}],
        carNoIndex: 0,
        carNoList: [{id: 0, name: '请选择车牌号码'}],
        mphone: '',
        businessCode: '',
        businessCode2: '',
        address: '',
        address2: '',
        transCompanyIndex: 0,
        transCompanyList: [],
        receiveCompanyIndex: 0,
        receiveCompanyList: [],
        credentialsNumber: '',
        totalBox: 0,//箱
        totalBucket: 0,//桶
        wasteWeightTotal: 0,
        wasteCountTotal: 0,
        storageUnits: [],
        wastList: [],
        hosId: uni.getStorageSync('userData').user.currentHospital.id,
        queryObj: {}, //路由传递过来的数据
        // 弹窗model
        models1: {
          disjunctor: false,
        },
      };
    },
    methods: {
      submitOk(){
        if(this.transCompanyIndex == 0){
          uni.showModal({
            title: "提示",
            content: "请选择运输单位！",
            showCancel: false,
            success: function(res) {
              if (res.confirm) {
                console.log("用户点击确定");
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
          return;
        }
        if(this.laborerIndex == 0){
          uni.showModal({
            title: "提示",
            content: "请选择司机信息！",
            showCancel: false,
            success: function(res) {
              if (res.confirm) {
                console.log("用户点击确定");
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
          return;
        }
        if(this.carNoIndex == 0){
          uni.showModal({
            title: "提示",
            content: "请选择车牌号码！",
            showCancel: false,
            success: function(res) {
              if (res.confirm) {
                console.log("用户点击确定");
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
          return;
        }
        if(this.receiveCompanyIndex == 0){
          uni.showModal({
            title: "提示",
            content: "请选择接收单位！",
            showCancel: false,
            success: function(res) {
              if (res.confirm) {
                console.log("用户点击确定");
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
          return;
        }
        if(!this.wasteCountTotal){
          uni.showModal({
            title: "提示",
            content: "选择的类型，无医废数据请确认后发起出库！",
            showCancel: false,
            success: function(res) {
              if (res.confirm) {
                console.log("用户点击确定");
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
          return;
        }
        this.showModel1()
      },
      goBack(){
        uni.navigateBack();
      },
      //确定
      ok1() {
        this.models1.disjunctor = false;
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post("/medicalWaste/complete", {
          clinicalWasteTypeIds: this.queryObj.clinicalWasteTypeIds,
          wasteOutInfo:{
            credentialsNumber: this.credentialsNumber,
            totalBox: +this.totalBox,
            totalBucket: +this.totalBucket,
            transportCompany: this.transCompanyList[this.transCompanyIndex],
            receptionCompany: this.receiveCompanyList[this.receiveCompanyIndex],
            hosId: this.hosId,
            driver: this.laborerList[this.laborerIndex],
            carNo: this.carNoList[this.carNoIndex].name,
          }
        }).then((res) => {
          uni.hideLoading();
          if (res.status == 200) {
            uni.showModal({
              title: "提示",
              content: "操作成功",
              showCancel: false,
              success: (result) => {
                if (result.confirm) {
                  console.log("用户点击确定");
                  uni.navigateTo({
                    url: `/pages/receiptpage/receiptpage`,
                  });
                }
              },
            });
          }else{
            uni.showToast({
              icon: "none",
              title: res.msg || "接口获取数据失败！",
            });
          }
        });
      },
      //取消
      cancel1() {
        this.models1.disjunctor = false;
      },
      // 被服回收弹窗
      showModel1() {
        this.models1 = {
          disjunctor: true,
          title: "提示",
          content: `您确认要出库吗？`,
          icon: "warn",
          operate: {
            ok: "确定",
            cancel: "取消",
          },
        };
      },
      getCompanyTransType(){
        post("/common/common/getDictionary", {
          key: 'company_trans_type',
          type: 'list',
        }).then((result) => {
          let company_trans_types = result || [];
          let transCompany = company_trans_types.find(v => v.value == 1);//运输单位
          let receiveCompany = company_trans_types.find(v => v.value == 2);//接收单位
          transCompany && this.getCompany(transCompany);
          receiveCompany && this.getCompany(receiveCompany);
        });
      },
      getCompany(dictionary){
        post("/simple/data/fetchDataList/company", {
          idx: 0,
          sum: 9999,
          company: {
            hosId: this.hosId,
            transType: dictionary,
            busiType: { key: 'company_busi_type', value: '1' },
          }
        }).then((result) => {
          if (result.status == 200) {
            if(dictionary.value == 1){
              // 运输单位
              let transCompanyList = result.list || [];
              transCompanyList.unshift({id: 0, name: '请选择运输单位'});
              this.transCompanyList = transCompanyList;
            } else if(dictionary.value == 2){
              // 接收单位
              let receiveCompanyList = result.list || [];
              receiveCompanyList.unshift({id: 0, name: '请选择接收单位'});
              this.receiveCompanyList = receiveCompanyList;
            }
          } else {
            uni.showToast({
              icon: "none",
              title: result.msg || "接口获取数据失败！",
            });
          }
        });
      },
      blurItem(type){
        if(type == '桶'){
          this.totalBucket = Math.abs(this.totalBucket).toFixed(0);
        }else if(type == '箱'){
          this.totalBox = Math.abs(this.totalBox).toFixed(0);
        }
      },
      bindTransCompany: function(e) {
          console.log('picker发送选择改变，携带值为', e.detail.value)
          this.transCompanyIndex = e.detail.value;
          let transCompany = this.transCompanyList[this.transCompanyIndex];
          let laborerList = transCompany.laborers || [];
          laborerList.unshift({id: 0, name: '请选择司机信息'});
          this.laborerList = laborerList;
          this.laborerIndex = 0;

          let carNoList = transCompany.carNo ? transCompany.carNo.split(',').map((v, index) => ({id: index + 1, name: v})) : [];
          carNoList.unshift({id: 0, name: '请选择车牌号码'});
          this.carNoList = carNoList;
          this.carNoIndex = 0;

          this.mphone = transCompany.mphone;
          this.businessCode = transCompany.businessCode;
          this.address = transCompany.address;
      },
      bindReceiveCompany: function(e) {
          console.log('picker发送选择改变，携带值为', e.detail.value)
          this.receiveCompanyIndex = e.detail.value;
          let receiveCompany = this.receiveCompanyList[this.receiveCompanyIndex];

          this.businessCode2 = receiveCompany.businessCode;
          this.address2 = receiveCompany.address;
      },
      bindLaborer: function(e) {
          console.log('picker发送选择改变，携带值为', e.detail.value)
          this.laborerIndex = e.detail.value;
      },
      bindCarNo: function(e) {
          console.log('picker发送选择改变，携带值为', e.detail.value)
          this.carNoIndex = e.detail.value;
      },
      getInfo(){
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post("/medicalWaste/info", {
          hosId: this.hosId,
          clinicalWasteTypeIds: this.queryObj.clinicalWasteTypeIds,
        }).then((result) => {
          uni.hideLoading();
          if (result.status == 200) {
            this.wastList = result.data || [];
            this.storageUnits = result.storageUnits || [];
            this.wasteWeightTotal = this.wastList.reduce((pre,cur) => Big(pre).plus(cur.wasteWeight), 0);
            this.wasteCountTotal = this.wastList.reduce((pre,cur) => Big(pre).plus(cur.wasteCount), 0);
          } else {
            uni.showToast({
              icon: "none",
              title: result.msg || "接口获取数据失败！",
            });
          }
        });
      },
    },
    onLoad(options) {
      console.log(options, "result");
      this.queryObj = options;
      this.getCompanyTransType();
      this.getInfo();
      // #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;
    .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;
    }
    .numInput{
      width: 110rpx;
      height: 56rpx;
      border: 1rpx solid #D9D9D9;
      margin-right: 12rpx;
      padding: 8rpx;
      font-size: 28rpx;
      box-sizing: border-box;
    }
    .textInput{
      width: 260rpx;
      height: 56rpx;
      border: 1rpx solid #D9D9D9;
      padding: 8rpx;
      font-size: 28rpx;
      box-sizing: border-box;
    }
    .Scanning_top {
      flex-shrink: 0;
      .Scanning_top_icon {
        padding-top: 26rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 40rpx;
        font-weight: bold;

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

        .text1 {
          font-size: 28rpx;
          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{
        padding: 20rpx;
        border-bottom: 1rpx solid #D9D9D9;
        &:last-of-type{
          border-bottom: none;
        }
        .Scanning_cont_list_head{
          display: flex;
          align-items: center;
          .Scanning_cont_list_title{
            position: relative;
            font-size: 30rpx;
            font-weight: bold;
            &::after{
              content: '';
              position: absolute;
              top: 35rpx;
              left: 50%;
              transform: translateX(-50%);
              width: 70rpx;
              height: 10rpx;
              background-color: #49B856;
              border-radius: 6rpx;
            }
          }
        }
        .Scanning_cont_list_body1{
          padding: 18rpx;
          font-size: 28rpx;
          .Scanning_cont_list_body1_item{
            height: 56rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10rpx;
            .column1,.column2,.column3{
              flex: 1;
              text-align: left;
            }
            .column1{
              flex: 2;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .column3{
              text-align: right;
            }
            .Scanning_cont_list_desc{
              display: flex;
              align-items: center;
            }
          }
        }
        .Scanning_cont_list_body2{
          padding: 18rpx;
          font-size: 28rpx;
          .Scanning_cont_list_body2_item{
            height: 56rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10rpx;
            .Scanning_cont_list_title{
              flex-shrink: 0;
            }
            .Scanning_cont_list_desc{
              text-align: right;
              position: relative;
              .newicon-xiala1{
                position: absolute;
                top: 50%;
                right: 16rpx;
                color:#C3BFBF;
                transform: translateY(-50%);
              }
            }
          }
        }
      }
    }

    .foot_btn {
      margin: 57rpx 20rpx 10rpx;
      flex-shrink: 0;
      display: flex;
      justify-content: center;

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