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' @input="theBlur" maxlength="50"
						placeholder-style="color: #666;font-size:24rpx;">
					<view v-if="searchValue" 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" v-for="(item,index) in dataList" :key="index" v-if="optionData.infoType==0">
					<view class="for-box-n">
						{{item.hazardCheckCode1}}{{item.hazardCheckName1}}
					</view>
					<view class="for-box-n">
						{{item.hazardCheckCode2}}{{item.hazardCheckName2}}
					</view>
					<view class="for-box-n">
						{{item.hazardCheckCode}}{{item.hazardCheckName}}
					</view>
					<view class="for-box-n" @click="checkItemButton(item,item2)"
						v-for="(item2,index2) in item.hazardCheckPointList" v-html="brightenKeyword(item2,searchValue)">
						{{item2}}
					</view>
				</view>
				<view class="for-box" @click="checkItemButton(item,'')" v-for="(item,index) in dataList" :key="index"
					v-if="optionData.infoType==1 || optionData.infoType==2">
					<view class="for-box-n">
						{{item.hazardCheckCode}}{{item.hazardCheckName}}
					</view>
				</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)">
					<view>{{item.hazardCheckCode?item.hazardCheckCode:item.code}}
						{{item.hazardCheckName?item.hazardCheckName:item.name}}
					</view>
					<view v-if="levelListThree">
						{{item.hazardCheckPoint}}
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		securityCheckOptionSelAllList,
		securityAppCheckSetOptionList,
		securityAppCheckSetOptionGetReviewList,
		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)));
			console.log('optionData', this.optionData)
			this.$nextTick(() => {
				this.securityCheckOptionSelAllList();
			})
		},
		methods: {
			theBlur(e) {
				this.searchValue = e.target.value
			},
			//输入框查询
			getSearchValue() {
				if (this.optionData.infoType == 0) {
					//检查
					this.securityAppCheckSetOptionList();
				} else if (this.optionData.infoType == 1) {
					//复查
					this.securityAppCheckSetOptionGetReviewList();
				} 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, item2);

				}
			},
			//选中检查项
			checkItemButton(item, item2) {
				this.$parent.checkItemModuleButton('submit', item, item2);
			},
			//高亮
			brightenKeyword(val, editKeyword) {
				const Reg = new RegExp(editKeyword);
				if (val) {
					const res = val.replace(Reg, `<span style="color: #0183FA;">${editKeyword }</span>`);
					return res;
				}
			},
			//基础检查项检查
			async securityCheckOptionSelAllList() {
				let self = this;
				const {
					data
				} = await securityCheckOptionSelAllList({});
				if (data.code == 200) {
					let maxList = this.getCascaderData(JSON.parse(JSON.stringify(data.data)), 2)
					this.$nextTick(() => {
						if (this.optionData.infoType == 0) {
							this.securityAppCheckSetOptionList(maxList);
						} else if (this.optionData.infoType == 1) {
							this.securityAppCheckSetOptionGetReviewList(maxList);
						} else if (this.optionData.infoType == 2) {
							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))
						this.cascadeData(maxList, minList);
					}
					if (data.data[0]) {
						data.data.forEach(function(item) {
							if (item.hazardCheckPoint) {
								item.hazardCheckPointList = item.hazardCheckPoint.split('#')
							}
						})
					}
					//查询数据
					this.$set(this, 'dataList', JSON.parse(JSON.stringify(data.data)));
				}
			},
			/********************** 复查相关查询 **********************/
			async securityAppCheckSetOptionGetReviewList(maxList) {
				let self = this;
				const {
					data
				} = await securityAppCheckSetOptionGetReviewList({
					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 {
					.for-box-n {
						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 {
					>view {
						font-size: 25rpx;
						line-height: 70rpx;
						margin: 0 21rpx;
						border-bottom: 1px solid #dedede;
					}
				}
			}
		}
	}
</style>