bindGate.vue

<template>
    <el-dialog
	  :title="$t('dialog.bindSite')"
	  class="manage-dialog bind-dialog bind-middle-dialog"
	  :visible.sync="bindVisible"
	  :close-on-click-modal="false"
	  @close="closeBindDialog">
		<el-row>
			<el-col :span="9">
				<div class="gate-list-wrapper">
					<div class="origin-input-box">
						<input type="value" :placeholder="$t('pholder.Site')" @keyup="filterGateList" v-model="bindVal" class="origin-input__inner" />
						<i class="el-icon-search bind-search"></i>
					</div>
					<el-scrollbar wrap-class="list-scrollbar" :native="false" style="height:100%;max-height: 306px">
						<ul class="gate-list-left">
							<li :class="item.className" @click="checkGate(index)" v-for="(item, index) in gateList" :key="item.value">
								<span class="gate-item-text" :title="item.label">{{ item.label }}</span>
								<i class="el-icon-circle-check checked-icon" v-if="item.isCheck"></i>
							</li>
							<li v-if="gateList.length == 0">{{ noDataText }}</li>
						</ul>
					</el-scrollbar>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="bind-btn-box">
					<div :class="$Project === 'mall' ? 'xl-wrapper' : 'lg-wrapper'">
						<el-button class="bind-btn" @click="bindClick('positive')" :disabled="bindBtnDisabled">{{ $t('dialog.posBind') }}<i class="el-icon-d-arrow-right el-icon--right right-icon"></i></el-button>
						<el-button class="bind-btn reverse-btn" @click="bindClick('reverse')" :disabled="bindBtnDisabled">{{ $t('dialog.reBind') }}<i class="el-icon-d-arrow-right el-icon--right right-icon"></i></el-button>
						<el-button class="bind-btn peropheral-btn" @click="bindClick('peripheral')" :disabled="bindBtnDisabled" v-if="$Project === 'mall'">{{ $t('dialog.perBind') }}<i class="el-icon-d-arrow-right el-icon--right right-icon"></i></el-button>
						<el-button class="bind-btn" style="background: #000" @click="bindClick('heating')" :disabled="bindBtnDisabled">热力绑定<i class="el-icon-d-arrow-right el-icon--right right-icon"></i></el-button>
						<!-- <el-button class="bind-btn" @click="bindClick('positive')" :disabled="bindBtnDisabled">{{$t('dialog.posBind')}}<i class="el-icon-d-arrow-right el-icon--right right-icon"></i></el-button>
						<el-button class="bind-btn reverse-btn" @click="bindClick('reverse')" :disabled="bindBtnDisabled">{{$t('dialog.reBind')}}<i class="el-icon-d-arrow-right el-icon--right right-icon"></i></el-button>
						<el-button v-if="false" class="bind-btn peropheral-btn" @click="bindClick('peripheral')" :disabled="bindBtnDisabled">{{$t('dialog.perBind')}}<i class="el-icon-d-arrow-right el-icon--right right-icon"></i></el-button> -->
					</div>
				</div>
			</el-col>
			<el-col :span="9">
				<div class="gate-list-wrapper">
					<p class="band-box">{{$t('dialog.arbindS')}}</p>
					<el-scrollbar wrap-class="list-scrollbar" :native="false" style="height:100%;max-height: 306px;">
						<ul class="gate-list-left">
							<li :class="cancelBtnDisabled ? 'bind-gate-item bind-disabled' : 'bind-gate-item'" v-for="(gateItem, gateIndex) in bindGateList" :key="gateIndex" @click="cancelBind(gateIndex)">
								<el-button class="gate-btn" :style="{ 'border-color': gateItem.btnColor }" :title="gateItem.label">{{ gateItem.label + ' ' + gateItem.direction }}</el-button>
								<i class="el-icon-circle-close gate-close-btn" :title="$t('dialog.unbind')"></i>
							</li>
						</ul>
					</el-scrollbar>
				</div>
			</el-col>
		</el-row>
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" class="dialog-btn dialog-confirm-btn" @click="bindVisible = false">{{$t('button.closed')}}</el-button>
		</div>
	</el-dialog>
</template>


