shuili_manager/jwtech-pc-page/src/views/enterpriseInformation/components/descriptionsEnterpriseTable.vue

<template>
  <div class="descriptions-table">
    <div class="title-wrap">
      <div class="letf">
        <span>{{ firstName }}</span>
      </div>
      <div class="right">
        <div class="top">
          <h2 class="name">{{ enterpriseObj.enterpriseName }}</h2>
          <span class="status">存续</span>
        </div>
        <p class="code">
          统一社会信用代码：{{ enterpriseObj.unifiedSocialCreditCode }}
        </p>
      </div>
    </div>
    <!-- 重要提示 -->
    <div class="tips">
      <div class="tips-title">重要提示：</div>
      <div class="tips-content">
        本平台信用信息来源于基本信息、信用承诺、资质信息、人员信息、业绩信息和其他信息等由企事业单位自行申报，其真实性、有效性由企事业单位负责，企事业单位对所填报的信息客任负责，不得含有虚假或违规内容。
      </div>
    </div>

    <div class="table-wrap">
      <div class="table-title">
        <span>
          基本信息
        </span>
      </div>
      <el-descriptions
        class="margin-top"
        :column="2"
        border
        :content-style="rowCenter"
        :label-style="labelRowCenter"
      >
        <el-descriptions-item
          :label="item.label"
          v-for="(item, index) in descrData"
          :key="(item, index)"
        >
          {{ item.val }}
        </el-descriptions-item>
        <el-descriptions-item label="更新时间" span="2">
          {{ updateTime }}
        </el-descriptions-item>
        <el-descriptions-item label="经营范围" span="2">
          {{ businessScope }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>
<script>
import { enterpriseInfo } from "@/api/enterpriseInformation";
import { getGuangDong } from "@/api/creditStatistics";
export default {
  data() {
    return {
      rowCenter: {
        borderColor: "#DADCE3"
      },
      labelRowCenter: {
        borderColor: "#DADCE3"
      },
      enterpriseId: "",
      enterpriseObj: {},
      firstName: "",
      descrData: [
        // {
        //   label: "企业名称",
        //   code: "enterpriseName",
        //   val: ""
        // },
        {
          label: "投资组成",
          code: "investmentComposition",
          val: ""
        },
        {
          label: "法定代表人",
          code: "legalRepresentative",
          val: ""
        },
        {
          label: "成立日期",
          code: "establishmentDate",
          val: ""
        },
        // {
        //   label: "统一社会信用代码",
        //   code: "unifiedSocialCreditCode",
        //   val: ""
        // },
        {
          label: "登记机关",
          code: "creditCodeIssuingAuthority",
          val: ""
        },
        {
          label: "注册地区",
          code: "adcd",
          val: ""
        },
        {
          label: "注册地址",
          code: "registeredAddress",
          val: ""
        },
        {
          label: "注册资本（万元）",
          code: "registeredCapital",
          val: ""
        },
        {
          label: "实缴注册资本（万元）",
          code: "paidRegisteredCapital",
          val: ""
        }
      ],
      updateTime: "",
      businessScope: "",
      areaList: []
    };
  },
  mounted() {
    this.enterpriseId = this.$route.query.enterpriseId;
    this.getArea();
  },
  methods: {
    getDetail() {
      enterpriseInfo(this.enterpriseId).then(res => {
        this.enterpriseObj = res.data.data;
        this.firstName = this.enterpriseObj.enterpriseName.trim().split("")[0];
        for (let key in this.enterpriseObj) {
          this.descrData.forEach(item => {
            if (key == item.code && item.code == "adcd") {
              item.val = this.getadcd(this.enterpriseObj[key]) || "-";
            } else if (key == item.code) {
              item.val = this.enterpriseObj[key] || "-";
            }
          });
        }
        this.updateTime = this.enterpriseObj.updateTime || "-";
        this.businessScope = this.enterpriseObj.businessScope || "-";
      });
    },
    getArea() {
      getGuangDong().then(res => {
        this.areaList = res.data.data;
        this.getDetail();
      });
    },
    getadcd(row) {
      let adcdText = "";
      let adcdCode = row.slice(0, 4) + "00";
      this.areaList.forEach(item => {
        if (item.xzqhdm == adcdCode) {
          adcdText = item.name;
        }
      });
      if (adcdText == "") {
        adcdText = "省外";
      }
      return adcdText;
    }
  }
};
</script>
<style lang="less" scoped>
.descriptions-table {
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  .title-wrap {
    display: flex;

    .letf {
      margin-right: 20px;
      span {
        display: block;
        width: 70px;
        height: 70px;
        background: #f4faff;
        border-radius: 8px;
        border: 1px solid rgba(0, 94, 183, 0.3);
        text-align: center;
        line-height: 70px;

        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 34px;
        color: #005eb7;
        font-style: normal;
      }
    }

    .right {
      padding: 10px 0;
      .top {
        display: flex;
        h2 {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 24px;
          color: #333333;
          line-height: 24px;
          text-align: left;
          font-style: normal;
          margin-bottom: 12px;
        }

        .status {
          margin-left: 10px;
          width: 40px;
          height: 24px;
          background: #f3fff9;
          border-radius: 4px;
          border: 1px solid rgba(0, 197, 96, 0.5);
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #00c560;
          text-align: center;
          line-height: 24px;
          font-style: normal;
        }
      }

      .code {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        line-height: 14px;
        text-align: left;
        font-style: normal;
      }
    }
  }

  .tips {
    margin-top: 20px;
    padding: 20px;
    background: #f8fbfe;
    border: 1px solid #eff5fb;

    .tips-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 16px;
      color: #005eb7;
      line-height: 16px;
      text-align: left;
      font-style: normal;
    }

    .tips-content {
      margin-top: 10px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      line-height: 20px;
      text-align: left;
      font-style: normal;
    }
  }
  .table-wrap {
    margin-top: 20px;

    .table-title {
      height: 47px;
      line-height: 47px;
      background-color: #f6f6f6;

      span {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        font-style: normal;

        &::before {
          content: "";
          display: inline-block;
          width: 3px;
          height: 16px;
          background: #005eb7;
          margin-right: 10px;
          vertical-align: middle;
        }
      }
    }
  }

  /deep/.el-descriptions {
    .el-descriptions-item__cell {
      padding: 11px 10px;
      font-size: 16px;
    }

    .el-descriptions-item__label {
      background: #ebf4fe;
      width: 240px;
      font-weight: 600;
      color: #005eb7;
      padding-left: 21px;
    }
  }
}
</style>