<template>
|
<div class='village_detail'>
|
<v-header title="小区房屋管理"></v-header>
|
<div class="add">
|
<el-button
|
type="primary"
|
size="small"
|
@click="onAll"
|
>批量建房</el-button>
|
<span class="name col_primary">
|
<b @click="onClickTab(-1)">{{name}}</b>
|
<b
|
@click="onClickTab(0)"
|
v-if="dong"
|
>{{dong}}</b>
|
<b
|
@click="onClickTab(1)"
|
v-if="dong && dan"
|
>{{dan}}</b>
|
<b
|
@click="onClickTab(2)"
|
v-if="dong && dan && door"
|
>{{door}}</b>
|
</span>
|
</div>
|
<div class="tab">
|
<v-tool-table
|
:trs="trs"
|
:tds="tds"
|
v-show="floorId<0"
|
ids="t-v-d-0"
|
>
|
<template v-slot:btn="item">
|
<div class="table_flex">
|
<!-- {{item.scope.id}} -->
|
<span
|
class="col_primary"
|
@click="onChild(0,item.scope)"
|
>下级</span>
|
<span
|
class="col_primary"
|
@click="onAdd(0,item.scope)"
|
>添加同级</span>
|
<span
|
class="col_primary"
|
@click="onDel(item.scope)"
|
>删除</span>
|
</div>
|
</template>
|
<template v-slot:type="item">
|
{{is_type(item.scope.type)}}
|
</template>
|
</v-tool-table>
|
<v-tool-table
|
:trs="trs"
|
:tds="tChild['0']"
|
v-show="floorId===0"
|
v-if="tChild['0'] && tChild['0'].length"
|
ids="t-v-d-1"
|
>
|
<template v-slot:btn="item">
|
<div class="table_flex">
|
<!-- {{item.scope.id}} -->
|
<span
|
class="col_primary"
|
@click="onChild(1,item.scope)"
|
>下级</span>
|
<span
|
class="col_primary"
|
@click="onAdd(1,item.scope)"
|
>添加同级</span>
|
<span
|
class="col_primary"
|
@click="onDel(item.scope)"
|
>删除</span>
|
</div>
|
</template>
|
<template v-slot:type="item">
|
{{is_type(item.scope.type)}}
|
</template>
|
</v-tool-table>
|
<v-tool-table
|
:trs="trs"
|
:tds="tChild['1']"
|
v-show="floorId===1"
|
v-if="tChild['1'] && tChild['1'].length"
|
ids="t-v-d-2"
|
>
|
<template v-slot:btn="item">
|
<div class="table_flex">
|
<!-- {{item.scope.id}} -->
|
<span
|
class="col_primary"
|
@click="onChild(2,item.scope)"
|
>下级</span>
|
<span
|
class="col_primary"
|
@click="onAdd(2,item.scope)"
|
>添加同级</span>
|
<span
|
class="col_primary"
|
@click="onDel(item.scope)"
|
>删除</span>
|
</div>
|
</template>
|
<template v-slot:type="item">
|
{{is_type(item.scope.type)}}
|
</template>
|
</v-tool-table>
|
<v-tool-table
|
:trs="trs4"
|
:tds="tChild['2']"
|
v-show="floorId===2"
|
v-if="tChild['2'] && tChild['2'].length"
|
ids="t-v-d-3"
|
>
|
<template v-slot:btn="item">
|
<div class="table_flex">
|
<!-- {{item.scope.id}} -->
|
<span
|
class="col_primary"
|
@click="onLastEdit(item.scope)"
|
>编辑</span>
|
<span
|
class="col_primary"
|
@click="onAdd(3,item.scope)"
|
>添加同级</span>
|
<span
|
class="col_primary"
|
@click="onDel(item.scope)"
|
>删除</span>
|
</div>
|
</template>
|
<template v-slot:type="item">
|
{{is_type(item.scope.type)}}
|
</template>
|
<template v-slot:state="item">
|
{{is_state(item.scope.state)}}
|
</template>
|
<template v-slot:square="item">
|
{{item.scope.square}}平方米
|
</template>
|
</v-tool-table>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
export default {
|
props: {},
|
components: {},
|
data() {
|
return {
|
trs: [
|
{ text: "地址编码", val: "houseCode" },
|
{ text: "地址名称", val: "houseName" },
|
{ text: "属性", val: "btn", slot: "type" },
|
{ text: "操作", val: "btn" },
|
],
|
trs4: [
|
{ text: "地址编码", val: "houseCode" },
|
{ text: "地址名称", val: "houseName" },
|
{ text: "属性", val: "btn", slot: "type" },
|
{ text: "面积", val: "btn", slot: "square" },
|
{ text: "房屋状态", val: "btn", slot: "state" },
|
{ text: "居住人", val: "names" },
|
{ text: "联系电话", val: "phones" },
|
{ text: "操作", val: "btn" },
|
],
|
tds: [],
|
tChild: { 0: [], 1: [], 2: [] },
|
name: "",
|
id: "",
|
dong: "",
|
dan: "",
|
door: "",
|
detail: {},
|
floorId: -1,
|
nowCode: "",
|
nowName: "",
|
};
|
},
|
computed: {
|
...mapState({ vuex_page: "pageReset" }),
|
},
|
watch: {
|
vuex_page: {
|
handler(n) {
|
if (n.page === this.$route.path) {
|
this.onChild(this.floorId, {
|
houseCode: this.nowCode,
|
houseName: this.nowName,
|
});
|
}
|
},
|
deep: true,
|
},
|
floorId(n) {
|
switch (n) {
|
case 0:
|
this.dan = "";
|
this.door = "";
|
break;
|
case 1:
|
this.door = "";
|
break;
|
case 2:
|
break;
|
default:
|
this.onResetValue();
|
}
|
},
|
},
|
methods: {
|
is_type(v) {
|
// 1小区 2楼栋 3 单元 4楼层 5房间
|
return ["", "小区", "楼栋", "单元", "楼层", "房间"][+v];
|
},
|
is_state(v) {
|
// 1 自主 2 租住 3 商用
|
return ["", "自主", "租住", "商用"][+v];
|
},
|
onResetValue() {
|
this.dong = "";
|
this.dan = "";
|
this.door = "";
|
},
|
onClickTab(v) {
|
this.floorId = v;
|
},
|
// 编辑 面积
|
onLastEdit(v) {
|
this.$store.dispatch("setFixed", {
|
event: "add",
|
width: 212,
|
data: {
|
title: "编辑房屋面积[" + v.houseName + "]",
|
type: "village-edit",
|
data: { item: v, id: this.id },
|
},
|
time: Date.now(),
|
});
|
},
|
// 展示下级
|
onChild(n, i) {
|
if (n >= 0) {
|
this.floorId = n;
|
this.tChild[n] = [];
|
this.nowCode = i.houseCode;
|
this.nowName = i.houseName;
|
switch (n) {
|
case 0:
|
this.dong = this.nowName;
|
this.dan = "";
|
this.door = "";
|
break;
|
case 1:
|
this.dan = this.nowName;
|
this.door = "";
|
break;
|
case 2:
|
this.door = this.nowName;
|
break;
|
default:
|
}
|
}
|
// houseCode
|
this.$api.get(
|
"communitymanager/listsubordinatebuilding",
|
{ houseCode: this.nowCode },
|
(e) => {
|
if (n < 0) {
|
this.tds = e || [];
|
} else {
|
this.tChild[n] = e || [];
|
}
|
}
|
);
|
},
|
// 添加同级
|
onAdd(v, i) {
|
let m = ["楼栋", "单元", "楼层", "门户"];
|
let tp = ["building", "unit", "floor", "door"];
|
this.$store.dispatch("setFixed", {
|
event: "add",
|
data: {
|
title: "添加同级-" + m[v],
|
type: "village-fast-add",
|
data: {
|
type: tp[v],
|
code: this.detail.areaCode, // areaCode
|
parent: i.parentCode,
|
id: this.id,
|
val: this.detail,
|
},
|
},
|
time: Date.now(),
|
});
|
},
|
onDel(v) {
|
this.$js.model("", "是否删除", (res) => {
|
if (res) {
|
this.$api.del("communitymanager/house", v, () => {
|
demo.toast("删除成功");
|
// 检测当前状态
|
if (this.floorId >= 0) {
|
this.onChild(this.floorId, {
|
houseCode: this.nowCode,
|
houseName: this.nowName,
|
});
|
} else {
|
this.init();
|
}
|
});
|
}
|
});
|
},
|
onAll() {
|
this.nowCode = this.detail.areaCode;
|
this.floorId = -1;
|
this.$store.dispatch("setFixed", {
|
event: "add",
|
data: {
|
title: "批量建房",
|
type: "village-fast-add",
|
data: {
|
type: "all",
|
code: this.detail.areaCode, // areaCode
|
id: this.id,
|
val: {},
|
},
|
},
|
time: Date.now(),
|
});
|
},
|
init() {
|
this.$api.get("communitymanager/area", { id: this.id }, (e) => {
|
this.detail = e;
|
this.name = e.areaName;
|
this.$api.get(
|
"communitymanager/listsubordinatebuilding",
|
{ houseCode: e.areaCode },
|
(e) => {
|
this.tds = e;
|
}
|
);
|
});
|
},
|
},
|
mounted() {
|
this.id = this.$route.params.id;
|
this.init();
|
},
|
};
|
</script>
|
<style lang='less' scoped>
|
.village_detail {
|
font-size: 14px;
|
overflow-y: auto;
|
.add,
|
.tab {
|
margin-bottom: 10px;
|
}
|
.add {
|
.name {
|
margin-left: 20px;
|
line-height: 32px;
|
height: 32px;
|
display: inline-block;
|
vertical-align: bottom;
|
b {
|
position: relative;
|
cursor: pointer;
|
& + b {
|
margin-left: 14px;
|
&::before {
|
position: absolute;
|
left: -8px;
|
top: 0;
|
content: "/";
|
color: #999;
|
line-height: 18px;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
