zy-wechat/pages/searchFloor/searchFloor.vue

<template>
  <view class="content">
		<view class="df-fl">
			<view class="df-all">
				<checkbox-group @change="allCheckChange">
					<checkbox value="all" color="#42b983" :checked="allCheck"/>
					<text class="text">全选</text>
				</checkbox-group>
			</view>
			<view class="title">{{name}}</view>
		</view>
    <view class="search-keyword">
      <scroll-view class="keyword-list-box" scroll-y>
				<checkbox-group @change="checkboxChange">
					<view v-for="(row, index) in dataList" :key="index" class="view-box">
							<checkbox class="top-check1" color="#42b983" :value="row.floor.id + 'parent'" :checked="row.checked" />
							<uni-collapse ref="collapse" v-model="row.floor.collapseValue">
								<uni-collapse-item :title="row.floor.floorName + '楼'">
									<view v-for="(item, index) in row.children" :key="item.id">
										<view class="keyword-entry">
											<view class="keyword-text">
												<checkbox class="top-check2" color="#42b983" :value="item.id" :checked="item.checked" />
												<view class="title-2">{{item.dept}}</view>
											</view>
										</view>
									</view>
								</uni-collapse-item>
							</uni-collapse>
					</view>
				</checkbox-group>
      </scroll-view>
    </view>
    <view class="toolbar">
      <view class="back" @click="back()">返回</view>
			<view class="confirm" @click="confirm()">确定</view>
    </view>
    <!-- 弹窗 -->
    <showModel :title="models.title" :icon="models.icon" :disjunctor="models.disjunctor" :content="models.content" @know="know" :operate="models.operate"></showModel>
  </view>
</template>

<script>
  import {
    post,
    webHandle
  } from "../../http/http.js";
  export default {
    data() {
      return {
        type: "", //进入该页面的类型
        configName: "", //快速组合名称
        id: "", //快速组合id
				name:"",
        changedept: 0, //是否从列表过来的切换负责科室
        hosId: "",
        dataList: [],
        //系统设置的科室类型
        sysDeptType: 0,
        quickCombinationDeptType: 0,
        // 弹窗model
        models: {
          disjunctor: false,
        },
				valueColl:false,
				allCheck:false,
				buildIds:[],
				ids:[]
      };
    },
    onLoad(options) {
      this.hosId = uni.getStorageSync("userData").user.currentHospital.id;
      console.log(options, 'options');
			this.name = options.name
			this.id = options.id;
			this.configName = options.configName;
			this.changedept = options.changedept;
      this.getBuildings();
      // #ifdef APP-PLUS
      webHandle("no", "app");
      // #endif
      // #ifdef H5
      webHandle("no", "wx");
      // #endif
    },
		onShow(){
			this.getBuildings();
		},
    methods: {
			// 全选
			allCheckChange(e){
				if(e.detail.value.length>0){
					this.dataList.forEach((item, index)=>{
						item.checked = true
						if(item.children && item.children.length>0){
							for(let i of item.children){
								i.checked = true
								this.buildIds.push(i)
							}
						}
					})
				}else{
					this.dataList.forEach((item, index)=>{
						item.checked = false
						if(item.children && item.children.length>0){
							for(let i of item.children){
								i.checked = false
								this.buildIds = []
							}
						}
					})
				}
				// this.buildIds = this.buildIds.filter(v => v.indexOf('parent')==-1);
				console.log(888,this.buildIds)
			},
      //知道了
      know() {
        this.models.disjunctor = false;
      },
			back(){
				uni.navigateBack({
					delta: 1,
				})
			},
      // 确认
      confirm() {
        // const dataList = this.buildIds.filter(v => v.indexOf('parent')==-1);
        console.log(3333,this.buildIds);
				if (this.buildIds.length === 0) {
          this.models = {
            disjunctor: true,
            title: "提示",
            content: "请选择至少一个楼层",
            icon: "warn",
            operate: {
              know: "知道了",
            },
          };
        } else {
					uni.setStorageSync("setDepts", this.buildIds)
          uni.navigateTo({
            url: `../setDept/setDept?configName=${this.configName}&id=${this.id}&changedept=${this.changedept}`,
          });
        }
      },
			// 选择楼栋
			itemClick(item){
				console.log(3333,item)
			},
			changeColl(){
				
			},
      // 选择楼栋
      checkboxChange: function(e) {
				// this.buildIds = e.detail.value
				this.buildIds = []
				// for (let i of dataList){
				// 	for(let item of i.children){
				// 		for(let x of e.detail.value){
				// 			if(x == item.id){
				// 				this.buildIds.push(i)
				// 			}else{
								
				// 			}
				// 		}
				// 	}
				// }
				
				if(e.detail.value.length>0){
					this.dataList.forEach((item, index)=>{
						if(item.children && item.children.length>0){
							for(let i of item.children){
								if(e.detail.value.includes(i.id)){
									this.buildIds.push(i)
								}
							}
						}
					})
				}
				console.log(888,this.buildIds)
     //    var dataList = this.dataList,
     //        values = e.detail.value;
     //    for (let i of dataList) {
					// for(let item of i.children){
					// 	if (values.includes(item.id)) {
					// 	  this.$set(item, 'checked', true)
					// 	} else {
					// 	  this.$set(item, 'checked', false)
					// 	}
					// }
     //    }
      },
      //获取楼栋列表
      getBuildings() {
				let data = uni.getStorageSync("floorList")
				data.forEach((item, index)=>{
					item.floor.collapseValue = []
					item.floor.id = item.floor.id.toString()
					item.floor.checked = false
					if(item.children && item.children.length>0){
						for(let i of item.children){
							i.checked = false
							i.id = i.id.toString()
						}
					}
       })
			 console.log(3232131,data)
       this.dataList = data || [];
      }
    },
  };
