From 4530440bd63b0707bc6620daf0282cf3d869ae34 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Tue, 18 Apr 2023 15:30:03 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B1=85=E6=B0=91=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/AppResidentInfo/AppResidentInfo.vue   |  69 ++
 .../app/AppResidentInfo/components/Add.vue    | 602 ++++++++++++++++++
 .../app/AppResidentInfo/components/Detail.vue | 120 ++++
 .../app/AppResidentInfo/components/List.vue   | 146 +++++
 4 files changed, 937 insertions(+)
 create mode 100644 project/fengdu/app/AppResidentInfo/AppResidentInfo.vue
 create mode 100644 project/fengdu/app/AppResidentInfo/components/Add.vue
 create mode 100644 project/fengdu/app/AppResidentInfo/components/Detail.vue
 create mode 100644 project/fengdu/app/AppResidentInfo/components/List.vue

diff --git a/project/fengdu/app/AppResidentInfo/AppResidentInfo.vue b/project/fengdu/app/AppResidentInfo/AppResidentInfo.vue
new file mode 100644
index 00000000..e85a04a0
--- /dev/null
+++ b/project/fengdu/app/AppResidentInfo/AppResidentInfo.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="AppHelp">
+    <keep-alive :include="['List']">
+      <component ref="component" :permissions="permissions" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+  import Add from './components/Add'
+  import List from './components/List'
+  import Detail from './components/Detail'
+
+  export default {
+    name: 'AppResidentInfo',
+    label: '居民信息',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function
+    },
+
+    data () {
+      return {
+        component: 'List',
+        params: {},
+        include: []
+      }
+    },
+
+    components: {
+      Add,
+      List,
+      Detail
+    },
+
+    methods: {
+      onChange (data) {
+        if (data.type === 'Add') {
+          this.component = 'Add'
+          this.params = data.params
+        }
+
+        if (data.type === 'Detail') {
+          this.component = 'Detail'
+          this.params = data.params
+        }
+
+        if (data.type === 'List') {
+          this.component = 'List'
+          this.params = data.params
+
+          this.$nextTick(() => {
+            this.$refs.component.getList()
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .AppHelp {
+    height: 100%;
+    background: #F3F6F9;
+    overflow: auto;
+  }
+</style>
diff --git a/project/fengdu/app/AppResidentInfo/components/Add.vue b/project/fengdu/app/AppResidentInfo/components/Add.vue
new file mode 100644
index 00000000..32008b29
--- /dev/null
+++ b/project/fengdu/app/AppResidentInfo/components/Add.vue
@@ -0,0 +1,602 @@
+<template>
+  <ai-detail class="residentDetail">
+    <ai-title slot="title" :title="pageTitle" isShowBack @onBackClick="back" isShowBottomBorder>
+      <template v-if="params.type === 'Detail'" #rightBtn>
+        <el-button icon="iconfont iconDelete" @click="handleDelete()">
+          删除人员
+        </el-button>
+      </template>
+    </ai-title>
+    <template #content>
+      <el-form class="content-right" :model="baseInfo" ref="ruleForm" :rules="rules" label-width="130px"
+                label-position="right" size="small">
+        <template v-if="params.type === 'Detail'">
+            <ai-edit-card slot="" :title="baseInfo.name||'基本信息'" :show-btn="permissions('app_appresident_edit')"
+                          @save="saveFrom" @cancel="getDetail(baseInfo.id)">
+              <template #edit>
+                <el-row type="flex">
+                  <div class="fill">
+                    <el-form-item label="姓名：" prop="name">
+                      <el-input
+                          v-model="baseInfo.name"
+                          autocomplete="off"
+                          placeholder="请输入姓名"
+                          maxlength="20"
+                          :disabled="isEdit"
+                          show-word-limit/>
+                    </el-form-item>
+                    <el-form-item label="身份证号：" prop="idNumber">
+                      <el-input v-model="baseInfo.idNumber" placeholder="请输入身份证号" :maxlength="18" show-word-limit
+                                @change="idChange" :disabled="isEdit"/>
+                    </el-form-item>
+                    <el-form-item label="性别：" prop="sex">
+                      <ai-select v-model="baseInfo.sex" :selectList="dict.getDict('sex')" :disabled="isEdit"/>
+                    </el-form-item>
+                  </div>
+                  <el-form-item label="个人照片：" prop="photo" class="fill">
+                    <ai-avatar :instance="instance" v-model="baseInfo.photo"/>
+                  </el-form-item>
+                </el-row>
+                <el-row type="flex">
+                  <div class="fill">
+                    <el-form-item label="出生日期：">
+                      <el-date-picker
+                          disabled
+                          :editable="false"
+                          value-format="yyyy-MM-dd HH:mm:ss"
+                          format="yyyy-MM-dd"
+                          v-model="baseInfo.birthday"
+                          type="date"
+                          placeholder="选择日期"
+                      />
+                    </el-form-item>
+                    <el-form-item label="文化程度：" prop="education">
+                      <ai-select v-model="baseInfo.education" :selectList="dict.getDict('education')"/>
+                    </el-form-item>
+                    <el-form-item label="政治面貌：" prop="politicsStatus">
+                      <ai-select v-model="baseInfo.politicsStatus" :selectList="dict.getDict('politicsStatus')"/>
+                    </el-form-item>
+                    <el-form-item label="职业：" prop="job">
+                      <ai-select v-model="baseInfo.job" :selectList="dict.getDict('job')"/>
+                    </el-form-item>
+                    <el-form-item label="宗教信仰：" prop="faithType">
+                      <ai-select v-model="baseInfo.faithType" :selectList="dict.getDict('faithType')"/>
+                    </el-form-item>
+                  </div>
+                  <div class="fill">
+                    <el-form-item label="年龄：" prop="age">
+                      <el-input
+                          disabled
+                          v-model="baseInfo.age"
+                          autocomplete="off"
+                          size="small"
+                          placeholder="请输入年龄"
+                          type="number"
+                          @mousewheel.native.prevent
+                      />
+                      <!-- <p v-else>{{baseInfo.age}}</p> -->
+                    </el-form-item>
+                    <el-form-item label="民族：" prop="nation">
+                      <ai-select v-model="baseInfo.nation" :selectList="dict.getDict('nation')"/>
+                    </el-form-item>
+                    <el-form-item label="婚姻状况：" prop="maritalStatus">
+                      <ai-select v-model="baseInfo.maritalStatus" :selectList="dict.getDict('maritalStatus')"/>
+                    </el-form-item>
+                    <el-form-item label="兵役状况：" prop="militaryStatus">
+                      <ai-select v-model="baseInfo.militaryStatus" :selectList="dict.getDict('militaryStatus')"/>
+                    </el-form-item>
+                  </div>
+                </el-row>
+                <el-form-item label="籍贯：" prop=" birthplaceAreaId">
+                  <ai-area-select
+                      clearable
+                      always-show
+                      :instance="instance"
+                      v-model="baseInfo.birthplaceAreaId"
+                      :areaLevel="3"
+                  />
+                </el-form-item>
+              </template>
+              <template>
+                <ai-card title="基本信息">
+                  <ai-wrapper class="fill" slot="content">
+                    <ai-info-item label="性别" :value="dict.getLabel('sex', baseInfo.sex)"/>
+                    <ai-info-item label="身份证号">
+                      <ai-id mode="show" v-model="baseInfo.idNumber" right-btn class="line-center"/>
+                    </ai-info-item>
+                    <ai-info-item label="出生日期" :value="baseInfo.birthday"/>
+                    <ai-info-item label="年龄" :value="baseInfo.age"/>
+                    <ai-info-item label="籍贯" :value="baseInfo.birthplaceAreaName"/>
+                    <ai-info-item label="民族" :value="dict.getLabel('nation', baseInfo.nation)"/>
+                    <ai-info-item label="文化程度" :value="dict.getLabel('education', baseInfo.education)"/>
+                    <ai-info-item label="婚姻状况" :value="dict.getLabel('maritalStatus', baseInfo.maritalStatus)"/>
+                    <ai-info-item label="政治面貌" :value="dict.getLabel('politicsStatus', baseInfo.politicsStatus)"/>
+                    <ai-info-item label="兵役状况" :value="dict.getLabel('militaryStatus', baseInfo.militaryStatus)"/>
+                    <ai-info-item label="宗教信仰" :value="dict.getLabel('faithType', baseInfo.faithType)"/>
+                    <ai-info-item label="职业" :value="dict.getLabel('job', baseInfo.job)"/>
+                  </ai-wrapper>
+                  <ai-avatar v-model="baseInfo.photo" :editable="false"/>
+                </ai-card>
+              </template>
+            </ai-edit-card>
+            <ai-edit-card title="联络信息"
+                          @save="saveFrom" @cancel="getDetail(baseInfo.id)">
+              <template #edit>
+                <el-form-item label="联系方式：" prop="phone">
+                  <el-input v-model="baseInfo.phone" size="small" placeholder="请输入联系方式" :maxlength="11"
+                            show-word-limit/>
+                </el-form-item>
+                <el-form-item label="现住址：" prop="currentAreaId">
+                  <ai-area-select clearable always-show :instance="instance" :disabled-level="disabledLevel"
+                                  v-model="baseInfo.currentAreaId" :valueLevel="4"/>
+                  <el-form-item>
+                    <el-input v-model="baseInfo.currentAddress" placeholder="详细地址" maxlength="30" show-word-limit
+                              clearable/>
+                  </el-form-item>
+                </el-form-item>
+              </template>
+              <template>
+                <ai-card title="联络信息" type="flex">
+                  <ai-wrapper slot="content">
+                    <ai-info-item label="联系方式" :value="baseInfo.phone"/>
+                    <ai-info-item label="现住址" isLine
+                                  :value="[baseInfo.currentAreaName, baseInfo.currentAddress].join('')"/>
+                  </ai-wrapper>
+                </ai-card>
+              </template>
+            </ai-edit-card>
+            <ai-edit-card title="户籍信息"
+                          @save="saveFrom" @cancel="getDetail(baseInfo.id)">
+              <template #edit>
+                <el-row type="flex">
+                  <div class="fill">
+                    <el-form-item label="是否户主：" prop="householdName">
+                      <ai-select v-model="baseInfo.householdName" :selectList="dict.getDict('householdName')"
+                                  @change="householdRelationChange"/>
+                    </el-form-item>
+                    <el-form-item label="与户主关系：" prop="householdRelation" v-if="baseInfo.householdName==0">
+                      <ai-select v-model="baseInfo.householdRelation"
+                                  :selectList="dict.getDict('householdRelation')"/>
+                    </el-form-item>
+                  </div>
+                  <div class="fill">
+                    <el-form-item label="户主身份证号：" prop="householdIdNumber" v-if="baseInfo.householdName==0">
+                      <el-input v-model="baseInfo.householdIdNumber" placeholder="请输入户主身份证号" :maxlength="18"
+                                clearable/>
+                    </el-form-item>
+                  </div>
+                </el-row>
+                <el-form-item label="户籍地：" prop="householdAreaId">
+                  <ai-area-select clearable always-show :instance="instance" v-model="baseInfo.householdAreaId"/>
+                  <el-form-item v-if="baseInfo.householdAreaId">
+                    <el-input v-model="baseInfo.householdAddress" placeholder="详细地址" maxlength="30" show-word-limit
+                              clearable/>
+                  </el-form-item>
+                </el-form-item>
+              </template>
+              <template>
+                <ai-card title="户籍信息">
+                  <ai-wrapper slot="content">
+                    <ai-info-item label="是否户主" :value="dict.getLabel('householdName', baseInfo.householdName)"/>
+                    <template v-if="baseInfo.householdName==0">
+                      <ai-info-item label="与户主关系"
+                                    :value="dict.getLabel('householdRelation', baseInfo.householdRelation)"/>
+                      <ai-info-item label="户主身份证号" :value="baseInfo.householdIdNumber"/>
+                    </template>
+                    <ai-info-item label="户籍地" isLine
+                                  :value="[baseInfo.householdAreaName, baseInfo.householdAddress].join('')" isLine/>
+                  </ai-wrapper>
+                </ai-card>
+              </template>
+            </ai-edit-card>
+        </template>
+        <template v-else>
+          <ai-card title="基本信息">
+            <template #content>
+              <el-row type="flex">
+                <div class="fill">
+                  <el-form-item label="姓名：" prop="name">
+                    <el-input
+                        v-model="baseInfo.name"
+                        autocomplete="off"
+                        size="small"
+                        placeholder="请输入姓名"
+                        maxlength="20"
+                        show-word-limit/>
+                  </el-form-item>
+                  <el-form-item label="身份证号：" prop="idNumber">
+                    <el-input v-model="baseInfo.idNumber" placeholder="请输入身份证号" :maxlength="18" show-word-limit
+                              @change="idChange"/>
+                  </el-form-item>
+                  <el-form-item label="性别：" prop="sex">
+                    <ai-select v-model="baseInfo.sex" :selectList="dict.getDict('sex')"/>
+                  </el-form-item>
+                </div>
+                <el-form-item label="个人照片：" prop="photo" class="fill">
+                  <ai-avatar :instance="instance" v-model="baseInfo.photo"/>
+                </el-form-item>
+              </el-row>
+              <el-row type="flex">
+                <div class="fill">
+                  <el-form-item label="出生日期：">
+                    <el-date-picker
+                        disabled
+                        :editable="false"
+                        value-format="yyyy-MM-dd HH:mm:ss"
+                        format="yyyy-MM-dd"
+                        v-model="baseInfo.birthday"
+                        type="date"
+                        placeholder="选择日期"
+                    />
+                  </el-form-item>
+                  <el-form-item label="文化程度：" prop="education">
+                    <ai-select v-model="baseInfo.education" :selectList="dict.getDict('education')"/>
+                  </el-form-item>
+                  <el-form-item label="政治面貌：" prop="politicsStatus">
+                    <ai-select v-model="baseInfo.politicsStatus" :selectList="dict.getDict('politicsStatus')"/>
+                  </el-form-item>
+                  <el-form-item label="职业：" prop="job">
+                    <ai-select v-model="baseInfo.job" :selectList="dict.getDict('job')"/>
+                  </el-form-item>
+                  <el-form-item label="宗教信仰：" prop="faithType">
+                    <ai-select v-model="baseInfo.faithType" :selectList="dict.getDict('faithType')"/>
+                  </el-form-item>
+                </div>
+                <div class="fill">
+                  <el-form-item label="年龄：" prop="age">
+                    <el-input
+                        disabled
+                        v-model="baseInfo.age"
+                        autocomplete="off"
+                        size="small"
+                        placeholder="请输入年龄"
+                        type="number"
+                        @mousewheel.native.prevent
+                    />
+                    <!-- <p v-else>{{baseInfo.age}}</p> -->
+                  </el-form-item>
+                  <el-form-item label="民族：" prop="nation">
+                    <ai-select v-model="baseInfo.nation" :selectList="dict.getDict('nation')"/>
+                  </el-form-item>
+                  <el-form-item label="婚姻状况：" prop="maritalStatus">
+                    <ai-select v-model="baseInfo.maritalStatus" :selectList="dict.getDict('maritalStatus')"/>
+                  </el-form-item>
+                  <el-form-item label="兵役状况：" prop="militaryStatus">
+                    <ai-select v-model="baseInfo.militaryStatus" :selectList="dict.getDict('militaryStatus')"/>
+                  </el-form-item>
+                </div>
+              </el-row>
+              <el-form-item label="籍贯：" prop=" birthplaceAreaId">
+                <ai-area-select
+                    clearable
+                    always-show
+                    :instance="instance"
+                    v-model="baseInfo.birthplaceAreaId"
+                    :areaLevel="3"
+                />
+              </el-form-item>
+            </template>
+          </ai-card>
+          <ai-card title="联络信息">
+            <template #content>
+              <el-form-item label="联系方式：" prop="phone">
+                <el-input v-model="baseInfo.phone" size="small" placeholder="请输入联系方式" :maxlength="11"
+                          show-word-limit/>
+              </el-form-item>
+              <el-form-item label="现住址：" prop="currentAreaId">
+                <ai-area-select clearable always-show :instance="instance" :disabled-level="disabledLevel"
+                                v-model="baseInfo.currentAreaId" :valueLevel="4"/>
+                <el-form-item>
+                  <el-input v-model="baseInfo.currentAddress" placeholder="详细地址" maxlength="30" show-word-limit
+                            clearable/>
+                </el-form-item>
+              </el-form-item>
+            </template>
+          </ai-card>
+          <ai-card title="户籍信息">
+            <template #content>
+              <el-row type="flex">
+                <div class="fill">
+                  <el-form-item label="是否户主：" prop="isHousehold">
+                    <ai-select v-model="baseInfo.isHousehold" :selectList="dict.getDict('householdName')"
+                                @change="householdRelationChange"/>
+                  </el-form-item>
+                  <el-form-item label="与户主关系：" prop="householdRelation" v-if="baseInfo.isHousehold==0">
+                    <ai-select v-model="baseInfo.householdRelation" :selectList="dict.getDict('householdRelation')"/>
+                  </el-form-item>
+                </div>
+                <div class="fill">
+                  <el-form-item label="户主身份证号：" prop="householdIdNumber" v-if="baseInfo.isHousehold==0">
+                    <el-input v-model="baseInfo.householdIdNumber" placeholder="请输入户主身份证号" :maxlength="18"
+                              clearable/>
+                  </el-form-item>
+                </div>
+              </el-row>
+              <el-form-item label="户籍地：" prop="householdAreaId">
+                <ai-area-select clearable always-show :instance="instance" v-model="baseInfo.householdAreaId"/>
+                <el-form-item v-if="baseInfo.householdAreaId">
+                  <el-input v-model="baseInfo.householdAddress" placeholder="详细地址" maxlength="30" show-word-limit
+                            clearable/>
+                </el-form-item>
+              </el-form-item>
+            </template>
+          </ai-card>
+        </template>
+      </el-form>
+    </template>
+    <template v-if="params.type !== 'Detail'" #footer>
+      <el-button @click="back">取消</el-button>
+      <el-button type="primary" @click="saveFrom()">保存</el-button>
+    </template>
+  </ai-detail>
+</template>
+<script>
+import {mapState} from "vuex";
+import {ID} from "dui/lib/js/utils";
+
+export default {
+  name: "Add",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    params: Object,
+    name: {default: ""}
+  },
+  data() {
+    let IdNumberPass = (rule, value, callback) => {
+      if (value) {
+        if (ID.check(value)) {
+          callback();
+        } else {
+          callback(new Error("身份证号格式错误"));
+        }
+      } else {
+        callback(new Error("请输入身份证号"));
+      }
+    };
+    return {
+      buildingCascader: true,
+      houseCascader: true,
+      navId: 0,
+      baseInfo: {
+        registerStatus: "",
+        tips: [],
+        age: "",
+        birthplaceAreaId: "",
+        currentAddress: "",
+        currentAreaId: "",
+        education: "",
+        faithType: "",
+        fileStatus: "",
+        householdAddress: "",
+        householdAreaId: "",
+        householdIdNumber: "",
+        isHousehold: "",
+        householdRelation: "",
+        id: "",
+        idNumber: "",
+        job: "",
+        logoutDescription: "",
+        logoutReason: "",
+        logoutTime: "",
+        logoutUserId: "",
+        maritalStatus: "",
+        militaryStatus: "",
+        name: "",
+        nation: "",
+        phone: "",
+        photo: "",
+        politicsStatus: "",
+        sex: "",
+        tsrqInfos: []
+      },
+      family: [],
+      familyInfo: {},
+      writeInfo: {
+        id: "",
+        logoutReason: "",
+        logoutDescription: "",
+        fileStatus: "1"
+      },
+      rules: {
+        name: [{required: true, message: "请输入姓名", trigger: "blur"}],
+        idNumber: [
+          {required: true, validator: IdNumberPass, trigger: "blur"}
+        ],
+        sex: [{required: true, message: "请选择性别", trigger: "change"}],
+        currentAreaId: [{message: "请选择现住址", required: true, trigger: "change"},
+          {
+            validator: (r, v, cb) => {
+              if (/.+0{3}$/.test(v)) {
+                cb("现住址必须选到村级")
+              } else cb()
+            }, trigger: "blur"
+          }],
+        currentAddress: [{message: "请选择现住址详细地址", required: true}],
+        householdAreaId: [
+          {
+            validator: (r, v, cb) => {
+              if (/.+0{3}$/.test(v) && v) {
+                cb("户籍地必须选到村级")
+              } else cb()
+            }, trigger: "blur"
+          }
+        ],
+        phone: [
+          {required: true, message: "请输入联系方式", trigger: "blur"}
+        ],
+        householdName: [
+          {required: true, message: "请选择是否户主", trigger: "change"}
+        ],
+        householdRelation: [
+          {required: true, message: "请选择与户主关系", trigger: "change"}
+        ],
+        householdIdNumber: [
+          {required: true, validator: IdNumberPass, trigger: "blur"}
+        ],
+        householdAddress: [
+          {required: true, message: "请选择户籍地详细地址", trigger: "blur"}
+        ]
+      },
+      imgUrl: "",
+      fileList: [],
+      disabledLevel: 0,
+      currentTab: "0"
+    };
+  },
+  computed: {
+    ...mapState(["user"]),
+    isEdit() {
+      return this.params.type === 'Edit'
+    },
+    pageTitle() {
+      return {
+        Edit: '编辑居民信息',
+        Add: '添加居民信息',
+        Detail: '居民信息详情'
+      }[this.params.type]
+    },
+    hasSpecial() {
+      //是否有特殊人员信息
+      return this.baseInfo.tsrqInfos?.length > 0
+    },
+    colConfigs() {
+      return [
+        {
+          label: "与户主关系", align: 'center',
+          render: (h, {row}) => h('p', this.dict.getLabel('householdRelation', row.householdRelation))
+        },
+        {label: "姓名", prop: "name"},
+        {label: "性别", prop: "sex", dict: "sex", align: 'center'},
+        {label: "年龄", prop: "age", align: 'center'},
+        {label: "身份证号", render: (h, {row}) => h('p', ID.hideId(row.idNumber))},
+        {slot: "options"}
+      ]
+    }
+  },
+  methods: {
+    back() {
+      this.$emit('change', {
+        type: 'List'
+      })
+    },
+    householdRelationChange() {
+      this.baseInfo.householdIdNumber = "";
+      this.baseInfo.householdRelation = "";
+    },
+    saveFrom(cb) {
+      this.$refs.ruleForm.validate(v => {
+        if (v) {
+          this.saveFromFn().then(() => {
+            if (cb) {
+              cb()
+              this.getDetail()
+            } else {
+              this.back()
+            }
+          });
+        }
+      });
+    },
+
+    familyInit() {
+      Object.keys(this.writeInfo).forEach(e => {
+        this.writeInfo[e] = "";
+      });
+      this.$refs.writeInfo.resetFields();
+    },
+    saveFromFn() {
+      let {currentHouseList, householdHouseList, tips} = this.baseInfo
+      return this.instance.post(`/app/appresidentapplet/addOrUpdate`, {
+        residentType: this.$route.query.type,
+        ...this.baseInfo,
+        currentHouseList: currentHouseList?.join("|"),
+        householdHouseList: householdHouseList?.join("|"),
+        tips: tips?.join("|")
+      }).then(res => {
+        if (res?.code == 0) {
+          this.$message.success("保存成功");
+        }
+      })
+    },
+    getDetail() {
+      this.instance.post(`/app/appresidentapplet/queryDetailById?id=${this.params.id}`).then(res => {
+        if (res?.data) {
+          this.baseInfo = {
+            ...res.data
+          };
+          // this.family = res.data.family;
+          this.IdCard(this.idNumber);
+        }
+      });
+    },
+    handleDelete() {
+      this.$confirm("删掉档案后，\n" +
+          `<span class="username">${this.baseInfo.name}</span>` +
+          "        的历史相关信息可能无法追溯查看，是否确定删除该人员档案？", {
+        title: "档案删除"
+      }).then(() => {
+        this.instance.post(`/app/appresidentapplet/delete?ids=${this.baseInfo.id}`).then(res => {
+          if (res && res.code == 0) {
+            this.$message.success("删除成功");
+            this.$router.push({query: {}});
+          }
+        });
+      }).catch(() => 0)
+    },
+    idChange(val) {
+      if (val.length == 18) {
+        this.IdCard(val);
+      }
+    },
+    IdCard(UUserCard) {
+      if (UUserCard) {
+        const idCard = new ID(UUserCard)
+        this.baseInfo.age = idCard.age
+        this.baseInfo.sex = idCard.sex
+        this.baseInfo.birthday = idCard.birthday
+      }
+    }
+  },
+  created() {
+    this.disabledLevel = this.user.info.areaMap[this.user.info.areaId].length;
+    if (!this.params.id) {
+      // this.baseInfo.householdAreaId = JSON.parse(JSON.stringify(this.user.info.areaId))
+      this.baseInfo.currentAreaId = JSON.parse(JSON.stringify(this.user.info.areaId))
+      this.$nextTick(() => this.$refs.ruleForm?.resetFields())
+    } else {
+      this.getDetail(this.params.id);
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.residentDetail {
+  font-size: 14px;
+  :deep( .AiID ){
+    line-height: unset;
+
+    .el-button--text {
+      padding: 0 8px;
+      height: fit-content;
+    }
+  }
+
+  :deep( .el-form-item ){
+    margin-bottom: 10px;
+
+    .el-form-item {
+      margin-top: 10px;
+    }
+
+    .el-cascader, .el-select, .el-date-editor {
+      width: 100%;
+    }
+  }
+
+  :deep( .el-form-item__error ){
+    position: static;
+  }
+}
+</style>
diff --git a/project/fengdu/app/AppResidentInfo/components/Detail.vue b/project/fengdu/app/AppResidentInfo/components/Detail.vue
new file mode 100644
index 00000000..5cab4f66
--- /dev/null
+++ b/project/fengdu/app/AppResidentInfo/components/Detail.vue
@@ -0,0 +1,120 @@
+<template>
+  <ai-detail class="activitiesAdd">
+    <template slot="title">
+      <ai-title title="居民信息详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
+    </template>
+    <template slot="content">
+      <ai-card title="基本信息">
+        <ai-wrapper class="fill" slot="content">
+          <ai-info-item label="性别" :value="dict.getLabel('sex', baseInfo.sex)"/>
+          <ai-info-item label="照片">
+            <ai-avatar v-model="baseInfo.photo" :editable="false"/>
+          </ai-info-item>
+          <ai-info-item label="身份证号" :value="baseInfo.idNumber">
+            <!-- <ai-id mode="show" v-model="baseInfo.idNumber" right-btn class="line-center"/> -->
+          </ai-info-item>
+          <ai-info-item label="出生日期" :value="baseInfo.birthday"/>
+          <ai-info-item label="年龄" :value="baseInfo.age"/>
+          <ai-info-item label="籍贯" :value="baseInfo.birthplaceAreaName"/>
+          <ai-info-item label="民族" :value="dict.getLabel('nation', baseInfo.nation)"/>
+          <ai-info-item label="文化程度" :value="dict.getLabel('education', baseInfo.education)"/>
+          <ai-info-item label="婚姻状况" :value="dict.getLabel('maritalStatus', baseInfo.maritalStatus)"/>
+          <ai-info-item label="政治面貌" :value="dict.getLabel('politicsStatus', baseInfo.politicsStatus)"/>
+          <ai-info-item label="兵役状况" :value="dict.getLabel('militaryStatus', baseInfo.militaryStatus)"/>
+          <ai-info-item label="宗教信仰" :value="dict.getLabel('faithType', baseInfo.faithType)"/>
+          <ai-info-item label="职业" :value="dict.getLabel('job', baseInfo.job)"/>
+        </ai-wrapper>
+      </ai-card>
+      <ai-card title="联络信息" type="flex">
+        <ai-wrapper slot="content">
+          <ai-info-item label="联系方式" :value="baseInfo.phone"/>
+          <ai-info-item label="现住址" isLine :value="[baseInfo.currentAreaName, baseInfo.currentAddress].join('')"/>
+        </ai-wrapper>
+      </ai-card>
+      <ai-card title="户籍信息">
+        <ai-wrapper slot="content">
+          <ai-info-item label="是否户主" :value="dict.getLabel('householdName', baseInfo.isHousehold)"/>
+          <template v-if="baseInfo.isHousehold == 0">
+            <ai-info-item label="与户主关系" :value="dict.getLabel('householdRelation', baseInfo.householdRelation)"/>
+            <ai-info-item label="户主身份证号" :value="baseInfo.householdIdNumber"/>
+          </template>
+          <ai-info-item label="户籍地" isLine :value="[baseInfo.householdAreaName, baseInfo.householdAddress].join('')"></ai-info-item>
+        </ai-wrapper>
+      </ai-card>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+  import { ID } from 'dui/lib/js/utils'
+  export default {
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object,
+    },
+
+    data () {
+      return {
+        baseInfo: {},
+        id: ''
+      }
+    },
+
+    created () {
+      this.id = this.params.id
+
+      this.getDetail()
+    },
+
+    methods: {
+      cancel (isRefresh) {
+        this.$emit('change', {
+          type: 'List',
+          isRefresh: !!isRefresh
+        })
+      },
+
+      IdCard (UUserCard) {
+        if (UUserCard) {
+          const idCard = new ID(UUserCard)
+          this.baseInfo.age = idCard.age
+          this.baseInfo.sex = idCard.sex
+          this.baseInfo.birthday = idCard.birthday
+        }
+      },
+
+      getDetail() {
+        this.instance.post(`/app/appresidentapplet/queryDetailById?id=${this.params.id}`).then(res => {
+          if (res.data) {
+            this.baseInfo = {
+              ...res.data
+            }
+            this.IdCard(res.data.idNumber)
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scope>
+  .activitiesAdd {
+    height: 100%;
+
+    :deep( .amap-logo ){
+      display: none!important;
+    }
+    :deep( .amap-copyright ){
+      display: none!important;
+    }
+
+    :deep( .el-date-editor .el-input ){
+      width: 100%;
+    }
+
+    .amap-container {
+      height: 380px;
+    }
+  }
+</style>
diff --git a/project/fengdu/app/AppResidentInfo/components/List.vue b/project/fengdu/app/AppResidentInfo/components/List.vue
new file mode 100644
index 00000000..685bda9c
--- /dev/null
+++ b/project/fengdu/app/AppResidentInfo/components/List.vue
@@ -0,0 +1,146 @@
+<template>
+  <ai-list class="activitiesList">
+    <ai-title
+      slot="title"
+      title="居民信息"
+      isShowBottomBorder
+      isShowArea
+      :hideLevel="$store.state.user.info.areaList.length - 1"
+      v-model="search.areaId"
+      :instance="instance"
+      @change="search.current = 1, getList()">
+    </ai-title>
+    <template #content>
+      <ai-search-bar bottomBorder>
+        <template #left>
+          <el-button type="primary" icon="iconfont iconAdd" @click="toAdd('')">添加</el-button>
+        </template>
+        <template #right>
+          <el-input
+            v-model="search.title"
+            size="small"
+            placeholder="姓名/身份证/联系方式"
+            clearable
+            v-throttle="() => {search.current = 1, getList()}"
+            @clear="search.title = '', getList()"
+            suffix-icon="iconfont iconSearch">
+          </el-input>
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :total="search.total"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        @getList="getList"
+        :col-configs="colConfigs"
+        :dict="dict">
+        <el-table-column slot="options" label="操作" fixed="right" align="center" width="160px">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="toDetail(row.id)">详情</el-button>
+              <el-button type="text" @click="toAdd(row.id)">编辑</el-button>
+              <el-button type="text" @click="remove(row.id)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  export default {
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data () {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          total: 0,
+          title: '',
+          areaId: ''
+        },
+        tableData: []
+      }
+    },
+
+    computed: {
+      colConfigs() {
+        return [
+          { label: "姓名", prop: "name", align: "left" },
+          { label: "性别", prop: "sex", dict: 'sex', align: "center" },
+          { prop: 'idNumber', label: '身份证号', align: 'center', format: v => v.substring(0, 10) + '****' + v.substring(14, 18) },
+          { label: "年龄", prop: "age", align: "center"},
+          { label: "民族", prop: "nation", align: "center", dict: "nation" },
+          { label: "文化程度", prop: "education", align: "center", dict: "education" },
+          { label: "政治面貌", prop: "politicsStatus", align: "center", dict: "politicsStatus" },
+          { slot: "options", },
+        ]
+      }
+    },
+
+    created () {
+      this.search.areaId = this.$store.state.user.info.areaId
+      this.$dict.load(['nation', 'education', 'politicsStatus']).then(()=> {
+        this.getList()
+      })
+    },
+
+    methods: {
+      getList() {
+        this.instance.post(`/app/appresidentapplet/list`,null, {
+          params: {
+            ...this.search,
+          }
+        }).then(res=> {
+          if(res?.data) {
+            this.tableData = res.data.records
+            this.search.total = res.data.total
+          }
+        })
+      },
+
+      toDetail (id) {
+        this.$emit('change', {
+          type: 'Detail',
+          params: {
+            id: id || '',
+            type: 'Detail'
+          }
+        })
+      },
+
+      toAdd(id) {
+        this.$emit('change', {
+          type: 'Add',
+          params: {
+            type: id ? 'Edit' : 'Add',
+            id: id || ''
+          }
+        })
+      },
+
+      remove (id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appresidentapplet/delete?ids=${id}`).then(res=>{
+            if(res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .activitiesList {
+    height: 100%;
+  }
+</style>