zy-wechat/pages/specimenHandoverNew/specimenHandoverNew.vue

<template>
  <view class="Scanning_Result">
    <view class="Scanning_top">
      <view class="Scanning_top_icon">
        <text class="cubeic-ok newicon newicon-duigou"></text>
        <view class="text1"> 签到成功 </view>
      </view>
      <view class="Scanning_top_text">
        您已到达{{queryObj.dept}}，请核对填写以下标本信息
      </view>
    </view>

    <view class="Scanning_cont">
      <view class="Scanning_cont_head">
        <view class="Scanning_cont_head_item" :class="{active: type == key}" v-for="(item, key) in typeList" :key="item.id" @click="clickTab(key)">
          {{item.name}}
        </view>
      </view>

      <view class="Scanning_cont_list">
        <view class="Scanning_cont_list_item Scanning_cont_list_head">
          <view class="name" v-if="type === 'patient'">
            患者名称<text class="red">({{typeList.patient.titleCount}})</text>
          </view>
          <view class="name" v-if="type === 'specimenDesc'">
            项目名称<text class="red">({{typeList.specimenDesc.titleCount}})</text>
          </view>
					<view class="name" v-if="type === 'speTubeType'">
					  试管类型<text class="red">({{typeList.specimenDesc.titleCount}})</text>
					</view>
					<view class="value" v-if="type === 'speTubeType'">
					  <view>
					    标本数量<text class="red">({{typeList.patient.count}})</text>
					  </view>
					</view>
          <view class="value" v-if="type === 'patient'">
            <view>
              标本数量<text class="red">({{typeList.patient.count}})</text>
            </view>
          </view>
          <view class="value" v-if="type === 'specimenDesc'">
            <view>
              标本数量<text class="red">({{typeList.specimenDesc.count}})</text>
            </view>
          </view>
        </view>
        <scroll-view scroll-y="true" class="Scanning_cont_list_scroll">
          <view class="Scanning_cont_list_item" @click="clickRow(item)" v-for="(item, j) in dataList" :key="j">
            <view class="name" v-if="type === 'patient'">
              {{item.patientname}}
            </view>
            <view class="name" v-if="type === 'specimenDesc'">
              {{item.specimen_desc}}
            </view>
						<view class="name" v-if="type === 'speTubeType'">
						  {{item.tubeTypeName}}
						</view>
						
						<view class="value" v-if="type === 'speTubeType'">
						  <view>
						    {{item.count}}
						  </view>
						</view>
						
            <view class="value" v-if="type != 'speTubeType'">
              <view>
                {{item.count}}
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <view class="foot_btn">
      <view class="btn" @click="goBack()"> 取消 </view>
      <view class="btn" @click="onClick()" v-if="dataList.length"> 确认交接 </view>
    </view>
    <!-- 填写交接人工号弹窗 -->
    <selectAccount @click.stop.native v-if="hosModels.disjunctor" :disjunctor="hosModels.disjunctor" @ok="hosOk"
      @cancel="hosCancel" :content="hosModels.content">
    </selectAccount>
    <!-- 弹窗 -->
    <showModel :title="models.title" :icon="models.icon" :disjunctor="models.disjunctor" :content="models.content"
      @ok="ok" @cancel="cancel" :operate="models.operate"></showModel>
  </view>
