新增户籍详情

src/api/base.ts

@@ -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",
+  });
+}
+

src/assets/styles/element-ui.scss

@@ -381,3 +381,11 @@
         }
     }
 }
+
+//列表中文本显示颜色
+.table_ormal {
+    color: rgb(63 221 5);
+}
+.table_cancel {
+    color: red;
+}

src/assets/styles/globals.scss

@@ -5,104 +5,95 @@
 
 // 全局变量
 :root {
-  // 头部宽度（默认自适应宽度，可固定宽度，固定宽度后为居中显示）
+    // 头部宽度（默认自适应宽度，可固定宽度，固定宽度后为居中显示）
-  --g-header-width: 100%;
+    --g-header-width: 100%;
-  // 头部高度
+    // 头部高度
-  --g-header-height: 70px;
+    --g-header-height: 70px;
-  // 侧边栏宽度
+    // 侧边栏宽度
-  --g-main-sidebar-width: 70px;
+    --g-main-sidebar-width: 70px;
-  --g-sub-sidebar-width: 220px;
+    --g-sub-sidebar-width: 220px;
-  // 侧边栏Logo高度
+    // 侧边栏Logo高度
-  --g-sidebar-logo-height: 50px;
+    --g-sidebar-logo-height: 50px;
-  // 顶栏高度
+    // 顶栏高度
-  --g-topbar-height: 50px;
+    --g-topbar-height: 50px;
-  --topHeight: 60px;
+    --topHeight: 60px;
-  --breadCurmbHeight: 40px;
+    --breadCurmbHeight: 40px;
-  --main-theme-color: #383f65;
+    --main-theme-color: #383f65;
+    --color-primary: #5473e8;
+    --bread-curmb-last: #065638;
 
-  --color-primary: #5473e8;
+    // color
-  --bread-curmb-last: #065638;
+    --blue: #1d86fb;
+    --white: #fff;
+    --activeBlue: #7bb6fa;
+    --fontColor: --color-primary;
+    --green: #f4a914;
+    --deepGreen: #fb4e33;
 
-  // color
+    // sidebar
-  --blue: #1d86fb;
+    --menuText: rgb(255 255 255 / 70%);
-  --white: #fff;
+    --menuHover: rgb(1 137 113 / 100%);
-  --activeBlue: #7bb6fa;
+    --menuActiveText: rgb(255 255 255 / 100%);
-  --fontColor: --color-primary;
+    --sideBarWidth: 252px;
-  --green: #f4a914;
+    --menuActiveBg: rgb(69 86 154);
-  --deepGreen: #fb4e33;
+    --menuActivePoint: rgb(255 255 255 / 100%);
 
-  // sidebar
+    // fontSize
-  --menuText: rgba(255, 255, 255, 0.7);
+    --fontSize10: 10px;
-  --menuHover: rgba(1, 137, 113, 1);
+    --fontSize11: 11px;
-  --menuActiveText: rgba(255, 255, 255, 1);
+    --fontSize12: 12px;
-  --sideBarWidth: 252px;
+    --fontSize13: 13px;
-  --menuActiveBg: rgb(69, 86, 154);
+    --fontSize14: 14px;
-  --menuActivePoint: rgba(255, 255, 255, 1);
+    --fontSize16: 16px;
+    --fontSize18: 18px;
+    --fontSize20: 20px;
+    --fontSize34: 34px;
 
-  // fontSize
+    // paddingSit
-  --fontSize10: 10px;
+    --paddingSit: 16px;
-  --fontSize11: 11px;
-  --fontSize12: 12px;
-  --fontSize13: 13px;
-  --fontSize14: 14px;
-  --fontSize16: 16px;
-  --fontSize18: 18px;
-  --fontSize20: 20px;
-  --fontSize34: 34px;
-
-  // paddingSit
-  --paddingSit: 16px;
 }
 
 // 全局样式
 ::-webkit-scrollbar {
-  width: 12px;
+    width: 12px;
-  height: 12px;
+    height: 12px;
-  
 }
-
 ::-webkit-scrollbar-thumb {
-  background-color: rgb(0 0 0 / 40%);
+    background-color: rgb(0 0 0 / 40%);
-  background-clip: padding-box;
+    background-clip: padding-box;
-  border: 3px solid transparent;
+    border: 3px solid transparent;
-  border-radius: 6px;
+    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;
+    width: 8px;
-  height: 8px;
+    height: 8px;
-  /**/
-}
 
+    /*  */
+}
 ::-webkit-scrollbar-track {
-  background: #fff;
+    background: #fff;
-  border-radius: 2px;
+    border-radius: 2px;
 }
