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

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@ibiz-template/vue3-components",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1-alpha.3",
   "type": "module",
   "description": "使用 rollup 编译 vue 组件或者 jsx",
   "main": "lib/index.js",
   "module": "src/index.ts",
-  "types": "es/index.d.ts",
+  "types": "src/index.ts",
   "files": [
     "es",
     "lib",
@@ -21,13 +21,13 @@
     "publish:npm": "npm publish --access public"
   },
   "dependencies": {
-    "@ibiz-template/core": "^0.0.4-beta.2",
-    "@ibiz-template/model-helper": "^0.0.4-beta.2",
-    "@ibiz-template/runtime": "^0.0.4-beta.2",
-    "@ibiz-template/theme": "^0.0.4-beta.1",
-    "@ibiz-template/vue3-util": "^0.0.4-beta.2",
-    "@ibiz/model-core": "^0.0.5",
-    "element-plus": "^2.3.3",
+    "@ibiz-template/core": "^0.0.4-beta.4",
+    "@ibiz-template/model-helper": "^0.0.4-beta.4",
+    "@ibiz-template/runtime": "^0.0.4-beta.4",
+    "@ibiz-template/theme": "^0.0.4-beta.3",
+    "@ibiz-template/vue3-util": "^0.0.4-beta.4",
+    "@ibiz/model-core": "^0.0.6",
+    "element-plus": "^2.3.4",
     "lodash-es": "^4.17.21",
     "qx-util": "^0.4.8",
     "async-validator": "^4.2.5",
@@ -37,10 +37,10 @@
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.7",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
-    "@types/ramda": "^0.29.0",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
+    "@types/ramda": "^0.29.1",
+    "@vitejs/plugin-vue": "^4.2.1",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "eslint": "^8.39.0",
     "eslint-plugin-unused-imports": "^2.0.0",
@@ -51,11 +51,11 @@
     "eslint-plugin-prettier": "^4.2.1",
     "prettier": "^2.8.8",
     "rimraf": "^5.0.0",
-    "sass": "^1.62.0",
+    "sass": "^1.62.1",
     "typescript": "^5.0.4",
-    "vite": "^4.3.1",
+    "vite": "^4.3.4",
     "vite-plugin-build": "^0.9.0",
-    "vue-tsc": "^1.4.4"
+    "vue-tsc": "^1.6.4"
   },
   "peerDependencies": {
     "@ibiz-template/core": "^0.0.4-beta.2",

package/src/common/action-toolbar/action-toolbar.scss

@@ -0,0 +1,31 @@
+@include b('action-toolbar') {
+  @include set-component-css-var('action-toolbar', $action-toolbar);
+  @include e('item') {
+    &+&{
+      margin: getCssVar('action-toolbar', 'item-margin');
+    }
+  }
+
+  // 分隔符样式
+  @include e('separator') {
+    display: inline-block;
+    width: getCssVar('action-toolbar', 'separator-width');
+    height: getCssVar('action-toolbar', 'separator-height');
+    vertical-align: middle;
+    background-color: getCssVar('action-toolbar', 'separator-color');
+
+    // 第一个按钮前面的分隔符隐藏
+    &:first-child {
+      display: none;
+    }
+  }
+
+  @include m('dropdown'){
+    @include e(caption){
+      cursor: pointer;
+    }
+    @include e(caption-icon){
+      vertical-align: bottom;
+    }
+  }
+}

package/src/common/action-toolbar/action-toolbar.tsx

@@ -0,0 +1,117 @@
+import { defineComponent, PropType } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { IButtonContainerState } from '@ibiz-template/runtime';
+import { IUIActionGroupDetail } from '@ibiz/model-core';
+import './action-toolbar.scss';
+
+export const ActionToolbar = defineComponent({
+  name: 'ActionToolbar',
+  props: {
+    actionDetails: {
+      type: Array<IUIActionGroupDetail>,
+      required: true,
+    },
+    actionsState: {
+      type: Object as PropType<IButtonContainerState>,
+      required: true,
+    },
+    caption: String,
+    mode: {
+      type: String as PropType<'dropdown' | 'buttons'>,
+      default: 'buttons',
+    },
+  },
+  setup(props, { emit }) {
+    const ns = useNamespace('action-toolbar');
+
+    // 点击事件抛给表格执行
+    const handleClick = async (
+      detail: IUIActionGroupDetail,
+      event: MouseEvent,
+    ) => {
+      emit('action-click', detail, event);
+    };
+
+    return { ns, handleClick };
+  },
+  render() {
+    const details = this.actionDetails || [];
+    if (this.mode === 'buttons') {
+      // 按钮模式
+      return (
+        <div class={[this.ns.b(), this.ns.m('buttons')]}>
+          {details.length > 0 &&
+            details.map(detail => {
+              if (this.actionsState[detail.id!].visible) {
+                return [
+                  detail.addSeparator && (
+                    <div class={this.ns.e('separator')}></div>
+                  ),
+                  <el-button
+                    text
+                    size='small'
+                    onClick={(e: MouseEvent) => this.handleClick(detail, e)}
+                    disabled={this.actionsState[detail.id!].disabled}
+                    class={[this.ns.e('item'), this.ns.is('disabled', false)]}
+                  >
+                    {/* {detail.showIcon && action.getPSSysImage() && (
+                      <app-icon icon={action.getPSSysImage()}></app-icon>
+                    )}
+                    {detail.showCaption ? action!.caption : ''} */}
+                  </el-button>,
+                ];
+              }
+              return null;
+            })}
+        </div>
+      );
+    }
+    // 下拉模式
+    return (
+      <el-dropdown
+        onCommand={(command: IUIActionGroupDetail) =>
+          this.handleClick(command, new MouseEvent('click'))
+        }
+        class={[this.ns.b(), this.ns.m('dropdown')]}
+      >
+        {{
+          default: () => (
+            <span class={this.ns.e('caption')}>
+              {this.caption}
+              <ion-icon
+                class={this.ns.e('caption-icon')}
+                name='ibiz-arrow-down'
+              />
+            </span>
+          ),
+          dropdown: () => (
+            <el-dropdown-menu>
+              {details.length > 0 &&
+                details.map(detail => {
+                  // const action = detail.getPSUIAction();
+                  if (this.actionsState[detail.id!].visible) {
+                    return (
+                      <el-dropdown-item
+                        class={[
+                          this.ns.e('item'),
+                          this.ns.is('disabled', false),
+                        ]}
+                        disabled={this.actionsState[detail.id!].disabled}
+                        command={detail}
+                      >
+                        {/* {detail.showIcon && action.getPSSysImage() && (
+                          <app-icon icon={action.getPSSysImage()}></app-icon>
+                        )}
+                        {detail.showCaption ? action!.caption : ''} */}
+                      </el-dropdown-item>
+                    );
+                  }
+                  return null;
+                })}
+            </el-dropdown-menu>
+          ),
+        }}
+      </el-dropdown>
+    );
+  },
+});

package/src/common/app-col/app-col.tsx

@@ -11,6 +11,24 @@ import { IFlexLayoutPos, IGridLayoutPos, ILayoutPos } from '@ibiz/model-core';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { ILayoutController } from '@ibiz-template/runtime';
 
+function calcGridSpanOffset(
+  span: number | undefined,
+  offset: number | undefined,
+  layout: string | undefined,
+): { span?: number; offset?: number } {
+  const multiplier = layout === 'TABLE_24COL' ? 1 : 2;
+  const spanDefault = layout === 'TABLE_24COL' ? 24 : 12;
+  const _span = !span || span === -1 ? spanDefault : span;
+  const _offset = !offset || offset === -1 ? 0 : offset;
+  const result: IData = {
+    span: _span * multiplier,
+  };
+  if (_offset !== 0) {
+    result.offset = _offset;
+  }
+  return result;
+}
+
 export const AppCol = defineComponent({
   name: 'AppCol',
   props: {
@@ -30,20 +48,21 @@ export const AppCol = defineComponent({
         return {};
       }
       // 计算倍率，12列栅格为2
-      const colXS = gridLayoutPos.colXS || 0;
-      const colXSOffset = gridLayoutPos.colXSOffset || 0;
-      const colSM = gridLayoutPos.colSM || 0;
-      const colSMOffset = gridLayoutPos.colSMOffset || 0;
-      const colMD = gridLayoutPos.colMD || 0;
-      const colMDOffset = gridLayoutPos.colMDOffset || 0;
-      const colLG = gridLayoutPos.colLG || 0;
-      const colLGOffset = gridLayoutPos.colLGOffset || 0;
-      const multiplier = gridLayoutPos.layout === 'TABLE_24COL' ? 1 : 2;
+      const {
+        colXS,
+        colXSOffset,
+        colSM,
+        colSMOffset,
+        colMD,
+        colMDOffset,
+        colLG,
+        colLGOffset,
+      } = gridLayoutPos;
       return {
-        xs: { span: colXS * multiplier, offset: colXSOffset * multiplier },
-        sm: { span: colSM * multiplier, offset: colSMOffset * multiplier },
-        md: { span: colMD * multiplier, offset: colMDOffset * multiplier },
-        lg: { span: colLG * multiplier, offset: colLGOffset * multiplier },
+        xs: calcGridSpanOffset(colXS, colXSOffset, gridLayoutPos.layout),
+        sm: calcGridSpanOffset(colSM, colSMOffset, gridLayoutPos.layout),
+        md: calcGridSpanOffset(colMD, colMDOffset, gridLayoutPos.layout),
+        lg: calcGridSpanOffset(colLG, colLGOffset, gridLayoutPos.layout),
       };
     });
 
@@ -69,6 +88,8 @@ export const AppCol = defineComponent({
           class={[this.ns.b(), this.ns.m('flex'), this.controller.extraClass]}
           style={{
             flexGrow: (this.layoutPos as IFlexLayoutPos).grow,
+            // 修复flex时flex-grow和flex-shrink时高度被内容撑开，没法压缩
+            minHeight: 0,
             ...this.cssVars,
           }}
         >

package/src/common/app-icon/app-icon.tsx

@@ -55,4 +55,3 @@ export const AppIcon = defineComponent({
     return () => content.value;
   },
 });
-export default AppIcon;

package/src/common/app-router-view/app-router-view.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { isNotNil } from 'ramda';
 import { defineComponent, h, PropType, VNode, watch } from 'vue';
 import { RouteLocationNormalizedLoaded } from 'vue-router';
 
@@ -28,7 +29,7 @@ export const AppRouterView = defineComponent({
     watch(
       () => props.manualKey,
       (newVal, oldVal) => {
-        if (newVal && newVal !== oldVal) {
+        if (isNotNil(newVal) && newVal !== oldVal) {
           isActive = true;
         }
       },

package/src/common/app-row/app-row.tsx

@@ -15,10 +15,11 @@ export const AppRow = defineComponent({
     const defaultSlot = this.$slots.default?.();
     if (this.layout?.layout === 'FLEX') {
       const { dir, align, valign } = this.layout as IFlexLayout;
+      const _dir = dir || 'column';
       return (
         <div
           class={[this.ns.b(), this.ns.m('flex')]}
-          style={`display:flex;flex-direction: ${dir};justify-content: ${align};align-items: ${valign};`}
+          style={`display:flex;flex-direction: ${_dir};justify-content: ${align};align-items: ${valign};`}
         >
           {defaultSlot}
         </div>

package/src/{layout/control-layout/control-layout.scss → common/control-base/control-base.scss}

@@ -1,4 +1,4 @@
-@include b(control-layout) {
+@include b(control) {
   width: 100%;
   height: 100%;
 }

package/src/{layout → common}/control-base/control-base.tsx

@@ -1,6 +1,5 @@
 import { ControlController } from '@ibiz-template/runtime';
 import { useNamespace } from '@ibiz-template/vue3-util';
-import { kebabCase } from 'lodash-es';
 import { defineComponent, PropType } from 'vue';
 
 export const ControlBase = defineComponent({
@@ -15,23 +14,21 @@ export const ControlBase = defineComponent({
     const { controlType, sysCss, codeName } = props.controller.model;
     const typeClass = controlType!.toLowerCase();
     const sysCssName = sysCss?.cssName;
-    const modelClass = kebabCase(codeName);
 
-    return { ns, typeClass, sysCssName, modelClass };
+    return { ns, typeClass, sysCssName, codeName };
   },
   render() {
     return (
-      <control-layout
-        modelData={this.controller.model}
+      <div
         class={[
           this.ns.b(),
           this.ns.b(this.typeClass),
-          this.ns.m(this.modelClass),
+          this.ns.m(this.codeName),
           this.sysCssName,
         ]}
       >
         {this.$slots.default?.()}
-      </control-layout>
+      </div>
     );
   },
 });

package/src/common/index.ts

@@ -1,9 +1,28 @@
+import { App } from 'vue';
+import { ActionToolbar } from './action-toolbar/action-toolbar';
+import { AppCol } from './app-col/app-col';
+import { AppIcon } from './app-icon/app-icon';
+import { AppKeepAlive } from './app-keep-alive/app-keep-alive';
+import { AppRouterView } from './app-router-view/app-router-view';
+import { AppRow } from './app-row/app-row';
+import { ControlBase } from './control-base/control-base';
+
 export * from './app-icon/app-icon';
 export * from './app-keep-alive/app-keep-alive';
-export * from './app-keep-alive/scheduler';
 export * from './app-router-view/app-router-view';
-export * from './app-user/app-user';
-export * from './tab-page-exp/tab-page-exp';
-export * from './quick-search/quick-search';
 export * from './app-col/app-col';
 export * from './app-row/app-row';
+
+export const IBizCommonComponents = {
+  install: (v: App) => {
+    v.component('ControlBase', ControlBase);
+    v.component('AppKeepAlive', AppKeepAlive);
+    v.component('AppIcon', AppIcon);
+    v.component('AppRow', AppRow);
+    v.component('AppCol', AppCol);
+    v.component('AppRouterView', AppRouterView);
+    v.component('ActionToolbar', ActionToolbar);
+  },
+};
+
+export default IBizCommonComponents;

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

@@ -10,5 +10,5 @@ import { IControlProvider } from '@ibiz-template/runtime';
  * @implements {IControlProvider}
  */
 export class AppMenuProvider implements IControlProvider {
-  component: string = 'AppMenu';
+  component: string = 'AppMenuControl';
 }

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

@@ -3,6 +3,10 @@ import {
   ControlController,
   AppFuncCommand,
   findRecursiveChild,
+  IAppMenuController,
+  ControllerEvent,
+  IAppMenuEvent,
+  Application,
 } from '@ibiz-template/runtime';
 import { IAppMenu, IAppMenuItem } from '@ibiz/model-core';
 import { AppMenuState } from './app-menu-state';
@@ -16,9 +20,14 @@ import { AppMenuState } from './app-menu-state';
  * @class AppMenuController
  * @extends {ControlController}
  */
-export class AppMenuController extends ControlController<IAppMenu> {
+export class AppMenuController
+  extends ControlController<IAppMenu>
+  implements IAppMenuController
+{
   state = new AppMenuState();
 
+  declare evt: ControllerEvent<IAppMenuEvent>;
+
   /**
    * 菜单项状态
    *
@@ -30,9 +39,13 @@ export class AppMenuController extends ControlController<IAppMenu> {
   menuItemsState: { [p: string]: { visible: boolean; permitted: boolean } } =
     {};
 
+  app!: Application;
+
   protected async doCreated(): Promise<void> {
     await super.doCreated();
 
+    this.app = await ibiz.hub.getApp(this.context.srfappid);
+
     // 初始化菜单项状态
     this.model.appMenuItems?.forEach(item => {
       this.initMenuItemState(item);
@@ -47,7 +60,7 @@ export class AppMenuController extends ControlController<IAppMenu> {
    * @param {string} id
    * @return {*}  {Promise<void>}
    */
-  async onClickMenuItem(id: string): Promise<void> {
+  async onClickMenuItem(id: string, event: MouseEvent): Promise<void> {
     const menuItem = findRecursiveChild(this.model, id, {
       compareField: 'id',
       childrenFields: ['appMenuItems'],
@@ -56,7 +69,11 @@ export class AppMenuController extends ControlController<IAppMenu> {
       throw new RuntimeError(`找不到名为${id}的菜单项`);
     }
 
-    console.log(menuItem);
+    this.evt.emit('onClick', {
+      eventArg: id,
+      event,
+    });
+
     await ibiz.commands.execute(
       AppFuncCommand.TAG,
       menuItem.appFuncId,
@@ -77,8 +94,10 @@ export class AppMenuController extends ControlController<IAppMenu> {
     visible: boolean;
     permitted: boolean;
   } {
-    // const permitted = app.authority.hasMenuPermitted(menu);
-    const permitted = true;
+    let permitted = true;
+    if (menu.accessKey) {
+      permitted = this.app.authority.calcByResCode(menu.accessKey);
+    }
     let visible = permitted;
     // 有子的计算子状态，如果本身显示但是子都不显示则不显示
     if (menu.appMenuItems?.length) {

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

@@ -111,7 +111,7 @@ function renderSubmenu(
 }
 
 export const AppMenu = defineComponent({
-  name: 'AppMenu',
+  name: 'AppMenuControl',
   props: {
     modelData: { type: Object as PropType<IAppMenu>, required: true },
     context: { type: Object as PropType<IContext>, required: true },
@@ -126,6 +126,7 @@ export const AppMenu = defineComponent({
   setup(props) {
     const { proxy } = getCurrentInstance()!;
     const c = useControlController((...args) => new AppMenuController(...args));
+    const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
     const menus = ref<IDatum[]>(getMenus(c.model.appMenuItems!));
     // 默认激活菜单项
     const defaultActive = ref('');
@@ -134,17 +135,10 @@ export const AppMenu = defineComponent({
     // 路由对象
     // const route = useRoute();
 
-    let menuClickDoing = false;
-
-    const onClick = async (key: string) => {
-      menuClickDoing = true;
-      await c.onClickMenuItem(key);
-      menuClickDoing = false;
+    const onClick = async (key: string, event: MouseEvent) => {
+      await c.onClickMenuItem(key, event);
     };
 
-    console.log(menuClickDoing);
-
-    const ns = useNamespace('control-menu');
     const key = ref(createUUID());
 
     // 手动更新iView菜单
@@ -162,9 +156,6 @@ export const AppMenu = defineComponent({
     //   (newVal, oldVal) => {
     //     // 新旧值不一样，且新值不为空时变更
     //     if (newVal !== oldVal && newVal) {
-    //       if (menuClickDoing === true) {
-    //         emit('menuRouteChange');
-    //       }
     //       const findItem = c.model.allItems.find(item => {
     //         return item.viewModelPath === newVal;
     //       });

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

@@ -1,12 +1,17 @@
-import { ControlType } from '@ibiz-template/runtime';
+import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
 import { App } from 'vue';
-import { withInstall } from '../../util/install';
+import { withInstall } from '@ibiz-template/vue3-util';
 import { AppMenu } from './app-menu';
 import { AppMenuProvider } from './app-menu-provider';
 
+export * from './app-menu';
+export * from './app-menu-provider';
+export * from './app-menu-state';
+export * from './app-menu.controller';
+
 export const IBizAppMenu = withInstall(AppMenu, function (v: App) {
   v.component(AppMenu.name, AppMenu);
-  ibiz.register.control.register(ControlType.APP_MENU, new AppMenuProvider());
+  registerControlProvider(ControlType.APP_MENU, () => new AppMenuProvider());
 });
 
 export default IBizAppMenu;

package/src/control/form/form/form-control.tsx

@@ -83,7 +83,7 @@ export const FormControl = defineComponent({
                   model-data={page}
                   controller={this.c.details[page.id!]}
                 >
-                  {page.deformDetails!.map(detail =>
+                  {page.deformDetails?.map(detail =>
                     renderByDetailType(detail, this.c),
                   )}
                 </form-page-item>

package/src/control/form/form/form.controller.ts

@@ -5,6 +5,8 @@ import {
   ControllerEvent,
   ControlVO,
   FormNotifyState,
+  getFormDetailProvider,
+  IFormController,
   IFormDetailProvider,
   IFormEvent,
 } from '@ibiz-template/runtime';
@@ -25,9 +27,10 @@ import { FormState } from './form-state';
  * @extends {ControlController<T>}
  * @template T
  */
-export abstract class FormController<
-  T extends IDEForm = IDEForm,
-> extends ControlController<T> {
+export abstract class FormController<T extends IDEForm = IDEForm>
+  extends ControlController<T>
+  implements IFormController
+{
   declare evt: ControllerEvent<IFormEvent>;
 
   state = new FormState();
@@ -158,16 +161,12 @@ export abstract class FormController<
     form: FormController = this,
     parent: FormGroupPanelController | undefined = undefined,
   ) {
-    const { formDetail: register } = ibiz.register;
-    if (!register) {
-      throw new RuntimeError('formDetail注册器不存在');
-    }
     await Promise.all(
       details.map(async detail => {
         // 生成表单成员控制器
-        const detailProvider = await register.get(detail);
+        const detailProvider = await getFormDetailProvider(detail);
         if (!detailProvider) {
-          throw new RuntimeError('找不到对应的适配器');
+          return;
         }
         form.providers[detail.id!] = detailProvider;
         const detailController = await detailProvider.createController(

package/src/control/form/form/index.ts

@@ -1,8 +1,9 @@
 import { App } from 'vue';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { registerFormDetailProvider } from '@ibiz-template/runtime';
 import { FormItemProvider } from '../form-detail/form-item/form-item-provider';
 import IBizSearchForm from '../search-form';
 import { FormControl } from './form-control';
-import { withInstall } from '../../../util/install';
 import FormPage from '../form-detail/form-page/form-page';
 import { FormPageItem } from '../form-detail/form-page/form-page-item';
 import { FormPageProvider } from '../form-detail/form-page/form-page-provider';
@@ -19,12 +20,11 @@ export const IBizForm = withInstall(FormControl, function (v: App) {
   v.component(FormPageItem.name, FormPageItem);
   v.component(FormItemContainer.name, FormItemContainer);
   v.component(FormItem.name, FormItem);
-  const { formDetail } = ibiz.register;
 
   // 表单项
-  formDetail.register('FORMITEM', new FormItemProvider());
+  registerFormDetailProvider('FORMITEM', () => new FormItemProvider());
   // 表单分页
-  formDetail.register('FORMPAGE', new FormPageProvider());
+  registerFormDetailProvider('FORMPAGE', () => new FormPageProvider());
 });
 
 export default IBizSearchForm;

package/src/control/form/form-detail/form-detail/form-detail-state.ts

@@ -48,8 +48,8 @@ export class FormDetailState {
    * @type {ILayoutController}
    */
   layoutController: ILayoutController = {
-    width: 'auto',
-    height: 'auto',
+    width: '',
+    height: '',
     extraStyle: {},
     extraClass: '',
     contentStyle: {},