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
Unified 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. 17
      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 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 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 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> :index="String(item.id)">{{ item.name }}</el-menu-item>
</el-menu> </el-menu>
<div class="right"> <div class="right">
<component :is="curMenu" /> <component v-if="loadedComponents[activeComponent]"
:is="loadedComponents[activeComponent]" />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <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 { getProcessInformationBasedOnRoles } from '@/api/judgment';
import { useRouter, useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router';
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const curMenu = ref<string>(route.query.id);
const list = ref<Array<Record<string, any>>>([]); 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')), '1029': defineAsyncComponent(() => import('./1029/Index.vue')),
'1030': defineAsyncComponent(() => import('./1030/Index.vue')), '1030': defineAsyncComponent(() => import('./1030/Index.vue')),
'1031': defineAsyncComponent(() => import('./1031/Index.vue')), '1031': defineAsyncComponent(() => import('./1031/Index.vue')),
'1032': defineAsyncComponent(() => import('./1032/Index.vue')), '1032': defineAsyncComponent(() => import('./1032/Index.vue')),
'1033': defineAsyncComponent(() => import('./1033/Index.vue')), '1033': defineAsyncComponent(() => import('./1033/Index.vue')),
}; };
const app = getCurrentInstance().appContext.app; const loadedComponents = markRaw({});
for (const [name, asyncComponent] of Object.entries(dynamicComponentMap)) { const activeComponent = ref<string>('');
app.component(name, asyncComponent);
}
// 加载组件的方法
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 getList = async () => {
const { process } = await getProcessInformationBasedOnRoles(69); const { process } = await getProcessInformationBasedOnRoles(69);
// eslint-disable-next-line no-unused-expressions
!curMenu.value && handleSelect(process[0].recordChildren[0].id);
list.value = process; list.value = process;
handleSelect(curMenu.value || process[0].recordChildren[0].id);
}; };
onMounted(getList); 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

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

