From 31b3e6c67031476fa3c2a3cf368aa877f43ba880 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Tue, 19 Apr 2022 15:11:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B1=85=E6=B0=91=E6=A1=A3=E6=A1=88=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/meta/AppResident/localResident.vue | 869 ++++----------------
 1 file changed, 169 insertions(+), 700 deletions(-)

diff --git a/packages/meta/AppResident/localResident.vue b/packages/meta/AppResident/localResident.vue
index c7e0bdf2..f44e7a69 100644
--- a/packages/meta/AppResident/localResident.vue
+++ b/packages/meta/AppResident/localResident.vue
@@ -15,11 +15,11 @@
                  label-position="right" size="small">
           <el-tabs tab-position="left" v-if="showDetail">
             <el-tab-pane label="基本信息">
-              <ai-edit-card title="基本信息" :show-btn="permissions('app_appresident_edit')"
+              <ai-edit-card :title="baseInfo.name||'基本信息'" :show-btn="permissions('app_appresident_edit')"
                             @save="saveFrom" @cancel="getDetail(baseInfo.id)">
                 <template #edit>
-                  <div class="above">
-                    <div class="left">
+                  <el-row type="flex">
+                    <div class="fill">
                       <el-form-item label="姓名：" prop="name">
                         <el-input
                             v-model="baseInfo.name"
@@ -27,50 +27,22 @@
                             size="small"
                             placeholder="请输入姓名"
                             maxlength="20"
-                            show-word-limit
-                            :disabled="!!showDetail"
-                        />
-                        <!-- <p v-else>{{baseInfo.name||'-'}}</p> -->
+                            show-word-limit/>
                       </el-form-item>
                       <el-form-item label="身份证号：" prop="idNumber">
-                        <el-input
-                            v-model="baseInfo.idNumber"
-                            autocomplete="off"
-                            size="small"
-                            placeholder="请输入身份证号"
-                            :maxlength="18"
-                            @input="idChange"
-                            :disabled="!!showDetail"
-                        />
-                        <!-- <p v-else>
-                            <ai-id mode="show" v-model="baseInfo.idNumber" right-btn></ai-id>
-                        </p>-->
+                        <el-input v-model="baseInfo.idNumber" placeholder="请输入身份证号" :maxlength="18" show-word-limit
+                                  @change="idChange"/>
                       </el-form-item>
                       <el-form-item label="性别：" prop="sex">
-                        <el-select v-model="baseInfo.sex"
-                                   placeholder="请选择"
-                                   disabled
-                                   clearable>
-                          <el-option
-                              v-for="(item,i) in dict.getDict('sex')"
-                              :label="item.dictName"
-                              :key="i"
-                              :value="item.dictValue"
-                          ></el-option>
-                        </el-select>
-                        <!-- <p v-else>
-                            {{dict.getLabel('sex',baseInfo.sex)||'-'}}
-                        </p>-->
+                        <ai-select v-model="baseInfo.sex" :selectList="dict.getDict('sex')"/>
                       </el-form-item>
                     </div>
-                    <div class="right">
-                      <el-form-item label="个人照片：" prop="photo">
-                        <ai-avatar :instance="instance" v-model="baseInfo.photo"/>
-                      </el-form-item>
-                    </div>
-                  </div>
-                  <div class="above">
-                    <div class="left">
+                    <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
@@ -79,76 +51,23 @@
                             format="yyyy-MM-dd"
                             v-model="baseInfo.birthday"
                             type="date"
-
                             placeholder="选择日期"
-                        ></el-date-picker>
+                        />
                       </el-form-item>
                       <el-form-item label="文化程度：" prop="education">
-                        <el-select
-                            v-model="baseInfo.education"
-                            placeholder="请选择"
-
-                            clearable
-                        >
-                          <el-option
-                              v-for="(item,i) in dict.getDict('education')"
-                              :label="item.dictName"
-                              :key="i"
-                              :value="item.dictValue"
-                          ></el-option>
-                        </el-select>
-                        <!-- <p v-else>{{dict.getLabel('education',baseInfo.education)||'-'}}</p> -->
+                        <ai-select v-model="baseInfo.education" :selectList="dict.getDict('education')"/>
                       </el-form-item>
                       <el-form-item label="政治面貌：" prop="politicsStatus">
-                        <el-select
-                            v-model="baseInfo.politicsStatus"
-                            placeholder="请选择"
-
-                            clearable
-                        >
-                          <el-option
-                              v-for="(item,i) in dict.getDict('politicsStatus')"
-                              :label="item.dictName"
-                              :key="i"
-                              :value="item.dictValue"
-                          ></el-option>
-                        </el-select>
-                        <!-- <p v-else>{{dict.getLabel('politicsStatus',baseInfo.politicsStatus)||'-'}}</p> -->
+                        <ai-select v-model="baseInfo.politicsStatus" :selectList="dict.getDict('politicsStatus')"/>
                       </el-form-item>
                       <el-form-item label="职业：" prop="job">
