zy-wechat/pages/formManagementBuilding/formManagementBuilding.vue

<template>
  <view class="formManagementWechat">
    <view class="page_tab">
      <view class="page_tab_bar active">
        <view class="tab_dept">楼栋信息</view>
      </view>
    </view>
    <view v-if="zxzData.length == 0" class="zwsj">
      <image class="zwsj-img" mode="widthFix" src="../../static/img/zanwushuju.png"></image>
      <view class="zwsj-txt">暂无数据</view>
    </view>
    <view v-if="zxzData.length" class="page_items">
      <scroll-view class="page_items_scroll" scroll-y>
        <view class="page_item_wrap" v-for="(item, index) of zxzData" :key="index">
          <view class="page_item">
            <view class="L"></view>
            <view class="R"></view>
            <view class="page_item_top">
              <view class="page_item_top_L">
                {{item.name || '无'}}
              </view>
              <view class="send_wrap"></view>
            </view>
            <view class="page_item_cont">
              <view class="page_item_conts">
              </view>
            </view>
            <view class="page_item_btn" hover-class="seimin-btn-hover" @click="itemInfo(item.id)">详情</view>
          </view>
          <view class="L-l"></view>
          <view class="R-l"></view>
        </view>
      </scroll-view>
    </view>
    <!-- 底部 -->
    <view class="foot_btn2 footerPadding">
      <view class="btn2" @click="goBack">返回</view>
    </view>
  </view>
</template>
<script>
  import {
    get,
    post,
    webHandle
  } from "../../http/http.js";
  export default {
    data() {
      return {
        hosId: uni.getStorageSync("userData").user.currentHospital.id,
        options: {},
        //列表数据
        zxzData: [],
      };
    },
    methods: {
      // 返回
      goBack() {
        uni.navigateBack();
      },
      // 进入详情页
      itemInfo(id) {
        // #ifdef H5
        document.body.removeEventListener("touchmove", this.stop, {
          passive: false,
        });
        // #endif
        uni.navigateTo({
          url: `../formManagementDept/formManagementDept?id=${this.options.id}&buildingId=${id}`,
        });
      },
      //表单列表获取
      getList() {
        let data = {
          reserveFormId: this.options.id,
        };
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        // 请求列表数据
        post("/nurse/reserveView", data).then((res) => {
          uni.hideLoading();
          if (res.state == 200) {
            const data = res.data || {};
            if(Object.keys(data).length > 0){
              // 楼栋-楼层-科室-工单 转成前端可用的 楼栋-科室-工单
              let buildings = Object.keys(data)
              .map(v => ({
                id: v,
                name: Object.values(Object.values(data[v])[0])[0][0][3],
                departments: (
                  Object.values(data[v]).map(vv => Object.keys(vv).map(vvv => ({id: vvv, name: vv[vvv][0][6], orders: vv[vvv], checked: false, isDisabled: vv[vvv].every(vvvv => !(vvvv[12] == 2 || (!vvvv[8] && vvvv[12] != 2)))})))
                ).flat()
              }));
              console.log(buildings)
              this.zxzData = buildings;
            }else{
              this.zxzData = [];
            }
          } else {
            this.zxzData = [];
            uni.showToast({
              icon: "none",
              title: "请求失败！",
            });
          }
        });
      },
      // 阻止浏览器滑动
      stop(e) {
        e.preventDefault();
      },
    },
    onLoad(options) {
      console.log(options);
      this.options = options;
      this.getList();
      // #ifdef APP-PLUS
      webHandle("no", "app");
      // #endif
      // #ifdef H5
      webHandle("no", "wx");
      // #endif
    },
    onShow() {
      // #ifdef H5
      document.body.addEventListener("touchmove", this.stop, {
        passive: false,
      });
      // #endif
    },
    onHide() {
      // #ifdef H5
      document.body.removeEventListener("touchmove", this.stop, {
        passive: false,
      });
      // #endif
    },
  };
