dvcp_v2_webapp/packages/meta/AppResident/AppResident.vue

<template>
  <section class="AppResident">
    <ai-list v-if="!showDetail" isTabs>
      <ai-title slot="title" title="居民档案" :instance="instance" :hideLevel="hideLevel-1" isShowArea
                v-model="areaId"/>
      <template #tabs>
        <el-tabs v-model="activeName">
          <el-tab-pane v-for="op in tabs" :key="op.value" :name="op.value" :label="op.label">
            <component v-if="op.value==activeName" :is="op.comp" :areaId="areaId" :active="activeName"
                       :instance="instance" :dict="dict" :permissions="permissions"/>
          </el-tab-pane>
        </el-tabs>
      </template>
    </ai-list>
    <component v-else :is="detailComponent" :instance="instance" :dict="dict" :permissions="permissions"
               :name="dict.getLabel('residentType',activeName)"/>
  </section>
</template>
<script>
import {mapState} from "vuex";
import ResidentList from "./residentList";
import ResidentSta from "./residentSta";
import auditList from "./auditList";
import auditDetail from "./auditDetail";
import ResidentDetail from "./residentDetail";

export default {
  name: "AppResident",
  label: "居民档案",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
  },
  provide() {
    return {
      resident: this
    }
  },
  components: {ResidentDetail, ResidentSta, ResidentList, auditList, auditDetail},
  computed: {
    ...mapState(["user"]),
    hideLevel() {
      return this.user.info.areaList?.length || 0
    },
    showDetail() {
      this.activeName = this.activeName || this.$route.query?.type || 0
      return !!this.$route.query?.type || !!this.$route.query?.id
    },
    detailComponent() {
      return this.tabs.find(e => e.value == this.activeName)?.detail || ""
    }
  },
  data() {
    return {
      areaId: '',
      activeName: "0",
      tabs: []
    }
  },
  methods: {
    initTabs() {
      this.tabs = [
        ...this.dict.getDict('residentType').map(e => ({
          label: e.dictName,
          value: e.dictValue,
          comp: ResidentList,
          detail: ResidentDetail
        })),
        {label: "居民统计", value: "3", comp: ResidentSta},
        {label: "居民档案审核", value: "4", comp: auditList, detail: auditDetail, permit: "app_appresident_examine"}
      ].filter(e => !e.permit || this.permissions(e.permit))
    }
  },
  created() {
    this.activeName = this.$route.query?.type
    this.areaId = this.$copy(this.user.info.areaId)
    this.dict.load('residentType', "sex", "faithType", "fileStatus", "legality", "education", "maritalStatus",
        "politicsStatus", "householdName", "nation", "liveReason", "certificateType", "job", "militaryStatus",
        "householdRelation", "logoutReason", "nation", "registerStatus", "residentTipType", "liveCategory",
        "livePeriod", "language", "nationality", "importTips").then(() => this.initTabs());
  },
}
</script>
<style lang="scss" scoped>
.AppResident {
  width: 100%;
  height: 100%;
  background: rgba(243, 246, 249, 1);

  .iconfont {
    cursor: pointer;
  }

  .tab-content-box {
    padding: 16px 0;
    width: 100%;
    box-sizing: border-box;
    background-color: #f3f6f9;
    overflow-y: auto;
  }

  .list {
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 4px;
    border: solid 1px #d8e0e8;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;

    .searchBar {
      padding: 8px 0;

      .el-col {
        margin-bottom: 8px;

        span {
          display: inline-block;
          width: 100px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          font-size: 14px;
          background-color: #f5f5f5;
          border-radius: 2px;
          border: solid 1px #d0d4dc;
          border-right: none;
          margin: 0;
        }
      }
    }

    .addClass {
      height: 64px;
    }
  }

  .dataStatistic {
    width: 100%;
    margin-top: 16px;
    padding: 0 16px 16px 16px;
    box-sizing: border-box;

    .above {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .data-item {
        width: 32%;
        height: 380px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        padding: 16px;
        box-sizing: border-box;
        position: relative;

        p {
          position: absolute;
          right: 16px;
          top: 16px;
          font-size: 14px;
          font-weight: bold;

          span:nth-of-type(1) {
            color: #999999;
          }

          span:nth-of-type(2) {
            color: #333333;
          }
        }
      }
    }
  }
}
</style>