-                        <el-select
-                            v-model="baseInfo.job"
-                            placeholder="请选择"
-
-                            clearable
-                        >
-                          <el-option
-                              v-for="(item,i) in dict.getDict('job')"
-                              :label="item.dictName"
-                              :key="i"
-                              :value="item.dictValue"
-                          ></el-option>
-                        </el-select>
-                        <!-- <p v-else>{{dict.getLabel('job',baseInfo.job)||'-'}}</p> -->
+                        <ai-select v-model="baseInfo.job" :selectList="dict.getDict('job')"/>
                       </el-form-item>
                       <el-form-item label="宗教信仰：" prop="faithType">
-                        <el-select
-                            v-model="baseInfo.faithType"
-                            placeholder="请选择"
-
-                            clearable
-                        >
-                          <el-option
-                              v-for="(item,i) in dict.getDict('faithType')"
-                              :label="item.dictName"
-                              :key="i"
-                              :value="item.dictValue"
-                          ></el-option>
-                        </el-select>
-                        <!-- <p v-else>{{dict.getLabel('faithType',baseInfo.faithType)||'-'}}</p> -->
+                        <ai-select v-model="baseInfo.faithType" :selectList="dict.getDict('faithType')"/>
                       </el-form-item>
                     </div>
-                    <div class="right">
+                    <div class="fill">
                       <el-form-item label="年龄：" prop="age">
                         <el-input
                             disabled
@@ -158,136 +77,48 @@
                             placeholder="请输入年龄"
                             type="number"
                             @mousewheel.native.prevent
-                        ></el-input>
+                        />
                         <!-- <p v-else>{{baseInfo.age}}</p> -->
                       </el-form-item>
                       <el-form-item label="民族：" prop="nation">
-                        <el-select
-                            v-model="baseInfo.nation"
-                            placeholder="请选择"
-
-                            clearable
-                        >
-                          <el-option
-                              v-for="(item,i) in dict.getDict('nation')"
-                              :label="item.dictName"
-                              :key="i"
-                              :value="item.dictValue"
-                          ></el-option>
-                        </el-select>
-                        <!-- <p v-else>{{dict.getLabel('nation',baseInfo.nation)||'-'}}</p> -->
+                        <ai-select v-model="baseInfo.nation" :selectList="dict.getDict('nation')"/>
                       </el-form-item>
                       <el-form-item label="婚姻状况：" prop="maritalStatus">
-                        <el-select
-                            v-model="baseInfo.maritalStatus"
-                            placeholder="请选择"
-
-                            clearable
-                        >
-                          <el-option
-                              v-for="(item,i) in dict.getDict('maritalStatus')"
-                              :label="item.dictName"
-                              :key="i"
-                              :value="item.dictValue"
-                          ></el-option>
-                        </el-select>
-                        <!-- <p v-else>{{dict.getLabel('maritalStatus',baseInfo.maritalStatus)||'-'}}</p> -->
+                        <ai-select v-model="baseInfo.maritalStatus" :selectList="dict.getDict('maritalStatus')"/>
                       </el-form-item>
                       <el-form-item label="兵役状况：" prop="militaryStatus">
-                        <el-select
-                            v-model="baseInfo.militaryStatus"
-                            placeholder="请选择"
-
-                            clearable
-                        >
-                          <el-option
-                              v-for="(item,i) in dict.getDict('militaryStatus')"
-                              :label="item.dictName"
-                              :key="i"
-                              :value="item.dictValue"
-                          ></el-option>
-                        </el-select>
-                        <!-- <p v-else>{{dict.getLabel('militaryStatus',baseInfo.militaryStatus)||'-'}}</p> -->
+                        <ai-select v-model="baseInfo.militaryStatus" :selectList="dict.getDict('militaryStatus')"/>
                       </el-form-item>
                     </div>
-                  </div>
-                  <div class="areaList">
-                    <el-form-item label="籍贯：" prop=" birthplaceAreaId">
-                      <ai-area-select
-                          clearable
-                          always-show
-                          :instance="instance"
-                          v-model="baseInfo.birthplaceAreaId"
-                          :areaLevel="3"
-                      />
-                    </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>
                   <el-row type="flex">
