You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
497 lines
13 KiB
497 lines
13 KiB
<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_table">
|
|
<div class="div_search">
|
|
<div class="resi-cell">
|
|
<div class="resi-cell-label">房主姓名</div>
|
|
<div class="resi-cell-value">
|
|
<el-input v-model="ownerName"
|
|
class="resi-cell-input"
|
|
size="small"
|
|
clearable
|
|
placeholder="请输入内容">
|
|
</el-input>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="resi-cell">
|
|
<div class="resi-cell-label">房主手机</div>
|
|
<div class="resi-cell-value">
|
|
<el-input v-model="ownerPhone"
|
|
class="resi-cell-input"
|
|
size="small"
|
|
clearable
|
|
placeholder="请输入内容">
|
|
</el-input>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="resi-cell">
|
|
<div class="resi-cell-label">房屋状态</div>
|
|
<div class="resi-cell-value">
|
|
|
|
<el-select class="item_width_1"
|
|
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>
|
|
|
|
</div>
|
|
</div>
|
|
<el-button style="margin-left:10px"
|
|
class="diy-button--search"
|
|
size="small"
|
|
@click="handleSearch">查询</el-button>
|
|
<el-button style="margin-left:10px"
|
|
class="diy-button--reset"
|
|
size="small"
|
|
@click="resetSearch">重置</el-button>
|
|
<!-- <el-button style="margin-left:10px"
|
|
class="diy-button--reset"
|
|
size="small"
|
|
@click="resetSearch">重置</el-button> -->
|
|
</div>
|
|
<build-table v-if="selTreeObj.level==='neighborHood'&&!showRoomTable"
|
|
ref="ref_neighTable"
|
|
:staffAgencyId="staffAgencyId"
|
|
:showImportBtn="showImportBtn"
|
|
:ownerName="ownerName"
|
|
:ownerPhone="ownerPhone"
|
|
:rentFlag="rentFlag"
|
|
@toNextLevel="toNextLevel"
|
|
@refreshTree="refreshTree"></build-table>
|
|
|
|
<room-table v-if="showRoomTable||selTreeObj.level==='building'"
|
|
:staffAgencyId="staffAgencyId"
|
|
:showImportBtn="showImportBtn"
|
|
:ownerName="ownerName"
|
|
:ownerPhone="ownerPhone"
|
|
:rentFlag="rentFlag"
|
|
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"
|
|
ref="ref_communityTable"
|
|
@refreshTree="refreshTree"></community-table>
|
|
|
|
</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服务
|
|
|
|
let loading // 加载动画
|
|
export default {
|
|
data () {
|
|
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: '自住'
|
|
},
|
|
],
|
|
ownerName: '',
|
|
ownerPhone: '',
|
|
rentFlag: '',
|
|
showRoomTable: false,
|
|
selObj: {},
|
|
}
|
|
},
|
|
components: {
|
|
CDialog
|
|
},
|
|
async mounted () {
|
|
this.treeLoading = true
|
|
|
|
await this.loadOrgData()
|
|
await this.loadTree()
|
|
await this.loadOpenNode()
|
|
|
|
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 - 140 + this.iframeHeight + 'px' : this.clientHeight - 140 + 'px'
|
|
|
|
},
|
|
treeHeight () {
|
|
return this.$store.state.inIframe ? this.clientHeight - 200 + this.iframeHeight + 'px' : this.clientHeight - 200 + 'px'
|
|
|
|
},
|
|
|
|
...mapGetters(['clientHeight', 'iframeHeight'])
|
|
},
|
|
methods: {
|
|
|
|
handleSearch () {
|
|
if (this.ownerName || this.ownerPhone || this.rentFlag) {
|
|
this.showRoomTable = true
|
|
|
|
this.$nextTick(() => {
|
|
this.$refs['ref_buildingTable'].loadTable('search', this.selTreeObj, this.ownerName, this.ownerPhone, this.rentFlag)
|
|
})
|
|
} else {
|
|
this.$message.warning('请输入查询条件')
|
|
}
|
|
|
|
|
|
},
|
|
|
|
//重置搜索条件
|
|
resetSearch () {
|
|
this.ownerName = ''
|
|
this.ownerPhone = ''
|
|
this.rentFlag = ''
|
|
|
|
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.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)
|
|
}
|
|
|
|
},
|
|
|
|
handleNodeClick (obj) {
|
|
this.ownerName = ''
|
|
this.ownerPhone = ''
|
|
this.rentFlag = ''
|
|
this.showRoomTable = false
|
|
|
|
this.selObj = JSON.parse(JSON.stringify(obj))
|
|
this.getTreeObj(obj)
|
|
|
|
this.$nextTick(() => {
|
|
if (obj.level === 'building') {//点击楼栋
|
|
this.$refs['ref_buildingTable'].loadTable('tree', this.selTreeObj)
|
|
|
|
} else if (obj.level === 'neighborHood') {//点击小区
|
|
this.$refs['ref_neighTable'].loadTable(true, this.selTreeObj)
|
|
|
|
} else {
|
|
this.$refs['ref_communityTable'].loadTable(true, this.selTreeObj)
|
|
}
|
|
})
|
|
|
|
},
|
|
|
|
//添加小区结束
|
|
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(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 lang="scss" scoped >
|
|
.div_main {
|
|
display: flex;
|
|
}
|
|
.scrollar {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.div_tree {
|
|
flex: 0 0 280px;
|
|
background-color: #ffffff;
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
overflow-y: hidden;
|
|
}
|
|
.filter_tree {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.div_table {
|
|
margin-left: 15px;
|
|
// flex: 1;
|
|
width: calc(100% - 300px);
|
|
background-color: #ffffff;
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.div_btn {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.row {
|
|
padding: 10px;
|
|
}
|
|
</style>
|
|
|
|
<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>
|
|
.div_tree {
|
|
/deep/ .el-scrollbar__wrap {
|
|
overflow-x: hidden !important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped >
|
|
@import "@/assets/scss/modules/visual/communityManage.scss";
|
|
</style>
|
|
|