From 9cdbe2dbe70dda837db5956098a7af5ddc6cf0ac Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Mon, 15 Apr 2024 13:52:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=87=86=E5=85=A5=E6=A8=A1=E5=9E=8B=E5=B7=A6?=
 =?UTF-8?q?=E4=BE=A7=E5=AF=BC=E8=88=AA=E6=94=B9=E6=88=90=E5=88=86=E7=BA=A7?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                                    |   4 +-
 src/styles/index.scss                   |  14 +-
 src/views/product/strategy/CardList.vue | 200 +++++++-----------------
 3 files changed, 67 insertions(+), 151 deletions(-)

diff --git a/.env b/.env
index 104e2c6..e2a3828 100644
--- a/.env
+++ b/.env
@@ -2,8 +2,8 @@ VITE_APP_TITLE=金融产品设计及数字化营销沙盘
 VITE_PORT=9520
 # VITE_PROXY=http://192.168.31.125:8080
 VITE_PUBLIC_PATH=./
-VITE_BASE_API=http://192.168.31.217:9000
-# VITE_BASE_API=http://121.37.12.51
+# VITE_BASE_API=http://192.168.31.217:9000
+VITE_BASE_API=http://121.37.12.51
 # VITE_BASE_API=https://www.occupationlab.com
 VITE_I18N_LOCALE=zh-cn
 VITE_I18N_FALLBACK_LOCALE=zh-cn
