@ibiz-template/vue3-components 0.0.1-alpha.1

package/src/common/tab-page-exp/tab-page-exp.tsx

@@ -0,0 +1,125 @@
+import { defineComponent, ref, watch } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './tab-page-exp.scss';
+import { TabPaneName, TabsPaneContext } from 'element-plus';
+
+interface RouteMsg {
+  key: string;
+  fullPath: string;
+  modelPath?: string;
+  caption?: string;
+}
+interface dropdownAction {
+  text: string;
+  value?: string;
+}
+
+export const TabPageExp = defineComponent({
+  name: 'TabPageExp',
+  props: {
+    routeMsgs: {
+      type: Array<RouteMsg>,
+      required: true,
+    },
+    currentKey: {
+      type: String,
+      required: true,
+    },
+  },
+  emits: ['tab-delete', 'tab-click', 'close-all', 'close-other'],
+  setup(props, { emit }) {
+    const ns = useNamespace('tab-page-exp');
+    const tabsValue = ref(0);
+    const actions: dropdownAction[] = [
+      { text: '关闭所有', value: 'closeAll' },
+      { text: '关闭其他', value: 'closeOther' },
+    ];
+
+    // 监听currentVal确认当前激活tab
+    watch(
+      () => props.currentKey,
+      (newVal, _oldVal) => {
+        const currentRouteMsgIndex = props.routeMsgs.findIndex(
+          (msg: RouteMsg) => msg.key === newVal,
+        );
+        if (currentRouteMsgIndex !== -1) {
+          tabsValue.value = currentRouteMsgIndex;
+        }
+      },
+    );
+
+    // 点击tab
+    const changePage = (pane: TabsPaneContext, _ev: Event) => {
+      const index = Number(pane.index);
+      tabsValue.value = index;
+      emit('tab-click', index);
+    };
+
+    // 关闭tab
+    const onClose = (name: TabPaneName) => {
+      emit('tab-delete', name);
+    };
+
+    // 处理下拉点击
+    const handleCommand = (command: dropdownAction) => {
+      if (command.value === 'closeAll') {
+        emit('close-all');
+      } else if (command.value === 'closeOther') {
+        emit('close-other');
+      }
+    };
+
+    return { ns, tabsValue, actions, changePage, onClose, handleCommand };
+  },
+  render() {
+    return (
+      <div class={this.ns.b()}>
+        <div class={this.ns.e('left')}>
+          <el-tabs
+            type='card'
+            v-model={this.tabsValue}
+            closable
+            onTabClick={this.changePage}
+            onTabRemove={this.onClose}
+          >
+            {this.routeMsgs?.map((msg: RouteMsg, index: number) => {
+              return (
+                <el-tab-pane
+                  name={index}
+                  key={index}
+                  label={msg.caption}
+                ></el-tab-pane>
+              );
+            })}
+          </el-tabs>
+        </div>
+        <div class={this.ns.e('right')}>
+          <el-dropdown onCommand={this.handleCommand}>
+            {{
+              default: () => {
+                return (
+                  <el-button size='small' type='primary'>
+                    更多 <ion-icon name='arrow-down'></ion-icon>
+                  </el-button>
+                );
+              },
+              dropdown: () => {
+                return (
+                  <el-dropdown-menu>
+                    {this.actions.map((action: dropdownAction) => {
+                      return (
+                        <el-dropdown-item command={action}>
+                          {action.text}
+                        </el-dropdown-item>
+                      );
+                    })}
+                  </el-dropdown-menu>
+                );
+              },
+            }}
+          </el-dropdown>
+        </div>
+      </div>
+    );
+  },
+});

package/src/control/app-menu/app-menu-provider.ts

@@ -0,0 +1,14 @@
+import { IControlProvider } from '@ibiz-template/runtime';
+
+/**
+ * 应用菜单适配器
+ *
+ * @author lxm
+ * @date 2022-10-25 18:10:57
+ * @export
+ * @class AppMenuProvider
+ * @implements {IControlProvider}
+ */
+export class AppMenuProvider implements IControlProvider {
+  component: string = 'AppMenu';
+}

package/src/control/app-menu/app-menu-state.ts

