From 58720430400337c0722e9387579120de0d570b1f Mon Sep 17 00:00:00 2001
From: gxwebsoft <170083662@qq.com>
Date: Wed, 17 Dec 2025 10:57:38 +0800
Subject: [PATCH] =?UTF-8?q?feat(credit):=20=E9=87=8D=E6=9E=84=E4=BC=81?=
 =?UTF-8?q?=E4=B8=9A=E4=BF=A1=E6=81=AF=E5=B1=95=E7=A4=BA=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=B8=BA=E5=8F=AA=E8=AF=BB=E8=AF=A6=E6=83=85=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将原有的表单编辑模式改为只读的描述列表展示
- 新增多个企业相关字段的展示支持
- 集成Tabs组件展示企业相关的多维度信息
- 实现企业关联信息的异步加载与展示
- 添加数据格式化处理函数提升展示效果
- 移除原有表单提交相关逻辑和验证规则
- 新增企业相关信息接口调用方法
- 优化组件结构与数据流管理逻辑
---
 src/api/credit/creditCompany/index.ts         |  19 +
 .../components/creditCompanyInfo.vue          | 816 +++++++-----------
 2 files changed, 348 insertions(+), 487 deletions(-)

diff --git a/src/api/credit/creditCompany/index.ts b/src/api/credit/creditCompany/index.ts
index 5d3306e..a51eec1 100644
--- a/src/api/credit/creditCompany/index.ts
+++ b/src/api/credit/creditCompany/index.ts
@@ -124,3 +124,22 @@ export async function importCreditCompany(file: File) {
   }
   return Promise.reject(new Error(res.data.message));
 }
