302 lines
8.7 KiB
Vue
302 lines
8.7 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">
|
|
<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
|
|
v-model="type"
|
|
@change="getList"
|
|
clearable
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="item in option"
|
|
:key="item.othtypeid"
|
|
:label="item.othtypename"
|
|
:value="item.othtypeid"
|
|
>
|
|
</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="80"
|
|
>
|
|
<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="80"
|
|
>
|
|
<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="domicileState"
|
|
width="80"
|
|
>
|
|
<template #default="scope">
|
|
<span>{{ scope.row.domicileState == 1? '正常':scope.row.domicileState == 2? '注销':'--' }}</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="
|
|
(dialogForm = scope.row),
|
|
(dialogVisible = true),
|
|
(readonly = true)
|
|
"
|
|
>
|
|
<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="detail" 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 } from "@/api/base";
|
|
import AddEdit from "./dialog/add-edit.vue";
|
|
import Cancel from "./dialog/cancel.vue";
|
|
import { ElMessage,ElMessageBox } from "element-plus";
|
|
|
|
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: "",
|
|
});
|
|
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,
|
|
};
|
|
domicilePage(params).then((res: any) => {
|
|
console.log(res, "res====>");
|
|
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 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> |