@@ -0,0 +1,20 @@
+import { ControlState } from '@ibiz-template/runtime';
+
+/**
+ * 应用菜单部件UI状态
+ *
+ * @export
+ * @class AppMenuState
+ * @extends {ControlState}
+ */
+export class AppMenuState extends ControlState {
+  /**
+   * 菜单项状态
+   *
+   * @author lxm
+   * @date 2022-10-12 20:10:51
+   * @type {{ [p: string]: { visible: boolean; permitted: boolean } }}
+   */
+  menuItemsState: { [p: string]: { visible: boolean; permitted: boolean } } =
+    {};
+}

package/src/control/app-menu/app-menu.controller.ts

@@ -0,0 +1,97 @@
+import { RuntimeError } from '@ibiz-template/core';
+import {
+  ControlController,
+  AppFuncCommand,
+  findRecursiveChild,
+} from '@ibiz-template/runtime';
+import { IAppMenu, IAppMenuItem } from '@ibiz/model-core';
+import { AppMenuState } from './app-menu-state';
+
+/**
+ * 应用菜单控制器
+ *
+ * @author chitanda
+ * @date 2022-07-24 15:07:07
+ * @export
+ * @class AppMenuController
+ * @extends {ControlController}
+ */
+export class AppMenuController extends ControlController<IAppMenu> {
+  state = new AppMenuState();
+
+  /**
+   * 菜单项状态
+   *
+   * @deprecated
+   * @author lxm
+   * @date 2022-10-12 20:10:51
+   * @type {{ [p: string]: { visible: boolean; permitted: boolean } }}
+   */
+  menuItemsState: { [p: string]: { visible: boolean; permitted: boolean } } =
+    {};
+
+  protected async doCreated(): Promise<void> {
+    await super.doCreated();
+
+    // 初始化菜单项状态
+    this.model.appMenuItems?.forEach(item => {
+      this.initMenuItemState(item);
+    });
+  }
+
+  /**
+   * 菜单项点击回调，触发对应的应用功能
+   *
+   * @author chitanda
+   * @date 2022-12-22 14:12:53
+   * @param {string} id
+   * @return {*}  {Promise<void>}
+   */
+  async onClickMenuItem(id: string): Promise<void> {
+    const menuItem = findRecursiveChild(this.model, id, {
+      compareField: 'id',
+      childrenFields: ['appMenuItems'],
+    });
+    if (!menuItem) {
+      throw new RuntimeError(`找不到名为${id}的菜单项`);
+    }
+
+    console.log(menuItem);
+    await ibiz.commands.execute(
+      AppFuncCommand.TAG,
+      menuItem.appFuncId,
+      this.context,
+      this.params,
+    );
+  }
+
+  /**
+   * 初始化菜单项状态
+   *
+   * @author lxm
+   * @date 2022-10-12 20:10:37
+   * @param {AppMenuItemModel} menu
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  initMenuItemState(menu: IAppMenuItem): {
+    visible: boolean;
+    permitted: boolean;
+  } {
+    // const permitted = app.authority.hasMenuPermitted(menu);
+    const permitted = true;
+    let visible = permitted;
+    // 有子的计算子状态，如果本身显示但是子都不显示则不显示
+    if (menu.appMenuItems?.length) {
+      const childrenState = menu.appMenuItems.map(child => {
+        return this.initMenuItemState(child).visible;
+      });
+      visible = visible && childrenState.includes(true);
+    }
+    const result = { permitted, visible };
+    this.state.menuItemsState[menu.id!] = result;
+    return {
+      visible: true,
+      permitted: true,
+    };
+  }
+}

package/src/control/app-menu/app-menu.scss

@@ -0,0 +1,163 @@
+// @mixin menu-item-vertical-style {
+//   @include flex(row, flex-start, center);
+
+//   width: 100%;
+//   height: getCssVar('control-menu-item', 'height');
+//   padding: calc(getCssVar('control-menu-item', 'padding') * 0.875)
+//     calc(getCssVar('control-menu-item', 'padding') * 1.5);
+//   font-size: getCssVar('control-menu-item', 'font-size');
+//   color: getCssVar('control-menu-item', 'color');
+//   white-space: nowrap;
+
+//   &:hover {
+//     color: getCssVar('control-menu-item', 'hover-color');
+//     background-color: getCssVar('control-menu-item', 'hover-bg-color');
+//   }
+
+//   &.is-active {
+//     color: getCssVar('control-menu-item', 'selected-color');
+//     background-color: getCssVar('control-menu-item', 'selected-bg-color');
+//   }
+// }
+
+// @mixin menu-item-horizontal-style {
+//   color: getCssVar('control-menu-item', 'horizontal-color');
+//   white-space: nowrap;
+//   border: none;
+
+//   &:hover {
+//     color: getCssVar('control-menu-item', 'horizontal-hover-color');
+//     background-color: getCssVar(
+//       'control-menu-item',
+//       'horizontal-hover-bg-color'
+//     );
+//   }
+
+//   &.is-active {
+//     // 压element-plus 加important
+//     color: getCssVar(
+//       'control-menu-item',
+//       'horizontal-selected-color'
+//     ) !important;
+//     background-color: getCssVar(
+//       'control-menu-item',
+//       'horizontal-selected-bg-color'
+//     );
+//   }
+// }
+
+// @mixin menu-collapse-item-style {
+//   @include flex-center;
+
+//   padding: calc(getCssVar('control-menu', 'collapse-item-padding') * 0.875)
+//     calc(getCssVar('control-menu', 'collapse-item-padding') * 1.5);
+
+//   &:hover {
+//     color: getCssVar('control-menu', 'collapse-item-hover-color');
+//   }
+// }
+
+// @mixin menu-item-selected-style {
+//   color: getCssVar('control-menu', 'item-selected-color');
+//   background-color: getCssVar('control-menu', 'item-selected-bg-color');
+// }
+
+// @include b(control-menu) {
+//   position: static;
+//   @include set-component-css-var('control-menu', $control-menu);
+//   @include set-component-css-var('control-menu-item', $control-menu-item);
+
+//   // 垂直
+//   .el-menu--vertical {
+//     height: calc(100vh - getCssVar('layout', 'header-height'));
+
+//     // 菜单项样式
+//     .el-menu-item,
+//     .el-sub-menu__title {
+//       @include menu-item-vertical-style;
+//     }
+//   }
+
+//   // 水平
+//   .el-menu--horizontal {
+//     max-width: getCssVar('control-menu', 'horizontal-width');
+//     height: 100%;
+//     background-color: getCssVar('control-menu', 'horizontal-bg-color');
+//     border-bottom: none;
+
+//     // 菜单项样式
+//     .el-menu-item,
+//     .el-sub-menu__title {
+//       @include menu-item-horizontal-style;
+//     }
+
+//     > .el-sub-menu.is-active .el-sub-menu__title {
+//       color: getCssVar('control-menu-item', 'horizontal-selected-color');
+//       background-color: getCssVar(
+//         'control-menu-item',
+//         'horizontal-selected-bg-color'
+//       );
+//     }
+
+//     &::-webkit-scrollbar-thumb {
+//       background: #fff;
+//     }
+//   }
+
+//   overflow-y: auto;
+
+//   // 图标样式
+//   @include e(icon) {
+//     margin: getCssVar('control-menu', 'icon-margin');
+//   }
+
+//   // 收缩
+//   @include when(collapse) {
+//     @include e(item) {
+//       @include menu-collapse-item-style;
+//     }
+//     @include b(control-menu-tooltip) {
+//       width: 100%;
+//     }
+//     @include b(control-menu-submenu) {
+//       display: block;
+
+//       > .el-sub-menu__title {
+//         @include flex-center;
+//         @include menu-collapse-item-style;
+
+//         white-space: nowrap;
+//         cursor: pointer;
+//       }
+//       @include e(item) {
+//         padding: 0;
+//       }
+//     }
+//   }
+
+//   .el-menu {
+//     border-right: 0;
+//   }
+
+//   .el-sub-menu {
+//     .el-sub-menu__icon-arrow {
+//       right: 14px;
+//       width: 12px;
+//     }
+
+//     .el-menu-item {
+//       padding: calc(getCssVar('control-menu', 'item-padding') * 0.875)
+//         calc(getCssVar('control-menu', 'item-padding') * 2.5);
+//     }
+//   }
+// }
+
+// // 收缩时菜单项样式
+// .el-menu--popup-container {
+//   @include set-component-css-var('control-menu', $control-menu);
+
+//   .el-menu-item,
+//   .el-sub-menu__title {
+//     @include menu-item-vertical-style;
+//   }
+// }