Web_TracerMethodology/pages/creatingSituations/components/checkMapAdd.vue

<template>
	<view class="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>
	</view>
</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,
			})
		},
		methods: {
			changeChecked: function(id) {
				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];
							data = data.map((item)=>{
								return {
									...item,
									status: 'add'
								}
							});
							let index = list.findIndex(({id})=> id === actionItem.id);
							arr.splice(index + 1, 0, ...data);
							this.myCommit('list', arr);
						}
					});
				}
				this.commit('showCheckMapAdd', 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">
	.modal {
		.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>