dvcp_v2_webapp/project/xiushan/components/personCreditReport.vue

<template>
  <section class="personCreditReport">
    <div class="topPanel">
      <div class="top-left">
        <el-image v-if="info.avatar"/>
        <div v-else v-html="txtLogo"/>
      </div>
      <ai-wrapper class="fill" label-width="130px">
        <ai-info-item label="姓名：" :value="info.name"/>
        <ai-info-item label="手机号码：" :value="info.phone"/>
        <ai-info-item label="性别：" :value="info.sex"/>
        <ai-info-item label="身份证号：" :value="info.idNumber"/>
        <ai-info-item label="年龄：" :value="info.age"/>
        <ai-info-item label="本地户籍：" :value="info.localRegistered"/>
        <ai-info-item label="结婚状态：" :value="info.maritalStatus"/>
        <ai-info-item label="所在地区：" :value="info.areaName" isLine/>
      </ai-wrapper>
      <el-button type="primary" icon="iconfont iconDownload" @click="handleDownload(info.id)">下载报告</el-button>
    </div>
    <el-tabs type="border-card" stretch>
      <el-tab-pane label="基本信息">
        <el-descriptions :column="2" border size="small" :labelStyle="{width:'200px'}">
          <el-descriptions-item v-for="des in desConfigs" :key="des.prop" v-bind="des">{{ info[des.prop] }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane v-for="(tab,i) in tabs" :label="tab.label" :key="i" lazy>
        <ai-table :dict="dict" :tableData="info[tab.prop]" :col-configs="tab.colConfigs" :isShowPagination="false" border tableSize="small">
          <el-table-column slot="detail" label="操作" align="center" width="100px">
            <template slot-scope="{row}">
              <el-button type="text" @click="$router.push({hash:'#company',query:{id:row.id}})">详情</el-button>
            </template>
          </el-table-column>
          <div slot="empty">截止{{ $moment().format('YYYY-MM-DD') }},尚未公开信息</div>
        </ai-table>
      </el-tab-pane>
    </el-tabs>
  </section>
</template>

<script>

export default {
  name: "personCreditReport",
  computed: {
    txtLogo() {
      return this.info.name?.substring(0, 1) || ""
    },
    hasIdNumber() {
      return !!this.info.idNumber
    }
  },
  data() {
    return {
      info: {},
      tabs: [
        {
          label: "企业信息", prop: "unitList", colConfigs: [
            {prop: 'enterpriseName', label: '企业名称'},
            {prop: 'idNumber', label: '统一社会信用代码', align: 'center'},
            {prop: 'enterpriseType', label: '企业类型', dict: "enterpriseType", align: 'center'},
            {slot: 'detail'}
          ]
        },
        {
          label: "失信信息", prop: "discreditList", colConfigs: [
            {prop: "input00", label: "姓名/名称"},
            {prop: "radio01", label: "类型"},
            {prop: "textarea04", label: "失信行为情形"},
            {prop: "input03", label: "执行法院"},
            {prop: "create_time", label: "数据更新时间"},
          ]
        },
        {
          label: "缴费信息", prop: "arrearageList", colConfigs: [
            {prop: "input00", label: "缴费年月"},
            {prop: "radio04", label: "缴费类型"},
            {prop: "radio05", label: "缴费情况"},
            {prop: "input06", label: "收款单位"},
            {prop: "create_time", label: "数据更新时间"},
          ]
        },
        {
          label: "婚姻登记", prop: "marriageList", colConfigs: [
            {prop: "input05", label: "登记年度"},
            {prop: "input00", label: "姓名"},
            {prop: "input01", label: "证件号码"},
            {prop: "input02", label: "姓名"},
            {prop: "input03", label: "证件号码"},
            {prop: "radio04", label: "类别"},
            {prop: "create_time", label: "数据更新时间"},
          ]
        },
      ],
      desConfigs: [
        {prop: "creditRating", label: "信用评级"},
        {prop: "creditRatingScore", label: "信用评分"},
        {prop: "creditRatingDesc", label: "评级释义", span: 2},
        {prop: "perCapitaIncome", label: "家庭人均收入"},
        {prop: "medicalInsurance", label: "全员参加医保"},
        {prop: "ridOfPoverty", label: "脱贫户"},
        {prop: "discredit", label: "失信被执行人"},
        {prop: "arrearage", label: "欠缴水电燃气费"},
        {prop: "administrativeSanction", label: "行政处罚信息"},
        {prop: "sourceOfIncome", label: "家庭收入来源", span: 2},
        {prop: "familyDevelopmentStatus", label: "家庭发展现状", span: 2},
      ]
    }
  },
  created() {
    this.dict.load("enterpriseType", "landCirculateType")
    this.getPCR()
  },
  methods: {
    getPCR() {
      let {personId: id} = this
      return this.instance.post(`/app/appcreditreport/info`, null, {
        params: {id, type: 0}
      }).then(res => {
        if (res?.data) {
          this.info = res.data
        }
      })
    },
    handleDownload(id) {
      this.$confirm("是否要下载报告?").then(() => {
        this.instance.post("/app/appcreditreport/downloadCreditReport", null, {
          params: {id, type: 0}
        }).then(res => {
          if (res?.data) {
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = res.data
            link.setAttribute('download', this.info.name + '信息报告.pdf')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }
        })
      }).catch(() => 0)

    }
  },
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    personId: {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;
    }
  }

  .topPanel {
    display: flex;
    margin-bottom: 20px;
    padding: 34px 30px 16px;
    border: 1px solid #EEEEEE;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);

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

  }

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