FE-lab-xcx/pages_safetyCheck/component/checkItemModule.vue

<!-- 
	//参数说明
 	propsData参数下 
 	infoType 为必要参数 0.检查 1.复查 2.整改
 	checkType 为必要参数 infoType为0时 代表检查状态 为1时代表复查状态 为2时代表整改状态
 	
 	//检查时的必要参数 
 	manageId 
 	
 	//复查时的必要参数 
 	planId 
 	planSetId 
 	subId 
  
 	
 	//隐患时的必要参数 
 	planId 
 	planSetId 
 	subId 
	
	//引用方法
	
	<checkItemModule :propsData="propsData" v-if="checkItemModuleType"></checkItemModule>
	
	import {
		checkItemModule
	} from '@/pages/checkItemModule.vue'
	
	components: {
		checkItemModule
	},
	
	checkItemModuleType:false,
	propsData:{
		infoType:0,
		manageId:'1839113478692855815',
		checkType:0,
		planId:'',
		planSetId:'',
		subId:'',
		searchValue:'',
	},
	
	checkItemModuleButton(type,item){
		if(type = 'open'){
			this.$set(this,'propsData',{
				infoType:0,
				manageId:'1839113478692855815',
				checkType:0,
				planId:'',
				planSetId:'',
				subId:'',
				searchValue:'',
			});
			this.$set(this,'checkItemModuleType',true);
		}else if(type = 'out'){
			this.$set(this,'checkItemModuleType',false);
			this.$set(this,'propsData',{});
		}else if(type = 'submit'){
			console.log('已选中-item', item)
		}
	},
 -->