</script>
<style lang="less" scoped>
  .formManagementWechat {
    width: 100%;
    height: 100%;
    position: relative;
    
    .foot_btn2 {
      position: fixed;
      bottom: 0;
      right: 20rpx;
      left: 20rpx;
      line-height: 66rpx;
      height: 100rpx;
      border-top: 2rpx solid #e5e9ed;
      background: #f9fafb;
      display: flex;
      justify-content: space-between;
    
      .btn2 {
        height: 66rpx;
        width: 100%;
        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;
      }
    
      .btn3 {
        height: 66rpx;
        width: 48%;
        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;
      }
    }

    .icon_transport {
      color: #49b856;
      font-size: 50rpx;

      &.colorRed {
        color: red;
        font-size: 40rpx;
      }
    }

    .page_tab {
      width: 100%;
      height: 96rpx;
      display: flex;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 999;

      .page_tab_bar {
        flex: 1;
        font-size: 36rpx;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        &:after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          height: 2rpx;
          width: 100%;
          background-color: transparent;
        }

        .tab_dept {
          position: relative;

          .changeDept {
            white-space: nowrap;
            margin: 0;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translate(105%, -50%);
            padding: 0 0.5em;
            line-height: 2;
          }
        }

        &.active {
          color: #49b856;

          &:after {
            background-color: #49b856;
          }
        }
      }
    }

    .zwsj {
      position: absolute;
      left: 50%;
      top: 180rpx;
      transform: translateX(-50%);

      .zwsj-img {
        width: 560rpx;
      }

      .zwsj-txt {
        font-size: 36rpx;
        font-weight: 700;
        margin-top: 20rpx;
        text-align: center;
      }
    }

    .page_items {
      height: calc(100vh - 284rpx);
      padding: 0 20rpx;
      padding-top: 96rpx;

      .page_items_scroll {
        height: 100%;

        .page_item_wrap {
          position: relative;
          margin-bottom: 32rpx;

          .page_item {
            margin-bottom: 16rpx;
            max-height: 276rpx;
            background: #fff;
            border-radius: 8rpx;
            overflow: hidden;
            border: 2rpx solid #e5e9ed;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .L {
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              background: #f9fafb;
              position: absolute;
              left: -24rpx;
              top: 68rpx;
              border: 2rpx solid #e5e9ed;
            }

            .R {
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              background: #f9fafb;
              position: absolute;
              float: right;
              right: -24rpx;
              top: 68rpx;
              border: 2rpx solid #e5e9ed;
            }

            .page_item_top {
              height: 86rpx;
              border-bottom: 2rpx dashed #e5e9ed;
              padding: 0 16rpx;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .send_wrap {
                display: flex;
                justify-content: space-between;
                align-items: center;
              }

              .sendBack {
                button {
                  font-size: 28rpx;
                  height: 52rpx;
                  line-height: 52rpx;
                  margin: 0;
                  color: rgb(7, 134, 60);
                }
              }

              .page_item_top_L {
                height: 100%;
                float: left;
                display: flex;
                align-items: center;
                line-height: 88rpx;

                .L_time {
                  color: #6cc076;
                  font-size: 32rpx;
                }
              }

              .page_item_top_R {
                height: 40rpx;
                float: right;
                line-height: 40rpx;
                font-size: 24rpx;
                padding: 0 8rpx;
                background-color: red;
                color: #fff;
              }
            }

            .page_item_cont {
              min-height: 30rpx;
              max-height: 344rpx;
              padding: 0 16rpx;
              text-align: left;
              position: relative;

              .page_item_conts {
                color: rgb(102, 102, 102);
                font-size: 28rpx;
                display: flex;
                align-items: center;
                min-height: 30rpx;
                max-height: 344rpx;

                view {
                  margin-bottom: 10rpx;
                  margin-left: 40rpx;

                  &:first-of-type {
                    margin-left: 0;
                  }
                }

                text {
                  color: #49b856;
                }

                .num {
                  float: right;
                }
              }
            }

            .page_item_btn {
              height: 88rpx;
              background-image: linear-gradient(to right, #72c172, #3bb197);
              border-radius: 8rpx;
              line-height: 88rpx;
              color: #fff;
              font-size: 36rpx;
              font-weight: 700;
              text-align: center;
            }
          }

          .L-l {
            width: 2rpx;
            height: 40rpx;
            background: #f9fafb;
            position: absolute;
            left: 20rpx;
            top: 72rpx;
            display: none;
          }

          .R-l {
            width: 2rpx;
            height: 40rpx;
            background: #f9fafb;
            position: absolute;
            right: 20rpx;
            top: 72rpx;
            display: none;
          }
        }
      }
    }
  }
</style>