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

package/src/control/panel/index.ts

@@ -1,23 +1,19 @@
-import { ControlType } from '@ibiz-template/runtime';
+import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import { withInstall } from '@ibiz-template/vue3-util';
 import { App } from 'vue';
-import { withInstall } from '../../util/install';
-import IBizPanelContainer from './panel-container';
-import IBizPanelCtrlPos from './panel-ctrl-pos';
 import { ViewLayoutPanel } from './view-layout-panel/view-layout-panel';
 import { ViewLayoutPanelProvider } from './view-layout-panel/view-layout-panel-provider';
 
-export * from './panel-container';
-export * from './panel-ctrl-pos';
+export * from './view-layout-panel';
+export * from './panel';
 
 export { ViewLayoutPanel };
 export const IBizPanel = withInstall(ViewLayoutPanel, function (v: App) {
   v.component(ViewLayoutPanel.name, ViewLayoutPanel);
-  ibiz.register.control.register(
+  registerControlProvider(
     ControlType.VIEW_LAYOUT_PANEL,
-    new ViewLayoutPanelProvider(),
+    () => new ViewLayoutPanelProvider(),
   );
-  v.use(IBizPanelContainer);
-  v.use(IBizPanelCtrlPos);
 });
 
 export default IBizPanel;

package/src/control/panel/panel/index.ts

@@ -0,0 +1,4 @@
+export * from './panel-item-state';
+export * from './panel-item.controller';
+export * from './panel-state';
+export * from './panel.controller';

package/src/control/panel/panel/panel-item-state.ts

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

package/src/control/panel/panel/panel-item.controller.ts

@@ -1,6 +1,6 @@
 import { isOverlap } from '@ibiz-template/core';
 import {
-  calcLayoutContentStyle,
+  calcLayoutHeightWidth,
   PanelNotifyState,
   verifyPanelGroupLogic,
 } from '@ibiz-template/runtime';
@@ -47,14 +47,15 @@ export class PanelItemController<T extends IPanelItem = IPanelItem> {
 
   protected async onInit(): Promise<void> {
     // 初始化布局参数
-    const { width, height, sysCss, itemType } = this.model;
-    // 初始化布局参数
-    if (width) {
+    const { layoutPos, sysCss, itemType } = this.model;
+
+    // 初始化高宽
+    if (layoutPos) {
+      const { width, height } = calcLayoutHeightWidth(layoutPos);
       this.state.layoutController.width = `${width}`;
-    }
-    if (height) {
       this.state.layoutController.height = `${height}`;
     }
+
     // 给col添加各自类型的类名
     this.state.layoutController.extraClass = `ibiz-panel-col__${itemType!.toLowerCase()} `;
     if (sysCss?.cssName) {
@@ -69,13 +70,6 @@ export class PanelItemController<T extends IPanelItem = IPanelItem> {
         return this.state.visible;
       },
     });
-
-    if (this.model.layoutPos) {
-      // 设置自身内容样式
-      this.state.layoutController.contentStyle = calcLayoutContentStyle(
-        this.model.layoutPos!,
-      );
-    }
   }
 
   /**

package/src/control/panel/panel/panel.controller.ts

@@ -2,12 +2,14 @@
 import { ModelError, RuntimeError } from '@ibiz-template/core';
 import {
   ControlController,
+  getPanelItemProvider,
   IControlProvider,
+  IPanelController,
   IPanelItemProvider,
   PanelNotifyState,
 } from '@ibiz-template/runtime';
 import { IPanel, IPanelContainer, IPanelItem } from '@ibiz/model-core';
-import { PanelContainerController } from '../panel-container/panel-container.controller';
+import { PanelContainerController } from '../../../panel-component';
 import { PanelItemController } from './panel-item.controller';
 import { PanelState } from './panel-state';
 
@@ -20,9 +22,10 @@ import { PanelState } from './panel-state';
  * @class PanelController
  * @extends {ControlController<PanelModel>}
  */
-export class PanelController<
-  T extends IPanel = IPanel,
-> extends ControlController<T> {
+export class PanelController<T extends IPanel = IPanel>
+  extends ControlController<T>
+  implements IPanelController
+{
   state = new PanelState();
 
   /**
@@ -77,11 +80,10 @@ export class PanelController<
     // this.evt.on('onMounted', () => {
     //   this.load();
     // });
-    console.log(this, '布局面板');
   }
 
   /**
-   * 初始化表单成员控制器
+   * 初始化面板成员控制器
    *
    * @author lxm
    * @date 2022-08-24 21:08:48
@@ -95,14 +97,10 @@ export class PanelController<
     if (!panelItems) {
       return;
     }
-    const { panelItem: register } = ibiz.register;
-    if (!register) {
-      throw new RuntimeError('panelItem注册器不存在');
-    }
     await Promise.all(
       panelItems.map(async panelItem => {
-        // 生成表单成员控制器
-        const panelItemProvider = await register.get(panelItem);
+        // 生成面板成员控制器
+        const panelItemProvider = await getPanelItemProvider(panelItem);
         if (!panelItemProvider) {
           return;
         }

package/src/control/panel/view-layout-panel/index.ts

@@ -0,0 +1,3 @@
+export * from './view-layout-panel-provider';
+export * from './view-layout-panel.controller';
+export * from './view-layout-panel';

package/src/control/panel/view-layout-panel/view-layout-panel-provider.ts

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

package/src/control/panel/view-layout-panel/view-layout-panel.controller.ts

@@ -1,4 +1,8 @@
-import { EventBase, ViewLogicDispatcher } from '@ibiz-template/runtime';
+import {
+  EventBase,
+  IViewLayoutPanelController,
+  ViewLogicDispatcher,
+} from '@ibiz-template/runtime';
 import { IViewLayoutPanel } from '@ibiz/model-core';
 import { PanelController } from '../panel/panel.controller';
 
@@ -11,7 +15,10 @@ import { PanelController } from '../panel/panel.controller';
  * @class ViewLayoutPanelController
  * @extends {ControlController<ViewLayoutPanelModel>}
  */
-export class ViewLayoutPanelController extends PanelController<IViewLayoutPanel> {
+export class ViewLayoutPanelController
+  extends PanelController<IViewLayoutPanel>
+  implements IViewLayoutPanelController
+{
   /**
    * 视图逻辑的事件调度分发器
    * @author lxm

package/src/control/panel/view-layout-panel/view-layout-panel.scss

@@ -1,3 +1,9 @@
 @include b(control-viewlayoutpanel) {
   height: 100%;
+  width: 100%;
+}
+
+@include b(control-viewlayoutpanel-content) {
+  height: 100%;
+  width: 100%;
 }

package/src/control/panel/view-layout-panel/view-layout-panel.tsx

@@ -15,6 +15,7 @@ import {
   IViewLayoutPanel,
 } from '@ibiz/model-core';
 import { ViewLayoutPanelController } from './view-layout-panel.controller';
+import './view-layout-panel.scss';
 
 /**
  * 绘制面板成员
@@ -71,7 +72,7 @@ function renderPanelItem(
  * 视图布局面板组件
  */
 export const ViewLayoutPanel = defineComponent({
-  name: 'ViewLayoutPanel',
+  name: 'ViewLayoutPanelControl',
   props: {
     modelData: {
       type: Object as PropType<IViewLayoutPanel>,
@@ -85,8 +86,8 @@ export const ViewLayoutPanel = defineComponent({
     const c = useControlController(
       (...args) => new ViewLayoutPanelController(...args),
     );
+    const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
 
-    const ns = useNamespace('control-viewlayoutpanel');
     c.evt.on('onCreated', () => {
       const keys = Object.keys(c.panelItems);
       keys.forEach(key => {
@@ -95,19 +96,13 @@ export const ViewLayoutPanel = defineComponent({
       });
     });
 
-    // todo 面板模型layout不够
-    const layout = {
-      layout: c.model.layoutMode,
-      dir: 'column',
-    };
-
-    return { c, ns, layout };
+    return { c, ns };
   },
   render() {
     const { state, model } = this.c;
     return (
       <control-base controller={this.c}>
-        <app-row layout={this.layout}>
+        <app-row class={this.ns.b('content')} layout={{ layout: 'FLEX' }}>
           {state.complete &&
             model.rootPanelItems?.map(panelItem => {
               const subC = this.c.panelItems[panelItem.id!];

package/src/control/toolbar/index.ts

@@ -1,12 +1,12 @@
-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 { ToolbarControl } from './toolbar-control';
 import { ToolbarProvider } from './toolbar-provider';
 
 export const IBizToolbar = withInstall(ToolbarControl, function (v: App) {
   v.component(ToolbarControl.name, ToolbarControl);
-  ibiz.register.control.register(ControlType.TOOLBAR, new ToolbarProvider());
+  registerControlProvider(ControlType.TOOLBAR, () => new ToolbarProvider());
 });
 
 export default IBizToolbar;

package/src/control/toolbar/toolbar-control.tsx

@@ -27,8 +27,7 @@ export const ToolbarControl = defineComponent({
   },
   setup() {
     const c = useControlController((...args) => new ToolbarController(...args));
-
-    const ns = useNamespace('control-toolbar');
+    const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
 
     const btnSize = computed(() => {
       return c.state.viewMode === 'EMBED' ? 'small' : 'default';

package/src/control/toolbar/toolbar.controllerr.ts

@@ -2,10 +2,11 @@ import {
   ControlController,
   ControllerEvent,
   IToolbarEvent,
-  ButtonState,
+  UIActionButtonState,
   ControlVO,
   recursiveIterate,
-  AppDEUIActionUtil,
+  IToolbarController,
+  UIActionUtil,
 } from '@ibiz-template/runtime';
 import {
   IDEToolbar,
@@ -22,13 +23,31 @@ import { ToolbarState } from './toolbar-state';
  * @class ToolbarController
  * @extends {ControlController<ToolbarModel>}
  */
-export class ToolbarController extends ControlController<IDEToolbar> {
+export class ToolbarController
+  extends ControlController<IDEToolbar>
+  implements IToolbarController
+{
   state = new ToolbarState();
 
   declare evt: ControllerEvent<IToolbarEvent>;
 
-  getData(): IDatum[] | null {
-    return this.ctx.view.getData();
+  /**
+   * 执行按钮的界面行为（如果按钮存在界面行为的话）
+   * @author lxm
+   * @date 2023-05-10 09:20:35
+   * @return {*}  {IData[]}
+   */
+  protected async doUIAction(item: IDEToolbarItem): Promise<void> {
+    // 执行界面行为
+    if (item.itemType === 'DEUIACTION') {
+      const actionId = (item as IDETBUIActionItem).uiactionId;
+      const res = await this.ctx.view.call('GetData');
+      const data = res?.data || [];
+      await UIActionUtil.exec(actionId!, {
+        ...this.getEventArgs(),
+        data,
+      });
+    }
   }
 
   protected async doCreated(): Promise<void> {
@@ -42,23 +61,18 @@ export class ToolbarController extends ControlController<IDEToolbar> {
       (item: IDEToolbarItem) => {
         if (item.itemType === 'DEUIACTION') {
           const uiItem = item as IDETBUIActionItem;
-          const buttonState = new ButtonState(
+          const buttonState = new UIActionButtonState(
             uiItem.id!,
+            this.context.srfappid!,
             uiItem.uiactionId!,
-            // this.model.appEntity,
           );
-          // if (
-          //   ['Edit', 'Remove'].includes(uiItem.getPSUIAction()!.uIActionTag)
-          // ) {
-          //   buttonState.noPermissionMode = 'DISABLED';
-          // }
 
           this.state.buttonsState.addState(uiItem.id!, buttonState);
         }
       },
       { childrenFields: ['detoolbarItems'] },
     );
-    this.state.buttonsState.update();
+    await this.state.buttonsState.update();
   }
 
   /**
@@ -71,42 +85,22 @@ export class ToolbarController extends ControlController<IDEToolbar> {
    */
   async onItemClick(item: IDEToolbarItem, event: MouseEvent): Promise<void> {
     this.state.buttonsState.setLoading(item.id!);
-    if (item.itemType === 'DEUIACTION') {
-      // 执行界面行为
-      const data = this.getData();
-      AppDEUIActionUtil.exec(
-        (item as IDETBUIActionItem).uiactionId!,
-        this.context,
-        data,
-        this.params,
-        {
-          event,
-          controller: this,
-        },
-      );
-    }
-
     try {
       await this.evt.emit('onClick', {
         event,
         eventArg: item.id!,
       });
+      await this.doUIAction(item);
     } finally {
       this.state.buttonsState.setLoading('');
     }
   }
 
-  /**
-   * 根据数据计算工具栏权限和状态
-   * @author lxm
-   * @date 2023-03-28 07:27:34
-   * @param {IDatum} data
-   */
-  calcButtonState(data: IDatum | undefined): void {
+  calcButtonState(data?: IDatum, appDeId?: string): void {
     let _data = data;
     if (data && data instanceof ControlVO) {
       _data = data.getOrigin();
     }
-    this.state.buttonsState.update(_data);
+    this.state.buttonsState.update(_data, appDeId);
   }
 }

package/src/editor/index.ts

@@ -1,13 +1,13 @@
+import { registerEditorProvider } from '@ibiz-template/runtime';
 import { App } from 'vue';
 import { IBizInput } from './text-box';
 import { TextBoxEditorProvider } from './text-box/text-box-provider';
 
 export const IBizEditor = {
   install: (v: App) => {
-    const { editor: editorRegister } = ibiz.register;
     v.component(IBizInput.name, IBizInput);
     const textBoxEditorProvider = new TextBoxEditorProvider();
-    editorRegister.register('TEXTBOX', textBoxEditorProvider);
+    registerEditorProvider('TEXTBOX', () => textBoxEditorProvider);
   },
 };
 

package/src/index.ts

@@ -1,57 +1,34 @@
 import { App } from 'vue';
-import {
-  AppKeepAlive,
-  AppIcon,
-  AppRow,
-  AppCol,
-  AppUser,
-  AppRouterView,
-  TabPageExp,
-  QuickSearch,
-} from './common';
+import IBizCommonComponents from './common';
+
 import { IBizAppMenu, IBizGrid, IBizToolbar, IBizPanel } from './control';
 import { IBizForm, IBizSearchForm } from './control/form';
 import IBizEditor from './editor';
-import {
-  AppLayout,
-  ViewLayout,
-  ViewBase,
-  MDViewBase,
-  ControlLayout,
-  ControlBase,
-} from './layout';
-import { IBizIndexView, IBizView, IBizGridView } from './views';
+import IBizPanelComponents from './panel-component';
+import { IBizView } from './view';
+import { IBizViewEngine } from './view-engine';
 
-export * from './layout';
-export * from './views';
 export * from './control';
 export * from './common';
+export * from './panel-component';
+export * from './editor';
+export * from './view';
+export * from './view-engine';
 
 export default {
   install: (v: App) => {
-    v.use(IBizIndexView);
+    v.use(IBizCommonComponents);
+    v.use(IBizPanelComponents);
+    v.use(IBizViewEngine);
     v.use(IBizView);
+    // 部件
     v.use(IBizAppMenu);
-    v.use(IBizGridView);
     v.use(IBizGrid);
     v.use(IBizToolbar);
     v.use(IBizPanel);
     v.use(IBizForm);
     v.use(IBizSearchForm);
+    // 编辑器
     v.use(IBizEditor);
-    v.component('AppLayout', AppLayout);
-    v.component('ViewLayout', ViewLayout);
-    v.component('ViewBase', ViewBase);
-    v.component('MdViewBase', MDViewBase);
-    v.component('ControlLayout', ControlLayout);
-    v.component('ControlBase', ControlBase);
-    v.component('AppKeepAlive', AppKeepAlive);
-    v.component('AppIcon', AppIcon);
-    v.component('AppRow', AppRow);
-    v.component('AppCol', AppCol);
-    v.component('AppUser', AppUser);
-    v.component('AppRouterView', AppRouterView);
-    v.component('TabPageExp', TabPageExp);
-    v.component('QuickSearch', QuickSearch);
   },
 };

package/src/panel-component/auth-userinfo/auth-userinfo-provider.ts

@@ -0,0 +1,26 @@
+import { IPanelItemProvider } from '@ibiz-template/runtime';
+import { IPanelItem } from '@ibiz/model-core';
+import { PanelController, PanelItemController } from '../../control';
+
+/**
+ * 用户信息适配器
+ *
+ * @author lxm
+ * @date 2022-09-19 22:09:03
+ * @export
+ * @class AuthUserinfoProvider
+ * @implements {EditorProvider}
+ */
+export class AuthUserinfoProvider implements IPanelItemProvider {
+  component: string = 'AuthUserinfo';
+
+  async createController(
+    panelItem: IPanelItem,
+    panel: PanelController,
+    parent: PanelItemController | undefined,
+  ): Promise<PanelItemController> {
+    const c = new PanelItemController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}

package/src/panel-component/auth-userinfo/auth-userinfo.scss

@@ -0,0 +1,34 @@
+@include b(auth-userinfo) {
+  margin-right: 25px;
+  height: 100%;
+  width: 100%;
+}
+
+@include b(auth-userinfo-avatar) {
+  cursor: pointer;
+  @include e(name) {
+    margin-left: 12px;
+    color: #fff;
+  }
+}
+
+@include b(auth-userinfo-avatar-wrapper) {
+  @include flex-center;
+
+  display: inline-flex;
+  width: auto;
+  height: 64px;
+  padding: 0 12px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    background: hsl(0deg 0% 100% / 5%);
+  }
+}
+
+@include b(auth-userinfo-avater__icon){
+  margin: top 2px;
+  margin-right: 6px;
+}

package/src/{common/app-user/app-user.tsx → panel-component/auth-userinfo/auth-userinfo.tsx}

@@ -1,12 +1,24 @@
-import { defineComponent } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { useRouter } from 'vue-router';
 import { useNamespace } from '@ibiz-template/vue3-util';
-import './app-user.scss';
+import './auth-userinfo.scss';
+import { IPanelRawItem } from '@ibiz/model-core';
+import { PanelItemController } from '../../control';
 
-export const AppUser = defineComponent({
-  name: 'AppUser',
+export const AuthUserinfo = defineComponent({
+  name: 'AuthUserinfo',
+  props: {
+    modelData: {
+      type: Object as PropType<IPanelRawItem>,
+      required: true,
+    },
+    controller: {
+      type: PanelItemController,
+      required: true,
+    },
+  },
   setup() {
-    const ns = useNamespace('app-user');
+    const ns = useNamespace('auth-userinfo');
     const { srfusername = '游客' } = ibiz.appData?.context || {};
     const router = useRouter();
     return { ns, srfusername, router };
@@ -28,7 +40,7 @@ export const AppUser = defineComponent({
   },
   render() {
     return (
-      <div class={this.ns.b()}>
+      <div class={[this.ns.b(), this.ns.m(this.modelData.id)]}>
         <el-dropdown class={this.ns.b('avatar')}>
           {{
             default: () => (

package/src/panel-component/auth-userinfo/index.ts

@@ -0,0 +1,17 @@
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { App } from 'vue';
+import { AuthUserinfo } from './auth-userinfo';
+import { AuthUserinfoProvider } from './auth-userinfo-provider';
+
+export { AuthUserinfo, AuthUserinfoProvider };
+
+export const IBizAuthUserinfo = withInstall(AuthUserinfo, function (v: App) {
+  v.component(AuthUserinfo.name, AuthUserinfo);
+  registerPanelItemProvider(
+    'RAWITEM_AUTH_USERINFO',
+    () => new AuthUserinfoProvider(),
+  );
+});
+
+export default IBizAuthUserinfo;

package/src/panel-component/index.ts

@@ -0,0 +1,26 @@
+import { App } from 'vue';
+import IBizAuthUserinfo from './auth-userinfo';
+import IBizNavPos from './nav-pos';
+import IBizNavTabs from './nav-tabs';
+import IBizPanelContainer from './panel-container';
+import IBizPanelCtrlPos from './panel-ctrl-pos';
+import IBizScrollContainer from './scroll-container';
+
+export * from './panel-container';
+export * from './panel-ctrl-pos';
+export * from './scroll-container';
+export * from './auth-userinfo';
+export * from './nav-pos';
+
+export const IBizPanelComponents = {
+  install: (v: App) => {
+    v.use(IBizPanelContainer);
+    v.use(IBizPanelCtrlPos);
+    v.use(IBizScrollContainer);
+    v.use(IBizAuthUserinfo);
+    v.use(IBizNavPos);
+    v.use(IBizNavTabs);
+  },
+};
+
+export default IBizPanelComponents;

package/src/panel-component/nav-pos/index.ts

@@ -0,0 +1,16 @@
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { App } from 'vue';
+import { NavPos } from './nav-pos';
+import { NavPosProvider } from './nav-pos-provider';
+import { NavPosState } from './nav-pos-state';
+import { NavPosController } from './nav-pos.controller';
+
+export { NavPos, NavPosProvider, NavPosState, NavPosController };
+
+export const IBizNavPos = withInstall(NavPos, function (v: App) {
+  v.component(NavPos.name, NavPos);
+  registerPanelItemProvider('RAWITEM_NAV_POS', () => new NavPosProvider());
+});
+
+export default IBizNavPos;

package/src/panel-component/nav-pos/nav-pos-provider.ts

@@ -0,0 +1,27 @@
+import { IPanelItemProvider } from '@ibiz-template/runtime';
+import { IPanelItem } from '@ibiz/model-core';
+import { PanelController, PanelItemController } from '../../control';
+import { NavPosController } from './nav-pos.controller';
+
+/**
+ * 导航占位适配器
+ *
+ * @author lxm
+ * @date 2022-09-19 22:09:03
+ * @export
+ * @class NavPosProvider
+ * @implements {EditorProvider}
+ */
+export class NavPosProvider implements IPanelItemProvider {
+  component: string = 'NavPos';
+
+  async createController(
+    panelItem: IPanelItem,
+    panel: PanelController,
+    parent: PanelItemController | undefined,
+  ): Promise<NavPosController> {
+    const c = new NavPosController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}