Web_TracerMethodology/pages/creatingSituations/components/checkMap.vue

<template>
	<view class="check-map">
		<view class="title">请对查核地图进行配置</view>
		<view class="check-map-list">
			<view class="item" 
				v-for="(item, index) in checkMap.list" 
				:class="{disable: item.status === 'disable'}"
				@click="detail(item)"
				:key="index">
				<tm-check-map-list :item="item"></tm-check-map-list>
				<view class="btn-group">
					<view class="btn" 
						v-for="(btn, index) in btnGroupArr" 
						@click="btnClick($event, btn.id, item)"
						:key="index">
						<image :src="`../../static/icon-${btn.id}${item.status === 'disable' 
							? 'dis' : ''}.png`"></image>
						<text>{{btn.label}}</text>
					</view>
					<view class="btn" 
						@click="btnClick($event, creatIcon(item.status)['id'], item)">
						<image :src="`../../static/icon-${creatIcon(item.status)['id']}.png`">
						</image>
						<text>{{ creatIcon(item.status)['label'] }}</text>
					</view>
				</view>
				<view class="add-img-wrap" v-if="item.status === 'add'">
					<image src="../../../static/top-img.png"></image>
					<text>新增项</text>
				</view>
				<view class="dis-img-wrap" v-if="item.status === 'disable'">
					<image src="../../../static/disable-img.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex";
	import {_stopPropagation} from "../../../utils/compatible.js";
	const btnGroupArr = [
		{id: 'add', label: '新增'},
		{id: 'pre', label: '上移'},
		{id: 'next', label: '下移'},
	];
	export default {
		data() {
			return {
				btnGroupArr,
			}
		},
		computed: {
			...mapState({
				checkMap: state => state.creatingSituations.checkMap,
				checkRent: state => state.creatingSituations.checkRent,
				condition: state => state.creatingSituations.condition,
				needReload: state => state.creatingSituations.needReload,
			})
		},
		created:function(){
			this.init();
		},
		methods: {
			init: function() {
				if(this.needReload) { // 点击上一步不用获取数据
					const {points} = this.checkRent.checkedItem;
					const {depType} = this.condition;
					if(!points) return;
					let checkPointIds = points.map(({id})=> id);
					this.dispatch('checkDeptList', { depType, checkPointIds })
						.then((data)=> {
							if(data) {
								let _data = data.map((item)=>{
									return {
										...item,
										status: 'normal'
									}
								})
								this.myCommit('list', _data);
							} 
						});
					// 获取新增单位
					this.dispatch('deptList', { depType }).then((data)=>{
						if(data) this.myCommit('deptList', data);
					});
				}
			},
			creatIcon: function(status) {
				let obj = {id: 'jinyong', label: '禁用'};
				switch(status) {
					case 'add': 
						obj = {id: 'del', label: '删除'};
						break;
					case 'disable': 
						obj = {id: 'qiyong', label: '启用'};
						break;
				}
				return obj;
			},
			detail: function(item) {
				if(item.status === 'disable') return;
				this.commit('needReload', false); // 不用新获取数据
				this.commit('showCheckMapDetail', true);
				this.myCommit('actionItem', item);
			},
			btnClick: function(e, btnType, item) {
				if(item.status === 'disable' && btnType !== 'qiyong') return;
				_stopPropagation(e);
				switch(btnType) {
					case 'add': // 新增
						this.commit('needReload', false); // 不用新获取数据
						this.commit('showCheckMapAdd', true);
						this.myCommit('actionItem', item);
						break;
					default: // 其他
						this.preAndNext(btnType, item);
						break;
				}
			},
			preAndNext: function(type, item) {
				let arr = [...this.checkMap.list];
				let index = arr.findIndex(({id}) => id === item.id);
				switch(type) {
					case 'pre': // 上移
						if(index > 0) {
							let pre = arr[index - 1];
							arr[index - 1] = item;
							arr[index] = pre;
						}
						break;
					case 'next': // 下移
						if(index < arr.length - 1) {
							let next = arr[index + 1];
							arr[index + 1] = item;
							arr[index] = next;
						}
						break;
					case 'del': // 删除
						arr.splice(index, 1);
						break;
					case 'jinyong': // 禁用
						arr.splice(index, 1);
						arr.push({...item, status: 'disable'});
						break;
					case 'qiyong': // 启用
						let _index = arr.findIndex(({status})=>status === 'disable');
						arr.splice(index, 1); // 删掉原来的
						arr.splice(_index, 0, {...item, status: 'normal'}); // 添加到disable的前面
						break;
				}
				this.myCommit('list', arr);
			},
			/**
			 * 更新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 {
		.check-map-list {
			.btn-group {
				display: flex;
				flex-direction: row;
				padding: 15rpx 0;
				width: 100%;
				height: 77.5rpx;
				background-color: #FAFBFC;
				.btn {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					border-right: 1px solid #DADEE6;
					flex: 1;
					font-size: 17.5rpx;
					line-height: 26.25rpx;
					color: #7A8599;
					&:last-child {
						border-right: 0;
					}
					image {
						width: 25rpx;
						height: 25rpx;
					}
				}
			}
			.dis-img-wrap,
			.add-img-wrap {
				position: absolute;
				top: 18.75rpx;
				right: 18.75rpx;
				width: 93.75rpx;
				height: 93.75rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.add-img-wrap {
				top: 0;
				right: 0;
				width: 100rpx;
				height: 35rpx;
				text {
					position: absolute;
					top: 4.37rpx;
					left: 28.75rpx;
					font-size: 17.5rpx;
					line-height: 26.25rpx;
					color: #fff;
				}
			}
			&.disable {
				.title-wrap {
					>text, >view {
						color: #B8BECC;
					}
				}
				.content {
					text {
						color: #B8BECC;
					}
				}
				.btn-group {
					.btn {
						color: #B8BECC;
						&:last-child {
							color: #7A8599;
						}
					}
				}
			}
		}
	}
</style>