Web_TracerMethodology/pages/creatingSituations/components/checkMap.vue

<template>
	<view class="check-map">
		<view class="title">请对查核地图进行配置</view>
		<view class="list">
			<view class="item" 
				v-for="(item, index) in list" 
				:class="{disable: item.status === 'disable'}"
				@click="detail(item)"
				:key="index">
				<view class="title-wrap">
					<text>{{item.name}}</text>
					<view>
						<image src="../../../static/icon-map.png"></image>
						<text>{{item.deptClassName}}</text>
					</view>
				</view>
				<view class="content">
					<text>包含{{item.pointCount}}个查核要点，{{item.itemCount}}个查核项目</text>
					<text>
						<text v-for="(point, c) in item.pointList" :key="c">
							{{point.name}}；
						</text>
					</text>
				</view>
				<view class="btn-group">
					<view class="btn" 
						v-for="(btn, index) in btnGroupArr" 
						@click="btnClick($event, btn.id)"
						:key="index">
						<image :src="`../../static/icon-${btn.id}${item.status === 'disable' 
							? 'dis' : ''}.png`"></image>
						<text>{{btn.label}}</text>
					</view>
					<view class="btn">
						<image :src="`../../static/icon-${creatIcon(item.status)['icon']}.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: 'shang', label: '上移'},
		{id: 'xia', label: '下移'},
	];
	export default {
		data() {
			return {
				btnGroupArr,
				list: [
					{status: 'normal'},
					{status: 'add'},
					{status: 'disable'},
				]
			}
		},
		computed: {
			...mapState({
				checkMap: state => state.creatingSituations.checkMap,
				checkRent: state => state.creatingSituations.checkRent,
				condition: state => state.creatingSituations.condition,
			})
		},
		created:function(){
			if(this.checkMap.list.length === 0) {
				const {points} = this.checkRent.checkedItem;
				if(!points) return;
				let checkPointIds = points.map(({id})=> id);
				console.log(checkPointIds)
				this.$store.dispatch({
					type: 'creatingSituations/commActions',
					key: 'checkDeptList',
					data: { 
						depType: this.condition.depType,
						checkPointIds,
					}
				}).then((data)=> {
					if(data) this.myCommit('list', data);
				});
			}
		},
		methods: {
			creatIcon: function(status) {
				let obj = {icon: 'jinyong', label: '禁用'};
				switch(status) {
					case 'add': 
						obj = {icon: 'del', label: '删除'};
						break;
					case 'disable': 
						obj = {icon: 'qiyong', label: '启用'};
						break;
				}
				return obj;
			},
			detail: function(item) {
				this.$store.commit({
					type: 'creatingSituations/comChangeState',
					key: 'showCheckMapDetail',
					data: true
				});
			},
			btnClick: function(e, id) {
				_stopPropagation(e);
				switch(id) {
					case 'add': 
						this.$store.commit({
							type: 'creatingSituations/comChangeState',
							key: 'showCheckMapAdd',
							data: true
						});
						break;
				}
			},
			/**
			 * 更新condition数据
			 * @param {Object} key 要更新的属性
			 * @param {Object} value 值
			 */
			myCommit: function(key, value) {
				let data = {...this.checkMap};
				data[key] = value;
				this.$store.commit({
					type: 'creatingSituations/comChangeState', 
					key: 'checkMap', 
					data
				});
			}
		}
	}
</script>

<style lang="less">
	.check-map {
		.list {
			overflow: hidden;
			padding: 0 25rpx;
			.item {
				position: relative;
				overflow: hidden;
				margin-bottom: 25rpx;
				border-radius: 5rpx;
				padding-top: 16.25rpx;
				padding-bottom: 0;
				width: 100%;
				background-color: #fff;
				box-shadow: 0 3.75rpx 12.5rpx 0 rgba(0, 13, 51, 0.1);
				
				.title-wrap {
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 0 25rpx;
					>text {
						font-size: 35rpx;
						line-height: 52.5rpx;
						color: #292C33;
					}
					>view {
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-left: 20rpx;
						border-radius: 17.5rpx;
						height: 35rpx;
						font-size: 17.5rpx;
						line-height: 35rpx;
						color: #8F9BB3;
						background-color: #EDF2FA;
						image {
							width: 35rpx;
							height: 35rpx;
						}
						text {
							padding-left: 10rpx;
							padding-right: 20rpx;
						}
					}
				}
				.content {
					display: flex;
					flex-direction: column;
					padding: 11.25rpx 25rpx 20rpx;
					text {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 20rpx;
						line-height: 30rpx;
						color: #666F80;
						&:first-child {
							margin-bottom: 5rpx;
							font-weight: bold;
							color: #292C33;
						}
					}
				}
				.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>