-                    <div class="detail-info fill">
-                      <h3 class="name">{{ baseInfo.name || '-' }}</h3>
-                      <div class="detail-left fill">
-                        <div class="info">
-                          <span class="label">性别：</span>
-                          <span class="value">{{ dict.getLabel('sex', baseInfo.sex) || '-' }}</span>
-                        </div>
-                        <div class="info">
-                          <span class="label">出生日期：</span>
-                          <span class="value" v-text="baseInfo.birthday||'-'"/>
-                        </div>
-                        <div class="info">
-                          <span class="label">籍贯：</span>
-                          <span class="value">{{ baseInfo.birthplaceAreaName || '-' }}</span>
-                        </div>
-                        <div class="info">
-                          <span class="label">文化程度：</span>
-                          <span class="value">{{ dict.getLabel('education', baseInfo.education) || '-' }}</span>
-                        </div>
-                        <div class="info">
-                          <span class="label">政治面貌：</span>
-                          <span
-                              class="value"
-                          >{{ dict.getLabel('politicsStatus', baseInfo.politicsStatus) || '-' }}</span>
-                        </div>
-                        <div class="info">
-                          <span class="label">宗教信仰：</span>
-                          <span class="value">{{ dict.getLabel('faithType', baseInfo.faithType) || '-' }}</span>
-                        </div>
-                      </div>
-                      <div class="detail-right fill">
-                        <div class="info">
-                          <span class="label">身份证号：</span>
-                          <span class="value">
-                        <ai-id mode="show" v-model="baseInfo.idNumber" right-btn class="line-center"></ai-id>
-                      </span>
-                        </div>
-                        <div class="info">
-                          <span class="label">年龄：</span>
-                          <span class="value">{{ baseInfo.age }}</span>
-                        </div>
-                        <div class="info">
-                          <span class="label">民族：</span>
-                          <span class="value">{{ dict.getLabel('nation', baseInfo.nation) || '-' }}</span>
-                        </div>
-                        <div class="info">
-                          <span class="label">婚姻状况：</span>
-                          <span
-                              class="value"
-                          >{{ dict.getLabel('maritalStatus', baseInfo.maritalStatus) || '-' }}</span>
-                        </div>
-                        <div class="info">
-                          <span class="label">兵役状况：</span>
-                          <span
-                              class="value"
-                          >{{ dict.getLabel('militaryStatus', baseInfo.militaryStatus) || '-' }}</span>
-                        </div>
-                        <div class="info">
-                          <span class="label">职业：</span>
-                          <span class="value">{{ dict.getLabel('job', baseInfo.job) || '-' }}</span>
-                        </div>
-                      </div>
-                    </div>
+                    <ai-wrapper class="fill">
+                      <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('faithType', baseInfo.job)"/>
+                    </ai-wrapper>
                     <ai-avatar v-model="baseInfo.photo" :editable="false"/>
                   </el-row>
                 </template>
@@ -295,18 +126,13 @@
               <ai-edit-card title="联络信息" :show-btn="permissions('app_appresident_edit')"
                             @save="saveFrom" @cancel="getDetail(baseInfo.id)">
                 <template #edit>
-                  <div class="above">
-                    <div class="left">
-                      <el-form-item label="联系方式：" prop="phone">
-                        <el-input v-model="baseInfo.phone" size="small" placeholder="请输入联系方式" :maxlength="11"
-                                  show-word-limit/>
-                      </el-form-item>
-                    </div>
-                  </div>
+                  <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"/>
+                                    v-model="baseInfo.currentAreaId" :valueLevel="4"/>
                     <el-form-item>
                       <el-input v-model="baseInfo.currentAddress" placeholder="详细地址" maxlength="30" show-word-limit
                                 clearable/>
@@ -314,43 +140,34 @@
                   </el-form-item>
                 </template>
                 <template>
-                  <div class="info" style="margin-bottom:8px">
-                    <span class="label">联系方式：</span>
-                    <span class="value">{{ baseInfo.phone || '-' }}</span>
-                  </div>
-                  <div class="info">
-                    <span class="label">现住址：</span>
-                    <span class="value">{{ [baseInfo.currentAreaName, baseInfo.currentAddress].join("") || "-" }}</span>
-                  </div>
+                  <ai-wrapper>
+                    <ai-info-item label="联系方式" :value="baseInfo.phone"/>
+                    <ai-info-item label="现住址" isLine
+                                  :value="[baseInfo.currentAreaName, baseInfo.currentAddress].join('')"/>
+                  </ai-wrapper>
                 </template>
               </ai-edit-card>
               <ai-edit-card title="户籍信息" :show-btn="permissions('app_appresident_edit')"
                             @save="saveFrom" @cancel="getDetail(baseInfo.id)">
                 <template #edit>
