jiangyuying
2 years ago
8 changed files with 2874 additions and 2507 deletions
@ -1,883 +0,0 @@ |
|||||
<template> |
|
||||
<div class="div_main"> |
|
||||
|
|
||||
<div :style="{height:rowHeight}" |
|
||||
class="div_tree"> |
|
||||
<el-input placeholder="输入关键字进行过滤" |
|
||||
v-model="filterText"> |
|
||||
</el-input> |
|
||||
<el-scrollbar :style="{height:treeHeight}" |
|
||||
class="scrollar"> |
|
||||
<el-tree ref="ref_tree" |
|
||||
v-loading="treeLoading" |
|
||||
class="filter_tree" |
|
||||
:data="treeData" |
|
||||
:props="defaultProps" |
|
||||
:highlight-current="true" |
|
||||
node-key="id" |
|
||||
:default-expanded-keys="openNodes" |
|
||||
:expand-on-click-node="false" |
|
||||
:filter-node-method="filterNode" |
|
||||
@node-click="handleNodeClick"> |
|
||||
|
|
||||
<span slot-scope="{ node, data }" |
|
||||
class="custom-tree-node"> |
|
||||
<span :id="data.id">{{ data.showName }}</span> |
|
||||
</span> |
|
||||
</el-tree> |
|
||||
</el-scrollbar> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<div :style="{height:rowHeight}" |
|
||||
class=div_left> |
|
||||
|
|
||||
<div class="div_search"> |
|
||||
<el-form :inline="true" |
|
||||
ref="ref_searchform" |
|
||||
:label-width="'100px'"> |
|
||||
|
|
||||
<el-form-item label="房主姓名" |
|
||||
prop="ownerName"> |
|
||||
<el-input v-model="ownerName" |
|
||||
class="item_width_normal" |
|
||||
size="small" |
|
||||
clearable |
|
||||
placeholder="请输入内容"> |
|
||||
|
|
||||
</el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="联系方式" |
|
||||
prop="ownerPhone"> |
|
||||
<el-input v-model="ownerPhone" |
|
||||
class="item_width_normal" |
|
||||
size="small" |
|
||||
clearable |
|
||||
placeholder="请输入联系电话"> |
|
||||
</el-input> |
|
||||
|
|
||||
</el-form-item> |
|
||||
|
|
||||
<el-form-item label="房屋状态" |
|
||||
prop="rentFlag"> |
|
||||
<el-select class="item_width_normal" |
|
||||
v-model="rentFlag" |
|
||||
placeholder="请选择" |
|
||||
size="small" |
|
||||
clearable> |
|
||||
<el-option v-for="item in rentList" |
|
||||
:key="item.value" |
|
||||
:label="item.label" |
|
||||
:value="item.value"> |
|
||||
</el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<el-form-item label="房屋用途" |
|
||||
prop="purpose"> |
|
||||
<el-select v-model="purpose" |
|
||||
class="item_width_normal" |
|
||||
placeholder="请选择" |
|
||||
size="small" |
|
||||
clearable> |
|
||||
<el-option v-for="item in purposeArr" |
|
||||
:key="item.dictValue" |
|
||||
:label="item.dictName" |
|
||||
:value="item.dictValue"> |
|
||||
</el-option> |
|
||||
</el-select> |
|
||||
|
|
||||
</el-form-item> |
|
||||
|
|
||||
<el-form-item label="备注" |
|
||||
prop="remark"> |
|
||||
<el-input v-model="remark" |
|
||||
class="item_width_normal" |
|
||||
size="small" |
|
||||
clearable |
|
||||
placeholder="请输入备注"> |
|
||||
</el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="更新时间" |
|
||||
prop="updateStartDate"> |
|
||||
<el-date-picker v-model="updateStartDate" |
|
||||
:picker-options="startPickerOptions" |
|
||||
class="item_width_daterange" |
|
||||
size="small" |
|
||||
type="date" |
|
||||
value-format="yyyyMMdd" |
|
||||
value="yyyy-MM-dd" |
|
||||
placeholder="开始时间"> |
|
||||
</el-date-picker> |
|
||||
<span class="data-tag">至</span> |
|
||||
<el-date-picker v-model="updateEndDate" |
|
||||
:picker-options="endPickerOptions" |
|
||||
class="item_width_daterange data-tag" |
|
||||
size="small" |
|
||||
type="date" |
|
||||
value-format="yyyyMMdd" |
|
||||
value="yyyy-MM-dd" |
|
||||
placeholder="结束时间"> |
|
||||
</el-date-picker> |
|
||||
</el-form-item> |
|
||||
<span class="div_search_label">所属房屋：</span> |
|
||||
<!-- <el-form-item label="所属房屋"> --> |
|
||||
|
|
||||
<el-form-item prop="neighborHoodId"> |
|
||||
<el-select v-model.trim="neighborHoodId" |
|
||||
:disabled="vDisabled" |
|
||||
placeholder="小区" |
|
||||
size="small" |
|
||||
clearable |
|
||||
class="item_width_buildcascader" |
|
||||
@change="handleChangeV"> |
|
||||
<el-option v-for="item in optionsV" |
|
||||
:key="item.value" |
|
||||
:label="item.label" |
|
||||
:value="item.value"> |
|
||||
</el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
<el-form-item prop="buildingId"> |
|
||||
<el-select v-model.trim="buildingId" |
|
||||
placeholder="楼号" |
|
||||
:disabled="!neighborHoodId || bDisabled" |
|
||||
size="small" |
|
||||
clearable |
|
||||
class="item_width_buildcascader" |
|
||||
@change="handleChangeB"> |
|
||||
<el-option v-for="item in optionsB" |
|
||||
:key="item.value" |
|
||||
:label="item.label" |
|
||||
:value="item.value"> |
|
||||
</el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
<el-form-item prop="buildingUnitId"> |
|
||||
<el-select v-model.trim="buildingUnitId" |
|
||||
placeholder="单元" |
|
||||
size="small" |
|
||||
:disabled="!buildingId" |
|
||||
clearable |
|
||||
class="item_width_buildcascader" |
|
||||
@change="handleChangeD"> |
|
||||
<el-option v-for="item in optionsD" |
|
||||
:key="item.value" |
|
||||
:label="item.label" |
|
||||
:value="item.value"> |
|
||||
</el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
<el-form-item prop="houseId"> |
|
||||
<el-select v-model.trim="houseId" |
|
||||
placeholder="房号" |
|
||||
:disabled="!buildingUnitId" |
|
||||
size="small" |
|
||||
clearable |
|
||||
class="item_width_buildcascader"> |
|
||||
<el-option v-for="item in optionsH" |
|
||||
:key="item.value" |
|
||||
:label="item.label" |
|
||||
:value="item.value"> |
|
||||
</el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<!-- </el-form-item> --> |
|
||||
<div class="div_search_btn"> |
|
||||
<el-button style="margin-left:30px" |
|
||||
size="small" |
|
||||
class="diy-button--blue" |
|
||||
@click="handleSearch">查询</el-button> |
|
||||
<el-button style="margin-left:10px" |
|
||||
size="small" |
|
||||
class="diy-button--gray" |
|
||||
@click="resetSearch">重置</el-button> |
|
||||
</div> |
|
||||
</el-form> |
|
||||
|
|
||||
</div> |
|
||||
<div class="div_table"> |
|
||||
<build-table v-if="selTreeObj.level==='neighborHood'&&!showRoomTable" |
|
||||
ref="ref_neighTable" |
|
||||
:staffAgencyId="staffAgencyId" |
|
||||
:showImportBtn="showImportBtn" |
|
||||
:ownerName="ownerName" |
|
||||
:ownerPhone="ownerPhone" |
|
||||
:rentFlag="rentFlag" |
|
||||
:purpose="purpose" |
|
||||
:remark="remark" |
|
||||
:updateStartDate="updateStartDate" |
|
||||
:updateEndDate="updateEndDate" |
|
||||
@toNextLevel="toNextLevel" |
|
||||
@refreshTree="refreshTree"></build-table> |
|
||||
|
|
||||
<room-table v-if="showRoomTable||selTreeObj.level==='building'" |
|
||||
:staffAgencyId="staffAgencyId" |
|
||||
:showImportBtn="showImportBtn" |
|
||||
:ownerName="ownerName" |
|
||||
:ownerPhone="ownerPhone" |
|
||||
:rentFlag="rentFlag" |
|
||||
:purpose="purpose" |
|
||||
:neighborHoodId="neighborHoodId" |
|
||||
:buildingId="buildingId" |
|
||||
:buildingUnitId="buildingUnitId" |
|
||||
:houseId="houseId" |
|
||||
:remark="remark" |
|
||||
:updateStartDate="updateStartDate" |
|
||||
:updateEndDate="updateEndDate" |
|
||||
ref="ref_buildingTable" |
|
||||
@refreshTree="refreshTree"></room-table> |
|
||||
|
|
||||
<community-table v-if="selTreeObj.level!=='building'&&selTreeObj.level!=='neighborHood'&&!showRoomTable" |
|
||||
@toNextLevel="toNextLevel" |
|
||||
:staffAgencyId="staffAgencyId" |
|
||||
:ownerName="ownerName" |
|
||||
:ownerPhone="ownerPhone" |
|
||||
:rentFlag="rentFlag" |
|
||||
:purpose="purpose" |
|
||||
:remark="remark" |
|
||||
:updateStartDate="updateStartDate" |
|
||||
:updateEndDate="updateEndDate" |
|
||||
ref="ref_communityTable" |
|
||||
@refreshTree="refreshTree"></community-table> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import CDialog from '@c/CDialog' |
|
||||
import communityTable from './communityTable' |
|
||||
import buildTable from './buildTable' |
|
||||
import roomTable from './roomTable' |
|
||||
import { requestPost } from "@/js/dai/request"; |
|
||||
import { mapGetters } from 'vuex' |
|
||||
import { Loading } from 'element-ui' // 引入Loading服务 |
|
||||
import nextTick from 'dai-js/tools/nextTick' |
|
||||
|
|
||||
let loading // 加载动画 |
|
||||
export default { |
|
||||
data () { |
|
||||
let endDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|
||||
let nowData = Date.now() |
|
||||
if (this.updateStartDate) { |
|
||||
let startTime = new Date(this.updateStartDate) |
|
||||
return time.getTime() > nowData || time.getTime() < startTime || time.getTime() === startTime |
|
||||
} else { |
|
||||
return time.getTime() > nowData |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
let startDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|
||||
let nowData = Date.now() |
|
||||
return time.getTime() > nowData |
|
||||
} |
|
||||
return { |
|
||||
filterText: '', |
|
||||
treeLoading: true, |
|
||||
treeData: [], |
|
||||
openNodes: [], |
|
||||
defaultProps: { |
|
||||
children: 'children', |
|
||||
label: 'showName' |
|
||||
}, |
|
||||
|
|
||||
selTreeObj: {}, |
|
||||
|
|
||||
centerPoint: [], |
|
||||
staffAgencyId: localStorage.getItem("agencyId"), |
|
||||
showImportBtn: false, |
|
||||
|
|
||||
rentList: [ |
|
||||
{ |
|
||||
value: '1', |
|
||||
label: '出租' |
|
||||
}, |
|
||||
{ |
|
||||
value: '2', |
|
||||
label: '闲置' |
|
||||
}, |
|
||||
{ |
|
||||
value: '0', |
|
||||
label: '自住' |
|
||||
}, |
|
||||
{ |
|
||||
value: '3', |
|
||||
label: '未出售' |
|
||||
}, |
|
||||
], |
|
||||
ownerName: '', |
|
||||
ownerPhone: '', |
|
||||
rentFlag: '', |
|
||||
purpose: '', |
|
||||
remark: '', |
|
||||
updateStartDate: '', |
|
||||
updateEndDate: '', |
|
||||
showRoomTable: false, |
|
||||
selObj: {}, |
|
||||
purposeArr: [ |
|
||||
{ dictValue: '1', dictName: '住宅' }, |
|
||||
{ dictValue: '2', dictName: '商业' }, |
|
||||
{ dictValue: '3', dictName: '办公' }, |
|
||||
{ dictValue: '4', dictName: '工业' }, |
|
||||
{ dictValue: '5', dictName: '仓储' }, |
|
||||
{ dictValue: '6', dictName: '商住混用' }, |
|
||||
{ dictValue: '7', dictName: '其他' } |
|
||||
], |
|
||||
endPickerOptions: { |
|
||||
disabledDate: endDisabledDate |
|
||||
}, |
|
||||
startPickerOptions: { |
|
||||
disabledDate: startDisabledDate |
|
||||
}, |
|
||||
|
|
||||
optionsV: [], |
|
||||
optionsB: [], |
|
||||
optionsH: [], |
|
||||
optionsD: [], |
|
||||
neighborHoodId: "", |
|
||||
buildingId: "", |
|
||||
buildingUnitId: "", |
|
||||
houseId: "", |
|
||||
selGridId: '', |
|
||||
selAgencyId: '', |
|
||||
|
|
||||
vDisabled: false, |
|
||||
bDisabled: false, |
|
||||
} |
|
||||
}, |
|
||||
components: { |
|
||||
CDialog |
|
||||
}, |
|
||||
async mounted () { |
|
||||
this.treeLoading = true |
|
||||
|
|
||||
await this.loadOrgData() |
|
||||
await this.loadTree() |
|
||||
// await this.loadOpenNode() |
|
||||
this.getValiheList('', '') |
|
||||
|
|
||||
await this.$refs['ref_communityTable'].loadTable(true, this.selTreeObj) |
|
||||
if (this.treeData.length > 0) { |
|
||||
this.$nextTick(() => { |
|
||||
// ref_tree 元素的ref value 绑定的node-key |
|
||||
this.$refs.ref_tree.setCurrentKey(this.treeData[0].id); |
|
||||
}); |
|
||||
} |
|
||||
this.treeLoading = false |
|
||||
|
|
||||
}, |
|
||||
computed: { |
|
||||
rowHeight () { |
|
||||
|
|
||||
return this.$store.state.inIframe ? this.clientHeight - 160 + this.iframeHeight + 'px' : this.clientHeight - 160 + 'px' |
|
||||
|
|
||||
}, |
|
||||
treeHeight () { |
|
||||
return this.$store.state.inIframe ? this.clientHeight - 215 + this.iframeHeight + 'px' : this.clientHeight - 215 + 'px' |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
...mapGetters(['clientHeight', 'iframeHeight']) |
|
||||
}, |
|
||||
methods: { |
|
||||
handleChangeV (val) { |
|
||||
|
|
||||
this.buildingId = ""; |
|
||||
this.buildingUnitId = ""; |
|
||||
this.houseId = ""; |
|
||||
this.getBuildList(); |
|
||||
// this.getUniList(); |
|
||||
// this.getHouseList(); |
|
||||
}, |
|
||||
handleChangeB (val) { |
|
||||
|
|
||||
this.buildingUnitId = ""; |
|
||||
this.houseId = ""; |
|
||||
this.getUniList(); |
|
||||
// this.getHouseList(); |
|
||||
}, |
|
||||
handleChangeD () { |
|
||||
this.houseId = ""; |
|
||||
this.getHouseList(); |
|
||||
}, |
|
||||
|
|
||||
async getValiheList () { |
|
||||
const { user } = this.$store.state; |
|
||||
if (!this.selGridId) { |
|
||||
this.selAgencyId = this.selAgencyId ? this.selAgencyId : user.agencyId |
|
||||
} |
|
||||
|
|
||||
const url = "/gov/org/icneighborhood/neighborhood-options"; |
|
||||
// const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/epidemicPrevention/page" |
|
||||
let params = { |
|
||||
gridId: this.selGridId, |
|
||||
agencyId: this.selAgencyId, |
|
||||
isPage: false |
|
||||
}; |
|
||||
|
|
||||
const { data, code, msg } = await requestPost(url, params); |
|
||||
|
|
||||
if (code === 0) { |
|
||||
this.optionsV = data; |
|
||||
|
|
||||
this.neighborHoodId = "" |
|
||||
this.buildingId = ""; |
|
||||
this.buildingUnitId = ""; |
|
||||
this.houseId = ""; |
|
||||
} else { |
|
||||
this.$message.error(msg); |
|
||||
} |
|
||||
|
|
||||
|
|
||||
}, |
|
||||
|
|
||||
async getBuildList () { |
|
||||
const url = "/gov/org/icbuilding/buildingoption"; |
|
||||
// const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/epidemicPrevention/page" |
|
||||
let params = { |
|
||||
neighborHoodId: this.neighborHoodId, |
|
||||
}; |
|
||||
|
|
||||
const { data, code, msg } = await requestPost(url, params); |
|
||||
|
|
||||
if (code === 0) { |
|
||||
this.optionsB = data; |
|
||||
this.buildingId = ""; |
|
||||
this.buildingUnitId = ""; |
|
||||
this.houseId = ""; |
|
||||
} else { |
|
||||
this.$message.error(msg); |
|
||||
} |
|
||||
|
|
||||
|
|
||||
}, |
|
||||
async getUniList () { |
|
||||
|
|
||||
const url = "/gov/org/icbuildingunit/unitoption"; |
|
||||
// const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/epidemicPrevention/page" |
|
||||
let params = { |
|
||||
buildingId: this.buildingId, |
|
||||
}; |
|
||||
|
|
||||
const { data, code, msg } = await requestPost(url, params); |
|
||||
|
|
||||
if (code === 0) { |
|
||||
this.optionsD = data; |
|
||||
this.buildingUnitId = ""; |
|
||||
this.houseId = ""; |
|
||||
} else { |
|
||||
this.$message.error(msg); |
|
||||
} |
|
||||
|
|
||||
|
|
||||
}, |
|
||||
getHouseList () { |
|
||||
this.$http |
|
||||
.post("/gov/org/ichouse/houseoption", { unitId: this.buildingUnitId }) |
|
||||
.then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg); |
|
||||
} else { |
|
||||
|
|
||||
this.optionsH = res.data; |
|
||||
this.houseId = ""; |
|
||||
} |
|
||||
}) |
|
||||
.catch(() => { |
|
||||
return this.$message.error("网络错误"); |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
handleSearch () { |
|
||||
// if (this.ownerName || this.ownerPhone || this.rentFlag || this.purpose || this.remark) { |
|
||||
this.showRoomTable = true |
|
||||
|
|
||||
this.$nextTick(() => { |
|
||||
this.$refs['ref_buildingTable'].loadTable('search', this.selTreeObj) |
|
||||
}) |
|
||||
// } else { |
|
||||
// this.$message.warning('请输入查询条件') |
|
||||
// } |
|
||||
|
|
||||
|
|
||||
}, |
|
||||
|
|
||||
//重置搜索条件 |
|
||||
resetSearch () { |
|
||||
this.ownerName = '' |
|
||||
this.ownerPhone = '' |
|
||||
this.rentFlag = '' |
|
||||
this.purpose = '' |
|
||||
this.remark = '' |
|
||||
this.updateStartDate = '' |
|
||||
this.updateEndDate = '' |
|
||||
this.neighborHoodId = '' |
|
||||
this.buildingId = '' |
|
||||
this.buildingUnitId = '' |
|
||||
this.houseId = '' |
|
||||
|
|
||||
this.pageSize = 10 |
|
||||
this.pageNo = 1 |
|
||||
// this.handleNodeClick(this.selObj) |
|
||||
// this.loadTable() |
|
||||
}, |
|
||||
|
|
||||
async loadOpenNode () { |
|
||||
const url = "/gov/org/building/tree-ids" |
|
||||
let params = {} |
|
||||
|
|
||||
const { data, code, msg } = await requestPost(url, params) |
|
||||
|
|
||||
if (code === 0) { |
|
||||
this.openNodes = data |
|
||||
|
|
||||
|
|
||||
} else { |
|
||||
this.$message.error(msg) |
|
||||
} |
|
||||
}, |
|
||||
async loadTree (isRefresh) { |
|
||||
const url = "/gov/org/building/treelist" |
|
||||
let params = {} |
|
||||
|
|
||||
const { data, code, msg } = await requestPost(url, params) |
|
||||
|
|
||||
if (code === 0) { |
|
||||
this.openNodes = [] |
|
||||
this.openNodes.push(data[0].id) |
|
||||
|
|
||||
this.treeData = data |
|
||||
if (!isRefresh && data.length > 0) { |
|
||||
|
|
||||
this.selTreeObj = data[0] |
|
||||
if (!this.selTreeObj.latitude) { |
|
||||
this.selTreeObj.latitude = this.centerPoint[0] |
|
||||
} |
|
||||
|
|
||||
if (!this.selTreeObj.longitude) { |
|
||||
this.selTreeObj.longitude = this.centerPoint[1] |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} else { |
|
||||
this.$message.error(msg) |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
//加载组织数据 |
|
||||
async loadOrgData () { |
|
||||
const url = "/gov/org/agency/maporg" |
|
||||
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/maporg" |
|
||||
let params = {} |
|
||||
|
|
||||
const { data, code, msg } = await requestPost(url, params) |
|
||||
|
|
||||
if (code === 0) { |
|
||||
this.centerPoint = [] |
|
||||
|
|
||||
this.centerPoint.push(data.latitude) |
|
||||
this.centerPoint.push(data.longitude) |
|
||||
|
|
||||
} else { |
|
||||
this.$message.error(msg) |
|
||||
} |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
async handleNodeClick (obj) { |
|
||||
this.ownerName = '' |
|
||||
this.ownerPhone = '' |
|
||||
this.rentFlag = '' |
|
||||
this.purpose = '' |
|
||||
this.remark = '' |
|
||||
this.updateStartDate = '' |
|
||||
this.updateEndDate = '' |
|
||||
this.showRoomTable = false |
|
||||
|
|
||||
this.selObj = JSON.parse(JSON.stringify(obj)) |
|
||||
this.getTreeObj(obj) |
|
||||
await nextTick(1000) |
|
||||
this.vDisabled = false |
|
||||
this.bDisabled = false |
|
||||
if (obj.level === 'building') {//点击楼栋 |
|
||||
this.$refs['ref_buildingTable'].loadTable('tree', this.selTreeObj) |
|
||||
this.selAgencyId = '' |
|
||||
this.selGridId = '' |
|
||||
await this.getValiheList() |
|
||||
this.neighborHoodId = this.selTreeObj.pid |
|
||||
await this.getBuildList() |
|
||||
this.buildingId = this.selTreeObj.id |
|
||||
await this.getUniList() |
|
||||
this.vDisabled = true |
|
||||
this.bDisabled = true |
|
||||
|
|
||||
} else if (obj.level === 'neighborHood') {//点击小区 |
|
||||
this.$refs['ref_neighTable'].loadTable(true, this.selTreeObj) |
|
||||
this.selAgencyId = '' |
|
||||
this.selGridId = '' |
|
||||
await this.getValiheList() |
|
||||
this.neighborHoodId = this.selTreeObj.id |
|
||||
await this.getBuildList() |
|
||||
this.vDisabled = true |
|
||||
} else { |
|
||||
this.$refs['ref_communityTable'].loadTable(true, this.selTreeObj) |
|
||||
|
|
||||
if (obj.level === 'grid') { |
|
||||
this.selAgencyId = '' |
|
||||
this.selGridId = this.selTreeObj.id |
|
||||
} else { |
|
||||
this.selAgencyId = this.selTreeObj.id |
|
||||
this.selGridId = '' |
|
||||
} |
|
||||
this.getValiheList('', '') |
|
||||
} |
|
||||
|
|
||||
|
|
||||
}, |
|
||||
|
|
||||
//添加小区结束 |
|
||||
async refreshTree () { |
|
||||
this.treeLoading = true |
|
||||
await this.loadTree(this.selTreeObj.id) |
|
||||
this.$nextTick(() => { |
|
||||
// ref_tree 元素的ref value 绑定的node-key |
|
||||
this.$refs.ref_tree.setCurrentKey(this.selTreeObj.id); |
|
||||
}); |
|
||||
this.treeLoading = false |
|
||||
}, |
|
||||
|
|
||||
//进入下一级 |
|
||||
toNextLevel (row, level) { |
|
||||
|
|
||||
if (level === 'community') { |
|
||||
this.selTreeObj = this.$refs.ref_tree.getNode(row.neighborHoodId).data |
|
||||
this.openNodes.push(this.selTreeObj.id) |
|
||||
} else { |
|
||||
this.selTreeObj = this.$refs.ref_tree.getNode(row.buildingId).data |
|
||||
} |
|
||||
|
|
||||
|
|
||||
this.handleNodeClick(this.selTreeObj) |
|
||||
this.$nextTick(() => { |
|
||||
// ref_tree 元素的ref value 绑定的node-key |
|
||||
this.$refs.ref_tree.setCurrentKey(this.selTreeObj.id); |
|
||||
}); |
|
||||
|
|
||||
const node = document.getElementById(this.selTreeObj.id) // 通过Id获取到对应的dom元素 |
|
||||
setTimeout(() => { |
|
||||
if (node) { |
|
||||
this.$nextTick(() => { |
|
||||
node.scrollIntoView({ block: 'center' }) // 通过scrollIntoView方法将对应的dom元素定位到可见区域 【block: 'center'】这个属性是在垂直方向居中显示 |
|
||||
}) |
|
||||
} |
|
||||
}, 100) |
|
||||
|
|
||||
|
|
||||
}, |
|
||||
|
|
||||
//解析树数据 |
|
||||
getTreeObj (obj) { |
|
||||
// 树接口： |
|
||||
// 组织：组织id、组织名称、type、经度、纬度 |
|
||||
// 小区：小区id、小区名称、type、所属网格id、所属网格名称、所属组织id、所属组织名称、经度、纬度 |
|
||||
// 楼：楼id、楼名称、type、所属小区id、所属小区名称 |
|
||||
if (obj.level === 'building') {//点击楼栋 |
|
||||
let neighborHoodNode = this.$refs.ref_tree.getNode(obj.pid)//所属小区 |
|
||||
|
|
||||
let gridNode = this.$refs.ref_tree.getNode(neighborHoodNode.data.pid)//所属网格 |
|
||||
let agencyNode = this.$refs.ref_tree.getNode(gridNode.data.pid)//所属社区 |
|
||||
obj.agencyId = agencyNode.data.id |
|
||||
obj.agencyName = agencyNode.data.label |
|
||||
obj.gridId = gridNode.data.id |
|
||||
obj.gridName = gridNode.data.label |
|
||||
obj.neighborHoodId = neighborHoodNode.data.id |
|
||||
obj.neighborHoodName = neighborHoodNode.data.label |
|
||||
if (obj.agencyId === this.staffAgencyId) { |
|
||||
this.showImportBtn = true |
|
||||
} else { |
|
||||
this.showImportBtn = false |
|
||||
} |
|
||||
|
|
||||
} else if (obj.level === 'neighborHood') {//点击小区 |
|
||||
let gridNode = this.$refs.ref_tree.getNode(obj.pid) |
|
||||
let agencyNode = this.$refs.ref_tree.getNode(gridNode.data.pid) |
|
||||
obj.gridId = gridNode.data.id |
|
||||
obj.gridName = gridNode.data.label |
|
||||
obj.agencyId = agencyNode.data.id |
|
||||
obj.agencyName = agencyNode.data.label |
|
||||
if (obj.agencyId === this.staffAgencyId) { |
|
||||
this.showImportBtn = true |
|
||||
} else { |
|
||||
this.showImportBtn = false |
|
||||
} |
|
||||
|
|
||||
} else { |
|
||||
|
|
||||
} |
|
||||
|
|
||||
if (!obj.latitude) { |
|
||||
obj.latitude = this.centerPoint[0] |
|
||||
} |
|
||||
|
|
||||
if (!obj.longitude) { |
|
||||
obj.longitude = this.centerPoint[1] |
|
||||
} |
|
||||
this.selTreeObj = obj |
|
||||
console.log('selTreeObj', this.selTreeObj) |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
filterNode (value, data) { |
|
||||
if (!value) return true; |
|
||||
return data.label.indexOf(value) !== -1; |
|
||||
}, |
|
||||
|
|
||||
// 开启加载动画 |
|
||||
startLoading () { |
|
||||
loading = Loading.service({ |
|
||||
lock: true, // 是否锁定 |
|
||||
text: '正在加载……', // 加载中需要显示的文字 |
|
||||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|
||||
}) |
|
||||
}, |
|
||||
// 结束加载动画 |
|
||||
endLoading () { |
|
||||
// clearTimeout(timer); |
|
||||
if (loading) { |
|
||||
loading.close() |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
filterText (val) { |
|
||||
this.$refs.ref_tree.filter(val); |
|
||||
} |
|
||||
}, |
|
||||
components: { |
|
||||
communityTable, buildTable, roomTable |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
|
|
||||
<style> |
|
||||
/* .aui-content > .el-tabs > .el-tabs__content { |
|
||||
padding: 0px; |
|
||||
} */ |
|
||||
|
|
||||
.el-tree-node:focus > .el-tree-node__content { |
|
||||
/* background-color: #ccc !important; */ |
|
||||
color: #2195fe; |
|
||||
} |
|
||||
</style> |
|
||||
|
|
||||
<style lang="scss" scoped > |
|
||||
@import "@/assets/scss/modules/visual/communityManage.scss"; |
|
||||
@import "@/assets/scss/modules/management/list-main.scss"; |
|
||||
</style> |
|
||||
|
|
||||
<style lang="scss" scoped > |
|
||||
.div_main { |
|
||||
display: flex; |
|
||||
} |
|
||||
.scrollar { |
|
||||
margin-top: 10px; |
|
||||
/deep/ |
|
||||
.el-tree--highlight-current |
|
||||
.el-tree-node.is-current |
|
||||
> .el-tree-node__content { |
|
||||
background-color: #e1ecff; |
|
||||
border-radius: 3px; |
|
||||
} |
|
||||
|
|
||||
/deep/ .el-tree-node:focus > .el-tree-node__content { |
|
||||
color: #0043c8; |
|
||||
// background-color: #fff; |
|
||||
} |
|
||||
/deep/ .el-tree-node__expand-icon { |
|
||||
color: #0043c8; |
|
||||
border: 1px solid #e1ecff; |
|
||||
background-color: #e1ecff; |
|
||||
padding: 0px; |
|
||||
margin-right: 8px; |
|
||||
font-size: 9px; |
|
||||
} |
|
||||
|
|
||||
/deep/.el-tree { |
|
||||
flex: 1; |
|
||||
|
|
||||
.el-tree-node { |
|
||||
margin-left: 2px; |
|
||||
} |
|
||||
|
|
||||
//原有的箭头 去掉 |
|
||||
.el-icon svg { |
|
||||
display: none; |
|
||||
height: 0; |
|
||||
width: 0; |
|
||||
} |
|
||||
//引入图标的位置 |
|
||||
.el-tree-node__expand-icon { |
|
||||
// position: absolute; |
|
||||
// left: 2px; |
|
||||
// 图标是否旋转，如果是箭头类型的，可以设置旋转90度。 |
|
||||
.expanded { |
|
||||
transform: rotate(90deg); |
|
||||
} |
|
||||
// 未展开的节点 |
|
||||
&:before { |
|
||||
// content: "\008B"; |
|
||||
// content: "\008B"; |
|
||||
font-size: 12px; |
|
||||
color: #0043c8; |
|
||||
} |
|
||||
} |
|
||||
// 叶子节点（不显示图标） |
|
||||
.is-leaf.el-tree-node__expand-icon::before { |
|
||||
// display: none; |
|
||||
// background: none !important; |
|
||||
// border: 0px; |
|
||||
|
|
||||
// content: ""; |
|
||||
// width: 18px; |
|
||||
// height: 18px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.div_tree { |
|
||||
margin: 7px 8px 7px 7px; |
|
||||
/deep/ .el-scrollbar__wrap { |
|
||||
overflow-x: hidden !important; |
|
||||
} |
|
||||
|
|
||||
//搜索输入框样式 |
|
||||
/deep/ .el-input--medium .el-input__inner { |
|
||||
height: 27px; |
|
||||
border-radius: 0; |
|
||||
} |
|
||||
flex: 0 0 280px; |
|
||||
background-color: #f6f6f6; |
|
||||
border: 1px solid #d3dce6; |
|
||||
// border-radius: 5px; |
|
||||
padding: 19px 15px; |
|
||||
overflow-y: hidden; |
|
||||
} |
|
||||
|
|
||||
.filter_tree { |
|
||||
overflow-x: auto; |
|
||||
background-color: #f6f6f6; |
|
||||
margin-top: 5px; |
|
||||
} |
|
||||
|
|
||||
.div_left { |
|
||||
// flex: 1; |
|
||||
width: calc(100% - 300px); |
|
||||
} |
|
||||
</style> |
|
||||
|
|
||||
|
|
||||
|
|
||||
File diff suppressed because it is too large
File diff suppressed because it is too large
Loading…
Reference in new issue