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 class="top-right">{{num}}/{{allNum}}</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 @click="paClick(row)" class="top-check1" color="#42b983" :value="row.floor.id" :checked="row.checked" />
							<view class="right-ab">{{row.num}}/{{row.children.length}}</view>
							<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 @click="chClick(item)" 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:[],
				pid:[],
				cid:[],
				allNum:0,
				num:0
      };
    },
    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){
				this.num = 0
				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)
							}
						}
						item.num = item.children.filter(x=>x.checked).length
						this.num += item.num 
					})
				}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 = []
							}
						}
						item.num = item.children.filter(x=>x.checked).length
						this.num += item.num 
					})
				}
				// 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,
				})
			},
			paClick(row){
				if(row.checked){
					row.checked = false
				}else{
					row.checked = true
				}
				for(let item of row.children){
					if (row.checked) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
				this.num = 0
				for (let i of this.dataList) {
					i.num = i.children.filter(x=>x.checked).length
					this.num += i.num
				}	
				console.log(44545454,this.dataList)	
			},
			chClick(row){
				this.num = 0
				if(row.checked){
					row.checked = false
				}else{
					row.checked = true
				}
				for (let i of this.dataList) {
					i.num = i.children.filter(x=>x.checked).length
					this.num += i.num
				}	
			},
      // 确认
      confirm() {
				let data = uni.getStorageSync("setDepts")
				let dataList = []
				this.dataList.forEach(i=>{
					for(let i of i.children){
						if(i.checked){
							dataList.push(i)
						}
					}
				})
        console.log(3333,dataList);
				if (dataList.length === 0) {
          this.models = {
            disjunctor: true,
            title: "提示",
            content: "请选择至少一个楼层",
            icon: "warn",
            operate: {
              know: "知道了",
            },
          };
        } else {
					let allData = null
					let data = uni.getStorageSync("setDepts")
					if(data){
						data.forEach(i=>{
							dataList.push(i)
						})
						allData = dataList
					}else{
						allData = dataList
					}
					let newList2 = []
					let newList3 = []
					allData.forEach((item) => {
						if (!newList2.includes(item.id)) {
							newList2.push(item.id)
						}
					})
					newList2.forEach(i=>{
						newList3.push(allData.find(x=> x.id == i))
					})
					// console.log(555,newList3)
					uni.setStorageSync("setDepts", newList3)
          uni.navigateTo({
            url: `../setDept/setDept?configName=${this.configName}&id=${this.id}&changedept=${this.changedept}`,
          });
        }
      },

			// 选择楼栋
			itemClick(item){

			},
			changeColl(){
				
			},
      // 选择楼栋
      checkboxChange: function(e) {

      },
      //获取楼栋列表
      getBuildings() {
				this.allNum = 0
				let data = uni.getStorageSync("floorList")
				data.forEach((item, index)=>{
					item.num = 0
					item.floor.collapseValue = []
					item.floor.id = item.floor.id.toString() + 'parent'
					item.checked = false
					this.allNum += item.children.length
					if(item.children && item.children.length>0){
						for(let i of item.children){
							i.checked = false
							i.id = i.id.toString()
							i.floor.id = i.floor.id.toString() + 'parent'
						}
					}
       })
			 console.log(3232131,this.allNum)
       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;
		.top-right{
			position: absolute;
			right: 40rpx;
		}
	}
	.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;
	}
	.right-ab{
		position: absolute;
		right: 64rpx;
		top: 28rpx;
		z-index: 999;
		color: #303133;
	}
	.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>