|
|
<template>
|
|
|
<!--
|
|
|
* title：layout 侧边栏
|
|
|
-->
|
|
|
<div class="p-layout-aside g_flex_column_between" :class="state.collapsed ? 'g_w_80' : 'g_w_199'">
|
|
|
<!-- 顶部logo -->
|
|
|
<div class="m-logo g_flex_row_start_c g_cursor_point g_flex_none g_pl_24" @click="goHome">
|
|
|
<div class="logo-box g_mr_2">
|
|
|
<img src="../assets/image/logo.svg" alt class="img" />
|
|
|
</div>
|
|
|
<div class="g_flex_column_center g_fs_16 g_fw_600" v-if="!state.collapsed">投资数据系统</div>
|
|
|
</div>
|
|
|
<!-- 中间菜单 -->
|
|
|
<div class="m-menu g_clear_scroll g_flex_1">
|
|
|
<a-menu v-model:selectedKeys="state.selectedKeys" v-model:open-keys="state.openKeys" mode="inline" :items="items" @click="onOpenClick" :inline-collapsed="state.collapsed"></a-menu>
|
|
|
</div>
|
|
|
<!-- 底部折叠按钮 -->
|
|
|
<div class="m-toggle g_flex_none g_border_top_e g_flex_column_center g_h_48" :class="!state.collapsed ? 'g_flex_row_start g_ml_0' : 'g_flex_row_center'" v-show="items.length > 0">
|
|
|
<div class="btn g_cursor_point g_flex_c" @click="toggleCollapsed">
|
|
|
<MenuUnfoldOutlined v-if="state.collapsed" />
|
|
|
<MenuFoldOutlined v-else />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { createFromIconfontCN } from "@ant-design/icons-vue";
|
|
|
// import { menuApi } from "../api/menu";
|
|
|
import { h, reactive, onMounted, ref, watch } from "vue";
|
|
|
import { TagsOutlined, HomeOutlined, ShoppingOutlined,MessageOutlined,FileProtectOutlined, VideoCameraOutlined,UserOutlined,UsergroupAddOutlined, ApartmentOutlined, TeamOutlined, ContainerOutlined, AccountBookOutlined, BarChartOutlined, MailOutlined, SettingOutlined, AuditOutlined, SketchOutlined, MenuUnfoldOutlined, MenuFoldOutlined, SolutionOutlined } from "@ant-design/icons-vue";
|
|
|
import { useStore } from "../stores/counter.ts";
|
|
|
import { useRouter, useRoute } from "vue-router";
|
|
|
import { mockMenuList } from "../utils/mock.js";
|
|
|
|
|
|
const storeJS = useStore();
|
|
|
const router = useRouter();
|
|
|
const route = useRoute();
|
|
|
|
|
|
function getItem(label, url, key, icon, children, type) {
|
|
|
return {
|
|
|
key,
|
|
|
url,
|
|
|
icon,
|
|
|
children,
|
|
|
label,
|
|
|
type,
|
|
|
};
|
|
|
}
|
|
|
const menuList = ref([]);
|
|
|
const items = reactive([]);
|
|
|
onMounted(() => {
|
|
|
state.rootSubmenuKeys = [];
|
|
|
// menuApi().then((data) => {})
|
|
|
// console.log('原始数据：',data.data.menus);
|
|
|
console.log("菜单mock：", mockMenuList.menus);
|
|
|
menuList.value = mockMenuList.menus;
|
|
|
menuList.value.forEach((item, index) => {
|
|
|
state.rootSubmenuKeys.push("sub_menu_" + item.id + "_$$_not_set_key");
|
|
|
if (item.childrenList.length > 0) {
|
|
|
let childrens = reactive([]);
|
|
|
for (var i = 0; i != item.childrenList.length; ++i) {
|
|
|
childrens.push(getItem(item.childrenList[i].title, item.id, item.childrenList[i].component));
|
|
|
}
|
|
|
switch (item.menuName) {
|
|
|
case "JobManagement":
|
|
|
items.push(getItem(item.title, item.id, item.component, () => h(ShoppingOutlined), childrens));
|
|
|
break;
|
|
|
case "NotesManagement":
|
|
|
items.push(getItem(item.title, item.id, item.component, () => h(SolutionOutlined), childrens));
|
|
|
break;
|
|
|
case "upstreamAnddownstream":
|
|
|
items.push(getItem(item.title, item.id, item.component, () => h(ApartmentOutlined), childrens));
|
|
|
break;
|
|
|
case "TownsmanManagement":
|
|
|
items.push(getItem(item.title, item.id, item.component, () => h(UserOutlined), childrens));
|
|
|
break;
|
|
|
case "AgencyManagement":
|
|
|
items.push(getItem(item.title, item.id, item.component, () => h(ApartmentOutlined), childrens));
|
|
|
break;
|
|
|
case "teammanagement":
|
|
|
items.push(getItem(item.title, item.id, item.component, () => h(TeamOutlined), childrens));
|
|
|
break;
|
|
|
case "OrderManagement":
|
|
|
items.push(getItem(item.title, item.id, item.component, () => h(ContainerOutlined), childrens));
|
|
|
break;
|
|
|
case "BillCenter":
|
|
|
items.push(getItem(item.title, item.id, item.component, () => h(AccountBookOutlined), childrens));
|
|
|
break;
|
|
|
case "group":
|
|
|
items.push(getItem(item.title, item.id, item.component, () => h(BarChartOutlined), childrens));
|
|
|
break;
|
|
|
case "container":
|
|
|
items.push(getItem(item.title, item.id, item.component, () => h(MailOutlined), childrens));
|
|
|
break;
|
|
|
case "GlobalConfig":
|
|
|
items.push(getItem(item.title, item.id, item.component, () => h(SettingOutlined), childrens));
|
|
|
break;
|
|
|
case "FirmConfig":
|
|
|
items.push(getItem(item.title, item.id, item.component, () => h(AuditOutlined), childrens));
|
|
|
break;
|
|
|
// case 'TagManagement':
|
|
|
// items.push(getItem(item.title, item.id, item.component, () => h(TagsOutlined), childrens))
|
|
|
// break
|
|
|
// case "ServiceMarket":
|
|
|
// items.push(getItem(item.title,item.id, item.component, () => h(AuditOutlined), childrens));
|
|
|
// break;
|
|
|
default:
|
|
|
break;
|
|
|
}
|
|
|
} else {
|
|
|
switch (item.menuName) {
|
|
|
case "HomePage":
|
|
|
items.push(getItem(item.title, item.id, item.component, () => h(UsergroupAddOutlined)));
|
|
|
break;
|
|
|
case "projectData":
|
|
|
items.push(getItem(item.title, item.id, item.component, () => h(FileProtectOutlined)));
|
|
|
break;
|
|
|
case "personData":
|
|
|
items.push(getItem(item.title, item.id, item.component, () => h(UserOutlined)));
|
|
|
break;
|
|
|
case "message":
|
|
|
items.push(getItem(item.title, item.id, item.component, () => h(MessageOutlined)));
|
|
|
break;
|
|
|
case "record":
|
|
|
items.push(getItem(item.title, item.id, item.component, () => h(VideoCameraOutlined)));
|
|
|
break;
|
|
|
case "ServiceMarket":
|
|
|
items.push(getItem(item.title, item.id, item.component, () => h(SketchOutlined)));
|
|
|
break;
|
|
|
default:
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
getInit(route);
|
|
|
});
|
|
|
watch(route, (val) => {
|
|
|
getInit(val);
|
|
|
});
|
|
|
const getInit = ($data) => {
|
|
|
let _index = -1,
|
|
|
_path = $data.path;
|
|
|
/* 特殊处理：二级页面。
|
|
|
* 二级页面来源：view/components/breadcrumb.vue
|
|
|
*/
|
|
|
console.log("侧边栏：", $data);
|
|
|
switch (_path) {
|
|
|
case "/merchantManagement/roleManagementDetail":
|
|
|
_path = "/merchantManagement/roleManagement";
|
|
|
break;
|
|
|
case "/merchantManagement/billDetail":
|
|
|
_path = "/merchantManagement/mineBill";
|
|
|
break;
|
|
|
case "/merchantManagement/shareJobDetail":
|
|
|
if ($data.query.form == "joblist") {
|
|
|
_path = "/merchantManagement/jobList";
|
|
|
} else {
|
|
|
_path = "/merchantManagement/shareJob";
|
|
|
}
|
|
|
break;
|
|
|
case "/merchantManagement/jobDetail":
|
|
|
_path = "/merchantManagement/jobList";
|
|
|
break;
|
|
|
case "/merchantManagement/recordJob":
|
|
|
_path = "/merchantManagement/jobList";
|
|
|
break;
|
|
|
case "/merchantManagement/jobForm":
|
|
|
_path = "/merchantManagement/jobList";
|
|
|
break;
|
|
|
case "/merchantManagement/upstreamDetail":
|
|
|
_path = "/merchantManagement/upstream";
|
|
|
break;
|
|
|
case "/merchantManagement/downstreamDetail":
|
|
|
_path = "/merchantManagement/downstream";
|
|
|
break;
|
|
|
case "/merchantManagement/recruit":
|
|
|
_path = "/merchantManagement/miniProgramList";
|
|
|
break;
|
|
|
default:
|
|
|
break;
|
|
|
}
|
|
|
/* 侧边栏存在页面处理 */
|
|
|
items.forEach((item, index) => {
|
|
|
if (item.children) {
|
|
|
// 多级
|
|
|
item.children.forEach((itm, inx) => {
|
|
|
if (itm.key == _path + ".vue") {
|
|
|
_index = index + "-" + inx;
|
|
|
}
|
|
|
});
|
|
|
} else {
|
|
|
// 一级
|
|
|
if (item.key == _path + ".vue") {
|
|
|
_index = index;
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
// 匹配
|
|
|
if (_index > -1 || _index) {
|
|
|
if (typeof _index == "number") {
|
|
|
// 一级
|
|
|
state.selectedKeys = [_path + ".vue"];
|
|
|
state.openKeys = [_path + ".vue"];
|
|
|
}
|
|
|
if (typeof _index == "string") {
|
|
|
// 多级
|
|
|
let _father = 0,
|
|
|
_son = 0;
|
|
|
_father = Number(_index.split("-")[0]);
|
|
|
_son = Number(_index.split("-")[1]);
|
|
|
if (items[_father].children) {
|
|
|
state.selectedKeys = [items[_father].children[_son].key];
|
|
|
state.openKeys = ["sub_menu_" + _father + "_$$_not_set_key"];
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const state = reactive({
|
|
|
collapsed: false,
|
|
|
rootSubmenuKeys: [],
|
|
|
openKeys: [],
|
|
|
selectedKeys: [],
|
|
|
});
|
|
|
const onOpenClick = (openKeys) => {
|
|
|
router.push({ path: openKeys.key.slice(0, -4) });
|
|
|
state.openKeys = [openKeys.keyPath[0]];
|
|
|
console.log([openKeys.keyPath[0]]);
|
|
|
};
|
|
|
|
|
|
const goHome = () => {
|
|
|
router.push("/merchantManagement/homePage");
|
|
|
};
|
|
|
|
|
|
const toggleCollapsed = () => {
|
|
|
state.collapsed = !state.collapsed;
|
|
|
storeJS.$state.layoutData.isToggle = state.collapsed;
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.anticon:before {
|
|
|
display: block !important;
|
|
|
}
|
|
|
.p-layout-aside {
|
|
|
height: 100vh;
|
|
|
border-right: 1px solid #eee;
|
|
|
.m-logo {
|
|
|
border-bottom: 1px solid #eee;
|
|
|
height: 56px;
|
|
|
.logo-box {
|
|
|
.img {
|
|
|
width: 30px;
|
|
|
height: auto;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.m-menu {
|
|
|
max-height: calc(100vh - 104px);
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
.m-toggle {
|
|
|
padding: 2px;
|
|
|
.btn {
|
|
|
width: 58px;
|
|
|
height: calc(100% - 0px);
|
|
|
padding-left: 16px;
|
|
|
padding-right: 16px;
|
|
|
color: #333;
|
|
|
border-radius: 8px;
|
|
|
margin-left: 2px;
|
|
|
i,
|
|
|
svg {
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
&:hover {
|
|
|
color: #1677ff;
|
|
|
background-color: rgba(0, 0, 0, 0.06);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
/deep/ .ant-menu-light.ant-menu-root.ant-menu-inline {
|
|
|
border-inline-end: 1px solid transparent;
|
|
|
}
|
|
|
</style>
|