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

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

@@ -1,6 +1,6 @@
 import { isOverlap } from '@ibiz-template/core';
 import {
-  calcLayoutContentStyle,
+  calcLayoutHeightWidth,
   FormNotifyState,
   verifyFormGroupLogic,
 } from '@ibiz-template/runtime';
@@ -89,14 +89,15 @@ export class FormDetailController<T extends IDEFormDetail = IDEFormDetail> {
     this.state.showMoreMode = this.model.showMoreMode!;
 
     // 初始化布局参数
-    const { width, height, sysCss, detailType } = this.model;
-    // 初始化布局参数
-    if (width) {
+    const { layoutPos, sysCss, detailType } = 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-form-col__${detailType!.toLowerCase()} `;
     if (sysCss) {
@@ -111,13 +112,6 @@ export class FormDetailController<T extends IDEFormDetail = IDEFormDetail> {
         return this.state.visible;
       },
     });
-
-    if (this.model.layoutPos) {
-      // 设置自身内容样式
-      this.state.layoutController.contentStyle = calcLayoutContentStyle(
-        this.model.layoutPos!,
-      );
-    }
   }
 
   /**

package/src/control/form/form-detail/form-group-panel/form-group-panel.controller.ts

@@ -1,7 +1,7 @@
 import {
   FormNotifyState,
   ButtonContainerState,
-  ButtonState,
+  UIActionButtonState,
 } from '@ibiz-template/runtime';
 import { IDEFormGroupPanel, IUIActionGroupDetail } from '@ibiz/model-core';
 import { FormDetailController } from '../form-detail/form-detail';
@@ -27,7 +27,7 @@ export class FormGroupPanelController<
 
   protected async onInit(): Promise<void> {
     super.onInit();
-    this.initActionStates();
+    await this.initActionStates();
   }
 
   async formStateNotify(state: FormNotifyState): Promise<void> {
@@ -44,7 +44,7 @@ export class FormGroupPanelController<
    * @author lxm
    * @date 2022-09-07 21:09:43
    */
-  initActionStates() {
+  async initActionStates() {
     // 操作列按钮状态控制
     const { uiactionGroup } = this.model;
     if (!uiactionGroup?.uiactionGroupDetails?.length) {
@@ -54,11 +54,15 @@ export class FormGroupPanelController<
     uiactionGroup.uiactionGroupDetails.forEach(detail => {
       const actionid = detail.uiactionId;
       if (actionid) {
-        const buttonState = new ButtonState(detail.id!, actionid);
+        const buttonState = new UIActionButtonState(
+          detail.id!,
+          this.form.context.srfappid!,
+          actionid,
+        );
         containerState.addState(detail.id!, buttonState);
       }
     });
-    containerState.update();
+    await containerState.update();
     this.state.actionGroupState = containerState;
   }
 

package/src/control/form/form-detail/form-item/form-item.controller.ts

@@ -2,6 +2,7 @@
 import {
   EditorController,
   FormNotifyState,
+  getEditorProvider,
   IEditorProvider,
   Srfuf,
 } from '@ibiz-template/runtime';
@@ -130,7 +131,7 @@ export class FormItemController extends FormDetailController<IDEFormItem> {
     this.state.required = !this.model.allowEmpty;
     // 初始化编辑器控制器
     if (this.model.editor && this.model.editor.editorType !== 'HIDDEN') {
-      this.editorProvider = await ibiz.register.editor.get(this.model.editor);
+      this.editorProvider = await getEditorProvider(this.model.editor);
       if (this.editorProvider) {
         this.editor = await this.editorProvider.createController(
           this.model.editor,

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

@@ -2,7 +2,6 @@ import { defineComponent, h, PropType, resolveComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './form-item.scss';
 import { IDEFormItem } from '@ibiz/model-core';
-import { kebabCase } from 'lodash-es';
 import { FormItemController } from './form-item.controller';
 
 export const FormItem = defineComponent({
@@ -20,12 +19,11 @@ export const FormItem = defineComponent({
   setup(props) {
     const ns = useNamespace('form-item');
     const c = props.controller;
-    const modelClass = kebabCase(props.modelData.id!);
     const onValueChange = (val: unknown, name?: string) => {
       props.controller.setDataValue(val, name);
     };
 
-    return { ns, c, onValueChange, modelClass };
+    return { ns, c, onValueChange };
   },
   render() {
     if (!this.c.state.visible) {
@@ -54,7 +52,7 @@ export const FormItem = defineComponent({
 
     return (
       <form-item-container
-        class={[this.ns.b(), this.ns.m(this.modelClass)]}
+        class={[this.ns.b(), this.ns.m(this.modelData.id)]}
         required={this.c.state.required}
         error={this.c.state.error}
         label={this.modelData.caption}

package/src/control/form/form-detail/form-page/form-page-item.tsx

@@ -1,6 +1,5 @@
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { IDEFormPage } from '@ibiz/model-core';
-import { kebabCase } from 'lodash-es';
 import { defineComponent, PropType, VNode } from 'vue';
 import { FormPageController } from './form-page.controller';
 
@@ -20,11 +19,9 @@ export const FormPageItem = defineComponent({
       required: true,
     },
   },
-  setup(props) {
+  setup() {
     const ns = useNamespace('form-page-item');
-    console.log(props.controller);
-    const modelClass = kebabCase(props.modelData.id!);
-    return { ns, modelClass };
+    return { ns };
   },
   render() {
     const defaultSlots: VNode[] = this.$slots.default?.() || [];
@@ -36,7 +33,7 @@ export const FormPageItem = defineComponent({
     });
     return (
       <app-row
-        class={[this.ns.b(), this.ns.m(this.modelClass)]}
+        class={[this.ns.b(), this.ns.m(this.modelData.id)]}
         layout={this.modelData.layout}
       >
         {defaultSlots.map(slot => {

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

@@ -1,14 +1,14 @@
-import { ControlType } from '@ibiz-template/runtime';
+import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
 import { App } from 'vue';
+import { withInstall } from '@ibiz-template/vue3-util';
 import SearchForm from './search-form';
 import { SearchFormProvider } from './search-form-provider';
-import { withInstall } from '../../../util/install';
 
 export const IBizSearchForm = withInstall(SearchForm, function (v: App) {
   v.component(SearchForm.name, SearchForm);
-  ibiz.register.control.register(
+  registerControlProvider(
     ControlType.SEARCHFORM,
-    new SearchFormProvider(),
+    () => new SearchFormProvider(),
   );
 });
 

package/src/control/form/search-form/search-form-provider.ts

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

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

@@ -9,4 +9,12 @@ import { FormState } from '../form/form-state';
  * @class SearchFormState
  * @extends {FormState}
  */
-export class SearchFormState extends FormState {}
+export class SearchFormState extends FormState {
+  /**
+   * 是否显示搜索表单
+   * @author lxm
+   * @date 2023-05-09 03:29:09
+   * @type {boolean}
+   */
+  visible: boolean = true;
+}

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

@@ -1,6 +1,7 @@
 import {
   ControllerEvent,
   FormNotifyState,
+  ISearchFormController,
   ISearchFormEvent,
   SearchFormService,
 } from '@ibiz-template/runtime';
@@ -17,7 +18,10 @@ import { SearchFormState } from './search-form-state';
  * @class SearchFormController
  * @extends {FormController<IDESearchForm>}
  */
-export class SearchFormController extends FormController<IDESearchForm> {
+export class SearchFormController
+  extends FormController<IDESearchForm>
+  implements ISearchFormController
+{
   declare evt: ControllerEvent<ISearchFormEvent>;
 
   /**
@@ -132,4 +136,20 @@ export class SearchFormController extends FormController<IDESearchForm> {
       await this.onSearchButtonClick();
     }
   }
+
+  /**
+   * 设置搜索表单的显示与否
+   * @author lxm
+   * @date 2023-05-09 03:34:34
+   * @param {boolean} [visible] 不传则是切换当前的显示状态。
+   */
+  setVisible(visible?: boolean) {
+    const setVisible =
+      typeof visible === 'boolean' ? visible : !this.state.visible;
+    if (setVisible !== this.state.visible) {
+      this.state.visible = setVisible;
+    } else {
+      ibiz.log.debug('搜索表单显示没变化');
+    }
+  }
 }

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

@@ -5,7 +5,7 @@ import { SearchFormController } from './search-form.controller';
 import './search-form.scss';
 
 export const SearchForm = defineComponent({
-  name: 'SearchForm',
+  name: 'SearchFormControl',
   props: {
     modelData: {
       type: Object as PropType<IDESearchForm>,
@@ -18,7 +18,7 @@ export const SearchForm = defineComponent({
     const c = useControlController(
       (...args) => new SearchFormController(...args),
     );
-    const ns = useNamespace('control-search-form');
+    const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
 
     c.evt.on('onCreated', () => {
       const keys = Object.keys(c.details);
@@ -32,7 +32,8 @@ export const SearchForm = defineComponent({
   },
 
   render() {
-    if (!this.c.state.complete) {
+    const { state } = this.c;
+    if (!state.complete || !state.visible) {
       return;
     }
     return (

package/src/control/grid/grid/grid-control.tsx

@@ -41,8 +41,8 @@ export const GridControl = defineComponent({
     isExpView: { type: Boolean, required: false },
   },
   setup() {
-    const ns = useNamespace('control-grid');
     const c = useControlController((...args) => new GridController(...args));
+    const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
 
     const {
       tableRef,

package/src/control/grid/grid/grid-row.controller.ts

@@ -87,10 +87,10 @@ export class GridRowController extends MDItemController {
       this.showRowEdit = true;
     }
 
-    // // 初始化操作列状态
-    // Object.values(grid.uaColumns).forEach(column => {
-    //   column.initActionStates(this);
-    // });
+    // 初始化操作列状态
+    Object.values(grid.uaColumns).forEach(column => {
+      column.initActionStates(this);
+    });
 
     // // 初始化编辑项状态
     // Object.values(grid.editItems).forEach(editItem => {

package/src/control/grid/grid/grid.controller.ts

@@ -8,19 +8,21 @@ import { IDEGrid, IDEGridColumn } from '@ibiz/model-core';
 import {
   ControllerEvent,
   ControlVO,
+  getGridColumnProvider,
   GridNotifyState,
   GridService,
   IGridColumnProvider,
+  IGridController,
   IGridEvent,
   MDController,
   Srfuf,
 } from '@ibiz-template/runtime';
 // import { GridEditItemController } from '../backup/grid-edit-item';
-// import { GridUAColumnController } from '../backup/grid-ua-column';
 import { GridFieldColumnController } from '../grid-field-column/grid-field-column.controller';
 import { GridColumnController } from './grid-column.controller';
 import { GridRowController } from './grid-row.controller';
 import { GridState } from './grid-state';
+import { GridUAColumnController } from '../grid-ua-column/grid-ua-column.controller';
 
 /**
  * 表格控制器
@@ -31,7 +33,10 @@ import { GridState } from './grid-state';
  * @class GridController
  * @extends {MDController<GridModel>}
  */
-export class GridController extends MDController<IDEGrid> {
+export class GridController
+  extends MDController<IDEGrid>
+  implements IGridController
+{
   state = new GridState();
 
   declare evt: ControllerEvent<IGridEvent>;
@@ -63,14 +68,14 @@ export class GridController extends MDController<IDEGrid> {
    */
   fieldColumns: { [key: string]: GridFieldColumnController } = {};
 
-  // /**
-  //  * 所有表格操作列的控制器
-  //  *
-  //  * @author lxm
-  //  * @date 2022-08-24 20:08:07
-  //  * @type {{ [key: string]: GridUAColumnController }}
-  //  */
-  // uaColumns: { [key: string]: GridUAColumnController } = {};
+  /**
+   * 所有表格操作列的控制器
+   *
+   * @author lxm
+   * @date 2022-08-24 20:08:07
+   * @type {{ [key: string]: GridUAColumnController }}
+   */
+  uaColumns: { [key: string]: GridUAColumnController } = {};
 
   // /**
   //  * 所有表格编辑项的控制器
@@ -129,12 +134,12 @@ export class GridController extends MDController<IDEGrid> {
    */
   protected async doCreated(): Promise<void> {
     await super.doCreated();
-    console.log(this.model);
 
     this.state.size = this.model.pagingSize || 20;
     this.state.singleSelect = this.model.singleSelect === true;
     this.service = new GridService(this.model);
     await this.service.init(this.context);
+
     // this.hasWidthFlexGrow = !!this.model.columns.find(
     //   column => column.widthFlexGrow,
     // );
@@ -324,7 +329,10 @@ export class GridController extends MDController<IDEGrid> {
    */
   protected async initColumnsController(column: IDEGridColumn) {
     // 初始化适配器
-    const provider = await ibiz.register.gridColumn.get(column);
+    const provider = await getGridColumnProvider(column);
+    if (!provider) {
+      return;
+    }
     this.providers[column.codeName!] = provider;
 
     // 初始化表格列控制器
@@ -335,8 +343,8 @@ export class GridController extends MDController<IDEGrid> {
     if (column.columnType === 'DEFGRIDCOLUMN') {
       this.fieldColumns[column.codeName!] =
         controller as GridFieldColumnController;
-      // } else if (column.columnType === 'UAGRIDCOLUMN') {
-      //   this.uaColumns[column.codeName!] = controller as GridUAColumnController;
+    } else if (column.columnType === 'UAGRIDCOLUMN') {
+      this.uaColumns[column.codeName!] = controller as GridUAColumnController;
       // } else if (column.columnType === 'GROUPGRIDCOLUMN') {
       //   await Promise.all(
       //     (column as IDEGridGroupColumn).degridColumns?.map(async childColumn => {

package/src/control/grid/grid/grid.scss

@@ -5,6 +5,7 @@
   @include set-component-css-var('control-grid-page', $control-grid-page);
 
   height: 100%;
+  width: 100%;
   padding: getCssVar('control-grid', 'padding');
   background-color: getCssVar('control-grid', 'bg-color');
 

package/src/control/grid/grid-ua-column/grid-ua-column-provider.ts

@@ -0,0 +1,26 @@
+import { IGridColumnProvider } from '@ibiz-template/runtime';
+import { IDEGridUAColumn } from '@ibiz/model-core';
+import { GridController } from '../grid/grid.controller';
+import { GridUAColumnController } from './grid-ua-column.controller';
+
+/**
+ * 表格操作列适配器
+ *
+ * @author lxm
+ * @date 2022-09-19 22:09:03
+ * @export
+ * @class GridUAColumnProvider
+ * @implements {IGridColumnProvider}
+ */
+export class GridUAColumnProvider implements IGridColumnProvider {
+  component: string = 'GridUAColumn';
+
+  async createController(
+    columnModel: IDEGridUAColumn,
+    grid: GridController,
+  ): Promise<GridUAColumnController> {
+    const c = new GridUAColumnController(columnModel, grid);
+    await c.init();
+    return c;
+  }
+}

package/src/control/grid/grid-ua-column/grid-ua-column.controller.ts

@@ -0,0 +1,80 @@
+/* eslint-disable no-param-reassign */
+import { RuntimeModelError } from '@ibiz-template/core';
+import {
+  ButtonContainerState,
+  UIActionButtonState,
+  UIActionUtil,
+} from '@ibiz-template/runtime';
+import { IDEGridUAColumn, IUIActionGroupDetail } from '@ibiz/model-core';
+import { GridColumnController } from '../grid/grid-column.controller';
+import { GridRowController } from '../grid/grid-row.controller';
+
+/**
+ * 表格操作列控制器
+ * @return {*}
+ * @author: zhujiamin
+ * @Date: 2022-09-01 18:25:20
+ */
+export class GridUAColumnController extends GridColumnController<IDEGridUAColumn> {
+  /**
+   * 给rowController初始化操作列的状态
+   *
+   * @author lxm
+   * @date 2022-09-07 21:09:43
+   * @param {GridRowController} row
+   */
+  initActionStates(row: GridRowController) {
+    // 操作列按钮状态控制
+    const { deuiactionGroup } = this.model;
+    if (!deuiactionGroup) {
+      throw new RuntimeModelError(this.model, '操作列没有配置界面行为组');
+    }
+    if (!deuiactionGroup.uiactionGroupDetails?.length) {
+      ibiz.log.debug('操作列界面行为组没有配置界面行为');
+      return;
+    }
+    const containerState = new ButtonContainerState();
+    deuiactionGroup.uiactionGroupDetails.forEach(detail => {
+      const actionid = detail.uiactionId;
+      if (actionid) {
+        const buttonState = new UIActionButtonState(
+          detail.id!,
+          this.grid.context.srfappid!,
+          actionid,
+        );
+        containerState.addState(detail.id!, buttonState);
+      }
+    });
+    containerState.update(row.data.getOrigin());
+    row.uaColumnStates[this.model.codeName!] = containerState;
+  }
+
+  /**
+   * 触发操作列点击事件
+   *
+   * @author lxm
+   * @date 2022-09-07 22:09:46
+   * @param {IPSUIActionGroupDetail} detail
+   * @param {MouseEvent} event
+   */
+  async onActionClick(
+    detail: IUIActionGroupDetail,
+    row: GridRowController,
+    event: MouseEvent,
+  ): Promise<void> {
+    const actionId = detail.uiactionId;
+    // 行编辑切换直接调表格方法，不走视图逻辑
+    if (actionId === 'ToggleRowEdit') {
+      await this.grid.toggleRowEdit(row);
+      return;
+    }
+
+    await UIActionUtil.exec(actionId!, {
+      context: this.context,
+      params: this.params,
+      data: [row.data],
+      view: this.grid.view,
+      event,
+    });
+  }
+}

package/src/control/grid/grid-ua-column/grid-ua-column.scss

@@ -0,0 +1,20 @@
+@include b(grid-ua-column) {
+  @include set-component-css-var('grid-ua-column', $grid-ua-column);
+
+  display: flex;
+  align-items: center;
+  justify-content: getCssVar('grid-ua-column', 'justify-content');
+  width: 100%;
+  height: 100%;
+  padding: getCssVar('grid-ua-column', 'cell-padding');
+
+  .el-button  {
+    color: getCssVar('grid-ua-column', 'btn-color');
+    background-color: getCssVar('grid-ua-column', 'btn-bg-color');
+    box-shadow: none;
+
+    &:hover {
+      color: getCssVar('grid-ua-column', 'btn-hover-color');
+    }
+  }
+}

package/src/control/grid/grid-ua-column/grid-ua-column.tsx

@@ -0,0 +1,75 @@
+import { IUIActionGroupDetail } from '@ibiz/model-core';
+import { useNamespace } from 'element-plus';
+import { defineComponent, computed } from 'vue';
+import { GridRowController } from '../grid/grid-row.controller';
+import { GridUAColumnController } from './grid-ua-column.controller';
+import './grid-ua-column.scss';
+
+export const GridUAColumn = defineComponent({
+  name: 'GridUAColumn',
+  props: {
+    controller: {
+      type: GridUAColumnController,
+      required: true,
+    },
+    row: {
+      type: GridRowController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('grid-ua-column');
+    const onStopPropagation = (e: MouseEvent) => {
+      e.stopPropagation();
+    };
+    const onActionClick = async (
+      detail: IUIActionGroupDetail,
+      event: MouseEvent,
+    ) => {
+      await props.controller.onActionClick(detail, props.row, event);
+    };
+
+    // 操作列对齐方式样式变量
+    const alignStyle = computed(() => {
+      let justContent = '';
+      switch (props.controller.model.align) {
+        case 'LEFT':
+          justContent = 'flex-start';
+          break;
+        case 'RIGHT':
+          justContent = 'flex-end';
+          break;
+        default:
+          justContent = 'center';
+          break;
+      }
+      return ns.cssVarBlock({ 'justify-content': justContent });
+    });
+
+    return { ns, alignStyle, onStopPropagation, onActionClick };
+  },
+  render() {
+    return (
+      <div
+        class={this.ns.b()}
+        style={this.alignStyle}
+        onDblclick={this.onStopPropagation}
+        onClick={this.onStopPropagation}
+      >
+        {this.controller.model.deuiactionGroup?.uiactionGroupDetails
+          ?.length && (
+          <action-toolbar
+            action-details={
+              this.controller.model.deuiactionGroup.uiactionGroupDetails
+            }
+            actions-state={
+              this.row.uaColumnStates[this.controller.model.codeName!]
+            }
+            onActionClick={this.onActionClick}
+          ></action-toolbar>
+        )}
+      </div>
+    );
+  },
+});
+export default GridUAColumn;

package/src/control/grid/index.ts

@@ -1,23 +1,31 @@
-import { ControlType } from '@ibiz-template/runtime';
+import {
+  ControlType,
+  registerControlProvider,
+  registerGridColumnProvider,
+} from '@ibiz-template/runtime';
 import { App } from 'vue';
+import { withInstall } from '@ibiz-template/vue3-util';
 import { GridControl } from './grid/grid-control';
 import GridFieldColumn from './grid-field-column/grid-field-column';
-import { withInstall } from '../../util/install';
 import { GridProvider } from './grid/grid-provider';
 import { GridFieldColumnProvider } from './grid-field-column/grid-field-column-provider';
 import GridPagination from './grid-pagination/grid-pagination';
 import { GridController } from './grid/grid.controller';
+import { GridUAColumnProvider } from './grid-ua-column/grid-ua-column-provider';
+import GridUAColumn from './grid-ua-column/grid-ua-column';
 
 export { GridControl, GridFieldColumn, GridController };
 export const IBizGrid = withInstall(GridControl, function (v: App) {
   v.component(GridControl.name, GridControl);
   v.component(GridFieldColumn.name, GridFieldColumn);
+  v.component(GridUAColumn.name, GridUAColumn);
   v.component(GridPagination.name, GridPagination);
-  ibiz.register.gridColumn.register(
+  registerGridColumnProvider(
     'DEFGRIDCOLUMN',
-    new GridFieldColumnProvider(),
+    () => new GridFieldColumnProvider(),
   );
-  ibiz.register.control.register(ControlType.GRID, new GridProvider());
+  registerGridColumnProvider('UAGRIDCOLUMN', () => new GridUAColumnProvider());
+  registerControlProvider(ControlType.GRID, () => new GridProvider());
 });
 
 export default IBizGrid;

package/src/control/index.ts

@@ -1,4 +1,5 @@
 export * from './app-menu';
 export * from './grid';
+export * from './form';
 export * from './toolbar';
 export * from './panel';