Skip to content

T
TrainSys
提交 dcfd7509 编写于 作者: ibizdev's avatar ibizdev
浏览文件
操作

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

上级 6a55311f
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 223 行增加 和 96 行删除
app_Web/package.json
浏览文件 @ dcfd7509
...@@ -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",
......
app_Web/pnpm-lock.yaml
浏览文件 @ dcfd7509
此差异已折叠。
app_Web/src/components/layout/app-layout/app-layout.tsx
浏览文件 @ dcfd7509
...@@ -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,52 +65,76 @@ export const AppLayout = defineComponent({ ...@@ -58,52 +65,76 @@ export const AppLayout = defineComponent({
this.ns.is('tab', this.isShowTabPageExp), this.ns.is('tab', this.isShowTabPageExp),
]} ]}
> >
<i-sider {this.model.source.mainMenuAlign === 'CENTER' && this.$slots.menu}
hide-trigger {this.model.source.mainMenuAlign !== 'CENTER' && (
class={[ <i-sider
this.ns.b('nav'), hide-trigger
this.ns.is('collapse', this.collapseChange), class={[
]} this.ns.b('nav'),
value={this.collapseChange} this.ns.is('collapse', this.collapseChange),
> this.model.source?.mainMenuAlign?.toLowerCase(),
{renderLogo(this.ns, this.model)} ]}
{this.$slots.menu} value={this.collapseChange}
</i-sider> >
<i-layout class={[this.ns.b('content')]}> {renderLogo(this.ns, this.model)}
<i-header class={this.ns.b('header')}> {this.$slots.menu}
<div class={this.ns.be('header', 'left')}> </i-sider>
{renderLogo(this.ns, this.model)} )}
<div class={this.ns.be('header', 'collapse-icon')}> {this.model.source.mainMenuAlign === 'CENTER' && (
{!this.collapseChange ? ( <i-layout class={[this.ns.b('content')]}>
<ion-icon <i-header
src={'./assets/img/menu-fold.svg'} class={[
on-click={() => this.collapseMenus()} this.ns.b('header'),
/> this.model.source?.mainMenuAlign?.toLowerCase(),
) : ( ]}
<ion-icon >
src={'./assets/img/menu-unfold.svg'} <div class={this.ns.be('header', 'left')}>
on-click={() => this.collapseMenus()} {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')}>
{renderLogo(this.ns, this.model)}
<div class={this.ns.be('header', 'collapse-icon')}>
{!this.collapseChange ? (
<ion-icon
src={'./assets/img/menu-fold.svg'}
on-click={() => this.collapseMenus()}
/>
) : (
<ion-icon
src={'./assets/img/menu-unfold.svg'}
on-click={() => this.collapseMenus()}
/>
)}
</div>
{this.model.source.mainMenuAlign === 'TOP' ? (
<i-menu
class={this.ns.be('header', 'menu')}
mode='horizontal'
active-name='1'
></i-menu>
) : null}
</div>
<div class={this.ns.be('header', 'right')}>
<app-user />
</div> </div>
{this.model.source.mainMenuAlign === 'TOP' ? ( </i-header>
<i-menu <i-content class={this.ns.be('content', 'main')}>
class={this.ns.be('header', 'menu')} {this.$slots.tabPageExp}
mode='horizontal' {this.$slots.default}
active-name='1' </i-content>
></i-menu> {/* <i-footer class={this.ns.b('footer')}>Footer</i-footer> */}
) : null} </i-layout>
</div> )}
<div class={this.ns.be('header', 'right')}>
<app-user />
</div>
</i-header>
<i-content class={this.ns.be('content', 'main')}>
{this.$slots.tabPageExp}
{this.$slots.default}
</i-content>
{/* <i-footer class={this.ns.b('footer')}>Footer</i-footer> */}
</i-layout>
</i-layout> </i-layout>
) : null; ) : null;
}, },
......
app_Web/src/components/widgets/app-menu/app-menu.tsx
浏览文件 @ dcfd7509
...@@ -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'}
......
app_Web/src/views/index-view/index-view.vue
浏览文件 @ dcfd7509
...@@ -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 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或