forest-map-back/src/components/tplEdit/MonitorList.vue

<template>
	<el-form label-width="80px" size="mini" :inline="inline" class="monitor-list-form">
		<el-form-item label="可用监控">
			<el-checkbox-group v-model="checkList" class="m-box">
			    <li v-for="(x, key) in monitorList" :key="key">
			    	<el-image class="el-image" :src="x.picUrl" :preview-src-list="[x.picUrl]"></el-image>
			    	<el-checkbox style="padding: 0 2px;" :label="x">{{ x.channelName }}</el-checkbox>
			    </li>
			</el-checkbox-group>
		</el-form-item>
		<span v-for="(va, key) in value" :key="key">
			<all v-if="includes(va, 'Object')" :value="va" :keys="keys[key] || {}"></all>
			<div v-else-if="includes(va, 'Array') && keys[key]">
				<component :is="va | arrayType" :value="va" :keys="keys[key]" :headers="value['tabHeader'] || []" @change="change" :changeData="changeData"></component>
			</div>
			<template v-else>
				<el-form-item :label="keys[key] || key" v-if="keys[key] && key != '_caveat'"><el-input v-model="value[key]" type="textarea"></el-input></el-form-item>
				<el-alert style="margin-bottom: 10px;" v-if="key == '_caveat'" :title="value[key]" type="error" effect="dark" :closable="false"></el-alert>
			</template>
		</span>
	</el-form>
</template>

<script>
import tplArray from './dataTypeTpl/array1Obj.vue';
import tplTabArray from './dataTypeTpl/array2Arr.vue';
export default {
	name: 'All',
	components: {
		tplArray,
		tplTabArray
	},
	props: {
		value: {
			type: Object,
			default() {
				return {};
			}
		},
		keys: {
			type: Object,
			default() {
				return {};
			}
		},
		inline: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			//表头变化
			changeData: {},
			//摄像头列表
			monitorList: [],
			checkList:[]
		};
	},
	watch:{
		"checkList.length"(n){
			this.value.list = this.checkList.map(x=>{
				return {
					...x,
					name:x.channelName
				};
			});
		}
	},
	mounted() {
		this.$port.getMonitorList().then(res => {
			this.monitorList = res;
			let value = Object.assign({},this.value).list;
			//初始化checkList
			this.checkList = res.filter((x,i)=>{
				for(let v = 0,c = 0;c = value[v];v++){
					if(c.url==x.url){
						value.splice(c,1);
						return x;
					}
				}
			});
		});
	},
	//检测数组 - 对应数据结构类型
	filters: {
		arrayType(value) {
			return value.length ? (Array.isArray(value[0]) ? 'tplTabArray' : 'tplArray') : 'tplArray';
		}
	},
	methods: {
		change(data) {
			this.changeData = data;
		}
	}
};
</script>
<style lang="less">
.monitor-list-form {
	.m-box {
		display: flex;
		list-style-type: none;
		flex-wrap: wrap;
		& > li {
			width: calc(33.33% - 10px);
			border-radius: 4px;
			overflow: hidden;
			box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
			margin: 5px;
			.el-image {
				width: 100%;
			}
		}
	}
}
</style>