update：更新

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/App.vue

@@ -2,7 +2,6 @@
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
 import { PlatformIndexView } from '@page/default/platform-index-view';
-import { JobsInfoEditView } from '@page/jobs-info/jobs-info-edit-view';
 </script>
 
 <template>

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/ibiz-core/modules/views/grid-view/grid-view-prop.ts

+import { MainViewProps } from "@ibiz-core";
+
+/**
+ * @description 表格视图props
+ * @export
+ * @interface GridViewProps
+ * @extends {MainViewProps}
+ */
+export interface GridViewProps extends MainViewProps {
+
+}
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/ibiz-core/modules/views/grid-view/grid-view-state.ts

+import { MainViewState } from "@ibiz-core";
+
+/**
+ * @description 表格视图状态
+ * @export
+ * @interface GridViewState
+ * @extends {MainViewState}
+ */
+export interface GridViewState extends MainViewState {
+
+}
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/ibiz-core/modules/views/grid-view/grid-view.ts

+import { GridViewProps, GridViewState, MainView } from '@ibiz-core';
+
+/**
+ * @description 表格视图
+ * @export
+ * @class GridView
+ * @extends {MainView}
+ */
+export class GridView extends MainView {
+
+  /**
+   * @description 视图状态
+   * @type {EditViewState}
+   * @memberof GridView
+   */
+  public declare viewState: GridViewState;
+
+  /**
+   * @description 使用加载功能模块
+   * @param {GridViewProps} props 传入的props
+   * @memberof GridView
+   */
+  public useLoad(props: GridViewProps){
+    const { viewSubject } = this.viewState;
+    onMounted(()=>{
+      viewSubject.next({tag: 'grid', action: "load", data: {}})
+    })
+  }
+
+  /**
+   * @description 安装视图所有功能模块的方法
+   * @param {GridViewProps} props 传入的Props
+   * @param {Function} [emit] [emit] 事件
+   * @return {*} 
+   * @memberof GridView
+   */
+  public moduleInstall(props: GridViewProps, emit?: Function) {
+    const superParams = super.moduleInstall(props, emit);
+    this.useLoad(props);
+    return {
+      ...superParams,
+      state: this.viewState,
+    };
+  }
+}

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/ibiz-core/modules/views/grid-view/index.ts

+export * from './grid-view-prop'
+export * from './grid-view-state'
+export * from './grid-view'
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/ibiz-core/modules/views/index.ts

 export * from './view-base'
 export * from './main-view'
 export * from './edit-view'
-export * from './index-view'
\ No newline at end of file
+export * from './index-view'
+export * from './grid-view'
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/ibiz-core/modules/widgets/form-control/form-control-state.ts

@@ -7,6 +7,7 @@ import { IParam, MainControlState } from '@ibiz-core';
  * @extends {MainControlState}
  */
 export interface FormControlState extends MainControlState {
+
   /**
    * @description 表单数据对象
    * @type {IParam}
@@ -15,16 +16,23 @@ export interface FormControlState extends MainControlState {
   data: IParam;
 
   /**
-   * @description 表单成员模型集合
+   * @description 表单成员模型
    * @type {IParam}
    * @memberof FormControlState
    */
   detailsModel: IParam;
 
   /**
-   * @description 表单界面行为模型集合
+   * @description 表单界面行为模型
    * @type {IParam}
    * @memberof FormControlState
    */
   actionModel: IParam;
+
+  /**
+   * @description 值规则
+   * @type {IParam}
+   * @memberof FormControlState
+   */
+  rules: IParam;
 }

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/ibiz-core/modules/widgets/grid-control/grid-control-prop.ts

+import { MainControlProps } from "@ibiz-core";
+
+/**
+ * @description 表格部件的props
+ * @export
+ * @interface GridControlProps
+ * @extends {MainControlProps}
+ */
+export interface GridControlProps extends MainControlProps {
+
+}
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/ibiz-core/modules/widgets/grid-control/grid-control-state.ts

