huoran
/
FE_sandTable
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

动态引入组件优化

Browse Source
master
yujialong 7 months ago
parent f0a342b470
commit 44c5a142ad
7 changed files with 223 additions and 140 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/api/model.ts
  2. 52
      src/views/product/afterLoan/CardList.vue
  3. 85
      src/views/product/bank/Config.vue
  4. 64
      src/views/product/bank/Info.vue
  5. 59
      src/views/product/interestRate/CardList.vue
  6. 19
      src/views/product/strategy/150/Detail.vue
  7. 81
      src/views/product/strategy/CardList.vue

3
src/api/model.ts
Unescape View File

@ -208,3 +208,6 @@ export const collectionAfterLoan = async (data: Record<string, any>): Promise<an
export const collectionAfterLoanDetails = async (params: Record<string, any>): Promise<any> => (await axios.post(`/product/collectionAfterLoan/details`, {}, { params })).data;
export const collectionAfterLoanSave = async (data: Record<string, any>): Promise<any> => (await axios.post(`/product/collectionAfterLoan/saveOrUpdate`, data)).data;
export const collectionAfterLoanDel = async (data: Record<string, any>): Promise<any> => (await axios.post(`/product/collectionAfterLoan/delete`, data)).data;
export const isTheStrategyRelatedToTheProduct = async (params: Record<string, any>): Promise<any> =>
(await axios.post(`${host}/product/managerOfRiskControl/bankRiskControlAllocation/isTheStrategyRelatedToTheProduct`, {}, { params })).data;

52
src/views/product/afterLoan/CardList.vue
Unescape View File