</script>
<style>
	uni-checkbox-group{
	/* 	display: flex;
		align-items: center;
		position: relative; */
	}
	/deep/ .uni-collapse-item__title-box{
		margin-left: 50rpx
	}
</style>
<style scoped lang="less">
  view {
    display: block;
  }
	.df-fl{
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	.df-all{
		position: absolute;
		left: 16rpx;
		.text{
			margin-left: 8rpx;
		}
	}
	.view-box{
		position: relative;
	}
	.top-check1{
		position: absolute;
		left: 0;
		top: 20rpx;
		z-index: 999;
	}
	.top-check2{
		position: absolute;
		left: 0;
		top: 20rpx;
		z-index: 999;
	}
	.title{
		padding: 30rpx;
		font-size: 32rpx;
		text-align: center;
		font-weight: bold;
	}
  // 底部
  .toolbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 30rpx;
		width: 96%;
		margin-left: 2%;
    z-index: 9999;
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
		color: #fff;
		
		.back{
			width: 48%;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			border-radius: 10rpx;
			background-color: #8F939C;
		}
		.confirm{
			width: 46%;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			border-radius: 10rpx;
			background-color: #49B856;
		}
  }

  .search-box {
    width: 95%;
    background-color: rgb(242, 242, 242);
    padding: 15upx 2.5%;
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 0;
  }

  .search-box .mSearch-input-box {
    width: 100%;
  }

  .search-box .input-box {
    width: 85%;
    flex-shrink: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .search-box .search-btn {
    width: 15%;
    margin: 0 0 0 2%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
    font-size: 28upx;
    color: #fff;
    background: linear-gradient(to right, #ff9801, #ff570a);
    border-radius: 60upx;
  }

  .search-box .input-box>input {
    width: 100%;
    height: 60upx;
    font-size: 32upx;
    border: 0;
    border-radius: 60upx;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0 3%;
    margin: 0;
    background-color: #ffffff;
  }

  .placeholder-class {
    color: #9e9e9e;
  }

  .search-keyword {
    width: 100%;
    background-color: rgb(242, 242, 242);
  }

  .keyword-list-box {
    height: calc(100vh - 230rpx);
    padding-top: 10upx;
		// padding: 0 20rpx;
    border-radius: 20upx 20upx 0 0;
    background-color: #fff;
		width: 96%;
		padding-left: 2%;
  }

  .keyword-entry-tap {
    background-color: #eee;
  }

  .keyword-entry {
    width: 94%;
    height: 80rpx;
    margin: 0 3%;
    font-size: 30rpx;
    color: #333;
    display: flex;
    justify-content: start;
    align-items: center;
    border-bottom: solid 1rpx #DEDEDE;
  }

  .keyword-entry image {
    width: 60upx;
    height: 60upx;
  }

  .keyword-entry .keyword-text,
  .keyword-entry .keyword-img {
    height: 80upx;
    display: flex;
    align-items: center;
		position: relative;
  }
	
	.title-2{
		padding-left: 76rpx;
	}
	
  .keyword-entry .keyword-text {
    // width: 90%;
  }

  .keyword-entry .keyword-img {
    width: 10%;
    justify-content: center;
  }

  .keyword-box {
    height: calc(100vh - 110upx);
    border-radius: 20upx 20upx 0 0;
    background-color: #fff;
  }

  .keyword-box .keyword-block {
    padding: 10upx 0;
  }

  .keyword-box .keyword-block .keyword-list-header {
    width: 94%;
    padding: 10upx 3%;
    font-size: 27upx;
    color: #333;
    display: flex;
    justify-content: space-between;
  }

  .keyword-box .keyword-block .keyword-list-header image {
    width: 40upx;
    height: 40upx;
  }

  .keyword-box .keyword-block .keyword {
    width: 94%;
    padding: 3px 3%;
    display: flex;
    flex-flow: wrap;
    justify-content: flex-start;
  }

  .keyword-box .keyword-block .hide-hot-tis {
    display: flex;
    justify-content: center;
    font-size: 28upx;
    color: #6b6b6b;
  }

  .keyword-box .keyword-block .keyword>view {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 60upx;
    padding: 0 20upx;
    margin: 10upx 20upx 10upx 0;
    height: 60upx;
    font-size: 28upx;
    background-color: rgb(242, 242, 242);
    color: #6b6b6b;
  }
</style>