271 lines
9.2 KiB
Vue
271 lines
9.2 KiB
Vue
<template>
|
|
<section class="ResidentList">
|
|
<ai-list isTabs>
|
|
<template #content>
|
|
<ai-search-bar>
|
|
<template #left>
|
|
<ai-select placeholder="档案状态" v-model="search.fileStatus"
|
|
:selectList="resident.dict.getDict('fileStatus')"
|
|
@change="page.current=1,refreshTable()"/>
|
|
<ai-select placeholder="性别" v-model="search.sex"
|
|
:selectList="resident.dict.getDict('sex')"
|
|
@change="page.current=1,refreshTable()"/>
|
|
<ai-select placeholder="文化程度" v-model="search.education"
|
|
:selectList="resident.dict.getDict('education')"
|
|
@change="page.current=1,refreshTable()"/>
|
|
<ai-select placeholder="婚姻状况" v-model="search.maritalStatus"
|
|
:selectList="resident.dict.getDict('maritalStatus')"
|
|
@change="page.current=1,refreshTable()"/>
|
|
<ai-select placeholder="民族" v-model="search.nation"
|
|
:selectList="resident.dict.getDict('nation')"
|
|
@change="page.current=1,refreshTable()"/>
|
|
<ai-search label="出生日期">
|
|
<el-date-picker
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
v-model="search.birthStart"
|
|
type="date"
|
|
size="small"
|
|
placeholder="选择开始日期"
|
|
@change="page.current=1,refreshTable()"
|
|
/>
|
|
<el-date-picker
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
v-model="search.birthEnd"
|
|
type="date"
|
|
size="small"
|
|
placeholder="选择结束日期"
|
|
@change="page.current=1,refreshTable()"
|
|
/>
|
|
</ai-search>
|
|
|
|
<ai-select placeholder="政治面貌" v-model="search.politicsStatus"
|
|
:selectList="resident.dict.getDict('politicsStatus')"
|
|
@change="page.current=1,refreshTable()"/>
|
|
<ai-select placeholder="是否户主" v-model="search.householdName"
|
|
:selectList="resident.dict.getDict('householdName')"
|
|
@change="page.current=1,refreshTable()"/>
|
|
<ai-select placeholder="宗教信仰" v-model="search.faithType"
|
|
:selectList="resident.dict.getDict('faithType')"
|
|
@change="page.current=1,refreshTable()"/>
|
|
</template>
|
|
<template #right>
|
|
<el-input
|
|
size="small"
|
|
v-model="search.con"
|
|
placeholder="姓名/身份证/联系方式"
|
|
v-throttle="() => {search.current = 1, refreshTable()}"
|
|
@clear="search.current = 1, refreshTable()"
|
|
clearable
|
|
suffix-icon="iconfont iconSearch"/>
|
|
</template>
|
|
</ai-search-bar>
|
|
<ai-search-bar>
|
|
<template #left>
|
|
<el-button
|
|
size="small"
|
|
type="primary"
|
|
icon="iconfont iconAdd"
|
|
@click="gotoAdd()"
|
|
v-if="permissions('app_appresident_edit')">
|
|
添加
|
|
</el-button>
|
|
<el-button
|
|
size="small"
|
|
icon="iconfont iconDelete"
|
|
:disabled="multipleSelection.length<=0"
|
|
@click="beforeDelete()"
|
|
v-if="permissions('app_appresident_del')">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
<template #right>
|
|
<ai-import :instance="resident.instance" :dict="resident.dict" type="appresident" name="居民档案"
|
|
:importParams="{residentType: active}" @success="refreshTable()">
|
|
<el-button icon="iconfont iconImport">导入</el-button>
|
|
</ai-import>
|
|
<ai-download :instance="resident.instance" :params="params" url="/app/appresident/export"
|
|
fileName="居民档案" v-if="permissions('app_appresident_export')"/>
|
|
</template>
|
|
</ai-search-bar>
|
|
|
|
<ai-table :tableData="tableData" :col-configs="colConfigs" :dict="resident.dict"
|
|
:total="page.total" :current.sync="page.current" :size.sync="page.size"
|
|
@getList="refreshTable"
|
|
@selection-change="handleSelectionChange">
|
|
<el-table-column slot="idNumber" label="身份证号" show-overflow-tooltip align="center">
|
|
<template slot-scope="{row}">
|
|
<ai-id mode="show" v-model="row.idNumber" :showEyes="false"/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column slot="fileStatus" label="档案状态" show-overflow-tooltip align="center">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.fileStatus==0" style="color:rgba(46,162,34,1);">正常</span>
|
|
<span v-if="scope.row.fileStatus==1" style="color:rgba(153,153,153,1);">已注销</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column slot="options" label="操作" show-overflow-tooltip align="center">
|
|
<template slot-scope="scope">
|
|
<div class="table-options">
|
|
<el-button
|
|
title="详情"
|
|
type="text"
|
|
v-if="$permissions('app_appresident_detail')"
|
|
@click="detailShow(scope.row)">
|
|
详情
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</ai-table>
|
|
</template>
|
|
</ai-list>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from "vuex";
|
|
|
|
export default {
|
|
name: "ResidentList",
|
|
inject: ['resident'],
|
|
props: {
|
|
areaId: {default: ""},
|
|
active: {default: ""},//人员类型,
|
|
permissions: Function
|
|
},
|
|
computed: {
|
|
...mapState(["user"]),
|
|
params() {
|
|
let params = {
|
|
residentType: this.active
|
|
}
|
|
//导出搜索条件
|
|
if (this.deleteIds.length) {
|
|
params = {
|
|
...params,
|
|
areaId: this.areaId,
|
|
ids: this.deleteIds
|
|
}
|
|
} else {
|
|
params = {
|
|
areaId: this.areaId,
|
|
...params,
|
|
...this.search
|
|
}
|
|
}
|
|
return params
|
|
},
|
|
colConfigs() {
|
|
return [
|
|
{type: "selection"},
|
|
{label: "姓名", prop: "name", align: "center"},
|
|
{label: "性别", prop: "sex", dict: 'sex', align: "center"},
|
|
{slot: "idNumber"},
|
|
{label: "年龄", prop: "age", align: "center"},
|
|
{label: "民族", prop: "nation", align: "center", dict: "nation"},
|
|
{label: "文化程度", prop: "education", align: "center", dict: "education"},
|
|
{label: "政治面貌", prop: "politicsStatus", align: "center", dict: "politicsStatus"},
|
|
{slot: "fileStatus"},
|
|
{slot: "options"}
|
|
]
|
|
}
|
|
},
|
|
watch: {
|
|
areaId(v) {
|
|
v && this.refreshTable()
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
page: {current: 1, size: 10, total: 0},
|
|
search: {
|
|
fileStatus: "",
|
|
sex: "",
|
|
nation: "",
|
|
education: "",
|
|
politicsStatus: "",
|
|
birthStart: "",
|
|
birthEnd: "",
|
|
faithType: "",
|
|
householdName: "",
|
|
con: "",
|
|
maritalStatus: ""
|
|
},
|
|
style: {},
|
|
tableData: [],
|
|
multipleSelection: [],
|
|
deleteIds: [],
|
|
};
|
|
},
|
|
methods: {
|
|
handleSelectionChange(val) {
|
|
this.deleteIds = [];
|
|
this.multipleSelection = val;
|
|
this.multipleSelection.forEach(e => {
|
|
this.deleteIds.push(e.id);
|
|
});
|
|
},
|
|
detailShow(row) {
|
|
this.$router.push({query: {type: this.active, id: row.id}})
|
|
},
|
|
gotoAdd() {
|
|
this.$router.push({query: {type: this.active}})
|
|
},
|
|
refreshTable() {
|
|
this.resident.instance.post(`/app/appresident/list`, null, {
|
|
params: {...this.search, ...this.page, areaId: this.areaId, residentType: this.active}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.tableData = res.data.records
|
|
this.page.total = res.data.total
|
|
}
|
|
})
|
|
},
|
|
beforeDelete() {
|
|
this.$confirm("确定要执行删除操作吗？", {type: "error"})
|
|
.then(() => {
|
|
this.deletePersonFn();
|
|
this.deleteIds = [];
|
|
})
|
|
.catch(() => {
|
|
});
|
|
},
|
|
deletePersonFn() {
|
|
this.resident.instance.post(`/app/appresident/deleteBody`, {
|
|
ids: this.deleteIds
|
|
}).then(res => {
|
|
if (res && res.code == 0) {
|
|
this.$message.success("删除成功");
|
|
if (
|
|
this.page.current == Math.ceil(this.page.total / this.page.size)
|
|
) {
|
|
this.page.total = this.page.total - this.deleteIds.length;
|
|
this.page.current = Math.ceil(this.page.total / this.page.size);
|
|
}
|
|
this.refreshTable();
|
|
}
|
|
})
|
|
},
|
|
},
|
|
created() {
|
|
this.refreshTable()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ResidentList {
|
|
height: 100%;
|
|
|
|
::v-deep.AiSearch {
|
|
.el-input + .el-input > .el-input__inner {
|
|
border-left-color: transparent;
|
|
|
|
&:hover, &:focus {
|
|
border-left-color: inherit;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|