dvcp_v2_webapp/packages/meta/AppResident/auditDetail.vue

<template>
  <section class="auditDetail">
    <ai-detail>
      <ai-title slot="title" title="详情" isShowBack @onBackClick="$router.push({query:{}})" isShowBottomBorder/>
      <template #content>
          <ai-card title="基本信息">
            <div slot="content">
              <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="联络信息">
            <div slot="content" 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="户籍信息">
            <div slot="content" 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="家庭成员">
            <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>
                  <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 type="text" title="查看详情" class="dict-list-operation" @click="showFamily(scope.row)">详情</el-button>
                  </template>
                </el-table-column>
                <div slot="empty" class="no-data" style="height:160px;"/>
              </el-table>
            </div>
          </ai-card>
          <ai-card title="处理结果" v-if="baseInfo.auditStatus > '0'">
            <div slot="content" 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">{{ baseInfo.auditStatus === '1' ? '通过' : '拒绝'  }}</span>
                  </div>
                </div>
              </div>
              <div class="detail-info">
                <div class="info fill">
                  <span class="label">审核意见：</span>
                  <span class="value">{{ baseInfo.auditOpinion || '-' }}</span>
                </div>
              </div>
            </div>
          </ai-card>
          <ai-dialog
            :visible.sync="isShow"
            width="800px"
            @close="onClose"
            title="事件审核"
            @onConfirm="onConfirm">
            <el-form class="ai-form" label-width="120px" :model="form" ref="form">
              <el-form-item label="是否通过审核" prop="pass" style="width: 100%;" :rules="[{ required: true, message: '请选择是否通过审核' }]">
                <el-radio-group v-model="form.pass" @change="onStatusChange">
                  <el-radio label="0">否</el-radio>
                  <el-radio label="1">是</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="审核意见" prop="opinion" style="width: 100%;" :rules="[{ required: form.pass === '0', message: '请输入审核意见' }]">
                <el-input type="textarea" :rows="5" :maxlength="200" v-model="form.opinion" clearable placeholder="请输入审核意见" show-word-limit></el-input>
              </el-form-item>
            </el-form>
          </ai-dialog>
      </template>
      <template #footer >
        <el-button @click="cancelFn()">取消</el-button>
        <el-button type="primary" @click="isShow = true" v-if="baseInfo.auditStatus === '0'">审核</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>
  </section>
</template>
<script>
import {mapState} from "vuex";

export default {
  name: "audtiDetail",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    detail: Object,
    active: String
  },
  data() {
    return {
      buildingCascader: true,
      houseCascader: true,
      navId: 0,
      form: {
        opinion: '',
        pass: ''
      },
      isShow: false,
      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: "",
      imgUrl: "",
      fileList: [],
      showEdit1: false,
      showEdit2: false,
      showEdit3: false,
      showEdit4: false,
      disabledLevel: 0
    };
  },
  computed: {
    ...mapState(["user"]),
    showDetail() {
      return !!this.$route.query?.id
    },
    tipOps() {
      return this.dict.getDict("residentTipType") || []
    }
  },
  methods: {
    householdRelationChange() {
      this.baseInfo.householdIdNumber = "";
      this.baseInfo.householdRelation = "";
    },

    onConfirm () {
      this.$refs.form.validate(v => {
        if (v) {
          this.instance.post('/app/appresident/examine', null, {
            params: {
              ...this.form,
              id: this.$route.query.id
            }
          }).then(res => {
            if (res?.code == 0) {
              this.isShow = false
              this.searchDetail(this.$route.query.id)
              this.$message.success('审核成功!')
            }
          })
        }
      })
    },

    onStatusChange () {
      this.$refs.form.clearValidate()
    },

    onClose () {
      this.form.pass = ''
      this.form.opinion = ''
      this.id = ''
    },

    cancelFn() {
      this.$refs.ruleForm?.resetFields()
      this.$router.push({query: {}});
    },

    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;
    },
    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() {
    this.searchDetail(this.$route.query.id);
  }
};
</script>
<style lang="scss" scoped>
.auditDetail {
  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>