zy-wechat/pages/startOrderSignBloodDetail/startOrderSignBloodDetail.vue

<template>
  <view class="Scanning_Result">
    <view class="Scanning_top">
      <view class="title1">{{queryObj.deptName}}</view>
      <view>{{dataList.patientTotalCount}}人</view>
      <view>{{dataList.bloodTotalCount}}袋</view>
    </view>

    <view class="Scanning_cont">
      <view class="list" v-for="(v2, i2) of dataList.children" :key="i2">
        <view class="list_top">
          <text class="newicon newicon-a-ziyuan7"></text>
          <view class="title1 ellipsis">
            <text>{{v2.patientName}}</text><text>{{v2.hosNum}}</text>
          </view>
          <view>
            <text>{{v2.count}}袋</text>
          </view>
        </view>
        <view class="list_bottom_wrap" v-for="(v3, i3) of v2.children" :key="i3" @click="v3.checked = !v3.checked">
          <view class="list_bottom">
            <view class="title1 ellipsis">
              <text class="ellipsis">{{v3.bloodCode}}</text>
              <text>{{v3.volume}}{{v3.unit}}</text>
            </view>
            <view class="title2">
              <text>{{v3.count}}袋</text>
              <text class="newicon newicon-a-ziyuan3" :class="{active: v3.checked}"></text>
            </view>
          </view>

          <view class="list_detail" v-if="v3.checked">
            <view class="list_detail_item" v-for="(v4, i4) of v3.children" :key="i4">
              <view class="list_detail_item_title">
                <text>{{v4.bloodCode}}{{v4.productCode ? '+' + v4.productCode : ''}}</text>
                <text class="blue serialNumber">{{i4 + 1}}</text>
              </view>
              <view class="list_detail_item_content">
                <view>
                  <text>血型：{{v4.aboType}}</text>
                  <text class="ml16">RH(D)：{{v4.rhType}}</text>
                </view>
                <view>
                  <text>失效时间：{{v4.overDate | formatDate('yyyy-MM-dd hh:mm')}}</text>
                  <!-- <text class="zhi">至</text> -->
                  <!-- <text></text> -->
                </view>
                <view class="list_detail_item_content_status">
                  <text class="blue">{{v4.state ? v4.state.name : ''}}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

    </view>

    <view class="foot_btn_spe">
      <view class="btn3" @click="goBack()">返回</view>
    </view>
  </view>
</template>
<script>
  import {
    get,
    post,
    SM,
    webHandle
  } from "../../http/http.js";
  export default {
    data() {
      return {
        dataList: {},
        queryObj: {}, //路由传递过来的数据
      };
    },
    methods: {
      // 返回
      goBack() {
        uni.navigateBack();
      },
      //获取页面信息
      getInfo(){
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post('/transflow/scanInfo', {
          "code": "nb",
          "id": 0,
          "type": "bloodTake",
          "deptOrderDetails": true,
          "bloodIds": this.queryObj.bloodIds,
        }).then(res => {
          uni.hideLoading();
          if(res.state == 200){
            let dataList = res.data.data || {};
            // 第一层
            let dataNewList = {
              bloodTotalCount: 0,
              patientTotalCount: 0,
              children: [],
            };

            for (let key2 in dataList) {
              let value2 = dataList[key2];
              console.log(value2);
              // 第三层,第四层
              let array3 = [];
              for (let key3 in value2) {
                let value3 = value2[key3];
                console.log(dataNewList);
                array3.push({
                  checked: false,
                  bloodCode: key3.split('|')[0],
                  volume: key3.split('|')[1],
                  unit: key3.split('|')[2],
                  count: value3.length,
                  children: value3,
                });
              }
              // 第二层
              dataNewList.children.push({
                patientName: key2.split('|')[0],
                hosNum: key2.split('|')[1],
                count: array3.reduce((pre, current) => pre + current.count, 0),
                children: array3,
              });
            }
            // 计算第一层血袋数量
            dataNewList.bloodTotalCount = dataNewList.children.reduce((pre, current) => pre + current.count, 0);
            // 计算第一层患者数量
            dataNewList.patientTotalCount = Object.keys(dataList).length;
            console.log(dataNewList)
            // 赋值
            this.dataList = dataNewList;
          }else{
            uni.showToast({
              icon: "none",
              title: res.msg || "接口获取数据失败！",
            });
          }
        })
      },

    },
    onLoad(options) {
      console.log(options, "result");
      this.queryObj = options;
      this.getInfo();
      // #ifdef APP-PLUS
      webHandle("no", "app");
      // #endif
      // #ifdef H5
      webHandle("no", "wx");
      // #endif
    },
  };