@ -9,50 +9,64 @@
:index="String(item.id)">{{ item.name }}</el-menu-item>
</el-menu>
<div class="right">
<component :is="curMenu" />
<component v-if="loadedComponents[activeComponent]"
:is="loadedComponents[activeComponent]" />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, defineAsyncComponent, getCurrentInstance } from 'vue';
import { computed, onMounted, ref, defineAsyncComponent, markRaw } from 'vue';
import { getProcessInformationBasedOnRoles } from '@/api/judgment';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const curMenu = ref<string>(route.query.id);
const list = ref<Array<Record<string, any>>>([]);
const dynamicComponentMap = {
const curMenu = computed({
get() {
return route.query.id;
},
set() {},
});
const asyncComponents = {
'1029': defineAsyncComponent(() => import('./1029/Index.vue')),
'1030': defineAsyncComponent(() => import('./1030/Index.vue')),
'1031': defineAsyncComponent(() => import('./1031/Index.vue')),
'1032': defineAsyncComponent(() => import('./1032/Index.vue')),
'1033': defineAsyncComponent(() => import('./1033/Index.vue')),
};
const app = getCurrentInstance().appContext.app;
for (const [name, asyncComponent] of Object.entries(dynamicComponentMap)) {
app.component(name, asyncComponent);
}
const loadedComponents = markRaw({});
const activeComponent = ref<string>('');
// 加载组件的方法
const loadComponent = async (componentName: string) => {
if (!loadedComponents[componentName]) {
try {
loadedComponents[componentName] = asyncComponents[componentName];
activeComponent.value = componentName;
} catch (error) {
console.error(`Failed to load component ${componentName}`, error);
}
} else {
activeComponent.value = componentName;
}
};
const handleSelect = async (key: string) => {
curMenu.value = key;
await loadComponent(key);
router.push(`/product/afterLoan?i=${route.query.i}&role=${route.query.role}&id=${key}`);
};
// 列表
const getList = async () => {
const { process } = await getProcessInformationBasedOnRoles(69);
// eslint-disable-next-line no-unused-expressions
!curMenu.value && handleSelect(process[0].recordChildren[0].id);
list.value = process;
handleSelect(curMenu.value || process[0].recordChildren[0].id);
};
onMounted(getList);
// onBeforeUnmount(() => {
// console.log('🚀 ~ onBeforeUnmount ~ app:', app);
// app.component('148', null);
// app.component('150', null);
// });
const handleSelect = (key: string) => {
curMenu.value = key;
router.push(`/product/afterLoan?i=${route.query.i}&role=${route.query.role}&id=${key}`);
};
</script>
<style lang="scss" scoped>

85
src/views/product/bank/Config.vue
Unescape View File

@ -87,8 +87,7 @@
<div v-if="form.borrowerMaterialSelectedStatus === 797">
<p class="my-2 text-xs text-[#666]">选择需要提供的借款人材料（至少选一样）</p>
<el-checkbox-group v-if="config.length"
v-model="form.borrowerMaterial"
@change="denyAll('borrowerMaterial', 770)">
v-model="form.borrowerMaterial">
<el-checkbox v-for="(item, i) in config[1]?.recordChildren[1]?.recordChildren[0]?.subject?.itemList"
:key="i"
:label="item.itemId">{{ item.options }}</el-checkbox>
@ -152,8 +151,7 @@
<template v-if="form.mateMaterialSelectedStatus === 797">
<p class="tips">选择需要提供的配偶材料（至少选一样）</p>
<el-checkbox-group v-if="config.length"
v-model="form.mateMaterial"
@change="denyAll('mateMaterial', 350)">
v-model="form.mateMaterial">
<el-checkbox v-for="(item, i) in config[1]?.recordChildren[2]?.subject?.itemList"
:key="i"
:label="item.itemId">{{ item.options }}</el-checkbox>
@ -173,8 +171,7 @@
<template v-if="form.businessMaterialsSelectedStatus === 797">
<p class="tips">选择需要提供的经营类材料（至少选一样）</p>
<el-checkbox-group v-if="config.length"
v-model="form.businessMaterials"
@change="denyAll('businessMaterials', 351)">
v-model="form.businessMaterials">
<el-checkbox v-for="(item, i) in config[1]?.recordChildren[3]?.subject?.itemList"
:key="i"
:label="item.itemId">{{ item.options }}</el-checkbox>
@ -195,8 +192,7 @@
<template v-if="form.supplementMaterialSelectedStatus === 797">
<p class="tips">选择需要提供的补充材料（至少选一样）</p>
<el-checkbox-group v-if="config.length"
v-model="form.supplementaryMaterials"
@change="denyAll('supplementaryMaterials', 352)">
v-model="form.supplementaryMaterials">
<el-checkbox v-for="(item, i) in config[1]?.recordChildren[4]?.subject?.itemList"
:key="i"
:label="item.itemId">{{ item.options }}</el-checkbox>
@ -625,7 +621,8 @@
:title="curPreviewTitle"
size="100%"
custom-class="model-drawer">
<component :is="curPreview"
<component v-if="loadedComponents[activeComponent]"
:is="loadedComponents[activeComponent]"
v-model:row="curRow"
disabled
:key="curRow.strategyId" />
@ -634,7 +631,7 @@
</template>
<script setup lang="ts">
import { ref, reactive, computed, watch, defineAsyncComponent, getCurrentInstance } from 'vue';
import { ref, reactive, computed, watch, defineAsyncComponent, markRaw } from 'vue';
import { ElMessage } from 'element-plus';
import type { TabsPaneContext, FormInstance } from 'element-plus';
import { findById, riskSave, riskUpdate, riskControlDetailsAreDisplayed } from '@/api/bank';
@ -738,7 +735,6 @@ const whethers1 = ref<Record<string, any>>([
]);
const formRef = ref<FormInstance>();
const userName = ref<string>();
const curPreview = ref<string>('150');
const curRow = ref<Record<string, any>>();
const strategyParams = { pageNum: 1, pageSize: 100, keyWord: '', ...getIds() };
const visible = ref<boolean>(false);
@ -795,26 +791,38 @@ let form = reactive<RuleForm>({
const curPreviewTitle = ref<string>();
const assessNames = ['政务黑名单', '征信黑名单', '商采黑名单', '行内黑名单', '企业黑名单', '反欺诈策略', '负面行业黑名单策略'];
const afterNames = ['五级分类策略', '贷后检查策略', '贷后评分卡', '贷后预警策略', '贷后催收策略'];
const dynamicComponentMap = {
'150': defineAsyncComponent(() => import('../strategy/150/Detail.vue')),
'151': defineAsyncComponent(() => import('../strategy/151/Detail.vue')),
'152': defineAsyncComponent(() => import('../strategy/152/Detail.vue')),
'153': defineAsyncComponent(() => import('../strategy/153/Detail.vue')),
'154': defineAsyncComponent(() => import('../strategy/154/Detail.vue')),
'155': defineAsyncComponent(() => import('../strategy/155/Detail.vue')),
'156': defineAsyncComponent(() => import('../strategy/156/Detail.vue')),
'512': defineAsyncComponent(() => import('../strategy/512/Detail.vue')),
'513': defineAsyncComponent(() => import('../strategy/513/Detail.vue')),
'1029': defineAsyncComponent(() => import('../afterLoan/1029/Detail.vue')),
'1030': defineAsyncComponent(() => import('../afterLoan/1030/Detail.vue')),
'1031': defineAsyncComponent(() => import('../afterLoan/1031/Detail.vue')),
'1032': defineAsyncComponent(() => import('../afterLoan/1032/Detail.vue')),
'1033': defineAsyncComponent(() => import('../afterLoan/1033/Detail.vue')),
const asyncComponents = {
150: defineAsyncComponent(() => import('../strategy/150/Detail.vue')),
151: defineAsyncComponent(() => import('../strategy/151/Detail.vue')),
152: defineAsyncComponent(() => import('../strategy/152/Detail.vue')),
153: defineAsyncComponent(() => import('../strategy/153/Detail.vue')),
154: defineAsyncComponent(() => import('../strategy/154/Detail.vue')),
155: defineAsyncComponent(() => import('../strategy/155/Detail.vue')),
156: defineAsyncComponent(() => import('../strategy/156/Detail.vue')),
512: defineAsyncComponent(() => import('../strategy/512/Detail.vue')),
513: defineAsyncComponent(() => import('../strategy/513/Detail.vue')),
1029: defineAsyncComponent(() => import('../afterLoan/1029/Detail.vue')),
1030: defineAsyncComponent(() => import('../afterLoan/1030/Detail.vue')),
1031: defineAsyncComponent(() => import('../afterLoan/1031/Detail.vue')),
1032: defineAsyncComponent(() => import('../afterLoan/1032/Detail.vue')),
1033: defineAsyncComponent(() => import('../afterLoan/1033/Detail.vue')),
};
const loadedComponents = markRaw({});
const activeComponent = ref<string>('');
// 加载组件的方法
const loadComponent = async (componentName: string) => {
if (!loadedComponents[componentName]) {
try {
loadedComponents[componentName] = asyncComponents[componentName];
activeComponent.value = componentName;
} catch (error) {
console.error(`Failed to load component ${componentName}`, error);
}
} else {
activeComponent.value = componentName;
}
};
const app = getCurrentInstance().appContext.app;
for (const [name, asyncComponent] of Object.entries(dynamicComponentMap)) {
app.component(name, asyncComponent);
}
// tab切换回调
const tabChange = (tab: TabsPaneContext, event: Event) => {
@ -997,6 +1005,7 @@ const getDetail = async () => {
if (e) {
if (e.personalRiskDegreeStrategySelectedStatus) e.personalRiskDegreeStrategySelectedStatus = +e.personalRiskDegreeStrategySelectedStatus;
if (e.enterpriseRiskDegreeStrategySelectedStatus) e.enterpriseRiskDegreeStrategySelectedStatus = +e.enterpriseRiskDegreeStrategySelectedStatus;
if (e.enterpriseQuotaModelSelectedStatus) e.enterpriseQuotaModelSelectedStatus = +e.enterpriseQuotaModelSelectedStatus;
e.enterpriseQuotaModel = e?.enterpriseQuotaModel?.split(',').map((e) => +e);
e.reviewSignature = e?.reviewSignature?.length ? e.reviewSignature[0] : '';
e.approvalSignature = e?.approvalSignature?.length ? e.approvalSignature[0] : '';
@ -1013,10 +1022,6 @@ const getDetail = async () => {
}
}
};
// 无需材料互斥(选择了无需的选项，则取消选择所有该字段的其他选项)
const denyAll = (field: string, denyId: number) => {
if (form[field].includes(denyId)) form[field] = [denyId];
};
watch(
() => route.query,
() => {
@ -1421,34 +1426,34 @@ const addRecord = async (data: Record<string, any>) => {
});
};
// 预览策略
const preview = (row: Record<string, any>, i: number) => {
const preview = async (row: Record<string, any>, i: number) => {
const { tacticsId } = form.bankRiskControlAllocationTacticsList[i];
curRow.value = {
strategyId: tacticsId,
strategyName: row.blackList.find((e) => e.strategyId === tacticsId)?.strategyName,
};
curPreview.value = Object.keys(dynamicComponentMap)[i];
await loadComponent(Object.keys(asyncComponents)[i]);
curPreviewTitle.value = `查看${assessNames[i]}策略`;
visible.value = true;
};
// 预览信用评分策略
const previewCredits = (row: Record<string, any>, i: number) => {
const previewCredits = async (row: Record<string, any>, i: number) => {
const { tacticsId } = form.creditScoringStrategyList[i];
curRow.value = {
id: tacticsId,
};
curPreview.value = i ? '513' : '512';
await loadComponent(i ? '513' : '512');
curPreviewTitle.value = `查看${i ? '企业' : '个人'}信用评分策略`;
visible.value = true;
};
// 预览贷后管理
const previewAfter = (row: Record<string, any>, i: number) => {
const previewAfter = async (row: Record<string, any>, i: number) => {
const { tacticsId } = form.postLoanSelectionStrategyList[i];
curRow.value = {
strategyId: tacticsId,
strategyName: row.blackList.find((e) => e.strategyId === tacticsId)?.strategyName,
};
curPreview.value = Object.keys(dynamicComponentMap)[i + 9];
await loadComponent(Object.keys(asyncComponents)[i + 9]);
curPreviewTitle.value = `查看${afterNames[i]}策略`;
visible.value = true;
};

64
src/views/product/bank/Info.vue
Unescape View File

@ -100,6 +100,7 @@
</p>
</template>
</template>
<p v-if="info?.personalRiskDegreeStrategySelectedStatus === 803 || info?.enterpriseRiskDegreeStrategySelectedStatus === 803"
class="text">系统跑批风险度策略：
{{ info?.personalRiskDegreeStrategySelectedStatus === 803 ? '个人风险度策略' : '' }}
@ -117,7 +118,7 @@
src="@/assets/svgs/preview.svg"
alt=""
class="cursor-pointer ml-2"
@click="preview(item, i)">
@click="previewRate(item, i)">
</p>
</template>
</template>
@ -201,7 +202,8 @@
:title="curPreviewTitle"
size="100%"
custom-class="model-drawer">
<component :is="curPreview"
<component v-if="loadedComponents[activeComponent]"
:is="loadedComponents[activeComponent]"
v-model:row="curRow"
disabled
:key="curRow.strategyId" />
@ -209,14 +211,13 @@
</template>
<script setup lang="ts">
import { ref, computed, watch, defineExpose, defineAsyncComponent, getCurrentInstance } from 'vue';
import { ref, computed, watch, defineExpose, defineAsyncComponent, markRaw } from 'vue';
import { findById, approvalRecord } from '@/api/bank';
import { useRouter, useRoute } from 'vue-router';
import { getStatus } from '@/store/useProduct';
import { getUsername } from '@/utils/common';
const emit = defineEmits(['updateAudits']);
const router = useRouter();
const route = useRoute();
const id = computed(() => +route.query.id);
const info = ref<Record<string, any>>({});
@ -228,9 +229,7 @@ const visible = ref<boolean>(false);
const curRow = ref<Record<string, any>>();
const curPreview = ref<string>('150');
const curPreviewTitle = ref<string>();
const assessNames = ['政务黑名单', '征信黑名单', '商采黑名单', '行内黑名单', '企业黑名单', '反欺诈策略', '负面行业黑名单策略'];
const afterNames = ['五级分类策略', '贷后检查策略', '贷后评分卡', '贷后预警策略', '贷后催收策略'];
const dynamicComponentMap = {
const asyncComponents = {
'150': defineAsyncComponent(() => import('../strategy/150/Detail.vue')),
'151': defineAsyncComponent(() => import('../strategy/151/Detail.vue')),
'152': defineAsyncComponent(() => import('../strategy/152/Detail.vue')),
@ -240,16 +239,31 @@ const dynamicComponentMap = {
'156': defineAsyncComponent(() => import('../strategy/156/Detail.vue')),
'512': defineAsyncComponent(() => import('../strategy/512/Detail.vue')),
'513': defineAsyncComponent(() => import('../strategy/513/Detail.vue')),
'772': defineAsyncComponent(() => import('../interestRate/772/Detail.vue')),
'935': defineAsyncComponent(() => import('../interestRate/935/Detail.vue')),
'936': defineAsyncComponent(() => import('../interestRate/936/Detail.vue')),
'1029': defineAsyncComponent(() => import('../afterLoan/1029/Detail.vue')),
'1030': defineAsyncComponent(() => import('../afterLoan/1030/Detail.vue')),
'1031': defineAsyncComponent(() => import('../afterLoan/1031/Detail.vue')),
'1032': defineAsyncComponent(() => import('../afterLoan/1032/Detail.vue')),
'1033': defineAsyncComponent(() => import('../afterLoan/1033/Detail.vue')),
};
const app = getCurrentInstance().appContext.app;
for (const [name, asyncComponent] of Object.entries(dynamicComponentMap)) {
app.component(name, asyncComponent);
}
const loadedComponents = markRaw({});
const activeComponent = ref<string>('');
// 加载组件的方法
const loadComponent = async (componentName: string) => {
if (!loadedComponents[componentName]) {
try {
loadedComponents[componentName] = asyncComponents[componentName];
activeComponent.value = componentName;
} catch (error) {
console.error(`Failed to load component ${componentName}`, error);
}
} else {
activeComponent.value = componentName;
}
};
// 详情
const getDetail = async () => {
@ -281,32 +295,42 @@ watch(
);
// 预览策略
const preview = (row: Record<string, any>, i: number) => {
const preview = async (row: Record<string, any>, i: number) => {
curRow.value = {
strategyId: row.tacticsId,
strategyName: row.tacticsName,
};
curPreview.value = Object.keys(dynamicComponentMap)[i];
curPreviewTitle.value = `查看${assessNames[i]}策略`;
await loadComponent(Object.keys(asyncComponents)[i]);
curPreviewTitle.value = `查看${row.pointName}`;
visible.value = true;
};
// 预览信用评分策略
const previewCredits = (row: Record<string, any>, i: number) => {
const previewCredits = async (row: Record<string, any>, i: number) => {
curRow.value = {
id: row.tacticsId,
};
await loadComponent(i ? '513' : '512');
curPreviewTitle.value = `查看${row.pointName}`;
visible.value = true;
};
// 预览利率模型
const previewRate = async (row: Record<string, any>, i: number) => {
curRow.value = {
id: row.tacticsId,
modelName: row.tacticsName,
};
curPreview.value = i ? '513' : '512';
curPreviewTitle.value = `查看${i ? '企业' : '个人'}信用评分策略`;
await loadComponent(i === 2 ? '936' : i ? '772' : '935');
curPreviewTitle.value = `查看${row.pointName}`;
visible.value = true;
};
// 预览贷后管理
const previewAfter = (row: Record<string, any>, i: number) => {
const previewAfter = async (row: Record<string, any>, i: number) => {
curRow.value = {
strategyId: row.tacticsId,
strategyName: row.tacticsName,
};
curPreview.value = Object.keys(dynamicComponentMap)[i + 9];
curPreviewTitle.value = `查看${afterNames[i]}策略`;
await loadComponent(Object.keys(asyncComponents)[i + 12]);
curPreviewTitle.value = `查看${row.pointName}`;
visible.value = true;
};

59
src/views/product/interestRate/CardList.vue
Unescape View File

@ -16,49 +16,62 @@
</el-sub-menu>
</el-menu>
<div class="right">
<component :is="curMenu" />
<component v-if="loadedComponents[activeComponent]"
:is="loadedComponents[activeComponent]" />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, defineAsyncComponent, getCurrentInstance } from 'vue';
import { computed, onMounted, ref, defineAsyncComponent, markRaw } from 'vue';
import { getProcessInformationBasedOnRoles } from '@/api/judgment';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const curMenu = ref<string>(route.query.id);
const list = ref<Array<Record<string, any>>>([]);
const dynamicComponentMap = {
'772': defineAsyncComponent(() => import('./772/Index.vue')),
'773': defineAsyncComponent(() => import('./773.vue')),
'935': defineAsyncComponent(() => import('./935/Index.vue')),
'936': defineAsyncComponent(() => import('./936/Index.vue')),
const curMenu = computed({
get() {
return route.query.id;
},
set() {},
});
const asyncComponents = {
772: defineAsyncComponent(() => import('./772/Index.vue')),
773: defineAsyncComponent(() => import('./773.vue')),
935: defineAsyncComponent(() => import('./935/Index.vue')),
936: defineAsyncComponent(() => import('./936/Index.vue')),
};
const app = getCurrentInstance().appContext.app;
for (const [name, asyncComponent] of Object.entries(dynamicComponentMap)) {
app.component(name, asyncComponent);
}
const loadedComponents = markRaw({});
const activeComponent = ref<string>('');
// 加载组件的方法
const loadComponent = async (componentName: string) => {
if (!loadedComponents[componentName]) {
try {
loadedComponents[componentName] = asyncComponents[componentName];
activeComponent.value = componentName;
} catch (error) {
console.error(`Failed to load component ${componentName}`, error);
}
} else {
activeComponent.value = componentName;
}
};
const handleSelect = async (key: string) => {
curMenu.value = key;
await loadComponent(key);
router.push(`/product/interestRate?i=${route.query.i}&role=${route.query.role}&id=${key}`);
};
// 列表
const getList = async () => {
const { process } = await getProcessInformationBasedOnRoles(68);
// eslint-disable-next-line no-unused-expressions
!curMenu.value && handleSelect(process[0].recordChildren[0].id);
list.value = process;
handleSelect(curMenu.value || process[0].recordChildren[0].id);
};
onMounted(getList);
// onBeforeUnmount(() => {
// console.log('🚀 ~ onBeforeUnmount ~ app:', app);
// app.component('148', null);
// app.component('150', null);
// });
const handleSelect = (key: string) => {
curMenu.value = key;
router.push(`/product/interestRate?i=${route.query.i}&role=${route.query.role}&id=${key}`);
};
</script>
<style lang="scss" scoped>

19
src/views/product/strategy/150/Detail.vue
Unescape View File

@ -153,7 +153,7 @@
<script setup lang="ts">
import { ref, defineAsyncComponent, onMounted, toRefs } from 'vue';
import { ElMessage } from 'element-plus';
import { accessStrategyGovernmentBlacklistFind, accessStrategyGovernmentBlacklistSave } from '@/api/model';
import { accessStrategyGovernmentBlacklistFind, accessStrategyGovernmentBlacklistSave, isTheStrategyRelatedToTheProduct } from '@/api/model';
import { getProcessInformationBasedOnRoles, addOperation } from '@/api/judgment';
import type { TableColumnCtx } from 'element-plus';
import { handleId, getIds } from '@/utils/common';
@ -381,9 +381,22 @@ const submit = async (synchronizeUpdate?: number) => {
});
addRecord(recordParam);
};
const confirmSubmit = () => {
const confirmSubmit = async () => {
if (!strategyName.value) return ElMessage.error('请输入策略名称！');
syncVisible.value = true;
// 编辑需要判断是否有绑定产品
if (strategyId.value) {
const res = await isTheStrategyRelatedToTheProduct({
tacticsId: strategyId.value,
});
if (res.isRelated) {
syncVisible.value = true;
} else {
submit();
}
} else {
submit();
}
};
</script>

81
src/views/product/strategy/CardList.vue
Unescape View File

@ -16,62 +16,73 @@
</el-sub-menu>
</el-menu>
<div class="right">
<component :is="curMenu" />
<component v-if="loadedComponents[activeComponent]"
:is="loadedComponents[activeComponent]" />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, defineAsyncComponent, getCurrentInstance } from 'vue';
import { computed, onMounted, ref, defineAsyncComponent, markRaw } from 'vue';
import { getProcessInformationBasedOnRoles } from '@/api/judgment';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const curMenu = ref<string>(route.query.id);
const list = ref<Array<Record<string, any>>>([]);
const id = computed(() => +route.query.id);
const dynamicComponentMap = {
'150': defineAsyncComponent(() => import('./150/Index.vue')),
'151': defineAsyncComponent(() => import('./151/Index.vue')),
'152': defineAsyncComponent(() => import('./152/Index.vue')),
'153': defineAsyncComponent(() => import('./153/Index.vue')),
'154': defineAsyncComponent(() => import('./154/Index.vue')),
'155': defineAsyncComponent(() => import('./155/Index.vue')),
'156': defineAsyncComponent(() => import('./156/Index.vue')),
'512': defineAsyncComponent(() => import('./512/Index.vue')),
'513': defineAsyncComponent(() => import('./513/Index.vue')),
'702': defineAsyncComponent(() => import('./Risk1.vue')),
'703': defineAsyncComponent(() => import('./Risk2.vue')),
'704': defineAsyncComponent(() => import('./Risk3.vue')),
const curMenu = computed({
get() {
return route.query.id;
},
set() {},
});
const asyncComponents = {
150: defineAsyncComponent(() => import('./150/Index.vue')),
151: defineAsyncComponent(() => import('./151/Index.vue')),
152: defineAsyncComponent(() => import('./152/Index.vue')),
153: defineAsyncComponent(() => import('./153/Index.vue')),
154: defineAsyncComponent(() => import('./154/Index.vue')),
155: defineAsyncComponent(() => import('./155/Index.vue')),
156: defineAsyncComponent(() => import('./156/Index.vue')),
512: defineAsyncComponent(() => import('./512/Index.vue')),
513: defineAsyncComponent(() => import('./513/Index.vue')),
702: defineAsyncComponent(() => import('./Risk1.vue')),
703: defineAsyncComponent(() => import('./Risk2.vue')),
704: defineAsyncComponent(() => import('./Risk3.vue')),
};
const loadedComponents = markRaw({});
const activeComponent = ref<string>('');
// 加载组件的方法
const loadComponent = async (componentName: string) => {
if (!loadedComponents[componentName]) {
try {
loadedComponents[componentName] = asyncComponents[componentName];
activeComponent.value = componentName;
} catch (error) {
console.error(`Failed to load component ${componentName}`, error);
}
} else {
activeComponent.value = componentName;
}
};
const app = getCurrentInstance().appContext.app;
for (const [name, asyncComponent] of Object.entries(dynamicComponentMap)) {
app.component(name, asyncComponent);
}
// 准入策略切换
const switchProduct = (id: number) => {
router.push(`/product/strategy?i=${route.query.i}&role=${route.query.role}&id=${id}`);
const handleSelect = async (key: string) => {
curMenu.value = key;
await loadComponent(key);
router.push(`/product/strategy?i=${route.query.i}&role=${route.query.role}&id=${key}`);
};
// 列表
const getList = async () => {
const { process } = await getProcessInformationBasedOnRoles(67);
// eslint-disable-next-line no-unused-expressions
!id.value && switchProduct(process[0].recordChildren[0].id);
list.value = process;
handleSelect(curMenu.value || process[0].recordChildren[0].id);
};
onMounted(getList);
// onBeforeUnmount(() => {
// console.log('🚀 ~ onBeforeUnmount ~ app:', app);
// app.component('148', null);
// app.component('150', null);
// });
const handleSelect = (key: string) => {
curMenu.value = key;
router.push(`/product/strategy?i=${route.query.i}&role=${route.query.role}&id=${key}`);
};
</script>
<style lang="scss" scoped>

Write Preview
Loading…
Cancel
Save