-
-                  <div class="above">
-                    <div class="left">
+                  <el-row type="flex">
+                    <div class="fill">
                       <el-form-item label="是否户主：" prop="householdName">
-                        <el-select v-model="baseInfo.householdName" placeholder="请选择"
-                                   @change="householdRelationChange" clearable>
-                          <el-option v-for="(item,i) in dict.getDict('householdName')"
-                                     :label="item.dictName" :key="i" :value="item.dictValue"/>
-                        </el-select>
+                        <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">
-                        <el-select v-model="baseInfo.householdRelation" placeholder="请选择" clearable>
-                          <el-option v-for="(item,i) in dict.getDict('householdRelation')"
-                                     :label="item.dictName" :key="i" :value="item.dictValue"/>
-                        </el-select>
+                        <ai-select v-model="baseInfo.householdRelation"
+                                   :selectList="dict.getDict('householdRelation')"/>
                       </el-form-item>
                     </div>
-                    <div class="right">
+                    <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>
-                  </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">
@@ -360,79 +177,26 @@
                   </el-form-item>
                 </template>
                 <template>
-                  <div class="detail-info">
-                    <div class="detail-left fill">
-                      <div class="info">
-                        <span class="label">是否户主：</span>
-                        <span class="value">{{ dict.getLabel('householdName', baseInfo.householdName) || '-' }}</span>
-                      </div>
-                    </div>
-                    <div class="info fill" v-if="baseInfo.householdName==0">
-                      <span class="label">与户主关系：</span>
-                      <span class="value">{{
-                          dict.getLabel('householdRelation', baseInfo.householdRelation) || '-'
-                        }}</span>
-                    </div>
-                    <div class="info fill" v-if="baseInfo.householdName==0">
-                      <span class="label">户主身份证号：</span>
-                      <span class="value">
-                        <ai-id mode="show" v-model="baseInfo.householdIdNumber" right-btn></ai-id>
-                      </span>
-                    </div>
-                  </div>
-                  <div class="detail-info-p info">
-                    <span class="label">户籍地：</span>
-                    <span class="value">
-                  {{ baseInfo.householdAreaName + (baseInfo.householdAddress ? baseInfo.householdAddress : "") }}
-                </span>
-                  </div>
+                  <ai-wrapper>
+                    <ai-info-item label="是否户主" :value="dict.getLabel('householdName', baseInfo.householdName)"/>
+                    <ai-info-item label="与户主关系" :value="dict.getLabel('householdName', baseInfo.householdName)"
+                                  v-if="baseInfo.householdName==0"/>
+                    <ai-info-item label="户主身份证号" :value="dict.getLabel('householdName', baseInfo.householdName)"
+                                  v-if="baseInfo.householdName==0"/>
+                    <ai-info-item label="户籍地" isLine
+                                  :value="[baseInfo.householdAreaName, baseInfo.householdAddress].join('')" isLine/>
+                  </ai-wrapper>
                 </template>
               </ai-edit-card>
               <ai-card title="家庭成员">
                 <div slot="content">
-                  <el-table
-                      border
-                      ref="multipleTable"
-                      :data="family"
-                      style="margin-top:8px;"
-
-                      header-cell-class-name="table-header"
-                      tooltip-effect="light"
-                      row-class-name="table-row"
-                      cell-class-name="table-cell"
-                  >
-                    <el-table-column align="center" prop="name" label="与户主关系">
-                      <template slot-scope="scope">
-                      <span>{{
-                          scope.row.householdRelation ? dict.getLabel('householdRelation', scope.row.householdRelation) : "户主"
-                        }}</span>
-                      </template>
-                    </el-table-column>
-                    <el-table-column prop="name" label="姓名" align="center" show-overflow-tooltip></el-table-column>
-                    <el-table-column prop="idNumber" label="性别" align="center" show-overflow-tooltip>
-                      <template slot-scope="scope">
-                        <span>{{ parseInt(scope.row.idNumber.substr(16, 1)) % 2 == 1 ? '男' : '女' }}</span>
-                      </template>
-                    </el-table-column>
-                    <el-table-column prop="age" label="年龄" align="center" show-overflow-tooltip></el-table-column>
-                    <el-table-column
-                        prop="idNumber"
-                        label="身份证号"
-                        align="center"
-                        width="200"
-                        show-overflow-tooltip>
+                  <ai-table :tableData="family" :dict="dict" :isShowPagination="false" :colConfigs="colConfigs">
+                    <el-table-column slot="options" label="操作" align="center">
                       <template slot-scope="{row}">
