|
@@ -1,29 +1,33 @@
|
|
|
<template>
|
|
|
<el-drawer title="关联的业务空间" :visible.sync="drawer" :direction="direction" :before-close="handleClose" size="20%" custom-class="room-count">
|
|
|
- <div class="drawer-body">
|
|
|
+ <div class="drawer-body" :style="{height:drawerBodyHeight}">
|
|
|
<div class="default-zone zone" v-show="1">
|
|
|
<p>默认业务空间</p>
|
|
|
- <div v-for="item in defaultZoneList" :key="item.RoomID" class="zoneItem">
|
|
|
- {{item.Name}}
|
|
|
- <i size="mini" class="el-icon-delete" title="删除" @click="deleteZoneItem('default')" v-if="!readonly"></i>
|
|
|
+ <div v-for="(item,index) in zoneList.default" :key="item.RoomID" class="zoneItem">
|
|
|
+ {{item.BuildLocalName}}-{{item.FloorLocalName}}-{{item.RoomLocalName || item.RoomName}}
|
|
|
+ <i size="mini" class="el-icon-delete" title="删除" @click="deleteZoneItem('default',index)" v-if="!readonly"></i>
|
|
|
+ </div>
|
|
|
+ <div class="zoneItem" style="border:none;padding:0;" v-if="!readonly">
|
|
|
+ <el-cascader placeholder="请选择" v-model="GeneralVal" :options="option.GeneralZone" :props="props" filterable @expand-change="expandChange"
|
|
|
+ @change="change" style="width:100%;">
|
|
|
+ </el-cascader>
|
|
|
</div>
|
|
|
- <el-cascader placeholder="请选择" v-model="GeneralVal" :options="option.GeneralZone" :props="props" filterable @expand-change="expandChange"
|
|
|
- @change="change">
|
|
|
- </el-cascader>
|
|
|
</div>
|
|
|
<div class="tenant-zone zone" v-show="1">
|
|
|
<p>租户业务空间</p>
|
|
|
- <div v-for="item in tenantZoneList" :key="item.RoomID" class="zoneItem">
|
|
|
- {{item.Name}}
|
|
|
- <i size="mini" class="el-icon-delete" title="删除" @click="deleteZoneItem('tenant')" v-if="!readonly"></i>
|
|
|
+ <div v-for="(item,index) in zoneList.tenant" :key="item.RoomID" class="zoneItem">
|
|
|
+ {{item.BuildLocalName}}-{{item.FloorLocalName}}-{{item.RoomLocalName || item.RoomName}}
|
|
|
+ <i size="mini" class="el-icon-delete" title="删除" @click="deleteZoneItem('tenant',index)" v-if="!readonly"></i>
|
|
|
</div>
|
|
|
- <div class="zoneItem" style="text-align:center;" @click="addZoneItem('tenant')" v-if="!readonly">
|
|
|
- <i class="iconfont icon-add-control" style="position:static"></i>
|
|
|
+ <div class="zoneItem" style="border:none;padding:0;" v-if="!readonly">
|
|
|
+ <el-cascader placeholder="请选择" v-model="TenantVal" :options="option.TenantZone" :props="props" filterable
|
|
|
+ @expand-change="expandChangeTenantZone" @change="changeTenantZone" style="width:100%;">
|
|
|
+ </el-cascader>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="btn" v-if="!readonly">
|
|
|
- <el-button type="primary" @click="save">保存</el-button>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="btn" v-if="!readonly">
|
|
|
+ <el-button type="primary" @click="save">保存</el-button>
|
|
|
</div>
|
|
|
</el-drawer>
|
|
|
</template>
|
|
@@ -31,16 +35,19 @@
|
|
|
import {
|
|
|
tnRelateTenantZone, //关联租户空间
|
|
|
tnRelateGeneralZone, //关联默认空间
|
|
|
+ tnRelateZone,// 关联业务空间
|
|
|
buildingQuery, //建筑查询
|
|
|
- queryZone, //业务空间查询GeneralZone-TenantZone
|
|
|
+ queryParentZone, //业务空间查询GeneralZone-TenantZone
|
|
|
} from '@/api/scan/request'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
drawer: false,
|
|
|
direction: 'rtl',
|
|
|
- defaultZoneList: [],
|
|
|
- tenantZoneList: [],
|
|
|
+ zoneList: {
|
|
|
+ default: [],
|
|
|
+ tenant: []
|
|
|
+ },
|
|
|
option: {
|
|
|
GeneralZone: [],
|
|
|
TenantZone: []
|
|
@@ -49,7 +56,9 @@ export default {
|
|
|
children: 'Floor'
|
|
|
},
|
|
|
GeneralVal: [],
|
|
|
- TenantVal: []
|
|
|
+ TenantVal: [],
|
|
|
+ curTenantId: '',
|
|
|
+ drawerBodyHeight: ''
|
|
|
}
|
|
|
},
|
|
|
props: {
|
|
@@ -57,6 +66,9 @@ export default {
|
|
|
default: true
|
|
|
}
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ this.drawerBodyHeight = document.body.clientHeight - 152 + 'px'
|
|
|
+ },
|
|
|
created() {
|
|
|
this.init();
|
|
|
},
|
|
@@ -89,6 +101,9 @@ export default {
|
|
|
expandChange(val) {
|
|
|
this.middleware(val, "GeneralZone")
|
|
|
},
|
|
|
+ expandChangeTenantZone(val) {
|
|
|
+ this.middleware(val, "TenantZone")
|
|
|
+ },
|
|
|
middleware(val, type) {
|
|
|
let filters = '';
|
|
|
if (val[0] == 'noknowBuild') { //未明确建筑
|
|
@@ -106,16 +121,18 @@ export default {
|
|
|
getZone(filters, type, selected) {
|
|
|
if (!filters) return;
|
|
|
let params = {
|
|
|
- zone: type,
|
|
|
- data: {
|
|
|
- Filters: filters,
|
|
|
- Orders: "createTime desc, RoomID asc",
|
|
|
- PageSize: 1000
|
|
|
- }
|
|
|
+ Cascade: [{ Name: 'building' }, { Name: 'floor' }],
|
|
|
+ Filters: `${filters};ObjectType='${type}'`,
|
|
|
+ Orders: "RoomID asc",
|
|
|
+ PageSize: 1000,
|
|
|
+ Projection: ["RoomID", "RoomLocalName", "RoomName", "ObjectType", "BuildingId", "FloorId"]
|
|
|
}
|
|
|
- queryZone(params, res => {
|
|
|
+ queryParentZone(params, res => {
|
|
|
if (res.Content.length) {
|
|
|
let tempArr = res.Content.map(t => {
|
|
|
+ t.BuildLocalName = t.Building ? t.Building.BuildLocalName : '未明确建筑';
|
|
|
+ t.FloorLocalName = t.Floor ? t.Floor.FloorLocalName : '未明确楼层';
|
|
|
+ delete t.Floor;
|
|
|
t.value = JSON.parse(JSON.stringify(t));
|
|
|
t.label = t.RoomLocalName || t.RoomName;
|
|
|
return t;
|
|
@@ -137,24 +154,59 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
change(val) {
|
|
|
- console.log(val)
|
|
|
+ let zoneObj = val[val.length - 1];
|
|
|
+ if (zoneObj.BuildLocalName == '未明确建筑') {
|
|
|
+ zoneObj.FloorLocalName = ''
|
|
|
+ }
|
|
|
+ if (this.zoneList.default.findIndex((item) => (item.RoomID == zoneObj.RoomID)) == -1) {
|
|
|
+ this.zoneList.default.push(zoneObj);
|
|
|
+ } else {
|
|
|
+ this.$message.warning('已有业务空间,请重新选择')
|
|
|
+ }
|
|
|
+ this.GeneralVal = [];
|
|
|
},
|
|
|
- showDrawer() {
|
|
|
+ changeTenantZone(val) {
|
|
|
+ let zoneObj = val[val.length - 1];
|
|
|
+ if (zoneObj.BuildLocalName == '未明确建筑') {
|
|
|
+ zoneObj.FloorLocalName = ''
|
|
|
+ }
|
|
|
+ if (this.zoneList.tenant.findIndex((item) => (item.RoomID == zoneObj.RoomID)) == -1) {
|
|
|
+ this.zoneList.tenant.push(zoneObj);
|
|
|
+ } else {
|
|
|
+ this.$message.warning('已有业务空间,请重新选择')
|
|
|
+ }
|
|
|
+ this.TenantVal = [];
|
|
|
+ },
|
|
|
+ showDrawer(id) {
|
|
|
+ this.curTenantId = id;
|
|
|
this.drawer = true;
|
|
|
},
|
|
|
handleClose(done) {
|
|
|
+ this.zoneList.default = [];
|
|
|
+ this.zoneList.tenant = [];
|
|
|
done();
|
|
|
},
|
|
|
// 删除
|
|
|
- deleteZoneItem(type) {
|
|
|
- console.log(type)
|
|
|
- },
|
|
|
- // 添加
|
|
|
- addZoneItem(type) {
|
|
|
- console.log(type)
|
|
|
+ deleteZoneItem(type, index) {
|
|
|
+ this.zoneList[type].splice(index, 1);
|
|
|
},
|
|
|
- addZone() { },
|
|
|
- save() { }
|
|
|
+ save() {
|
|
|
+ let pa = {
|
|
|
+ SpaceIdList: [],
|
|
|
+ TenantId: this.curTenantId
|
|
|
+ }
|
|
|
+ this.zoneList.default.map(t => {
|
|
|
+ pa.SpaceIdList.push(t.RoomID)
|
|
|
+ })
|
|
|
+ this.zoneList.tenant.map(t => {
|
|
|
+ pa.SpaceIdList.push(t.RoomID)
|
|
|
+ })
|
|
|
+ tnRelateZone(pa, res => {
|
|
|
+ this.$message.success('关联成功');
|
|
|
+ this.$emit('refresh');
|
|
|
+ this.drawer = false;
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -162,8 +214,8 @@ export default {
|
|
|
.room-count {
|
|
|
.drawer-body {
|
|
|
position: relative;
|
|
|
- padding: 0 10px;
|
|
|
- height: 100%;
|
|
|
+ padding: 10px 10px 30px;
|
|
|
+ overflow-y: auto;
|
|
|
.zone {
|
|
|
padding: 6px 14px 22px;
|
|
|
box-shadow: 0 0 3px #cacaca;
|
|
@@ -172,14 +224,18 @@ export default {
|
|
|
}
|
|
|
.zoneItem {
|
|
|
position: relative;
|
|
|
- padding: 2px 10px;
|
|
|
+ padding: 2px 34px 2px 10px;
|
|
|
border: 1px solid #ccc;
|
|
|
border-radius: 4px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
i {
|
|
|
position: absolute;
|
|
|
right: 10px;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
.zoneItem + .zoneItem {
|
|
@@ -189,13 +245,13 @@ export default {
|
|
|
.zone + .zone {
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
- .btn {
|
|
|
- position: absolute;
|
|
|
- width: calc(100% - 20px);
|
|
|
- bottom: 20px;
|
|
|
- right: 20px;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ position: absolute;
|
|
|
+ width: calc(100% - 20px);
|
|
|
+ bottom: 20px;
|
|
|
+ right: 20px;
|
|
|
+ text-align: right;
|
|
|
}
|
|
|
}
|
|
|
</style>
|