<script>
export default {
    data() {
        return {
            bindVisible: false,
            bindZoneId: '',
            bindVal: '',
            noDataText: '',
            zoneAllGate: [],
            gateList: [],
            bindGateList: [],
            bindBtnDisabled: false,
            cancelBtnDisabled: false,
        }
    },
    methods: {
        dialogInit(data) {
			this.bindZoneId = data.id;
            this.getZoneAllGate(data.mallId);
            // this.getZoneGates(data.id);
            this.bindVisible = true;
        },
		getZoneAllGate(mall_id) {
			this.zoneAllGate = [];
			this.$api.base.gate({
				mallId: mall_id,
				status: 1,
				// _t: Date.parse(new Date()) / 1000
			})
			.then(res => {
				let obj = {};
				let result = res.data;
				result.data.forEach(item => {
					item['label'] = item.name;
					item['value'] = item.id;
					item['isMallGate'] = item.isMallGate;
				})
				this.zoneAllGate = result.data;
				this.getZoneGates(this.bindZoneId);
			})
			.catch(err => {});
		},
        getZoneGates(zone_id) {
			this.gateList  = [];
			this.bindGateList  = [];
            this.$api.base.zoneGate({
				zoneId: zone_id,
				status: 1,
				// _t: Date.parse(new Date()) / 1000
            })
                .then(res => {
					let result = res.data;
					let allGateTemp = {}, temp = {};
					if(result.data.length >= 0) {
						// 获取所有的监控点
						this.zoneAllGate.forEach(item => {
							allGateTemp = {};
							allGateTemp['label'] = item.label;
							allGateTemp['value'] = item.value;
							allGateTemp['isCheck'] = false;
							allGateTemp['className'] = 'gate-item';
							allGateTemp['type'] = 0;
							this.gateList.push(allGateTemp);
						})
						// 筛选不同类型的已绑定监控点
						// let temp = {};
						this.zoneAllGate.forEach(gateItem => {
							result.data.forEach(item => {
								if(item.gateId == gateItem.id) {
									temp = {};
									temp['label'] = gateItem.label;
									temp['value'] = gateItem.value;
									temp['isCheck'] = false;
									temp['className'] = 'gate-item';
									temp['type'] = item.type;
									if(item.type == 1) {
										temp['btnColor'] = '#3BB8FF';
										temp['direction'] = '正向';
									}
									if(item.type == 2) {
										temp['btnColor'] = '#87D14B';
										temp['direction'] = '反向';
									}
									if(item.type == 3) {
										temp['btnColor'] = '#FFC62E';
										temp['direction'] = '外围';
									}
									temp['id'] = item.id;
									this.bindGateList.push(temp);
								}
							});
						})
						if(this.gateList.length == 0) {
							this.noDataText = '数据为空'
						}
					}
					window.sessionStorage.setItem('bindlist', JSON.stringify(this.gateList));
				})
				.catch(err => { 
					// console.log('获取监控点异常:', err.message)
				})
		},
        filterGateList() {
			let sVal = this.bindVal.replace(/\s+/g, '').toLocaleLowerCase();
			let localList = JSON.parse(window.sessionStorage.getItem('bindlist'));
			if(sVal == '') {
				this.gateList = localList;
				return;
			}
			let filterArr = [];
			this.gateList.forEach(item => {
				if(((item.label).toLocaleLowerCase()).indexOf(sVal) !== -1) {
					// if(!this.checkDup(filterArr, item.id)) {
						filterArr.push(item);
					// }
				}
			})
			if(filterArr.length == 0) {
				localList.forEach(item => {
					if(((item.label).toLocaleLowerCase()).indexOf(sVal) !== -1) {
						// if(!this.checkDup(filterArr, item.id)) {
							filterArr.push(item);
						// }
					}
				})
			}
			if(filterArr.length == 0) {
				this.noDataText = '未找到匹配数据';
			}
			this.gateList = filterArr;
		},
		// checkDup(arr, val) {
		// 	let isDup = false;
		// 	arr.forEach(item => {
		// 		if(item.id == val) {
		// 			isDup = true;
		// 		}
		// 	})
		// 	return isDup;
		// },
        checkGate(index) {
			if(this.gateList[index].isCheck) {
				return;
			}
			this.curCheckGate = {};
			this.gateList.forEach(item => {
				item.isCheck = false;
				item.className = 'gate-item';
			})
			this.gateList[index].isCheck = true;
			this.gateList[index].className = 'gate-item gate-item-checked';
			this.curCheckGate = this.gateList[index];
		},
        bindClick(type) {
			if(!this.curCheckGate.value) return;
			this.bindBtnDisabled = true;
			let _text, _color = '', _type = 0;
			switch (type) {
				case 'positive':
					_text = '正向';
					_color = '#3BB8FF';
					_type = 1;
					break;
				case 'reverse':
					_text = '反向';
					_color = '#87D14B';
					_type = 2;
					break;
				case 'peripheral':
					_text = '外围';
					_color = '#FFC62E';
					_type = 3;
					break;
				case 'heating':
					_text = '热力';
					_color = '#000';
					_type = 4;
					break;
				default:
					break;
			};
			// 判断是否存在同一方向的绑定, (正向 || 反向) && 店外
			let _direction = '';
			this.bindGateList.forEach(item => {
				if(item.value == this.curCheckGate.value) {
					if(item.type == _type) {
						_direction = 'same';
					} else {
						if((item.type == 1 || item.type == 2) && (_type == 1 || _type == 2)) {
							_direction = 'posRev';
						} else if(item.type == 3 && _type == 3) {
							_direction = 'outSide';
						} else if(item.type == 4 && _type == 4) {
							_direction = 'heating';
						} else {
							_direction = '';
						}
					}
				}
			})
			if(_direction === 'same') {
				this.$message({
					showClose: true,
					type: 'warning',
					message: this.$t('message.bindGate')
				});
				this.bindBtnDisabled = false;
				return;
			} else if(_direction === 'posRev') {
				// 不可选店外
				this.$message({
					showClose: true,
					type: 'warning',
					message: this.$t('message.alreadyBound')
				});
				this.bindBtnDisabled = false;
				return;
			} else if(_direction === 'outSide') {
				// 不可选正反方向
				this.$message({
					showClose: true,
					type: 'warning',
					message: this.$t('message.alreadyBound')
				});
				this.bindBtnDisabled = false;
				return;
			} else if(_direction === 'heating') {
				// 不可选正反方向和店外
				this.$message({
					showClose: true,
					type: 'warning',
					message: this.$t('message.alreadyBound')
				});
				this.bindBtnDisabled = false;
				return;
			}
			let isDup = false, obj = {}, curIndex = null;
			this.$api.management.addZoneGate({
				zoneId: this.bindZoneId,
				gateId: this.curCheckGate.value,
				type: _type,
				createUser: this.$cookie.get('userId'),
				modifyUser: this.$cookie.get('userId')
			})
				.then((res) => {
					if(res.data.code == 200) {
						obj = JSON.parse(JSON.stringify(this.curCheckGate));
						obj['id'] = res.data.data.id;
						obj['direction'] = _text;
						obj['btnColor'] = _color;
						if(this.bindGateList.length) {
							this.gateList.forEach((item, index) => {
								if(item.value === obj.value) {
									curIndex = index;
								}
							})
							this.bindGateList.push(obj);
						} else {
							this.bindGateList.push(obj);
						}
						// this.gateList.splice(curIndex, 1);
						window.sessionStorage.setItem('bindlist', JSON.stringify(this.gateList));
						if(this.gateList.length == 0) {
							this.noDataText = this.$t('echartsTitle.noData')
						}
						this.$parent.getTableData();
					} else {
						this.$message({
							showClose: true,
							type: 'info',
							message: this.$t('message.bind') + res.data.msg
						});
					}
					this.bindBtnDisabled = false;
				})
				.catch(err => { this.bindBtnDisabled = false; });
		},
        cancelBind(index) {
			let isDup = false, obj = {}, labelText = '';
			this.$confirm(this.$t('message.confirmUnbind'), this.$t('message.prompt'), {
				confirmButtonText: this.$t('message.confirm'),
				cancelButtonText: this.$t('message.cancel'),
				type: 'warning'
			})
			.then(() => {
				this.cancelBtnDisabled = true;
				this.$api.management.delZoneGate(this.bindGateList[index].id, {})
					.then((res) => {
					if(res.data.code == 200) {
						obj = JSON.parse(JSON.stringify(this.bindGateList[index]));
						obj['isCheck'] = false;
						obj['className'] = 'gate-item';
						// this.gateList.push(obj);
						this.bindGateList.splice(index, 1);
					} else {
						this.$message({
							showClose: true,
							type: 'info',
							message: this.$t('message.unbind') + res.data.msg
						})
					}
					this.cancelBtnDisabled = false;
				})
				.catch(err => { 
					// console.log('catch:', err.message);
					this.cancelBtnDisabled = false;
				});
			})
			.catch(error => {})
			// this.gateList.forEach((item, i) => {
			// 	if(item.value === this.bindGateList[index].value) {
			// 		this.gateList[i].isCheck = false;
			// 		this.gateList[i].className = 'gate-item';
			// 	}
			// });
			// // 删除列表中的元素
			// this.bindGateList.splice(index, 1);
		},
        closeBindDialog() {
			this.gateList.forEach(item => {
				item.isCheck = false;
				item.className = 'gate-item';
			})
			this.bindVal = '';
			this.bindGateList.length = 0;
			this.noDataText = 'load';
		},
	},
	beforeDestroy() {
		window.sessionStorage.removeItem('bindlist');
	}
}
</script>