<!--
* @Author: yangwei
* @Date: 2023-02-28 15:47:12
* @LastEditors: yangwei
* @LastEditTime: 2023-09-15 14:52:50
* @FilePath: \bdcdj-web\src\views\lpb\lpbContent\ch.vue
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<template>
<div class="ch-wrap">
<table
class="chTable"
ref="ch"
border="1"
cellspacing="0"
cellpadding="0"
v-show="ch.length"
>
<tr v-for="(cs, csIndex) in ch" :key="csIndex">
<!-- 显示层数 -->
<td
class="floor"
ref="cBsm"
@contextmenu.prevent="openMenu($event, cs, 'c')"
@click="handleClickC($event, cs)"
>
{{ cs.sjc }}层
</td>
<!-- 显示户 -->
<td
v-for="(hs, hsIndex) in cs.hs"
:rowspan="hs.sjcs"
:colspan="hs.sjhs"
:data-bsm="hs.bsm"
:data-qszt="hs.qszt"
ref="hBsm"
:key="hsIndex"
:style="{'border-color': borderColor}"
:class="hs.select ? 'tdSelect' : ''"
@click="handleClickH($event.target, hs.bsm, hs)"
@dblclick="dbclick(hs.bsm)"
@contextmenu.prevent="openMenu($event, hs, 'h')"
>
{{ hs.shbw }}
<span @click.stop="" class="hqszt lin" v-show="hs.qszt == '0'"
>临</span
>
<span @click.stop="" class="hqszt zheng" v-show="hs.qszt == '1'"
>正</span
>
<span @click.stop="" class="hqszt xian" v-show="hs.qszt == '2'"
>现</span
>
<ul @click.stop="hDyztClick($event, hs.bsm, hs)" class="dyzt">
<li style="background-color: #6edee1" v-show="hs.qqzt == '1'">
确
</li>
<li style="background-color: #8adc88" v-show="hs.bazt == '1'">
备
</li>
<li style="background-color: #ff8282" v-show="hs.dyzt == '1'">
抵
</li>
<li style="background-color: #d7cecf" v-show="hs.cfzt == '1'">
查
</li>
<li style="background-color: #d4a3eb" v-show="hs.yyzt == '1'">
异
</li>
<li style="background-color: #a5a3fb" v-show="hs.xzzt == '1'">
限
</li>
</ul>
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: "BdcdjWebCh",
inject: {
openMenu:{value:'openMenu',default:null},
selectAll:{value:'selectAll',default:null},
changeChoosedObj:{value:'changeChoosedObj',default:null},
clearChangeChoosedObj:{value:'clearChangeChoosedObj',default:null},
getBsmList:{value:'getBsmList',default:null}
},
props: {
ch: {
type: Array,
default: function () {
return [];
},
},
onlyShow:{
type: Boolean,
default: true,
}
},
data() {
return {
//选中户bsm合集
hbsmList: [],
//选中层bsm合集
cbsmList: [],
//区分单双击事件的定时器
time: null,
// 边框颜色
borderColor:'rgb(230, 230, 230)',
// 申请单元列表数据
unitIdList:[],
// 组件标识
compFlag:Math.random()
};
},
mounted() {
// 根据申请单元列表数据处理选中户
console.log("window.unitData",window.unitData);
if(window.unitData && window.unitData.length){
window.unitData.forEach(e => {
this.unitIdList.push(e.bdcdyid)
})
this.ch.forEach((c) => {
c.hs.forEach((h) => {
if (h.dyhbsm.indexOf(this.unitIdList) > -1) {
h.select = true;
// 使用hbsmList时，需要去重
this.hbsmList.push(h.bsm)
}
});
});
}
},
methods: {
// 层选中事件
/**
* @description: 层选中事件
* @param {*} e
* @param {*} item
* @author: renchao
*/
handleClickC(e, item) {
if (!this.onlyShow) {
// 判断点击的层是否选中
if (e.target.className.indexOf("tdSelect") == -1) {
//未选中→选中
item.hs.forEach((h) => {
//加边框
e.target.className += " tdSelect";
h.select = true;
// 使用hbsmList时，需要去重
this.hbsmList.push(h.bsm)
});
} else {
//选中→未选中
item.hs.forEach((h) => {
e.target.className = "floor";
h.select = false;
this.hbsmList = this.hbsmList.filter((i) => i != h.bsm);
});
}
}
},
//户单击事件
/**
* @description: 户单击事件
* @param {*} e
* @param {*} bsm
* @param {*} hs
* @author: renchao
*/
handleClickH(e, bsm, hs) {
if (!this.onlyShow) {
let self = this;
// 开启延时器，200ms的间隔区分单击和双击，解决双击时执行两次单击事件
clearTimeout(self.time);
self.time = setTimeout(() => {
// this.closeMenu();
//判断点击的户是否选中
if (!hs.select) {
//未选中→选中
//加边框
hs.select = true;
// 将户bsm放进hbsmList
self.hbsmList.push(bsm);
} else {
//选中→未选中
hs.select = false;
self.hbsmList = self.hbsmList.filter((i) => i != bsm);
}
//更新当前选中户数据
this.$forceUpdate();
}, 200);
}
},
// 户单元状态点击事件
/**
* @description: 户单元状态点击事件
* @param {*} e
* @param {*} bsm
* @param {*} hs
* @author: renchao
*/
hDyztClick(e, bsm, hs) {
if (!this.onlyShow) {
this.handleClickH(e.target.parentNode, bsm, hs);
}
},
//户双击事件
/**
* @description: 户双击事件
* @param {*} bsm
* @author: renchao
*/
dbclick(bsm) {
// clearTimeout(this.time);
},
//幢单元全选/反选
/**
* @description: 幢单元全选/反选
* @param {*} val
* @param {*} flag
* @author: renchao
*/
zdySelectAll(val,flag) {
// 手动点击全部取消选中
!flag && this.clearChangeChoosedObj()
this.ch.forEach((c) => {
c.hs.forEach((h) => {
if (val) {
h.select = true;
// 使用hbsmList时，需要去重
this.hbsmList.push(h.bsm)
} else {
h.select = false;
this.borderColor = 'rgb(230, 230, 230)'
this.hbsmList = []
}
});
});
this.$refs.hBsm && this.$refs.hBsm.forEach((item) => {
// item.style.borderColor = this.borderColor
item.style.backgroundColor = '#fff';
// item.style.border = `1px solid ${this.borderColor}`
});
},
//清除选中
clearChoosed(){
//清除选中户
this.zdySelectAll(false)
//清除选中层
this.cbsmList = [];
this.$refs.cBsm && this.$refs.cBsm.forEach((item)=>{
item.className = 'floor'
})
},
},
watch: {
selectAll: {
handler(val) {
this.zdySelectAll(val.selectAll);
val.cancelChoosed && this.clearChoosed()
},
immediate: true,
deep: true,
},
hbsmList(val){
let list = []
val.length && val.forEach((i)=>{
this.ch.forEach((c) => {
c.hs.forEach((h) => {
if (i == h.bsm) {
list.push(
{
bdcdyh:h.bdcdyh,
bsm:h.bsm,
dyhbsm:h.dyhbsm,
bdcdyid:h.dyhbsm,
bdcdylx:'7',
flag:this.compFlag
}
)
}
});
});
})
this.getBsmList(list,this.compFlag)
},
changeChoosedObj: {
handler(val) {
this.borderColor = 'rgb(230, 230, 230)';
if (val.bsms.length) {
//清除选中户
this.zdySelectAll(false,true)
this.$refs.hBsm.forEach((item) => {
val.bsms.forEach((i,ind) => {
if (item.dataset.bsm == i) {
if (ind == 0) {
//定位到第一个户所在位置
window.lpbContent.$refs.lpbContent.scrollTop = item.offsetTop;
window.lpbContent.$refs.lpbContent.scrollLeft = item.offsetLeft;
}
// item.style.border = '1px solid '+ val.color;
// 背景色高亮
item.style.backgroundColor = val.color;
}
});
});
}
},
immediate: true,
deep: true,
}
},
};
</script>
<style lang="scss" scoped>
.ch-wrap {
display: flex;
flex-direction: column-reverse;
.chTable {
// margin-left: -1px;
border-color: #e4ebf4 !important;
border-collapse: collapse;
border-spacing: 0;
// position: relative;
tr {
.floor {
min-width: 56px;
background: #e8f2ff;
border: 1px solid #acbae8;
}
&:first-child {
.floor {
border-radius: 4px 0px 0px 1px;
}
}
td {
min-width: 138px;
height: 64px;
line-height: 64px;
text-align: center;
cursor: pointer;
position: relative;
.hqszt {
display: inline-block;
width: 16px;
height: 16px;
font-size: 12px;
line-height: 16px;
position: absolute;
left: 6px;
top: 6px;
border: 1px solid;
border-radius: 3px 0px 3px 0px;
}
.lin {
color: #f7b500;
border-color: #f7b500;
}
.zheng {
color: #1ad6e1;
border-color: #1ad6e1;
}
.xian {
color: #45aefd;
border-color: #45aefd;
}
.dyzt {
user-select: none;
width: 138px;
height: 18px;
position: absolute;
bottom: 28px;
box-sizing: border-box;
padding: 0 6px;
li {
display: inline-block;
width: 18px;
height: 18px;
font-size: 12px;
line-height: 18px;
color: #ffffff;
border: 1px solid;
border-radius: 9px;
}
}
}
.tdSelect {
border: 1px solid ;
border-color: #5A78DE !important;
background-image: url("./images/tdSelect.png");
background-repeat: no-repeat;
background-position: right top;
background-size: 30px;
}
.hasBorder {
border-width: 1px;
border-style: solid;
}
}
}
}
</style>