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.
1044 lines
31 KiB
1044 lines
31 KiB
<template>
|
|
<div class="g-main">
|
|
<div :style="{ height: rowHeight }"
|
|
class="div_tree">
|
|
<el-input placeholder="输入关键字进行过滤"
|
|
v-model="filterText"
|
|
@keydown.native.enter="handleChangeSerch()">
|
|
</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"
|
|
:expand-on-click-node="false"
|
|
:filter-node-method="filterNode"
|
|
@node-click="handleNodeClick"
|
|
lazy
|
|
:auto-expand-parent="true"
|
|
:default-expanded-keys="autoOpenArr"
|
|
:load="lazyLoadTree">
|
|
<span slot-scope="{ node, data }"
|
|
class="custom-tree-node">
|
|
<!-- <img
|
|
v-if="showIcons(data)"
|
|
src="@/assets/images/index/abnormal.png"
|
|
style="
|
|
height: 14px;
|
|
width: 14px;
|
|
margin-right: 5px;
|
|
margin-top: -3px;
|
|
"
|
|
/> -->
|
|
|
|
<!-- <span v-if="data.level==='building'&&!data.showIcon"
|
|
style="padding-left:20px;">{{ ' ' }}</span> -->
|
|
<!-- <span v-if="data.showIcon" :id="data.id"
|
|
>{{ data.label + "(" }}
|
|
<span style="color: red">{{ data.showNum }}</span>
|
|
<span>{{ ")" }}</span>
|
|
</span> -->
|
|
<span :id="data.id"
|
|
:style="{ color: showIcons(data) ? '#ff4d4f' : '' }">{{ data.showName }}</span>
|
|
</span>
|
|
</el-tree>
|
|
</el-scrollbar>
|
|
</div>
|
|
|
|
<div class="div_left">
|
|
<div class="m-search"
|
|
style="flex-direction: column">
|
|
<section :class="boxHeight ? 'm-form-box-height' : 'm-form-box-height-auto'">
|
|
<el-form :inline="true"
|
|
class="communityHeight"
|
|
ref="ref_searchform"
|
|
:label-width="'100px'">
|
|
<el-form-item label="房主姓名"
|
|
prop="ownerName">
|
|
<el-input v-model="ownerName"
|
|
class="u-item-width-normal"
|
|
size="small"
|
|
clearable
|
|
placeholder="请输入内容">
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="联系电话"
|
|
prop="ownerPhone">
|
|
<el-input v-model="ownerPhone"
|
|
class="u-item-width-normal"
|
|
size="small"
|
|
clearable
|
|
placeholder="请输入联系电话">
|
|
</el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="房屋状态"
|
|
prop="rentFlag">
|
|
<el-select class="u-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="u-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="updateStartDate">
|
|
<el-date-picker v-model="updateStartDate"
|
|
:picker-options="startPickerOptions"
|
|
class="u-item-width-daterange"
|
|
size="small"
|
|
type="datetime"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
value="yyyy-MM-dd"
|
|
placeholder="开始时间">
|
|
</el-date-picker>
|
|
<span class="u-data-tag">至</span>
|
|
<el-date-picker v-model="updateEndDate"
|
|
:picker-options="endPickerOptions"
|
|
class="u-item-width-daterange u-data-tag"
|
|
size="small"
|
|
type="datetime"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
value="yyyy-MM-dd"
|
|
placeholder="结束时间">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="备注"
|
|
prop="remark">
|
|
<el-input v-model="remark"
|
|
class="u-item-width-normal"
|
|
size="small"
|
|
clearable
|
|
placeholder="请输入备注">
|
|
</el-input>
|
|
</el-form-item>
|
|
|
|
<!-- <el-form-item label="所属房屋" prop="neighborHoodId">
|
|
<el-select
|
|
v-model.trim="neighborHoodId"
|
|
:disabled="vDisabled"
|
|
placeholder="小区"
|
|
filterable
|
|
size="small"
|
|
clearable
|
|
class="u-item-width-communitycascader"
|
|
@change="handleChangeV"
|
|
>
|
|
<div>
|
|
<el-input
|
|
placeholder="请输入"
|
|
v-model="searchAgencyTxt"
|
|
@keyup.enter.native="handleChangeSerchAgency(searchAgencyTxt)"
|
|
>
|
|
</el-input>
|
|
</div>
|
|
<el-option
|
|
v-for="item in optionsV"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
<el-select
|
|
v-model.trim="buildingId"
|
|
placeholder="楼号"
|
|
:disabled="!neighborHoodId || bDisabled"
|
|
size="small"
|
|
clearable
|
|
class="u-item-width-buildcascader"
|
|
style="margin-left: 5px"
|
|
@change="handleChangeB"
|
|
>
|
|
<el-option
|
|
v-for="item in optionsB"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
<el-select
|
|
v-model.trim="buildingUnitId"
|
|
placeholder="单元"
|
|
size="small"
|
|
:disabled="!buildingId"
|
|
clearable
|
|
class="u-item-width-buildcascader"
|
|
style="margin-left: 5px"
|
|
@change="handleChangeD"
|
|
>
|
|
<el-option
|
|
v-for="item in optionsD"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
<el-select
|
|
v-model.trim="houseId"
|
|
placeholder="房号"
|
|
:disabled="!buildingUnitId"
|
|
size="small"
|
|
clearable
|
|
class="u-item-width-buildcascader"
|
|
style="margin-left: 5px"
|
|
>
|
|
<el-option
|
|
v-for="item in optionsH"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item> -->
|
|
|
|
<!-- </div> -->
|
|
</el-form>
|
|
</section>
|
|
<el-row>
|
|
<el-col :span="24"
|
|
align="right">
|
|
<el-button style="margin-left: 10px"
|
|
size="small"
|
|
type="primary"
|
|
@click="handleSearch">查询</el-button>
|
|
<el-button size="small"
|
|
class="diy-button--white"
|
|
@click="resetSearch">重置</el-button>
|
|
<!-- <el-button style="margin: 0 6px 0 10px"
|
|
size="small"
|
|
class="div-table-button--blue"
|
|
type="text"
|
|
@click="boxHeight = !boxHeight">{{ boxHeight ? "展开" : "收起"
|
|
}}<i :class="boxHeight ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i></el-button> -->
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<div class="">
|
|
<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"
|
|
:searchHeight="searchHeight"
|
|
@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, requestGet } from "@/js/dai/request";
|
|
import { mapGetters } from "vuex";
|
|
import { Loading } from "element-ui"; // 引入Loading服务
|
|
import nextTick from "dai-js/tools/nextTick";
|
|
import debounce from "lodash/debounce";
|
|
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 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;
|
|
// // }
|
|
// 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 {
|
|
autoOpenArr: [],
|
|
boxHeight: true,
|
|
searchHeight: 190,
|
|
filterText: "",
|
|
treeLoading: true,
|
|
treeData: [],
|
|
searchAgencyTxt: "",
|
|
openNodes: [],
|
|
defaultProps: {
|
|
children: "children",
|
|
label: "showName",
|
|
isLeaf: "isLeaf",
|
|
},
|
|
|
|
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,
|
|
|
|
treeIsOk: true,//树点击是否加载完成
|
|
};
|
|
},
|
|
components: {
|
|
CDialog,
|
|
communityTable,
|
|
buildTable,
|
|
roomTable,
|
|
},
|
|
async mounted () {
|
|
this.searchHeight = this.$refs.ref_searchform.offsetHeight;
|
|
|
|
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 - 140 + this.iframeHeight + "px"
|
|
: this.clientHeight - 140 + "px";
|
|
},
|
|
treeHeight () {
|
|
return this.$store.state.inIframe
|
|
? this.clientHeight - 245 + this.iframeHeight + "px"
|
|
: this.clientHeight - 245 + "px";
|
|
},
|
|
...mapGetters(["clientHeight", "iframeHeight"]),
|
|
showIcons () {
|
|
return function (data) {
|
|
if (data.level == "building") {
|
|
let arr = data.showNum.split("/");
|
|
|
|
if (arr[0] !== arr[1]) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
};
|
|
},
|
|
},
|
|
watch: {
|
|
// filterText (val) {
|
|
// this.$refs.ref_tree.filter(val);
|
|
// },
|
|
updateStartDate () { }
|
|
},
|
|
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 lazyLoadTree (node, resolve) {
|
|
|
|
const url = `/actual/base/communityBuilding/tree/nextTreeNode?id=${node.data.id}&level=${node.data.level}`;
|
|
const { data, code, msg } = await requestGet(url);
|
|
if (code === 0) {
|
|
data.forEach((element) => {
|
|
if (element.level === "building") {
|
|
element.isLeaf = true;
|
|
}
|
|
});
|
|
resolve(data);
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
// }
|
|
},
|
|
async getValiheList () {
|
|
const { user } = this.$store.state;
|
|
if (!this.selGridId) {
|
|
this.selAgencyId = this.selAgencyId ? this.selAgencyId : user.agencyId;
|
|
}
|
|
|
|
const url = "/actual/base/communityQuarters/listQuartersOptions";
|
|
// 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 = "/actual/base/communityBuilding/buildingoption";
|
|
let params = {
|
|
quartersId: 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 handleChangeSerch () {
|
|
this.startLoading();
|
|
this.$refs.ref_tree.$data.store.lazy = !this.filterText;
|
|
if (this.filterText.length > 0 && this.filterText != "") {
|
|
const url = `/actual/base/communityBuilding/tree/search?keyword=${this.filterText}`;
|
|
const { data, code, msg } = await requestGet(url);
|
|
if (data[0].children.length > 0) {
|
|
this.treeData = data;
|
|
for (let i in this.treeData[0].children) {
|
|
this.autoOpenArr.push(
|
|
this.treeData[0].id,
|
|
this.treeData[0].children[i].id,
|
|
this.treeData[0].children[0].children[0].id
|
|
);
|
|
}
|
|
} else {
|
|
this.treeData = [];
|
|
this.$message.error("暂未找到!");
|
|
}
|
|
} else {
|
|
this.treeData = [];
|
|
this.autoOpenArr = [];
|
|
this.loadTree();
|
|
}
|
|
this.endLoading();
|
|
},
|
|
startLoading () {
|
|
loading = Loading.service({
|
|
lock: true, // 是否锁定
|
|
text: "正在加载……", // 加载中需要显示的文字
|
|
background: "rgba(0,0,0,.7)", // 背景颜色
|
|
});
|
|
},
|
|
// 结束加载动画
|
|
endLoading () {
|
|
// clearTimeout(timer);
|
|
if (loading) {
|
|
loading.close();
|
|
}
|
|
},
|
|
async getUniList () {
|
|
const url = "/actual/base/communityBuildingUnit/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 () {
|
|
let params = {
|
|
buildingId: this.buildingId,
|
|
unitId: this.buildingUnitId,
|
|
};
|
|
this.$http
|
|
.post("/actual/base/communityHouse/houseoption", params)
|
|
.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 () {
|
|
console.log(this.selTreeObj)
|
|
this.showRoomTable = true;
|
|
this.$nextTick(() => {
|
|
this.$refs["ref_buildingTable"].loadTable("search", this.selTreeObj);
|
|
});
|
|
|
|
},
|
|
|
|
//重置搜索条件
|
|
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.$nextTick(() => {
|
|
this.$refs.ref_buildingTable.loadTable("search", this.selTreeObj);
|
|
});
|
|
},
|
|
|
|
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 = "/actual/base/communityBuilding/tree/initTree";
|
|
const { data, code, msg } = await requestGet(url);
|
|
if (code === 0) {
|
|
this.treeData = [];
|
|
this.treeData.push(data);
|
|
// 默认加载第一层
|
|
|
|
this.autoOpenArr.push(data.id)
|
|
if (!isRefresh && data) {
|
|
this.selTreeObj = data;
|
|
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);
|
|
}
|
|
},
|
|
|
|
handleTreeData (treeData) {
|
|
for (let i in treeData) {
|
|
treeData[i].showIcon = false;
|
|
if (treeData[i].level === "building") {
|
|
let array = treeData[i].showNum.split("/");
|
|
if (array.length === 2) {
|
|
let a = parseInt(array[0]);
|
|
let b = parseInt(array[1]);
|
|
treeData[i].showIcon = a < b;
|
|
}
|
|
}
|
|
|
|
if (treeData[i].children) {
|
|
//存在子节点就递归
|
|
this.handleTreeData(treeData[i].children);
|
|
}
|
|
}
|
|
},
|
|
|
|
//加载组织数据
|
|
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) {
|
|
if (!this.treeIsOk) {
|
|
setTimeout(() => {
|
|
this.handleNodeClick(obj);
|
|
}, 200);
|
|
return false
|
|
}
|
|
this.treeIsOk = false
|
|
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;
|
|
console.log(obj);
|
|
|
|
if (obj.level === "building") {
|
|
//点击楼栋
|
|
|
|
await this.$refs["ref_buildingTable"].loadTable('tree', this.selTreeObj,);
|
|
this.buildingId = this.selTreeObj.id;
|
|
this.neighborHoodId = this.selTreeObj.pid;
|
|
|
|
this.selAgencyId = "";
|
|
this.selGridId = "";
|
|
await this.getValiheList();
|
|
await this.getBuildList();
|
|
// await nextTick(2000);
|
|
// this.buildingId = this.selTreeObj.id;
|
|
await this.getUniList();
|
|
this.vDisabled = true;
|
|
this.bDisabled = true;
|
|
this.treeIsOk = true
|
|
} else if (obj.level === "neighborHood") {
|
|
//点击小区
|
|
await 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;
|
|
this.treeIsOk = true
|
|
} else {
|
|
|
|
await 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("", "");
|
|
this.treeIsOk = true
|
|
|
|
}
|
|
},
|
|
|
|
//添加小区结束
|
|
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;
|
|
},
|
|
|
|
//进入下一级
|
|
async toNextLevel (row, level) {
|
|
|
|
this.autoOpenArr = [];
|
|
|
|
const {
|
|
agencyId,
|
|
gridId,
|
|
neighborHoodId,
|
|
neighborHoodName,
|
|
gridName,
|
|
agencyName,
|
|
buildingId,
|
|
buildingName,
|
|
pid,
|
|
streetId
|
|
} = row;
|
|
let arr = [agencyId, gridId, neighborHoodId, pid, streetId, neighborHoodName, buildingName];
|
|
|
|
this.autoOpenArr = arr;
|
|
console.log('row', row)
|
|
|
|
if (level == "community") {
|
|
this.selTreeObj = {
|
|
id: neighborHoodId,
|
|
label: neighborHoodName,
|
|
level: "neighborHood",
|
|
pid: gridId,
|
|
agencyId: agencyId,
|
|
agencyName: agencyName,
|
|
gridName: gridName,
|
|
};
|
|
} else if (level == "building") {
|
|
// this.selTreeObj = this.$refs.ref_tree.getNode(row.buildingId).data
|
|
this.selTreeObj = {
|
|
id: buildingId,
|
|
label: buildingName,
|
|
neighborHoodId: neighborHoodId,
|
|
level: "building",
|
|
pid: neighborHoodId,
|
|
agencyId: agencyId,
|
|
agencyName: agencyName,
|
|
gridName: gridName,
|
|
};
|
|
}
|
|
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) {
|
|
if (!obj.latitude) {
|
|
obj.latitude = this.centerPoint[0];
|
|
}
|
|
|
|
if (!obj.longitude) {
|
|
obj.longitude = this.centerPoint[1];
|
|
}
|
|
this.selTreeObj = obj;
|
|
|
|
},
|
|
|
|
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();
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/assets/scss/modules/visual/communityManage.scss";
|
|
@import "@/assets/scss/modules/management/list-main.scss";
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.m-search ::v-deep .el-row {
|
|
margin-right: 0;
|
|
}
|
|
.g-main {
|
|
display: flex;
|
|
}
|
|
.scrollar {
|
|
margin-top: 30px;
|
|
/deep/
|
|
.el-tree--highlight-current
|
|
.el-tree-node.is-current
|
|
> .el-tree-node__content {
|
|
background: #e6f0ff;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/deep/ .el-tree-node:focus > .el-tree-node__content {
|
|
color: #0056d6;
|
|
// background-color: #e6f0ff;
|
|
}
|
|
// /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;
|
|
width: 30%;
|
|
max-width: 304px;
|
|
min-width: 240px;
|
|
/deep/ .el-scrollbar__wrap {
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
//搜索输入框样式
|
|
/deep/ .el-input--medium .el-input__inner {
|
|
height: 32px;
|
|
background: rgba(0, 0, 0, 0.05);
|
|
border-radius: 4px;
|
|
}
|
|
flex: 0 0 280px;
|
|
background: #ffffff;
|
|
box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
|
|
0px 3px 6px -4px rgba(0, 0, 0, 0.12);
|
|
// border-radius: 5px;
|
|
padding: 24px 15px;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.filter_tree {
|
|
overflow-x: auto;
|
|
// background-color: #f6f6f6;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.div_left {
|
|
// flex: 1;
|
|
width: calc(100% - 300px);
|
|
}
|
|
::v-deep .el-dialog__body {
|
|
padding: 0;
|
|
}
|
|
</style>
|
|
|