新增户籍详情
This commit is contained in:
du
parent
690d422cb7
commit
3478197e2c
|
|
@ -70,4 +70,53 @@ export function domicileDetail(params) {
|
|||
url: `/admin/people/domicileDetail/${params.domicileId}`,
|
||||
method: "GET",
|
||||
});
|
||||
}
|
||||
}
|
||||
/**
|
||||
*户籍管理-户籍人员列表
|
||||
*/
|
||||
export function domicilePeoplePageList(params) {
|
||||
return request({
|
||||
url: `/admin/people/domicilePeoplePageList`,
|
||||
method: "GET",
|
||||
params:params,
|
||||
});
|
||||
}
|
||||
/**
|
||||
*人员类型
|
||||
*/
|
||||
export function crTypeList(params) {
|
||||
return request({
|
||||
url: `/admin/people/crTypeList`,
|
||||
method: "GET",
|
||||
});
|
||||
}
|
||||
/**
|
||||
*根据人员类型进行分页查询
|
||||
*/
|
||||
export function peoplePage(params) {
|
||||
return request({
|
||||
url: `/admin/people/peoplePage`,
|
||||
method: "GET",
|
||||
params:params,
|
||||
});
|
||||
}
|
||||
/**
|
||||
*人员新增或修改
|
||||
*/
|
||||
export function peopleAdd(params) {
|
||||
return request({
|
||||
url: `/admin/people/peopleAdd`,
|
||||
method: "POST",
|
||||
data:params,
|
||||
});
|
||||
}
|
||||
/**
|
||||
*查看人员详情
|
||||
*/
|
||||
export function peopleDetail(params) {
|
||||
return request({
|
||||
url: `/admin/people/peopleDetail/${params.peopleId}`,
|
||||
method: "GET",
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -381,3 +381,11 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
//列表中文本显示颜色
|
||||
.table_ormal {
|
||||
color: rgb(63 221 5);
|
||||
}
|
||||
.table_cancel {
|
||||
color: red;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,104 +5,95 @@
|
|||
|
||||
// 全局变量
|
||||
:root {
|
||||
// 头部宽度（默认自适应宽度，可固定宽度，固定宽度后为居中显示）
|
||||
--g-header-width: 100%;
|
||||
// 头部高度
|
||||
--g-header-height: 70px;
|
||||
// 侧边栏宽度
|
||||
--g-main-sidebar-width: 70px;
|
||||
--g-sub-sidebar-width: 220px;
|
||||
// 侧边栏Logo高度
|
||||
--g-sidebar-logo-height: 50px;
|
||||
// 顶栏高度
|
||||
--g-topbar-height: 50px;
|
||||
--topHeight: 60px;
|
||||
--breadCurmbHeight: 40px;
|
||||
--main-theme-color: #383f65;
|
||||
// 头部宽度（默认自适应宽度，可固定宽度，固定宽度后为居中显示）
|
||||
--g-header-width: 100%;
|
||||
// 头部高度
|
||||
--g-header-height: 70px;
|
||||
// 侧边栏宽度
|
||||
--g-main-sidebar-width: 70px;
|
||||
--g-sub-sidebar-width: 220px;
|
||||
// 侧边栏Logo高度
|
||||
--g-sidebar-logo-height: 50px;
|
||||
// 顶栏高度
|
||||
--g-topbar-height: 50px;
|
||||
--topHeight: 60px;
|
||||
--breadCurmbHeight: 40px;
|
||||
--main-theme-color: #383f65;
|
||||
--color-primary: #5473e8;
|
||||
--bread-curmb-last: #065638;
|
||||
|
||||
--color-primary: #5473e8;
|
||||
--bread-curmb-last: #065638;
|
||||
// color
|
||||
--blue: #1d86fb;
|
||||
--white: #fff;
|
||||
--activeBlue: #7bb6fa;
|
||||
--fontColor: --color-primary;
|
||||
--green: #f4a914;
|
||||
--deepGreen: #fb4e33;
|
||||
|
||||
// color
|
||||
--blue: #1d86fb;
|
||||
--white: #fff;
|
||||
--activeBlue: #7bb6fa;
|
||||
--fontColor: --color-primary;
|
||||
--green: #f4a914;
|
||||
--deepGreen: #fb4e33;
|
||||
// sidebar
|
||||
--menuText: rgb(255 255 255 / 70%);
|
||||
--menuHover: rgb(1 137 113 / 100%);
|
||||
--menuActiveText: rgb(255 255 255 / 100%);
|
||||
--sideBarWidth: 252px;
|
||||
--menuActiveBg: rgb(69 86 154);
|
||||
--menuActivePoint: rgb(255 255 255 / 100%);
|
||||
|
||||
// sidebar
|
||||
--menuText: rgba(255, 255, 255, 0.7);
|
||||
--menuHover: rgba(1, 137, 113, 1);
|
||||
--menuActiveText: rgba(255, 255, 255, 1);
|
||||
--sideBarWidth: 252px;
|
||||
--menuActiveBg: rgb(69, 86, 154);
|
||||
--menuActivePoint: rgba(255, 255, 255, 1);
|
||||
// fontSize
|
||||
--fontSize10: 10px;
|
||||
--fontSize11: 11px;
|
||||
--fontSize12: 12px;
|
||||
--fontSize13: 13px;
|
||||
--fontSize14: 14px;
|
||||
--fontSize16: 16px;
|
||||
--fontSize18: 18px;
|
||||
--fontSize20: 20px;
|
||||
--fontSize34: 34px;
|
||||
|
||||
// fontSize
|
||||
--fontSize10: 10px;
|
||||
--fontSize11: 11px;
|
||||
--fontSize12: 12px;
|
||||
--fontSize13: 13px;
|
||||
--fontSize14: 14px;
|
||||
--fontSize16: 16px;
|
||||
--fontSize18: 18px;
|
||||
--fontSize20: 20px;
|
||||
--fontSize34: 34px;
|
||||
|
||||
// paddingSit
|
||||
--paddingSit: 16px;
|
||||
// paddingSit
|
||||
--paddingSit: 16px;
|
||||
}
|
||||
|
||||
// 全局样式
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(0 0 0 / 40%);
|
||||
background-clip: padding-box;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 6px;
|
||||
background-color: rgb(0 0 0 / 40%);
|
||||
background-clip: padding-box;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
/**/
|
||||
}
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
|
||||
/* */
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba($color: #4f88fd, $alpha: 0.5);
|
||||
border-radius: 10px;
|
||||
background: rgba($color: #4f88fd, $alpha: 50%);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba($color: #4f88fd, $alpha: 1);
|
||||
background: rgba($color: #4f88fd, $alpha: 100%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: #179a16;
|
||||
background: #179a16;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
|
|
@ -113,280 +104,256 @@ span,
|
|||
table,
|
||||
th,
|
||||
td {
|
||||
font-family: "PingFangSC", "PingFangSC-Regular";
|
||||
font-family: PingFangSC, PingFangSC-Regular;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
&.hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
&.hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: inherit;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
// 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
|
||||
[data-fixed-calc-width] {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
right: 0;
|
||||
width: calc(
|
||||
100% - var(--g-main-sidebar-actual-width) -
|
||||
var(--g-sub-sidebar-actual-width)
|
||||
);
|
||||
transform: translateX(-50%)
|
||||
translateX(calc(var(--g-main-sidebar-actual-width) / 2))
|
||||
translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
right: 0;
|
||||
width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
|
||||
transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
|
||||
}
|
||||
|
||||
[data-mode="mobile"] {
|
||||
[data-fixed-calc-width] {
|
||||
width: 100% !important;
|
||||
transform: translateX(-50%) !important;
|
||||
}
|
||||
[data-fixed-calc-width] {
|
||||
width: 100% !important;
|
||||
transform: translateX(-50%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// textarea 字体跟随系统
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
// 列表页全局样式
|
||||
.el-table.list-table {
|
||||
margin: 20px 0;
|
||||
|
||||
.el-button + .el-dropdown {
|
||||
margin-left: 10px;
|
||||
}
|
||||
margin: 20px 0;
|
||||
.el-button + .el-dropdown {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.v-layout {
|
||||
display: -webkit-box;
|
||||
/* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
|
||||
display: -moz-box;
|
||||
/* Firefox 17- */
|
||||
display: -webkit-flex;
|
||||
/* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
|
||||
display: -moz-flex;
|
||||
/* Firefox 18+ */
|
||||
display: -ms-flexbox;
|
||||
/* IE 10 */
|
||||
display: flex;
|
||||
/* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
|
||||
display: box;
|
||||
|
||||
/* Firefox 17- */
|
||||
display: flex;
|
||||
|
||||
/* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
|
||||
display: -moz-flex;
|
||||
|
||||
/* Firefox 18+ */
|
||||
display: flexbox;
|
||||
|
||||
/* IE 10 */
|
||||
display: flex;
|
||||
|
||||
/* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
|
||||
flex-direction: column;
|
||||
}
|
||||
.h-layout {
|
||||
display: -webkit-box;
|
||||
/* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
|
||||
display: -moz-box;
|
||||
/* Firefox 17- */
|
||||
display: -webkit-flex;
|
||||
/* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
|
||||
display: -moz-flex;
|
||||
/* Firefox 18+ */
|
||||
display: -ms-flexbox;
|
||||
/* IE 10 */
|
||||
display: flex;
|
||||
/* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
/* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
|
||||
display: box;
|
||||
|
||||
/* Firefox 17- */
|
||||
display: flex;
|
||||
|
||||
/* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
|
||||
display: -moz-flex;
|
||||
|
||||
/* Firefox 18+ */
|
||||
display: flexbox;
|
||||
|
||||
/* IE 10 */
|
||||
display: flex;
|
||||
|
||||
/* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
|
||||
flex-direction: row;
|
||||
}
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.h-center {
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.h-titlec {
|
||||
align-items: center;
|
||||
|
||||
.span {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
align-items: center;
|
||||
.span {
|
||||
width: 100%;
|
||||
}
|
||||
.icon {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
.v-center {
|
||||
justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.space-between {
|
||||
justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.contenner-main {
|
||||
margin: 16px;
|
||||
padding: 16px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 6px rgba(0, 120, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
margin: 16px;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 6px rgb(0 120 255 / 10%);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.see-detail {
|
||||
color: #1d86fb;
|
||||
font-size: --fontSize13;
|
||||
cursor: pointer;
|
||||
color: #1d86fb;
|
||||
font-size: --fontsize13;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tablenull :empty::before {
|
||||
// content: '--';
|
||||
// color: gray;
|
||||
// content: '--';
|
||||
// color: gray;
|
||||
}
|
||||
|
||||
.to-detail {
|
||||
cursor: pointer;
|
||||
background: #5473e8;
|
||||
border-radius: 13px;
|
||||
color: #fff;
|
||||
padding: 1px 25px;
|
||||
cursor: pointer;
|
||||
background: #5473e8;
|
||||
border-radius: 13px;
|
||||
color: #fff;
|
||||
padding: 1px 25px;
|
||||
}
|
||||
|
||||
.icon_class {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
// margin-left: 10px;
|
||||
margin-right: 5px;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
fill: currentcolor;
|
||||
overflow: hidden;
|
||||
// margin-left: 10px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
//百分比样式
|
||||
.percentage-content {
|
||||
width: 100%;
|
||||
height: 87vh;
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
height: 87vh;
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.option {
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-left: 10px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
fill: currentcolor;
|
||||
overflow: hidden;
|
||||
}
|
||||
.icon {
|
||||
margin-left: 10px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.tool-item {
|
||||
margin-right: 1.04167vw;
|
||||
cursor: pointer;
|
||||
color: #5473e8;
|
||||
font-size: 15px;
|
||||
vertical-align: 0.1em;
|
||||
|
||||
.icon {
|
||||
margin-right: 3px;
|
||||
vertical-align: -0.12em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
margin-right: 1.04167vw;
|
||||
cursor: pointer;
|
||||
color: #5473e8;
|
||||
font-size: 15px;
|
||||
vertical-align: 0.1em;
|
||||
.icon {
|
||||
margin-right: 3px;
|
||||
vertical-align: -0.12em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
font-size: --fontSize10;
|
||||
color: #333333;
|
||||
margin-right: 20px;
|
||||
|
||||
label {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.el-date-editor.el-input,
|
||||
.el-date-editor.el-input__inner {
|
||||
width: 160px;
|
||||
}
|
||||
font-size: --fontsize10;
|
||||
color: #333;
|
||||
margin-right: 20px;
|
||||
label {
|
||||
width: fit-content;
|
||||
}
|
||||
.el-date-editor.el-input,
|
||||
.el-date-editor.el-input__inner {
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
/** 解决box-sizing */
|
||||
@mixin boxSizing() {
|
||||
-moz-box-sizing: border-box;
|
||||
/*Firefox3.5+*/
|
||||
-webkit-box-sizing: border-box;
|
||||
/*Safari3.2+*/
|
||||
-o-box-sizing: border-box;
|
||||
/*Opera9.6*/
|
||||
-ms-box-sizing: border-box;
|
||||
/*IE8*/
|
||||
box-sizing: border-box;
|
||||
|
||||
/* Firefox3.5+ */
|
||||
box-sizing: border-box;
|
||||
|
||||
/* Safari3.2+ */
|
||||
box-sizing: border-box;
|
||||
|
||||
/* Opera9.6 */
|
||||
box-sizing: border-box;
|
||||
|
||||
/* IE8 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/** 隐藏滚动条 */
|
||||
@mixin scrollBar() {
|
||||
/** Chrome/QQ浏览器 */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
/** Chrome/QQ浏览器 */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/** IE浏览器 */
|
||||
& {
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
/** IE浏览器 */
|
||||
& {
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
/** Firefox浏览器 */
|
||||
& {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
/** Firefox浏览器 */
|
||||
& {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin scrollbarStyle() {
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
/**/
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba($color: #4f88fd, $alpha: 0.5);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba($color: #4f88fd, $alpha: 1);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-corner {
|
||||
background: #179a16;
|
||||
}
|
||||
/* */
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba($color: #4f88fd, $alpha: 50%);
|
||||
border-radius: 10px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba($color: #4f88fd, $alpha: 100%);
|
||||
}
|
||||
&::-webkit-scrollbar-corner {
|
||||
background: #179a16;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,8 +38,8 @@ onMounted(() => {
|
|||
zoom: 12, // 初始化地图级别
|
||||
center: props.longlat?props.longlat:[101.13, 30.98], // 初始化地图中心点位置
|
||||
});
|
||||
console.log(11);
|
||||
console.log(cont.value.offsetWidth,cont.value.offsetHeight,'this.$refs.cont===>');
|
||||
// console.log(11);
|
||||
// console.log(cont.value.offsetWidth,cont.value.offsetHeight,'this.$refs.cont===>');
|
||||
var marker = new AMap.Marker({
|
||||
// position: [101.13, 30.98],
|
||||
imageSize: new AMap.Size(10, 10),
|
||||
|
|
@ -69,8 +69,6 @@ onUnmounted(() => {
|
|||
watch(
|
||||
() => props.longlat,
|
||||
(val) => {
|
||||
console.log(val,'val==>');
|
||||
console.log(map,'map==>');
|
||||
map.setCenter(val)
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -30,7 +30,21 @@ export default {
|
|||
auth: "emer.resourse",
|
||||
title: '户籍管理',
|
||||
breadcrumb: true, //是否显示面包屑
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'resident-detail',
|
||||
name: 'resident-detail',
|
||||
component: () => import('@/views/base-manage/residence/detail.vue'),
|
||||
meta: {
|
||||
auth: "emer.resident.detail",
|
||||
title: '户籍详情',
|
||||
sidebar: false, //是否在菜单栏显示
|
||||
breadcrumb: true, //是否显示面包屑
|
||||
activeMenu: '/base-manage/resident'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// path: 'residence',
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<template>
|
||||
<div class="percentage-content">
|
||||
<div class="content">
|
||||
<div style="margin-bottom: 16px" class="h-layout space-between h-center">
|
||||
<div style="margin-bottom: 16px;" class="h-layout space-between h-center">
|
||||
<div>
|
||||
<div class="h-layout">
|
||||
<div
|
||||
|
|
@ -16,16 +16,32 @@
|
|||
<svg-icon name="refurbish" class="icon" />
|
||||
<span>刷新</span>
|
||||
</div>
|
||||
<div class="label-select filter-tab">
|
||||
<label>地区</label>
|
||||
<el-cascader
|
||||
@change="getList"
|
||||
ref="cascader"
|
||||
v-model="search.areaCode"
|
||||
placeholder="请选择地区"
|
||||
:options="orgList"
|
||||
:props="{
|
||||
checkStrictly: true,
|
||||
label: 'orgname',
|
||||
value: 'orgcode',
|
||||
}"
|
||||
clearable
|
||||
></el-cascader>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 30%">
|
||||
<div style="width: 30%;">
|
||||
<el-input
|
||||
v-model="search"
|
||||
v-model="search.condition"
|
||||
placeholder="请输入关键字"
|
||||
class="search-input"
|
||||
>
|
||||
<template #append>
|
||||
<span @click="getCompanyList" class="search-bottom">
|
||||
<span @click="getList" class="search-bottom">
|
||||
<svg-icon name="search" class="icon_class" />
|
||||
<span>搜索</span>
|
||||
</span>
|
||||
|
|
@ -127,8 +143,8 @@
|
|||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="getCompanyList"
|
||||
@current-change="getCompanyList"
|
||||
@size-change="getList"
|
||||
@current-change="getList"
|
||||
v-model:current-page.sync="currentPage"
|
||||
:page-sizes="[10, 15, 20, 30]"
|
||||
v-model:page-size.sync="pageSize"
|
||||
|
|
@ -149,76 +165,54 @@
|
|||
import { ElMessageBox } from "element-plus";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import AddEdit from "../population/dialog/add-edit.vue";
|
||||
import { areaTree } from "@/api/account";
|
||||
import { peoplePage } from "@/api/base";
|
||||
import useUserStore from "@/store/modules/user";
|
||||
const userStore = useUserStore();
|
||||
const user = ref(JSON.parse(userStore.userInfo));
|
||||
const userId = ref(user.value.userId);
|
||||
|
||||
const visible = ref(false);
|
||||
const currentItem = ref();
|
||||
|
||||
const search = ref([]);
|
||||
const search = ref({
|
||||
condition: "",
|
||||
areaCode:"",
|
||||
});
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(4);
|
||||
const tableData = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "张五",
|
||||
sex: "男",
|
||||
loc: "道孚县鲜水镇",
|
||||
tag: "流动人口",
|
||||
type: "低保户",
|
||||
poor: "是",
|
||||
birth: "1989-10-21",
|
||||
address: "xxxxxxxxxxx地址",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "张A",
|
||||
sex: "男",
|
||||
loc: "道孚县鲜水镇",
|
||||
tag: "流动人口",
|
||||
type: "五保户",
|
||||
poor: "是",
|
||||
birth: "1989-10-21",
|
||||
address: "xxxxxxxxxxx地址",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "张B",
|
||||
sex: "男",
|
||||
loc: "道孚县鲜水镇",
|
||||
tag: "流动人口",
|
||||
type: "党员",
|
||||
poor: "否",
|
||||
birth: "1989-10-21",
|
||||
address: "xxxxxxxxxxx地址",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "张C",
|
||||
sex: "男",
|
||||
loc: "道孚县鲜水镇",
|
||||
tag: "流动人口",
|
||||
type: "村组干部",
|
||||
poor: "否",
|
||||
birth: "1989-10-21",
|
||||
address: "xxxxxxxxxxx地址",
|
||||
},
|
||||
]);
|
||||
|
||||
const tags = ref([
|
||||
{ label: "流动人口", value: 1 },
|
||||
{ label: "常住人口", value: 2 },
|
||||
]);
|
||||
const types = ref([
|
||||
{ label: "新生儿", value: 1 },
|
||||
{ label: "在校生", value: 2 },
|
||||
{ label: "残疾人", value: 3 },
|
||||
{ label: "低保户", value: 4 },
|
||||
{ label: "五保户", value: 5 },
|
||||
{ label: "党员", value: 6 },
|
||||
{ label: "村组干部", value: 7 },
|
||||
{ label: "其他", value: 8 },
|
||||
]);
|
||||
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,
|
||||
areaCode: "",
|
||||
typeName: "常驻人口",
|
||||
};
|
||||
if (search.value.areaCode) {
|
||||
params.areaCode = search.value.areaCode[search.value.areaCode.length - 1];
|
||||
}
|
||||
peoplePage(params).then((res: any) => {
|
||||
console.log(res, "res====>");
|
||||
tableData.value = res.data.list;
|
||||
total.value = res.data.total;
|
||||
tableDataloading.value = false;
|
||||
});
|
||||
};
|
||||
//获取地区
|
||||
const orgList = ref([]);
|
||||
const getareaTree = () => {
|
||||
areaTree(userId.value).then((res: any) => {
|
||||
orgList.value = res.data;
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
|
|
@ -230,35 +224,40 @@ const del = (item, tips) => {
|
|||
}).then(() => {});
|
||||
};
|
||||
|
||||
onMounted(() => {});
|
||||
onMounted(() => {
|
||||
getareaTree();
|
||||
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;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
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;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.content-top {
|
||||
padding: 16px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 6px rgba(0, 120, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 6px rgb(0 120 255 / 10%);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<template>
|
||||
<div class="percentage-content">
|
||||
<div class="content">
|
||||
<div style="margin-bottom: 16px" class="h-layout space-between h-center">
|
||||
<div style="margin-bottom: 16px;" class="h-layout space-between h-center">
|
||||
<div>
|
||||
<div class="h-layout">
|
||||
<div
|
||||
|
|
@ -16,16 +16,32 @@
|
|||
<svg-icon name="refurbish" class="icon" />
|
||||
<span>刷新</span>
|
||||
</div>
|
||||
<div class="label-select filter-tab">
|
||||
<label>地区</label>
|
||||
<el-cascader
|
||||
@change="getList"
|
||||
ref="cascader"
|
||||
v-model="search.areaCode"
|
||||
placeholder="请选择地区"
|
||||
:options="orgList"
|
||||
:props="{
|
||||
checkStrictly: true,
|
||||
label: 'orgname',
|
||||
value: 'orgcode',
|
||||
}"
|
||||
clearable
|
||||
></el-cascader>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 30%">
|
||||
<div style="width: 30%;">
|
||||
<el-input
|
||||
v-model="search"
|
||||
v-model="search.condition"
|
||||
placeholder="请输入关键字"
|
||||
class="search-input"
|
||||
>
|
||||
<template #append>
|
||||
<span @click="getCompanyList" class="search-bottom">
|
||||
<span @click="getList" class="search-bottom">
|
||||
<svg-icon name="search" class="icon_class" />
|
||||
<span>搜索</span>
|
||||
</span>
|
||||
|
|
@ -134,8 +150,8 @@
|
|||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="getCompanyList"
|
||||
@current-change="getCompanyList"
|
||||
@size-change="getList"
|
||||
@current-change="getList"
|
||||
v-model:current-page.sync="currentPage"
|
||||
:page-sizes="[10, 15, 20, 30]"
|
||||
v-model:page-size.sync="pageSize"
|
||||
|
|
@ -156,98 +172,47 @@
|
|||
import { ElMessageBox } from "element-plus";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import AddEdit from "../population/dialog/add-edit.vue";
|
||||
import { areaTree } from "@/api/account";
|
||||
import { peoplePage } from "@/api/base";
|
||||
import useUserStore from "@/store/modules/user";
|
||||
const userStore = useUserStore();
|
||||
const user = ref(JSON.parse(userStore.userInfo));
|
||||
const userId = ref(user.value.userId);
|
||||
|
||||
const visible = ref(false);
|
||||
const currentItem = ref();
|
||||
|
||||
const search = ref([]);
|
||||
const search = ref({
|
||||
condition: "",
|
||||
areaCode:"",
|
||||
});
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(6);
|
||||
const tableData = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "张三",
|
||||
sex: "男",
|
||||
loc: "道孚县鲜水镇",
|
||||
tag: "常驻人口",
|
||||
type: "新生儿",
|
||||
poor: "否",
|
||||
birth: "2023-12-15",
|
||||
address: "xxxxxxxxxxx地址",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "张四",
|
||||
sex: "女",
|
||||
loc: "道孚县鲜水镇",
|
||||
tag: "常驻人口",
|
||||
type: "在校生",
|
||||
poor: "否",
|
||||
birth: "1989-10-21",
|
||||
address: "xxxxxxxxxxx地址",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "张五",
|
||||
sex: "男",
|
||||
loc: "道孚县鲜水镇",
|
||||
tag: "常驻人口",
|
||||
type: "低保户",
|
||||
poor: "是",
|
||||
birth: "1989-10-21",
|
||||
address: "xxxxxxxxxxx地址",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "张A",
|
||||
sex: "男",
|
||||
loc: "道孚县鲜水镇",
|
||||
tag: "常驻人口",
|
||||
type: "五保户",
|
||||
poor: "是",
|
||||
birth: "1989-10-21",
|
||||
address: "xxxxxxxxxxx地址",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "张B",
|
||||
sex: "男",
|
||||
loc: "道孚县鲜水镇",
|
||||
tag: "常驻人口",
|
||||
type: "党员",
|
||||
poor: "否",
|
||||
birth: "1989-10-21",
|
||||
address: "xxxxxxxxxxx地址",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "张C",
|
||||
sex: "男",
|
||||
loc: "道孚县鲜水镇",
|
||||
tag: "常驻人口",
|
||||
type: "村组干部",
|
||||
poor: "否",
|
||||
birth: "1989-10-21",
|
||||
address: "xxxxxxxxxxx地址",
|
||||
},
|
||||
]);
|
||||
|
||||
const tags = ref([
|
||||
{ label: "流动人口", value: 1 },
|
||||
{ label: "常住人口", value: 2 },
|
||||
]);
|
||||
const types = ref([
|
||||
{ label: "新生儿", value: 1 },
|
||||
{ label: "在校生", value: 2 },
|
||||
{ label: "残疾人", value: 3 },
|
||||
{ label: "低保户", value: 4 },
|
||||
{ label: "五保户", value: 5 },
|
||||
{ label: "党员", value: 6 },
|
||||
{ label: "村组干部", value: 7 },
|
||||
{ label: "其他", value: 8 },
|
||||
]);
|
||||
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,
|
||||
areaCode: "",
|
||||
typeName: "常驻人口",
|
||||
};
|
||||
if (search.value.areaCode) {
|
||||
params.areaCode = search.value.areaCode[search.value.areaCode.length - 1];
|
||||
}
|
||||
peoplePage(params).then((res: any) => {
|
||||
console.log(res, "res====>");
|
||||
tableData.value = res.data.list;
|
||||
total.value = res.data.total;
|
||||
tableDataloading.value = false;
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
|
|
@ -258,36 +223,47 @@ const del = (item, tips) => {
|
|||
type: "warning",
|
||||
}).then(() => {});
|
||||
};
|
||||
|
||||
onMounted(() => {});
|
||||
//获取地区
|
||||
const orgList = ref([]);
|
||||
const getareaTree = () => {
|
||||
areaTree(userId.value).then((res: any) => {
|
||||
orgList.value = res.data;
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
getareaTree();
|
||||
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;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
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;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.content-top {
|
||||
padding: 16px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 6px rgba(0, 120, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 6px rgb(0 120 255 / 10%);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<template>
|
||||
<div class="percentage-content">
|
||||
<div class="content">
|
||||
<div style="margin-bottom: 16px" class="h-layout space-between h-center">
|
||||
<div style="margin-bottom: 16px;" class="h-layout space-between h-center">
|
||||
<div>
|
||||
<div class="h-layout">
|
||||
<div
|
||||
|
|
@ -16,16 +16,32 @@
|
|||
<svg-icon name="refurbish" class="icon" />
|
||||
<span>刷新</span>
|
||||
</div>
|
||||
<div class="label-select filter-tab">
|
||||
<label>地区</label>
|
||||
<el-cascader
|
||||
@change="getList"
|
||||
ref="cascader"
|
||||
v-model="search.areaCode"
|
||||
placeholder="请选择地区"
|
||||
:options="orgList"
|
||||
:props="{
|
||||
checkStrictly: true,
|
||||
label: 'orgname',
|
||||
value: 'orgcode',
|
||||
}"
|
||||
clearable
|
||||
></el-cascader>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 30%">
|
||||
<div style="width: 30%;">
|
||||
<el-input
|
||||
v-model="search"
|
||||
v-model="search.condition"
|
||||
placeholder="请输入关键字"
|
||||
class="search-input"
|
||||
>
|
||||
<template #append>
|
||||
<span @click="getCompanyList" class="search-bottom">
|
||||
<span @click="getList" class="search-bottom">
|
||||
<svg-icon name="search" class="icon_class" />
|
||||
<span>搜索</span>
|
||||
</span>
|
||||
|
|
@ -127,8 +143,8 @@
|
|||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="getCompanyList"
|
||||
@current-change="getCompanyList"
|
||||
@size-change="getList"
|
||||
@current-change="getList"
|
||||
v-model:current-page.sync="currentPage"
|
||||
:page-sizes="[10, 15, 20, 30]"
|
||||
v-model:page-size.sync="pageSize"
|
||||
|
|
@ -149,38 +165,46 @@
|
|||
import { ElMessageBox } from "element-plus";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import AddEdit from "../population/dialog/add-edit.vue";
|
||||
import { areaTree } from "@/api/account";
|
||||
import { peoplePage } from "@/api/base";
|
||||
import useUserStore from "@/store/modules/user";
|
||||
const userStore = useUserStore();
|
||||
const user = ref(JSON.parse(userStore.userInfo));
|
||||
const userId = ref(user.value.userId);
|
||||
|
||||
const visible = ref(false);
|
||||
const currentItem = ref();
|
||||
|
||||
const search = ref([]);
|
||||
const search = ref({
|
||||
condition: "",
|
||||
areaCode: "",
|
||||
});
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(2);
|
||||
const tableData = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "张五",
|
||||
sex: "男",
|
||||
loc: "道孚县鲜水镇",
|
||||
tag: "常驻人口",
|
||||
type: "低保户",
|
||||
poor: "是",
|
||||
birth: "1989-10-21",
|
||||
address: "xxxxxxxxxxx地址",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "张A",
|
||||
sex: "男",
|
||||
loc: "道孚县鲜水镇",
|
||||
tag: "常驻人口",
|
||||
type: "五保户",
|
||||
poor: "是",
|
||||
birth: "1989-10-21",
|
||||
address: "xxxxxxxxxxx地址",
|
||||
},
|
||||
]);
|
||||
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,
|
||||
areaCode: "",
|
||||
typeName: "贫困户管理",
|
||||
};
|
||||
if (search.value.areaCode) {
|
||||
params.areaCode = search.value.areaCode[search.value.areaCode.length - 1];
|
||||
}
|
||||
peoplePage(params).then((res: any) => {
|
||||
console.log(res, "res====>");
|
||||
tableData.value = res.data.list;
|
||||
total.value = res.data.total;
|
||||
tableDataloading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除
|
||||
|
|
@ -192,36 +216,47 @@ const del = (item, tips) => {
|
|||
type: "warning",
|
||||
}).then(() => {});
|
||||
};
|
||||
|
||||
onMounted(() => {});
|
||||
//获取地区
|
||||
const orgList = ref([]);
|
||||
const getareaTree = () => {
|
||||
areaTree(userId.value).then((res: any) => {
|
||||
orgList.value = res.data;
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
getareaTree();
|
||||
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;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
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;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.content-top {
|
||||
padding: 16px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 6px rgba(0, 120, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 6px rgb(0 120 255 / 10%);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
</style>
|
||||
530
src/views/base-manage/residence/detail.vue
Normal file
530
src/views/base-manage/residence/detail.vue
Normal file
|
|
@ -0,0 +1,530 @@
|
|||
<template>
|
||||
<div class="percentage-content">
|
||||
<div class="content">
|
||||
<div>
|
||||
<TitleC titleName="户籍信息">
|
||||
<template v-slot:option>
|
||||
<div class="h-layout option">
|
||||
<div class="h-layout h-titlec" @click="getDetail">
|
||||
<svg-icon name="refurbish" class="icon" />
|
||||
<span class="span">刷新</span>
|
||||
</div>
|
||||
<div
|
||||
class="h-layout h-titlec"
|
||||
@click="resetPwd"
|
||||
v-if="formEnable"
|
||||
>
|
||||
<svg-icon name="save-yellow" class="icon" />
|
||||
<span class="span">编辑</span>
|
||||
</div>
|
||||
<div v-else class="h-layout h-titlec" @click="handleSumit()">
|
||||
<svg-icon name="save-yellow" class="icon" />
|
||||
<span class="span">保存</span>
|
||||
</div>
|
||||
<div class="h-layout h-titlec" @click="clone">
|
||||
<svg-icon name="close" class="icon" />
|
||||
<span class="span">关闭</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</TitleC>
|
||||
<div class="detailForm-content">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
label-width="150px"
|
||||
:rules="ruleForm"
|
||||
:model="detailForm"
|
||||
>
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input
|
||||
:disabled="formEnable"
|
||||
placeholder="请输入"
|
||||
type="input"
|
||||
v-model="detailForm.name"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="sortId">
|
||||
<el-select
|
||||
:disabled="formEnable"
|
||||
placeholder="请选择"
|
||||
v-model="detailForm.sex"
|
||||
>
|
||||
<el-option label="男" :value="1">男</el-option>
|
||||
<el-option label="女" :value="0">女</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="areaCode" label="所属区域">
|
||||
<el-cascader
|
||||
:disabled="formEnable"
|
||||
ref="cascader"
|
||||
v-model="detailForm.areaCode"
|
||||
placeholder="请选择地区"
|
||||
:options="orgList"
|
||||
:props="{
|
||||
checkStrictly: true,
|
||||
label: 'orgname',
|
||||
value: 'orgcode',
|
||||
}"
|
||||
clearable
|
||||
></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="婚姻状态" prop="marriageState">
|
||||
<el-select
|
||||
:disabled="formEnable"
|
||||
placeholder="请选择"
|
||||
v-model="detailForm.marriageState"
|
||||
>
|
||||
<el-option label="已婚" :value="1">已婚</el-option>
|
||||
<el-option label="未婚" :value="2">未婚</el-option>
|
||||
<el-option label="离婚" :value="3">离婚</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="出生日期" prop="birthday">
|
||||
<el-date-picker
|
||||
:disabled="formEnable"
|
||||
v-model="detailForm.birthday"
|
||||
type="date"
|
||||
placeholder="请选择出生日期"
|
||||
size="default"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="户籍创建时间" prop="changeTime">
|
||||
<el-date-picker
|
||||
:disabled="formEnable"
|
||||
v-model="detailForm.changeTime"
|
||||
type="date"
|
||||
placeholder="请选择户籍创建时间"
|
||||
size="default"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号" prop="idCard">
|
||||
<el-input
|
||||
:disabled="formEnable"
|
||||
placeholder="请输入身份证号"
|
||||
type="input"
|
||||
v-model="detailForm.idCard"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="现居地址" prop="address">
|
||||
<el-input
|
||||
:disabled="formEnable"
|
||||
placeholder="请输入"
|
||||
type="input"
|
||||
v-model="detailForm.address"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="经度" prop="lon">
|
||||
<el-input
|
||||
:disabled="formEnable"
|
||||
placeholder="请输入"
|
||||
type="input"
|
||||
v-model="detailForm.lon"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="纬度" prop="lat">
|
||||
<el-input
|
||||
:disabled="formEnable"
|
||||
placeholder="请输入"
|
||||
type="input"
|
||||
v-model="detailForm.lat"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="formEnable ? false : true"
|
||||
label="地图："
|
||||
style="width: 94%;"
|
||||
>
|
||||
<Map
|
||||
@change="handleMapChange"
|
||||
:longlat="
|
||||
detailForm.lon && detailForm.lat
|
||||
? [detailForm.lon, detailForm.lat]
|
||||
: latAndLon
|
||||
"
|
||||
></Map>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<TitleC titleName="人员信息">
|
||||
<template v-slot:option>
|
||||
<div class="h-layout option">
|
||||
<div class="h-layout h-titlec" @click="getList">
|
||||
<svg-icon name="refurbish" class="icon" />
|
||||
<span class="span">刷新</span>
|
||||
</div>
|
||||
<div
|
||||
class="h-layout h-titlec"
|
||||
@click="(detailDialogVisible = true), (form = {}), (readonly = false)"
|
||||
>
|
||||
<svg-icon name="add" class="icon" />
|
||||
<span class="span">新建</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</TitleC>
|
||||
<el-table
|
||||
ref="loading"
|
||||
v-loading="tableDataloading"
|
||||
:data="detailTableData"
|
||||
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="phoneNumber"
|
||||
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? '男':'女'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:resizable="true"
|
||||
align="center"
|
||||
label="人员标签"
|
||||
prop="peopleTag"
|
||||
width="100"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.peopleTag == 1? '常住人口':'流动人口'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:resizable="true"
|
||||
align="center"
|
||||
label="当前地址"
|
||||
prop="nowAddress"
|
||||
>
|
||||
</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="relation"
|
||||
width="130"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.relation == 1? '户主':scope.row.relation == 2? '父亲':
|
||||
scope.row.relation == 3? '母亲':scope.row.relation == 4? '祖父':
|
||||
scope.row.relation == 5? '祖母':'子女' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:resizable="true"
|
||||
align="center"
|
||||
label="操作"
|
||||
width="350"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span
|
||||
class="operate"
|
||||
@click="
|
||||
(form = scope.row),
|
||||
(detailDialogVisible = true),
|
||||
(readonly = false)
|
||||
"
|
||||
>
|
||||
<svg-icon name="edit" class="icon"></svg-icon>
|
||||
<span class="edit">编辑</span>
|
||||
</span>
|
||||
<span
|
||||
class="operate"
|
||||
@click="(detailDialogVisible = true), (form = scope.row), (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>
|
||||
</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>
|
||||
</div>
|
||||
<!-- 户籍人员新增/修改弹窗 -->
|
||||
<DetailAddPersonnel
|
||||
:visible="detailDialogVisible"
|
||||
:form="form"
|
||||
:readonly="readonly"
|
||||
:id="domicileId"
|
||||
@close="onclone"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { ElMessage, FormInstance, FormRules, ElMessageBox } from "element-plus";
|
||||
import DetailAddPersonnel from "./dialog/detail-addPersonnel.vue";
|
||||
import { areaTree } from "@/api/account";
|
||||
import { domicileAdd, domicileDetail, domicilePeoplePageList } from "@/api/base";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useRouter } from "vue-router";
|
||||
import useUserStore from "@/store/modules/user";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const user = ref(JSON.parse(userStore.userInfo));
|
||||
const userId = ref(user.value.userId);
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
//控制form框操作
|
||||
const formEnable = ref(true);
|
||||
const detailForm = ref<any>({});
|
||||
//道孚地图坐标
|
||||
const latAndLon = ref([101.13, 30.98]);
|
||||
const formRef = ref<FormInstance>();
|
||||
let isCardId = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return new Error("请输入身份证号)");
|
||||
} else {
|
||||
const reg =
|
||||
/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/;
|
||||
const card = reg.test(value);
|
||||
if (!card) {
|
||||
//判断座机为12位
|
||||
callback(new Error("身份证格式如:423024xxxx0216xxxx"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
};
|
||||
const ruleForm = reactive<FormRules>({
|
||||
name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
|
||||
sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
|
||||
lat: [{ required: true, message: "请选择纬度", trigger: "blur" }],
|
||||
lon: [{ required: true, message: "请选择经度", trigger: "blur" }],
|
||||
idCard: [
|
||||
{ required: true, message: "请输入身份证号", trigger: "blur" },
|
||||
{ validator: isCardId, trigger: "blur" },
|
||||
],
|
||||
changeTime: [
|
||||
{ required: true, message: "请选择户籍创建时间", trigger: "blur" },
|
||||
],
|
||||
areaCode: [{ required: true, message: "请选择地区", trigger: "blur" }],
|
||||
address: [{ required: true, message: "请输入地址", trigger: "blur" }],
|
||||
});
|
||||
//户籍id
|
||||
const domicileId = ref();
|
||||
//人员信息
|
||||
const form = ref({});
|
||||
//人员信息弹窗
|
||||
const detailDialogVisible = ref(false);
|
||||
const readonly = ref(false);
|
||||
//table列表
|
||||
const tableDataloading = ref(false);
|
||||
const tableData = ref([]);
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(0);
|
||||
|
||||
|
||||
//编辑
|
||||
const resetPwd = () => {
|
||||
formEnable.value = false;
|
||||
};
|
||||
//保存
|
||||
const handleSumit = () => {
|
||||
formRef.value?.validate((valid) => {
|
||||
if (valid) {
|
||||
let params = {
|
||||
...detailForm.value,
|
||||
areaCode:"",
|
||||
domicileId:detailForm.value.domicileId
|
||||
? detailForm.value.domicileId
|
||||
: null,
|
||||
};
|
||||
if (detailForm.value.areaCode instanceof Array) {
|
||||
params.areaCode =
|
||||
detailForm.value.areaCode[detailForm.value.areaCode.length - 1];
|
||||
} else {
|
||||
params.areaCode = detailForm.value.areaCode;
|
||||
}
|
||||
console.log(params,'params===>');
|
||||
|
||||
domicileAdd(params).then((res: any) => {
|
||||
if (res.code == 1) {
|
||||
ElMessage.success({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
});
|
||||
formEnable.value = true;
|
||||
refurbish();
|
||||
} else {
|
||||
ElMessage.error({
|
||||
message: res.message,
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
return false;
|
||||
});
|
||||
};
|
||||
// 地图拖拽结束
|
||||
const handleMapChange = (pos) => {
|
||||
detailForm.value.lon = pos[0];
|
||||
detailForm.value.lat = pos[1];
|
||||
};
|
||||
//关闭
|
||||
const clone = () => {
|
||||
router.go(-1);
|
||||
};
|
||||
//获取详情
|
||||
const getDetail = () => {
|
||||
domicileDetail({domicileId:route.query.id}).then((res: any) => {
|
||||
detailForm.value = res.data;
|
||||
});
|
||||
};
|
||||
|
||||
//获取地区
|
||||
const orgList = ref([]);
|
||||
const getAreaTree = () => {
|
||||
areaTree(userId.value).then((res: any) => {
|
||||
orgList.value = res.data;
|
||||
});
|
||||
};
|
||||
|
||||
//人员信息分页
|
||||
const detailTableData = ref([])
|
||||
const getList = () => {
|
||||
tableDataloading.value = true;
|
||||
let params = {
|
||||
limit: pageSize.value,
|
||||
page: currentPage.value,
|
||||
domicileId: route.query.id,
|
||||
};
|
||||
domicilePeoplePageList(params).then((res: any) => {
|
||||
console.log(res,'res===>');
|
||||
detailTableData.value = res.data.list;
|
||||
total.value = res.data.total;
|
||||
tableDataloading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
*删除
|
||||
*/
|
||||
const delEquip = (id) => {
|
||||
ElMessageBox.confirm("是否确认删除?", "提示", {
|
||||
confirmButtonText: "是",
|
||||
cancelButtonText: "否",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
// delOthequipment(id, userId.value).then((res: any) => {
|
||||
// if (res.code == 1) {
|
||||
// ElMessage.success({
|
||||
// message: "删除成功",
|
||||
// });
|
||||
// } else {
|
||||
// ElMessage.error({
|
||||
// message: res.message,
|
||||
// });
|
||||
// }
|
||||
// getList();
|
||||
// });
|
||||
});
|
||||
};
|
||||
|
||||
//刷新
|
||||
const refurbish = () => {
|
||||
getDetail();
|
||||
};
|
||||
|
||||
//关闭弹窗
|
||||
const onclone = () => {
|
||||
detailDialogVisible.value = false;
|
||||
form.value = {};
|
||||
getList();
|
||||
};
|
||||
onMounted(() => {
|
||||
domicileId.value = route.query.id || "";
|
||||
refurbish();
|
||||
|
||||
getAreaTree();
|
||||
|
||||
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: scroll;
|
||||
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;
|
||||
}
|
||||
.detailForm-content {
|
||||
margin-right: 30px;
|
||||
}
|
||||
:deep(.el-form) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
:deep(.el-form-item) {
|
||||
width: 45%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
width="50%"
|
||||
@onSubmit="handleSubmit"
|
||||
:footerclosed="true"
|
||||
:footerkeepnaem="readonly?false:true"
|
||||
:footerkeepnaem="readonly ? false : true"
|
||||
:diafooter="true"
|
||||
>
|
||||
<div class="detailForm-content">
|
||||
|
|
@ -18,17 +18,26 @@
|
|||
class="center-form"
|
||||
>
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input :disabled="readonly" placeholder="请输入" type="input" v-model="formData.name" />
|
||||
<el-input
|
||||
:disabled="readonly"
|
||||
placeholder="请输入"
|
||||
type="input"
|
||||
v-model="formData.name"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="sortId">
|
||||
<el-select :disabled="readonly" placeholder="请选择" v-model="formData.sex">
|
||||
<el-select
|
||||
:disabled="readonly"
|
||||
placeholder="请选择"
|
||||
v-model="formData.sex"
|
||||
>
|
||||
<el-option label="男" :value="1">男</el-option>
|
||||
<el-option label="女" :value="0">女</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="areaCode" label="所属区域">
|
||||
<el-cascader
|
||||
:disabled="readonly"
|
||||
:disabled="readonly"
|
||||
ref="cascader"
|
||||
v-model="formData.areaCode"
|
||||
placeholder="请选择地区"
|
||||
|
|
@ -42,7 +51,11 @@
|
|||
></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="婚姻状态" prop="marriageState">
|
||||
<el-select :disabled="readonly" placeholder="请选择" v-model="formData.marriageState">
|
||||
<el-select
|
||||
:disabled="readonly"
|
||||
placeholder="请选择"
|
||||
v-model="formData.marriageState"
|
||||
>
|
||||
<el-option label="已婚" :value="1">已婚</el-option>
|
||||
<el-option label="未婚" :value="2">未婚</el-option>
|
||||
<el-option label="离婚" :value="3">离婚</el-option>
|
||||
|
|
@ -50,7 +63,7 @@
|
|||
</el-form-item>
|
||||
<el-form-item label="出生日期" prop="birthday">
|
||||
<el-date-picker
|
||||
:disabled="readonly"
|
||||
:disabled="readonly"
|
||||
v-model="formData.birthday"
|
||||
type="date"
|
||||
placeholder="请选择出生日期"
|
||||
|
|
@ -61,7 +74,7 @@
|
|||
</el-form-item>
|
||||
<el-form-item label="户籍创建时间" prop="changeTime">
|
||||
<el-date-picker
|
||||
:disabled="readonly"
|
||||
:disabled="readonly"
|
||||
v-model="formData.changeTime"
|
||||
type="date"
|
||||
placeholder="请选择户籍创建时间"
|
||||
|
|
@ -71,23 +84,42 @@
|
|||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号" prop="idCard" style="width: 94%;">
|
||||
<el-input :disabled="readonly" placeholder="请输入身份证号" type="input" v-model="formData.idCard" />
|
||||
<el-input
|
||||
:disabled="readonly"
|
||||
placeholder="请输入身份证号"
|
||||
type="input"
|
||||
v-model="formData.idCard"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="现居地址" prop="address" style="width: 94%;">
|
||||
<el-input
|
||||
:disabled="readonly"
|
||||
:disabled="readonly"
|
||||
placeholder="请输入"
|
||||
type="input"
|
||||
v-model="formData.address"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="经度" prop="lon">
|
||||
<el-input :disabled="readonly" placeholder="请输入" type="input" v-model="formData.lon" />
|
||||
<el-input
|
||||
:disabled="readonly"
|
||||
placeholder="请输入"
|
||||
type="input"
|
||||
v-model="formData.lon"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="纬度" prop="lat">
|
||||
<el-input :disabled="readonly" placeholder="请输入" type="input" v-model="formData.lat" />
|
||||
<el-input
|
||||
:disabled="readonly"
|
||||
placeholder="请输入"
|
||||
type="input"
|
||||
v-model="formData.lat"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="readonly?false:true" label="地图：" style="width: 94%;">
|
||||
<el-form-item
|
||||
v-if="readonly ? false : true"
|
||||
label="地图："
|
||||
style="width: 94%;"
|
||||
>
|
||||
<Map
|
||||
@change="handleMapChange"
|
||||
:longlat="
|
||||
|
|
@ -98,76 +130,18 @@
|
|||
></Map>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-if="readonly"
|
||||
ref="loading"
|
||||
:data="detailTableData"
|
||||
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="phoneNumber"
|
||||
width="130"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:resizable="true"
|
||||
align="center"
|
||||
label="性别"
|
||||
prop="sex"
|
||||
width="130"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:resizable="true"
|
||||
align="center"
|
||||
label="当前地址"
|
||||
prop="nowAddress"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:resizable="true"
|
||||
align="center"
|
||||
label="关系"
|
||||
prop="relation"
|
||||
width="130"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.relation == 1? '户主':scope.row.relation == 2? '父亲':scope.row.relation == 3? '母亲':scope.row.relation == 4? '祖父':scope.row.relation == 5? '祖母':'子女' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
import { reactive, ref, onMounted, watch } from "vue";
|
||||
import { ElMessage, FormInstance, FormRules } from "element-plus";
|
||||
import { getUUID } from "@/utils/common";
|
||||
import { areaTree } from "@/api/account";
|
||||
import { domicileAdd, domicileDetail } from "@/api/base";
|
||||
import useUserStore from "@/store/modules/user";
|
||||
const userStore = useUserStore();
|
||||
const user = ref(JSON.parse(userStore.userInfo));
|
||||
const userId = ref(user.value.userId);
|
||||
const uuid = ref(getUUID());
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
|
|
@ -186,16 +160,37 @@ const emits = defineEmits(["close"]);
|
|||
const titleName = ref("新增");
|
||||
// 表单
|
||||
const formRef = ref<FormInstance>();
|
||||
let isCardId = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return new Error("请输入身份证号)");
|
||||
} else {
|
||||
const reg =
|
||||
/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/;
|
||||
const card = reg.test(value);
|
||||
if (!card) {
|
||||
//判断座机为12位
|
||||
callback(new Error("身份证格式如:423024xxxx0216xxxx"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
};
|
||||
const ruleForm = reactive<FormRules>({
|
||||
name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
|
||||
sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
|
||||
lat: [{ required: true, message: "请选择纬度", trigger: "blur" }],
|
||||
lon: [{ required: true, message: "请选择经度", trigger: "blur" }],
|
||||
idCard: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
|
||||
changeTime: [{ required: true, message: "请选择户籍创建时间", trigger: "blur" }],
|
||||
areaCode:[{ required: true, message: "请选择地区", trigger: "blur" }],
|
||||
idCard: [
|
||||
{ required: true, message: "请输入身份证号", trigger: "blur" },
|
||||
{ validator: isCardId, trigger: "blur" },
|
||||
],
|
||||
changeTime: [
|
||||
{ required: true, message: "请选择户籍创建时间", trigger: "blur" },
|
||||
],
|
||||
areaCode: [{ required: true, message: "请选择地区", trigger: "blur" }],
|
||||
address: [{ required: true, message: "请输入地址", trigger: "blur" }],
|
||||
});
|
||||
|
||||
const formData = ref<any>({});
|
||||
//保存并退出
|
||||
const handleSubmit = () => {
|
||||
|
|
@ -203,8 +198,8 @@ const handleSubmit = () => {
|
|||
if (valid) {
|
||||
let params = {
|
||||
...formData.value,
|
||||
areaCode:"",
|
||||
domicileId:formData.value.domicileId
|
||||
areaCode: "",
|
||||
domicileId: formData.value.domicileId
|
||||
? formData.value.domicileId
|
||||
: null,
|
||||
};
|
||||
|
|
@ -214,8 +209,6 @@ const handleSubmit = () => {
|
|||
} else {
|
||||
params.areaCode = formData.value.areaCode;
|
||||
}
|
||||
console.log(params,'params===>');
|
||||
|
||||
domicileAdd(params).then((res: any) => {
|
||||
if (res.code == 1) {
|
||||
ElMessage.success({
|
||||
|
|
@ -253,12 +246,12 @@ const onclone = () => {
|
|||
emits("close");
|
||||
};
|
||||
//详情获取户籍人员信息
|
||||
const detailTableData = ref([])
|
||||
const getDomicileDetail = (id)=>{
|
||||
domicileDetail({domicileId:id}).then((res: any) => {
|
||||
const detailTableData = ref([]);
|
||||
const getDomicileDetail = (id) => {
|
||||
domicileDetail({ domicileId: id }).then((res: any) => {
|
||||
detailTableData.value = res.peopleList;
|
||||
});
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
getareaTree();
|
||||
});
|
||||
|
|
@ -267,12 +260,10 @@ watch(
|
|||
() => props.readonly,
|
||||
(val: any) => {
|
||||
if (val == true) {
|
||||
console.log(val,'val===>');
|
||||
setTimeout(() => {
|
||||
titleName.value = '查看';
|
||||
titleName.value = "查看";
|
||||
getDomicileDetail(formData.value.domicileId);
|
||||
}, 300);
|
||||
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -16,12 +16,12 @@
|
|||
:model="formData"
|
||||
class="center-form"
|
||||
>
|
||||
<el-form-item label="注销时间" prop="changeTime">
|
||||
<el-form-item label="注销时间" prop="changeTime" style="width: 94%;">
|
||||
<el-date-picker
|
||||
v-model="formData.changeTime"
|
||||
type="date"
|
||||
placeholder="请选择注销时间"
|
||||
size="default"
|
||||
size="large"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
|
|
@ -96,4 +96,8 @@
|
|||
}
|
||||
);
|
||||
</script>
|
||||
<style scoped></style>
|
||||
<style scoped lang="scss">
|
||||
.detailForm-content {
|
||||
min-height: 150px;
|
||||
}
|
||||
</style>
|
||||
288
src/views/base-manage/residence/dialog/detail-addPersonnel.vue
Normal file
288
src/views/base-manage/residence/dialog/detail-addPersonnel.vue
Normal file
|
|
@ -0,0 +1,288 @@
|
|||
<template>
|
||||
<BaseDialog
|
||||
:dialogVisible="props.visible"
|
||||
@close="onclone"
|
||||
:titleName="titleName + '人员'"
|
||||
width="50%"
|
||||
@onSubmit="handleSubmit"
|
||||
:footerclosed="true"
|
||||
:footerkeepnaem="readonly ? false : true"
|
||||
:diafooter="true"
|
||||
>
|
||||
<div class="detailForm-content">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
label-width="120"
|
||||
:rules="ruleForm"
|
||||
:model="formData"
|
||||
>
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input
|
||||
:disabled="readonly"
|
||||
placeholder="请输入姓名"
|
||||
type="input"
|
||||
v-model="formData.name"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="phoneNumber">
|
||||
<el-input
|
||||
:disabled="readonly"
|
||||
placeholder="请输入电话"
|
||||
type="input"
|
||||
v-model="formData.phoneNumber"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-select
|
||||
:disabled="readonly"
|
||||
placeholder="请选择"
|
||||
v-model="formData.sex"
|
||||
>
|
||||
<el-option label="男" :value="1">男</el-option>
|
||||
<el-option label="女" :value="0">女</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="areaCode" label="所属区域">
|
||||
<el-cascader
|
||||
:disabled="readonly"
|
||||
ref="cascader"
|
||||
v-model="formData.areaCode"
|
||||
placeholder="请选择地区"
|
||||
:options="orgList"
|
||||
:props="{
|
||||
checkStrictly: true,
|
||||
label: 'orgname',
|
||||
value: 'orgcode',
|
||||
}"
|
||||
clearable
|
||||
></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="人员标签" prop="peopleTag">
|
||||
<el-select
|
||||
:disabled="readonly"
|
||||
placeholder="请选择人员标签"
|
||||
v-model="formData.peopleTag"
|
||||
>
|
||||
<el-option label="常住人口" :value="1">常住人口</el-option>
|
||||
<el-option label="流动人口" :value="2">流动人口</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="关系" prop="relation">
|
||||
<el-select
|
||||
:disabled="readonly"
|
||||
placeholder="请选择关系"
|
||||
v-model="formData.relation"
|
||||
>
|
||||
<el-option label="户主" :value="1">户主</el-option>
|
||||
<el-option label="父亲" :value="2">父亲</el-option>
|
||||
<el-option label="母亲" :value="3">母亲</el-option>
|
||||
<el-option label="祖父" :value="4">祖父</el-option>
|
||||
<el-option label="祖母" :value="5">祖母</el-option>
|
||||
<el-option label="子女" :value="6">子女</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="出生日期" prop="birthday">
|
||||
<el-date-picker
|
||||
:disabled="readonly"
|
||||
v-model="formData.birthday"
|
||||
type="date"
|
||||
placeholder="请选择出生日期"
|
||||
size="default"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker
|
||||
:disabled="readonly"
|
||||
v-model="formData.createTime"
|
||||
type="date"
|
||||
placeholder="请选择创建时间"
|
||||
size="default"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="typeId" style="width: 100%;">
|
||||
<el-select
|
||||
multiple
|
||||
:disabled="readonly"
|
||||
placeholder="请选择类型"
|
||||
v-model="formData.typeId"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in typeList"
|
||||
:key="index"
|
||||
:label="item.typeName"
|
||||
:value="item.typeId"
|
||||
>{{ item.typeName }}</el-option
|
||||
>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号" prop="idCard" style="width: 100%;">
|
||||
<el-input
|
||||
:disabled="readonly"
|
||||
placeholder="请输入身份证号"
|
||||
type="input"
|
||||
v-model="formData.idCard"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="当前地址" prop="nowAddress" style="width: 100%;">
|
||||
<el-input
|
||||
:disabled="readonly"
|
||||
placeholder="请输入当前地址"
|
||||
type="input"
|
||||
v-model="formData.nowAddress"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
import { reactive, ref, onMounted, watch } from "vue";
|
||||
import { ElMessage, FormInstance, FormRules } from "element-plus";
|
||||
import { areaTree } from "@/api/account";
|
||||
import { crTypeList, peopleAdd, peopleDetail } from "@/api/base";
|
||||
import useUserStore from "@/store/modules/user";
|
||||
const userStore = useUserStore();
|
||||
const user = ref(JSON.parse(userStore.userInfo));
|
||||
const userId = ref(user.value.userId);
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
form: Object,
|
||||
});
|
||||
const emits = defineEmits(["close"]);
|
||||
const titleName = ref("新增");
|
||||
// 表单
|
||||
const formRef = ref<FormInstance>();
|
||||
let isCardId = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return new Error("请输入身份证号)");
|
||||
} else {
|
||||
const reg =
|
||||
/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/;
|
||||
const card = reg.test(value);
|
||||
if (!card) {
|
||||
//判断座机为12位
|
||||
callback(new Error("身份证格式如:423024xxxx0216xxxx"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
};
|
||||
const ruleForm = reactive<FormRules>({
|
||||
name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
|
||||
phoneNumber: [{ required: true, message: "请输入电话", trigger: "blur" }],
|
||||
areaCode: [{ required: true, message: "请选择地区", trigger: "blur" }],
|
||||
idCard: [
|
||||
{ required: true, message: "请输入身份证号", trigger: "blur" },
|
||||
{ validator: isCardId, trigger: "blur" },
|
||||
],
|
||||
createTime: [
|
||||
{ required: true, message: "请选择创建时间", trigger: "blur" },
|
||||
],
|
||||
sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
|
||||
nowAddress: [{ required: true, message: "请输入地址", trigger: "blur" }],
|
||||
peopleTag: [{ required: true, message: "请选择人员标签", trigger: "blur" }],
|
||||
relation: [{ required: true, message: "请选择人员关系", trigger: "blur" }],
|
||||
typeId: [{ required: true, message: "请选择类型", trigger: "blur" }],
|
||||
});
|
||||
|
||||
const formData = ref<any>({});
|
||||
//保存并退出
|
||||
const handleSubmit = () => {
|
||||
formRef.value?.validate((valid) => {
|
||||
if (valid) {
|
||||
let params = {
|
||||
...formData.value,
|
||||
areaCode: "",
|
||||
peopleId: formData.value.peopleId ? formData.value.peopleId : null,
|
||||
domicileId:props.id,
|
||||
};
|
||||
if (formData.value.areaCode instanceof Array) {
|
||||
params.areaCode =
|
||||
formData.value.areaCode[formData.value.areaCode.length - 1];
|
||||
} else {
|
||||
params.areaCode = formData.value.areaCode;
|
||||
}
|
||||
peopleAdd(params).then((res: any) => {
|
||||
if (res.code == 1) {
|
||||
ElMessage.success({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
});
|
||||
onclone();
|
||||
} else {
|
||||
ElMessage.error({
|
||||
message: res.message,
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
return false;
|
||||
});
|
||||
};
|
||||
//获取地区
|
||||
const orgList = ref([]);
|
||||
const getareaTree = () => {
|
||||
areaTree(userId.value).then((res: any) => {
|
||||
orgList.value = res.data;
|
||||
});
|
||||
};
|
||||
//获取类型
|
||||
const typeList = ref([]);
|
||||
const getCrTypeList = () => {
|
||||
crTypeList(userId.value).then((res: any) => {
|
||||
typeList.value = res.data;
|
||||
});
|
||||
};
|
||||
//查看人员详情
|
||||
const getPeopleDetail = (id) => {
|
||||
peopleDetail({peopleId:id}).then((res: any) => {
|
||||
formData.value = res.data;
|
||||
formData.value.typeId = res.data.typeIds;
|
||||
formData.value.peopleTag = res.data.peopleTag*1;
|
||||
});
|
||||
};
|
||||
//关闭弹窗
|
||||
const onclone = () => {
|
||||
formRef.value?.clearValidate();
|
||||
formData.value = {};
|
||||
emits("close");
|
||||
};
|
||||
onMounted(() => {
|
||||
getareaTree();
|
||||
getCrTypeList();
|
||||
});
|
||||
|
||||
//详情
|
||||
watch(
|
||||
() => props.form,
|
||||
(val: any) => {
|
||||
titleName.value = val.peopleId ? "编辑" : "新增";
|
||||
if (val.peopleId) {
|
||||
getPeopleDetail(val.peopleId);
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.detailForm-content {
|
||||
margin-right: 30px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="content">
|
||||
<div style="margin-bottom: 16px;" class="h-layout space-between h-center">
|
||||
<div>
|
||||
<div class="h-layout">
|
||||
<div class="h-layout h-center">
|
||||
<div
|
||||
class="tool-item"
|
||||
@click="
|
||||
|
|
@ -19,20 +19,40 @@
|
|||
<span>刷新</span>
|
||||
</div>
|
||||
<div class="label-select filter-tab">
|
||||
<label>预案类型</label>
|
||||
<label>户籍状态</label>
|
||||
<el-select
|
||||
v-model="type"
|
||||
@change="getList"
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
v-model="search.domicileState"
|
||||
clearable
|
||||
@change="getList"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in option"
|
||||
:key="item.othtypeid"
|
||||
:label="item.othtypename"
|
||||
:value="item.othtypeid"
|
||||
>
|
||||
</el-option>
|
||||
<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>
|
||||
|
|
@ -82,11 +102,13 @@
|
|||
align="center"
|
||||
label="性别"
|
||||
prop="sex"
|
||||
width="80"
|
||||
width="100"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.sex == 1? '男':scope.row.sex == 0? '女':'--' }}</span>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<span>{{
|
||||
scope.row.sex == 1 ? "男" : scope.row.sex == 0 ? "女" : "--"
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:resizable="true"
|
||||
|
|
@ -95,20 +117,28 @@
|
|||
prop="birthday"
|
||||
width="200"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.birthday ? scope.row.birthday:'--' }}</span>
|
||||
</template>
|
||||
<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"
|
||||
width="100"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.marriageState == 1? '已婚':scope.row.marriageState == 2? '未婚':scope.row.marriageState == 3? '离婚':'--' }}</span>
|
||||
</template>
|
||||
<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"
|
||||
|
|
@ -122,11 +152,17 @@
|
|||
align="center"
|
||||
label="户籍状态"
|
||||
prop="domicileState"
|
||||
width="80"
|
||||
width="100"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.domicileState == 1? '正常':scope.row.domicileState == 2? '注销':'--' }}</span>
|
||||
</template>
|
||||
<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"
|
||||
|
|
@ -148,11 +184,7 @@
|
|||
</span>
|
||||
<span
|
||||
class="operate"
|
||||
@click="
|
||||
(dialogForm = scope.row),
|
||||
(dialogVisible = true),
|
||||
(readonly = true)
|
||||
"
|
||||
@click="toDetail(scope.row.domicileId)"
|
||||
>
|
||||
<svg-icon name="detail" class="icon"></svg-icon>
|
||||
<span class="detail">详情</span>
|
||||
|
|
@ -161,7 +193,13 @@
|
|||
<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)">
|
||||
<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>
|
||||
|
|
@ -182,8 +220,17 @@
|
|||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
<add-edit :visible="dialogVisible" :form="dialogForm" :readonly="readonly" @close="onclone" />
|
||||
<Cancel :visible="cancelDialogVisible" :form="cancelDialogForm" @close="cancelonclone" />
|
||||
<add-edit
|
||||
:visible="dialogVisible"
|
||||
:form="dialogForm"
|
||||
:readonly="readonly"
|
||||
@close="onclone"
|
||||
/>
|
||||
<Cancel
|
||||
:visible="cancelDialogVisible"
|
||||
:form="cancelDialogForm"
|
||||
@close="cancelonclone"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang='ts' setup>
|
||||
|
|
@ -191,8 +238,9 @@ 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 { 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));
|
||||
|
|
@ -203,6 +251,9 @@ const dialogForm = ref({});
|
|||
const readonly = ref(false);
|
||||
const search = ref({
|
||||
condition: "",
|
||||
domicileState: "",
|
||||
marriageState:"",
|
||||
sex:"",
|
||||
});
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
|
|
@ -217,9 +268,11 @@ const getList = () => {
|
|||
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) => {
|
||||
console.log(res, "res====>");
|
||||
tableData.value = res.data.list;
|
||||
total.value = res.data.total;
|
||||
tableDataloading.value = false;
|
||||
|
|
@ -233,8 +286,8 @@ const del = (id) => {
|
|||
type: "warning",
|
||||
}).then(() => {
|
||||
let params = {
|
||||
domicileId:id
|
||||
}
|
||||
domicileId: id,
|
||||
};
|
||||
domicileDel(params).then((res: any) => {
|
||||
if (res.code == 1) {
|
||||
ElMessage.success({
|
||||
|
|
@ -249,9 +302,16 @@ const del = (id) => {
|
|||
});
|
||||
});
|
||||
};
|
||||
//调整详情
|
||||
const toDetail = (id) => {
|
||||
router.push({
|
||||
name: "resident-detail",
|
||||
query: { id: id },
|
||||
});
|
||||
};
|
||||
// 注销
|
||||
const cancelDialogVisible = ref(false);
|
||||
const cancelDialogForm= ref({});
|
||||
const cancelDialogForm = ref({});
|
||||
const cancelonclone = () => {
|
||||
cancelDialogVisible.value = false;
|
||||
cancelDialogForm.value = {};
|
||||
|
|
|
|||
|
|
@ -38,28 +38,29 @@
|
|||
>
|
||||
<el-form-item label="仓库名称：" prop="houseName">
|
||||
<el-input
|
||||
:readonly="formEnable"
|
||||
:disabled="formEnable"
|
||||
placeholder="请输入仓库名称"
|
||||
v-model="detailForm.houseName"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="管理员：" prop="name">
|
||||
<el-form-item label="管理员：" prop="nameId">
|
||||
<el-input
|
||||
:readonly="formEnable"
|
||||
:disabled="formEnable"
|
||||
placeholder="请输入管理员"
|
||||
v-model="detailForm.name"
|
||||
v-model="detailForm.nameId"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式：" prop="telephone">
|
||||
<el-input
|
||||
:readonly="formEnable"
|
||||
:disabled="formEnable"
|
||||
placeholder="请输入联系电话"
|
||||
v-model="detailForm.telephone"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属地区：" prop="orgCode">
|
||||
<el-form-item label="所属地区：" prop="areaCode">
|
||||
<el-cascader
|
||||
v-model="detailForm.orgCode"
|
||||
:disabled="formEnable"
|
||||
v-model="detailForm.areaCode"
|
||||
placeholder="请选择所属地区"
|
||||
@change="handleAreaChange"
|
||||
:options="orgList"
|
||||
|
|
@ -73,14 +74,14 @@
|
|||
</el-form-item>
|
||||
<el-form-item label="经度：" prop="lon">
|
||||
<el-input
|
||||
:readonly="formEnable"
|
||||
:disabled="true"
|
||||
placeholder="请输入经度"
|
||||
v-model="detailForm.lon"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="纬度：" prop="lat">
|
||||
<el-input
|
||||
:readonly="formEnable"
|
||||
:disabled="true"
|
||||
placeholder="请输入维度"
|
||||
v-model="detailForm.lat"
|
||||
></el-input>
|
||||
|
|
@ -88,22 +89,36 @@
|
|||
<el-form-item
|
||||
label="所属单位："
|
||||
prop="possession"
|
||||
style="width: 100%"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-input
|
||||
:readonly="formEnable"
|
||||
:disabled="formEnable"
|
||||
placeholder="请输入所属单位"
|
||||
v-model="detailForm.possession"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="地址：" prop="address" style="width: 100%">
|
||||
<el-form-item label="地址：" prop="address" style="width: 100%;">
|
||||
<el-input
|
||||
:readonly="formEnable"
|
||||
:disabled="formEnable"
|
||||
placeholder="请输入详细地址"
|
||||
v-model="detailForm.address"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="formEnable ? false : true"
|
||||
label="地图："
|
||||
style="width: 94%;"
|
||||
>
|
||||
<Map
|
||||
@change="handleMapChange"
|
||||
:longlat="
|
||||
detailForm.lon && detailForm.lat
|
||||
? [detailForm.lon, detailForm.lat]
|
||||
: latAndLon
|
||||
"
|
||||
></Map>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -226,6 +241,7 @@ import { onMounted, reactive, ref } from "vue";
|
|||
import { ElMessage, FormInstance, FormRules, ElMessageBox } from "element-plus";
|
||||
import AddEquDialog from "./dialog/add-equip-dialog.vue";
|
||||
import { areaTree } from "@/api/account";
|
||||
import { getYears, getUUID, FileType } from "@/utils/common";
|
||||
import {
|
||||
getHouseDetail,
|
||||
getOthequipmentPage,
|
||||
|
|
@ -236,14 +252,15 @@ import {
|
|||
import { useRoute } from "vue-router";
|
||||
import { useRouter } from "vue-router";
|
||||
import useUserStore from "@/store/modules/user";
|
||||
|
||||
const uuid = ref(getUUID());
|
||||
const userStore = useUserStore();
|
||||
const user = ref(JSON.parse(userStore.userInfo));
|
||||
const userId = ref(user.value.userId);
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const detailForm = ref<any>({});
|
||||
|
||||
//道孚地图坐标
|
||||
const latAndLon = ref([101.13, 30.98]);
|
||||
const formRef = ref<FormInstance>();
|
||||
const ruleForm = reactive<FormRules>({
|
||||
houseName: [{ required: true, message: "请输入仓库名称", trigger: "blur" }],
|
||||
|
|
@ -254,14 +271,16 @@ const ruleForm = reactive<FormRules>({
|
|||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
orgCode: [
|
||||
lon:[{ required: true, message: "请选择地图点位", trigger: "blur" }],
|
||||
lat:[{ required: true, message: "请选择地图点位", trigger: "blur" }],
|
||||
areaCode: [
|
||||
{ required: true, message: "请选择仓库所属地区", trigger: "change" },
|
||||
],
|
||||
possession: [
|
||||
{ required: true, message: "请输入仓库所属单位", trigger: "blur" },
|
||||
],
|
||||
address: [{ required: true, message: "请输入仓库", trigger: "blur" }],
|
||||
name: [
|
||||
nameId: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入仓库管理员",
|
||||
|
|
@ -289,16 +308,35 @@ const resetPwd = () => {
|
|||
const handleSumit = () => {
|
||||
formRef.value?.validate((valid) => {
|
||||
if (valid) {
|
||||
detailForm.value.houseId =
|
||||
detailForm.value.houseId || uuid.value;
|
||||
detailForm.value.userId = userId.value;
|
||||
saveOtheWareHouse(detailForm.value).then((res: any) => {
|
||||
let params = {
|
||||
...detailForm.value,
|
||||
areaCode: "",
|
||||
};
|
||||
if (detailForm.value.areaCode instanceof Array) {
|
||||
params.areaCode =
|
||||
detailForm.value.areaCode[
|
||||
detailForm.value.areaCode.length - 1
|
||||
];
|
||||
} else {
|
||||
params.areaCode = detailForm.value.areaCode;
|
||||
}
|
||||
console.log(params, "params===>");
|
||||
|
||||
saveOtheWareHouse(params).then((res: any) => {
|
||||
if (res.code == 1) {
|
||||
ElMessage.success({
|
||||
message: "保存成功",
|
||||
type: "success",
|
||||
});
|
||||
formEnable.value = false;
|
||||
formEnable.value = true;
|
||||
refurbish();
|
||||
} else
|
||||
ElMessage.error({
|
||||
message: res.message,
|
||||
type: "success",
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -367,7 +405,11 @@ const delEquip = (id) => {
|
|||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 地图拖拽结束
|
||||
const handleMapChange = (pos) => {
|
||||
detailForm.value.lon = pos[0];
|
||||
detailForm.value.lat = pos[1];
|
||||
};
|
||||
//刷新
|
||||
const refurbish = () => {
|
||||
getDetail();
|
||||
|
|
@ -394,29 +436,33 @@ onMounted(() => {
|
|||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 0.26042vw;
|
||||
box-shadow: 0 0 0.41667vw 0 rgba(8, 33, 85, 0.1);
|
||||
height: 100%;
|
||||
padding: 0.83333vw;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden !important;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
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: scroll;
|
||||
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;
|
||||
}
|
||||
.detailForm-content {
|
||||
margin-right: 30px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
:deep(.el-form) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
:deep(.el-form-item) {
|
||||
width: 45%;
|
||||
width: 45%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -55,14 +55,14 @@
|
|||
</el-form-item>
|
||||
<el-form-item label="经度：" prop="lon">
|
||||
<el-input
|
||||
:readonly="props.readonly"
|
||||
:readonly="true"
|
||||
placeholder="请输入经度"
|
||||
v-model="addPostFactorForm.lon"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="纬度：" prop="lat">
|
||||
<el-input
|
||||
:readonly="props.readonly"
|
||||
:readonly="true"
|
||||
placeholder="请输入维度"
|
||||
v-model="addPostFactorForm.lat"
|
||||
></el-input>
|
||||
|
|
@ -92,7 +92,6 @@
|
|||
<script setup lang="ts" >
|
||||
import { reactive, ref, onMounted, watch } from "vue";
|
||||
import useUserStore from "@/store/modules/user";
|
||||
import Map from "../../../../components/Map/index.vue";
|
||||
import { ElMessage, FormInstance, FormRules } from "element-plus";
|
||||
import { getYears, getUUID, FileType } from "@/utils/common";
|
||||
import {
|
||||
|
|
@ -123,7 +122,7 @@ const ruleForm = reactive<FormRules>({
|
|||
{ required: true, message: "请输入仓库所属单位", trigger: "blur" },
|
||||
],
|
||||
address: [{ required: true, message: "请输入仓库", trigger: "blur" }],
|
||||
name: [
|
||||
nameId: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入仓库管理员",
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user