231 lines
7.3 KiB
Vue
231 lines
7.3 KiB
Vue
<template>
|
|
<section class="neighbourSetting">
|
|
<ai-list>
|
|
<ai-title slot="title" title="四邻设置" isShowBottomBorder isShowBack @onBackClick="back"/>
|
|
<template #content>
|
|
<ai-search-bar>
|
|
<template #left>
|
|
<el-button type="primary" icon="iconfont iconAdd" @click="dialog=true">添加</el-button>
|
|
<el-button icon="iconfont iconDelete" :disabled="!search.ids" @click="handleDelete(search.ids)">删除
|
|
</el-button>
|
|
</template>
|
|
<template #right>
|
|
<el-input size="small" placeholder="搜索户主姓名" v-model="search.residentName" clearable
|
|
@change="page.current=1,getTableData()" suffix-icon="iconfont iconSearch"/>
|
|
</template>
|
|
</ai-search-bar>
|
|
<ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
|
|
@getList="getTableData" :col-configs="colConfigs" :dict="dict"
|
|
@selection-change="v=>search.ids=v.map(e=>e.pfrId).toString()">
|
|
<el-table-column slot="options" label="操作" fixed="right" align="center">
|
|
<template slot-scope="{row}">
|
|
<el-button type="text" @click="handleDelete(row.pfrId)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</ai-table>
|
|
</template>
|
|
</ai-list>
|
|
<ai-dialog title="添加户主" :visible.sync="dialog" @closed="clearDialog" @onConfirm="submit"
|
|
width="1200px">
|
|
<ai-area-get v-model="form.areaId" :instance="instance" :root="user.info.areaId"
|
|
@change="list.current=1,getResident()"/>
|
|
<el-row type="flex" class="mar-t16">
|
|
<ai-table ref="Residents" :tableData="residents" :total="list.total" :current.sync="list.current"
|
|
:size.sync="list.size" class="fill" border height="360px" @getList="getResident"
|
|
:col-configs="[{slot: 'resident'}]" layout="slot,->, prev, pager, next, jumper" :pagerCount="5">
|
|
<el-table-column slot="resident">
|
|
<template #header>
|
|
<b v-text="`户主信息列表`"/>
|
|
<el-input class="fill searchbar" v-model="list.con" size="small" placeholder="搜索姓名/身份证号" clearable
|
|
@change="list.current=1,getResident()"/>
|
|
</template>
|
|
<template slot-scope="{row}">
|
|
<el-row type="flex" justify="space-between" @click.native="handleSelectResident(row)" class="toggle"
|
|
:class="{selected:findResident(row.id)>-1}">
|
|
<span v-text="row.name"/>
|
|
<span v-text="ID.hideId(row.idNumber)"/>
|
|
</el-row>
|
|
</template>
|
|
</el-table-column>
|
|
</ai-table>
|
|
<ai-table :tableData="form.residentList" :col-configs="[{slot:'resident'}]" :isShowPagination="false" border
|
|
height="360px">
|
|
<el-table-column slot="resident">
|
|
<template #header>
|
|
<b v-text="`已选择`"/>
|
|
<el-button type="text" @click="form.residentList=[]">清空</el-button>
|
|
</template>
|
|
<template slot-scope="{row,$index}">
|
|
<el-row type="flex" align="middle" justify="space-between">
|
|
<div v-text="[row.residentName, ID.hideId(row.idNumber)].join(' ')"/>
|
|
<el-button type="text" @click="form.residentList.splice($index,1)">删除</el-button>
|
|
</el-row>
|
|
</template>
|
|
</el-table-column>
|
|
</ai-table>
|
|
</el-row>
|
|
</ai-dialog>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from "vuex";
|
|
import {ID} from "dui/lib/js/utils";
|
|
|
|
export default {
|
|
name: "neighbourSetting",
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
colConfigs() {
|
|
return [
|
|
{type: 'selection'},
|
|
{label: "户主姓名", prop: "name"},
|
|
{label: "身份证号", prop: "idNumber"},
|
|
{label: "联系方式", prop: "phone"},
|
|
{label: "添加时间", prop: "createTime"},
|
|
{slot: "options"}
|
|
]
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
ID,
|
|
search: {residentName: "", ids: ""},
|
|
page: {current: 1, size: 10, total: 0},
|
|
tableData: [],
|
|
dialog: false,
|
|
form: {areaId: "", residentList: []},
|
|
residents: [],
|
|
list: {current: 1, size: 10, total: 0},
|
|
}
|
|
},
|
|
methods: {
|
|
back() {
|
|
this.$router.push({})
|
|
},
|
|
getTableData() {
|
|
this.instance.post("/app/apppartyfourresident/listFourResident", null, {
|
|
params: {...this.page, ...this.search}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.tableData = res.data?.records
|
|
this.page.total = res.data.total
|
|
}
|
|
})
|
|
},
|
|
handleDelete(ids) {
|
|
this.$confirm("是否要删除户主?").then(() => {
|
|
this.instance.post("/app/apppartyfourresident/delete", null, {
|
|
params: {ids}
|
|
}).then(res => {
|
|
if (res?.code == 0) {
|
|
this.$message.success("删除成功!")
|
|
this.getTableData()
|
|
}
|
|
})
|
|
}).catch(() => 0)
|
|
},
|
|
submit() {
|
|
this.instance.post("/app/apppartyfourresident/add", this.form).then(res => {
|
|
if (res?.code == 0) {
|
|
this.$message.success("提交成功!")
|
|
this.dialog = false
|
|
this.getTableData()
|
|
}
|
|
})
|
|
},
|
|
getResident() {
|
|
let {areaId} = this.form
|
|
areaId = areaId || this.user.info.areaId
|
|
this.instance.post("/app/appresident/list", null, {
|
|
params: {householdName: 1, areaId, ...this.list, auditStatus: 1}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
// this.residents = res.data.records?.map(e => ({dictValue: e.id, dictName: e.name}))
|
|
this.residents = res.data.records
|
|
this.list.total = res.data.total
|
|
this.$refs.Residents.doLayout()
|
|
}
|
|
})
|
|
},
|
|
handleSelectResident(row) {
|
|
let {id: partyId} = this.$route.query
|
|
let index = this.findResident(row.id)
|
|
if (index > -1) {
|
|
this.form.residentList.splice(index, 1)
|
|
} else {
|
|
let {id: residentId, name: residentName, idNumber} = row
|
|
this.form.residentList.push({residentId, residentName, idNumber, partyId})
|
|
}
|
|
this.$forceUpdate()
|
|
},
|
|
findResident(id) {
|
|
return this.form.residentList?.findIndex(e => e.residentId == id)
|
|
},
|
|
clearDialog() {
|
|
this.form = {residentList: []}
|
|
this.residents = []
|
|
this.list = {current: 1, size: 10, total: 0}
|
|
}
|
|
},
|
|
created() {
|
|
this.search.partyId = this.$route.query.id
|
|
this.getTableData()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.neighbourSetting {
|
|
height: 100%;
|
|
|
|
.mar-t16 {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
:deep(.ai-dialog__content ){
|
|
.ai-dialog__content--wrapper {
|
|
padding-right: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.el-row {
|
|
width: 100%;
|
|
|
|
.ai-table + .ai-table {
|
|
margin-left: 16px;
|
|
width: 400px;
|
|
|
|
.ai-table__header > .cell {
|
|
line-height: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toggle {
|
|
cursor: pointer;
|
|
|
|
&.selected {
|
|
color: #26f;
|
|
}
|
|
}
|
|
|
|
|
|
.ai-table__header > .cell {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.searchbar ){
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
</style>
|