<template>
	<view class="checkItemModule">
		<!-- 标签选项卡 -->
		<view class="checkItemModule-title-box">
			<view class="checkItemModule-title-p" @click="checkTitleButton(1)"
				:class="pageType==1?'.checkItemModule-title-check':''">
				<view>关键字</view>
				<view></view>
			</view>
			<view class="checkItemModule-title-p" @click="checkTitleButton(2)"
				:class="pageType==2?'.checkItemModule-title-check':''">
				<view>按层级</view>
				<view></view>
			</view>
		</view>
		<!-- 输入搜索模块 -->
		<view class="input-max-big-box" v-if="pageType == 1">
			<view class="input-big-box">
				<view class="input-box">
					<view class="left-icons">
						<uni-icons color="#A2A2A2" type="search" size="20"></uni-icons>
					</view>
					<input type="text" v-model="searchValue" placeholder="搜索检查项" name="search" @confirm='getSearchValue'
						confirm-type='search' maxlength="50" placeholder-style="color: #666;font-size:24rpx;">
					<view class="left-icons" @click="delSearchValue()">
						<uni-icons color="#0183FA" type="clear" size="20"></uni-icons>
					</view>
				</view>
				<view class="out-button" @click="outButton()">取消</view>
			</view>
			<view class="input-for-max-box">
				<view class="for-box" @click="checkItemButton(item)" v-for="(item,index) in dataList" :key="index">
					{{item.hazardCheckCode}}{{item.hazardCheckName}}
				</view>
			</view>
		</view>
		<!-- 级联选择模块 -->
		<view class="check-max-big-box" v-if="pageType == 2">
			<view class="check-big-box">
				<view v-if="levelListOne" @click="cascadeButton(1)">一级检查</view>
				<view v-if="levelListTwo" @click="cascadeButton(2)">二级检查</view>
				<view v-if="levelListThree" @click="cascadeButton(3)">三级检查</view>
			</view>
			<view class="check-for-max-box">
				<view v-for="(item,index) in checkList" :key="index" @click="cascadeItemButton(item)">
				{{item.hazardCheckCode?item.hazardCheckCode:item.code}} {{item.hazardCheckName?item.hazardCheckName:item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		securityCheckOptionList,
		securityAppCheckSetOptionList,
		securityAppCheckDangerReviewList,
		securityAppCheckDangerGetCheckDangerSubId,
	} from '@/pages_safetyCheck/api/index.js'
	export default {
		name: "checkItemModule",
		props: {
			propsData: {}
		},
		data() {
			return {
				//父级参数
				optionData: {},
				//选项卡状态
				pageType: 1,
				//输入框数据
				searchValue: "",
				//输入搜索返回列表
				dataList: [],
				//一级-级联数据
				levelListOne:null,
				//二级-级联数据
				levelListTwo:null,
				//三级-级联数据
				levelListThree:null,
				//级联列表
				checkList: [],
			}
		},
		onLoad() {

		},
		mounted() {
			this.$set(this, 'optionData', JSON.parse(JSON.stringify(this.propsData)));
			this.$nextTick(() => {
				this.securityCheckOptionList();
			})
		},
		methods: {
			//输入框查询
			getSearchValue(){
				if (this.optionData.infoType == 0) {
					//检查
					this.securityAppCheckSetOptionList();
				} else if (this.optionData.infoType == 1) {
					//复查
					this.securityAppCheckDangerReviewList();
				} else if (this.optionData.infoType == 2) {
					//整改
					this.securityAppCheckDangerGetCheckDangerSubId();
				}
			},
			//选项卡title切换
			checkTitleButton(type) {
				if (this.pageType != type) {
					this.$set(this, 'pageType', type);
				}
			},
			//退出页面
			outButton() {
				this.$parent.checkItemModuleButton('out');
			},
			//清除输入框内容
			delSearchValue() {
				if (this.searchValue) {
					this.$set(this, 'searchValue', '');
					this.$set(this, 'dataList', []);
					this.getSearchValue();
				}
			},
			//级联等级点击
			cascadeButton(type){
				if(type == 1){
					this.$set(this,'levelListTwo',null);
					this.$set(this,'levelListThree',null);
					this.$set(this,'checkList',this.levelListOne.children);
				}else if(type == 2){
					this.$set(this,'levelListThree',null);
					this.$set(this,'checkList',this.levelListTwo.children);
				}
			},
			//级联检查项选中
			cascadeItemButton(item){
				if(item.level == 1){
					this.$set(this,'levelListTwo',item);
					this.$set(this,'checkList',item.children);
				}else if(item.level == 2){
					this.$set(this,'levelListThree',item);
					this.$set(this,'checkList',item.children);
				}else if(item.level == 3){
					this.checkItemButton(item);
				}
			},
			//选中检查项
			checkItemButton(item) {
				this.$parent.checkItemModuleButton('submit',item);
			},
			//基础检查项检查
			async securityCheckOptionList() {
				let self = this;
				const {
					data
				} = await securityCheckOptionList({});
				if (data.code == 200) {
					let maxList = this.getCascaderData(JSON.parse(JSON.stringify(data.data)), 2)
					this.$nextTick(() => {
						if(this.pageType == 1){
							this.securityAppCheckSetOptionList(maxList);
						}else if(this.pageType == 2){
							this.securityAppCheckDangerReviewList(maxList);
						}else if(this.pageType == 3){
							this.securityAppCheckDangerGetCheckDangerSubId(maxList);
						}
					})
				}
			},
			/********************** 检查相关查询 **********************/
			async securityAppCheckSetOptionList(maxList) {
				let self = this;
				const {
					data
				} = await securityAppCheckSetOptionList({
					manageId: this.optionData.manageId,
					checkStatus: this.optionData.checkType,
					searchValue: this.searchValue
				});
				if (data.code == 200) {
					//级联数据
					if (maxList) {
						let minList = JSON.parse(JSON.stringify(data.data.records))
						this.cascadeData(maxList,minList);
					}
					//查询数据
					this.$set(this,'dataList',JSON.parse(JSON.stringify(data.data.records)));
				}
			},
			/********************** 复查相关查询 **********************/
			async securityAppCheckDangerReviewList(maxList) {
				let self = this;
				const {
					data
				} = await securityAppCheckDangerReviewList({
					planId: this.optionData.planId,
					planSetId: this.optionData.planSetId,
					subId: this.optionData.subId,
					appReviewStatus: this.optionData.checkType,
					searchValue: this.searchValue
				});
				if (data.code == 200) {
					//级联数据
					if (maxList) {
						let minList = JSON.parse(JSON.stringify(data.data.records))
						this.cascadeData(maxList,minList);
					}
					//查询数据
					this.$set(this,'dataList',JSON.parse(JSON.stringify(data.data.records)));
				}
			},
			/********************** 整改相关查询 **********************/
			async securityAppCheckDangerGetCheckDangerSubId(maxList) {
				let self = this;
				const {
					data
				} = await securityAppCheckDangerGetCheckDangerSubId({
					planId: this.optionData.planId,
					planSetId: this.optionData.planSetId,
					subId: this.optionData.subId,
					appReviewStatus: this.optionData.checkType,
					searchValue: this.searchValue
				});
				if (data.code == 200) {
					//级联数据
					if (maxList) {
						let minList = JSON.parse(JSON.stringify(data.data.records))
						this.cascadeData(maxList,minList);
					}
					//查询数据
					this.$set(this,'dataList',JSON.parse(JSON.stringify(data.data.records)));
				}
			},
			/********************** 处理级联数据 **********************/
			cascadeData(maxList,minList) {
				for (let i = 0; i < maxList.length; i++) {
					for (let o = 0; o < maxList[i].children.length; o++) {
						for (let x = 0; x < minList.length; x++) {
							if (maxList[i].children[o].id == minList[x].hazardCheckPro2) {
								minList[x].level = 3;
								if (maxList[i].children[o].children) {
									maxList[i].children[o].children.push(minList[x])
								} else {
									maxList[i].children[o].children = [minList[x]]
								}
							}
						}
					}
				}
				let list = this.getCascaderData(JSON.parse(JSON.stringify(maxList)),3)
				this.$nextTick(()=>{
					this.$set(this,'levelListOne',JSON.parse(JSON.stringify({level:0,children:list})));
					this.$set(this,'checkList',JSON.parse(JSON.stringify(list)));
				})
			},
			/********************** 检查项格式处理 **********************/
			getCascaderData(list, type) {
				let self = this
				for (let i = 0; i < list.length; i++) {
					if (list[i].level == type) {
						delete list[i].children
					} else if (list[i].children) {
						if (list[i].children[0]) {
							list[i].children = self.getCascaderData(list[i].children, type)
						} else {
							list.splice(i, 1)
							i--
						}
					} else {
						list.splice(i, 1)
						i--
					}
				}
				for (let i = 0; i < list.length; i++) {
					if (list[i].level == type) {
						delete list[i].children
					} else if (list[i].children) {
						if (list[i].children[0]) {
							list[i].children = self.getCascaderData(list[i].children, type)
						} else {
							list.splice(i, 1)
							i--
						}
					} else {
						list.splice(i, 1)
						i--
					}
				}
				for (let i = 0; i < list.length; i++) {
					if (list[i].level == type) {
						delete list[i].children
					} else if (list[i].children) {
						if (list[i].children[0]) {
							list[i].children = self.getCascaderData(list[i].children, type)
						} else {
							list.splice(i, 1)
							i--
						}
					} else {
						list.splice(i, 1)
						i--
					}
				}
				return list
			},
		}
	}
</script>


<style lang="stylus" scoped>
	.checkItemModule {
		position: fixed;
		top:0;
		left:0;
		height: 100%;
		width: 100%;
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background-color: #fff;

		.checkItemModule-title-box {
			display: flex;
			height: 100rpx;
			background-color: #FFFFFF;
			border-bottom:1rpx solid #dedede;

			.checkItemModule-title-p {
				width: 140rpx;
				height: 100rpx;

				>view:nth-child(1) {
					color: #333;
					text-align: center;
					font-size: 29rpx;
					line-height: 30rpx;
					margin:35rpx 0 20rpx 0;
				}

				>view:nth-child(2) {
					width: 56rpx;
					height: 6rpx;
					border-radius: 14rpx;
					margin: 0 auto;
				}
			}

			.checkItemModule-title-check {
				>view:nth-child(1) {
					color: #0183FA;
				}

				>view:nth-child(2) {
					background: #0183FA;
				}
			}
		}

		.input-max-big-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;

			.input-big-box {
				height: 104rpx;
				display: flex;
				background-color: #fff;
				border-bottom: 1rpx solid #E0E0E0;

				.input-box {
					width: 611rpx;
					height: 69rpx;
					border: 1px solid #E0E0E0;
					display: flex;
					border-radius: 35px 35px 35px 35px;
					margin: 17rpx 0 17rpx 21rpx;

					.left-icons {
						padding: 15rpx 18rpx 0 22rpx;
					}

					.right-icons {
						padding: 15rpx 15rpx 0 22rpx;
					}

					>input {
						flex: 1;
						height: 69rpx;
						line-height: 69rpx;
					}
				}

				.out-button {
					width: 100rpx;
					margin: 17rpx 0 17rpx 15rpx;
					text-align: center;
					line-height: 69rpx;
					color: #0183FA;
					font-size: 29rpx;
				}
			}

			.input-for-max-box {
				flex: 1;
				display: flex;
				flex-direction: column;
				overflow-y: scroll;
				background-color: #fff;

				.for-box {
					margin: 0 21rpx;
					font-size: 29rpx;
					line-height: 40rpx;
					padding: 20rpx 0;
					background-color: #fff;
					border-bottom: 1rpx solid #E0E0E0;
				}
			}
		}

		.check-max-big-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;

			.check-big-box {
				height: 70rpx;
				display: flex;
				background-color: #fff;
				border-bottom: 1rpx solid #E0E0E0;
				>view{
					width:200rpx;
					line-height:70rpx;
					text-align: center;
					color:#333;
					font-size:29rpx;
				}
				.checkView{
					color:#0183FA;
				}
			}

			.check-for-max-box {
				flex: 1;
				display: flex;
				flex-direction: column;
				overflow-y: scroll;
				background-color: #fff;
				>view{
					font-size:25rpx;
					line-height:70rpx;
					margin:0 21rpx;
					border-bottom:1px solid #dedede;
				}
			}
		}
	}
</style>