Skip to content

胡锦波 / org-manager-web

Go to a project
Commit 997e878b by 胡锦波
Options

1. init 侧边栏的基本配置处理

parent ff31e086
Inline Side-by-side
Showing with 141 additions and 32 deletions
src/installer/index.ts
...@@ -39,8 +39,11 @@ import { ...@@ -39,8 +39,11 @@ import {
Cascader, Cascader,
Carousel, Carousel,
CarouselItem, CarouselItem,
Collapse, Menu,
CollapseItem, MenuItem,
Submenu,
// Collapse,
// CollapseItem,
Form, Form,
FormItem FormItem
} from 'element-ui'; } from 'element-ui';
...@@ -111,7 +114,7 @@ Vue.use(Image); ...@@ -111,7 +114,7 @@ Vue.use(Image);
Vue.use(Tree); Vue.use(Tree);
Vue.use(Table); Vue.use(Table);
Vue.use(TableColumn); Vue.use(TableColumn);
Vue.use(Progress).use(Cascader).use(Carousel).use(CarouselItem).use(Collapse).use(CollapseItem).use(Form).use(FormItem); Vue.use(Progress).use(Cascader).use(Carousel).use(CarouselItem).use(Menu).use(MenuItem).use(Submenu).use(Form).use(FormItem);
// element ui 的loading注入稍有不同 // element ui 的loading注入稍有不同
Vue.use(Loading.directive); Vue.use(Loading.directive);
......
src/router/compatible-url.ts
...@@ -72,7 +72,14 @@ const setDirectionEnum4Url = function(routes: RouteConfig[], prefix = '') { ...@@ -72,7 +72,14 @@ const setDirectionEnum4Url = function(routes: RouteConfig[], prefix = '') {
*/ */
const setCompatibleUrl = function(routes: RouteConfig[]): RedirectPath[] { const setCompatibleUrl = function(routes: RouteConfig[]): RedirectPath[] {
setDirectionEnum4Url(routes); setDirectionEnum4Url(routes);
return compatibleUrl.map(i => { const isRemoveRepeatUrl = compatibleUrl.filter(i => {
if (i.oldPath === direction4AbsolutePathMap.get(i.direction)) {
return false;
}
return true;
});
return isRemoveRepeatUrl.map(i => {
return { return {
path: i.oldPath, path: i.oldPath,
redirect: direction4AbsolutePathMap.get(i.direction) redirect: direction4AbsolutePathMap.get(i.direction)
......
src/router/index.ts
...@@ -30,42 +30,42 @@ const routes: Array<RouteConfig> = [ ...@@ -30,42 +30,42 @@ const routes: Array<RouteConfig> = [
{ {
path: 'addressbook', path: 'addressbook',
component: () => import('@/views/pages/employ-management/address-book/address-book.vue'), component: () => import('@/views/pages/employ-management/address-book/address-book.vue'),
meta: { direction: Direction.AddressBook, title: MetaHeader.addressBook }, meta: { direction: Direction.AddressBook, title: MetaHeader.employManager.addressBook },
}, },
{ {
path: 'applicationrecord', path: 'applicationrecord',
component: () => import('@/views/pages/employ-management/application-record/application-record.vue'), component: () => import('@/views/pages/employ-management/application-record/application-record.vue'),
meta: { direction: Direction.ApplicationRecord, title: MetaHeader.applicationRecord }, meta: { direction: Direction.ApplicationRecord, title: MetaHeader.employManager.applicationRecord },
}, },
{ {
path: 'invoicerecord', path: 'invoicerecord',
component: () => import('@/views/pages/service-management/invoice-record/invoice-record.vue'), component: () => import('@/views/pages/service-management/invoice-record/invoice-record.vue'),
meta: { direction: Direction.InvoiceRecord, title: MetaHeader.invoiceRecord }, meta: { direction: Direction.InvoiceRecord, title: MetaHeader.serviceManagement.invoiceRecord },
}, },
{ {
path: 'Invoicetitles', path: 'Invoicetitles',
component: () => import('@/views/pages/service-management/invoice-titles/invoice-titles.vue'), component: () => import('@/views/pages/service-management/invoice-titles/invoice-titles.vue'),
meta: { direction: Direction.InvoiceTitles, title: MetaHeader.invoiceTitles }, meta: { direction: Direction.InvoiceTitles, title: MetaHeader.serviceManagement.invoiceTitles },
}, },
{ {
path: 'orginfo', path: 'orginfo',
component: () => import('@/views/pages/enterprise-management/enterprise-info/enterprise-info.vue'), component: () => import('@/views/pages/enterprise-management/enterprise-info/enterprise-info.vue'),
meta: { direction: Direction.EnterpriseInfo, title: MetaHeader.enterpriseInfo }, meta: { direction: Direction.EnterpriseInfo, title: MetaHeader.enterpriseManagement.enterpriseInfo },
}, },
{ {
path: 'applysetting', path: 'applysetting',
component: () => import('@/views/pages/enterprise-management/application-setting/application-setting.vue'), component: () => import('@/views/pages/enterprise-management/application-setting/application-setting.vue'),
meta: { direction: Direction.ApplicationSetting, title: MetaHeader.applicationSetting }, meta: { direction: Direction.ApplicationSetting, title: MetaHeader.enterpriseManagement.applicationSetting },
}, },
{ {
path: 'managersetting', path: 'managersetting',
component: () => import('@/views/pages/enterprise-management/manager-setting/manager-setting.vue'), component: () => import('@/views/pages/enterprise-management/manager-setting/manager-setting.vue'),
meta: { direction: Direction.ManagerSetting, title: MetaHeader.managerSetting }, meta: { direction: Direction.ManagerSetting, title: MetaHeader.enterpriseManagement.managerSetting },
}, },
{ {
path: 'managerlog', path: 'managerlog',
component: () => import('@/views/pages/enterprise-management/manager-log/manager-log.vue'), component: () => import('@/views/pages/enterprise-management/manager-log/manager-log.vue'),
meta: { direction: Direction.ManagerLog, title: MetaHeader.managerLog }, meta: { direction: Direction.ManagerLog, title: MetaHeader.enterpriseManagement.managerLog },
}, },
] ]
} }
......
src/router/meta-header.ts
export class MetaHeader { export class MetaHeader {
public static readonly root = '组织管理后台'; public static readonly root = '组织管理后台';
public static readonly home = '首页'; public static readonly home = '首页';
public static readonly addressBook = '通讯录'; public static readonly employManager = {
public static readonly applicationRecord = '申请加入记录'; root: "员工管理",
public static readonly invoiceTitles = '发票抬头'; addressBook: '通讯录',
public static readonly invoiceRecord = '发票记录'; applicationRecord: '申请加入记录'
public static readonly enterpriseInfo = '企业信息'; };
public static readonly applicationSetting = '申请加入设置';
public static readonly managerSetting = '管理员权限'; public static readonly serviceManagement = {
public static readonly managerLog = '管理员日志'; root: "服务管理",
invoiceTitles: '发票抬头',
invoiceRecord: '发票记录',
};
public static readonly enterpriseManagement = {
root: "企业管理",
enterpriseInfo: '企业信息',
applicationSetting: '申请加入设置',
managerSetting: '管理员权限',
managerLog: '管理员日志',
}
} }
src/views/pages/aside-panels/aside-panels.vue
<template> <template>
<div class="aside-panels-container"> <div class="aside-panels-container">
<el-collapse class="aside-collapse"> <el-menu
<el-collapse-item class="aside-menu"
:name="item.title" @select="changeMenu"
v-for="(item, index) in items" :default-active="defaultActive"
:key="'m' + index" >
<components
v-for="(item, ind) in items"
:key="`it-${ind}`"
:index="item.content ? item.key : `base${linkLine}${item.key}`"
:is="item.content ? 'el-submenu' : 'el-menu-item'"
> >
<template slot="title"> <template slot="title">
{{ item.title }} <div class="menu-title">
<!-- <img class="menu-title-icon" :src="item.icon" /> -->
<div class="menu-title-name">{{ item.title }}</div>
</div>
</template> </template>
</el-collapse-item>
</el-collapse> <template v-if="item.content && item.content.length">
<el-menu-item
v-for="(con, i) in item.content"
:key="`sub-${i}`"
:index="`${item.key}${linkLine}${con.key}`"
>
{{ con.title }}
</el-menu-item>
</template>
</components>
</el-menu>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import logger from "@/api/logger";
import { Direction } from "@/router";
import { MetaHeader } from "@/router/meta-header";
import { Component, Vue } from "vue-property-decorator"; import { Component, Vue } from "vue-property-decorator";
@Component({ components: {} }) @Component({ components: {} })
export default class Asidepanels extends Vue { export default class Asidepanels extends Vue {
private defaultActive = MetaHeader.home;
private linkLine = "-";
private items = [ private items = [
{ {
title: "`132", key: Direction.Home,
title: MetaHeader.home,
direction: Direction.Home,
icon: "",
},
{
key: MetaHeader.employManager.root,
title: MetaHeader.employManager.root,
icon: "",
content: [
{
key: Direction.AddressBook,
direction: Direction.AddressBook,
title: MetaHeader.employManager.addressBook,
},
{
key: Direction.ApplicationRecord,
direction: Direction.ApplicationRecord,
title: MetaHeader.employManager.applicationRecord,
},
],
},
{
key: MetaHeader.serviceManagement.root,
title: MetaHeader.serviceManagement.root,
icon: "",
content: [
{
key: Direction.InvoiceTitles,
direction: Direction.InvoiceTitles,
title: MetaHeader.serviceManagement.invoiceTitles,
},
],
},
{
key: MetaHeader.enterpriseManagement.root,
title: MetaHeader.enterpriseManagement.root,
icon: "",
content: [
{
key: Direction.EnterpriseInfo,
direction: Direction.EnterpriseInfo,
title: MetaHeader.enterpriseManagement.enterpriseInfo,
},
{
key: Direction.ApplicationSetting,
direction: Direction.ApplicationSetting,
title: MetaHeader.enterpriseManagement.applicationSetting,
},
{
key: Direction.ManagerSetting,
direction: Direction.ManagerSetting,
title: MetaHeader.enterpriseManagement.managerSetting,
},
{
key: Direction.ManagerLog,
direction: Direction.ManagerLog,
title: MetaHeader.enterpriseManagement.managerLog,
},
],
}, },
]; ];
private changeMenu(key: string) {
const arr = key.split(this.linkLine);
const direction = +arr[arr.length - 1] as Direction;
this.go(direction);
}
} }
</script> </script>
...@@ -32,16 +120,16 @@ ...@@ -32,16 +120,16 @@
.aside-panels-container { .aside-panels-container {
width: 240px; width: 240px;
/deep/ .aside-collapse { /deep/ .aside-menu {
height: 100%; height: 100%;
background-color: #fff; background-color: #fff;
.el-collapse-item__header { .el-menu-item__header {
border-top: 0px; border-top: 0px;
border-bottom: 0px; border-bottom: 0px;
} }
.el-collapse-item__wrap { .el-menu-item__wrap {
border-top: 0px; border-top: 0px;
border-bottom: 0px; border-bottom: 0px;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment