提交 dcfd7509 编写于 作者: ibizdev's avatar ibizdev

zhujiamin 发布系统代码 [TrainSys,网页端]

上级 6a55311f
...@@ -13,13 +13,13 @@ ...@@ -13,13 +13,13 @@
"dependencies": { "dependencies": {
"@floating-ui/dom": "^1.0.11", "@floating-ui/dom": "^1.0.11",
"@ibiz-template/command": "^0.0.1-beta.50", "@ibiz-template/command": "^0.0.1-beta.50",
"@ibiz-template/controller": "^0.0.1-beta.103", "@ibiz-template/controller": "^0.0.1-beta.104",
"@ibiz-template/core": "^0.0.1-beta.103", "@ibiz-template/core": "^0.0.1-beta.104",
"@ibiz-template/model": "^0.0.1-beta.103", "@ibiz-template/model": "^0.0.1-beta.104",
"@ibiz-template/runtime": "^0.0.1-beta.103", "@ibiz-template/runtime": "^0.0.1-beta.104",
"@ibiz-template/service": "^0.0.1-beta.103", "@ibiz-template/service": "^0.0.1-beta.104",
"@ibiz-template/theme": "^0.0.1-beta.103", "@ibiz-template/theme": "^0.0.1-beta.104",
"@ibiz-template/vue-util": "^0.0.1-beta.103", "@ibiz-template/vue-util": "^0.0.1-beta.104",
"@ibiz/dynamic-model-api": "^2.1.24", "@ibiz/dynamic-model-api": "^2.1.24",
"@riophae/vue-treeselect": "^0.4.0", "@riophae/vue-treeselect": "^0.4.0",
"dayjs": "^1.11.7", "dayjs": "^1.11.7",
......
此差异已折叠。
...@@ -6,11 +6,18 @@ import '@ibiz-template/theme/style/components/layout/app-layout/app-layout.scss' ...@@ -6,11 +6,18 @@ import '@ibiz-template/theme/style/components/layout/app-layout/app-layout.scss'
function renderLogo(ns: Namespace, model: IndexViewModel) { function renderLogo(ns: Namespace, model: IndexViewModel) {
return ( return (
<div class={ns.e('logo')}> <div class={[ns.e('logo'), model.source?.mainMenuAlign?.toLowerCase()]}>
{model.appIconPath ? ( {model.appIconPath ? (
<img class={ns.e('logo-img')} src={model.appIconPath}></img> <img class={ns.e('logo-img')} src={model.appIconPath}></img>
) : null} ) : null}
<div class={ns.e('logo-caption')}>{model.caption}</div> <div
class={[
ns.e('logo-caption'),
model.source?.mainMenuAlign?.toLowerCase(),
]}
>
{model.caption}
</div>
</div> </div>
); );
} }
...@@ -58,17 +65,40 @@ export const AppLayout = defineComponent({ ...@@ -58,17 +65,40 @@ export const AppLayout = defineComponent({
this.ns.is('tab', this.isShowTabPageExp), this.ns.is('tab', this.isShowTabPageExp),
]} ]}
> >
{this.model.source.mainMenuAlign === 'CENTER' && this.$slots.menu}
{this.model.source.mainMenuAlign !== 'CENTER' && (
<i-sider <i-sider
hide-trigger hide-trigger
class={[ class={[
this.ns.b('nav'), this.ns.b('nav'),
this.ns.is('collapse', this.collapseChange), this.ns.is('collapse', this.collapseChange),
this.model.source?.mainMenuAlign?.toLowerCase(),
]} ]}
value={this.collapseChange} value={this.collapseChange}
> >
{renderLogo(this.ns, this.model)} {renderLogo(this.ns, this.model)}
{this.$slots.menu} {this.$slots.menu}
</i-sider> </i-sider>
)}
{this.model.source.mainMenuAlign === 'CENTER' && (
<i-layout class={[this.ns.b('content')]}>
<i-header
class={[
this.ns.b('header'),
this.model.source?.mainMenuAlign?.toLowerCase(),
]}
>
<div class={this.ns.be('header', 'left')}>
{renderLogo(this.ns, this.model)}
</div>
</i-header>
<i-content class={this.ns.be('content', 'main')}>
{this.$slots.tabPageExp}
{this.$slots.default}
</i-content>
</i-layout>
)}
{this.model.source.mainMenuAlign !== 'CENTER' && (
<i-layout class={[this.ns.b('content')]}> <i-layout class={[this.ns.b('content')]}>
<i-header class={this.ns.b('header')}> <i-header class={this.ns.b('header')}>
<div class={this.ns.be('header', 'left')}> <div class={this.ns.be('header', 'left')}>
...@@ -104,6 +134,7 @@ export const AppLayout = defineComponent({ ...@@ -104,6 +134,7 @@ export const AppLayout = defineComponent({
</i-content> </i-content>
{/* <i-footer class={this.ns.b('footer')}>Footer</i-footer> */} {/* <i-footer class={this.ns.b('footer')}>Footer</i-footer> */}
</i-layout> </i-layout>
)}
</i-layout> </i-layout>
) : null; ) : null;
}, },
......
...@@ -3,6 +3,7 @@ import { ...@@ -3,6 +3,7 @@ import {
AppMenuModel, AppMenuModel,
AppMenuItemModel, AppMenuItemModel,
IPSAppMenuItem, IPSAppMenuItem,
IPSAppIndexView,
} from '@ibiz-template/model'; } from '@ibiz-template/model';
import { import {
useAppMenuController, useAppMenuController,
...@@ -94,6 +95,72 @@ function renderMenuItem( ...@@ -94,6 +95,72 @@ function renderMenuItem(
); );
} }
/**
* 绘制中间菜单项
* @author fzh
* @date 2022-08-29 14:08:20
* @param {IData} menu
* @returns {*}
*/
function renderCenterChildren(
menu: IData,
ns: Namespace,
c: AppMenuController,
counterData: IData,
click: Function,
) {
return (
<div class={ns.e('cchildren')} onClick={() => click(menu.key)}>
<app-icon class={ns.e('cchildrenIcon')} icon={menu.image}></app-icon>
<div class={ns.em('cchildren', 'title')}>
<span>{menu.label}</span>
</div>
{typeof counterData[menu.counterId] === 'number' ? (
<i-badge
class={ns.e('counter')}
count={counterData[menu.counterId]}
></i-badge>
) : null}
</div>
);
}
/**
* 绘制中间菜单分组
* @author fzh
* @date 2022-08-29 14:08:20
* @param {IData} menu
* @returns {*}
*/
function renderCenterMenuItem(
menu: IData,
ns: Namespace,
c: AppMenuController,
counterData: IData,
click: Function,
) {
if (!c.menuItemsState[menu.key].visible) {
return;
}
return (
<div class={ns.e('cmenu')}>
<div class={ns.em('cmenu', 'title')}>{menu.label}</div>
{typeof counterData[menu.counterId] === 'number' ? (
<i-badge
class={ns.e('counter')}
count={counterData[menu.counterId]}
></i-badge>
) : null}
<div class={ns.e('cmenucontent')}>
{menu.children?.length > 0 &&
menu.children.map((item: IData) => {
return renderCenterChildren(item, ns, c, counterData, click);
})}
</div>
</div>
);
}
/** /**
* 绘制收缩分组菜单项 * 绘制收缩分组菜单项
* @param {IData} menu * @param {IData} menu
...@@ -209,6 +276,7 @@ export const AppMenu = defineComponent({ ...@@ -209,6 +276,7 @@ export const AppMenu = defineComponent({
context: { type: Object as PropType<IContext>, required: true }, context: { type: Object as PropType<IContext>, required: true },
collapseChange: Boolean, collapseChange: Boolean,
currentPath: String, currentPath: String,
menuModel: { type: Object as PropType<IPSAppIndexView>, required: true },
}, },
setup(props, { emit }) { setup(props, { emit }) {
const { proxy } = getCurrentInstance()!; const { proxy } = getCurrentInstance()!;
...@@ -224,6 +292,8 @@ export const AppMenu = defineComponent({ ...@@ -224,6 +292,8 @@ export const AppMenu = defineComponent({
let counter: AppCounter | null = null; let counter: AppCounter | null = null;
const counterData = ref<IData>({}); const counterData = ref<IData>({});
const menuDirection = props.menuModel.mainMenuAlign;
c.nerve.self.evt.on('created', () => { c.nerve.self.evt.on('created', () => {
menus.value = getMenus(c.model.items); menus.value = getMenus(c.model.items);
}); });
...@@ -352,9 +422,33 @@ export const AppMenu = defineComponent({ ...@@ -352,9 +422,33 @@ export const AppMenu = defineComponent({
counter?.destroy(); counter?.destroy();
}); });
return { menus, c, onClick, ns, defaultActive, defaultOpens, counterData }; return {
menus,
c,
onClick,
ns,
defaultActive,
defaultOpens,
counterData,
menuDirection,
};
}, },
render() { render() {
if (this.menuDirection === 'CENTER') {
return (
<div class={[this.ns.b(), this.menuDirection?.toLowerCase()]}>
{this.menus.map(item => {
return renderCenterMenuItem(
item,
this.ns,
this.c,
this.counterData,
this.onClick,
);
})}
</div>
);
}
return ( return (
<i-menu <i-menu
ref={'menu'} ref={'menu'}
......
...@@ -166,6 +166,7 @@ const collapseChange = (collapse: boolean) => { ...@@ -166,6 +166,7 @@ const collapseChange = (collapse: boolean) => {
<AppLayout <AppLayout
:is-complete="c.complete" :is-complete="c.complete"
:model="c.model" :model="c.model"
:class="c.model?.source?.mainMenuAlign?.toLowerCase()"
:is-show-tab-page-exp="isShowTabPageExp" :is-show-tab-page-exp="isShowTabPageExp"
@onCollapseChange="collapseChange" @onCollapseChange="collapseChange"
> >
...@@ -177,6 +178,7 @@ const collapseChange = (collapse: boolean) => { ...@@ -177,6 +178,7 @@ const collapseChange = (collapse: boolean) => {
:model-data="c.model.appMenu" :model-data="c.model.appMenu"
:context="c.context" :context="c.context"
:collapse-change="c.collapseChange" :collapse-change="c.collapseChange"
:menu-model="c.model?.source"
@menuRouteChange="onMenuRouteChange" @menuRouteChange="onMenuRouteChange"
></app-menu> ></app-menu>
<tab-page-exp <tab-page-exp
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册