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

准入模型左侧导航改成分级菜单

Browse Source
master
yujialong 8 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
Split 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_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

14
src/styles/index.scss
Unescape View File

@ -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];
}

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

@ -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"
<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"
: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" />
:index="String(item.id)">
<template #title>
<span>{{ item.name }}</span>
</template>
</el-popconfirm>
<h6>{{ item.scoreCardName }}</h6>
<p class="type">{{ item.scoringObject ? '企业' : '个人' }}</p>
<p class="meta">{{ item.description }}</p>
</li>
</ul>
</div>
<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">
<Credit @getList="getList" />
<component :is="curMenu"></component>
</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>
</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;
}
};
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>

Write Preview
Loading…
Cancel
Save