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

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

上级 6a55311f
......@@ -13,13 +13,13 @@
"dependencies": {
"@floating-ui/dom": "^1.0.11",
"@ibiz-template/command": "^0.0.1-beta.50",
"@ibiz-template/controller": "^0.0.1-beta.103",
"@ibiz-template/core": "^0.0.1-beta.103",
"@ibiz-template/model": "^0.0.1-beta.103",
"@ibiz-template/runtime": "^0.0.1-beta.103",
"@ibiz-template/service": "^0.0.1-beta.103",
"@ibiz-template/theme": "^0.0.1-beta.103",
"@ibiz-template/vue-util": "^0.0.1-beta.103",
"@ibiz-template/controller": "^0.0.1-beta.104",
"@ibiz-template/core": "^0.0.1-beta.104",
"@ibiz-template/model": "^0.0.1-beta.104",
"@ibiz-template/runtime": "^0.0.1-beta.104",
"@ibiz-template/service": "^0.0.1-beta.104",
"@ibiz-template/theme": "^0.0.1-beta.104",
"@ibiz-template/vue-util": "^0.0.1-beta.104",
"@ibiz/dynamic-model-api": "^2.1.24",
"@riophae/vue-treeselect": "^0.4.0",
"dayjs": "^1.11.7",
......
此差异已折叠。
......@@ -6,11 +6,18 @@ import '@ibiz-template/theme/style/components/layout/app-layout/app-layout.scss'
function renderLogo(ns: Namespace, model: IndexViewModel) {
return (
<div class={ns.e('logo')}>
<div class={[ns.e('logo'), model.source?.mainMenuAlign?.toLowerCase()]}>
{model.appIconPath ? (
<img class={ns.e('logo-img')} src={model.appIconPath}></img>
) : null}
<div class={ns.e('logo-caption')}>{model.caption}</div>
<div
class={[
ns.e('logo-caption'),
model.source?.mainMenuAlign?.toLowerCase(),
]}
>
{model.caption}
</div>
</div>
);
}
......@@ -58,17 +65,40 @@ export const AppLayout = defineComponent({
this.ns.is('tab', this.isShowTabPageExp),
]}
>
{this.model.source.mainMenuAlign === 'CENTER' && this.$slots.menu}
{this.model.source.mainMenuAlign !== 'CENTER' && (
<i-sider
hide-trigger
class={[
this.ns.b('nav'),
this.ns.is('collapse', this.collapseChange),
this.model.source?.mainMenuAlign?.toLowerCase(),
]}
value={this.collapseChange}
>
{renderLogo(this.ns, this.model)}
{this.$slots.menu}
</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-header class={this.ns.b('header')}>
<div class={this.ns.be('header', 'left')}>
......@@ -104,6 +134,7 @@ export const AppLayout = defineComponent({
</i-content>
{/* <i-footer class={this.ns.b('footer')}>Footer</i-footer> */}
</i-layout>
)}
</i-layout>
) : null;
},
......
......@@ -3,6 +3,7 @@ import {
AppMenuModel,
AppMenuItemModel,
IPSAppMenuItem,
IPSAppIndexView,
} from '@ibiz-template/model';
import {
useAppMenuController,
......@@ -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
......@@ -209,6 +276,7 @@ export const AppMenu = defineComponent({
context: { type: Object as PropType<IContext>, required: true },
collapseChange: Boolean,
currentPath: String,
menuModel: { type: Object as PropType<IPSAppIndexView>, required: true },
},
setup(props, { emit }) {
const { proxy } = getCurrentInstance()!;
......@@ -224,6 +292,8 @@ export const AppMenu = defineComponent({
let counter: AppCounter | null = null;
const counterData = ref<IData>({});
const menuDirection = props.menuModel.mainMenuAlign;
c.nerve.self.evt.on('created', () => {
menus.value = getMenus(c.model.items);
});
......@@ -352,9 +422,33 @@ export const AppMenu = defineComponent({
counter?.destroy();
});
return { menus, c, onClick, ns, defaultActive, defaultOpens, counterData };
return {
menus,
c,
onClick,
ns,
defaultActive,
defaultOpens,
counterData,
menuDirection,
};
},
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 (
<i-menu
ref={'menu'}
......
......@@ -166,6 +166,7 @@ const collapseChange = (collapse: boolean) => {
<AppLayout
:is-complete="c.complete"
:model="c.model"
:class="c.model?.source?.mainMenuAlign?.toLowerCase()"
:is-show-tab-page-exp="isShowTabPageExp"
@onCollapseChange="collapseChange"
>
......@@ -177,6 +178,7 @@ const collapseChange = (collapse: boolean) => {
:model-data="c.model.appMenu"
:context="c.context"
:collapse-change="c.collapseChange"
:menu-model="c.model?.source"
@menuRouteChange="onMenuRouteChange"
></app-menu>
<tab-page-exp
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册