dvcp_v2_webapp/project/xiushan/components/personCreditReport.vue

<template>
  <section class="personCreditReport">
    <el-link v-if="hasIdNumber" type="primary" @click.stop="handleShow">个人产权</el-link>
    <el-dialog :visible.sync="dialog" title="个人产权信息" width="1200px" customFooter>
      <div class="top">
        <div class="top-left">
          <el-image v-if="info.avatar"/>
          <div v-else v-html="txtLogo"/>
        </div>
        <div class="top-right">
          <div class="top-right__top">
            <h2 v-text="person.name"/>
          </div>
          <div class="top-right__bottom">
            <ai-wrapper
                label-width="130px">
              <ai-info-item label="手机号码：" :value="person.phone"/>
              <ai-info-item label="身份证号：" :value="person.idNumber"/>
            </ai-wrapper>
          </div>
        </div>
      </div>
      <el-tabs type="border-card" stretch>
        <el-tab-pane label="企业信息">
          <ai-table :dict="dict" :tableData="info.enterpriseList" :col-configs="colConfigs1"
                    :isShowPagination="false" border tableSize="small"/>
        </el-tab-pane>
        <el-tab-pane label="宅基地信息" lazy>
          <ai-table :dict="dict" :tableData="info.homesteadInfoList" :col-configs="colConfigs2"
                    :isShowPagination="false" border tableSize="small"/>
        </el-tab-pane>
        <el-tab-pane label="集体经济组织股权" lazy>
          <ai-table :dict="dict" :tableData="info.shareholderList" :col-configs="colConfigs3"
                    :isShowPagination="false" border tableSize="small"/>
        </el-tab-pane>
        <el-tab-pane label="土地流转经营" lazy>
          <ai-table :dict="dict" :tableData="info.landCirculateInfoList" :col-configs="colConfigs4"
                    :isShowPagination="false" border tableSize="small"/>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <el-button @click.stop="dialog=false">关闭</el-button>
      </template>
    </el-dialog>
  </section>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "personCreditReport",
  computed: {
    ...mapState(['user']),
    isFinanceUser() {
      return !!this.user.financeUser?.id
    },
    txtLogo() {
      return this.person.name?.substring(0, 1) || ""
    },
    hasIdNumber() {
      return !!this.person.idNumber
    }
  },
  data() {
    return {
      dialog: false,
      info: {},
      currIndex: 0,
      colConfigs1: [
        {prop: 'enterpriseName', label: '企业名称'},
        {prop: 'enterpriseType', label: '企业类型', dict: "enterpriseType", align: 'center'},
        {prop: 'areaName', label: '所属区域', align: 'center'},
        {prop: 'businessScope', label: '经营范围', align: 'center'},
        {prop: 'operationPeriod', label: '营业期限', align: 'center'},
      ],
      colConfigs2: [
        {prop: 'usePerson', label: '使用人'},
        {prop: 'houseNumber', label: '家庭人口', align: 'center'},
        {prop: 'areaName', label: '所在地区', align: 'center'},
        {prop: 'landArea', label: '土地面积/㎡', align: 'center'},
        {prop: 'landOwnership', label: '土地所有权', align: 'center'},
      ],
      colConfigs3: [
        {prop: 'organizationName', label: '集体经济组织名称'},
        {prop: 'areaName', align: 'center', label: '所在地区'},
        {prop: 'name', align: 'center', label: '持股人'},
        {prop: 'shareholdingNumber', align: 'center', label: '股权总数'},
        {prop: 'shareholdingAmount', align: 'center', label: '股金总额'}
      ],
      colConfigs4: [
        {prop: 'landOutflowName', label: '土地流出方'},
        {prop: 'landArea', align: 'center', label: '土地面积/㎡'},
        {prop: 'landUndertakeName', align: 'center', label: '土地承接方'},
        {prop: 'circulateType', align: 'center', label: '流转形式'},
        {prop: 'startDate', align: 'center', label: '开始日期'},
      ],
    }
  },
  created() {
    this.dict.load("enterpriseType")
  },
  methods: {
    getPCR() {
      let {idNumber, createUserId: id} = this.person
      return this.instance.post(`/appportaluser/queryPersonPropertyRight`, null, {
        params: {idNumber, id}
      }).then(res => {
        if (res?.data) {
          return this.info = res.data
        }
      })
    },
    handleShow() {
      this.getPCR().then(() => this.dialog = true)
    }
  },
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    person: {required: true, default: () => ({})}
  }
}
</script>

<style lang="scss" scoped>
.personCreditReport {
  margin-left: 16px;

  .table-item {
    h2 {
      margin-bottom: 16px;
      color: #333333;
      font-size: 18px;
      font-weight: 600;
    }
  }

  .top {
    display: flex;
    margin-bottom: 20px;
    padding: 34px 30px 16px;
    border: 1px solid #EEEEEE;
    border-radius: 4px;

    .top-left {
      margin-right: 16px;
      padding: 12px 16px;
      background: #8CA3CD;
      color: #FFFFFF;
      font-size: 22px;
      line-height: 30px;
      border-radius: 8px;
      height: fit-content;
    }

    .top-right {
      flex: 1;

      .top-right__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;

        h2 {
          color: #333333;
          font-size: 22px;
        }

        .right {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 97px;
          height: 32px;
          background: #E8F4FF;
          border: 1px solid #A3D3FF;
          border-radius: 3px;
          color: #1890FF;
          font-size: 13px;
          cursor: pointer;

          &:hover {
            opacity: 0.6;
          }
        }
      }

      .top-right__bottom {
        padding: 16px 10px 10px 0;
        background: #F6FBFF;
      }
    }
  }

  ::v-deep.el-tabs {
    .el-tabs__header {
      padding: unset;

      .el-tabs__item {
        background: #f3f6f9;
        border-bottom-color: #ddd;
        margin-left: 0;

        &.is-active {
          background: #fff;
          border-bottom-color: transparent;
        }
      }
    }
  }
}
</style>