|
|
@@ -1,72 +1,82 @@
|
|
|
<template>
|
|
|
<a-layout class="layout-top">
|
|
|
- <a-layout-header class="m-layout-header">
|
|
|
- <div>深圳市多元世纪信息技术股份有限公司</div>
|
|
|
- <div class="m-layout-header-right">
|
|
|
- <div>
|
|
|
- <span>{{ username }}（2500000001），您好！</span>
|
|
|
- </div>
|
|
|
- <div class="relative">
|
|
|
- <a-input-search ref="userNameInput" class="searchInput" placeholder="请输入代码/名称" @pressEnter="search" >
|
|
|
- </a-input-search>
|
|
|
- <!-- <a-icon type="search" /> -->
|
|
|
- </div>
|
|
|
- <div class="news-container">
|
|
|
- <a-badge dot @click="chooseSetMenu('notice')">
|
|
|
- <svg class="icon svg-icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-xiaoxi"></use>
|
|
|
- </svg>
|
|
|
- </a-badge>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <a-popover v-model:visible="visible" trigger="click" placement="bottomRight">
|
|
|
- <template #content>
|
|
|
- <div v-for="item in setMenu" @click="chooseSetMenu(item.path)" :key="item.path">{{item.name}}</div>
|
|
|
- </template>
|
|
|
- <a-avatar :size="24">
|
|
|
- <template #icon>
|
|
|
- <UserOutlined />
|
|
|
- </template>
|
|
|
- </a-avatar>
|
|
|
- </a-popover>
|
|
|
- <Setting />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </a-layout-header>
|
|
|
- <a-layout class="middleLayout">
|
|
|
- <a-layout-sider class="m-layout-left"
|
|
|
- width="180"
|
|
|
- v-model:collapsed="collapsed"
|
|
|
- @collapse="collapse"
|
|
|
- collapsible>
|
|
|
- <a-menu theme="dark"
|
|
|
- mode="inline"
|
|
|
- class="left-menu"
|
|
|
- v-model:selectedKeys="selectedKeys"
|
|
|
- v-model:openKeys="openKeys"
|
|
|
- @click="menuClick">
|
|
|
- <a-sub-menu v-for="item in menuList"
|
|
|
- :key="item.code">
|
|
|
- <template #title>
|
|
|
- <span>
|
|
|
- <svg class="icon svg-icon"
|
|
|
- aria-hidden="true">
|
|
|
- <use :xlink:href="fontIcon(item.code)"></use>
|
|
|
- </svg>
|
|
|
- <span class="menu-item_title"
|
|
|
- v-show="!collapsed">{{ item.title }}</span>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- <a-menu-item :key="subItem.code"
|
|
|
- v-for="subItem in item.children">
|
|
|
- <span>{{ subItem.title }}</span>
|
|
|
- </a-menu-item>
|
|
|
- </a-sub-menu>
|
|
|
- </a-menu>
|
|
|
- </a-layout-sider>
|
|
|
- <a-layout-content :style="{ background: '#0E0E0F', flex: 1 }">
|
|
|
- <router-view />
|
|
|
- </a-layout-content>
|
|
|
+ <a-layout-header class="m-layout-header">
|
|
|
+ <div>深圳市多元世纪信息技术股份有限公司</div>
|
|
|
+ <div class="m-layout-header-right">
|
|
|
+ <div>
|
|
|
+ <span>{{ username }}，您好！</span>
|
|
|
+ </div>
|
|
|
+ <div class="relative">
|
|
|
+ <a-input-search ref="userNameInput"
|
|
|
+ class="searchInput"
|
|
|
+ readonly
|
|
|
+ placeholder="请输入代码/名称"
|
|
|
+ @pressEnter="search">
|
|
|
+ </a-input-search>
|
|
|
+ <!-- <a-icon type="search" /> -->
|
|
|
+ </div>
|
|
|
+ <div class="news-container">
|
|
|
+ <!-- <a-badge
|
|
|
+ @click="chooseSetMenu('notice')">
|
|
|
+ <svg class="icon svg-icon"
|
|
|
+ aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-xiaoxi"></use>
|
|
|
+ </svg>
|
|
|
+ </a-badge> -->
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <!-- <a-popover v-model:visible="visible"
|
|
|
+ trigger="click"
|
|
|
+ placement="bottomRight">
|
|
|
+ <template #content>
|
|
|
+ <div v-for="item in setMenu"
|
|
|
+ @click="chooseSetMenu(item.path)"
|
|
|
+ :key="item.path">{{item.name}}</div>
|
|
|
+ </template>
|
|
|
+ <a-avatar :size="24">
|
|
|
+ <template #icon>
|
|
|
+ <UserOutlined />
|
|
|
+ </template>
|
|
|
+ </a-avatar>
|
|
|
+ </a-popover> -->
|
|
|
+ <Setting />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-layout-header>
|
|
|
+ <a-layout class="middleLayout">
|
|
|
+ <a-layout-sider class="m-layout-left"
|
|
|
+ width="180"
|
|
|
+ v-model:collapsed="collapsed"
|
|
|
+ @collapse="collapse"
|
|
|
+ collapsible>
|
|
|
+ <a-menu theme="dark"
|
|
|
+ mode="inline"
|
|
|
+ class="left-menu"
|
|
|
+ v-model:selectedKeys="selectedKeys"
|
|
|
+ v-model:openKeys="openKeys"
|
|
|
+ @click="menuClick">
|
|
|
+ <a-sub-menu v-for="item in menuList"
|
|
|
+ :key="item.code">
|
|
|
+ <template #title>
|
|
|
+ <span>
|
|
|
+ <svg class="icon svg-icon"
|
|
|
+ aria-hidden="true">
|
|
|
+ <use :xlink:href="fontIcon(item.code)"></use>
|
|
|
+ </svg>
|
|
|
+ <span class="menu-item_title"
|
|
|
+ v-show="!collapsed">{{ item.title }}</span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <a-menu-item :key="subItem.code"
|
|
|
+ v-for="subItem in item.children">
|
|
|
+ <span>{{ subItem.title }}</span>
|
|
|
+ </a-menu-item>
|
|
|
+ </a-sub-menu>
|
|
|
+ </a-menu>
|
|
|
+ </a-layout-sider>
|
|
|
+ <a-layout-content :style="{ background: '#0E0E0F', flex: 1 }">
|
|
|
+ <router-view />
|
|
|
+ </a-layout-content>
|
|
|
</a-layout>
|
|
|
</a-layout>
|
|
|
</template>
|
|
|
@@ -86,53 +96,53 @@ const handleMenu = () => {
|
|
|
const selectedKeys = ref<string[]>(['1-1']);
|
|
|
const openKeys = ref<string[]>(['1']);
|
|
|
const preOpenKeys = ref<string[]>(['1']);
|
|
|
- // const menuList = APP.getRef('menus');
|
|
|
- const menuList = [
|
|
|
- {
|
|
|
- key: '1',
|
|
|
- title: '市场',
|
|
|
- code: 'market',
|
|
|
- children: [
|
|
|
- {
|
|
|
- key: '1-1',
|
|
|
- title: '现货贸易',
|
|
|
- code: ''
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- key: '2',
|
|
|
- title: '查询',
|
|
|
- code: 'search',
|
|
|
- children: [
|
|
|
- {
|
|
|
- key: '2-1',
|
|
|
- title: '单据记录',
|
|
|
- code: ''
|
|
|
- },
|
|
|
- {
|
|
|
- key: '2-2',
|
|
|
- title: '资金流水',
|
|
|
- code: ''
|
|
|
- },
|
|
|
- {
|
|
|
- key: '2-3',
|
|
|
- title: '出入库',
|
|
|
- code: ''
|
|
|
- },
|
|
|
- {
|
|
|
- key: '2-4',
|
|
|
- title: '登录日志',
|
|
|
- code: ''
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- key: '3',
|
|
|
- title: '报表',
|
|
|
- code: 'report'
|
|
|
- },
|
|
|
- ];
|
|
|
+ const menuList = APP.getRef('menus');
|
|
|
+ // const menuList = [
|
|
|
+ // {
|
|
|
+ // key: '1',
|
|
|
+ // title: '市场',
|
|
|
+ // code: 'market',
|
|
|
+ // children: [
|
|
|
+ // {
|
|
|
+ // key: '1-1',
|
|
|
+ // title: '现货贸易',
|
|
|
+ // code: ''
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // key: '2',
|
|
|
+ // title: '查询',
|
|
|
+ // code: 'search',
|
|
|
+ // children: [
|
|
|
+ // {
|
|
|
+ // key: '2-1',
|
|
|
+ // title: '单据记录',
|
|
|
+ // code: ''
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // key: '2-2',
|
|
|
+ // title: '资金流水',
|
|
|
+ // code: ''
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // key: '2-3',
|
|
|
+ // title: '出入库',
|
|
|
+ // code: ''
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // key: '2-4',
|
|
|
+ // title: '登录日志',
|
|
|
+ // code: ''
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // key: '3',
|
|
|
+ // title: '报表',
|
|
|
+ // code: 'report'
|
|
|
+ // },
|
|
|
+ // ];
|
|
|
const router = useRouter();
|
|
|
// 控制菜单是否隐藏
|
|
|
function collapse(collapsed: boolean) {
|
|
|
@@ -221,7 +231,7 @@ export default defineComponent({
|
|
|
const router = useRouter();
|
|
|
|
|
|
initData(() => {
|
|
|
- // 处理路由跳转到菜单栏里第一个队员的页面
|
|
|
+ // 处理路由跳转到菜单栏里第一个对应的页面
|
|
|
const list = unref(menuList);
|
|
|
if (list.length && list[0].children && list[0].children.length) {
|
|
|
const code = list[0].children[0].code;
|
|
|
@@ -286,7 +296,6 @@ export default defineComponent({
|
|
|
.ant-input-search-icon {
|
|
|
color: @m-grey10;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
// .relative {
|
huangbin