diff --git a/src/styles/index.scss b/src/styles/index.scss
index ede8654..9fa244c 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -49,9 +49,7 @@ body {
 
 // global css
 .block {
-  @apply p-5;
-  @apply rounded-lg;
-  @apply bg-white;
+  @apply p-5 rounded-lg bg-white;
 }
 
 .inline-form .el-form-item {
@@ -102,11 +100,21 @@ body {
     @apply flex-1 w-[calc(100vw-533px)] max-h-[calc(100vh-100px)] overflow-auto px-5 pt-2;
   }
 }
+.menu-card {
+  @apply flex;
+  .left {
+    @apply mr-4 rounded-lg border-r-0;
+  }
+  .right {
+    @apply flex-1 w-[calc(100vw-533px)] max-h-[calc(100vh-100px)] overflow-auto p-4 bg-white rounded-lg;
+  }
+}
 // .c-auto {
 //   @apply w-[calc(100vw-533px)] max-h-[calc(100vh-160px)] overflow-auto;
 // }
 .c-table {
   @apply rounded-[10px];
+
   th.el-table__cell {
     @apply bg-[#F8FBFC];
   }
diff --git a/src/views/product/strategy/CardList.vue b/src/views/product/strategy/CardList.vue
index fe67f50..17253c5 100644
--- a/src/views/product/strategy/CardList.vue
+++ b/src/views/product/strategy/CardList.vue
@@ -1,145 +1,59 @@
 <template>
-  <div class="block card-list py-0">
-    <el-tabs v-model="curTab"
-             @tab-click="tabChange">
-      <el-tab-pane label="准入策略"
-                   name="tab1">
-        <div class="flex">
-          <div class="left">
-            <ul v-if="list[0] && list[0]?.recordChildren"
-                class="products">
-              <li v-for="(item, i) in list[0]?.recordChildren"
-                  :key="i"
-                  :class="{ active: item.id === id }"
-                  @click="switchProduct(item.id)">
-                <h6>{{ item.name }}</h6>
-                <p class="meta">{{ item.remark }}</p>
-              </li>
-            </ul>
-          </div>
-          <div class="right">
-            <div v-show="id == 150"
-                 class="c-auto">
-              <Com1 />
-            </div>
-            <div v-show="id == 151"
-                 class="c-auto">
-              <Com2 />
-            </div>
-            <div v-show="id == 152"
-                 class="c-auto">
-              <Com3 />
-            </div>
-            <div v-show="id == 153"
-                 class="c-auto">
-              <Com4 />
-            </div>
-            <div v-show="id == 154"
-                 class="c-auto">
-              <Com5 />
-            </div>
-            <div v-show="id == 155"
-                 class="c-auto">
-              <Com6 />
-            </div>
-            <div v-show="id == 156"
-                 class="c-auto">
-              <Com7 />
-            </div>
-          </div>
-        </div>
-      </el-tab-pane>
-      <el-tab-pane label="信用评分策略"
-                   name="tab2">
-        <div class="flex">
-          <div class="left">
-            <div class="flex justify-center items-center py-2 mb-3 text-sm text-[#006BFF] bg-[rgba(0,107,255,0.1)] border border-solid border-[#006BFF] rounded-[10px] cursor-pointer"
-                 @click="toAdd">
-              <el-icon class="mr-1"
-                       :size="16"
-                       color="#006BFF">
-                <Plus />
-              </el-icon>
-              新增评分卡
-            </div>
-            <ul class="products max-h-[calc(100vh-225px)]">
-              <li v-for="(item, i) in list1"
-                  :key="i"
-                  :class="{ active: item.id === creditId }"
-                  @click="switchProductCredit(item.id)">
-                <el-popconfirm title="您确定删除吗？"
-                               @confirm="handleDelete(item.id)">
-                  <template #reference>
-                    <img src="@/assets/images/trash.png"
-                         alt=""
-                         class="del" />
-                  </template>
-                </el-popconfirm>
-                <h6>{{ item.scoreCardName }}</h6>
-                <p class="type">{{ item.scoringObject ? '企业' : '个人' }}</p>
-                <p class="meta">{{ item.description }}</p>
-              </li>
-            </ul>
-          </div>
-          <div class="right">
-            <Credit @getList="getList" />
-          </div>
-        </div>
-      </el-tab-pane>
-      <el-tab-pane label="风险度策略"
-                   name="tab3">
-        <div class="flex">
-          <div class="left">
-            <ul class="products">
-              <li v-for="(item, i) in list2"
-                  :key="i"
-                  :class="{ active: item.id === riskId }"
-                  @click="switchProductRisk(item.id)">
-                <h6>{{ item.name }}</h6>
-                <p class="meta">{{ item.remark }}</p>
-              </li>
-            </ul>
-          </div>
-          <div class="right">
-            <Risk1 v-if="riskId === 702" />
-            <Risk2 v-else-if="riskId === 703" />
-            <Risk3 v-else-if="riskId === 704" />
-          </div>
-        </div>
-      </el-tab-pane>
-    </el-tabs>
+  <div v-if="list.length">
+    <div class="menu-card">
+      <el-menu class="left"
+               :default-active="curMenu"
+               @select="handleSelect">
+        <el-sub-menu v-for="(item, i) in list"
+                     :key="i"
+                     :index="String(item.id)">
+          <template #title>
+            <span>{{ item.name }}</span>
+          </template>
+          <el-menu-item v-for="(child, j) in item?.recordChildren"
+                        :key="j"
+                        :index="String(child.id)">{{ child.name }}</el-menu-item>
+        </el-sub-menu>
+      </el-menu>
+      <div class="right">
+        <component :is="curMenu"></component>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, watch, onMounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, defineAsyncComponent, getCurrentInstance } from 'vue';
 import { getProcessInformationBasedOnRoles } from '@/api/judgment';
 import { delCredit, listCredit } from '@/api/model';
 import { useRouter, useRoute } from 'vue-router';
 import { ElMessage } from 'element-plus';
 import { getIds } from '@/utils/common';
-import { Plus } from '@element-plus/icons-vue';
-import Com1 from './150.vue';
-import Com2 from './151.vue';
-import Com3 from './152.vue';
-import Com4 from './153.vue';
-import Com5 from './154.vue';
-import Com6 from './155.vue';
-import Com7 from './156.vue';
-import Credit from './Credit.vue';
-import Risk1 from './Risk1.vue';
-import Risk2 from './Risk2.vue';
-import Risk3 from './Risk3.vue';
 
 const router = useRouter();
 const route = useRoute();
-const curTab = ref<string>('tab1');
+const curMenu = ref<string>(route.query.id);
 const list = ref<Array<Record<string, any>>>([]);
-const list1 = ref<Array<Record<string, any>>>([]);
-const list2 = ref<Array<Record<string, any>>>([]);
 const id = computed(() => +route.query.id);
 const creditId = computed(() => +route.query.creditId);
 const riskId = ref<number>();
+const dynamicComponentMap = {
+  '150': defineAsyncComponent(() => import('./150.vue')),
+  '151': defineAsyncComponent(() => import('./151.vue')),
+  '152': defineAsyncComponent(() => import('./152.vue')),
+  '153': defineAsyncComponent(() => import('./153.vue')),
+  '154': defineAsyncComponent(() => import('./154.vue')),
+  '155': defineAsyncComponent(() => import('./155.vue')),
+  '156': defineAsyncComponent(() => import('./156.vue')),
+  '148': defineAsyncComponent(() => import('./Credit.vue')),
+  '702': defineAsyncComponent(() => import('./Risk1.vue')),
+  '703': defineAsyncComponent(() => import('./Risk2.vue')),
+  '704': defineAsyncComponent(() => import('./Risk3.vue')),
+};
+const app = getCurrentInstance().appContext.app;
+for (const [name, asyncComponent] of Object.entries(dynamicComponentMap)) {
+  app.component(name, asyncComponent);
+}
 
 // 准入策略切换
 const switchProduct = (id: number) => {
@@ -155,30 +69,24 @@ const switchProductRisk = (id: number) => {
 };
 // 列表
 const getList = async (refresh?: number) => {
-  if (curTab.value === 'tab1') {
-    const { process } = await getProcessInformationBasedOnRoles(67);
-    // eslint-disable-next-line no-unused-expressions
-    !id.value && switchProduct(process[0].recordChildren[0].id);
-    list.value = process;
-  } else if (curTab.value === 'tab2') {
-    const res = await listCredit({
-      ...getIds(),
-      pageNum: 1,
-      pageSize: 50,
-    });
-    // eslint-disable-next-line no-unused-expressions
-    res.data.length ? ((!route.query.add && !creditId.value) || refresh) && switchProductCredit(res.data[0].id) : toAdd();
-    list1.value = res.data;
-  } else {
-    riskId.value = 702;
-    const { process } = await getProcessInformationBasedOnRoles(149);
-    list2.value = process;
-  }
+  const { process } = await getProcessInformationBasedOnRoles(67);
+  // eslint-disable-next-line no-unused-expressions
+  !id.value && switchProduct(process[0].recordChildren[0].id);
+  list.value = process;
 };
 onMounted(() => {
   getList();
 });
-
+onBeforeUnmount(() => {
+  console.log('🚀 ~ onBeforeUnmount ~ app:', app);
+  app.component('148', null);
+  app.component('150', null);
+});
+const handleSelect = (key: string, keyPath: string[]) => {
+  curMenu.value = key;
+  router.push(`/product/strategy?i=${route.query.i}&role=${route.query.role}&id=${key}`);
+  console.log(key, keyPath, curMenu.value);
+};
 const handleDelete = async (id: number) => {
   await delCredit(id);
   getList(1);
@@ -191,7 +99,7 @@ const toAdd = () => {
 };
 // tab切换回调
 const tabChange = () => {
-  if (curTab.value === 'tab3') riskId.value = 702;
+  // if (curTab.value === 'tab3') riskId.value = 702;
   getList();
 };
 </script>