Web_TracerMethodology/pages/creatingSituations/components/checkMapDetail.vue

<template>
	<scroll-view scroll-y="true" class="check-map-detail">
		<view class="item" v-for="(item, index) in checkMap.actionItem.pointList" :key="index">
			<view class="icon-wrap" @click="openChildren(item.id)">
				<image :src="`../../static/list-${openItems.includes(item.id)
					?'close':'open'}.png`"></image>
			</view>
			<view class="content">
				<view class="content-title" @click="openChildren(item.id)">{{item.name}}</view>
				<view class="children" v-if="openItems.includes(item.id)">
					<view class="child" v-for="(child, n) in item.itemList" :key="n">
						<view class="child-text">{{child.name}}</view>
						<view class="check-icon-wrap" 
							@click="changeChecked(index, n, child.selectFlag)">
							<image :src="`../../static/check-${child.selectFlag
								?'checkbox':'no'}.png`"></image>
						</view>
					</view>
				</view>
				<view class="checkAllBtn"
					@click.stop="cancelAllChildHandle(index,item.selectFlag)">
					<image :src="`../../static/check-${item.selectFlag
						?'checkbox':'no'}.png`"></image>
				</view>
			</view>
		</view>
		<tm-simple-btn-group :options="botmBtnGroup"
			v-on:callback="btnClick" ></tm-simple-btn-group>
	</scroll-view>
</template>

<script>
	import { mapState } from "vuex";
	import {arrFilter} from "../../../utils/arrFilter.js";
	
	export default {
		data() {
			return {
				openItems: [],
			}
		},
		computed: {
			botmBtnGroup: function(){
				return [
					{id: 'cancle', label: '取消'},
					{id: 'ok', label: `已选${this.selectedNum}项，确定`}
				];
			},
			...mapState({
				checkMap: state => JSON.parse(JSON.stringify(state.creatingSituations.checkMap)),
			}),
			selectedNum: function() {
				let num = 0;
				this.checkMap.actionItem.pointList.map((item)=>{
					item.itemList.map((ntem)=>{
						if(ntem.selectFlag) num++;
					});
				});
				return num;
			},
		},
		created:function(){
			this.checkMap.actionItem.pointList.map((item)=>{
				// this.openItems.push(item.id);
			});
		},
		methods: {
			openChildren: function(key) {
				this.openItems = arrFilter(key, this.openItems);
			},
			//一键取消所有子项
			cancelAllChildHandle(index,selectFlag){
				this.checkMap.actionItem.pointList[index].selectFlag = !selectFlag;
				this.checkMap.actionItem.pointList[index].itemList.forEach(item=>{
					  item.selectFlag = !selectFlag;
				});
				this.myCommit('actionItem', this.checkMap.actionItem);
			},
			changeChecked: function(i, n, selectFlag) {
				this.checkMap.actionItem.pointList[i].itemList[n].selectFlag = !selectFlag;
				const ifAllChildIsFalse = this.checkMap.actionItem.pointList[i].itemList.every(item=>item.selectFlag == false);
				this.checkMap.actionItem.pointList[i].selectFlag = !ifAllChildIsFalse;
				this.myCommit('actionItem', this.checkMap.actionItem);
			},
			btnClick: function(id) {
				if(id === 'ok') {
					const {id, pointList} = this.checkMap.actionItem;
					let _pointList = pointList.map((item)=>{
						let obj = item.itemList.find(({selectFlag}) => selectFlag);
						return {
							...item,
							selectFlag: obj ? true : false
						}
					});
					let list = [...this.checkMap.list];
					let index = list.findIndex((item)=> item.id === id);
					list[index].pointList = _pointList;
					this.myCommit('list', list);
				} 
				this.commit('showCheckMapDetail', false);
			},
			/**
			 * 更新condition数据
			 * @param {Object} key 要更新的属性
			 * @param {Object} value 值
			 */
			myCommit: function(key, value) {
				let data = {...this.checkMap};
				data[key] = value;
				this.commit('checkMap', data);
			},
			dispatch: function(key, data) {
				return this.$store.dispatch({type: 'creatingSituations/commActions', key, data});
			},
			commit: function(key,data) {
				this.$store.commit({type: 'creatingSituations/comChangeState', key, data});
			},
		}
	}
</script>

<style lang="less">
	.check-map-detail {
		padding-bottom: 75rpx;
		width: 100%;
		height: 100%;
		.item {
			display: flex;
			flex-direction: row;
			border-top: 1px solid #DADEE6;
			padding-left: 25rpx;
			width: 100%;
			background-color: #fff;
			.icon-wrap {
				padding-top: 28.12rpx;
				padding-right: 23.75rpx;
				width: 45rpx;
				height: inherit;
				image {
					width: 100%;
					height: 12.5rpx;
				}
			}
			.content {
				position: relative;
				width: 100%;
				color: #292C33;
				.content-title {
					display: flex;
					flex-direction: row;
					align-items: center;
					min-height: 87.5rpx;
					font-size: 22.5rpx;
					font-weight: 500;
				}
				.children {
					width: 100%;
					.child {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						border-top: 1px solid #DADEE6;
						min-height: 87.5rpx;
						.child-text {
							width: calc(100% - 75rpx);
						}
						.check-icon-wrap {
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
							width: 75rpx;
							height: 87.5rpx;
							image {
								width: 25rpx;
								height: 25rpx;
							}
						}
					}
				}
				.checkAllBtn {
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					right:25rpx;
					top:25rpx;
					width: 37.5rpx;
					height: 37.5rpx;
					z-index: 10;
					image {
						width: 25rpx;
						height: 25rpx;
					}
				}
			}
		}
	}
</style>