feat(credit): 重构企业信息展示组件为只读详情页

- 将原有的表单编辑模式改为只读的描述列表展示
- 新增多个企业相关字段的展示支持
- 集成Tabs组件展示企业相关的多维度信息
- 实现企业关联信息的异步加载与展示
- 添加数据格式化处理函数提升展示效果
- 移除原有表单提交相关逻辑和验证规则
- 新增企业相关信息接口调用方法
- 优化组件结构与数据流管理逻辑
This commit is contained in:
2025-12-17 10:57:38 +08:00
parent 958cbc4d20
commit 5872043040
2 changed files with 348 additions and 487 deletions

View File

@@ -124,3 +124,22 @@ export async function importCreditCompany(file: File) {
} }
return Promise.reject(new Error(res.data.message)); 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));
}

View File

@@ -8,442 +8,205 @@
:title="data?.name" :title="data?.name"
:body-style="{ paddingBottom: '28px' }" :body-style="{ paddingBottom: '28px' }"
@update:visible="updateVisible" @update:visible="updateVisible"
@ok="save"
> >
<a-form <a-descriptions
ref="formRef" :column="descriptionColumns"
:model="form" size="small"
:rules="rules" bordered
:label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }" class="credit-company-descriptions"
:wrapper-col="
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
"
> >
<a-form-item label="原文件导入名称" name="name"> <a-descriptions-item label="原文件导入名称">
<a-input {{ formatValue(form.name) }}
allow-clear </a-descriptions-item>
placeholder="请输入原文件导入名称" <a-descriptions-item label="系统匹配企业名称">
v-model:value="form.name" {{ formatValue(form.matchName) }}
/> </a-descriptions-item>
</a-form-item> <a-descriptions-item label="统一社会信用代码">
<a-form-item label="系统匹配企业名称" name="matchName"> {{ formatValue(form.code) }}
<a-input </a-descriptions-item>
allow-clear <a-descriptions-item label="登记状态">
placeholder="请输入系统匹配企业名称" {{ formatValue(form.registrationStatus) }}
v-model:value="form.matchName" </a-descriptions-item>
/> <a-descriptions-item label="法定代表人">
</a-form-item> {{ formatValue(form.legalPerson) }}
<a-form-item label="统一社会信用代码" name="code"> </a-descriptions-item>
<a-input <a-descriptions-item label="注册资本">
allow-clear {{ formatValue(form.registeredCapital) }}
placeholder="请输入统一社会信用代码" </a-descriptions-item>
v-model:value="form.code" <a-descriptions-item label="实缴资本">
/> {{ formatValue(form.paidinCapital) }}
</a-form-item> </a-descriptions-item>
<!-- <a-form-item label="类型" name="type">--> <a-descriptions-item label="成立日期">
<!-- <a-input--> {{ formatValue(form.establishDate) }}
<!-- allow-clear--> </a-descriptions-item>
<!-- placeholder="请输入类型"--> <a-descriptions-item label="企业地址">
<!-- v-model:value="form.type"--> {{ formatValue(form.address) }}
<!-- />--> </a-descriptions-item>
<!-- </a-form-item>--> <a-descriptions-item label="电话">
<!-- <a-form-item label="上级id, 0是顶级" name="parentId">--> {{ formatValue(form.tel) }}
<!-- <a-input--> </a-descriptions-item>
<!-- allow-clear--> <a-descriptions-item label="更多电话">
<!-- placeholder="请输入上级id, 0是顶级"--> {{ formatValue(form.moreTel) }}
<!-- v-model:value="form.parentId"--> </a-descriptions-item>
<!-- />--> <a-descriptions-item label="邮箱">
<!-- </a-form-item>--> {{ formatValue(form.email) }}
<a-form-item label="登记状态" name="registrationStatus"> </a-descriptions-item>
<a-input <a-descriptions-item label="更多邮箱">
allow-clear {{ formatValue(form.moreEmail) }}
placeholder="请输入登记状态" </a-descriptions-item>
v-model:value="form.registrationStatus" <a-descriptions-item label="所在国家">
/> {{ formatValue(form.country) }}
</a-form-item> </a-descriptions-item>
<a-form-item label="法定代表人" name="legalPerson"> <a-descriptions-item label="所属省份">
<a-input {{ formatValue(form.province) }}
allow-clear </a-descriptions-item>
placeholder="请输入法定代表人" <a-descriptions-item label="所属城市">
v-model:value="form.legalPerson" {{ formatValue(form.city) }}
/> </a-descriptions-item>
</a-form-item> <a-descriptions-item label="所属区县">
<a-form-item label="注册资本" name="registeredCapital"> {{ formatValue(form.region) }}
<a-input </a-descriptions-item>
allow-clear <a-descriptions-item label="企业(机构)类型">
placeholder="请输入注册资本" {{ formatValue(form.institutionType) }}
v-model:value="form.registeredCapital" </a-descriptions-item>
/> <a-descriptions-item label="纳税人识别号">
</a-form-item> {{ formatValue(form.taxpayerCode) }}
<a-form-item label="实缴资本" name="paidinCapital"> </a-descriptions-item>
<a-input <a-descriptions-item label="注册号">
allow-clear {{ formatValue(form.registrationNumber) }}
placeholder="请输入实缴资本" </a-descriptions-item>
v-model:value="form.paidinCapital" <a-descriptions-item label="组织机构代码">
/> {{ formatValue(form.organizationalCode) }}
</a-form-item> </a-descriptions-item>
<a-form-item label="成立日期" name="establishDate"> <a-descriptions-item label="参保人数">
<a-input {{ formatValue(form.numberOfInsuredPersons) }}
allow-clear </a-descriptions-item>
placeholder="请输入成立日期" <a-descriptions-item label="参保人数所属年报">
v-model:value="form.establishDate" {{ formatValue(form.annualReport) }}
/> </a-descriptions-item>
</a-form-item> <a-descriptions-item label="营业期限">
<a-form-item label="企业地址" name="address"> {{ formatValue(form.businessTerm) }}
<a-input </a-descriptions-item>
allow-clear <a-descriptions-item label="国标行业门类">
placeholder="请输入企业地址" {{ formatValue(form.nationalStandardIndustryCategories) }}
v-model:value="form.address" </a-descriptions-item>
/> <a-descriptions-item label="国标行业大类">
</a-form-item> {{ formatValue(form.nationalStandardIndustryCategories2) }}
<a-form-item label="电话" name="tel"> </a-descriptions-item>
<a-input <a-descriptions-item label="国标行业中类">
allow-clear {{ formatValue(form.nationalStandardIndustryCategories3) }}
placeholder="请输入电话" </a-descriptions-item>
v-model:value="form.tel" <a-descriptions-item label="国标行业小类">
/> {{ formatValue(form.nationalStandardIndustryCategories4) }}
</a-form-item> </a-descriptions-item>
<a-form-item label="更多电话" name="moreTel"> <a-descriptions-item label="企查查行业门类">
<a-input {{ formatValue(form.nationalStandardIndustryCategories5) }}
allow-clear </a-descriptions-item>
placeholder="请输入更多电话" <a-descriptions-item label="企查查行业大类">
v-model:value="form.moreTel" {{ formatValue(form.nationalStandardIndustryCategories6) }}
/> </a-descriptions-item>
</a-form-item> <a-descriptions-item label="企查查行业中类">
<a-form-item label="邮箱" name="email"> {{ formatValue(form.nationalStandardIndustryCategories7) }}
<a-input </a-descriptions-item>
allow-clear <a-descriptions-item label="企查查行业小类">
placeholder="请输入邮箱" {{ formatValue(form.nationalStandardIndustryCategories8) }}
v-model:value="form.email" </a-descriptions-item>
/> <a-descriptions-item label="企业规模">
</a-form-item> {{ formatValue(form.companySize) }}
<a-form-item label="更多邮箱" name="moreEmail"> </a-descriptions-item>
<a-input <a-descriptions-item label="曾用名">
allow-clear {{ formatValue(form.formerName) }}
placeholder="请输入更多邮箱" </a-descriptions-item>
v-model:value="form.moreEmail" <a-descriptions-item label="英文名">
/> {{ formatValue(form.englishName) }}
</a-form-item> </a-descriptions-item>
<a-form-item label="所在国家" name="country"> <a-descriptions-item label="官网">
<a-input {{ formatValue(form.domain) }}
allow-clear </a-descriptions-item>
placeholder="请输入所在国家" <a-descriptions-item label="通信地址">
v-model:value="form.country" {{ formatValue(form.mailingAddress) }}
/> </a-descriptions-item>
</a-form-item> <a-descriptions-item label="企业简介">
<a-form-item label="所属省份" name="province"> {{ formatValue(form.companyProfile) }}
<a-input </a-descriptions-item>
allow-clear <a-descriptions-item label="经营范围">
placeholder="请输入所属省份" {{ formatValue(form.natureOfBusiness) }}
v-model:value="form.province" </a-descriptions-item>
/> <a-descriptions-item label="登记机关">
</a-form-item> {{ formatValue(form.registrationAuthority) }}
<a-form-item label="所属城市" name="city"> </a-descriptions-item>
<a-input <a-descriptions-item label="纳税人资质">
allow-clear {{ formatValue(form.taxpayerQualification) }}
placeholder="请输入所属城市" </a-descriptions-item>
v-model:value="form.city" <a-descriptions-item label="最新年报年份">
/> {{ formatValue(form.latestAnnualReportYear) }}
</a-form-item> </a-descriptions-item>
<a-form-item label="所属区县" name="region"> <a-descriptions-item label="最新年报营业收入">
<a-input {{ formatValue(form.latestAnnualReportOnOperatingRevenue) }}
allow-clear </a-descriptions-item>
placeholder="请输入所属区县" <a-descriptions-item label="企查分">
v-model:value="form.region" {{ formatValue(form.enterpriseScoreCheck) }}
/> </a-descriptions-item>
</a-form-item> <a-descriptions-item label="信用等级">
<a-form-item label="企业(机构)类型" name="institutionType"> {{ formatValue(form.creditRating) }}
<a-input </a-descriptions-item>
allow-clear <a-descriptions-item label="科创分">
placeholder="请输入企业(机构)类型" {{ formatValue(form.cechnologyScore) }}
v-model:value="form.institutionType" </a-descriptions-item>
/> <a-descriptions-item label="科创等级">
</a-form-item> {{ formatValue(form.cechnologyLevel) }}
<a-form-item label="纳税人识别号" name="taxpayerCode"> </a-descriptions-item>
<a-input <a-descriptions-item label="是否小微企业">
allow-clear {{ formatValue(form.smallEnterprise) }}
placeholder="请输入纳税人识别号" </a-descriptions-item>
v-model:value="form.taxpayerCode" <a-descriptions-item label="备注">
/> {{ formatValue(form.comments) }}
</a-form-item> </a-descriptions-item>
<a-form-item label="注册号" name="registrationNumber"> <a-descriptions-item label="排序">
<a-input {{ formatValue(form.sortNumber) }}
allow-clear </a-descriptions-item>
placeholder="请输入注册号" <a-descriptions-item label="状态">
v-model:value="form.registrationNumber" {{ formatStatus(form.status) }}
/> </a-descriptions-item>
</a-form-item> </a-descriptions>
<a-form-item label="组织机构代码" name="organizationalCode"> <a-divider style="margin: 16px 0" />
<a-input <a-tabs
allow-clear v-model:activeKey="activeTab"
placeholder="请输入组织机构代码" type="card"
v-model:value="form.organizationalCode" class="credit-company-tabs"
/> >
</a-form-item> <a-tab-pane
<a-form-item label="参保人数" name="numberOfInsuredPersons"> v-for="tab in tabList"
<a-input :key="tab.key"
allow-clear :tab="tab.label"
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-input <a-table
allow-clear v-if="tabState[tab.key].columns.length"
placeholder="请输入国标行业门类" size="small"
v-model:value="form.nationalStandardIndustryCategories" :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-empty
<a-form-item v-else-if="!tabState[tab.key].loading"
label="国标行业大类" description="暂无数据"
name="nationalStandardIndustryCategories2"
>
<a-input
allow-clear
placeholder="请输入国标行业大类"
v-model:value="form.nationalStandardIndustryCategories2"
/> />
</a-form-item> </a-tab-pane>
<a-form-item </a-tabs>
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-drawer> </a-drawer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, reactive, watch } from 'vue'; import { computed, reactive, ref, watch } from 'vue';
import { Form, message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import { assignObject, uuid } from 'ele-admin-pro'; import { assignObject } from 'ele-admin-pro';
import { import { getCompanyRelatedInfo } from '@/api/credit/creditCompany';
addCreditCompany,
updateCreditCompany
} from '@/api/credit/creditCompany';
import { CreditCompany } from '@/api/credit/creditCompany/model'; import { CreditCompany } from '@/api/credit/creditCompany/model';
import { useThemeStore } from '@/store/modules/theme'; import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia'; 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<{ const props = defineProps<{
// 弹窗是否打开 // 弹窗是否打开
@@ -457,16 +220,59 @@
(e: 'update:visible', visible: boolean): void; (e: 'update:visible', visible: boolean): void;
}>(); }>();
// 提交状态
const loading = ref(false);
// 是否显示最大化切换按钮 // 是否显示最大化切换按钮
const maxable = ref(true); 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, id: undefined,
name: undefined, name: undefined,
matchName: undefined, matchName: undefined,
@@ -527,86 +333,122 @@
updateTime: undefined, updateTime: undefined,
status: 0, status: 0,
comments: '' comments: ''
}); };
// 用户信息
const form = reactive<CreditCompany>({ ...defaultForm });
/* 更新visible */ /* 更新visible */
const updateVisible = (value: boolean) => { const updateVisible = (value: boolean) => {
emit('update:visible', value); emit('update:visible', value);
}; };
// 表单验证规则 const formatValue = (value: unknown) => {
const rules = reactive({ if (value === undefined || value === null || value === '') {
creditCompanyName: [ return '-';
{ }
required: true, return value;
type: 'string', };
message: '请填写企业名称',
trigger: 'blur'
}
]
});
const chooseImage = (data: FileRecord) => { const formatStatus = (status?: number) => {
images.value.push({ if (status === 0) {
uid: data.id, return '显示';
url: data.path, }
status: 'done' 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) => { const loadTabData = async (key: string) => {
images.value.splice(index, 1); const keyword = form.matchName ?? props.data?.matchName;
form.image = ''; const state = tabState[key];
}; if (!keyword) {
state.data = [];
const { resetFields } = useForm(form, rules); state.columns = [];
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return; return;
} }
formRef.value state.loading = true;
.validate() try {
.then(() => { const list = await getCompanyRelatedInfo({
loading.value = true; type: key,
const formData = { keywords: keyword
...form });
}; state.data = list;
const saveOrUpdate = isUpdate.value state.columns = buildColumns(list);
? updateCreditCompany } catch (e: any) {
: addCreditCompany; state.data = [];
saveOrUpdate(formData) state.columns = [];
.then((msg) => { message.error(e?.message ?? '查询失败');
loading.value = false; } finally {
message.success(msg); state.loading = false;
updateVisible(false); }
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
}; };
watch(
() => activeTab.value,
(key) => {
loadTabData(key);
}
);
watch( watch(
() => props.visible, () => props.visible,
(visible) => { (visible) => {
if (visible) { if (visible) {
images.value = []; resetForm();
clearTabData();
if (props.data) { if (props.data) {
assignObject(form, props.data); assignObject(form, props.data);
isUpdate.value = true;
} else {
isUpdate.value = false;
} }
activeTab.value = tabList[0].key;
loadTabData(activeTab.value);
} else { } else {
resetFields(); resetForm();
clearTabData();
} }
}, },
{ immediate: true } { immediate: true }
); );
watch(
() => props.data,
(data) => {
if (!props.visible || !data) {
return;
}
resetForm();
clearTabData();
assignObject(form, data);
loadTabData(activeTab.value);
}
);
</script> </script>