+import { IParam, MainControlState } from '@ibiz-core';
+
+/**
+ * @description 表格部件状态
+ * @export
+ * @interface GridControlState
+ * @extends {MainControlState}
+ */
+export interface GridControlState extends MainControlState {
+
+  /**
+   * @description 表格数据集合
+   * @type {IParam[]}
+   * @memberof GridControlState
+   */
+  Items: IParam[];
+
+  /**
+   * @description 表格列模型
+   * @type {IParam}
+   * @memberof GridControlState
+   */
+  columnsModel: IParam;
+
+  /**
+   * @description 表格界面行为模型
+   * @type {IParam}
+   * @memberof GridControlState
+   */
+  actionModel: IParam;
+
+  /**
+   * @description 值规则
+   * @type {IParam}
+   * @memberof GridControlState
+   */
+  rules: IParam;
+}

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/ibiz-core/modules/widgets/grid-control/grid-control.ts

+import { deepCopy, GridControlProps, GridControlState, IActionParam, MainControl } from '@ibiz-core';
+
+/**
+ * @description 表格部件
+ * @export
+ * @class GridControl
+ * @extends {MainControl}
+ */
+export class GridControl extends MainControl {
+  
+  /**
+   * @description 部件状态
+   * @type {GridControlState}
+   * @memberof GridControl
+   */
+  public declare controlState: GridControlState;
+
+  /**
+   * @description 表格数据改变
+   * @param {number} rowIndex 行索引
+   * @param {string} name 表格列属性名称
+   * @param {*} value 表格列属性值
+   * @memberof GridControl
+   */
+  public gridDataChange(rowIndex: number, name: string, value: any){
+    this.controlState.items[rowIndex][name] = value;
+  }
+
+  /**
+   * @description 使用加载功能模块
+   * @param {GridControlProps} props 传入的props
+   * @return {*} 
+   * @memberof GridControl
+   */
+  public useLoad(props: GridControlProps){
+    const { viewSubject, controlName } = this.controlState;
+    const load = async (opt: any = {})=>{
+      try {
+        const loadAction = this.controlState.controlAction.loadAction;
+        const { controlService, context, viewParams, showBusyIndicator } = this.controlState;
+        const dataRef = toRef(this.controlState, 'items');
+        
+        if(!loadAction){
+          return;
+        }
+        let _context = deepCopy(context);
+        let _viewParams = deepCopy(viewParams);
+    
+        const response = await controlService.get(loadAction, _context, {viewParams: _viewParams}, showBusyIndicator );
+        if (!response.status || response.status !== 200) {
+          return
+        }
+        dataRef.value = response.data;
+      } catch (error) {
+        // todo 错误异常处理
+      }
+      
+    }
+
+    // 订阅viewSubject,监听load行为
+    if(viewSubject){
+      let subscription = viewSubject.subscribe(({ tag, action, data }: IActionParam)=>{
+        if(Object.is(controlName, tag) && Object.is("load", action) ){
+          load(data)
+        }
+      })
+      // 部件卸载时退订viewSubject
+      onUnmounted(()=>{
+        subscription.unsubscribe();
+      })
+    }
+
+    return {
+      load: load
+    }
+  }
+
+  /**
+   * @description 处理编辑器事件
+   * @param {IActionParam} actionParam 行为参数
+   * @memberof GridControl
+   */
+  public handleEditorEvent(rowIndex: number, actionParam: IActionParam) {
+    const { tag, action, data } = actionParam;
+    switch (action) {
+      case "valueChange":
+        this.gridDataChange(rowIndex, tag, data);
+        break;
+      default:
+        break;
+    }
+  }
+
+  /**
+   * @description 安装部件所有功能模块的方法
+   * @param {GridControlProps} props 传入的Props
+   * @param {Function} [emit]
+   * @return {*} 
+   * @memberof GridControl [emit] 事件
+   */
+  public moduleInstall(props: GridControlProps, emit?: Function) {
+    const superParams = super.moduleInstall(props, emit);
+    const { load } = this.useLoad(props)
+
+    const handleEditorEvent = this.handleEditorEvent.bind(this);
+    this.handleEditorEvent = (rowIndex: number,actionParam: IActionParam) => {
+      handleEditorEvent(rowIndex, actionParam)
+    }
+
+    return {
+      ...superParams,
+      state: this.controlState,
+      load,
+      handleEditorEvent: this.handleEditorEvent,
+    };
+  }
+}

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/ibiz-core/modules/widgets/grid-control/index.ts

+export * from './grid-control-prop'
+export * from './grid-control-state'
+export * from './grid-control'
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/ibiz-core/modules/widgets/index.ts

 export * from './control-base'
 export * from './main-control'
 export * from './form-control'
