Web_TracerMethodology/pages/creatingSituations/components/checkMapAdd.vue

<template>
	<tm-modal>
		<scroll-view scroll-y="true" class="modal-body">
			<view class="body-content">
				<text class="top-title">选择要新增的单位</text>
				<view class="list">
					<view class="item"v-for="(item, index) in checkMap.deptList" :key="index">
						<view class="item-title">{{item.name}}</view>
						<view class="chidren">
							<view class="child"
								v-for="(child, n) in item.departmentList"
								:key="n"
								:class="{active: checkedIds.includes(child.id)}"
								@click="changeChecked(child.id)">
								<text>{{child.name}}</text>
								<image v-if="checkedIds.includes(child.id)" 
									src="../../../static/bottom-img.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<tm-simple-btn-group :options="botmBtnGroup"
				v-on:callback="btnClick" ></tm-simple-btn-group>
		</scroll-view>
	</tm-modal>
</template>

<script>
	import { mapState } from "vuex";
	import {arrFilter} from "../../../utils/arrFilter.js";
	export default {
		data() {
			return {
				checkedIds: []
			}
		},
		computed: {
			botmBtnGroup: function() {
				return [
					{id: 'cancle', label: '取消'},
					{id: 'ok', label: `已选${this.checkedIds.length}项，确定新增`}
				];
			},
			...mapState({
				checkMap: state => state.creatingSituations.checkMap,
				condition: state => state.creatingSituations.condition,
			}),
			isDisabled: function() {
				return function(id) {
					return this.checkMap.list.find((item)=>item.id === id);
				}
			}
		},
		created:function(){
			if(this.checkMap.deptList.length === 0) {
				// 获取新增单位
				const {depType} =this.condition;
				this.dispatch('deptList', { depType }).then((data)=>{
					if(data) this.myCommit('deptList', data);
				});
			}
		},
		methods: {
			changeChecked: function(id) {
				if(this.isDisabled(id)) return;
				this.checkedIds = arrFilter(id, this.checkedIds);
			},
			btnClick: function(id) {
				if(id === 'ok') {
					this.dispatch('addDeptList', {depIds: this.checkedIds}).then((data)=>{
						if(data) {
							const {list, actionItem} = this.checkMap;
							let arr = [...this.checkMap.list];
							let _data = this.checkDep(data);
							let index = list.findIndex(({id})=> id === actionItem.id);
							arr.splice(index + 1, 0, ..._data);
							this.myCommit('list', arr);
						}
					});
				}
				this.commit('showCheckMapAdd', false);
			},
			checkDep: function(list) {
				return list.map((item, i)=>{
					return {
						...item,
						status: 'add',
						pointList: (item.pointList || []).map((ptem)=>{
							return {
								...ptem,
								selectFlag: true,
								itemList: (ptem.itemList || []).map((ntem)=>{
									return {
										...ntem,
										selectFlag: true
									}
								})
							}
						})
					}
				});
			},
			/**
			 * 更新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">
	.modal-body {
		margin-top: 10%;
		border-radius: 25rpx 25rpx 0 0;
		padding: 35rpx 40rpx 75rpx;
		width: 100%;
		height: 90%;
		font-size: 22.5rpx;
		line-height: 33.75rpx;
		color: #292C33;
		background-color: #fff;
		.top-title {
			font-size: 30rpx;
			line-height: 45rpx;
		}
		.list {
			margin-top: 25rpx;
			.item {
				.item-title {
					margin-bottom: 3.75rpx;
					font-size: 25rpx;
					line-height: 37.5rpx;
					font-weight: bold;
				}
				.chidren {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					margin: 0 -17.5rpx;
					.child {
						position: relative;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						margin: 10rpx 17.5rpx;
						border-radius: 5rpx;
						width: 200rpx;
						height: 50rpx;
						font-weight: 500;
						background-color: #EBEDF2;
						image {
							position: absolute;
							right: 0;
							bottom: 0;
							width: 25rpx;
							height: 25rpx;
						}
						&.active {
							color: #3377FF;
							background-color: #E6EEFF;
						}
					}
				}
			}
		}
	}
</style>