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 ec99648a44
commit 9cdbe2dbe7
3 changed files with 67 additions and 151 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. 4
      .env
  2. 14
      src/styles/index.scss
  3. 182
      src/views/product/strategy/CardList.vue

4
.env
Unescape View File

@ -2,8 +2,8 @@ VITE_APP_TITLE=金融产品设计及数字化营销沙盘
VITE_PORT=9520 VITE_PORT=9520
# VITE_PROXY=http://192.168.31.125:8080 # VITE_PROXY=http://192.168.31.125:8080
VITE_PUBLIC_PATH=./ VITE_PUBLIC_PATH=./
VITE_BASE_API=http://192.168.31.217:9000 # VITE_BASE_API=http://192.168.31.217:9000
# VITE_BASE_API=http://121.37.12.51 VITE_BASE_API=http://121.37.12.51
# VITE_BASE_API=https://www.occupationlab.com # VITE_BASE_API=https://www.occupationlab.com
VITE_I18N_LOCALE=zh-cn VITE_I18N_LOCALE=zh-cn
VITE_I18N_FALLBACK_LOCALE=zh-cn VITE_I18N_FALLBACK_LOCALE=zh-cn

14
src/styles/index.scss
Unescape View File

@ -49,9 +49,7 @@ body {
// global css // global css
.block { .block {
@apply p-5; @apply p-5 rounded-lg bg-white;
@apply rounded-lg;
@apply bg-white;
} }
.inline-form .el-form-item { .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; @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 { // .c-auto {
// @apply w-[calc(100vw-533px)] max-h-[calc(100vh-160px)] overflow-auto; // @apply w-[calc(100vw-533px)] max-h-[calc(100vh-160px)] overflow-auto;
// } // }
.c-table { .c-table {
@apply rounded-[10px]; @apply rounded-[10px];
th.el-table__cell { th.el-table__cell {
@apply bg-[#F8FBFC]; @apply bg-[#F8FBFC];
} }

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

@ -1,145 +1,59 @@
<template> <template>
<div class="block card-list py-0"> <div v-if="list.length">
<el-tabs v-model="curTab" <div class="menu-card">
@tab-click="tabChange"> <el-menu class="left"
<el-tab-pane label="准入策略" :default-active="curMenu"
name="tab1"> @select="handleSelect">
<div class="flex"> <el-sub-menu v-for="(item, i) in list"
<div class="left">
<ul v-if="list[0] && list[0]?.recordChildren"
class="products">
<li v-for="(item, i) in list[0]?.recordChildren"
:key="i" :key="i"
:class="{ active: item.id === id }" :index="String(item.id)">
@click="switchProduct(item.id)"> <template #title>
<h6>{{ item.name }}</h6> <span>{{ item.name }}</span>
<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> </template>
</el-popconfirm> <el-menu-item v-for="(child, j) in item?.recordChildren"
<h6>{{ item.scoreCardName }}</h6> :key="j"
<p class="type">{{ item.scoringObject ? '企业' : '个人' }}</p> :index="String(child.id)">{{ child.name }}</el-menu-item>
<p class="meta">{{ item.description }}</p> </el-sub-menu>
</li> </el-menu>
</ul>
</div>
<div class="right"> <div class="right">
<Credit @getList="getList" /> <component :is="curMenu"></component>
</div> </div>
</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> </div>
</template> </template>
<script setup lang="ts"> <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 { getProcessInformationBasedOnRoles } from '@/api/judgment';
import { delCredit, listCredit } from '@/api/model'; import { delCredit, listCredit } from '@/api/model';
import { useRouter, useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus';
import { getIds } from '@/utils/common'; 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 router = useRouter();
const route = useRoute(); const route = useRoute();
const curTab = ref<string>('tab1'); const curMenu = ref<string>(route.query.id);
const list = ref<Array<Record<string, any>>>([]); 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 id = computed(() => +route.query.id);
const creditId = computed(() => +route.query.creditId); const creditId = computed(() => +route.query.creditId);
const riskId = ref<number>(); 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) => { const switchProduct = (id: number) => {
@ -155,30 +69,24 @@ const switchProductRisk = (id: number) => {
}; };
// 列表 // 列表
const getList = async (refresh?: number) => { const getList = async (refresh?: number) => {
if (curTab.value === 'tab1') {
const { process } = await getProcessInformationBasedOnRoles(67); const { process } = await getProcessInformationBasedOnRoles(67);
// eslint-disable-next-line no-unused-expressions // eslint-disable-next-line no-unused-expressions
!id.value && switchProduct(process[0].recordChildren[0].id); !id.value && switchProduct(process[0].recordChildren[0].id);
list.value = process; 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;
}
}; };
onMounted(() => { onMounted(() => {
getList(); 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) => { const handleDelete = async (id: number) => {
await delCredit(id); await delCredit(id);
getList(1); getList(1);
@ -191,7 +99,7 @@ const toAdd = () => {
}; };
// tab切换回调 // tab切换回调
const tabChange = () => { const tabChange = () => {
if (curTab.value === 'tab3') riskId.value = 702; // if (curTab.value === 'tab3') riskId.value = 702;
getList(); getList();
}; };
</script> </script>

Write Preview
Loading…
Cancel
Save