@ -87,8 +87,7 @@
<div v-if="form.borrowerMaterialSelectedStatus === 797"> <div v-if="form.borrowerMaterialSelectedStatus === 797">
<p class="my-2 text-xs text-[#666]">选择需要提供的借款人材料（至少选一样）</p> <p class="my-2 text-xs text-[#666]">选择需要提供的借款人材料（至少选一样）</p>
<el-checkbox-group v-if="config.length" <el-checkbox-group v-if="config.length"
v-model="form.borrowerMaterial" v-model="form.borrowerMaterial">
@change="denyAll('borrowerMaterial', 770)">
<el-checkbox v-for="(item, i) in config[1]?.recordChildren[1]?.recordChildren[0]?.subject?.itemList" <el-checkbox v-for="(item, i) in config[1]?.recordChildren[1]?.recordChildren[0]?.subject?.itemList"
:key="i" :key="i"
:label="item.itemId">{{ item.options }}</el-checkbox> :label="item.itemId">{{ item.options }}</el-checkbox>
@ -152,8 +151,7 @@
<template v-if="form.mateMaterialSelectedStatus === 797"> <template v-if="form.mateMaterialSelectedStatus === 797">
<p class="tips">选择需要提供的配偶材料（至少选一样）</p> <p class="tips">选择需要提供的配偶材料（至少选一样）</p>
<el-checkbox-group v-if="config.length" <el-checkbox-group v-if="config.length"
v-model="form.mateMaterial" v-model="form.mateMaterial">
@change="denyAll('mateMaterial', 350)">
<el-checkbox v-for="(item, i) in config[1]?.recordChildren[2]?.subject?.itemList" <el-checkbox v-for="(item, i) in config[1]?.recordChildren[2]?.subject?.itemList"
:key="i" :key="i"
:label="item.itemId">{{ item.options }}</el-checkbox> :label="item.itemId">{{ item.options }}</el-checkbox>
@ -173,8 +171,7 @@
<template v-if="form.businessMaterialsSelectedStatus === 797"> <template v-if="form.businessMaterialsSelectedStatus === 797">
<p class="tips">选择需要提供的经营类材料（至少选一样）</p> <p class="tips">选择需要提供的经营类材料（至少选一样）</p>
<el-checkbox-group v-if="config.length" <el-checkbox-group v-if="config.length"
v-model="form.businessMaterials" v-model="form.businessMaterials">
@change="denyAll('businessMaterials', 351)">
<el-checkbox v-for="(item, i) in config[1]?.recordChildren[3]?.subject?.itemList" <el-checkbox v-for="(item, i) in config[1]?.recordChildren[3]?.subject?.itemList"
:key="i" :key="i"
:label="item.itemId">{{ item.options }}</el-checkbox> :label="item.itemId">{{ item.options }}</el-checkbox>
@ -195,8 +192,7 @@
<template v-if="form.supplementMaterialSelectedStatus === 797"> <template v-if="form.supplementMaterialSelectedStatus === 797">
<p class="tips">选择需要提供的补充材料（至少选一样）</p> <p class="tips">选择需要提供的补充材料（至少选一样）</p>
<el-checkbox-group v-if="config.length" <el-checkbox-group v-if="config.length"
v-model="form.supplementaryMaterials" v-model="form.supplementaryMaterials">
@change="denyAll('supplementaryMaterials', 352)">
<el-checkbox v-for="(item, i) in config[1]?.recordChildren[4]?.subject?.itemList" <el-checkbox v-for="(item, i) in config[1]?.recordChildren[4]?.subject?.itemList"
:key="i" :key="i"
:label="item.itemId">{{ item.options }}</el-checkbox> :label="item.itemId">{{ item.options }}</el-checkbox>
@ -625,7 +621,8 @@
:title="curPreviewTitle" :title="curPreviewTitle"
size="100%" size="100%"
custom-class="model-drawer"> custom-class="model-drawer">
<component :is="curPreview" <component v-if="loadedComponents[activeComponent]"
:is="loadedComponents[activeComponent]"
v-model:row="curRow" v-model:row="curRow"
disabled disabled
:key="curRow.strategyId" /> :key="curRow.strategyId" />
@ -634,7 +631,7 @@
</template> </template>
<script setup lang="ts"> <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 { ElMessage } from 'element-plus';
import type { TabsPaneContext, FormInstance } from 'element-plus'; import type { TabsPaneContext, FormInstance } from 'element-plus';
import { findById, riskSave, riskUpdate, riskControlDetailsAreDisplayed } from '@/api/bank'; import { findById, riskSave, riskUpdate, riskControlDetailsAreDisplayed } from '@/api/bank';
@ -738,7 +735,6 @@ const whethers1 = ref<Record<string, any>>([
]); ]);
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();
const userName = ref<string>(); const userName = ref<string>();
const curPreview = ref<string>('150');
const curRow = ref<Record<string, any>>(); const curRow = ref<Record<string, any>>();
const strategyParams = { pageNum: 1, pageSize: 100, keyWord: '', ...getIds() }; const strategyParams = { pageNum: 1, pageSize: 100, keyWord: '', ...getIds() };
const visible = ref<boolean>(false); const visible = ref<boolean>(false);
@ -795,26 +791,38 @@ let form = reactive<RuleForm>({
const curPreviewTitle = ref<string>(); const curPreviewTitle = ref<string>();
const assessNames = ['政务黑名单', '征信黑名单', '商采黑名单', '行内黑名单', '企业黑名单', '反欺诈策略', '负面行业黑名单策略']; const assessNames = ['政务黑名单', '征信黑名单', '商采黑名单', '行内黑名单', '企业黑名单', '反欺诈策略', '负面行业黑名单策略'];
const afterNames = ['五级分类策略', '贷后检查策略', '贷后评分卡', '贷后预警策略', '贷后催收策略']; const afterNames = ['五级分类策略', '贷后检查策略', '贷后评分卡', '贷后预警策略', '贷后催收策略'];
const dynamicComponentMap = { const asyncComponents = {
'150': defineAsyncComponent(() => import('../strategy/150/Detail.vue')), 150: defineAsyncComponent(() => import('../strategy/150/Detail.vue')),
'151': defineAsyncComponent(() => import('../strategy/151/Detail.vue')), 151: defineAsyncComponent(() => import('../strategy/151/Detail.vue')),
'152': defineAsyncComponent(() => import('../strategy/152/Detail.vue')), 152: defineAsyncComponent(() => import('../strategy/152/Detail.vue')),
'153': defineAsyncComponent(() => import('../strategy/153/Detail.vue')), 153: defineAsyncComponent(() => import('../strategy/153/Detail.vue')),
'154': defineAsyncComponent(() => import('../strategy/154/Detail.vue')), 154: defineAsyncComponent(() => import('../strategy/154/Detail.vue')),
'155': defineAsyncComponent(() => import('../strategy/155/Detail.vue')), 155: defineAsyncComponent(() => import('../strategy/155/Detail.vue')),
'156': defineAsyncComponent(() => import('../strategy/156/Detail.vue')), 156: defineAsyncComponent(() => import('../strategy/156/Detail.vue')),
'512': defineAsyncComponent(() => import('../strategy/512/Detail.vue')), 512: defineAsyncComponent(() => import('../strategy/512/Detail.vue')),
'513': defineAsyncComponent(() => import('../strategy/513/Detail.vue')), 513: defineAsyncComponent(() => import('../strategy/513/Detail.vue')),
'1029': defineAsyncComponent(() => import('../afterLoan/1029/Detail.vue')), 1029: defineAsyncComponent(() => import('../afterLoan/1029/Detail.vue')),
'1030': defineAsyncComponent(() => import('../afterLoan/1030/Detail.vue')), 1030: defineAsyncComponent(() => import('../afterLoan/1030/Detail.vue')),
'1031': defineAsyncComponent(() => import('../afterLoan/1031/Detail.vue')), 1031: defineAsyncComponent(() => import('../afterLoan/1031/Detail.vue')),
'1032': defineAsyncComponent(() => import('../afterLoan/1032/Detail.vue')), 1032: defineAsyncComponent(() => import('../afterLoan/1032/Detail.vue')),
'1033': defineAsyncComponent(() => import('../afterLoan/1033/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切换回调 // tab切换回调
const tabChange = (tab: TabsPaneContext, event: Event) => { const tabChange = (tab: TabsPaneContext, event: Event) => {
@ -997,6 +1005,7 @@ const getDetail = async () => {
if (e) { if (e) {
if (e.personalRiskDegreeStrategySelectedStatus) e.personalRiskDegreeStrategySelectedStatus = +e.personalRiskDegreeStrategySelectedStatus; if (e.personalRiskDegreeStrategySelectedStatus) e.personalRiskDegreeStrategySelectedStatus = +e.personalRiskDegreeStrategySelectedStatus;
if (e.enterpriseRiskDegreeStrategySelectedStatus) e.enterpriseRiskDegreeStrategySelectedStatus = +e.enterpriseRiskDegreeStrategySelectedStatus; if (e.enterpriseRiskDegreeStrategySelectedStatus) e.enterpriseRiskDegreeStrategySelectedStatus = +e.enterpriseRiskDegreeStrategySelectedStatus;
if (e.enterpriseQuotaModelSelectedStatus) e.enterpriseQuotaModelSelectedStatus = +e.enterpriseQuotaModelSelectedStatus;
e.enterpriseQuotaModel = e?.enterpriseQuotaModel?.split(',').map((e) => +e); e.enterpriseQuotaModel = e?.enterpriseQuotaModel?.split(',').map((e) => +e);
e.reviewSignature = e?.reviewSignature?.length ? e.reviewSignature[0] : ''; e.reviewSignature = e?.reviewSignature?.length ? e.reviewSignature[0] : '';
e.approvalSignature = e?.approvalSignature?.length ? e.approvalSignature[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( watch(
() => route.query, () => 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]; const { tacticsId } = form.bankRiskControlAllocationTacticsList[i];
curRow.value = { curRow.value = {
strategyId: tacticsId, strategyId: tacticsId,
strategyName: row.blackList.find((e) => e.strategyId === tacticsId)?.strategyName, 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]}策略`; curPreviewTitle.value = `查看${assessNames[i]}策略`;
visible.value = true; 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]; const { tacticsId } = form.creditScoringStrategyList[i];
curRow.value = { curRow.value = {
id: tacticsId, id: tacticsId,
}; };
curPreview.value = i ? '513' : '512'; await loadComponent(i ? '513' : '512');
curPreviewTitle.value = `查看${i ? '企业' : '个人'}信用评分策略`; curPreviewTitle.value = `查看${i ? '企业' : '个人'}信用评分策略`;
visible.value = true; 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]; const { tacticsId } = form.postLoanSelectionStrategyList[i];
curRow.value = { curRow.value = {
strategyId: tacticsId, strategyId: tacticsId,
strategyName: row.blackList.find((e) => e.strategyId === tacticsId)?.strategyName, 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]}策略`; curPreviewTitle.value = `查看${afterNames[i]}策略`;
visible.value = true; visible.value = true;
}; };

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

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

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

@ -16,49 +16,62 @@
</el-sub-menu> </el-sub-menu>
</el-menu> </el-menu>
<div class="right"> <div class="right">
<component :is="curMenu" /> <component v-if="loadedComponents[activeComponent]"
:is="loadedComponents[activeComponent]" />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <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 { getProcessInformationBasedOnRoles } from '@/api/judgment';
import { useRouter, useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router';
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const curMenu = ref<string>(route.query.id);
const list = ref<Array<Record<string, any>>>([]); const list = ref<Array<Record<string, any>>>([]);
const dynamicComponentMap = { const curMenu = computed({
'772': defineAsyncComponent(() => import('./772/Index.vue')), get() {
'773': defineAsyncComponent(() => import('./773.vue')), return route.query.id;
'935': defineAsyncComponent(() => import('./935/Index.vue')), },
'936': defineAsyncComponent(() => import('./936/Index.vue')), 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 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 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 getList = async () => {
const { process } = await getProcessInformationBasedOnRoles(68); const { process } = await getProcessInformationBasedOnRoles(68);
// eslint-disable-next-line no-unused-expressions
!curMenu.value && handleSelect(process[0].recordChildren[0].id);
list.value = process; list.value = process;
handleSelect(curMenu.value || process[0].recordChildren[0].id);
}; };
onMounted(getList); 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

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

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

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

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

Write Preview
Loading…
Cancel
Save