<template>
|
<div class="">
|
<div class="head-box">
|
<el-form :inline="true" ref="form" :model="bar" class="demo-form-inline">
|
<el-form-item label="房屋状态">
|
<el-select size="small" v-model="bar.status" placeholder="请输入">
|
<el-option v-for="item in status" :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.purpose" placeholder="请输入">
|
<el-option v-for="item in purpose" :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.controlStatus" placeholder="请输入">
|
<el-option v-for="item in controlStatus" :key="item.value"
|
:label="item.label" :value="item.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="房屋地址">
|
<el-cascader size="small"
|
ref="cascader"
|
@change="cascader"
|
:options="options"
|
v-model="bar.address1"
|
:props="props"></el-cascader>
|
</el-form-item>
|
<el-form-item label="更新时间">
|
<el-date-picker
|
size="small"
|
style="width: 380px"
|
v-model="bar.time"
|
type="datetimerange"
|
range-separator="-"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
</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="but">
|
<el-button
|
@click="Change =!Change"
|
size="small"
|
type="primary"
|
>批量删除</el-button>
|
</div>
|
<div
|
class="Tips"
|
v-show="Change"
|
>
|
<i
|
style="color: #409EFF"
|
class="el-icon-info"
|
></i>
|
<div class="Tips-cont">已选择<span>{{ids.length}}</span>项</div>
|
<el-button
|
type="text"
|
@click="clear()"
|
>批量删除</el-button>
|
<el-button
|
type="text"
|
@click="cancel"
|
>取消</el-button>
|
</div>
|
<!---->
|
<el-table
|
:data="tds"
|
border
|
@selection-change="handleSelectionChange"
|
style="width: 100%;margin-top: 10px">
|
<el-table-column
|
type="selection"
|
width="55">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
show-overflow-tooltip
|
label="房屋地址"
|
width="200">
|
</el-table-column>
|
<el-table-column
|
prop="alley"
|
label="街/路/巷"
|
width="150">
|
</el-table-column>
|
<el-table-column
|
prop="houseNum"
|
label="号"
|
width="150">
|
</el-table-column>
|
<el-table-column
|
prop="groupAt"
|
label="小区/组"
|
width="150">
|
</el-table-column>
|
<el-table-column
|
label="房屋状态"
|
width="150">
|
<template slot-scope="{row}">
|
{{['','自住','租住','其他'][row.status]}}
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="房屋用途"
|
width="150">
|
<template slot-scope="{row}">
|
{{['','住宅','公寓','宿舍','仓库','其他'][row.purpose]}}
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="管控状态"
|
width="150">
|
<template slot-scope="{row}">
|
{{['','常规','关注','管控'][row.controlStatus]}}
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="updateAt"
|
label="更新时间"
|
width="200">
|
</el-table-column>
|
<el-table-column
|
label="操作"
|
fixed="right"
|
width="200">
|
<template slot-scope="{row}">
|
<el-button @click="details(row.id)" type="text">查看</el-button>
|
<el-button @click="edit(row.id)" type="text">编辑</el-button>
|
<el-button type="text" @click="clear(row.id)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<v-tool-page
|
:item="paged"
|
@on-page="onPage"
|
></v-tool-page>
|
</div>
|
</template>
|
<script>
|
let id = 0;
|
export default {
|
props: [],
|
components: {},
|
data() {
|
return {
|
Change:false,
|
ids:[],
|
bar:{
|
status:'',
|
purpose:'',
|
controlStatus:'',
|
address:'',
|
address1:'',
|
time:''
|
},
|
status:[
|
{ value: 1, label: "自住" },
|
{ value: 2, label: "租住" },
|
{ value: 3, label: "其他" },
|
],
|
controlStatus:[
|
{ value: 1, label: "常规" },
|
{ value: 2, label: "关注" },
|
{ value: 3, label: "管控" },
|
],
|
purpose:[
|
{ value: 1, label: "住宅" },
|
{ value: 2, label: "公寓" },
|
{ value: 3, label: "宿舍" },
|
{ value: 4, label: "厂库" },
|
{ value: 5, label: "其他" },
|
],
|
options:[],
|
props:{//Cascader 级联选择器
|
label:'name',
|
value:'id',
|
lazy:true,
|
lazyLoad:(node, resolve)=>{
|
//动态加载
|
let {level,value,data} = node
|
if(level===0){
|
return
|
}
|
// debugger
|
let data1 = {
|
level:level+1,
|
houseId:data.houseId||'',
|
}
|
this.$api.post('common/data/population/cascade/list',data1,e=>{
|
let list = []
|
e.map(item=>{
|
list.push({
|
name:item.name,
|
id:++id,
|
houseId:item.houseId,
|
leaf:level >= 4//第5级为子节点
|
})
|
})
|
list.unshift({
|
houseId:data.houseId||'',
|
id:++id,
|
name:'全部',
|
leaf:true
|
})
|
resolve(list)
|
})
|
}
|
},
|
tds:[],
|
paged: {page: 0, total: 0, r: 0, limit: 10},
|
search: {},
|
}
|
},
|
created() {
|
this.cascadeList()
|
},
|
mounted() {
|
|
},
|
methods: {
|
cascader(e){
|
let houseId = this.$refs.cascader.getCheckedNodes()
|
this.bar.houseId = houseId[0].data.houseId
|
// console.log(node)
|
},
|
cascadeList(){
|
//连级选择器 房屋地址
|
let data = {
|
level:1,
|
villageId:this.$route.query.id||''
|
}
|
this.$api.post('common/data/population/cascade/list',data,e=>{
|
let list = []
|
e.map(item=>{
|
list.push({
|
id:++id,
|
houseId:item.houseId,
|
name:item.name
|
})
|
})
|
this.options= list
|
})
|
},
|
onSearch(){
|
if(this.bar.time){
|
this.bar.startTime = this.bar.time[0]
|
this.bar.endTime = this.bar.time[1]
|
}
|
this.paged.page = 1
|
// console.log(this.bar)
|
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,
|
villageId:this.$route.query.id||'',
|
level:this.bar.address1.length||''
|
})
|
);
|
this.$api.post('common/data/population/pageHouse',v,e=>{
|
// console.log(e)
|
this.tds = e.records
|
this.paged.total = e.total
|
})
|
},
|
handleSelectionChange(val) {
|
//复选框
|
console.log(val)
|
this.ids = []
|
val.map(item=>{
|
this.ids.push(item.id)
|
})
|
},
|
details(id){
|
//去详情
|
this.$router.push({
|
path:'/man_quarters_detail',
|
query:{id:id}
|
})
|
},
|
edit(id){
|
this.$router.push({
|
path:'/man_quarters_edit',
|
query:{id:id}
|
})
|
},
|
clear(id){
|
//批量删除
|
let t = this
|
t.$js.model("删除房屋信息", "是否删除房屋信息？", (res) => {
|
if (res) {
|
if(id){
|
t.ids = [id]
|
}
|
// console.log(t.ids)
|
// return
|
t.$api.post('common/data/population/house/delete',t.ids,e=>{
|
demo.toast("删除成功");
|
t.init()
|
})
|
}
|
});
|
},
|
cancel() {
|
//取消
|
this.Change = false;
|
this.alls = false
|
this.tds.map(item=>{
|
item.che = false
|
})
|
},
|
resetForm(){
|
//重置
|
this.paged.page = 1
|
for(let key in this.bar){
|
this.bar[key] = ''
|
}
|
}
|
},
|
watch: {},
|
computed: {}
|
}
|
|
</script>
|
<style scoped>
|
.head-box{
|
box-sizing: border-box;
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
padding: 10px 0;
|
}
|
.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;
|
}
|
</style>
|