-                        <ai-id mode="show" v-model="row.idNumber" :showEyes="false"/>
+                        <el-button @click="showFamily(row)" type="text">详情</el-button>
                       </template>
                     </el-table-column>
-                    <el-table-column prop="address" label="操作" align="center" show-overflow-tooltip>
-                      <template slot-scope="scope">
-                        <el-button icon="iconfont iconShow" title="查看详情" class="dict-list-operation"
-                                   @click="showFamily(scope.row)" type="text"/>
-                      </template>
-                    </el-table-column>
-                    <div slot="empty" class="no-data" style="height:160px;"/>
-                  </el-table>
+                  </ai-table>
                 </div>
               </ai-card>
               <ai-edit-card title="标签信息" :show-btn="permissions('app_appresident_edit')"
@@ -505,8 +269,8 @@
           <template v-else>
             <ai-card title="基本信息">
               <template #content>
-                <div class="above">
-                  <div class="left">
+                <el-row type="flex">
+                  <div class="fill">
                     <el-form-item label="姓名：" prop="name">
                       <el-input
                           v-model="baseInfo.name"
@@ -514,50 +278,22 @@
                           size="small"
                           placeholder="请输入姓名"
                           maxlength="20"
-                          show-word-limit
-                          :disabled="!!showDetail"
-                      />
-                      <!-- <p v-else>{{baseInfo.name||'-'}}</p> -->
+                          show-word-limit/>
                     </el-form-item>
                     <el-form-item label="身份证号：" prop="idNumber">
-                      <el-input
-                          v-model="baseInfo.idNumber"
-                          autocomplete="off"
-                          size="small"
-                          placeholder="请输入身份证号"
-                          :maxlength="18"
-                          @input="idChange"
-                          :disabled="!!showDetail"
-                      />
-                      <!-- <p v-else>
-                          <ai-id mode="show" v-model="baseInfo.idNumber" right-btn></ai-id>
-                      </p>-->
+                      <el-input v-model="baseInfo.idNumber" placeholder="请输入身份证号" :maxlength="18" show-word-limit
+                                @change="idChange"/>
                     </el-form-item>
                     <el-form-item label="性别：" prop="sex">
-                      <el-select v-model="baseInfo.sex"
-                                 placeholder="请选择"
-                                 disabled
-                                 clearable>
-                        <el-option
-                            v-for="(item,i) in dict.getDict('sex')"
-                            :label="item.dictName"
-                            :key="i"
-                            :value="item.dictValue"
-                        ></el-option>
-                      </el-select>
-                      <!-- <p v-else>
-                          {{dict.getLabel('sex',baseInfo.sex)||'-'}}
-                      </p>-->
+                      <ai-select v-model="baseInfo.sex" :selectList="dict.getDict('sex')"/>
                     </el-form-item>
                   </div>
-                  <div class="right">
-                    <el-form-item label="个人照片：" prop="photo">
-                      <ai-avatar :instance="instance" v-model="baseInfo.photo"/>
-                    </el-form-item>
-                  </div>
-                </div>
-                <div class="above">
-                  <div class="left">
+                  <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
@@ -567,74 +303,22 @@
                           v-model="baseInfo.birthday"
                           type="date"
                           placeholder="选择日期"
-                      ></el-date-picker>
+                      />
                     </el-form-item>
                     <el-form-item label="文化程度：" prop="education">
-                      <el-select
-                          v-model="baseInfo.education"
-                          placeholder="请选择"
-
-                          clearable
-                      >
-                        <el-option
-                            v-for="(item,i) in dict.getDict('education')"
-                            :label="item.dictName"
-                            :key="i"
-                            :value="item.dictValue"
-                        ></el-option>
-                      </el-select>
-                      <!-- <p v-else>{{dict.getLabel('education',baseInfo.education)||'-'}}</p> -->
+                      <ai-select v-model="baseInfo.education" :selectList="dict.getDict('education')"/>
                     </el-form-item>
                     <el-form-item label="政治面貌：" prop="politicsStatus">
-                      <el-select
-                          v-model="baseInfo.politicsStatus"
-                          placeholder="请选择"
-
-                          clearable
-                      >
-                        <el-option
-                            v-for="(item,i) in dict.getDict('politicsStatus')"
-                            :label="item.dictName"
-                            :key="i"
-                            :value="item.dictValue"
-                        ></el-option>
-                      </el-select>
-                      <!-- <p v-else>{{dict.getLabel('politicsStatus',baseInfo.politicsStatus)||'-'}}</p> -->
+                      <ai-select v-model="baseInfo.politicsStatus" :selectList="dict.getDict('politicsStatus')"/>
                     </el-form-item>
                     <el-form-item label="职业：" prop="job">
