<template>
|
<div class="box-a">
|
<h1 class="h1">房屋信息管理</h1>
|
|
<Statistics :list="list"></Statistics>
|
|
<div class="head-box">
|
<el-form :inline="true" ref="form" :model="bar">
|
<el-form-item label="关键词">
|
<el-input
|
size="small"
|
v-model="bar.keyWord"
|
placeholder=" 请输入街路巷等关键词进行查找"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="所属小区">
|
<el-select size="small" v-model="bar.villageId" placeholder="请输入">
|
<el-option
|
v-for="item in houseList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<!-- <el-form-item label="所属网格">
|
<el-select size="small" v-model="bar.gridId" placeholder="请输入">
|
<el-option v-for="item in gridList" :key="item.value"
|
:label="item.label" :value="item.value"></el-option>
|
</el-select>
|
</el-form-item> -->
|
<el-form-item>
|
<el-button size="small" type="primary" @click="onSearch()"
|
>查询</el-button
|
>
|
<el-button @click="resetForm" size="small">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<div class="add flex">
|
<el-button type="primary" @click="down">下载模版</el-button>
|
<el-upload
|
name="file"
|
accept=".xls, .xlsx"
|
:headers="{ Authorization: Authorization }"
|
class="upload-demo"
|
style="display: inline-block"
|
:show-file-list="false"
|
:action="importDataurl"
|
:on-success="success"
|
:on-error="error"
|
:before-upload="beforeUpload"
|
multiple
|
>
|
<el-button type="primary">导入</el-button>
|
</el-upload>
|
<span class="erro-text" @click="dowErr" v-if="errUrl">下载错误表格</span>
|
</div>
|
|
<div style="padding-top: 10px">
|
<v-tool-table :trs="trs" :tds="tds">
|
<template v-slot:alley="{ scope }">
|
{{ scope.alley }} {{ scope.doorNum }}号
|
</template>
|
<template v-slot:btn="{ scope }">
|
<el-button @click="edit(scope.id)" type="text">修改</el-button>
|
<el-button @click="deleteBuildingHandle(scope.id)" type="text"
|
>删除</el-button
|
>
|
<el-button @click="details(scope.id)" type="text">详情</el-button>
|
</template>
|
</v-tool-table>
|
<v-tool-page :item="paged" @on-page="onPage"></v-tool-page>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
bar: {
|
keyWord: "",
|
villageId: "",
|
gridId: "",
|
},
|
list: [
|
{
|
key: "buildNum",
|
name: "楼栋数量",
|
num: 0,
|
Company: "个",
|
},
|
{
|
key: "houseNum",
|
name: "总户数",
|
num: 0,
|
Company: "个",
|
},
|
{
|
key: "populationNum",
|
name: "居民人数",
|
num: 0,
|
Company: "个",
|
},
|
],
|
tds: [],
|
trs: [
|
{ text: "序号", val: "index" },
|
{ text: "街/路/巷", val: "btn", slot: "alley" },
|
// { text: "所属网格", val: "gridName" },
|
{ text: "楼栋号", val: "name" },
|
{ text: "所属小区", val: "villageName" },
|
{ text: "单元数", val: "unitTotal" },
|
{ text: "楼层数", val: "buildFloorSum" },
|
{ text: "总户数", val: "houseNum" },
|
{ text: "居民人数", val: "populationNum" },
|
{ text: "操作", val: "btn", width: "180px" },
|
],
|
paged: { page: 0, total: 0, r: 0, limit: 10 },
|
importDataurl: this.$js.api.http + "building/import",
|
houseList: [],
|
gridList: [],
|
loading: {},
|
errUrl: "",
|
Authorization: "",
|
communityId: "",
|
};
|
},
|
|
created() {
|
this.houseStatistics();
|
this.villageList();
|
this.getgridList();
|
},
|
|
mounted() {
|
this.communityId = demo.$session.get("user") || {};
|
this.Authorization = "Bearer " + demo.$session.get("token") || "";
|
},
|
|
methods: {
|
deleteBuildingHandle(id) {
|
this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(() => {
|
this.$api.get("building/delete", { id: id }, (res) => {
|
demo.toast('删除成功')
|
this.init();
|
});
|
});
|
},
|
onSearch() {
|
this.paged.page = 1;
|
this.init();
|
},
|
onPage(v) {
|
if (v.page === this.paged.page && v.page && !v.reset) {
|
return 0;
|
}
|
this.paged.page = v.page;
|
this.paged.limit = v.limit;
|
this.init();
|
},
|
init() {
|
let v = demo.copy(
|
Object.assign(this.bar, {
|
pageNum: this.paged.page,
|
pageSize: this.paged.limit,
|
})
|
);
|
this.$api.post("building/page", v, (e) => {
|
e.records.map((item, index) => {
|
item.index = (this.paged.page - 1) * this.paged.limit + index + 1;
|
});
|
this.paged.total = e.total;
|
this.tds = e.records;
|
});
|
},
|
|
//下载
|
down() {
|
this.$api.get("building/export/template", {}, (e) => {
|
window.location.href = e;
|
});
|
},
|
//导入前
|
beforeUpload() {
|
this.errUrl = "";
|
this.loading = this.$loading({
|
lock: true,
|
text: "导入中,请勿退出系统和关闭网络",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
},
|
|
//导入
|
success(e) {
|
if (e.code === 200) {
|
this.errUrl = "";
|
demo.toast("导入成功");
|
this.loading.close();
|
} else {
|
this.errUrl = e.msg;
|
this.loading.close();
|
demo.toast("导入失败，请下载错误表格查看原因");
|
}
|
this.init();
|
},
|
|
error(err) {
|
this.loading.close();
|
demo.toast("模板错误，请下载最新模板");
|
},
|
|
dowErr() {
|
//下载错误i
|
let data = {
|
key: this.errUrl,
|
};
|
this.$api.post("building/download/error?key=" + this.errUrl, "", (e) => {
|
window.location.href = e;
|
this.errUrl = "";
|
});
|
},
|
|
houseStatistics() {
|
//实有房屋统计接口
|
this.$api.get("building/header/statistics", "", (e) => {
|
let o = e;
|
this.list.map((item) => {
|
for (let key in o) {
|
if (item.key === key) {
|
item.num = o[key];
|
}
|
}
|
});
|
});
|
},
|
|
villageList() {
|
this.$api.get("building/village/list", "", (e) => {
|
this.houseList = e.map((d) => {
|
return {
|
label: d.name,
|
value: d.villageId,
|
};
|
});
|
});
|
},
|
|
getgridList() {
|
this.$api.get("screen/event/grids", { communityId: 2 }, (e) => {
|
this.gridList = e.data.map((d) => {
|
return {
|
label: d.gridName,
|
value: d.id,
|
};
|
});
|
});
|
},
|
|
details(id) {
|
//去详情
|
this.$router.push({
|
path: "/man_quarters_edit",
|
query: { id: id, type: "details" },
|
});
|
},
|
|
edit(id) {
|
this.$router.push({
|
path: "/man_quarters_edit",
|
query: { id: id },
|
});
|
},
|
|
resetForm() {
|
//重置
|
this.paged.page = 1;
|
for (let key in this.bar) {
|
this.bar[key] = "";
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.head-box {
|
box-sizing: border-box;
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
padding: 10px 0;
|
/deep/.el-input__inner {
|
width: 255px;
|
}
|
}
|
.box-a {
|
overflow: scroll;
|
}
|
.Tips {
|
margin: 10px 0;
|
box-sizing: border-box;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
background: #e6f7ff;
|
border: #bae7ff 1px solid;
|
border-radius: 6px;
|
height: 40px;
|
padding: 0 20px;
|
}
|
.Tips-cont {
|
padding: 0 10px;
|
font-size: 16px;
|
color: #606266;
|
}
|
.Tips-cont > span {
|
padding: 0 4px;
|
color: #409eff;
|
font-weight: 600;
|
}
|
.h1 {
|
font-size: 18px;
|
height: 40px;
|
line-height: 40px;
|
}
|
.erro-text {
|
font-size: 13px;
|
color: #f56c6c;
|
cursor: pointer;
|
}
|
.Control {
|
color: red;
|
}
|
</style>
|
