dvcp_v2_webapp/project/xiushan/components/enterpriseDialog.vue

<template>
  <section class="enterpriseDialog">
    <div class="topPanel">
      <div class="top-left" v-html="txtLogo"/>
      <div class="top-right">
        <div class="top-right__top">
          <h2 v-text="info.name "/>
          <el-button type="primary" icon="iconfont iconDownload" @click="handleDownload(info.id)">下载报告</el-button>
        </div>
        <div class="top-right__bottom">
          <ai-wrapper
              label-width="130px">
            <ai-info-item label="法人姓名："><span style="color: #1890FF;">{{ info.legalPersonName }}</span></ai-info-item>
            <ai-info-item label="企业类型：" :value="dict.getLabel('enterpriseType', info.enterpriseType)"></ai-info-item>
            <ai-info-item label="统一社会信用代码：" :value="info.idNumber"></ai-info-item>
            <ai-info-item label="地址：" isLine :value="info.areaName + info.address"></ai-info-item>
            <ai-info-item label="经营范围：" isLine :value="info.businessScope"></ai-info-item>
          </ai-wrapper>
        </div>
      </div>
    </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">
          <div slot="empty">截止{{ $moment().format('YYYY-MM-DD') }},尚未公开信息</div>
        </ai-table>
      </el-tab-pane>
    </el-tabs>
  </section>
</template>

<script>

export default {
  name: "enterpriseDialog",
  computed: {
    txtLogo() {
      return this.info.name?.substring(0, 4)?.replace(/(.{2})(.{2})/, '$1<br/>$2') || ""
    }
  },
  data() {
    return {
      info: {},
      tabs: [
        {
          label: "行政许可", prop: "administrativeLicensingList", colConfigs: [
            {prop: 'input04', label: '许可证编号'},
            {prop: 'date05', label: '发证时间'},
            {prop: 'input00', label: '许可机关'},
            {prop: 'textarea03', label: '许可内容'},
            {prop: 'create_time', label: '数据更新时间'},
          ]
        },
        {
          label: "行政处罚", prop: "administrativeSanctionList", colConfigs: [
            {prop: "textarea04", label: "违法事项"},
            {prop: "input00", label: "处罚机关"},
            {prop: "date03", label: "处罚时间"},
            {prop: "create_time", label: "数据更新时间"},
          ]
        },
        {
          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: "数据更新时间"},
          ]
        },
      ],
      desConfigs: [
        {prop: "creditRating", label: "信用评级"},
        {prop: "creditRatingScore", label: "信用评分"},
        {prop: "creditRatingDesc", label: "评级释义", span: 2},
        {prop: "administrativeLicensing", label: "行政许可信息"},
        {prop: "administrativeSanction", label: "行政处罚信息"},
        {prop: "discredit", label: "失信被执行人"},
        {prop: "enterpriseLevel", label: "企业等级"},
        {prop: "maritalStatus", label: "是否已婚"},
        {prop: "arrearage", label: "欠缴水电燃气费"},
        {prop: "enterpriseAuth", label: "企业认证信息", span: 2},
      ],
    }
  },
  created() {
    this.getCompanyInfo()
  },
  methods: {
    getCompanyInfo() {
      let {enterpriseId: id} = this
      this.instance.post(`/app/appcreditreport/info`, null, {
        params: {id, type: 1}
      }).then(res => {
        if (res?.data) {
          this.info = res.data
        }
      })
    },
    handleDownload(id) {
      this.$confirm("是否要下载报告?").then(() => {
        this.instance.post("/app/appcreditreport/downloadCreditReport", null, {
          params: {id, type: 1}
        }).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,
    enterpriseId: {required: true, default: ""}
  }
}
</script>

<style lang="scss" scoped>
.enterpriseDialog {
  .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: 31px;
      padding: 12px 16px;
      background: #8CA3CD;
      color: #FFFFFF;
      font-size: 22px;
      line-height: 30px;
      letter-spacing: 4px;
      border-radius: 8px;
      height: fit-content;
    }

    .top-right {
      flex: 1;

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

        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;
      }
    }
  }

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