dvcp_v2_webapp/project/sass/apps/AppResident/localResident.vue

<template>
  <section class="addAborigines">
    <ai-detail>
      <ai-title slot="title" :title="showDetail?'本地居民信息':'添加本地居民'" isShowBack @onBackClick="$router.push({query:{}})"
                isShowBottomBorder>
        <template v-if="showDetail" #rightBtn>
          <el-button @click="beforeWriteOff()" icon="el-icon-switch-button" v-if="baseInfo.fileStatus==0">注销档案
          </el-button>
          <el-button icon="iconfont iconDelete" @click="handleDelete()" v-if="$permissions('app_appresident_del')">
            删除人员
          </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">

          <ai-card title="基本信息">
            <template v-if="showDetail" #right>
              <template v-if="$permissions('app_appresident_edit')">
                <el-button
                    type="text"
                    class="iconfont iconEdit"
                    @click="editInit(),showEdit1=true;"
                    v-if="!showEdit1"
                >&nbsp;修改
                </el-button>
              </template>
              <el-button
                  type="text"
                  @click="showEdit1=false,searchDetail(baseInfo.id)"
                  v-if="showEdit1"
              >取消
              </el-button>
              <el-button type="text" v-if="showEdit1" @click="saveFrom('ruleForm')">保存</el-button>
            </template>
            <div slot="content" v-if="showEdit1">
              <div class="above">
                <div class="left">
                  <el-form-item label="姓名：" prop="name">
                    <el-input
                        v-model="baseInfo.name"
                        autocomplete="off"
                        size="small"
                        placeholder="请输入姓名"
                        v-if="showEdit1"
                        :disabled="!!showDetail"
                    ></el-input>
                    <!-- <p v-else>{{baseInfo.name||'-'}}</p> -->
                  </el-form-item>
                  <el-form-item label="身份证号：" prop="idNumber">
                    <el-input
                        v-model="baseInfo.idNumber"
                        autocomplete="off"
                        size="small"
                        placeholder="请输入身份证号"
                        v-if="showEdit1"
                        :maxlength="18"
                        @input="idChange"
                        :disabled="!!showDetail"
                    />
                    <!-- <p v-else>
                        <ai-id mode="show" v-model="baseInfo.idNumber" right-btn></ai-id>
                    </p>-->
                  </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>-->
                  </el-form-item>
                </div>
                <div class="right">
                  <el-form-item label="个人照片：" prop="photo">
                    <!-- <div class="pictrue">
                        <img :src="imgUrl" alt="" title=""></img>
                        <el-upload
                            v-if="showEdit1"
                            class="upload-demo"
                            action
                            multiple
                            accept=".png,.jpg"
                            :http-request="uploadFile"
                            :show-file-list="false"
                            :on-change="handleChange"
                            :file-list="fileList"
                            >
                            <el-button >上传照片</el-button>
                            <div slot="tip" class="el-upload__tip">
                                    图片大小不能超过2M
                    </div>
                        </el-upload>
                    </div>-->
                    <ai-avatar :instance="instance" v-if="showEdit1" v-model="baseInfo.photo"/>
                    <ai-avatar v-model="baseInfo.photo" v-else :editable="false"/>
                    <!--<ai-avatar :instance="instance" v-model="baseInfo.photo"/>-->
                  </el-form-item>
                </div>
              </div>
              <div class="above">
                <div class="left">
                  <el-form-item label="出生日期：" prop="birthday">
                    <el-date-picker
                        v-if="showEdit1"
                        disabled
                        :editable="false"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        format="yyyy-MM-dd"
                        v-model="birthday"
                        type="date"

                        placeholder="选择日期"
                    ></el-date-picker>
                    <!-- <p v-else>{{birthday?birthday.substring(0, 10):"-"}}</p> -->
                  </el-form-item>
                  <el-form-item label="文化程度：" prop="education">
                    <el-select
                        v-model="baseInfo.education"
                        placeholder="请选择"

                        v-if="showEdit1"
                        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> -->
                  </el-form-item>
                  <el-form-item label="政治面貌：" prop="politicsStatus">
                    <el-select
                        v-model="baseInfo.politicsStatus"
                        placeholder="请选择"

                        v-if="showEdit1"
                        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> -->
                  </el-form-item>
                  <el-form-item label="职业：" prop="job">
                    <el-select
                        v-model="baseInfo.job"
                        placeholder="请选择"

                        v-if="showEdit1"
                        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> -->
                  </el-form-item>
                  <el-form-item label="宗教信仰：" prop="faithType">
                    <el-select
                        v-model="baseInfo.faithType"
                        placeholder="请选择"

                        v-if="showEdit1"
                        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> -->
                  </el-form-item>
                </div>
                <div class="right">
                  <el-form-item label="年龄：" prop="age">
                    <el-input
                        disabled
                        v-model="baseInfo.age"
                        autocomplete="off"
                        size="small"
                        placeholder="请输入年龄"
                        v-if="showEdit1"
                        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="请选择"

                        v-if="showEdit1"
                        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> -->
                  </el-form-item>
                  <el-form-item label="婚姻状况：" prop="maritalStatus">
                    <el-select
                        v-model="baseInfo.maritalStatus"
                        placeholder="请选择"

                        v-if="showEdit1"
                        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> -->
                  </el-form-item>
                  <el-form-item label="兵役状况：" prop="militaryStatus">
                    <el-select
                        v-model="baseInfo.militaryStatus"
                        placeholder="请选择"

                        v-if="showEdit1"
                        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> -->
                  </el-form-item>
                </div>
              </div>
              <div class="areaList">
                <el-form-item label="籍贯：" prop=" birthplaceAreaId">
                  <ai-area-select
                      clearable
                      always-show
                      :instance="instance"
                      v-if="showEdit1"
                      v-model="baseInfo.birthplaceAreaId"
                      :areaLevel="3"
                  ></ai-area-select>
                  <!-- <p v-if="!showEdit1">{{baseInfo.birthplaceAreaName||'-'}}</p> -->
                </el-form-item>
              </div>
            </div>
            <div slot="content" v-else>
              <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">{{ birthday ? birthday.substring(0, 10) : '-' }}</span>
                    </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-avatar v-model="baseInfo.photo" :editable="false"/>
              </el-row>
            </div>
          </ai-card>

          <ai-card title="联络信息">
            <template v-if="showDetail" #right>
              <template v-if="$permissions('app_appresident_edit')">
                <el-button
                    type="text"
                    class="iconfont iconEdit"
                    @click="editInit(),showEdit2=true;"
                    v-if="!showEdit2">
                  修改
                </el-button>
              </template>
              <el-button
                  type="text"
                  @click="showEdit2=false,searchDetail(baseInfo.id)"
                  v-if="showEdit2">
                取消
              </el-button>
              <el-button type="text" v-if="showEdit2" @click="saveFrom('ruleForm')">保存</el-button>
            </template>
            <div slot="content" v-if="showEdit2">
              <div class="above">
                <div class="left">
                  <el-form-item label="联系方式：" prop="phone">
                    <el-input v-model="baseInfo.phone" size="small" placeholder="请输入联系方式" v-if="showEdit2"
                              :maxlength="11"/>
                  </el-form-item>
                </div>
              </div>
              <el-form-item label="现住址：" prop="currentAreaId">
                <ai-area-select clearable always-show :instance="instance" v-model="baseInfo.currentAreaId"
                                :valueLevel="4"/>
                <el-form-item>
                  <el-input v-model="baseInfo.currentAddress" placeholder="详细地址" clearable/>
                </el-form-item>
              </el-form-item>
            </div>
            <div slot="content" v-else style="margin-top: 16px;margin-bottom:24px">
              <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 || "-" }}</span>
              </div>
            </div>
          </ai-card>

          <ai-card title="户籍信息">
            <template v-if="showDetail" #right>
              <template v-if="$permissions('app_appresident_edit')">
                <el-button
                    type="text"
                    class="iconfont iconEdit"
                    @click="editInit(),showEdit3=true;"
                    v-if="!showEdit3"
                >&nbsp;修改
                </el-button>
              </template>
              <el-button
                  type="text"
                  @click="showEdit3=false,searchDetail(baseInfo.id)"
                  v-if="showEdit3"
              >取消
              </el-button>
              <el-button type="text" v-if="showEdit3" @click="saveFrom('ruleForm')">保存</el-button>
            </template>
            <div slot="content" v-if="showEdit3">
              <div class="above">
                <div class="left">
                  <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>
                  </el-form-item>
                  <el-form-item label="与户主关系：" prop="householdRelation" v-if="baseInfo.householdName==0">
                    <el-select v-model="baseInfo.householdRelation" placeholder="请选择" v-if="showEdit3" clearable>
                      <el-option v-for="(item,i) in dict.getDict('householdRelation')"
                                 :label="item.dictName" :key="i" :value="item.dictValue"/>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="right">
                  <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-form-item label="户籍地：" prop="householdAreaId">
                <ai-area-select clearable always-show :instance="instance" v-if="showEdit3"
                                v-model="baseInfo.householdAreaId" :valueLevel="4"/>
                <el-form-item>
                  <el-input v-model="baseInfo.householdAddress" placeholder="详细地址" clearable/>
                </el-form-item>
              </el-form-item>
            </div>
            <div slot="content" v-else style="margin-top: 16px;margin-bottom:24px">
              <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>
            </div>
          </ai-card>

          <ai-card title="家庭成员" v-if="showDetail">
            <div slot="content" v-if="showDetail">
              <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>
                  <template slot-scope="{row}">
                    <ai-id mode="show" v-model="row.idNumber" :showEyes="false"/>
                  </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>
            </div>
          </ai-card>
        </el-form>
      </template>
      <template v-if="!showDetail" #footer>
        <el-button @click="cancelFn()">取消</el-button>
        <el-button type="primary" @click="saveFrom('ruleForm','goBack')">保存</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-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"
               :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">
        <el-form-item label="姓名：">{{ baseInfo.name }}</el-form-item>
        <el-form-item label="身份证号：">
          <ai-id mode="show" v-model="baseInfo.idNumber" right-btn/>
        </el-form-item>
        <el-form-item label="注销原因：" prop="logoutReason" autocomplete="off"
                      :rules="{required: true, message: '注销原因不能为空', trigger: 'change'}">
          <el-select v-model="writeInfo.logoutReason" placeholder="请选择">
            <el-option v-for="(item,i) in dict.getDict('logoutReason')"
                       :label="item.dictName"
                       :key="i" :value="item.dictValue"/>
          </el-select>
        </el-form-item>
        <el-form-item label="操作说明：" prop="logoutDescription" :rules="{ required: true, message: '操作说明不能为空'}">
          <el-input type="textarea" v-model="writeInfo.logoutDescription" :rows="4"/>
        </el-form-item>
      </el-form>
      <div slot="footer" style="text-align: center;">
        <el-button
            style="width:92px"
            size="small"
            class="delete-btn"
            @click="writeoffDialog=false,$refs.writeInfo.resetFields();"
        >取消
        </el-button>
        <el-button
            style="width:92px"
            size="small"
            type="primary"
            @click="submitForm('writeInfo')"
        >确认
        </el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import {mapState} from "vuex";

