feat(credit): 重构企业信息展示组件为只读详情页
- 将原有的表单编辑模式改为只读的描述列表展示 - 新增多个企业相关字段的展示支持 - 集成Tabs组件展示企业相关的多维度信息 - 实现企业关联信息的异步加载与展示 - 添加数据格式化处理函数提升展示效果 - 移除原有表单提交相关逻辑和验证规则 - 新增企业相关信息接口调用方法 - 优化组件结构与数据流管理逻辑
This commit is contained in:
@@ -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));
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user