+
+/**
+ * 根据企业匹配名称查询关联信息
+ */
+export async function getCompanyRelatedInfo(params: {
+  type: string;
+  keywords: string;
+}) {
+  const res = await request.get<ApiResult<Record<string, any>[]>>(
+    '/credit/credit-company/related',
+    {
+      params
+    }
+  );
+  if (res.data.code === 0) {
+    return res.data.data ?? [];
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/src/views/credit/creditCompany/components/creditCompanyInfo.vue b/src/views/credit/creditCompany/components/creditCompanyInfo.vue
index c57233f..cf2f720 100644
--- a/src/views/credit/creditCompany/components/creditCompanyInfo.vue
+++ b/src/views/credit/creditCompany/components/creditCompanyInfo.vue
@@ -8,442 +8,205 @@
     :title="data?.name"
     :body-style="{ paddingBottom: '28px' }"
     @update:visible="updateVisible"
-    @ok="save"
   >
-    <a-form
-      ref="formRef"
-      :model="form"
-      :rules="rules"
-      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
-      :wrapper-col="
-        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
-      "
+    <a-descriptions
+      :column="descriptionColumns"
+      size="small"
+      bordered
+      class="credit-company-descriptions"
     >
-      <a-form-item label="原文件导入名称" name="name">
-        <a-input
-          allow-clear
-          placeholder="请输入原文件导入名称"
-          v-model:value="form.name"
-        />
-      </a-form-item>
-      <a-form-item label="系统匹配企业名称" name="matchName">
-        <a-input
-          allow-clear
-          placeholder="请输入系统匹配企业名称"
-          v-model:value="form.matchName"
-        />
-      </a-form-item>
-      <a-form-item label="统一社会信用代码" name="code">
-        <a-input
-          allow-clear
-          placeholder="请输入统一社会信用代码"
-          v-model:value="form.code"
-        />
-      </a-form-item>
-      <!--      <a-form-item label="类型" name="type">-->
-      <!--        <a-input-->
-      <!--          allow-clear-->
-      <!--          placeholder="请输入类型"-->
-      <!--          v-model:value="form.type"-->
-      <!--        />-->
-      <!--      </a-form-item>-->
-      <!--      <a-form-item label="上级id, 0是顶级" name="parentId">-->
-      <!--        <a-input-->
-      <!--          allow-clear-->
-      <!--          placeholder="请输入上级id, 0是顶级"-->
-      <!--          v-model:value="form.parentId"-->
-      <!--        />-->
-      <!--      </a-form-item>-->
-      <a-form-item label="登记状态" name="registrationStatus">
-        <a-input
-          allow-clear
-          placeholder="请输入登记状态"
-          v-model:value="form.registrationStatus"
-        />
-      </a-form-item>
-      <a-form-item label="法定代表人" name="legalPerson">
-        <a-input
-          allow-clear
-          placeholder="请输入法定代表人"
-          v-model:value="form.legalPerson"
-        />
-      </a-form-item>
-      <a-form-item label="注册资本" name="registeredCapital">
-        <a-input
-          allow-clear
-          placeholder="请输入注册资本"
-          v-model:value="form.registeredCapital"
-        />
-      </a-form-item>
-      <a-form-item label="实缴资本" name="paidinCapital">
-        <a-input
-          allow-clear
-          placeholder="请输入实缴资本"
-          v-model:value="form.paidinCapital"
-        />
-      </a-form-item>
-      <a-form-item label="成立日期" name="establishDate">
-        <a-input
-          allow-clear
-          placeholder="请输入成立日期"
-          v-model:value="form.establishDate"
-        />
-      </a-form-item>
-      <a-form-item label="企业地址" name="address">
-        <a-input
-          allow-clear
-          placeholder="请输入企业地址"
-          v-model:value="form.address"
-        />
-      </a-form-item>
-      <a-form-item label="电话" name="tel">
-        <a-input
-          allow-clear
-          placeholder="请输入电话"
-          v-model:value="form.tel"
-        />
-      </a-form-item>
-      <a-form-item label="更多电话" name="moreTel">
-        <a-input
-          allow-clear
-          placeholder="请输入更多电话"
-          v-model:value="form.moreTel"
-        />
-      </a-form-item>
-      <a-form-item label="邮箱" name="email">
-        <a-input
-          allow-clear
-          placeholder="请输入邮箱"
-          v-model:value="form.email"
-        />
-      </a-form-item>
-      <a-form-item label="更多邮箱" name="moreEmail">
-        <a-input
-          allow-clear
-          placeholder="请输入更多邮箱"
-          v-model:value="form.moreEmail"
-        />
-      </a-form-item>
-      <a-form-item label="所在国家" name="country">
-        <a-input
-          allow-clear
-          placeholder="请输入所在国家"
-          v-model:value="form.country"
-        />
-      </a-form-item>
-      <a-form-item label="所属省份" name="province">
-        <a-input
-          allow-clear
-          placeholder="请输入所属省份"
-          v-model:value="form.province"
-        />
-      </a-form-item>
-      <a-form-item label="所属城市" name="city">
-        <a-input
-          allow-clear
-          placeholder="请输入所属城市"
-          v-model:value="form.city"
-        />
-      </a-form-item>
-      <a-form-item label="所属区县" name="region">
-        <a-input
-          allow-clear
-          placeholder="请输入所属区县"
-          v-model:value="form.region"
-        />
-      </a-form-item>
-      <a-form-item label="企业（机构）类型" name="institutionType">
-        <a-input
-          allow-clear
-          placeholder="请输入企业（机构）类型"
-          v-model:value="form.institutionType"
-        />
-      </a-form-item>
-      <a-form-item label="纳税人识别号" name="taxpayerCode">
-        <a-input
-          allow-clear
-          placeholder="请输入纳税人识别号"
-          v-model:value="form.taxpayerCode"
-        />
-      </a-form-item>
-      <a-form-item label="注册号" name="registrationNumber">
-        <a-input
-          allow-clear
-          placeholder="请输入注册号"
-          v-model:value="form.registrationNumber"
-        />
-      </a-form-item>
-      <a-form-item label="组织机构代码" name="organizationalCode">
-        <a-input
-          allow-clear
-          placeholder="请输入组织机构代码"
-          v-model:value="form.organizationalCode"
-        />
-      </a-form-item>
-      <a-form-item label="参保人数" name="numberOfInsuredPersons">
-        <a-input
-          allow-clear
-          placeholder="请输入参保人数"
-          v-model:value="form.numberOfInsuredPersons"
-        />
-      </a-form-item>
-      <a-form-item label="参保人数所属年报" name="annualReport">
-        <a-input
-          allow-clear
-          placeholder="请输入参保人数所属年报"
-          v-model:value="form.annualReport"
-        />
-      </a-form-item>
-      <a-form-item label="营业期限" name="businessTerm">
-        <a-input
-          allow-clear
-          placeholder="请输入营业期限"
-          v-model:value="form.businessTerm"
-        />
-      </a-form-item>
-      <a-form-item
-        label="国标行业门类"
-        name="nationalStandardIndustryCategories"
+      <a-descriptions-item label="原文件导入名称">
+        {{ formatValue(form.name) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="系统匹配企业名称">
+        {{ formatValue(form.matchName) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="统一社会信用代码">
+        {{ formatValue(form.code) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="登记状态">
+        {{ formatValue(form.registrationStatus) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="法定代表人">
+        {{ formatValue(form.legalPerson) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="注册资本">
+        {{ formatValue(form.registeredCapital) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="实缴资本">
+        {{ formatValue(form.paidinCapital) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="成立日期">
+        {{ formatValue(form.establishDate) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="企业地址">
+        {{ formatValue(form.address) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="电话">
+        {{ formatValue(form.tel) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="更多电话">
+        {{ formatValue(form.moreTel) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="邮箱">
+        {{ formatValue(form.email) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="更多邮箱">
+        {{ formatValue(form.moreEmail) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="所在国家">
+        {{ formatValue(form.country) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="所属省份">
+        {{ formatValue(form.province) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="所属城市">
+        {{ formatValue(form.city) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="所属区县">
+        {{ formatValue(form.region) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="企业（机构）类型">
+        {{ formatValue(form.institutionType) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="纳税人识别号">
+        {{ formatValue(form.taxpayerCode) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="注册号">
+        {{ formatValue(form.registrationNumber) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="组织机构代码">
+        {{ formatValue(form.organizationalCode) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="参保人数">
+        {{ formatValue(form.numberOfInsuredPersons) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="参保人数所属年报">
+        {{ formatValue(form.annualReport) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="营业期限">
+        {{ formatValue(form.businessTerm) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="国标行业门类">
+        {{ formatValue(form.nationalStandardIndustryCategories) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="国标行业大类">
+        {{ formatValue(form.nationalStandardIndustryCategories2) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="国标行业中类">
+        {{ formatValue(form.nationalStandardIndustryCategories3) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="国标行业小类">
+        {{ formatValue(form.nationalStandardIndustryCategories4) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="企查查行业门类">
+        {{ formatValue(form.nationalStandardIndustryCategories5) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="企查查行业大类">
+        {{ formatValue(form.nationalStandardIndustryCategories6) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="企查查行业中类">
+        {{ formatValue(form.nationalStandardIndustryCategories7) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="企查查行业小类">
+        {{ formatValue(form.nationalStandardIndustryCategories8) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="企业规模">
+        {{ formatValue(form.companySize) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="曾用名">
+        {{ formatValue(form.formerName) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="英文名">
+        {{ formatValue(form.englishName) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="官网">
+        {{ formatValue(form.domain) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="通信地址">
+        {{ formatValue(form.mailingAddress) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="企业简介">
+        {{ formatValue(form.companyProfile) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="经营范围">
+        {{ formatValue(form.natureOfBusiness) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="登记机关">
+        {{ formatValue(form.registrationAuthority) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="纳税人资质">
+        {{ formatValue(form.taxpayerQualification) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="最新年报年份">
+        {{ formatValue(form.latestAnnualReportYear) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="最新年报营业收入">
+        {{ formatValue(form.latestAnnualReportOnOperatingRevenue) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="企查分">
+        {{ formatValue(form.enterpriseScoreCheck) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="信用等级">
+        {{ formatValue(form.creditRating) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="科创分">
+        {{ formatValue(form.cechnologyScore) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="科创等级">
+        {{ formatValue(form.cechnologyLevel) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="是否小微企业">
+        {{ formatValue(form.smallEnterprise) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="备注">
+        {{ formatValue(form.comments) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="排序">
+        {{ formatValue(form.sortNumber) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="状态">
+        {{ formatStatus(form.status) }}
+      </a-descriptions-item>
+    </a-descriptions>
+    <a-divider style="margin: 16px 0" />
+    <a-tabs
+      v-model:activeKey="activeTab"
+      type="card"
+      class="credit-company-tabs"
+    >
+      <a-tab-pane
+        v-for="tab in tabList"
+        :key="tab.key"
+        :tab="tab.label"
       >
-        <a-input
-          allow-clear
-          placeholder="请输入国标行业门类"
-          v-model:value="form.nationalStandardIndustryCategories"
+        <a-table
+          v-if="tabState[tab.key].columns.length"
+          size="small"
+          :columns="tabState[tab.key].columns"
+          :data-source="tabState[tab.key].data"
+          :loading="tabState[tab.key].loading"
+          :row-key="getRowKey"
+          :scroll="{ x: 'max-content' }"
+          :pagination="false"
         />
-      </a-form-item>
-      <a-form-item
-        label="国标行业大类"
-        name="nationalStandardIndustryCategories2"
-      >
-        <a-input
-          allow-clear
-          placeholder="请输入国标行业大类"
-          v-model:value="form.nationalStandardIndustryCategories2"
+        <a-empty
+          v-else-if="!tabState[tab.key].loading"
+          description="暂无数据"
         />
-      </a-form-item>
-      <a-form-item
-        label="国标行业中类"
-        name="nationalStandardIndustryCategories3"
-      >
-        <a-input
-          allow-clear
-          placeholder="请输入国标行业中类"
-          v-model:value="form.nationalStandardIndustryCategories3"
-        />
-      </a-form-item>
-      <a-form-item
-        label="国标行业小类"
-        name="nationalStandardIndustryCategories4"
-      >
-        <a-input
-          allow-clear
-          placeholder="请输入国标行业小类"
-          v-model:value="form.nationalStandardIndustryCategories4"
-        />
-      </a-form-item>
-      <a-form-item
-        label="企查查行业门类"
-        name="nationalStandardIndustryCategories5"
-      >
-        <a-input
-          allow-clear
-          placeholder="请输入企查查行业门类"
-          v-model:value="form.nationalStandardIndustryCategories5"
-        />
-      </a-form-item>
-      <a-form-item
-        label="企查查行业大类"
-        name="nationalStandardIndustryCategories6"
-      >
-        <a-input
-          allow-clear
-          placeholder="请输入企查查行业大类"
-          v-model:value="form.nationalStandardIndustryCategories6"
-        />
-      </a-form-item>
-      <a-form-item
-        label="企查查行业中类"
-        name="nationalStandardIndustryCategories7"
-      >
-        <a-input
-          allow-clear
-          placeholder="请输入企查查行业中类"
-          v-model:value="form.nationalStandardIndustryCategories7"
-        />
-      </a-form-item>
-      <a-form-item
-        label="企查查行业小类"
-        name="nationalStandardIndustryCategories8"
-      >
-        <a-input
-          allow-clear
-          placeholder="请输入企查查行业小类"
-          v-model:value="form.nationalStandardIndustryCategories8"
-        />
-      </a-form-item>
-      <a-form-item label="企业规模" name="companySize">
-        <a-input
-          allow-clear
-          placeholder="请输入企业规模"
-          v-model:value="form.companySize"
-        />
-      </a-form-item>
-      <a-form-item label="曾用名" name="formerName">
-        <a-input
-          allow-clear
-          placeholder="请输入曾用名"
-          v-model:value="form.formerName"
-        />
-      </a-form-item>
-      <a-form-item label="英文名" name="englishName">
-        <a-input
-          allow-clear
-          placeholder="请输入英文名"
-          v-model:value="form.englishName"
-        />
-      </a-form-item>
-      <a-form-item label="官网" name="domain">
-        <a-input
-          allow-clear
-          placeholder="请输入官网"
-          v-model:value="form.domain"
-        />
-      </a-form-item>
-      <a-form-item label="通信地址" name="mailingAddress">
-        <a-input
-          allow-clear
-          placeholder="请输入通信地址"
-          v-model:value="form.mailingAddress"
-        />
-      </a-form-item>
-      <a-form-item label="企业简介" name="companyProfile">
-        <a-input
-          allow-clear
-          placeholder="请输入企业简介"
-          v-model:value="form.companyProfile"
-        />
-      </a-form-item>
-      <a-form-item label="经营范围" name="natureOfBusiness">
-        <a-input
-          allow-clear
-          placeholder="请输入经营范围"
-          v-model:value="form.natureOfBusiness"
-        />
-      </a-form-item>
-      <a-form-item label="登记机关" name="registrationAuthority">
-        <a-input
-          allow-clear
-          placeholder="请输入登记机关"
-          v-model:value="form.registrationAuthority"
-        />
-      </a-form-item>
-      <a-form-item label="纳税人资质" name="taxpayerQualification">
-        <a-input
-          allow-clear
-          placeholder="请输入纳税人资质"
-          v-model:value="form.taxpayerQualification"
-        />
-      </a-form-item>
-      <a-form-item label="最新年报年份" name="latestAnnualReportYear">
-        <a-input
-          allow-clear
-          placeholder="请输入最新年报年份"
-          v-model:value="form.latestAnnualReportYear"
-        />
-      </a-form-item>
-      <a-form-item
-        label="最新年报营业收入"
-        name="latestAnnualReportOnOperatingRevenue"
-      >
-        <a-input
-          allow-clear
-          placeholder="请输入最新年报营业收入"
-          v-model:value="form.latestAnnualReportOnOperatingRevenue"
-        />
-      </a-form-item>
-      <a-form-item label="企查分" name="enterpriseScoreCheck">
-        <a-input
-          allow-clear
-          placeholder="请输入企查分"
-          v-model:value="form.enterpriseScoreCheck"
-        />
-      </a-form-item>
-      <a-form-item label="信用等级" name="creditRating">
-        <a-input
-          allow-clear
-          placeholder="请输入信用等级"
-          v-model:value="form.creditRating"
-        />
-      </a-form-item>
-      <a-form-item label="科创分" name="cechnologyScore">
-        <a-input
-          allow-clear
-          placeholder="请输入科创分"
-          v-model:value="form.cechnologyScore"
-        />
-      </a-form-item>
-      <a-form-item label="科创等级" name="cechnologyLevel">
-        <a-input
-          allow-clear
-          placeholder="请输入科创等级"
-          v-model:value="form.cechnologyLevel"
-        />
-      </a-form-item>
-      <a-form-item label="是否小微企业" name="smallEnterprise">
-        <a-input
-          allow-clear
-          placeholder="请输入是否小微企业"
-          v-model:value="form.smallEnterprise"
-        />
-      </a-form-item>
-      <a-form-item label="备注" name="comments">
-        <a-textarea
-          :rows="4"
-          :maxlength="200"
-          placeholder="请输入描述"
-          v-model:value="form.comments"
-        />
-      </a-form-item>
-      <a-form-item label="排序" name="sortNumber">
-        <a-input-number
-          :min="0"
-          :max="9999"
-          class="ele-fluid"
-          placeholder="请输入排序号"
-          v-model:value="form.sortNumber"
-        />
-      </a-form-item>
-      <a-form-item label="状态" name="status">
-        <a-radio-group v-model:value="form.status">
-          <a-radio :value="0">显示</a-radio>
-          <a-radio :value="1">隐藏</a-radio>
-        </a-radio-group>
-      </a-form-item>
-    </a-form>
+      </a-tab-pane>
+    </a-tabs>
   </a-drawer>
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, watch } from 'vue';
-  import { Form, message } from 'ant-design-vue';
-  import { assignObject, uuid } from 'ele-admin-pro';
-  import {
-    addCreditCompany,
-    updateCreditCompany
-  } from '@/api/credit/creditCompany';
+  import { computed, reactive, ref, watch } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { assignObject } from 'ele-admin-pro';
+  import { getCompanyRelatedInfo } from '@/api/credit/creditCompany';
   import { CreditCompany } from '@/api/credit/creditCompany/model';
   import { useThemeStore } from '@/store/modules/theme';
   import { storeToRefs } from 'pinia';
-  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
-  import { FormInstance } from 'ant-design-vue/es/form';
-  import { FileRecord } from '@/api/system/file/model';
-
-  // 是否是修改
-  const isUpdate = ref(false);
-  const useForm = Form.useForm;
-  // 是否开启响应式布局
-  const themeStore = useThemeStore();
-  const { styleResponsive } = storeToRefs(themeStore);
 
   const props = defineProps<{
     // 弹窗是否打开
@@ -457,16 +220,59 @@
     (e: 'update:visible', visible: boolean): void;
   }>();
 
-  // 提交状态
-  const loading = ref(false);
   // 是否显示最大化切换按钮
   const maxable = ref(true);
-  // 表格选中数据
-  const formRef = ref<FormInstance | null>(null);
-  const images = ref<ItemType[]>([]);
 
-  // 用户信息
-  const form = reactive<CreditCompany>({
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+  const descriptionColumns = computed(() => (styleResponsive.value ? 3 : 2));
+
+  const tabList = [
+    { key: '招投标', label: '招投标' },
+    { key: '对外投资', label: '对外投资' },
+    { key: '风险关系', label: '风险关系' },
+    { key: '竞争对手', label: '竞争对手' },
+    { key: '供应商', label: '供应商' },
+    { key: '客户', label: '客户' },
+    { key: '立案信息', label: '立案信息' },
+    { key: '诉前调解', label: '诉前调解' },
+    { key: '开庭公告', label: '开庭公告' },
+    { key: '法院公告', label: '法院公告' },
+    { key: '送达公告', label: '送达公告' },
+    { key: '裁判文书', label: '裁判文书' },
+    { key: '被执行人', label: '被执行人' },
+    { key: '失信被执行人', label: '失信被执行人' },
+    { key: '终本案件', label: '终本案件' },
+    { key: '限制高消费', label: '限制高消费' },
+    { key: '股权冻结', label: '股权冻结' },
+    { key: '司法案件', label: '司法案件' }
+  ];
+
+  type TableColumn = {
+    title: string;
+    dataIndex: string;
+    key: string;
+    ellipsis?: boolean;
+  };
+
+  type TabState = {
+    loading: boolean;
+    data: Record<string, any>[];
+    columns: TableColumn[];
+  };
+
+  const tabState = reactive<Record<string, TabState>>({});
+  tabList.forEach((tab) => {
+    tabState[tab.key] = {
+      loading: false,
+      data: [],
+      columns: []
+    };
+  });
+  const activeTab = ref(tabList[0].key);
+
+  const defaultForm: CreditCompany = {
     id: undefined,
     name: undefined,
     matchName: undefined,
@@ -527,86 +333,122 @@
     updateTime: undefined,
     status: 0,
     comments: ''
-  });
+  };
+
+  // 用户信息
+  const form = reactive<CreditCompany>({ ...defaultForm });
 
   /* 更新visible */
   const updateVisible = (value: boolean) => {
     emit('update:visible', value);
   };
 
-  // 表单验证规则
-  const rules = reactive({
-    creditCompanyName: [
-      {
-        required: true,
-        type: 'string',
-        message: '请填写企业名称',
-        trigger: 'blur'
-      }
-    ]
-  });
+  const formatValue = (value: unknown) => {
+    if (value === undefined || value === null || value === '') {
+      return '-';
+    }
+    return value;
+  };
 
-  const chooseImage = (data: FileRecord) => {
-    images.value.push({
-      uid: data.id,
-      url: data.path,
-      status: 'done'
+  const formatStatus = (status?: number) => {
+    if (status === 0) {
+      return '显示';
+    }
+    if (status === 1) {
+      return '隐藏';
+    }
+    return '-';
+  };
+
+  const getRowKey = (record: Record<string, any>, index: number) => {
+    return record.id ?? record.code ?? record.key ?? index;
+  };
+
+  const buildColumns = (rows: Record<string, any>[]): TableColumn[] => {
+    if (!rows.length) {
+      return [];
+    }
+    return Object.keys(rows[0]).map((key) => ({
+      title: key,
+      dataIndex: key,
+      key,
+      ellipsis: true
+    }));
+  };
+
+  const resetForm = () => {
+    Object.assign(form, defaultForm);
+  };
+
+  const clearTabData = () => {
+    tabList.forEach((tab) => {
+      tabState[tab.key].data = [];
+      tabState[tab.key].columns = [];
+      tabState[tab.key].loading = false;
     });
-    form.image = data.path;
   };
 
-  const onDeleteItem = (index: number) => {
-    images.value.splice(index, 1);
-    form.image = '';
-  };
-
-  const { resetFields } = useForm(form, rules);
-
-  /* 保存编辑 */
-  const save = () => {
-    if (!formRef.value) {
+  const loadTabData = async (key: string) => {
+    const keyword = form.matchName ?? props.data?.matchName;
+    const state = tabState[key];
+    if (!keyword) {
+      state.data = [];
+      state.columns = [];
       return;
     }
-    formRef.value
-      .validate()
-      .then(() => {
-        loading.value = true;
-        const formData = {
-          ...form
-        };
-        const saveOrUpdate = isUpdate.value
-          ? updateCreditCompany
-          : addCreditCompany;
-        saveOrUpdate(formData)
-          .then((msg) => {
-            loading.value = false;
-            message.success(msg);
-            updateVisible(false);
-            emit('done');
-          })
-          .catch((e) => {
-            loading.value = false;
-            message.error(e.message);
-          });
-      })
-      .catch(() => {});
+    state.loading = true;
+    try {
+      const list = await getCompanyRelatedInfo({
+        type: key,
+        keywords: keyword
+      });
+      state.data = list;
+      state.columns = buildColumns(list);
+    } catch (e: any) {
+      state.data = [];
+      state.columns = [];
+      message.error(e?.message ?? '查询失败');
+    } finally {
+      state.loading = false;
+    }
   };
 
+  watch(
+    () => activeTab.value,
+    (key) => {
+      loadTabData(key);
+    }
+  );
+
   watch(
     () => props.visible,
     (visible) => {
       if (visible) {
-        images.value = [];
+        resetForm();
+        clearTabData();
         if (props.data) {
           assignObject(form, props.data);
-          isUpdate.value = true;
-        } else {
-          isUpdate.value = false;
         }
+        activeTab.value = tabList[0].key;
+        loadTabData(activeTab.value);
       } else {
-        resetFields();
+        resetForm();
+        clearTabData();
       }
     },
     { immediate: true }
   );
+
+  watch(
+    () => props.data,
+    (data) => {
+      if (!props.visible || !data) {
+        return;
+      }
+      resetForm();
+      clearTabData();
+      assignObject(form, data);
+      loadTabData(activeTab.value);
+    }
+  );
 </script>