export default {
  name: "addAborigines",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    detail: Object,
    active: String
  },
  data() {
    let IdNumberPass = (rule, value, callback) => {
      if (value) {
        if (this.idCardNoUtil.checkIdCardNo(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: "",
        householdName: "",
        householdRelation: "",
        id: "",
        idNumber: "",
        job: "",
        logoutDescription: "",
        logoutReason: "",
        logoutTime: "",
        logoutUserId: "",
        maritalStatus: "",
        militaryStatus: "",
        name: "",
        nation: "",
        phone: "",
        photo: "",
        politicsStatus: "",
        sex: ""
      },
      family: [],
      familyDialog: false,
      familyInfo: {},
      writeoffDialog: false,
      writeInfo: {
        id: "",
        logoutReason: "",
        logoutDescription: "",
        fileStatus: "1"
      },
      birthday: "",
      rules: {
        name: [{required: true, message: "请输入姓名", trigger: "blur"}],
        idNumber: [
          {required: true, validator: IdNumberPass, trigger: "blur"}
        ],
        sex: [{required: true, message: "请选择性别", trigger: "blur"}],
        currentAreaId: [{message: "请选择现住址", required: true, trigger: "blur"},
          {
            validator: (r, v, cb) => {
              if (/.+0{3}$/.test(v)) {
                cb("现住址必须选到村级")
              } else cb()
            }, trigger: "blur"
          }],
        currentAddress: [{message: "请选择现住址详细地址", required: true}],

        householdName: [
          {required: true, message: "请选择是否户主", trigger: "change"}
        ],
        householdRelation: [
          {required: true, message: "请选择与户主关系", trigger: "change"}
        ],
        householdIdNumber: [
          {required: true, validator: IdNumberPass, trigger: "blur"}
        ]
      },
      imgUrl: "",
      fileList: [],
      showEdit1: false,
      showEdit2: false,
      showEdit3: false,
      showEdit4: false,
      disabledLevel: 0
    };
  },
  computed: {
    ...mapState(["user"]),
    showDetail() {
      return !!this.$route.query?.id
    },
    navList() {
      return [
        {name: "本地居民信息", id: "1"},
        {name: "变更记录", id: "2"}
      ]
    },
    tipOps() {
      return this.dict.getDict("residentTipType") || []
    }
  },
  methods: {
    uploadFile(file) {
      const isLt2M = file.file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.warning("头像大小不能超过 2MB!");
        return;
      }
      let formData = new FormData();
      formData.append("file", file.file);
      this.instance.post(`/admin/file/add`, formData, {withCredentials: false})
      .then(res => {
        if (res && res.code == 0) {
          let imgInfo = res.data[0].split(";");
          this.imgUrl = imgInfo[0];
          this.baseInfo.photo = res.data[0];
        }
      });
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    householdRelationChange() {
      this.baseInfo.householdIdNumber = "";
      this.baseInfo.householdRelation = "";
    },
    saveFrom(formName, type) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.saveFromFn(type);
        }
      });
    },
    cancelFn() {
      this.$refs.ruleForm?.resetFields()
      this.$router.push({query: {}});
    },
    submitForm(formName) {
      this.writeInfo.id = this.baseInfo.id;
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.instance.post(`/app/appresident/addOrUpdate`, {
            ...this.writeInfo
          }).then(res => {
            if (res && res.code == 0) {
              this.$message.success("注销成功");
              this.writeoffDialog = false;
              this.$router.push({query: {}});
            }
          });
        } else {
          return false;
        }
      });
    },
    familyInit() {
      Object.keys(this.writeInfo).forEach(e => {
        this.writeInfo[e] = "";
      });
      this.$refs.writeInfo.resetFields();
    },
    saveFromFn(type) {
      let {currentHouseList, householdHouseList, tips} = this.baseInfo
      this.instance.post(`/app/appresident/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("保存成功");
          if (type) {
            this.$router.push({query: {}})
          } else {
            this.editInit();
          }
        }
      });
    },
    editInit() {
      this.showEdit1 = false;
      this.showEdit2 = false;
      this.showEdit3 = false;
      this.showEdit4 = false;
      this.searchDetail(this.baseInfo.id);
    },
    searchDetail(id, type) {
      this.instance.post(`/app/appresident/detail`, null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          let {currentHouseList, householdHouseList, tips} = res.data.resident
          this.baseInfo = {
            ...res.data.resident,
            currentHouseList: currentHouseList?.split("|"),
            householdHouseList: householdHouseList?.split("|"),
            tips: tips ? tips.split("|") : [],
          };
          this.family = res.data.family;
          this.IdCard(this.baseInfo.idNumber);
          if (type == "family") {
            this.familyDialog = false;
          }
        }
      });
    },
    showFamily(row) {
      this.familyInfo = row;
      if (this.familyInfo.photo) {
        this.familyInfo.imgUrl = this.familyInfo.photo.split(";")[0];
      } else {
        this.familyInfo.imgUrl = "";
      }
      this.familyDialog = true;
    },
    beforeWriteOff() {
      this.writeoffDialog = true;
    },
    handleDelete() {
      this.$confirm("删掉档案后，\n" +
          `<span class="username">${this.baseInfo.name}</span>` +
          "        的历史相关信息可能无法追溯查看，是否确定删除该人员档案？", {
        title: "档案删除"
      }).then(() => {
        this.instance.post(`/app/appresident/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) {
        let arr = [];
        //获取出生日期
        let birth =
            UUserCard.substring(6, 10) +
            "-" +
            UUserCard.substring(10, 12) +
            "-" +
            UUserCard.substring(12, 14) +
            " 00:00:00";
        arr.push(birth);

        if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {
          //男
          arr.push("1");
        } else {
          //女
          arr.push("0");
        }
        //获取年龄
        const myDate = new Date();
        const month = myDate.getMonth() + 1;
        const day = myDate.getDate();
        let age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
        if (
            UUserCard.substring(10, 12) < month ||
            (UUserCard.substring(10, 12) == month &&
                UUserCard.substring(12, 14) <= day)
        ) {
          age++;
        }
        arr.push(age);
        this.baseInfo.sex = arr[1];
        this.baseInfo.age = arr[2];
        this.birthday = arr[0];
      }
    }
  },
  created() {
    if (!this.showDetail) {
      this.showEdit1 = true;
      this.showEdit2 = true;
      this.showEdit3 = true;
      this.showEdit4 = true;
      this.$nextTick(() => this.$refs.ruleForm?.resetFields())
    } else {
      this.searchDetail(this.$route.query.id);
    }
  }
};
</script>
<style lang="scss" scoped>
.addAborigines {
  height: 100%;
  font-size: 14px;

  .el-form-item {
    margin-bottom: 10px;

    .el-form-item {
      margin-top: 10px;
    }

    .el-cascader, .el-select, .el-date-editor {
      width: 100%;
    }
  }

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