-export * from './menu-control'
\ No newline at end of file
+export * from './menu-control'
+export * from './grid-control'
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/ibiz-core/modules/widgets/menu-control/menu-control.ts

@@ -69,7 +69,7 @@ export class MenuControl extends ControlBase {
     const { funcs, defaultView, menuAlign } = this.controlState;
     const defaultSelectRef = toRef(this.controlState, 'defaultSelect');
     const dataRef = toRef(this.controlState, 'menus');
-    if (this.route?.matched?.length == 2) {
+    if (this.route.matched?.length == 2) {
       const [{ }, matched] = this.route.matched;
       const appFunc: any = funcs.find((func: any) => Object.is(func.routePath, matched.path) && Object.is(func.funcType, 'APPVIEW'));
       if (appFunc) {
@@ -164,6 +164,17 @@ export class MenuControl extends ControlBase {
    */
   public menuClick(item: IParam) {
     console.log(item);
+    // 测试代码
+    switch (item.name) {
+      case 'menuitem12':
+        this.router.push('/JobsInfoEditView')
+        break;
+      case 'menuitem13':
+        this.router.push('/JobsRegistryGridView')
+        break;
+      default:
+        break;
+    }
   }
 
   /**

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/page/{{appModules}}/{{pages}}/{{pages@DEEDITVIEW}}.vue.hbs

@@ -41,13 +41,17 @@ const { state } = new EditView(ViewConfig).moduleInstall(props);
     <template v-slot:header-right>
       <span>工具栏部件</span>
     </template>
-    <{{#page.ctrls}}{{#eq controlType "FORM"}}{{codeName}}Form{{/eq}}{{/page.ctrls}}
-      :showBusyIndicator="true"
-      :context="state.context"
-      :viewParams="state.viewParams"
-      :controlAction="state.controlsAction"
-      :viewSubject="state.viewSubject"
-    ></{{#page.ctrls}}{{#eq controlType "FORM"}}{{codeName}}Form{{/eq}}{{/page.ctrls}}>
+      {{#page.ctrls}}
+      {{#eq controlType "FORM"}}
+      <{{codeName}}Form
+        :showBusyIndicator="true"
+        :context="state.context"
+        :viewParams="state.viewParams"
+        :controlAction="state.controlsAction"
+        :viewSubject="state.viewSubject"
+      ></{{codeName}}Form>
+      {{/eq}}
+      {{/page.ctrls}}
   </IbizDefaultViewLayout>
 </template>
 

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/page/{{appModules}}/{{pages}}/{{pages@DEGRIDVIEW}}-config.ts.hbs

+export const ViewConfig = {
+  viewCodeName: '{{page.codeName}}',
+  viewName: '{{page.name}}',
+  viewCaption: '{{page.caption}}',
+};
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/page/{{appModules}}/{{pages}}/{{pages@DEGRIDVIEW}}.vue.hbs

-grid@
-
-{{page.codeName}}--{{page.appModule}}
-
+<script setup lang="ts">
+import { Subject } from 'rxjs';
+import { GridView, IActionParam, IParam } from '@ibiz-core';
+import { ViewConfig } from './{{page.codeName.spinalCase}}-config';
 {{#page.ctrls}}
-  这里是页面视图 ctrl的代码名称 {{codeName}}
+{{#eq controlType "GRID"}}
+import { {{codeName}}Grid } from '@widgets/{{appEntity.codeName.spinalCase}}/{{codeName.spinalCase}}-grid';
+{{/eq}}
 {{/page.ctrls}}
 
-这里是页面视图所属应用实体的代码名称{{page.appEntity.codeName}}
\ No newline at end of file
+// props声明和默认值处理
+interface Props {
+  context: IParam;
+  viewParams?: IParam;
+  openType?: "ROUTE" | "MODAL" | "EMBED";
+  viewSubject?: Subject<IActionParam>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  // 设定默认值,可选属性可以在这初始化
+  viewSubject: () => new Subject<IActionParam>()
+})
+
+// emit声明
+interface ViewEmit {
+  (name: "viewEvent", value: IActionParam): void;
+}
+
+const emit = defineEmits<ViewEmit>();
+
+// 安装功能模块，提供状态和能力方法
+const { state } = new GridView(ViewConfig).moduleInstall(props);
+
+</script>
+
+<template>
+  <IbizDefaultViewLayout class="ibiz-grid-view">
+    <template v-slot:header-left>
+      <IbizIconText class="ibiz-view__caption" size="large" text="state.viewCaption" />
+    </template>
+    <template v-slot:header-right>
+      <span>工具栏部件</span>
+    </template>
+      {{#page.ctrls}}
+      {{#eq controlType "GRID"}}
+      <{{codeName}}Grid
+        :showBusyIndicator="true"
+        :context="state.context"
+        :viewParams="state.viewParams"
+        :controlAction="state.controlsAction"
+        :viewSubject="state.viewSubject"
+      ></{{codeName}}Grid>
+      {{/eq}}
+      {{/page.ctrls}}
+  </IbizDefaultViewLayout>
+</template>
+
+<style lang="scss">
+.ibiz-grid-view {
+  height: 100%;
+  width: 100%;
+}
+</style>
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/router/index.ts

 import { createRouter, createWebHashHistory } from 'vue-router';
 import { JobsInfoEditView } from '@page/jobs-info/jobs-info-edit-view';
+import { JobsRegistryGridView } from '@page/jobs-registry/jobs-registry-grid-view';
 const routes = [
   {
     path: '/JobsInfoEditView',
     component: JobsInfoEditView
   },
+  {
+    path: '/JobsRegistryGridView',
+    component: JobsRegistryGridView
+  },
   {
     path: '/',
     redirect: 'JobsInfoEditView'

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/widgets/{{appEntities}}/{{ctrls@FORM}}-form/{{ctrls@FORM}}-form.vue.hbs

@@ -33,8 +33,8 @@ const { state, handleEditorEvent } = new FormControl(CtrlConfig).moduleInstall(p
     name="{{ctrl.codeName}}" 
     class="ibiz-form{{#if ctrl.pSSysCss}} {{ctrl.pSSysCss.cssName}}{{/if}}{{#if ctrl.infoFormMode}} ibiz-info-form{{/if}}"
     style="{{#if ctrl.formWidth}}width: {{ctrl.formWidth}}px;{{/if}}"
-    :model="data" 
-    :rules="rules">
+    :model="state.data" 
+    :rules="state.rules">
     {{#if ctrl.noTabHeader}}
     {{#each ctrl.psDEFormPages as | ctrlPage | }}
       {{#each ctrlPage.pSDEFormDetails as | formDetail | }}

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/widgets/{{appEntities}}/{{ctrls@GRID}}-grid/index.ts.hbs

+import {{ctrl.codeName}}Grid from "./{{ctrl.codeName.spinalCase}}-grid.vue";
+
+export { {{ctrl.codeName}}Grid };

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/widgets/{{appEntities}}/{{ctrls@GRID}}-grid/{{ctrls@GRID}}-grid-config.ts.hbs

+export const CtrlConfig = {
+  controlCodeName: '{{ctrl.codeName}}',
+  controlName: '{{ctrl.name}}',
+  items: [],
+};
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/widgets/{{appEntities}}/{{ctrls@GRID}}-grid/{{ctrls@GRID}}-grid.vue.hbs

+{{>@macro/form-detail/include-form.hbs}}
+<script setup lang="ts">
+import { Subject } from 'rxjs';
+import { CtrlConfig } from './{{ctrl.codeName.spinalCase}}-grid-config';
+import { GridControl, IActionParam, IParam, ControlAction } from '@ibiz-core';
+
+interface Props {
+  context: IParam;
+  viewParams?: IParam;
+  controlAction: ControlAction;
+  showBusyIndicator?: boolean;
+  viewSubject: Subject<IActionParam>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  viewSubject: () => new Subject<IActionParam>(),
+  showBusyIndicator: true,
+})
+
+// emit声明
+interface CtrlEmit {
+  (name: "ctrlEvent", value: IActionParam): void;
+}
+
+const emit = defineEmits<CtrlEmit>();
+
+// 安装功能模块，提供状态和能力方法
+const { state, handleEditorEvent } = new GridControl(CtrlConfig).moduleInstall(props);
+
+</script>
+<template>
+  
+</template>
+<style lang="scss">
+
+</style>
\ No newline at end of file