</script>
<style lang="less" scoped>
  .Scanning_Result {
    padding: 16rpx;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f5f7fb;

    .ml16{
      margin-left: 16rpx;
    }

    .blue{
      color: #49b856!important;
    }

    .ellipsis{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .Scanning_top {
      margin-top: 16rpx;
      background-color: #fff;
      color: #49b856;
      font-weight: bold;
      font-size: 30rpx;
      display: flex;
      align-items: center;
      line-height: 1.1;

      view{
        padding: 16rpx 20rpx;
        flex: 1;
        &.title1{
          flex: 4;
          word-break: break-all;
        }
      }
    }

    .Scanning_cont {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow-y: auto;

      .list{
        background-color: #fff;
        margin-top: 16rpx;
        line-height: 1;
        .list_top{
          display: flex;
          font-weight: bold;
          color: #000;
          font-size: 30rpx;
          position: relative;
          padding-bottom: 16rpx;

          .newicon-a-ziyuan7{
            position: absolute;
            left: 12rpx;
            top: 14rpx;
            font-size: 32rpx;
            color: #49b856;
          }
          view{
            padding: 16rpx 20rpx 0 0;
            flex: 1;
            &.title1{
              padding: 16rpx 20rpx 0 54rpx;
              flex: 5;
              text:first-of-type{
                margin-right: 16rpx;
              }
            }
          }
        }
        .list_bottom{
          display: flex;
          font-size: 25rpx;
          color: #767676;
          view{
            padding: 0 20rpx 16rpx 5rpx;
            flex: 1;
            &.title1{
              padding: 0 20rpx 16rpx 54rpx;
              flex: 5;
              display: flex;
            }
            &.title2{
              display: flex;
              align-items: center;
            }
            .newicon-a-ziyuan3{
              color: #cdcdcd;
              font-size: 12rpx;
              margin-left: 20rpx;
              transform: rotate(180deg);
              transition: all 0.5s;
              &.active{
                transform: rotate(0deg);
              }
            }
          }
        }

        .list_detail{
          border: 2rpx solid #C6C6C6;
          padding: 22rpx 30rpx 0;
          font-size: 26rpx;
          .list_detail_item{
            margin-bottom: 22rpx;
            padding: 10rpx 0;
            background-color: #F3FAF7;
            .list_detail_item_title{
              padding: 0 17rpx 6rpx;
              border-bottom: 2rpx solid #C3C3C3;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .serialNumber{
                font-size: 38rpx;
              }
            }
            .list_detail_item_content{
              padding: 0 17rpx;

              view{
                line-height: 35rpx;
                margin-top: 17rpx;
                &:first-of-type{
                  margin-top: 9rpx;
                }
              }

              .zhi{
                margin-left: 60rpx;
                margin-right: 60rpx;
              }

              .list_detail_item_content_status{
                display: flex;
                justify-content: flex-end;
                text{
                  font-weight: bold;
                }
              }
            }
          }
        }
      }
    }

    .foot_btn_spe {
      line-height: 64rpx;
      height: 64rpx;
      margin-bottom: 40rpx;
      text-align: center;
      display: flex;
      justify-content: space-between;

      view {
        height: 64rpx;
        flex: 1;
        margin: 0 1%;
        background-image: linear-gradient(to right, #72c172, #3bb197);
        color: #fff;
        border-radius: 8rpx;
        font-size: 26rpx;
      }
    }
  }
</style>