</template>
<script>
  import {
    get,
    post,
    SM,
    webHandle
  } from "@/http/http.js";
  export default {
    data() {
      return {
        hosId: uni.getStorageSync('userData').user.currentHospital.id,
        type: 'patient',//patient|specimenDesc
        queryObj: {}, //路由传递过来的数据
        typeList: {
          "patient": {
            id: -1,
            name: '患者标本',
            count: 0,
            titleCount: 0,
          },
					"speTubeType":{
						id: -3,
						name: '试管类型',
						count: 0,
						titleCount: 0,
					},
          "specimenDesc": {
            id: -2,
            name: '检验项目',
            count: 0,
            titleCount: 0,
          }
        },
        dataList: [],
        // 填写交接人工号弹窗model
        hosModels: {
          disjunctor: false,
        },
        // 弹窗model
        models: {
          disjunctor: false,
        },
      };
    },
    methods: {
      ok(){
        this.models.disjunctor = false;
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post("/simple/data/fetchDataList/taskType", {
          "idx": 0,
          "sum": 1,
          "taskType": {
              "hosId": {
                  "id": this.hosId
              },
              "associationType": {
                  "key": "association_types",
                  "value": "specimen"
              }
          }
        }).then((result) => {
          uni.hideLoading();
          if (result.status == 200) {
            if(result.list.length){
              // 标本-运送过程-终点科室-是否填写交接人
              if(result.list[0].carryingCourses[1].handoverSwitch){
                this.showSelectAccount();
              }else{
                this.orderDeptHandler();
              }
            }else{
              uni.showToast({
                icon: "none",
                title: "请配置标本配送任务类型！",
              });
            }
          } else {
            uni.showToast({
              icon: "none",
              title: result.msg || "接口获取数据失败！",
            });
          }
        });
      },
      // 取消
      cancel() {
        this.models.disjunctor = false;
      },
      //核对完成
      allStart() {
        this.models = {
          disjunctor: true,
          title: "提示",
          content: "是否确定交接？",
          icon: "warn",
          operate: {
            ok: "确定",
            cancel: "取消",
          },
        };
      },
      // 填写交接人工号-确认
      hosOk(data) {
        console.log(data);
        const {
          accountName,
          account,
          accountId
        } = data;
        if (!accountName && !account) {
          //没有填写交接人
          uni.showModal({
            title: "提示",
            content: "请填写交接人工号！",
            showCancel: false,
            success: function(res) {
              if (res.confirm) {
                console.log("用户点击确定");
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
          return;
        } else if ((!accountName && account) || (accountName && !account)) {
          //没有填写交接人
          uni.showModal({
            title: "提示",
            content: "请填写正确的交接人工号！",
            showCancel: false,
            success: function(res) {
              if (res.confirm) {
                console.log("用户点击确定");
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
          return;
        }
        this.hosModels.disjunctor = false;
        this.orderDeptHandler(data);
      },
      // 填写交接人工号-取消
      hosCancel() {
        this.hosModels.disjunctor = false;
      },
      // 填写交接人工号弹窗
      showSelectAccount() {
        this.hosModels = {
          content: '确定交接完成，请输入交接人员工号',
          disjunctor: true,
        };
      },
      orderDeptHandler(accountObj){
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post("/workerOrder/ordersSpeSign", {
          deptId: this.queryObj.deptId,
          orderIds: JSON.parse(this.queryObj.ids).toString(),
          handover: accountObj ? accountObj.accountId : undefined
        }).then((result) => {
          uni.hideLoading();
          if (result.state == 200) {
            uni.navigateTo({
              url: `/pages/specimenOrderComplete/specimenOrderComplete?deptName=${this.queryObj.dept}&ids=${this.queryObj.ids}`
            })
          } else {
            uni.showToast({
              icon: "none",
              title: result.msg || "接口获取数据失败！",
            });
          }
        });
      },
      goBack(){
        uni.navigateBack();
      },
      clickTab(key){
        this.type = key;
				this.getInfo(key);
      },
      onClick(){
        this.allStart();
      },
      clickRow(data){
        uni.navigateTo({
          url: `/pages/specimenDetail/specimenDetail?speIds=${data.ids || ''}`
        })
      },
      getInfo(type){
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post("/workerOrder/ordersSpeInfo", {
          type,
          deptId: this.queryObj.deptId,
          orderIds: JSON.parse(this.queryObj.ids).toString(),
        }).then((result) => {
          uni.hideLoading();
          if (result.state == 200) {
            this.typeList[type].count = result.count || 0;
            this.typeList[type].titleCount = result.title || 0;
            if(this.type === type){
              this.dataList = result.data || [];
            }
          } else {
            uni.showToast({
              icon: "none",
              title: result.msg || "接口获取数据失败！",
            });
          }
        });
      },
      initData(){
        this.getInfo('patient');
				// this.getInfo('speTubeType');
    //     this.getInfo('specimenDesc');
      },
    },
		onShow(){
			// #ifdef APP-PLUS
			uni.$off('scan') // 每次进来先 移除全局自定义事件监听器
			// #endif
		},
    onLoad(options) {
      console.log(JSON.parse(options.model), "result");
      this.queryObj = options;
      this.initData();
      // #ifdef APP-PLUS
      webHandle("no", "app");
      // #endif
      // #ifdef H5
      webHandle("no", "wx");
      // #endif
    },
  };
</script>
<style lang="less" scoped>
  .Scanning_Result {
    height: 98vh;
    display: flex;
    flex-direction: column;
    background-color: #fafbfd;
    .Scanning_top {
      flex-shrink: 0;
      .Scanning_top_icon {
        padding-top: 26rpx;
        display: flex;
        justify-content: center;
        align-items: center;

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

        .text1 {
          font-size: 48rpx;
          font-weight: bold;
        }
      }
      .Scanning_top_text{
        text-align: center;
        font-size: 28rpx;
        font-weight: bold;
        padding: 8rpx 0 23rpx 0;
      }
    }

    .Scanning_cont {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      width: 710rpx;
      margin: 0 20rpx;
      background-color: #fff;

      .Scanning_cont_head{
        flex-shrink: 0;
        height: 78rpx;
        display: flex;
        border-top: 1rpx solid #EEEEEE;
        border-bottom: 1rpx solid #EEEEEE;
        .Scanning_cont_head_item{
          flex: 1;
          font-size: 28rpx;
          font-weight: bold;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          &.active{
            color: #49B856;
            &::before{
              content: '';
              width: 70rpx;
              height: 10rpx;
              background-color: #49B856;
              position: absolute;
              left: 50%;
              bottom: 0;
              transform: translateX(-50%);
              border-radius: 6rpx;
            }
          }
          &::after{
            content: '';
            width: 2rpx;
            height: 44rpx;
            background-color: #D1D1D1;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
          &:last-of-type::after{
            opacity: 0;
          }
        }
      }

      .Scanning_cont_list{
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        .Scanning_cont_list_scroll{
          flex: 1;
          min-height: 0;
        }
        .Scanning_cont_list_item{
          height: 70rpx;
          display: flex;
          align-items: center;
          font-size: 28rpx;
          border-bottom: 1rpx solid #CCCCCC;
          &.Scanning_cont_list_head{
            font-weight: bold;
            font-size: 28rpx;
            border-bottom: none;
            flex-shrink: 0;
          }
					
					.underline{
						text-decoration: underline;
					}
					
          .name,
          .value{
            padding: 0 40rpx;
            flex: 1;
          }
          .value {
            view{
              width: 7em;
              text-align: center;
            }
          }
        }
      }
    }

    .foot_btn {
      flex-shrink: 0;
      line-height: 66rpx;
      display: flex;
      justify-content: center;
			padding: 0 20rpx;
			
      .btn {
        height: 66rpx;
        flex: 1;
        margin-right: 4%;
        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>