-                      <el-select
-                          v-model="baseInfo.job"
-                          placeholder="请选择"
-
-                          clearable
-                      >
-                        <el-option
-                            v-for="(item,i) in dict.getDict('job')"
-                            :label="item.dictName"
-                            :key="i"
-                            :value="item.dictValue"
-                        ></el-option>
-                      </el-select>
-                      <!-- <p v-else>{{dict.getLabel('job',baseInfo.job)||'-'}}</p> -->
+                      <ai-select v-model="baseInfo.job" :selectList="dict.getDict('job')"/>
                     </el-form-item>
                     <el-form-item label="宗教信仰：" prop="faithType">
-                      <el-select
-                          v-model="baseInfo.faithType"
-                          placeholder="请选择"
-
-                          clearable
-                      >
-                        <el-option
-                            v-for="(item,i) in dict.getDict('faithType')"
-                            :label="item.dictName"
-                            :key="i"
-                            :value="item.dictValue"
-                        ></el-option>
-                      </el-select>
-                      <!-- <p v-else>{{dict.getLabel('faithType',baseInfo.faithType)||'-'}}</p> -->
+                      <ai-select v-model="baseInfo.faithType" :selectList="dict.getDict('faithType')"/>
                     </el-form-item>
                   </div>
-                  <div class="right">
+                  <div class="fill">
                     <el-form-item label="年龄：" prop="age">
                       <el-input
                           disabled
@@ -644,86 +328,40 @@
                           placeholder="请输入年龄"
                           type="number"
                           @mousewheel.native.prevent
-                      ></el-input>
+                      />
                       <!-- <p v-else>{{baseInfo.age}}</p> -->
                     </el-form-item>
                     <el-form-item label="民族：" prop="nation">
-                      <el-select
-                          v-model="baseInfo.nation"
-                          placeholder="请选择"
-
-                          clearable
-                      >
-                        <el-option
-                            v-for="(item,i) in dict.getDict('nation')"
-                            :label="item.dictName"
-                            :key="i"
-                            :value="item.dictValue"
-                        ></el-option>
-                      </el-select>
-                      <!-- <p v-else>{{dict.getLabel('nation',baseInfo.nation)||'-'}}</p> -->
+                      <ai-select v-model="baseInfo.nation" :selectList="dict.getDict('nation')"/>
                     </el-form-item>
                     <el-form-item label="婚姻状况：" prop="maritalStatus">
-                      <el-select
-                          v-model="baseInfo.maritalStatus"
-                          placeholder="请选择"
-
-                          clearable
-                      >
-                        <el-option
-                            v-for="(item,i) in dict.getDict('maritalStatus')"
-                            :label="item.dictName"
-                            :key="i"
-                            :value="item.dictValue"
-                        ></el-option>
-                      </el-select>
-                      <!-- <p v-else>{{dict.getLabel('maritalStatus',baseInfo.maritalStatus)||'-'}}</p> -->
+                      <ai-select v-model="baseInfo.maritalStatus" :selectList="dict.getDict('maritalStatus')"/>
                     </el-form-item>
                     <el-form-item label="兵役状况：" prop="militaryStatus">
-                      <el-select
-                          v-model="baseInfo.militaryStatus"
-                          placeholder="请选择"
-
-                          clearable
-                      >
-                        <el-option
-                            v-for="(item,i) in dict.getDict('militaryStatus')"
-                            :label="item.dictName"
-                            :key="i"
-                            :value="item.dictValue"
-                        ></el-option>
-                      </el-select>
-                      <!-- <p v-else>{{dict.getLabel('militaryStatus',baseInfo.militaryStatus)||'-'}}</p> -->
+                      <ai-select v-model="baseInfo.militaryStatus" :selectList="dict.getDict('militaryStatus')"/>
                     </el-form-item>
                   </div>
-                </div>
-                <div class="areaList">
-                  <el-form-item label="籍贯：" prop=" birthplaceAreaId">
-                    <ai-area-select
-                        clearable
-                        always-show
-                        :instance="instance"
-                        v-model="baseInfo.birthplaceAreaId"
-                        :areaLevel="3"
-                    />
-                  </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>
-                <div class="above">
-                  <div class="left">
-                    <el-form-item label="联系方式：" prop="phone">
-                      <el-input v-model="baseInfo.phone" size="small" placeholder="请输入联系方式" :maxlength="11"
-                                show-word-limit/>
-                    </el-form-item>
-                  </div>
-                </div>
+                <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"/>
+                                  v-model="baseInfo.currentAreaId" :valueLevel="4"/>
                   <el-form-item>
                     <el-input v-model="baseInfo.currentAddress" placeholder="详细地址" maxlength="30" show-word-limit
                               clearable/>