-
 ::-webkit-scrollbar-thumb {
-  background: rgba($color: #4f88fd, $alpha: 0.5);
+    background: rgba($color: #4f88fd, $alpha: 50%);
-  border-radius: 10px;
+    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;
+    margin: 0;
-  box-sizing: border-box;
+    box-sizing: border-box;
-  font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif;
+    font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif;
-  -webkit-tap-highlight-color: transparent;
+    -webkit-tap-highlight-color: transparent;
-
+    &.hidden {
-  &.hidden {
+        overflow: hidden;
-    overflow: hidden;
+    }
-  }
 }
-
 * {
-  box-sizing: inherit;
+    box-sizing: inherit;
 }
 
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
-  position: fixed;
+    position: fixed;
-  left: 50%;
+    left: 50%;
-  right: 0;
+    right: 0;
-  width: calc(
+    width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-    100% - var(--g-main-sidebar-actual-width) -
+    transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
-      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] {
+    [data-fixed-calc-width] {
-    width: 100% !important;
+        width: 100% !important;
-    transform: translateX(-50%) !important;
+        transform: translateX(-50%) !important;
-  }
+    }
 }
 
 // textarea 字体跟随系统
 textarea {
-  font-family: inherit;
+    font-family: inherit;
 }
 
 // 列表页全局样式
 .el-table.list-table {
-  margin: 20px 0;
+    margin: 20px 0;
-
+    .el-button + .el-dropdown {
-  .el-button + .el-dropdown {
+        margin-left: 10px;
-    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;
+    align-items: center;
-
+    .span {
-  .span {
+        width: 100%;
-    width: 100%;
+    }
-  }
+    .icon {
-
+        width: 2em;
-  .icon {
+        height: 2em;
-    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;
+    margin: 16px;
-  padding: 16px;
+    padding: 16px;
-  background: #ffffff;
+    background: #fff;
-  box-shadow: 0px 0px 6px rgba(0, 120, 255, 0.1);
+    box-shadow: 0 0 6px rgb(0 120 255 / 10%);
-  border-radius: 6px;
+    border-radius: 6px;
 }
-
 .see-detail {
-  color: #1d86fb;
+    color: #1d86fb;
-  font-size: --fontSize13;
+    font-size: --fontsize13;
-  cursor: pointer;
+    cursor: pointer;
 }
-
 .tablenull :empty::before {
-  // content: '--';
+    // content: '--';
-  // color: gray;
+    // color: gray;
 }
-
 .to-detail {
-  cursor: pointer;
+    cursor: pointer;
-  background: #5473e8;
+    background: #5473e8;
-  border-radius: 13px;
+    border-radius: 13px;
-  color: #fff;
+    color: #fff;
-  padding: 1px 25px;
+    padding: 1px 25px;
 }
-
 .icon_class {
-  width: 1em;
+    width: 1em;
-  height: 1em;
+    height: 1em;
-  vertical-align: middle;
+    vertical-align: middle;
-  fill: currentColor;
+    fill: currentcolor;
-  overflow: hidden;
+    overflow: hidden;
-  // margin-left: 10px;
+    // margin-left: 10px;
-  margin-right: 5px;
+    margin-right: 5px;
 }
-
 .pagination {
-  margin-top: 20px;
+    margin-top: 20px;
-  margin-bottom: 20px;
+    margin-bottom: 20px;
 }
 
 //百分比样式
 .percentage-content {
-  width: 100%;
+    width: 100%;
-  height: 87vh;
+    height: 87vh;
-  display: flex;
+    display: flex;
-  padding: 16px;
+    padding: 16px;
 }
-
 .content-text {
-  font-size: 18px;
+    font-size: 18px;
-  color: #333;
+    color: #333;
-  font-weight: 700;
+    font-weight: 700;
-  margin-bottom: 10px;
+    margin-bottom: 10px;
 }
-
 .option {
-  font-size: 15px;
+    font-size: 15px;
-  cursor: pointer;
+    cursor: pointer;
-  display: flex;
+    display: flex;
-  justify-content: center;
+    justify-content: center;
-  align-items: center;
+    align-items: center;
-
+    svg {
-  svg {
+        width: 1em;
-    width: 1em;
+        height: 1em;
-    height: 1em;
+        vertical-align: middle;
-    vertical-align: middle;
+        fill: currentcolor;
-    fill: currentColor;
+        overflow: hidden;
-    overflow: hidden;
+    }
-  }
+    .icon {
-
+        margin-left: 10px;
-  .icon {
+        margin-right: 5px;
-    margin-left: 10px;
+    }
-    margin-right: 5px;
-  }
 }
-
 .tool-item {
-  margin-right: 1.04167vw;
+    margin-right: 1.04167vw;
-  cursor: pointer;
+    cursor: pointer;
-  color: #5473e8;
+    color: #5473e8;
-  font-size: 15px;
+    font-size: 15px;
-  vertical-align: 0.1em;
+    vertical-align: 0.1em;
-
+    .icon {
-  .icon {
+        margin-right: 3px;
-    margin-right: 3px;
+        vertical-align: -0.12em;
-    vertical-align: -0.12em;
+        width: 1em;
-    width: 1em;
+        height: 1em;
-    height: 1em;
+    }
-  }
 }
-
 .filter-tab {
-  font-size: --fontSize10;
+    font-size: --fontsize10;
-  color: #333333;
+    color: #333;
-  margin-right: 20px;
+    margin-right: 20px;
-
+    label {
-  label {
+        width: fit-content;
-    width: fit-content;
+    }
-  }
+    .el-date-editor.el-input,
-
+    .el-date-editor.el-input__inner {
-  .el-date-editor.el-input,
+        width: 160px;
-  .el-date-editor.el-input__inner {
+    }
-    width: 160px;
-  }
 }
+
 /** 解决box-sizing */
 @mixin boxSizing() {
-  -moz-box-sizing: border-box;
+
-  /*Firefox3.5+*/
+    /* Firefox3.5+ */
-  -webkit-box-sizing: border-box;
+    box-sizing: border-box;
-  /*Safari3.2+*/
+
-  -o-box-sizing: border-box;
+    /* Safari3.2+ */
-  /*Opera9.6*/
+    box-sizing: border-box;
-  -ms-box-sizing: border-box;
+
-  /*IE8*/
+    /* Opera9.6 */
-  box-sizing: border-box;
+    box-sizing: border-box;
+
+    /* IE8 */
+    box-sizing: border-box;
 }
 
 /** 隐藏滚动条 */
 @mixin scrollBar() {
-  /** Chrome/QQ浏览器 */
+    /** Chrome/QQ浏览器 */
-  &::-webkit-scrollbar {
+    &::-webkit-scrollbar {
-    display: none;
+        display: none;
-  }
+    }
 
-  /** IE浏览器 */
+    /** IE浏览器 */
-  & {
+    & {
-    -ms-overflow-style: none;
+        -ms-overflow-style: none;
-  }
+    }
 
-  /** Firefox浏览器 */
+    /** Firefox浏览器 */
-  & {
+    & {
-    scrollbar-width: none;
+        scrollbar-width: none;
-  }
+    }
 }
-
 @mixin scrollbarStyle() {
-  &::-webkit-scrollbar {
+    &::-webkit-scrollbar {
-    width: 8px;
+        width: 8px;
-    height: 8px;
+        height: 8px;
-    /**/
-  }
 
-  &::-webkit-scrollbar-track {
+        /*  */
-    background: #fff;
+    }
-    border-radius: 2px;
+    &::-webkit-scrollbar-track {
-  }
+        background: #fff;
-
+        border-radius: 2px;
-  &::-webkit-scrollbar-thumb {
+    }
-    background: rgba($color: #4f88fd, $alpha: 0.5);
+    &::-webkit-scrollbar-thumb {
-    border-radius: 10px;
+        background: rgba($color: #4f88fd, $alpha: 50%);
-  }
+        border-radius: 10px;
-
+    }
-  &::-webkit-scrollbar-thumb:hover {
+    &::-webkit-scrollbar-thumb:hover {
-    background: rgba($color: #4f88fd, $alpha: 1);
+        background: rgba($color: #4f88fd, $alpha: 100%);
-  }
+    }
-
+    &::-webkit-scrollbar-corner {
-  &::-webkit-scrollbar-corner {
+        background: #179a16;
-    background: #179a16;
+    }
-  }
 }

src/components/Map/index.vue

@@ -38,8 +38,8 @@ onMounted(() => {
         zoom: 12, // 初始化地图级别
         center: props.longlat?props.longlat:[101.13, 30.98], // 初始化地图中心点位置
       });
-      console.log(11);
+      // console.log(11);
-      console.log(cont.value.offsetWidth,cont.value.offsetHeight,'this.$refs.cont===>');
+      // 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)
   }
 );

src/router/modules/basemanage.ts

@@ -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',

src/views/base-manage/flow/index.vue

@@ -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"
+        @size-change="getList"
-        @current-change="getCompanyList"
+        @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([
+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 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%;
+    width: 100%;
-  background: #fff;
+    background: #fff;
-  border-radius: 0.26042vw;
+    border-radius: 0.26042vw;
-  box-shadow: 0 0 0.41667vw 0 rgb(8 33 85 / 10%);
+    box-shadow: 0 0 0.41667vw 0 rgb(8 33 85 / 10%);
-  height: 100%;
+    height: 100%;
-  padding: 0.83333vw;
+    padding: 0.83333vw;
-  overflow-y: auto;
+    overflow-y: auto;
-  overflow-x: hidden !important;
+    overflow-x: hidden !important;
-  -moz-box-sizing: border-box;
+    /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
-  -o-box-sizing: border-box;
+    /* stylelint-disable-next-line property-no-vendor-prefix */
-  -ms-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
-  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;
+    padding: 16px;
-  background: #ffffff;
+    background: #fff;
-  box-shadow: 0px 0px 6px rgba(0, 120, 255, 0.1);
+    box-shadow: 0 0 6px rgb(0 120 255 / 10%);
-  border-radius: 6px;
+    border-radius: 6px;
-  display: flex;
+    display: flex;
-  flex-direction: row;
+    flex-direction: row;
 }
 </style>

src/views/base-manage/permanent/index.vue

@@ -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"
+        @size-change="getList"
-        @current-change="getCompanyList"
+        @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([
+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 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%;
+    width: 100%;
-  background: #fff;
+    background: #fff;
-  border-radius: 0.26042vw;
+    border-radius: 0.26042vw;
-  box-shadow: 0 0 0.41667vw 0 rgb(8 33 85 / 10%);
+    box-shadow: 0 0 0.41667vw 0 rgb(8 33 85 / 10%);
-  height: 100%;
+    height: 100%;
-  padding: 0.83333vw;
+    padding: 0.83333vw;
-  overflow-y: auto;
+    overflow-y: auto;
-  overflow-x: hidden !important;
+    overflow-x: hidden !important;
-  -moz-box-sizing: border-box;
+    /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
-  -o-box-sizing: border-box;
+    /* stylelint-disable-next-line property-no-vendor-prefix */
-  -ms-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
-  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;
+    padding: 16px;
-  background: #ffffff;
+    background: #fff;
-  box-shadow: 0px 0px 6px rgba(0, 120, 255, 0.1);
+    box-shadow: 0 0 6px rgb(0 120 255 / 10%);
-  border-radius: 6px;
+    border-radius: 6px;
-  display: flex;
+    display: flex;
-  flex-direction: row;
+    flex-direction: row;
 }
 </style>

src/views/base-manage/poor/index.vue

@@ -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"
+        @size-change="getList"
-        @current-change="getCompanyList"
+        @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([
+const tableData = ref([]);
-  {
+const tableDataloading = ref(false);
-    id: 1,
+//获取列表
-    name: "张五",
+const getList = () => {
-    sex: "男",
+  tableDataloading.value = true;
-    loc: "道孚县鲜水镇",
+  let params = {
-    tag: "常驻人口",
+    limit: pageSize.value,
-    type: "低保户",
+    page: currentPage.value,
-    poor: "是",
+    condition: search.value.condition,
-    birth: "1989-10-21",
+    userId: userId.value,
-    address: "xxxxxxxxxxx地址",
+    areaCode: "",
-  },
+    typeName: "贫困户管理",
-  {
+  };
-    id: 1,
+  if (search.value.areaCode) {
-    name: "张A",
+    params.areaCode = search.value.areaCode[search.value.areaCode.length - 1];
-    sex: "男",
+  }
-    loc: "道孚县鲜水镇",
+  peoplePage(params).then((res: any) => {
-    tag: "常驻人口",
+    console.log(res, "res====>");
-    type: "五保户",
+    tableData.value = res.data.list;
-    poor: "是",
+    total.value = res.data.total;
-    birth: "1989-10-21",
+    tableDataloading.value = false;
-    address: "xxxxxxxxxxx地址",
+  });
-  },
+};
-]);
 
 /**
  * 删除
@@ -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%;
+    width: 100%;
-  background: #fff;
+    background: #fff;
-  border-radius: 0.26042vw;
+    border-radius: 0.26042vw;
-  box-shadow: 0 0 0.41667vw 0 rgb(8 33 85 / 10%);
+    box-shadow: 0 0 0.41667vw 0 rgb(8 33 85 / 10%);
-  height: 100%;
+    height: 100%;
-  padding: 0.83333vw;
+    padding: 0.83333vw;
-  overflow-y: auto;
+    overflow-y: auto;
-  overflow-x: hidden !important;
+    overflow-x: hidden !important;
-  -moz-box-sizing: border-box;
+    /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
-  -o-box-sizing: border-box;
+    /* stylelint-disable-next-line property-no-vendor-prefix */
-  -ms-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
-  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;
+    padding: 16px;
-  background: #ffffff;
+    background: #fff;
-  box-shadow: 0px 0px 6px rgba(0, 120, 255, 0.1);
+    box-shadow: 0 0 6px rgb(0 120 255 / 10%);
-  border-radius: 6px;
+    border-radius: 6px;
-  display: flex;
+    display: flex;
-  flex-direction: row;
+    flex-direction: row;
 }
 </style>

src/views/base-manage/residence/detail.vue

@@ -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>

src/views/base-manage/residence/dialog/add-edit.vue

@@ -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" }],
+  idCard: [
-  changeTime: [{ required: true, message: "请选择户籍创建时间", trigger: "blur" }],
+    { required: true, message: "请输入身份证号", trigger: "blur" },
-  areaCode:[{ 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:"",
+        areaCode: "",
-        domicileId:formData.value.domicileId
+        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 detailTableData = ref([]);
-const getDomicileDetail = (id)=>{
+const getDomicileDetail = (id) => {
-  domicileDetail({domicileId:id}).then((res: any) => {
+  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);
-      
     }
   }
 );

src/views/base-manage/residence/dialog/cancel.vue

@@ -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>

src/views/base-manage/residence/dialog/detail-addPersonnel.vue

@@ -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>

src/views/base-manage/residence/index.vue

@@ -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
+                <el-option label="正常" :value="1">正常</el-option>
-                  v-for="item in option"
+                <el-option label="注销" :value="2">注销</el-option>
-                  :key="item.othtypeid"
+              </el-select>
-                  :label="item.othtypename"
+            </div>
-                  :value="item.othtypeid"
+            <div class="label-select filter-tab">
-                >
+              <label>婚姻状态</label>
-                </el-option>
+              <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">
+          <template #default="scope">
-          <span>{{ scope.row.sex == 1? '男':scope.row.sex == 0? '女':'--' }}</span>
+            <span>{{
-        </template>
+              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">
+          <template #default="scope">
-          <span>{{ scope.row.birthday ? scope.row.birthday:'--' }}</span>
+            <span>{{ scope.row.birthday ? scope.row.birthday : "--" }}</span>
-        </template>
+          </template>
         </el-table-column>
         <el-table-column
           :resizable="true"
           align="center"
           label="婚姻状况"
           prop="marriageState"
-          width="80"
+          width="100"
         >
-        <template #default="scope">
+          <template #default="scope">
-          <span>{{ scope.row.marriageState == 1? '已婚':scope.row.marriageState == 2? '未婚':scope.row.marriageState == 3? '离婚':'--' }}</span>
+            <span>{{
-        </template>
+              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">
+          <template #default="scope">
-          <span>{{ scope.row.domicileState == 1? '正常':scope.row.domicileState == 2? '注销':'--' }}</span>
+            <span class="table_ormal" v-if="scope.row.domicileState == 1"
-        </template>
+              >正常</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="
+              @click="toDetail(scope.row.domicileId)"
-                (dialogForm = scope.row),
-                  (dialogVisible = true),
-                  (readonly = true)
-              "
             >
               <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" />
+    <add-edit
-    <Cancel :visible="cancelDialogVisible" :form="cancelDialogForm" @close="cancelonclone" />
+      :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 = {};

src/views/emergency/house/details.vue

@@ -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%;
+    width: 100%;
-  background: #fff;
+    background: #fff;
-  border-radius: 0.26042vw;
+    border-radius: 0.26042vw;
-  box-shadow: 0 0 0.41667vw 0 rgba(8, 33, 85, 0.1);
+    box-shadow: 0 0 0.41667vw 0 rgb(8 33 85 / 10%);
-  height: 100%;
+    height: 100%;
-  padding: 0.83333vw;
+    padding: 0.83333vw;
-  overflow-y: scroll;
+    overflow-y: scroll;
-  overflow-x: hidden !important;
+    overflow-x: hidden !important;
-  -moz-box-sizing: border-box;
+    /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
-  -o-box-sizing: border-box;
+    /* stylelint-disable-next-line property-no-vendor-prefix */
-  -ms-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
-  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;
+    display: flex;
-  flex-wrap: wrap;
+    flex-wrap: wrap;
-  justify-content: space-between;
+    justify-content: space-between;
 }
 :deep(.el-form-item) {
-  width: 45%;
+    width: 45%;
 }
 </style>

src/views/emergency/house/dialog/add-house-dialog.vue

@@ -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: "请输入仓库管理员",