From 44c5a142ad1fd73e2ebab00e8cc69c504545b530 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Tue, 7 May 2024 18:49:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E6=80=81=E5=BC=95=E5=85=A5=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/model.ts                            |  3 +
 src/views/product/afterLoan/CardList.vue    | 52 ++++++++-----
 src/views/product/bank/Config.vue           | 85 +++++++++++----------
 src/views/product/bank/Info.vue             | 64 +++++++++++-----
 src/views/product/interestRate/CardList.vue | 59 ++++++++------
 src/views/product/strategy/150/Detail.vue   | 19 ++++-
 src/views/product/strategy/CardList.vue     | 81 +++++++++++---------
 7 files changed, 223 insertions(+), 140 deletions(-)

diff --git a/src/api/model.ts b/src/api/model.ts
index aa91d69..79a2a50 100644
--- a/src/api/model.ts
+++ b/src/api/model.ts
@@ -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;
diff --git a/src/views/product/afterLoan/CardList.vue b/src/views/product/afterLoan/CardList.vue
index 2c87112..7ca8a74 100644
--- a/src/views/product/afterLoan/CardList.vue
+++ b/src/views/product/afterLoan/CardList.vue
@@ -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>
diff --git a/src/views/product/bank/Config.vue b/src/views/product/bank/Config.vue
index 9109286..e61e53c 100644
--- a/src/views/product/bank/Config.vue
+++ b/src/views/product/bank/Config.vue
@@ -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;
 };
diff --git a/src/views/product/bank/Info.vue b/src/views/product/bank/Info.vue
index c7deaf8..ee22bf3 100644
--- a/src/views/product/bank/Info.vue
+++ b/src/views/product/bank/Info.vue
@@ -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;
 };
 
diff --git a/src/views/product/interestRate/CardList.vue b/src/views/product/interestRate/CardList.vue
index 3448687..e686bc0 100644
--- a/src/views/product/interestRate/CardList.vue
+++ b/src/views/product/interestRate/CardList.vue
@@ -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>
diff --git a/src/views/product/strategy/150/Detail.vue b/src/views/product/strategy/150/Detail.vue
index 7c37520..c030fa8 100644
--- a/src/views/product/strategy/150/Detail.vue
+++ b/src/views/product/strategy/150/Detail.vue
@@ -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>
 
diff --git a/src/views/product/strategy/CardList.vue b/src/views/product/strategy/CardList.vue
index d8e7479..3d7ff2e 100644
--- a/src/views/product/strategy/CardList.vue
+++ b/src/views/product/strategy/CardList.vue
@@ -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>