@@ -733,30 +371,23 @@
             </ai-card>
             <ai-card title="户籍信息">
               <template #content>
-
-                <div class="above">
-                  <div class="left">
+                <el-row type="flex">
+                  <div class="fill">
                     <el-form-item label="是否户主：" prop="householdName">
-                      <el-select v-model="baseInfo.householdName" placeholder="请选择"
-                                 @change="householdRelationChange" clearable>
-                        <el-option v-for="(item,i) in dict.getDict('householdName')"
-                                   :label="item.dictName" :key="i" :value="item.dictValue"/>
-                      </el-select>
+                      <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">
-                      <el-select v-model="baseInfo.householdRelation" placeholder="请选择" clearable>
-                        <el-option v-for="(item,i) in dict.getDict('householdRelation')"
-                                   :label="item.dictName" :key="i" :value="item.dictValue"/>
-                      </el-select>
+                      <ai-select v-model="baseInfo.householdRelation" :selectList="dict.getDict('householdRelation')"/>
                     </el-form-item>
                   </div>
-                  <div class="right">
+                  <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>
-                </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">
@@ -774,81 +405,34 @@
         <el-button type="primary" @click="saveFrom()">保存</el-button>
       </template>
     </ai-detail>
-    <el-dialog class="deleteStyle" :visible.sync="familyDialog" width="720px" title="家庭成员信息" top="30vh">
-      <el-row type="flex" justify="space-between">
-        <ul>
-          <li>
-            <span>姓名：</span>
-            <p>{{ familyInfo.name }}</p>
-          </li>
-          <li>
-            <span>身份证号：</span>
-            <p>
-              <ai-id mode="show" v-model="familyInfo.idNumber" right-btn class="line-center"></ai-id>
-            </p>
-          </li>
-          <li>
-            <span>性别：</span>
-            <p>{{ dict.getLabel('sex', familyInfo.sex) }}</p>
-          </li>
-          <li>
-            <span>年龄：</span>
-            <p>{{ familyInfo.age }}</p>
-          </li>
-          <li>
-            <span>联系方式：</span>
-            <p>{{ familyInfo.phone }}</p>
-          </li>
-          <li>
-            <span>民族：</span>
-            <p>{{ dict.getLabel('nation', familyInfo.nation) }}</p>
-          </li>
-          <li>
-            <span>籍贯：</span>
-            <p>{{ familyInfo.birthplaceAreaName }}</p>
-          </li>
-          <li>
-            <span>文化程度：</span>
-            <p>{{ dict.getLabel('education', familyInfo.education) }}</p>
-          </li>
-          <li>
-            <span>婚姻状况：</span>
-            <p>{{ dict.getLabel('maritalStatus', familyInfo.maritalStatus) }}</p>
-          </li>
-          <li>
-            <span>政治面貌：</span>
-            <p>{{ dict.getLabel('politicsStatus', familyInfo.politicsStatus) }}</p>
-          </li>
-          <li>
-            <span>兵役状况：</span>
-            <p>{{ dict.getLabel('militaryStatus', familyInfo.militaryStatus) }}</p>
-          </li>
-          <li>
-            <span>宗教信仰：</span>
-            <p>{{ dict.getLabel('faithType', familyInfo.faithType) }}</p>
-          </li>
-          <li>
-            <span>职业：</span>
-            <p>{{ dict.getLabel('job', familyInfo.job) }}</p>
-          </li>
-          <li style="width:100%;">
-            <span>现住址：</span>
-            <p>{{ familyInfo.currentAreaName + familyInfo.currentAddress }}</p>
-          </li>
-        </ul>
-        <div class="img_block">
-          <ai-avatar v-model="familyInfo.imgUrl" :editable="false"/>
-        </div>
+    <el-dialog :visible.sync="familyDialog" width="720px" title="家庭成员信息" top="30vh">
+      <el-row type="flex">
+        <ai-wrapper class="fill" label-width="70px">
+          <ai-info-item label="性别" :value="dict.getLabel('sex', familyInfo.sex)"/>
+          <ai-info-item label="身份证号">
+            <ai-id mode="show" v-model="familyInfo.idNumber" right-btn class="line-center"/>
+          </ai-info-item>
+          <ai-info-item label="出生日期" :value="familyInfo.birthday"/>
+          <ai-info-item label="年龄" :value="familyInfo.age"/>
+          <ai-info-item label="籍贯" :value="familyInfo.birthplaceAreaName"/>
+          <ai-info-item label="民族" :value="dict.getLabel('nation', familyInfo.nation)"/>
+          <ai-info-item label="文化程度" :value="dict.getLabel('education', familyInfo.education)"/>
+          <ai-info-item label="婚姻状况" :value="dict.getLabel('maritalStatus', familyInfo.maritalStatus)"/>
+          <ai-info-item label="政治面貌" :value="dict.getLabel('politicsStatus', familyInfo.politicsStatus)"/>
+          <ai-info-item label="兵役状况" :value="dict.getLabel('militaryStatus', familyInfo.militaryStatus)"/>
+          <ai-info-item label="宗教信仰" :value="dict.getLabel('faithType', familyInfo.faithType)"/>
+          <ai-info-item label="职业" :value="dict.getLabel('faithType', familyInfo.job)"/>
+          <ai-info-item label="现住址" isLine :value="[familyInfo.currentAreaName, familyInfo.currentAddress].join('')"/>
+        </ai-wrapper>
+        <ai-avatar v-model="familyInfo.imgUrl" :editable="false"/>
       </el-row>
       <div slot="footer" style="text-align: center;">
         <el-button style="width:92px" size="small" @click="familyDialog = false">关闭
         </el-button>
       </div>
     </el-dialog>
