401 lines
11 KiB
Vue
401 lines
11 KiB
Vue
<!-- 户籍管理 -->
|
|
<template>
|
|
<div class="percentage-content">
|
|
<div class="content">
|
|
<div style="margin-bottom: 16px;" class="h-layout space-between h-center">
|
|
<div>
|
|
<div class="h-layout h-center">
|
|
<div
|
|
class="tool-item"
|
|
@click="
|
|
(dialogForm = {}), (dialogVisible = true), (readonly = false)
|
|
"
|
|
>
|
|
<svg-icon name="add" class="icon" />
|
|
<span>新增/迁入</span>
|
|
</div>
|
|
<div class="tool-item" @click="getList">
|
|
<svg-icon name="refurbish" class="icon" />
|
|
<span>刷新</span>
|
|
</div>
|
|
<div class="label-select filter-tab">
|
|
<label>户籍状态</label>
|
|
<el-select
|
|
placeholder="请选择"
|
|
v-model="search.domicileState"
|
|
clearable
|
|
@change="getList"
|
|
>
|
|
<el-option label="正常" :value="1">正常</el-option>
|
|
<el-option label="注销" :value="2">注销</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="label-select filter-tab">
|
|
<label>婚姻状态</label>
|
|
<el-select
|
|
placeholder="请选择"
|
|
v-model="search.marriageState"
|
|
clearable
|
|
@change="getList"
|
|
>
|
|
<el-option label="已婚" :value="1">已婚</el-option>
|
|
<el-option label="未婚" :value="2">未婚</el-option>
|
|
<el-option label="离婚" :value="3">离婚</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="label-select filter-tab">
|
|
<label>性别</label>
|
|
<el-select
|
|
placeholder="请选择"
|
|
v-model="search.sex"
|
|
clearable
|
|
@change="getList"
|
|
>
|
|
<el-option label="男" :value="1">男</el-option>
|
|
<el-option label="女" :value="0">女</el-option>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 30%;">
|
|
<div>
|
|
<el-input
|
|
v-model="search.condition"
|
|
placeholder="请输入关键字"
|
|
class="search-input"
|
|
@keydown.enter.native="getList"
|
|
>
|
|
<template #append>
|
|
<span class="search-bottom">
|
|
<svg-icon name="search" class="icon_class" />
|
|
<span>搜索</span>
|
|
</span>
|
|
</template>
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 表格 -->
|
|
<el-table
|
|
ref="loading"
|
|
:data="tableData"
|
|
v-loading="tableDataloading"
|
|
header-row-class-name="el-one-header"
|
|
border
|
|
>
|
|
<el-table-column
|
|
type="index"
|
|
align="center"
|
|
label="序列"
|
|
width="60"
|
|
></el-table-column>
|
|
<el-table-column
|
|
:resizable="true"
|
|
align="center"
|
|
label="姓名"
|
|
prop="name"
|
|
width="130"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
:resizable="true"
|
|
align="center"
|
|
label="性别"
|
|
prop="sex"
|
|
width="100"
|
|
>
|
|
<template #default="scope">
|
|
<span>{{
|
|
scope.row.sex == 1 ? "男" : scope.row.sex == 0 ? "女" : "--"
|
|
}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
:resizable="true"
|
|
align="center"
|
|
label="出生日期"
|
|
prop="birthday"
|
|
width="200"
|
|
>
|
|
<template #default="scope">
|
|
<span>{{ scope.row.birthday ? scope.row.birthday : "--" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
:resizable="true"
|
|
align="center"
|
|
label="婚姻状况"
|
|
prop="marriageState"
|
|
width="100"
|
|
>
|
|
<template #default="scope">
|
|
<span>{{
|
|
scope.row.marriageState == 1
|
|
? "已婚"
|
|
: scope.row.marriageState == 2
|
|
? "未婚"
|
|
: scope.row.marriageState == 3
|
|
? "离婚"
|
|
: "--"
|
|
}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
:resizable="true"
|
|
align="center"
|
|
label="居住地址"
|
|
prop="address"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
:resizable="true"
|
|
align="center"
|
|
label="所在地区"
|
|
prop="areaName"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
:resizable="true"
|
|
align="center"
|
|
label="户籍状态"
|
|
prop="domicileState"
|
|
width="100"
|
|
>
|
|
<template #default="scope">
|
|
<span class="table_ormal" v-if="scope.row.domicileState == 1"
|
|
>正常</span
|
|
>
|
|
<span class="table_cancel" v-else-if="scope.row.domicileState == 2"
|
|
>注销</span
|
|
>
|
|
<span v-else>--</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
:resizable="true"
|
|
align="center"
|
|
label="操作"
|
|
width="350"
|
|
>
|
|
<template #default="scope">
|
|
<span
|
|
class="operate"
|
|
@click="
|
|
(dialogForm = scope.row),
|
|
(dialogVisible = true),
|
|
(readonly = false)
|
|
"
|
|
>
|
|
<svg-icon name="edit" class="icon"></svg-icon>
|
|
<span class="edit">编辑</span>
|
|
</span>
|
|
<span
|
|
class="operate"
|
|
@click="toDetail(scope.row.domicileId)"
|
|
>
|
|
<svg-icon name="detail" class="icon"></svg-icon>
|
|
<span class="detail">详情</span>
|
|
</span>
|
|
<span class="operate" @click="del(scope.row.domicileId)">
|
|
<svg-icon name="delete" class="icon"></svg-icon>
|
|
<span class="func">删除</span>
|
|
</span>
|
|
<span
|
|
v-if="scope.row.domicileState != 2"
|
|
class="operate"
|
|
@click="
|
|
(cancelDialogForm = scope.row), (cancelDialogVisible = true)
|
|
"
|
|
>
|
|
<svg-icon name="edit" class="icon"></svg-icon>
|
|
<span class="func">注销</span>
|
|
</span>
|
|
<span
|
|
v-else
|
|
class="operate"
|
|
@click="restore(scope.row.domicileId)"
|
|
>
|
|
<svg-icon name="edit" class="icon"></svg-icon>
|
|
<span class="func">恢复</span>
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- 分页 -->
|
|
<el-pagination
|
|
class="pagination"
|
|
@size-change="getList"
|
|
@current-change="getList"
|
|
v-model:current-page.sync="currentPage"
|
|
:page-sizes="[10, 15, 20, 30]"
|
|
v-model:page-size.sync="pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total"
|
|
background
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
<add-edit
|
|
:visible="dialogVisible"
|
|
:form="dialogForm"
|
|
:readonly="readonly"
|
|
@close="onclone"
|
|
/>
|
|
<Cancel
|
|
:visible="cancelDialogVisible"
|
|
:form="cancelDialogForm"
|
|
@close="cancelonclone"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script lang='ts' setup>
|
|
import { onMounted, reactive, ref } from "vue";
|
|
import { domicilePage, domicileDel, domicileRestore } from "@/api/base";
|
|
import AddEdit from "./dialog/add-edit.vue";
|
|
import Cancel from "./dialog/cancel.vue";
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
import { useRouter } from "vue-router";
|
|
const router = useRouter();
|
|
import useUserStore from "@/store/modules/user";
|
|
const userStore = useUserStore();
|
|
const user = ref(JSON.parse(userStore.userInfo));
|
|
const userId = ref(user.value.userId);
|
|
|
|
const dialogVisible = ref(false);
|
|
const dialogForm = ref({});
|
|
const readonly = ref(false);
|
|
const search = ref({
|
|
condition: "",
|
|
domicileState: "",
|
|
marriageState:"",
|
|
sex:"",
|
|
});
|
|
const currentPage = ref(1);
|
|
const pageSize = ref(10);
|
|
const total = ref(0);
|
|
const tableData = ref([]);
|
|
//获取列表
|
|
const tableDataloading = ref(false);
|
|
const getList = () => {
|
|
tableDataloading.value = true;
|
|
let params = {
|
|
limit: pageSize.value,
|
|
page: currentPage.value,
|
|
condition: search.value.condition,
|
|
userId: userId.value,
|
|
domicileState:search.value.domicileState,
|
|
marriageState:search.value.marriageState,
|
|
sex:search.value.sex,
|
|
};
|
|
domicilePage(params).then((res: any) => {
|
|
tableData.value = res.data.list;
|
|
total.value = res.data.total;
|
|
tableDataloading.value = false;
|
|
});
|
|
};
|
|
// 删除
|
|
const del = (id) => {
|
|
ElMessageBox.confirm("是否确认删除户籍?", "提示", {
|
|
confirmButtonText: "是",
|
|
cancelButtonText: "否",
|
|
type: "warning",
|
|
}).then(() => {
|
|
let params = {
|
|
domicileId: id,
|
|
};
|
|
domicileDel(params).then((res: any) => {
|
|
if (res.code == 1) {
|
|
ElMessage.success({
|
|
message: "删除成功",
|
|
});
|
|
} else {
|
|
ElMessage.error({
|
|
message: res.message,
|
|
});
|
|
}
|
|
getList();
|
|
});
|
|
});
|
|
};
|
|
//恢复户籍
|
|
const restore = (id) => {
|
|
ElMessageBox.confirm("是否确认恢复户籍?", "提示", {
|
|
confirmButtonText: "是",
|
|
cancelButtonText: "否",
|
|
type: "warning",
|
|
}).then(() => {
|
|
let params = {
|
|
domicileId: id,
|
|
};
|
|
domicileRestore(params).then((res: any) => {
|
|
if (res.code == 1) {
|
|
ElMessage.success({
|
|
message: "删除成功",
|
|
});
|
|
} else {
|
|
ElMessage.error({
|
|
message: res.message,
|
|
});
|
|
}
|
|
getList();
|
|
});
|
|
});
|
|
};
|
|
//调整详情
|
|
const toDetail = (id) => {
|
|
router.push({
|
|
name: "resident-detail",
|
|
query: { id: id },
|
|
});
|
|
};
|
|
// 注销
|
|
const cancelDialogVisible = ref(false);
|
|
const cancelDialogForm = ref({});
|
|
const cancelonclone = () => {
|
|
cancelDialogVisible.value = false;
|
|
cancelDialogForm.value = {};
|
|
getList();
|
|
};
|
|
//关闭新增弹窗
|
|
const onclone = () => {
|
|
dialogVisible.value = false;
|
|
dialogForm.value = {};
|
|
readonly.value = false;
|
|
getList();
|
|
};
|
|
onMounted(() => {
|
|
getList();
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
width: 100%;
|
|
background: #fff;
|
|
border-radius: 0.26042vw;
|
|
box-shadow: 0 0 0.41667vw 0 rgb(8 33 85 / 10%);
|
|
height: 100%;
|
|
padding: 0.83333vw;
|
|
overflow-y: auto;
|
|
overflow-x: hidden !important;
|
|
/* stylelint-disable-next-line property-no-vendor-prefix */
|
|
-moz-box-sizing: border-box;
|
|
/* stylelint-disable-next-line property-no-vendor-prefix */
|
|
-webkit-box-sizing: border-box;
|
|
/* stylelint-disable-next-line property-no-vendor-prefix */
|
|
-o-box-sizing: border-box;
|
|
/* stylelint-disable-next-line property-no-vendor-prefix */
|
|
-ms-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
.dialog-footer button:first-child {
|
|
margin-right: 10px;
|
|
}
|
|
.content-top {
|
|
padding: 16px;
|
|
background: #fff;
|
|
box-shadow: 0 0 6px rgb(0 120 255 / 10%);
|
|
border-radius: 6px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
</style> |