-    <el-dialog title="档案注销"
-               class="deleteStyle"
+    <el-dialog title="档案注销" width="700px" top="25vh"
                :visible.sync="writeoffDialog"
-               width="700px" top="25vh"
                @close="familyInit()"
                :close-on-click-modal="false">
       <el-form :model="writeInfo" ref="writeInfo" label-width="100px" size="small">
@@ -1011,6 +595,19 @@ export default {
     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', this.idCardNoUtil.hideId(row.idNumber))},
+        {slot: "options"}
+      ]
     }
   },
   methods: {
@@ -1153,9 +750,19 @@ export default {
   ::v-deep.el-tabs__content {
     max-height: calc(100vh - 136px);
     overflow-y: auto;
+
   }
 
-  .el-form-item {
+  ::v-deep .AiID {
+    line-height: unset;
+
+    .el-button--text {
+      padding: 0 8px;
+      height: fit-content;
+    }
+  }
+
+  ::v-deep .el-form-item {
     margin-bottom: 10px;
 
     .el-form-item {
@@ -1170,143 +777,5 @@ export default {
   ::v-deep .el-form-item__error {
     position: static;
   }
-
-  ::v-deep .content-right {
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    padding-bottom: 80px;
-
-    .ailist-title {
-      padding: 0;
-    }
-
-    .above {
-      width: 100%;
-      overflow: hidden;
-
-      .left {
-        width: 380px;
-        float: left;
-      }
-
-      .right {
-        width: 380px;
-        float: left;
-
-        .pictrue {
-          display: flex;
-          height: 120px;
-
-          img {
-            width: 104px;
-            height: 120px;
-            border-radius: 2px;
-            border: solid 1px #d0d4dc;
-          }
-
-          .upload-demo {
-            padding: 0 15px;
-          }
-
-          .el-button {
-            width: 104px;
-            height: 32px;
-            background-color: #ffffff;
-            border-radius: 2px;
-            border: solid 1px #8899bb;
-          }
-        }
-      }
-    }
-  }
-
-  ul {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-wrap: wrap;
-    padding: 0;
-    margin: 0;
-
-    li {
-      display: flex;
-      align-items: center;
-      min-height: 32px;
-      width: 50%;
-
-      span {
-        flex-shrink: 0;
-      }
-
-      p {
-        margin: 0
-      }
-    }
-  }
-
-  .img_block {
-    flex-shrink: 0;
-  }
-
-  .detail-info {
-    display: flex;
-    flex-wrap: wrap;
-
-    h3 {
-      width: 100%;
-      flex-shrink: 0
-    }
-
-  }
-
-  .info {
-    display: flex;
-    align-items: center;
-    line-height: 1.4;
-    margin-bottom: 16px;
-
-    .label {
-      flex-shrink: 0;
-      width: 100px;
-      margin-right: 40px;
-      text-align: right;
-      color: #888;
-      font-size: 14px;
-    }
-
-    .value {
-      color: #222;
-      font-size: 14px;
-      word-break: break-all;
-    }
-  }
-
-  .fill {
-    flex: 1;
-    min-width: 50%;
-  }
-
-  .el-checkbox-group {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-
-    .el-checkbox {
-      margin: 0 !important;
-      display: flex;
-      align-items: center;
-
-      ::v-deep .el-checkbox__label {
-        font-size: 14px;
-      }
-    }
-  }
-
-  .tags {
-    gap: 10px;
-    flex-wrap: wrap;
-  }
 }
 </style>