From 6a8959379b8a3c9ee84e806c844d50f3bccb3e9f Mon Sep 17 00:00:00 2001
From: likunming <likunming@163.com>
Date: Tue, 27 May 2025 13:31:22 +0800
Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E4=BC=98=E5=8C=96=E4=BD=8E=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E6=A8=A1=E5=9D=97=E8=A1=A8=E5=8D=95=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E3=80=82=202=E3=80=81w-grid=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gradle.properties                             |    2 +-
 .../platform/components/form/FormGroup.vue    |    2 +-
 .../src/platform/components/grid/Tr.vue       |    2 +-
 .../grid/TreeGridFirstTdContent.vue           |    6 +-
 .../src/platform/components/grid/WGrid.vue    |    8 +-
 .../extra/inline-edit/InlineEditToolbar.vue   |  101 +-
 .../grid/ts/computed/ComputedManager.ts       |   23 +
 .../components/grid/ts/event/src/RowClick.ts  |   16 +-
 .../grid/ts/function/ColumnTitle.ts           |    2 +
 .../components/grid/ts/function/RowData.ts    |    3 +-
 .../grid/ts/toolbar/buttons/InlineRowsEdit.ts |    4 +
 .../src/platform/components/index.ts          |    3 +
 .../components/select/WDbTableSelect.vue      |   25 +
 .../src/platform/index.ts                     |    1 +
 .../src/views/form/FormConfig.vue             | 1782 +----------------
 .../src/views/form/Page.vue                   |  288 +--
 .../src/views/form/grid/FieldGrid.vue         |  488 +++--
 .../src/views/form/page.ts                    |  366 +++-
 .../lcdp/form/controller/FormController.java  |    7 +
 .../lcdp/form/entity/GridFieldEntity.java     |   26 +
 .../lcdp/form/entity/GridPageEntity.java      |   53 +
 .../lcdp/form/service/FormService.java        |    3 +
 .../form/service/impl/FormServiceImpl.java    |   23 +
 .../service/impl/JdbcTemplateServiceImpl.java |   71 +-
 .../sc/platform/lcdp/form/vo/GridFieldVo.java |   24 +
 .../sc/platform/lcdp/form/vo/GridPageVo.java  |   50 +
 .../io.sc.platform.lcdp_Form_DDL.xml          |    8 +-
 27 files changed, 1077 insertions(+), 2310 deletions(-)

diff --git a/gradle.properties b/gradle.properties
index 7b4a7397..d7d226dc 100644
--- a/gradle.properties
+++ b/gradle.properties
@@ -85,7 +85,7 @@ p6spy_version=3.9.1
 pinyin4j_version=2.5.1
 poi_version=5.2.5
 reflections_version=0.10.2
-schemacrawler_version=16.19.11
+schemacrawler_version=16.21.4
 shadow_gradle_plugin_version=8.3.1
 spring_boot_version=2.7.18
 spring_cloud_alibaba_version=2021.0.4.0
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/FormGroup.vue b/io.sc.platform.core.frontend/src/platform/components/form/FormGroup.vue
index 0bb46acd..e0b0e41d 100644
--- a/io.sc.platform.core.frontend/src/platform/components/form/FormGroup.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/form/FormGroup.vue
@@ -173,7 +173,7 @@ const cardModeHeaderStyleComputed = computed(() => {
     alignItems: 'center',
     // 文字颜色
     color: '#000',
-    padding: '5px',
+    padding: '7px',
   };
   if (props.headerBgColor) {
     // 背景颜色
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/Tr.vue b/io.sc.platform.core.frontend/src/platform/components/grid/Tr.vue
index 29699529..01d1f545 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/Tr.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/Tr.vue
@@ -43,7 +43,7 @@
       ></Tr>
     </template>
   </template>
-  <InlineEditToolbar :row="props.scope.row"></InlineEditToolbar>
+  <!-- <InlineEditToolbar :row="props.scope.row"></InlineEditToolbar> -->
 </template>
 
 <script setup lang="ts">
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/TreeGridFirstTdContent.vue b/io.sc.platform.core.frontend/src/platform/components/grid/TreeGridFirstTdContent.vue
index c6b30fff..e4e35ed6 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/TreeGridFirstTdContent.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/TreeGridFirstTdContent.vue
@@ -274,4 +274,8 @@ watch(
 );
 </script>
 
-<style lang="css"></style>
+<style lang="css">
+.treeGridIconAndName {
+  display: flex;
+}
+</style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue b/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
index 72cd5992..6ea88fb1 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
@@ -21,7 +21,7 @@
       :table-style="tools.cm.tableHeight.value"
       :row-key="Constant.FIELD_NAMES.ROW_KEY"
       :visible-columns="tools.cm.displayColumns.value"
-      :hide-bottom="pageable && !props.localMode && !tree ? false : true"
+      :hide-bottom="tools.cm.hideBottom.value"
       @request="tools.reqApiFM.fetchData"
       @fullscreen="tools.opFM.tableFullscreen"
     >
@@ -53,6 +53,11 @@
         <Pagination ref="paginationRef" v-model="tools.table.store.pagination.page" :scope="scope"></Pagination>
       </template>
 
+      <!-- 底部插槽 -->
+      <template v-if="tools.cm.showInlineEditToolbar.value" #bottom>
+        <InlineEditToolbar></InlineEditToolbar>
+      </template>
+
       <!-- 隐藏表头且无数据时 -->
       <template v-if="tools.table.rows.length === 0 && props.hideHeader" #top-row>
         <div :style="tools.cm.noDataStyle.value"><q-icon size="2em" name="info" />{{ $t(tools.table.store.noDataLabelI18nKey) }}</div>
@@ -80,6 +85,7 @@ import ViewPanel from './extra/ViewPanel.vue';
 import Header from './Header.vue';
 import Pagination from './Pagination.vue';
 import Top from './Top.vue';
+import InlineEditToolbar from './extra/inline-edit/InlineEditToolbar.vue';
 import { Constant, EventType, GridTools, Init, ExposeApiManager } from './ts/index';
 
 const attrs = useAttrs();
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/extra/inline-edit/InlineEditToolbar.vue b/io.sc.platform.core.frontend/src/platform/components/grid/extra/inline-edit/InlineEditToolbar.vue
index 038cb058..94d26a41 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/extra/inline-edit/InlineEditToolbar.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/extra/inline-edit/InlineEditToolbar.vue
@@ -1,45 +1,38 @@
 <template>
-  <q-tr v-if="showComputed">
-    <q-td :colspan="tools.cm.displayColumnNum.value">
-      <div class="editButton text-center">
-        <w-toolbar v-model="buttons" :dense="true" align="center" :grid="tools.instance"></w-toolbar>
-      </div>
-    </q-td>
-  </q-tr>
+  <div class="w-full flex justify-center gap-x-4">
+    <div v-for="button in buttons" :key="button.name">
+      <q-btn v-bind="button"></q-btn>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
 import { NotifyManager, Tools, $t } from '@/platform';
-import { computed, inject, ref } from 'vue';
+import { inject, nextTick } from 'vue';
 import { Constant, GridTools } from '../../ts/index';
 
 const tools = <GridTools>inject('tools');
-const props = defineProps({
-  row: {
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-});
 
-const buttons = ref([
+const buttons = [
   {
     label: '保存',
     name: 'save',
     icon: 'save',
+    dense: tools.table.configStore.dense || tools.table.configStore.denseBottom ? true : false,
     color: 'primary',
     outline: false,
-    click: async (args) => {
-      save(args);
+    onClick: async () => {
+      await save();
+      tools.opFM.resetStyleVariableValue(200);
     },
   },
   {
     label: '取消',
     name: 'cancel',
+    dense: tools.table.configStore.dense || tools.table.configStore.denseBottom ? true : false,
     icon: 'close',
     color: 'blue-grey',
     outline: false,
-    click: (args) => {
+    onClick: (args) => {
       if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.ROW || tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.CELL) {
         tools.dataFM.setOldValue(args.selected);
       } else if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.ROWS) {
@@ -48,36 +41,12 @@ const buttons = ref([
         });
       }
       tools.table.store.inlineEditStatus = Constant.EDIT_STATUS.NONE;
+      nextTick(() => {
+        tools.opFM.resetStyleVariableValue(200);
+      });
     },
   },
-]);
-
-const showComputed = computed(() => {
-  if (tools.props.localMode && tools.table.store.inlineEditStatus !== Constant.EDIT_STATUS.ROWS) {
-    return false;
-  }
-  if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.CELL) {
-    const selected = tools.apiFM.getData.getSelectedCell();
-    if (
-      selected?.colName &&
-      selected.colName === tools.table.store.cellSelected?.colName &&
-      selected.row[Constant.FIELD_NAMES.ROW_KEY] === props.row[Constant.FIELD_NAMES.ROW_KEY]
-    ) {
-      return true;
-    }
-    return false;
-  } else if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.ROW && tools.dataFM.isSelectedRow(props.row[Constant.FIELD_NAMES.ROW_KEY])) {
-    return true;
-  } else if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.ROWS && tools.table.rows.length > 0 && isLastRowComputed.value) {
-    return true;
-  } else {
-    return false;
-  }
-});
-
-const isLastRowComputed = computed(() => {
-  return tools.dataFM.isLastRow(props.row);
-});
+];
 
 const validate = async (refs) => {
   let result = true;
@@ -94,12 +63,15 @@ const validate = async (refs) => {
   return result;
 };
 
-const save = async (args) => {
+const save = async () => {
   let refs: any = undefined;
+  const grid = tools.instance;
+  const selected = grid.getSelectedRow();
   if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.CELL) {
-    refs = [tools.editFM.getComponentRef(args.selected[Constant.FIELD_NAMES.ROW_KEY], args.selectedColName)];
+    const cell = grid.getSelectedCell();
+    refs = [tools.editFM.getComponentRef(selected[Constant.FIELD_NAMES.ROW_KEY], cell.colName)];
   } else if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.ROW) {
-    refs = tools.editFM.getComponentRefs(args.selected[Constant.FIELD_NAMES.ROW_KEY]);
+    refs = tools.editFM.getComponentRefs(selected[Constant.FIELD_NAMES.ROW_KEY]);
   } else if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.ROWS) {
     refs = tools.editFM.getComponentRefs([]);
   }
@@ -108,15 +80,15 @@ const save = async (args) => {
     NotifyManager.error('验证未通过');
   } else {
     if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.ROW || tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.CELL) {
-      rowSave(args);
+      rowSave(selected);
     } else if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.ROWS) {
-      rowsSave(args);
+      rowsSave(selected);
     }
   }
 };
 
-const rowSave = (args) => {
-  let data = args.selected[Constant.FIELD_NAMES.ROW_OLD_VALUE];
+const rowSave = (selected: any) => {
+  let data = selected[Constant.FIELD_NAMES.ROW_OLD_VALUE];
   let submitFlag = true;
   let localeUpdateFlag = false;
   let url = '';
@@ -139,11 +111,11 @@ const rowSave = (args) => {
     tools.table.store.inlineEditStatus = Constant.EDIT_STATUS.NONE;
   } else {
     if (submitFlag) {
-      data = { ...args.selected, ...data };
+      data = { ...selected, ...data };
       if (!Tools.isEmpty(tools.table.url.editDataUrl)) {
-        url = tools.table.url.editDataUrl + '/' + args.selected[tools.props.primaryKey];
+        url = tools.table.url.editDataUrl + '/' + selected[tools.props.primaryKey];
       } else {
-        url = tools.table.url.dataUrl + '/' + args.selected[tools.props.primaryKey];
+        url = tools.table.url.dataUrl + '/' + selected[tools.props.primaryKey];
       }
       const callback = (resp) => {
         if (tools.props.refreshData || !tools.props.tree) {
@@ -163,9 +135,9 @@ const rowSave = (args) => {
   }
 };
 
-const rowsSave = (args) => {
+const rowsSave = (selected: any) => {
   let data = <any>[];
-  const rows = args.grid.getRows();
+  const rows = tools.instance.getRows();
   const isTree = tools.props.tree;
   rows.forEach((item) => {
     if (checkDataModified(item)) {
@@ -238,12 +210,3 @@ const treeDataPush = (arr) => {
   return data;
 };
 </script>
-
-<style lang="css">
-.editButton {
-  position: sticky;
-  background-color: white;
-  left: 45%;
-  width: 150px;
-}
-</style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/computed/ComputedManager.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/computed/ComputedManager.ts
index d7266d9e..f06963a2 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/ts/computed/ComputedManager.ts
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/computed/ComputedManager.ts
@@ -48,6 +48,29 @@ export class ComputedManager extends Base {
     }
   });
 
+  /**
+   * 隐藏底部插槽
+   */
+  hideBottom = computed(() => {
+    if (this.showInlineEditToolbar.value) {
+      return false;
+    } else {
+      return this.props.pageable && !this.props.localMode && !this.props.tree ? false : true;
+    }
+  });
+
+  /**
+   * 显示内联编辑保存与取消按钮
+   */
+  showInlineEditToolbar = computed(() => {
+    if (this.props.localMode && this.table.store.inlineEditStatus !== Constant.EDIT_STATUS.ROWS) {
+      return false;
+    } else if (this.table.store.inlineEditStatus !== Constant.EDIT_STATUS.NONE) {
+      return true;
+    }
+    return false;
+  });
+
   /**
    * 当前表格显示的所有列名
    */
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/RowClick.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/RowClick.ts
index 5a75663d..4cb1357e 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/RowClick.ts
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/RowClick.ts
@@ -48,12 +48,16 @@ export class RowClick extends Base {
     this.instance.emit(RowClick.NAME, { grid: this.instance, evt, row, index });
   }
   private clickExitInlineEdit(row: any, selected: any) {
-    return (
-      this.props.localMode &&
-      this.table?.store.inlineEditStatus !== Constant.EDIT_STATUS.NONE &&
-      this.props.selectMode === Constant.SELECT_MODE.ROW &&
-      row[Constant.FIELD_NAMES.ROW_KEY] !== selected[Constant.FIELD_NAMES.ROW_KEY]
-    );
+    if (selected) {
+      return (
+        this.props.localMode &&
+        this.table?.store.inlineEditStatus !== Constant.EDIT_STATUS.NONE &&
+        this.props.selectMode === Constant.SELECT_MODE.ROW &&
+        row[Constant.FIELD_NAMES.ROW_KEY] !== selected[Constant.FIELD_NAMES.ROW_KEY]
+      );
+    } else {
+      return false;
+    }
   }
   private execClick() {
     return this.table?.store.inlineEditStatus === Constant.EDIT_STATUS.NONE && this.props.selectMode !== Constant.SELECT_MODE.NONE;
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/ColumnTitle.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/ColumnTitle.ts
index 8ddc869b..ad1fdf3e 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/ColumnTitle.ts
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/ColumnTitle.ts
@@ -72,7 +72,9 @@ export class ColumnTitle extends Base {
       this.columnToMap(toRaw(column));
     });
 
+    // 重置
     this.childrenMaxLevel = 0;
+    this.rowNum.value = 1;
     this.colspan = 0;
     const deepArr = [];
 
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/RowData.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/RowData.ts
index 158f7828..94d04d84 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/RowData.ts
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/RowData.ts
@@ -393,7 +393,8 @@ export class RowData extends Base {
     rowData[this.props.tickedField] = this.getInitRowTicked(rowData);
     rowData[this.props.selectedField] = this.getInitRowSelected(rowData);
     rowData[Constant.FIELD_NAMES.ROW_OLD_VALUE] = {};
-    rowData[Constant.FIELD_NAMES.SELECTABLE] = this.getInitSelectable(rowData);
+    const selectable = this.getInitSelectable(rowData);
+    rowData[Constant.FIELD_NAMES.SELECTABLE] = selectable;
     rowData[Constant.FIELD_NAMES.ROW_INDEX] = this.rowIndex;
     if (this.props.tree) {
       rowData[Constant.FIELD_NAMES.TREE_TICKABLE] = this.getInitTreeTickable(rowData);
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/InlineRowsEdit.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/InlineRowsEdit.ts
index f7bf94d0..52faddc4 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/InlineRowsEdit.ts
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/InlineRowsEdit.ts
@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { $t } from '@/platform';
 import { Button } from '../Button';
 import { Constant, PropsType, TableType } from '../../index';
@@ -21,6 +22,9 @@ export class InlineRowsEdit extends Button {
     } else {
       console.warn('[w-grid]Not configured with a component type for editing.');
     }
+    nextTick(() => {
+      this.tools?.opFM.resetStyleVariableValue(200);
+    });
   }
 
   getButtonConfig() {
diff --git a/io.sc.platform.core.frontend/src/platform/components/index.ts b/io.sc.platform.core.frontend/src/platform/components/index.ts
index be9258af..3bf4c62b 100644
--- a/io.sc.platform.core.frontend/src/platform/components/index.ts
+++ b/io.sc.platform.core.frontend/src/platform/components/index.ts
@@ -24,6 +24,7 @@ import WUserSelect from './select/WUserSelect.vue';
 import WOrgSelect from './select/WOrgSelect.vue';
 import WRoleSelect from './select/WRoleSelect.vue';
 import WDbTableSelect from './select/WDbTableSelect.vue';
+import WDictionarySelect from './select/WDictionarySelect.vue';
 import WDate from './date/WDate.vue';
 import WDateRange from './date/WDateRange.vue';
 import WCheckbox from './checkbox/WCheckbox.vue';
@@ -94,6 +95,7 @@ export default {
     app.component('WOrgSelect', WOrgSelect);
     app.component('WRoleSelect', WRoleSelect);
     app.component('WDbTableSelect', WDbTableSelect);
+    app.component('WDictionarySelect', WDictionarySelect);
     app.component('WDate', WDate);
     app.component('WDateRange', WDateRange);
     app.component('WCheckbox', WCheckbox);
@@ -160,6 +162,7 @@ export {
   WOrgSelect,
   WRoleSelect,
   WDbTableSelect,
+  WDictionarySelect,
   WLabel,
   WRadio,
   WExtRadio,
diff --git a/io.sc.platform.core.frontend/src/platform/components/select/WDbTableSelect.vue b/io.sc.platform.core.frontend/src/platform/components/select/WDbTableSelect.vue
index 5d0e4dee..73841618 100644
--- a/io.sc.platform.core.frontend/src/platform/components/select/WDbTableSelect.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/select/WDbTableSelect.vue
@@ -509,11 +509,36 @@ onMounted(() => {
   setObjectValueByValue(modelValue.value);
 });
 
+/**
+ * 获取表格字段：
+ * 返回当前模型值的字段集合
+ * 单选模式返回：[{name: 'a', remarks: '字段1', ...},{name: 'b', remarks: '字段2', ...}]
+ * 多选模式返回：{ 表名：[{name: 'a', remarks: '字段1', ...},{name: 'b', remarks: '字段2', ...}] }
+ */
+const getFields = () => {
+  if (props.multiple && Array.isArray(modelValue.value)) {
+    const result = <any>[];
+    tablesOptionsRef.value.forEach((item) => {
+      if (modelValue.value?.includes(item[valueUseColumnName])) {
+        result.push(item);
+      }
+    });
+    return result;
+  } else {
+    const findResult = tablesOptionsRef.value.find((item) => modelValue.value === item[valueUseColumnName]);
+    if (findResult) {
+      return findResult['columns'];
+    }
+    return [];
+  }
+};
+
 defineExpose({
   validate: fieldMethodsClass.validate,
   setValue: fieldMethodsClass.setValue,
   getValue: fieldMethodsClass.getValue,
   getObjectValue: fieldMethodsClass.getObjectValue,
   clearValue: fieldMethodsClass.clearValue,
+  getFields,
 });
 </script>
diff --git a/io.sc.platform.core.frontend/src/platform/index.ts b/io.sc.platform.core.frontend/src/platform/index.ts
index 09f581a6..3aa3298b 100644
--- a/io.sc.platform.core.frontend/src/platform/index.ts
+++ b/io.sc.platform.core.frontend/src/platform/index.ts
@@ -152,6 +152,7 @@ export {
   WUserSelect,
   WRoleSelect,
   WDbTableSelect,
+  WDictionarySelect,
   WLabel,
   WRadio,
   WExtRadio,
diff --git a/io.sc.platform.lcdp.frontend/src/views/form/FormConfig.vue b/io.sc.platform.lcdp.frontend/src/views/form/FormConfig.vue
index 67e35f19..9e4e0bdf 100644
--- a/io.sc.platform.lcdp.frontend/src/views/form/FormConfig.vue
+++ b/io.sc.platform.lcdp.frontend/src/views/form/FormConfig.vue
@@ -1,1621 +1,105 @@
 <template>
   <div style="height: 100%">
     <w-grid
-      ref="platformGridRef"
+      ref="formConfigGridRef"
       title="模板页面配置列表"
       sort-no
       :data-url="Environment.apiContextPath('api/template/config')"
-      :columns="platformGrid.columns"
-      :toolbar-actions="platformGrid.toolbarActions"
       :query-form-cols-num="3"
-      :query-form-fields="platformGrid.queryFormFields"
-      :viewer="platformGrid.viewer"
-      :sort-by="['-lastModifyDate']"
-    ></w-grid>
-    <SelectMenuDialog ref="selectMneuDialogRef"></SelectMenuDialog>
-    <w-dialog
-      ref="dialogRef"
-      :title="dialog.dialogTitle"
-      :maximized="true"
-      :can-maximize="false"
-      :buttons="[
+      :query-form-fields="[
+        { label: '模板名称', name: 'templateName', type: 'w-text' },
+        { label: '模板类型', name: 'templateType', type: 'w-select', options: [{ label: '表格页面', value: 'GRID' }] },
         {
-          icon: 'save',
-          label: '保存',
-          loading: false,
+          label: '模板页面加载类型',
+          name: 'pageLoadType',
+          type: 'w-select',
+          options: [
+            { label: '通过json字符串加载', value: 'JSON' },
+            { label: '通过配置加载', value: 'CONFIG' },
+          ],
+        },
+      ]"
+      :columns="[
+        { name: 'templateName', label: '模板名称' },
+        { name: 'templateType', label: '模板类型', format: (val) => (val === 'GRID' ? '表格页面' : val) },
+        { name: 'pageLoadType', label: '模板页面加载类型', format: (val) => (val === 'JSON' ? '通过json字符串加载' : '通过配置加载') },
+        { name: 'lastModifier', label: '最后修改人' },
+        { name: 'lastModifyDate', label: '最后修改时间' },
+      ]"
+      :toolbar-actions="[
+        'query',
+        'reset',
+        'separator',
+        {
+          extend: 'add',
           click: () => {
-            saveDatabaseTableTemplateValidate();
+            dialogRef.show();
           },
         },
+        {
+          extend: 'edit',
+          click: (args) => {
+            formConfigEdit(args.selected);
+          },
+        },
+        {
+          extend: 'remove',
+          label: '删除',
+          click: (args) => {
+            formConfigDelete(args.selecteds);
+          },
+        },
+        'separator',
+        'view',
+        {
+          name: 'generateMenu',
+          label: '注册菜单',
+          icon: 'widgets',
+          enableIf: (args) => {
+            if (args.selected) {
+              return true;
+            }
+            return false;
+          },
+          click: (args) => {
+            selectMneuDialogRef.show(args.selected);
+          },
+        },
+        'separator',
       ]"
-    >
-      <q-splitter v-model="dialog.splitterModel" style="height: 100%">
-        <template #before>
-          <div class="p-1">
-            <fieldset class="fieldsetClass">
-              <legend>
-                <q-icon name="settings_applications" class="mb-1" size="xs"></q-icon>
-                <a
-                  :href="void 0"
-                  class="cursor-pointer"
-                  @click="
-                    () => {
-                      pageConfig.templateConfigShowAllItems = !pageConfig.templateConfigShowAllItems;
-                    }
-                  "
-                >
-                  模板配置
-                  <q-tooltip>
-                    <span v-if="!pageConfig.templateConfigShowAllItems">显示所有配置项</span>
-                    <span v-else>恢复默认显示的配置项</span>
-                  </q-tooltip>
-                </a>
-                <q-icon :name="pageConfig.templateConfigShowAllItems ? 'arrow_drop_up' : 'arrow_drop_down'" class="mb-1" size="xs"></q-icon>
-              </legend>
-              <w-form
-                ref="templateConfigFormRef"
-                :cols-num="1"
-                :fields="[
-                  {
-                    label: '模板名称',
-                    name: 'templateName',
-                    type: 'w-text',
-                    requiredIf: true,
-                  },
-                  {
-                    label: '模板类型',
-                    name: 'templateType',
-                    type: 'w-select',
-                    requiredIf: true,
-                    showIf: () => {
-                      return !pageConfig.templateConfigShowAllItems ? false : true;
-                    },
-                    defaultValue: 'GRID',
-                    options: [{ label: '表格页面模板', value: 'GRID' }],
-                  },
-                  {
-                    label: '页面加载类型',
-                    name: 'pageLoadType',
-                    type: 'w-select',
-                    requiredIf: true,
-                    showIf: () => {
-                      return !pageConfig.templateConfigShowAllItems ? false : true;
-                    },
-                    defaultValue: 'CONFIG',
-                    options: [
-                      { label: '配置加载', value: 'CONFIG' },
-                      { label: 'JSON字符串加载', value: 'JSON' },
-                    ],
-                  },
-                ]"
-              >
-              </w-form>
-            </fieldset>
-          </div>
-          <div class="p-1">
-            <fieldset class="fieldsetClass">
-              <legend>
-                <q-icon name="settings" class="mb-1" size="xs"></q-icon>
-                <a
-                  :href="void 0"
-                  class="cursor-pointer"
-                  @click="
-                    () => {
-                      pageConfig.mainConfigShowAllItems = !pageConfig.mainConfigShowAllItems;
-                    }
-                  "
-                >
-                  主要配置
-                  <q-tooltip>
-                    <span v-if="!pageConfig.mainConfigShowAllItems">显示所有配置项</span>
-                    <span v-else>恢复默认显示的配置项</span>
-                  </q-tooltip>
-                </a>
-                <q-icon :name="pageConfig.mainConfigShowAllItems ? 'arrow_drop_up' : 'arrow_drop_down'" class="mb-1" size="xs"></q-icon>
-              </legend>
-              <w-form
-                ref="mainConfigFormRef"
-                :cols-num="1"
-                :fields="[
-                  {
-                    label: '字段来源',
-                    name: 'fieldComeFrom',
-                    type: 'w-select',
-                    requiredIf: true,
-                    defaultValue: 'table',
-                    options: [
-                      { label: '数据库单表', value: 'table' },
-                      { label: 'SQL语句', value: 'sql' },
-                    ],
-                    'onUpdate:modelValue': (value) => {
-                      fieldComeFromChange(value);
-                    },
-                  },
-                  {
-                    label: '数据库实例',
-                    name: 'schema',
-                    type: 'w-select',
-                    requiredIf: true,
-                    showIf: () => {
-                      if (fieldComeFromValueComputed === 'sql') {
-                        return false;
-                      }
-                      return true;
-                    },
-                    options: state.schemas,
-                    'onUpdate:modelValue': (value) => {
-                      if (value) {
-                        schemaChangeFun(value);
-                      }
-                    },
-                  },
-                  {
-                    label: '数据库表',
-                    name: 'databaseTable',
-                    type: 'w-select',
-                    useInput: true,
-                    requiredIf: true,
-                    clearable: true,
-                    showIf: () => {
-                      if (fieldComeFromValueComputed === 'sql') {
-                        return false;
-                      }
-                      return true;
-                    },
-                    options: state.tables,
-                    onFilter: (val, update) => {
-                      update(() => {
-                        const needle = val.toLowerCase();
-                        mainConfigFormRef.getFields()['databaseTable'].options = state.tables.filter(
-                          (item: any) => item.value.toLowerCase().indexOf(needle) > -1,
-                        );
-                      });
-                    },
-                    'onUpdate:modelValue': (value) => {
-                      if (value) {
-                        if (templateFieldGridRef.getRows() && templateFieldGridRef.getRows().length > 0) {
-                          $q.dialog({
-                            title: '询问',
-                            message: '更改数据库表未保存的情况下会导致当前已配置的信息丢失，您确认要更改所选记录吗？',
-                            cancel: true,
-                            persistent: true,
-                          })
-                            .onOk(() => {
-                              databaseTableValue = value;
-                              databaseTableChangeFun(value);
-                            })
-                            .onCancel(() => {
-                              mainConfigFormRef.setFieldValue('databaseTable', databaseTableValue);
-                            });
-                        } else {
-                          databaseTableValue = value;
-                          databaseTableChangeFun(value);
-                        }
-                      } else {
-                        databaseTableValue = '';
-                      }
-                    },
-                  },
-                  {
-                    label: 'SQL',
-                    name: 'sql',
-                    type: 'w-code-mirror',
-                    lang: 'sql',
-                    toolbar: false,
-                    requiredIf: true,
-                    hint: `示例：select u.loginname_,r.name_ from sys_user u join sys_role r on u.DEFAULT_ROLE_ID_ = r.id_ where u.loginname_ = '#{loginName}'`,
-                    hideHint: true,
-                    showIf: () => {
-                      if (fieldComeFromValueComputed === 'sql') {
-                        return true;
-                      }
-                      return false;
-                    },
-                    button: {
-                      icon: 'search',
-                      click: (args) => {
-                        if (!Tools.isEmpty(args.value)) {
-                          loadFields(args.value);
-                        }
-                      },
-                    },
-                  },
-                  { label: '表格标题', name: 'title', type: 'w-text' },
-                  {
-                    label: '表格按钮',
-                    name: 'buttons',
-                    defaultValue: ['query', 'reset', 'add', 'edit', 'remove', 'export', 'config'],
-                    type: 'w-checkbox-group',
-                    simple: false,
-                    options: [
-                      { label: '查询', value: 'query' },
-                      { label: '更多查询', value: 'moreQuery' },
-                      { label: '重置', value: 'reset' },
-                      { label: '刷新', value: 'refresh' },
-                      { label: '新增', value: 'add' },
-                      { label: '编辑', value: 'edit' },
-                      { label: '复制', value: 'clone' },
-                      { label: '删除', value: 'remove' },
-                      { label: '查看', value: 'view' },
-                      { label: '导出', value: 'export' },
-                      { label: '新增顶级节点', value: 'addTop' },
-                      { label: '新增子节点', value: 'addChild' },
-                      { label: '展开/收起所有', value: 'expand' },
-                      { label: '表格设置', value: 'config' },
-                    ],
-                  },
-                  {
-                    label: '选择模式',
-                    name: 'selection',
-                    type: 'w-select',
-                    hide: true,
-                    defaultValue: 'single',
-                    showIf: () => {
-                      if (fieldComeFromValueComputed === 'sql') {
-                        return false;
-                      }
-                      return true;
-                    },
-                    options: [
-                      { label: '单选', value: 'single' },
-                      { label: '多选', value: 'multiple' },
-                    ],
-                  },
-                  {
-                    label: '数据主键',
-                    name: 'primaryKey',
-                    type: 'w-text',
-                    defaultValue: 'ID',
-                    showIf: () => {
-                      if (pageConfig.mainConfigShowAllItems) {
-                        return true;
-                      }
-                      return false;
-                    },
-                    hint: `普通表格该字段用作内置的编辑删除等功能对应的后端API入参，如：继承RestCrudController的update所需的入参。树形表格模式时，该字段为构建树数据的主键`,
-                  },
-                  {
-                    label: '数据外键',
-                    name: 'foreignKey',
-                    type: 'w-text',
-                    showIf: () => {
-                      if (pageConfig.mainConfigShowAllItems) {
-                        return true;
-                      }
-                      return false;
-                    },
-                    defaultValue: 'parent',
-                    hint: `普通表格该字段无用，树形表格模式时，该字段为构建树数据的关系字段`,
-                  },
-                  {
-                    label: '数据操作URL前缀',
-                    name: 'dataUrl',
-                    type: 'w-text',
-                    hide: true,
-                    defaultValue: '',
-                    showIf: () => {
-                      if (pageConfig.mainConfigShowAllItems && fieldComeFromValueComputed !== 'sql') {
-                        return true;
-                      }
-                      return false;
-                    },
-                  },
-                  {
-                    label: '查询URL',
-                    name: 'fetchDataUrl',
-                    type: 'w-text',
-                    hide: true,
-                    defaultValue: 'api/jdbc/list',
-                    showIf: () => {
-                      if (pageConfig.mainConfigShowAllItems && fieldComeFromValueComputed !== 'sql') {
-                        return true;
-                      }
-                      return false;
-                    },
-                  },
-                  {
-                    label: '新增URL',
-                    name: 'addDataUrl',
-                    type: 'w-text',
-                    hide: true,
-                    defaultValue: 'api/jdbc/add',
-                    showIf: () => {
-                      if (pageConfig.mainConfigShowAllItems && fieldComeFromValueComputed !== 'sql') {
-                        return true;
-                      }
-                      return false;
-                    },
-                  },
-                  {
-                    label: '编辑URL',
-                    name: 'editDataUrl',
-                    type: 'w-text',
-                    hide: true,
-                    defaultValue: 'api/jdbc/edit',
-                    showIf: () => {
-                      if (pageConfig.mainConfigShowAllItems && fieldComeFromValueComputed !== 'sql') {
-                        return true;
-                      }
-                      return false;
-                    },
-                  },
-                  {
-                    label: '删除URL',
-                    name: 'removeDataUrl',
-                    type: 'w-text',
-                    hide: true,
-                    defaultValue: 'api/jdbc/delete',
-                    showIf: () => {
-                      if (pageConfig.mainConfigShowAllItems && fieldComeFromValueComputed !== 'sql') {
-                        return true;
-                      }
-                      return false;
-                    },
-                  },
-                  {
-                    label: '显示序号列',
-                    name: 'sortNo',
-                    type: 'w-checkbox',
-                    defaultValue: true,
-                    showIf: () => {
-                      if (pageConfig.mainConfigShowAllItems) {
-                        return true;
-                      }
-                      return false;
-                    },
-                  },
-                  {
-                    label: '显示复选框列',
-                    name: 'checkboxSelection',
-                    type: 'w-checkbox',
-                    defaultValue: true,
-                    showIf: () => {
-                      if (pageConfig.mainConfigShowAllItems) {
-                        return true;
-                      }
-                      return false;
-                    },
-                  },
-                  {
-                    label: '行允许拖拽',
-                    name: 'draggable',
-                    type: 'w-checkbox',
-                    showIf: () => {
-                      if (pageConfig.mainConfigShowAllItems && fieldComeFromValueComputed !== 'sql') {
-                        return true;
-                      }
-                      return false;
-                    },
-                  },
-                  {
-                    label: '自动加载数据',
-                    name: 'autoFetchData',
-                    type: 'w-checkbox',
-                    defaultValue: true,
-                    showIf: () => {
-                      if (pageConfig.mainConfigShowAllItems && fieldComeFromValueComputed !== 'sql') {
-                        return true;
-                      }
-                      return false;
-                    },
-                  },
-                  {
-                    label: '紧凑模式',
-                    name: 'dense',
-                    type: 'w-checkbox-group',
-                    defaultValue: ['denseToolbar'],
-                    simple: false,
-                    showIf: () => {
-                      if (pageConfig.mainConfigShowAllItems) {
-                        return true;
-                      }
-                      return false;
-                    },
-                    options: [
-                      { label: '整体紧凑', value: 'dense' },
-                      { label: '按钮栏紧凑', value: 'denseToolbar' },
-                      { label: '标题紧凑', value: 'denseHeader' },
-                      { label: '内容紧凑', value: 'denseBody' },
-                      { label: '分页栏紧凑', value: 'denseBottom' },
-                    ],
-                  },
-                  {
-                    label: '冻结列数',
-                    name: 'stickyNum',
-                    type: 'w-select',
-                    defaultValue: 0,
-                    showIf: () => {
-                      if (pageConfig.mainConfigShowAllItems) {
-                        return true;
-                      }
-                      return false;
-                    },
-                    options: [
-                      { label: '不冻结', value: 0 },
-                      { label: '冻结1列', value: 1 },
-                      { label: '冻结2列', value: 2 },
-                      { label: '冻结3列', value: 3 },
-                      { label: '冻结4列', value: 4 },
-                      { label: '冻结5列', value: 5 },
-                      { label: '冻结6列', value: 6 },
-                      { label: '冻结7列', value: 7 },
-                      { label: '冻结8列', value: 8 },
-                      { label: '冻结8列', value: 9 },
-                      { label: '冻结10列', value: 10 },
-                    ],
-                  },
-                  {
-                    label: '表格模式',
-                    name: 'tree',
-                    type: 'w-select',
-                    defaultValue: false,
-                    showIf: () => {
-                      if (pageConfig.mainConfigShowAllItems) {
-                        return true;
-                      }
-                      return false;
-                    },
-                    options: [
-                      { label: '普通表格', value: false },
-                      { label: '树形表格', value: true },
-                    ],
-                  },
-                  {
-                    label: '树形表格数据关系',
-                    name: 'treeRelationship',
-                    type: 'w-select',
-                    defaultValue: 'parent',
-                    showIf: (args) => {
-                      if (
-                        pageConfig.mainConfigShowAllItems &&
-                        args.form &&
-                        typeof args.form.getFieldValue('tree') === 'boolean' &&
-                        args.form.getFieldValue('tree')
-                      ) {
-                        return true;
-                      }
-                      return false;
-                    },
-                    options: [
-                      { label: 'parent', value: 'parent' },
-                      { label: 'children', value: 'children' },
-                    ],
-                  },
-                  {
-                    label: '树形表格图标函数',
-                    name: 'treeIcon',
-                    type: 'w-textarea',
-                    rows: 2,
-                    defaultValue: '',
-                    showIf: (args) => {
-                      if (
-                        pageConfig.mainConfigShowAllItems &&
-                        args.form &&
-                        typeof args.form.getFieldValue('tree') === 'boolean' &&
-                        args.form.getFieldValue('tree')
-                      ) {
-                        return true;
-                      }
-                      return false;
-                    },
-                  },
-                  {
-                    label: '树形表格默认全部展开',
-                    name: 'treeDefaultExpandAll',
-                    type: 'w-checkbox',
-                    showIf: (args) => {
-                      if (
-                        pageConfig.mainConfigShowAllItems &&
-                        args.form &&
-                        typeof args.form.getFieldValue('tree') === 'boolean' &&
-                        args.form.getFieldValue('tree')
-                      ) {
-                        return true;
-                      }
-                      return false;
-                    },
-                  },
-                  {
-                    label: '树形表格勾选策略',
-                    name: 'treeTickStrategy',
-                    type: 'w-select',
-                    defaultValue: 'leaf',
-                    showIf: (args) => {
-                      if (
-                        pageConfig.mainConfigShowAllItems &&
-                        args.form &&
-                        typeof args.form.getFieldValue('tree') === 'boolean' &&
-                        args.form.getFieldValue('tree')
-                      ) {
-                        return true;
-                      }
-                      return false;
-                    },
-                    options: [
-                      { label: '包含子节点', value: 'leaf' },
-                      { label: '节点自身', value: 'strict' },
-                    ],
-                  },
-                  {
-                    label: 'checkbox勾选映射字段名',
-                    name: 'tickedField',
-                    type: 'w-text',
-                    defaultValue: 'ticked',
-                    showIf: () => {
-                      if (pageConfig.mainConfigShowAllItems) {
-                        return true;
-                      }
-                      return false;
-                    },
-                  },
-                  {
-                    label: '行点击选中映射字段名',
-                    name: 'selectedField',
-                    type: 'w-text',
-                    defaultValue: 'selected',
-                    showIf: () => {
-                      if (pageConfig.mainConfigShowAllItems) {
-                        return true;
-                      }
-                      return false;
-                    },
-                  },
-                ]"
-              >
-              </w-form>
-            </fieldset>
-          </div>
-          <div class="p-1">
-            <fieldset class="fieldsetClass">
-              <legend>
-                <q-icon name="settings" class="mb-1" size="xs"></q-icon>
-                <a
-                  :href="void 0"
-                  class="cursor-pointer"
-                  @click="
-                    () => {
-                      pageConfig.pagiSortConfigShowAllItems = !pageConfig.pagiSortConfigShowAllItems;
-                    }
-                  "
-                >
-                  分页排序
-                  <q-tooltip>
-                    <span v-if="!pageConfig.pagiSortConfigShowAllItems">显示所有配置项</span>
-                    <span v-else>恢复默认显示的配置项</span>
-                  </q-tooltip>
-                </a>
-                <q-icon :name="pageConfig.pagiSortConfigShowAllItems ? 'arrow_drop_up' : 'arrow_drop_down'" class="mb-1" size="xs"></q-icon>
-              </legend>
-              <w-form
-                ref="pagiSortConfigFormRef"
-                :cols-num="1"
-                :fields="[
-                  {
-                    label: '默认排序字段',
-                    name: 'defaultSortBy',
-                    type: 'w-text',
-                    hint: `示例：单字段默认排序：['username']，多字段默认排序：['username', '-date']，其中'-date'的中'-'代表倒序`,
-                  },
-                  {
-                    label: '排序方式',
-                    name: 'descending',
-                    type: 'w-select',
-                    defaultValue: false,
-                    options: [
-                      { label: '正序', value: false },
-                      { label: '倒序', value: true },
-                    ],
-                    showIf: () => {
-                      if (pageConfig.pagiSortConfigShowAllItems) {
-                        return true;
-                      }
-                      return false;
-                    },
-                  },
-                  {
-                    label: '是否分页',
-                    name: 'pageable',
-                    type: 'w-select',
-                    defaultValue: true,
-                    options: [
-                      { label: '是', value: true },
-                      { label: '否', value: false },
-                    ],
-                    showIf: () => {
-                      if (pageConfig.pagiSortConfigShowAllItems) {
-                        return true;
-                      }
-                      return false;
-                    },
-                  },
-                  {
-                    label: '每页显示行数',
-                    name: 'rowsPerPage',
-                    type: 'w-number',
-                    defaultValue: 10,
-                    showIf: (args) => {
-                      if (
-                        pageConfig.pagiSortConfigShowAllItems &&
-                        args.form &&
-                        typeof args.form.getFieldValue('pageable') === 'boolean' &&
-                        args.form.getFieldValue('pageable')
-                      ) {
-                        return true;
-                      }
-                      return false;
-                    },
-                  },
-                  {
-                    label: '后端使用的初始页码',
-                    name: 'reqPageStart',
-                    type: 'w-select',
-                    defaultValue: 1,
-                    options: [
-                      { label: '从1开始', value: 1 },
-                      { label: '从0开始', value: 0 },
-                    ],
-                    showIf: (args) => {
-                      if (
-                        pageConfig.pagiSortConfigShowAllItems &&
-                        args.form &&
-                        typeof args.form.getFieldValue('pageable') === 'boolean' &&
-                        args.form.getFieldValue('pageable')
-                      ) {
-                        return true;
-                      }
-                      return false;
-                    },
-                  },
-                ]"
-              >
-              </w-form>
-            </fieldset>
-          </div>
-          <div class="p-1">
-            <fieldset class="fieldsetClass">
-              <legend>
-                <q-icon name="settings" class="mb-1" size="xs"></q-icon>
-                <a
-                  :href="void 0"
-                  class="cursor-pointer"
-                  @click="
-                    () => {
-                      pageConfig.queryConfigShowAllItems = !pageConfig.queryConfigShowAllItems;
-                    }
-                  "
-                >
-                  查询面板
-                  <q-tooltip>
-                    <span v-if="!pageConfig.queryConfigShowAllItems">显示所有配置项</span>
-                    <span v-else>恢复默认显示的配置项</span>
-                  </q-tooltip>
-                </a>
-                <q-icon :name="pageConfig.queryConfigShowAllItems ? 'arrow_drop_up' : 'arrow_drop_down'" class="mb-1" size="xs"></q-icon>
-              </legend>
-              <w-form
-                ref="queryConfigFormRef"
-                :cols-num="1"
-                :fields="[
-                  {
-                    label: '一行显示条件个数',
-                    name: 'queryFormColsNum',
-                    type: 'w-select',
-                    defaultValue: 0,
-                    options: [
-                      { label: '自适应', value: 0 },
-                      { label: '1个', value: 1 },
-                      { label: '2个', value: 2 },
-                      { label: '3个', value: 3 },
-                      { label: '4个', value: 4 },
-                      { label: '5个', value: 5 },
-                      { label: '6个', value: 6 },
-                    ],
-                  },
-                  {
-                    label: '查询条件默认行数',
-                    name: 'queryFormRowNum',
-                    type: 'w-number',
-                    defaultValue: 1,
-                    showIf: () => {
-                      if (pageConfig.queryConfigShowAllItems) {
-                        return true;
-                      }
-                      return false;
-                    },
-                  },
-                ]"
-              >
-              </w-form>
-            </fieldset>
-          </div>
-          <div v-show="fieldComeFromValueComputed !== 'sql'" class="p-1">
-            <fieldset class="fieldsetClass">
-              <legend>
-                <q-icon name="settings" class="mb-1" size="xs"></q-icon>
-                <a
-                  :href="void 0"
-                  class="cursor-pointer"
-                  @click="
-                    () => {
-                      pageConfig.addConfigShowAllItems = !pageConfig.addConfigShowAllItems;
-                    }
-                  "
-                >
-                  编辑页面
-                  <q-tooltip>
-                    <span v-if="!pageConfig.addConfigShowAllItems">显示所有配置项</span>
-                    <span v-else>恢复默认显示的配置项</span>
-                  </q-tooltip>
-                </a>
-                <q-icon :name="pageConfig.addConfigShowAllItems ? 'arrow_drop_up' : 'arrow_drop_down'" class="mb-1" size="xs"></q-icon>
-              </legend>
-              <w-form
-                ref="addConfigFormRef"
-                :cols-num="1"
-                :fields="[
-                  {
-                    label: '一行显示元素个数',
-                    name: 'editorFormColsNum',
-                    type: 'w-select',
-                    defaultValue: 1,
-                    options: [
-                      { label: '自适应', value: 0 },
-                      { label: '1个', value: 1 },
-                      { label: '2个', value: 2 },
-                      { label: '3个', value: 3 },
-                      { label: '4个', value: 4 },
-                      { label: '5个', value: 5 },
-                      { label: '6个', value: 6 },
-                    ],
-                  },
-                ]"
-              >
-              </w-form>
-            </fieldset>
-          </div>
-        </template>
-        <template #after>
-          <q-splitter v-model="dialog.afterSplitterModel">
-            <template #before>
-              <TemplateFieldGrid
-                ref="templateFieldGridRef"
-                :field-come-from="fieldComeFromValueComputed"
-                @set-field-config-value-fun="setFieldConfigValueFun"
-                @add-table-field-fun="addTableFieldFun"
-              ></TemplateFieldGrid>
-            </template>
-            <template #after>
-              <div class="p-1">
-                <fieldset class="fieldsetClass">
-                  <legend>
-                    <q-icon :name="PlatformIconEnum.扳手" class="mb-1" size="xs"></q-icon>
-                    字段定义
-                  </legend>
-                  <w-form
-                    ref="fieldConfigFormRef"
-                    :cols-num="1"
-                    :fields="[
-                      {
-                        label: '字段名称',
-                        name: 'fieldName',
-                        type: 'w-text',
-                        requiredIf: true,
-                        readonlyIf: () => {
-                          return true;
-                        },
-                      },
-                      {
-                        label: '页面显示名称',
-                        name: 'fieldLabel',
-                        type: 'w-text',
-                        disableIf: () => {
-                          if (
-                            fieldComeFromValueComputed === 'sql' &&
-                            templateFieldGridRef &&
-                            templateFieldGridRef.getSelectedRows().length > 0 &&
-                            (templateFieldGridRef.getSelectedRows()[0].id === 'where_field' || templateFieldGridRef.getSelectedRows()[0].id === 'query_field')
-                          ) {
-                            return true;
-                          }
-                          return false;
-                        },
-                      },
-                      {
-                        label: '字段类型',
-                        name: 'fieldType',
-                        type: 'w-select',
-                        defaultValue: 'String',
-                        disableIf: () => {
-                          if (
-                            fieldComeFromValueComputed === 'sql' &&
-                            templateFieldGridRef &&
-                            templateFieldGridRef.getSelectedRows().length > 0 &&
-                            (templateFieldGridRef.getSelectedRows()[0].id === 'where_field' || templateFieldGridRef.getSelectedRows()[0].id === 'query_field')
-                          ) {
-                            return true;
-                          }
-                          return false;
-                        },
-                        options: [
-                          { label: '字符串', value: DataTypeEnum.字符串 },
-                          { label: '整数', value: DataTypeEnum.整数 },
-                          { label: '小数', value: DataTypeEnum.小数 },
-                          { label: '日期', value: DataTypeEnum.日期 },
-                          { label: '布尔', value: DataTypeEnum.布尔 },
-                        ],
-                      },
-                      {
-                        label: '字段长度',
-                        name: 'fieldLength',
-                        type: 'w-number',
-                        defaultValue: 50,
-                        showIf: (args) => {
-                          if (args.form && args.form.getFieldValue('fieldType') === DataTypeEnum.字符串 && fieldComeFromValueComputed !== 'sql') {
-                            return true;
-                          }
-                          return false;
-                        },
-                      },
-                      {
-                        label: '字段精度',
-                        name: 'fieldPrecision',
-                        type: 'w-number',
-                        showIf: (args) => {
-                          if (args.form && args.form.getFieldValue('fieldType') === DataTypeEnum.小数 && fieldComeFromValueComputed !== 'sql') {
-                            return true;
-                          }
-                          return false;
-                        },
-                      },
-                      {
-                        label: '字段为选项值',
-                        name: 'fieldIsSelect',
-                        type: 'w-checkbox',
-                        disableIf: () => {
-                          if (
-                            fieldComeFromValueComputed === 'sql' &&
-                            templateFieldGridRef &&
-                            templateFieldGridRef.getSelectedRows().length > 0 &&
-                            (templateFieldGridRef.getSelectedRows()[0].id === 'where_field' || templateFieldGridRef.getSelectedRows()[0].id === 'query_field')
-                          ) {
-                            return true;
-                          }
-                          return false;
-                        },
-                      },
-                      {
-                        label: '选项值来源',
-                        name: 'optionComeFrom',
-                        type: 'w-select',
-                        options: [
-                          { label: '数据字典', value: OptionComeFromEnum.数据字典 },
-                          { label: 'Java接口', value: OptionComeFromEnum.Java接口 },
-                          { label: '自定义数组', value: OptionComeFromEnum.自定义数组 },
-                          { label: 'SQL', value: 'sql' },
-                        ],
-                        showIf: (args) => {
-                          if (args.form && typeof args.form.getFieldValue('fieldIsSelect') === 'boolean' && args.form.getFieldValue('fieldIsSelect')) {
-                            return true;
-                          }
-                          return false;
-                        },
-                        'onUpdate:modelValue': (value) => {
-                          if (value === 'sql') {
-                            fieldConfigFormRef.getFields()['otherOptionValue'].hint =
-                              `示例：select '男' as label, '1' as value from dual (注意：SQL返回的结果必须命名为 label 与 value)`;
-                          } else {
-                            fieldConfigFormRef.getFields()['otherOptionValue'].hint = undefined;
-                          }
-                        },
-                      },
-                      {
-                        label: '选项值',
-                        name: 'dictionaryOptionValue',
-                        type: 'w-select',
-                        options: [
-                          { label: 'XX状态', value: 'xx' },
-                          { label: 'AA类型', value: 'aa' },
-                        ],
-                        showIf: (args) => {
-                          if (args.form && args.form.getFieldValue('optionComeFrom') === OptionComeFromEnum.数据字典) {
-                            return true;
-                          }
-                          return false;
-                        },
-                      },
-                      {
-                        label: '选项值',
-                        name: 'otherOptionValue',
-                        type: 'w-text',
-                        hideHint: true,
-                        showIf: (args) => {
-                          if (
-                            args.form &&
-                            (args.form.getFieldValue('optionComeFrom') === OptionComeFromEnum.Java接口 ||
-                              args.form.getFieldValue('optionComeFrom') === OptionComeFromEnum.自定义数组 ||
-                              args.form.getFieldValue('optionComeFrom') === 'sql')
-                          ) {
-                            return true;
-                          }
-                          return false;
-                        },
-                      },
-                      {
-                        label: '新增时系统自动填充类型',
-                        name: 'addValueType',
-                        requiredIf: true,
-                        defaultValue: 'NONE',
-                        type: 'w-select',
-                        showIf: () => {
-                          if (fieldComeFromValueComputed !== 'sql') {
-                            return true;
-                          }
-                          return false;
-                        },
-                        options: [
-                          { label: '无', value: 'NONE' },
-                          { label: 'UUID', value: 'UUID' },
-                          { label: '数据来源-手工录入', value: 'DCF_INPUT' },
-                          { label: '数据来源-系统自动导入', value: 'DCF_IMPORT' },
-                          { label: '当前登录用户', value: 'CURR_USER' },
-                          { label: '当前时间', value: 'CURR_DATE' },
-                          { label: '当前所属法人', value: 'CURR_CORP' },
-                        ],
-                      },
-                      {
-                        label: '修改时覆盖自动填充值',
-                        name: 'editOverride',
-                        type: 'w-checkbox',
-                        showIf: (args) => {
-                          if (
-                            args.form &&
-                            args.form.getFieldValue('addValueType') &&
-                            args.form.getFieldValue('addValueType') !== 'NONE' &&
-                            fieldComeFromValueComputed !== 'sql'
-                          ) {
-                            return true;
-                          }
-                          return false;
-                        },
-                      },
-                    ]"
-                  >
-                  </w-form>
-                </fieldset>
-              </div>
-              <div class="p-1">
-                <fieldset class="fieldsetClass">
-                  <legend>
-                    <q-icon name="build_circle" class="mb-1" size="xs"></q-icon>
-                    查询面板
-                  </legend>
-                  <w-form
-                    ref="fieldQueryConfigFormRef"
-                    :cols-num="1"
-                    :fields="[
-                      {
-                        label: '查询面板中显示',
-                        name: 'queryShow',
-                        type: 'w-checkbox',
-                        disableIf: () => {
-                          if (
-                            fieldComeFromValueComputed === 'sql' &&
-                            templateFieldGridRef &&
-                            templateFieldGridRef.getSelectedRows().length > 0 &&
-                            (templateFieldGridRef.getSelectedRows()[0].parent === 'query_field' ||
-                              templateFieldGridRef.getSelectedRows()[0].id === 'where_field' ||
-                              templateFieldGridRef.getSelectedRows()[0].id === 'query_field')
-                          ) {
-                            return true;
-                          }
-                          return false;
-                        },
-                      },
-                      {
-                        label: '使用的表单类型',
-                        name: 'queryFormType',
-                        type: 'w-select',
-                        defaultValue: FormTypeEnum.文本框,
-                        options: [
-                          { label: '文本框', value: FormTypeEnum.文本框 },
-                          { label: '下拉框', value: FormTypeEnum.下拉框 },
-                          { label: '多选下拉框', value: FormTypeEnum.多选下拉框 },
-                          { label: '数字框', value: FormTypeEnum.数字框 },
-                          { label: '日期', value: FormTypeEnum.日期 },
-                          { label: '日期范围', value: FormTypeEnum.日期范围 },
-                        ],
-                        showIf: (args) => {
-                          if (args.form && typeof args.form.getFieldValue('queryShow') === 'boolean' && args.form.getFieldValue('queryShow')) {
-                            return true;
-                          }
-                          return false;
-                        },
-                      },
-                      {
-                        label: '默认值',
-                        name: 'queryDefaultValue',
-                        type: 'w-text',
-                        showIf: (args) => {
-                          if (args.form && typeof args.form.getFieldValue('queryShow') === 'boolean' && args.form.getFieldValue('queryShow')) {
-                            return true;
-                          }
-                          return false;
-                        },
-                      },
-                      {
-                        label: '必填项',
-                        name: 'queryIsRequired',
-                        type: 'w-checkbox',
-                        showIf: (args) => {
-                          if (args.form && typeof args.form.getFieldValue('queryShow') === 'boolean' && args.form.getFieldValue('queryShow')) {
-                            return true;
-                          }
-                          return false;
-                        },
-                      },
-                      {
-                        label: '匹配模式',
-                        name: 'queryOperator',
-                        type: 'w-select',
-                        defaultValue: OperatorTypeEnum.contains,
-                        disableIf: () => {
-                          if (fieldComeFromValueComputed === 'sql') {
-                            return true;
-                          }
-                          return false;
-                        },
-                        options: [
-                          { label: '模糊匹配', value: OperatorTypeEnum.contains },
-                          { label: '完全匹配', value: OperatorTypeEnum.equals },
-                        ],
-                        showIf: (args) => {
-                          if (args.form && typeof args.form.getFieldValue('queryShow') === 'boolean' && args.form.getFieldValue('queryShow')) {
-                            return true;
-                          }
-                          return false;
-                        },
-                      },
-                    ]"
-                  >
-                  </w-form>
-                </fieldset>
-              </div>
-              <div class="p-1">
-                <fieldset class="fieldsetClass">
-                  <legend>
-                    <q-icon name="build_circle" class="mb-1" size="xs"></q-icon>
-                    列表
-                  </legend>
-                  <w-form
-                    ref="fieldTableConfigFormRef"
-                    :cols-num="1"
-                    :fields="[
-                      {
-                        label: '列表中显示',
-                        name: 'tableShow',
-                        type: 'w-checkbox',
-                        disableIf: () => {
-                          if (
-                            fieldComeFromValueComputed === 'sql' &&
-                            templateFieldGridRef &&
-                            templateFieldGridRef.getSelectedRows().length > 0 &&
-                            (templateFieldGridRef.getSelectedRows()[0].parent === 'where_field' ||
-                              templateFieldGridRef.getSelectedRows()[0].id === 'where_field' ||
-                              templateFieldGridRef.getSelectedRows()[0].id === 'query_field')
-                          ) {
-                            return true;
-                          }
-                          return false;
-                        },
-                      },
-                      {
-                        label: '支持排序',
-                        name: 'tableSort',
-                        defaultValue: true,
-                        type: 'w-checkbox',
-                        showIf: (args) => {
-                          if (args.form && typeof args.form.getFieldValue('tableShow') === 'boolean' && args.form.getFieldValue('tableShow')) {
-                            return true;
-                          }
-                          return false;
-                        },
-                      },
-                      {
-                        label: '列对齐方式',
-                        name: 'tableColumnAlign',
-                        defaultValue: 'left',
-                        type: 'w-select',
-                        options: [
-                          { label: '居左', value: 'left' },
-                          { label: '居中', value: 'center' },
-                          { label: '居右', value: 'right' },
-                        ],
-                        showIf: (args) => {
-                          if (args.form && typeof args.form.getFieldValue('tableShow') === 'boolean' && args.form.getFieldValue('tableShow')) {
-                            return true;
-                          }
-                          return false;
-                        },
-                      },
-                      {
-                        label: '列宽',
-                        name: 'tableColumnWidth',
-                        type: 'w-number',
-                        showIf: (args) => {
-                          if (args.form && typeof args.form.getFieldValue('tableShow') === 'boolean' && args.form.getFieldValue('tableShow')) {
-                            return true;
-                          }
-                          return false;
-                        },
-                      },
-                    ]"
-                  >
-                  </w-form>
-                </fieldset>
-              </div>
-              <div v-show="fieldComeFromValueComputed !== 'sql'" class="p-1">
-                <fieldset class="fieldsetClass">
-                  <legend>
-                    <q-icon name="build_circle" class="mb-1" size="xs"></q-icon>
-                    编辑页面
-                  </legend>
-                  <w-form
-                    ref="fieldAddConfigFormRef"
-                    :cols-num="1"
-                    :fields="[
-                      {
-                        label: '编辑页面中显示',
-                        name: 'editorShow',
-                        type: 'w-checkbox',
-                      },
-                      {
-                        label: '使用的表单类型',
-                        name: 'editorFormType',
-                        type: 'w-select',
-                        defaultValue: 'text',
-                        options: [
-                          { label: '文本框', value: 'text' },
-                          { label: '下拉框', value: 'select' },
-                          { label: '多选下拉框', value: 'selectMultiple' },
-                          { label: '数字框', value: 'number' },
-                          { label: '日期', value: 'date' },
-                        ],
-                        showIf: (args) => {
-                          if (args.form && typeof args.form.getFieldValue('editorShow') === 'boolean' && args.form.getFieldValue('editorShow')) {
-                            return true;
-                          }
-                          return false;
-                        },
-                      },
-                      {
-                        label: '默认值',
-                        name: 'editorDefaultValue',
-                        type: 'w-text',
-                        showIf: (args) => {
-                          if (args.form && typeof args.form.getFieldValue('editorShow') === 'boolean' && args.form.getFieldValue('editorShow')) {
-                            return true;
-                          }
-                          return false;
-                        },
-                      },
-                      {
-                        label: '必填项',
-                        name: 'editorIsRequired',
-                        type: 'w-checkbox',
-                        showIf: (args) => {
-                          if (args.form && typeof args.form.getFieldValue('editorShow') === 'boolean' && args.form.getFieldValue('editorShow')) {
-                            return true;
-                          }
-                          return false;
-                        },
-                      },
-                    ]"
-                  >
-                  </w-form>
-                </fieldset>
-              </div>
-              <div
-                v-show="
-                  fieldComeFromValueComputed === 'sql' &&
-                  templateFieldGridRef &&
-                  templateFieldGridRef.getSelectedRows().length > 0 &&
-                  (templateFieldGridRef.getSelectedRows()[0].id === 'where_field' || templateFieldGridRef.getSelectedRows()[0].id === 'query_field')
-                    ? false
-                    : true
-                "
-                class="flex justify-end p-1"
-              >
-                <q-btn label="确定" icon="beenhere" unelevated outline @click="fieldConfirmFun">
-                  <q-tooltip>
-                    <span>将配置的字段信息更新至列表中</span>
-                  </q-tooltip>
-                </q-btn>
-              </div>
-            </template>
-          </q-splitter>
-        </template>
-      </q-splitter>
-    </w-dialog>
+      :viewer="{
+        panel: {
+          fields: [
+            { name: 'id', label: '模板ID' },
+            { name: 'templateName', label: '模板名称' },
+            { name: 'templateType', label: '模板类型' },
+            { name: 'pageLoadType', label: '模板页面加载类型' },
+            { name: 'lastModifier', label: '最后修改人' },
+            { name: 'lastModifyDate', label: '最后修改时间' },
+          ],
+        },
+      }"
+      :sort-by="['-lastModifyDate']"
+    ></w-grid>
+    <SelectMenuDialog ref="selectMneuDialogRef"></SelectMenuDialog>
+    <Dialog ref="dialogRef" @refresh-grid="refreshGrid"></Dialog>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, reactive, toRaw, computed } from 'vue';
+import { ref } from 'vue';
+import { Environment, axios, NotifyManager } from 'platform-core';
 import { useQuasar } from 'quasar';
-import { axios, Environment, Tools, PlatformIconEnum, FormTypeEnum, DataTypeEnum, OptionComeFromEnum, OperatorTypeEnum, NotifyManager } from 'platform-core';
-
-import TemplateFieldGrid from './grid/FieldGrid.vue';
-import { newFieldRowFun } from './grid/fieldGrid';
 import SelectMenuDialog from './SelectMenuDialog.vue';
+import Dialog from './grid/Dialog.vue';
 
 const $q = useQuasar();
-const platformGridRef = ref();
-const dialogRef = ref();
-const templateFieldGridRef = ref();
-const state = reactive({
-  schemas: <any>[],
-  tables: <any>[],
-  columns: <any>[],
-});
-
-const templateConfigFormRef = ref();
-const mainConfigFormRef = ref();
-const pagiSortConfigFormRef = ref();
-const queryConfigFormRef = ref();
-const addConfigFormRef = ref();
-const databaseTableValue = ref('');
-const fieldConfigFormRef = ref();
-const fieldQueryConfigFormRef = ref();
-const fieldTableConfigFormRef = ref();
-const fieldAddConfigFormRef = ref();
 const selectMneuDialogRef = ref();
-
-const fieldComeFromValueComputed = computed(() => {
-  if (mainConfigFormRef.value && !Tools.isEmpty(mainConfigFormRef.value.getFieldValue('fieldComeFrom'))) {
-    return mainConfigFormRef.value.getFieldValue('fieldComeFrom');
-  }
-  return undefined;
-});
-
-const databaseTableChangeFun = async (value) => {
-  await requestColumns(mainConfigFormRef.value.getFieldValue('schema'), value);
-  if (templateFieldGridRef?.value) {
-    templateFieldGridRef.value.setLocalData(state.columns);
-  }
-};
-const schemaChangeFun = (value) => {
-  requestTables(value);
-  mainConfigFormRef.value.setFieldValue('databaseTable', null);
-};
-const fieldComeFromChange = (value) => {
-  mainConfigFormRef.value.getFields()['buttons'].options = [
-    { label: '查询', value: 'query' },
-    { label: '更多查询', value: 'moreQuery' },
-    { label: '重置', value: 'reset' },
-    { label: '刷新', value: 'refresh' },
-    { label: '新增', value: 'add', disable: value === 'sql' || false },
-    { label: '编辑', value: 'edit', disable: value === 'sql' || false },
-    { label: '复制', value: 'clone', disable: value === 'sql' || false },
-    { label: '删除', value: 'remove', disable: value === 'sql' || false },
-    { label: '查看', value: 'view' },
-    { label: '导出', value: 'export' },
-    { label: '新增顶级节点', value: 'addTop', disable: value === 'sql' || false },
-    { label: '新增子节点', value: 'addChild', disable: value === 'sql' || false },
-    { label: '展开/收起所有', value: 'expand' },
-    { label: '表格设置', value: 'config' },
-  ];
-  if (value === 'sql') {
-    mainConfigFormRef.value.setFieldValue('buttons', ['query', 'reset', 'view', 'export', 'config']);
-  } else {
-    mainConfigFormRef.value.setFieldValue('buttons', ['query', 'reset', 'add', 'edit', 'remove', 'export', 'config']);
-  }
-};
-
-const pageConfig = reactive({
-  templateConfigShowAllItems: false,
-  mainConfigShowAllItems: false,
-  pagiSortConfigShowAllItems: false,
-  queryConfigShowAllItems: false,
-  addConfigShowAllItems: false,
-});
-
-/**
- * 根据选择的行，设置右侧字段定义的值
- * @param row
- */
-const setFieldConfigValueFun = (row) => {
-  fieldConfigFormRef.value.setData(row);
-  fieldQueryConfigFormRef.value.setData(row);
-  fieldTableConfigFormRef.value.setData(row);
-  fieldAddConfigFormRef.value.setData(row);
-};
-
-const addTableFieldFun = (tableRows) => {
-  const table = mainConfigFormRef.value.getFieldValue('databaseTable');
-  if (!table) {
-    NotifyManager.info('请先选择数据库表');
-  } else if (tableRows && tableRows.length > 0 && table.value !== tableRows[0].tableName) {
-    NotifyManager.warn('当前选择的数据库表与字段列表中所属的表不相同，不允许该操作');
-  } else {
-    const needAddColumns = [...toRaw(state.columns)].filter((item: any) => [...tableRows].every((v) => item.name !== v.fieldName));
-    if (!needAddColumns || needAddColumns.length === 0) {
-      NotifyManager.info('选择的表字段均在字段列表中');
-    } else {
-      needAddColumns.forEach((item: any) => {
-        templateFieldGridRef.value.addLocalData(
-          {
-            ...newFieldRowFun(),
-            ...{ fieldName: item.name, fieldLabel: item.comment, tableName: item.tableName, columnType: item.columnType },
-          },
-          state.columns.findIndex((v: any) => v.name === item.name),
-        );
-      });
-      NotifyManager.info(`共增加 ${needAddColumns.length} 个字段！`);
-    }
-  }
-};
-
-const fieldConfirmFun = async () => {
-  const fieldName = fieldConfigFormRef.value.getFieldValue('fieldName');
-  if (fieldName === null || fieldName === undefined || fieldName === '') {
-    NotifyManager.warn('请从字段列表中选择要配置的字段，配置后执行该操作');
-  } else {
-    const validateResult = await validate();
-    if (validateResult) {
-      const fieldConfigFormData = fieldConfigFormRef.value.getData();
-      const fieldQueryConfigFormData = fieldQueryConfigFormRef.value.getData();
-      const fieldTableConfigFormData = fieldTableConfigFormRef.value.getData();
-      const fieldAddConfigFormData = fieldAddConfigFormRef.value.getData();
-      templateFieldGridRef.value.updateLocalData({
-        ...newFieldRowFun(),
-        ...fieldConfigFormData,
-        ...fieldQueryConfigFormData,
-        ...fieldTableConfigFormData,
-        ...fieldAddConfigFormData,
-      });
-      NotifyManager.info('表格已更新');
-    }
-  }
-};
-const validate = async () => {
-  const fieldConfigFormValidateResult = await fieldConfigFormRef.value.validate();
-  const fieldQueryConfigFormValidateResult = await fieldQueryConfigFormRef.value.validate();
-  const fieldTableConfigFormValidateResult = await fieldTableConfigFormRef.value.validate();
-  const fieldAddConfigFormValidateResult = await fieldAddConfigFormRef.value.validate();
-  if (fieldConfigFormValidateResult && fieldQueryConfigFormValidateResult && fieldTableConfigFormValidateResult && fieldAddConfigFormValidateResult) {
-    return true;
-  } else {
-    return false;
-  }
-};
-
-const platformGrid = {
-  queryFormFields: [
-    { label: '模板名称', name: 'templateName', type: 'w-text' },
-    { label: '模板类型', name: 'templateType', type: 'w-select', options: [{ label: '表格页面', value: 'GRID' }] },
-    {
-      label: '模板页面加载类型',
-      name: 'pageLoadType',
-      type: 'w-select',
-      options: [
-        { label: '通过json字符串加载', value: 'JSON' },
-        { label: '通过配置加载', value: 'CONFIG' },
-      ],
-    },
-  ],
-  toolbarActions: [
-    'query',
-    'reset',
-    'separator',
-    {
-      extend: 'add',
-      click: () => {
-        onAdd();
-      },
-      afterClick: () => {
-        requestSchemas();
-      },
-    },
-    {
-      extend: 'edit',
-      click: (args) => {
-        onEdit(args.selecteds);
-      },
-    },
-    {
-      extend: 'remove',
-      icon: PlatformIconEnum.删除,
-      label: '删除',
-      click: (args) => {
-        onDelete(args.selecteds);
-      },
-    },
-    'separator',
-    'view',
-    {
-      name: 'generateMenu',
-      label: '注册菜单',
-      icon: 'widgets',
-      enableIf: (args) => {
-        if (args.selected) {
-          return true;
-        }
-        return false;
-      },
-      click: (args) => {
-        selectMneuDialogRef.value.show(args.selected);
-      },
-    },
-    'separator',
-  ],
-  columns: [
-    { name: 'templateName', label: '模板名称' },
-    { name: 'templateType', label: '模板类型', format: (val) => (val === 'GRID' ? '表格页面' : val) },
-    { name: 'pageLoadType', label: '模板页面加载类型', format: (val) => (val === 'JSON' ? '通过json字符串加载' : '通过配置加载') },
-    { name: 'lastModifier', label: '最后修改人' },
-    { name: 'lastModifyDate', label: '最后修改时间' },
-  ],
-  viewer: {
-    panel: {
-      fields: [
-        { name: 'id', label: '模板ID' },
-        { name: 'templateName', label: '模板名称' },
-        { name: 'templateType', label: '模板类型' },
-        { name: 'pageLoadType', label: '模板页面加载类型' },
-        { name: 'lastModifier', label: '最后修改人' },
-        { name: 'lastModifyDate', label: '最后修改时间' },
-      ],
-    },
-  },
-};
-
-const dialog = reactive({
-  dataId: null,
-  dialogTitle: '新增',
-  splitterModel: 20,
-  afterSplitterModel: 75,
-});
-
-// 保存数据表模板前校验
-const saveDatabaseTableTemplateValidate = async () => {
-  const templateConfigValidateResult = await templateConfigFormRef.value.validate();
-  if (!templateConfigValidateResult) {
-    return;
-  }
-  const mainConfigValidateResult = await mainConfigFormRef.value.validate();
-  if (!mainConfigValidateResult) {
-    return;
-  }
-  const rows = templateFieldGridRef.value.getRows();
-  if (!rows || rows.length === 0) {
-    NotifyManager.warn('字段列表为空，请先选中数据库表，然后配置字段后执行该操作');
-    return;
-  }
-  // const errorRows = <any>[];
-  // rows.forEach((item) => {
-  //   if (!item.fieldName || !item.fieldType) {
-  //     errorRows.push({
-  //       label: item.fieldName,
-  //       value: item.fieldName,
-  // checkedIcon: PlatformIconEnum.否状态,
-  //       uncheckedIcon: PlatformIconEnum.否状态,
-  //       color: 'red',
-  //       keepColor: true,
-  //       disable: true,
-  //       dense: true,
-  //     });
-  //   }
-  // });
-  // if (errorRows.length > 0) {
-  //   $q.dialog({
-  //     title: '提示',
-  //     message: '以下字段必填项未配置，请配置后执行该操作！',
-  //     persistent: true,
-  //     options: {
-  //       type: 'w-checkbox',
-  //       model: [],
-  //       items: errorRows,
-  //     },
-  //   });
-  //   return;
-  // }
-  saveDatabaseTableTemplate();
-};
-
-// 保存数据表模板
-const saveDatabaseTableTemplate = () => {
-  const templateConfigData = templateConfigFormRef.value.getData();
-  const mainConfigData = mainConfigFormRef.value.getData();
-  const pagiSortConfigData = pagiSortConfigFormRef.value.getData();
-  const queryConfigData = queryConfigFormRef.value.getData();
-  const addConfigData = addConfigFormRef.value.getData();
-  const fieldConfigData = templateFieldGridRef.value.getRows();
-  let fieldsArr = <any>[];
-  if (fieldComeFromValueComputed.value === 'sql') {
-    let index = 1;
-    fieldConfigData.forEach((item) => {
-      item.sortNo = index;
-      fieldsArr.push(item);
-      index++;
-      if (item.children && item.children.length > 0) {
-        item.children.forEach((child) => {
-          child.sortNo = index;
-          fieldsArr.push(child);
-          index++;
-        });
-      }
-    });
-  } else {
-    fieldConfigData.forEach((item, index) => {
-      item.sortNo = index + 1;
-    });
-    fieldsArr = fieldConfigData;
-  }
-  const requestData = {
-    templateConfig: { ...templateConfigData, ...{ id: dialog.dataId } },
-    templateGrid: { ...mainConfigData, ...pagiSortConfigData, ...queryConfigData, ...addConfigData },
-    templateGridFields: fieldsArr,
-  };
-  axios({
-    method: 'POST',
-    url: Environment.apiContextPath('api/template/config') + (dialog.dataId ? '/edit' : '/add'),
-    data: requestData,
-  })
-    .then((resp) => {
-      // 关闭窗口，刷新表格
-      dialogRef.value.hide();
-      platformGridRef.value.refresh();
-      NotifyManager.info('保存成功');
-    })
-    .catch((error) => {
-      console.info('error====', error);
-      NotifyManager.error('保存失败');
-    });
-};
-
-const onAdd = () => {
-  dialog.dialogTitle = '新增';
-  dialog.dataId = null;
-  dialogRef.value.show();
-};
-
-const onEdit = async (tableSelected) => {
-  dialog.dialogTitle = '编辑';
-  dialogRef.value.show();
-  const resp = await axios.get(Environment.apiContextPath('api/template/config/fetch/') + tableSelected[0].id);
-  if (resp && resp.data) {
-    dialog.dataId = resp.data.templateConfig.id;
-    // 反显值处理
-    templateConfigFormRef.value.setData(resp.data.templateConfig);
-    fieldComeFromChange(resp.data.templateGrid.fieldComeFrom);
-    mainConfigFormRef.value.setData(resp.data.templateGrid);
-
-    if (resp.data.templateGrid.fieldComeFrom === 'table') {
-      // 处理数据表及字段
-      requestTables(resp.data.templateGrid.schema);
-      await requestColumns(resp.data.templateGrid.schema, resp.data.templateGrid.databaseTable);
-    }
-
-    // 反显值处理
-    pagiSortConfigFormRef.value.setData(resp.data.templateGrid);
-    queryConfigFormRef.value.setData(resp.data.templateGrid);
-    addConfigFormRef.value.setData(resp.data.templateGrid);
-    if (resp.data.templateGrid.fieldComeFrom === 'sql') {
-      resp.data.templateGridFields.forEach((item) => {
-        if (item.fieldName === '查询字段') {
-          item.id = 'query_field';
-        } else if (item.fieldName === '条件字段') {
-          item.id = 'where_field';
-        }
-      });
-    }
-    templateFieldGridRef.value.setLocalData(
-      resp.data.templateGridFields,
-      resp.data.templateGrid.fieldComeFrom === 'sql' ? 'sql' : resp.data.templateGrid.databaseTable,
-    );
-  }
+const dialogRef = ref();
+const formConfigGridRef = ref();
+const refreshGrid = () => {
+  formConfigGridRef.value.refresh();
 };
-
-const onDelete = (tableSelected) => {
+const formConfigDelete = (tableSelected: any) => {
   $q.dialog({
     title: '询问',
     message: '您确认要删除所选记录吗？',
@@ -1632,7 +116,7 @@ const onDelete = (tableSelected) => {
       data: templateConfigIds,
     })
       .then((resp) => {
-        platformGridRef.value.refresh();
+        refreshGrid();
         NotifyManager.info('操作成功');
       })
       .catch((error) => {
@@ -1641,105 +125,7 @@ const onDelete = (tableSelected) => {
       });
   });
 };
-
-const requestSchemas = () => {
-  axios({
-    method: 'GET',
-    url: Environment.apiContextPath('api/template/config/schemas'),
-  }).then((resp) => {
-    state.schemas.splice(0, state.schemas.length);
-    resp.data.forEach((item) => {
-      state.schemas.push({ label: item.name, value: item.name });
-    });
-  });
-};
-
-const requestTables = (schema) => {
-  axios({
-    method: 'POST',
-    url: Environment.apiContextPath('api/template/config/tables/') + schema,
-    data: ['ALL', 'TEMPLATE'],
-  }).then((resp) => {
-    state.tables.splice(0, state.tables.length);
-    resp.data.forEach((table) => {
-      state.tables.push({
-        label: table.name + (table.remarks ? '(' + table.remarks + ')' : ''),
-        value: table.name,
-      });
-    });
-  });
-};
-
-const loadFields = async (sql) => {
-  const requestParams = {
-    method: 'POST',
-    headers: { 'content-type': 'text/plain;charset=utf-8;' },
-    data: sql,
-    url: Environment.apiContextPath('api/jdbc/fetchMetaDataBySql'),
-  };
-  const resp = await axios(requestParams);
-  if (Tools.isEmpty(resp.data)) {
-    NotifyManager.error('SQL执行报错');
-    return;
-  }
-  const columns = <any>[];
-  const oldColumns = templateFieldGridRef.value.getRows();
-  // if (oldColumns.length > 0) {
-  //   resp.data.forEach((item) => {
-  //     const column = oldColumns.find((oldColumn) => {
-  //       return oldColumn.fieldName === item.columnName;
-  //     });
-  //     if (!Tools.isEmpty(column)) {
-  //       columns.push({
-  //         id: item.id,
-  //         parent: item.parent,
-  //         name: item.columnName,
-  //         fieldName: item.columnName,
-  //         queryShow: item.queryShow || false,
-  //         tableShow: item.tableShow || false,
-  //         ...column,
-  //       });
-  //     } else {
-  //       columns.push({
-  //         id: item.id,
-  //         parent: item.parent,
-  //         name: item.columnName,
-  //         fieldName: item.columnName,
-  //         queryShow: item.queryShow || false,
-  //         tableShow: item.tableShow || false,
-  //       });
-  //     }
-  //   });
-  //   templateFieldGridRef.value.setLocalData(columns, 'sql');
-  // } else {
-  resp.data.forEach((item) => {
-    columns.push({
-      id: item.id,
-      parent: item.parent,
-      name: item.columnName,
-      fieldName: item.columnName,
-      queryShow: item.parent === 'where_field' || false,
-      queryOperator: 'equals',
-      tableShow: false,
-    });
-  });
-  templateFieldGridRef.value.setLocalData(columns);
-  // }
-};
-
-const requestColumns = async (schema, table) => {
-  await axios.get(Environment.apiContextPath('api/template/config/columns') + '/' + schema + '/' + table).then((resp) => {
-    state.columns = resp.data;
-  });
+const formConfigEdit = (tableSelected: any) => {
+  dialogRef.value.show(tableSelected);
 };
 </script>
-
-<style scoped lang="css">
-fieldset.fieldsetClass {
-  padding: 5px;
-  border: rgba(0, 0, 0, 0.12) solid 1px;
-}
-legend {
-  padding: 2px 10px;
-}
-</style>
diff --git a/io.sc.platform.lcdp.frontend/src/views/form/Page.vue b/io.sc.platform.lcdp.frontend/src/views/form/Page.vue
index 6e8b4e79..7e4eaea8 100644
--- a/io.sc.platform.lcdp.frontend/src/views/form/Page.vue
+++ b/io.sc.platform.lcdp.frontend/src/views/form/Page.vue
@@ -10,10 +10,10 @@
 </template>
 <script setup lang="ts">
 import { reactive, ref, onMounted, nextTick, watch } from 'vue';
-import { useRoute, onBeforeRouteUpdate } from 'vue-router';
-import { axios, Environment, OptionComeFromEnum, FormTypeEnum, Tools } from 'platform-core';
+import { useRoute } from 'vue-router';
+import { axios, Environment } from 'platform-core';
 
-import { getPageConfig, PageTemplateType } from './page.ts';
+import { getPageConfig, PageTemplateType, Page } from './page.ts';
 import GridPage from './grid/GridPage.vue';
 
 const gridPageRef = ref();
@@ -38,13 +38,6 @@ watch(
   },
 );
 
-// onBeforeRouteUpdate((to, from, next) => {
-//   // if (!Tools.isEmpty(to.query?.id) && !Tools.isEmpty(from.query?.id) && to.query.id !== from.query.id) {
-//   //   reload();
-//   // }
-//   next();
-// });
-
 const reload = () => {
   state.isReload = false;
   nextTick(() => {
@@ -61,27 +54,7 @@ const getJsonStr = async () => {
     state.pageType = result.type;
   }
 };
-const getSelectOptions = async (configItem) => {
-  let options = [];
-  if (configItem.fieldIsSelect && configItem.optionComeFrom === OptionComeFromEnum.数据字典) {
-    // 数据字典选项值
-  } else if (configItem.fieldIsSelect && configItem.optionComeFrom === OptionComeFromEnum.Java接口) {
-    // java返回的选项值
-  } else if (configItem.fieldIsSelect && configItem.optionComeFrom === OptionComeFromEnum.自定义数组) {
-    // 自定义数组
-    options = eval('(' + configItem.otherOptionValue + ')');
-  } else if (configItem.fieldIsSelect && configItem.optionComeFrom === 'sql') {
-    const requestParams = {
-      method: 'POST',
-      headers: { 'content-type': 'text/plain;charset=utf-8;' },
-      data: configItem.otherOptionValue,
-      url: Environment.apiContextPath('api/jdbc/fetchDataBySql'),
-    };
-    const resp = await axios(requestParams);
-    options = resp.data;
-  }
-  return options;
-};
+
 const getConfig = async () => {
   const resp = await axios.get(Environment.apiContextPath('api/template/config/fetch/') + (props.configId ? props.configId : route.query.id));
   if (resp && resp.data && resp.data.templateConfig?.templatePageLoadType === 'JSON') {
@@ -91,257 +64,10 @@ const getConfig = async () => {
     const templateGrid = resp.data.templateGrid;
     const templateGridFields = resp.data.templateGridFields;
 
-    // 处理分页排序
-    const tablePagination = {
-      // sortBy: '',
-      // descending: true,
-      reqPageStart: 0,
-      rowsPerPage: 10,
-    };
-    let defaultSortBy = undefined;
-    if (templateGrid.defaultSortBy) {
-      try {
-        defaultSortBy = eval('(' + templateGrid.defaultSortBy + ')');
-      } catch (error) {
-        console.error('sortBy eval error!');
-      }
-      // tablePagination.sortBy = templateGrid.defaultSortBy;
-      // tablePagination.descending = templateGrid.descending;
-    }
-    if (templateGrid.reqPageStart) {
-      tablePagination.reqPageStart = templateGrid.reqPageStart;
-    }
-    if (templateGrid.rowsPerPage) {
-      tablePagination.rowsPerPage = templateGrid.rowsPerPage;
-    }
-
-    // 处理按钮
-    const tableButtons = <any>[];
-    let configButton = false;
-    if (templateGrid.buttons && templateGrid.buttons.length > 0) {
-      templateGrid.buttons.forEach((item) => {
-        if (item !== 'config') {
-          tableButtons.push(item);
-        } else {
-          configButton = true;
-        }
-      });
-    }
-
-    // 处理紧凑模式
-    const dense = {
-      dense: false,
-      denseToolbar: false,
-      denseHeader: false,
-      denseBody: false,
-      denseBottom: false,
-    };
-    if (templateGrid.dense && templateGrid.dense.length > 0) {
-      if (
-        templateGrid.dense.findIndex((item) => {
-          return item === 'dense';
-        }) > -1
-      ) {
-        dense.dense = true;
-      }
-      if (
-        templateGrid.dense.findIndex((item) => {
-          return item === 'denseToolbar';
-        }) > -1
-      ) {
-        dense.denseToolbar = true;
-      }
-      if (
-        templateGrid.dense.findIndex((item) => {
-          return item === 'denseHeader';
-        }) > -1
-      ) {
-        dense.denseHeader = true;
-      }
-      if (
-        templateGrid.dense.findIndex((item) => {
-          return item === 'denseBody';
-        }) > -1
-      ) {
-        dense.denseBody = true;
-      }
-      if (
-        templateGrid.dense.findIndex((item) => {
-          return item === 'denseBottom';
-        }) > -1
-      ) {
-        dense.denseBottom = true;
-      }
-    }
-
-    // 处理字段
-    const addFormFields = <any>[];
-    const queryFormFields = <any>[];
-    const tableColumns = <any>[];
-    let addFormField = {};
-    let queryFormField = {};
-    let tableColumn = {};
-
-    for (let i = 0; i < templateGridFields.length; i++) {
-      let item = templateGridFields[i];
-      addFormField = {};
-      queryFormField = {};
-      tableColumn = {};
-      const options = await getSelectOptions(item);
-      if (item.editorShow) {
-        addFormField = { ...addFormField, ...{ label: item.fieldLabel, name: item.fieldName } };
-        if (item.editorFormType) {
-          if (item.editorFormType === FormTypeEnum.下拉框) {
-            addFormField = { ...addFormField, ...{ type: 'w-select' } };
-            addFormField = { ...addFormField, ...{ options: options } };
-          } else if (item.editorFormType === FormTypeEnum.多选下拉框) {
-            addFormField = { ...addFormField, ...{ type: 'w-select' } };
-            addFormField = { ...addFormField, ...{ options: options } };
-          } else if (item.editorFormType === FormTypeEnum.数字框) {
-            if (item.fieldPrecision) {
-              addFormField = { ...addFormField, ...{ type: 'w-number', precision: item.fieldPrecision } };
-            } else {
-              addFormField = { ...addFormField, ...{ type: 'w-number' } };
-            }
-          } else if (item.editorFormType === FormTypeEnum.日期) {
-            addFormField = { ...addFormField, ...{ type: 'w-date' } };
-          } else if (item.editorFormType === FormTypeEnum.日期范围) {
-            addFormField = { ...addFormField, ...{ type: 'dateRange' } };
-          } else {
-            addFormField = { ...addFormField, ...{ type: 'w-text' } };
-          }
-        } else {
-          addFormField = { ...addFormField, ...{ type: 'w-text' } };
-        }
-
-        if (item.editorDefaultValue) {
-          addFormField = { ...addFormField, ...{ defaultValue: item.editorDefaultValue } };
-        }
-        if (item.editorIsRequired) {
-          addFormField = { ...addFormField, ...{ requiredIf: item.editorIsRequired } };
-        }
-        addFormFields.push(addFormField);
-      }
-      if (item.queryShow) {
-        queryFormField = { ...queryFormField, ...{ label: item.fieldLabel, name: item.fieldName } };
-        if (item.queryFormType) {
-          if (item.queryFormType === FormTypeEnum.下拉框) {
-            queryFormField = { ...queryFormField, ...{ type: 'w-select' } };
-            queryFormField = { ...queryFormField, ...{ options: options } };
-          } else if (item.queryFormType === FormTypeEnum.多选下拉框) {
-            queryFormField = { ...queryFormField, ...{ type: 'w-select' } };
-            queryFormField = { ...queryFormField, ...{ options: options } };
-          } else if (item.queryFormType === FormTypeEnum.数字框) {
-            if (item.fieldPrecision) {
-              queryFormField = { ...queryFormField, ...{ type: 'w-number', precision: item.fieldPrecision } };
-            } else {
-              queryFormField = { ...queryFormField, ...{ type: 'w-number' } };
-            }
-          } else if (item.queryFormType === FormTypeEnum.日期) {
-            queryFormField = { ...queryFormField, ...{ type: 'w-date' } };
-          } else if (item.queryFormType === FormTypeEnum.日期范围) {
-            queryFormField = { ...queryFormField, ...{ type: 'dateRange' } };
-          } else {
-            queryFormField = { ...queryFormField, ...{ type: 'w-text' } };
-          }
-        } else {
-          queryFormField = { ...queryFormField, ...{ type: 'w-text' } };
-        }
-        if (item.queryDefaultValue) {
-          queryFormField = { ...queryFormField, ...{ defaultValue: item.queryDefaultValue } };
-        }
-        if (item.queryIsRequired) {
-          queryFormField = { ...queryFormField, ...{ requiredIf: item.queryIsRequired } };
-        }
-        if (item.queryOperator) {
-          queryFormField = { ...queryFormField, ...{ queryOperator: item.queryOperator } };
-        }
-        queryFormFields.push(queryFormField);
-      }
-      if (item.tableShow) {
-        tableColumn = { ...tableColumn, ...{ label: item.fieldLabel, name: item.fieldName } };
-        if (item.tableSort) {
-          tableColumn = { ...tableColumn, ...{ sortable: item.tableSort } };
-        }
-        if (item.tableColumnAlign) {
-          tableColumn = { ...tableColumn, ...{ align: item.tableColumnAlign } };
-        }
-        if (item.tableColumnWidth) {
-          tableColumn = { ...tableColumn, ...{ width: item.tableColumnWidth } };
-        }
-        if (item.fieldIsSelect) {
-          tableColumn = {
-            ...tableColumn,
-            ...{
-              format: (val, row) => {
-                if (Array.isArray(options) && options.length > 0) {
-                  let formatResult = val;
-                  options.forEach((option: any) => {
-                    if (option.value === val) {
-                      formatResult = option.label;
-                    }
-                  });
-                  return formatResult;
-                } else {
-                  return val;
-                }
-              },
-            },
-          };
-        }
-        tableColumns.push(tableColumn);
-      }
-    }
-
-    // 根据配置组装数据对象
     state.pageType = templateConfig.templateType;
-    state.pageConfig = {
-      // templateGridId: templateGrid.id,
-      title: templateGrid.title,
-      toolbarActions: tableButtons,
-      configButton: configButton,
-      selection: templateGrid.selection,
-      primaryKey: templateGrid.primaryKey,
-      foreignKey: templateGrid.foreignKey,
-      dataUrl: Environment.apiContextPath(templateGrid.dataUrl),
-      fetchDataUrl: Environment.apiContextPath(templateGrid.fetchDataUrl + '?templateGridId=' + templateGrid.id),
-      addDataUrl: Environment.apiContextPath(templateGrid.addDataUrl) + '/' + templateGrid.id,
-      editDataUrl: Environment.apiContextPath(templateGrid.editDataUrl) + '/' + templateGrid.id + '/' + templateGrid.primaryKey,
-      removeDataUrl: Environment.apiContextPath(templateGrid.removeDataUrl) + '/' + templateGrid.id + '/' + templateGrid.primaryKey,
-      sortNo: templateGrid.sortNo,
-      checkboxSelection: templateGrid.checkboxSelection,
-      draggable: templateGrid.draggable,
-      autoFetchData: templateGrid.autoFetchData,
-      dense: dense.dense,
-      denseToolbar: dense.denseToolbar,
-      denseHeader: dense.denseHeader,
-      denseBody: dense.denseBody,
-      denseBottom: dense.denseBottom,
-      stickyNum: templateGrid.stickyNum,
-      tree: templateGrid.tree,
-      treeRelationship: templateGrid.treeRelationship,
-      // treeIcon:
-      treeDefaultExpandAll: templateGrid.treeDefaultExpandAll,
-      treeTickStrategy: templateGrid.treeTickStrategy,
-      tickedField: templateGrid.tickedField,
-      selectedField: templateGrid.selectedField,
-      pageable: templateGrid.pageable,
-      pagination: tablePagination,
-      queryFormColsNum: templateGrid.queryFormColsNum,
-      queryFormRowNum: templateGrid.queryFormRowNum,
-      editor: {
-        dialog: {
-          width: '60%',
-        },
-        form: {
-          colsNum: templateGrid.editorFormColsNum,
-          fields: addFormFields,
-        },
-      },
-      queryFormFields: queryFormFields,
-      columns: tableColumns,
-      sortBy: defaultSortBy,
-    };
+    // 根据配置组装数据对象
+    const page = new Page(templateConfig, templateGrid, templateGridFields);
+    state.pageConfig = page.buildGridConfig();
   }
 };
 
diff --git a/io.sc.platform.lcdp.frontend/src/views/form/grid/FieldGrid.vue b/io.sc.platform.lcdp.frontend/src/views/form/grid/FieldGrid.vue
index 0ee7536e..73404e43 100644
--- a/io.sc.platform.lcdp.frontend/src/views/form/grid/FieldGrid.vue
+++ b/io.sc.platform.lcdp.frontend/src/views/form/grid/FieldGrid.vue
@@ -1,45 +1,246 @@
 <template>
   <div style="height: 100%">
     <w-grid
-      ref="platformGridRef"
-      sort-no
-      hide-bottom
-      :config-button="false"
-      dense-body
-      tree
-      :checkbox-selection="false"
-      selection="multiple"
+      ref="gridRef"
       title="字段列表(拖拽可对字段进行排序)"
-      :auto-fetch-data="false"
-      draggable="local"
-      :pageable="false"
+      dnd-mode="local"
+      db-click-operation="inlineRowEdit"
+      :local-mode="true"
+      :dense="true"
+      primary-key="fieldName"
+      :checkbox-selection="false"
       :columns="columnsComputed"
-      :toolbar-actions="platformGrid.toolbarActions"
-      @row-click="platformGrid.rowClickFun"
+      :toolbar-actions="[
+        [
+          {
+            extend: 'inlineRowEdit',
+            label: '快速编辑',
+          },
+          {
+            extend: 'inlineRowsEdit',
+            label: '全部行',
+          },
+        ],
+        {
+          extend: 'edit',
+          label: '编辑',
+          click: (args: any) => {
+            fieldEditDialogRef.show(args.selected);
+          },
+        },
+        'separator',
+        [
+          {
+            label: '批量操作',
+            name: 'batchOp',
+            icon: 'build_circle',
+          },
+          {
+            label: '查询全选',
+            name: 'batchOp_query',
+            icon: 'search',
+            click: () => {
+              setTicked(queryShow.name, true);
+            },
+          },
+          {
+            label: '查询全消',
+            name: 'batchOp_query_cancel',
+            icon: 'search',
+            click: () => {
+              setTicked(queryShow.name, false);
+            },
+          },
+          {
+            label: '列表全选',
+            name: 'batchOp_table',
+            icon: 'calendar_view_month',
+            click: () => {
+              setTicked(tableShow.name, true);
+            },
+          },
+          {
+            label: '列表全消',
+            name: 'batchOp_table_cancel',
+            icon: 'calendar_view_month',
+            click: () => {
+              setTicked(tableShow.name, false);
+            },
+          },
+          {
+            label: '编辑全选',
+            name: 'batchOp_editor',
+            icon: 'edit',
+            click: () => {
+              setTicked(editorShow.name, true);
+            },
+          },
+          {
+            label: '编辑全消',
+            name: 'batchOp_editor_cancel',
+            icon: 'edit',
+            click: () => {
+              setTicked(editorShow.name, false);
+            },
+          },
+          {
+            label: '必填项全选',
+            name: 'batchOp_editor_required',
+            icon: 'edit_notifications',
+            click: () => {
+              setTicked(editorIsRequired.name, true);
+            },
+          },
+          {
+            label: '必填项全消',
+            name: 'batchOp_editor_required_cancel',
+            icon: 'edit_notifications',
+            click: () => {
+              setTicked(editorIsRequired.name, false);
+            },
+          },
+        ],
+      ]"
+      :editor="{
+        dialog: {
+          width: '80%',
+          height: '80%',
+        },
+        form: {
+          fields: [
+            { label: '字段名称', name: 'fieldName', type: 'w-text', readOnlyIf: true },
+            { label: '页面显示名称', name: 'fieldLabel', type: 'w-text' },
+            {
+              label: '码值类型',
+              name: 'optionComeFrom',
+              type: 'w-select',
+              options: DictionaryType.options,
+            },
+            {
+              label: '数据字典',
+              name: 'dictionaryOptionValue',
+              type: 'w-dictionary-select',
+              showIf: (args) => {
+                if (args.form && args.form.getFieldValue('optionComeFrom') === DictionaryType.type.dictionary.value) {
+                  return true;
+                } else if (gridRef) {
+                  const row = gridRef.getSelectedRow();
+                  if (row && row['optionComeFrom'] === DictionaryType.type.dictionary.value) {
+                    return true;
+                  }
+                }
+                return false;
+              },
+            },
+            {
+              label: '码值',
+              name: 'otherOptionValue',
+              type: 'w-text',
+              showIf: (args) => {
+                if (
+                  args.form &&
+                  (args.form.getFieldValue('optionComeFrom') === DictionaryType.type.array.value ||
+                    args.form.getFieldValue('optionComeFrom') === DictionaryType.type.sql.value)
+                ) {
+                  return true;
+                } else if (gridRef) {
+                  const row = gridRef.getSelectedRow();
+                  if (row && (row['optionComeFrom'] === DictionaryType.type.array.value || row['optionComeFrom'] === DictionaryType.type.sql.value)) {
+                    return true;
+                  }
+                }
+                return false;
+              },
+            },
+            {
+              label: '前端组件',
+              name: 'editorFormType',
+              type: 'w-select',
+              defaultValue: 'w-text',
+              options: ComponentType.options,
+            },
+          ],
+        },
+      }"
     ></w-grid>
+    <FieldEditDialog ref="fieldEditDialogRef"></FieldEditDialog>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
-import { Tools } from 'platform-core';
+import { Formater, Tools } from 'platform-core';
+import { computed, inject, ref, nextTick } from 'vue';
+import { FormConfig } from './ts/FormConfig';
+import { DictionaryType } from './ts/DictionaryType';
+import { ComponentType } from './ts/ComponentType';
+import FieldEditDialog from './FieldEditDialog.vue';
 
-import type { FieldRowType } from './fieldGrid';
-import { newFieldRowFun } from './fieldGrid';
-
-const props = defineProps({
-  fieldComeFrom: { type: String, default: 'table' },
-});
+const gridRef = ref();
+const fieldEditDialogRef = ref();
+const formConfig = <FormConfig>inject('formConfig');
+const getFieldGridRef = () => {
+  return gridRef.value;
+};
+formConfig.cf.getFieldGridRef = getFieldGridRef;
 const emit = defineEmits(['set-field-config-value-fun', 'add-table-field-fun']);
-const fieldComeFromValue = ref(props.fieldComeFrom);
-watch(
-  () => props.fieldComeFrom,
-  (newVal, oldVal) => {
-    fieldComeFromValue.value = newVal;
-  },
-);
 
-const fieldName = { label: '字段名称', name: 'fieldName', sortable: false };
-const fieldLabel = { label: '页面显示名称', name: 'fieldLabel', sortable: false };
+const fieldName = { label: '字段名称', name: 'fieldName', sortable: false, width: 250 };
+const fieldSqlType = {
+  label: '数据库类型',
+  name: 'sqlType',
+  sortable: false,
+  width: 120,
+  format: (val, row) => {
+    if (!Tools.isEmpty(row['width'])) {
+      return row['sqlType'] + row['width'];
+    }
+    return val;
+  },
+};
+const fieldLabel = { label: '页面显示名称', name: 'fieldLabel', sortable: false, width: 200 };
+const optionComeFrom = {
+  label: '码值类型',
+  name: 'optionComeFrom',
+  sortable: false,
+  width: 120,
+  format: Formater.dictionary({ items: DictionaryType.options }),
+};
+const dictionaryOptionValue = {
+  label: '码值',
+  name: 'dictionaryOptionValue',
+  sortable: false,
+  width: 200,
+  format: (val, row) => {
+    if (row.optionComeFrom === DictionaryType.type.array.value || row.optionComeFrom === DictionaryType.type.sql.value) {
+      return row.otherOptionValue;
+    }
+    return val;
+  },
+};
+const otherOptionValue = {
+  label: '码值',
+  name: 'otherOptionValue',
+  sortable: false,
+  width: 150,
+  format: (val, row) => {
+    if (row.optionComeFrom === DictionaryType.type.dictionary) {
+      return row.dictionaryOptionValue;
+    }
+    return val;
+  },
+};
+const editorFormType = {
+  label: '前端组件',
+  name: 'editorFormType',
+  sortable: false,
+  width: 120,
+  format: (val, row) => {
+    const result = ComponentType.type[val];
+    if (result) {
+      return result.label;
+    }
+    return val;
+  },
+};
 const queryShow = {
   label: '查询',
   name: 'queryShow',
@@ -90,198 +291,51 @@ const editorShow = {
     };
   },
 };
-const columnsComputed = computed(() => {
-  if (fieldComeFromValue.value === 'sql') {
-    return [fieldName, fieldLabel, queryShow, tableShow];
-  }
-  return [fieldName, fieldLabel, queryShow, tableShow, editorShow];
-});
-
-const platformGridRef = ref();
-const platformGrid = {
-  toolbarActions: [
-    // {
-    //   extend: 'add',
-    //   icon: 'add_box',
-    //   label: '增加不在列表中的字段',
-    //   click: () => {
-    //     emit('add-table-field-fun', getRows());
-    //   },
-    // },
-    {
-      extend: 'remove',
-      enableIf: (args) => {
-        if (args.firstTicked && fieldComeFromValue.value !== 'sql') {
-          return true;
-        } else if (args.selected && fieldComeFromValue.value !== 'sql') {
-          return true;
-        } else {
-          return false;
-        }
-      },
-      click: (args) => {
-        if (args.tickeds) {
-          platformGridRef.value.removeLocalData(args.tickeds);
-        } else if (args.selecteds) {
-          platformGridRef.value.removeLocalData(args.selecteds);
-        }
+const editorIsRequired = {
+  label: '必填项',
+  name: 'editorIsRequired',
+  width: 60,
+  sortable: false,
+  align: 'center',
+  format: (val, row) => {
+    return {
+      componentType: 'q-checkbox',
+      bindModelValue: true,
+      attrs: {
+        dense: true,
       },
-    },
-  ],
-  rowClickFun: (args) => {
-    emit('set-field-config-value-fun', args.row);
+    };
   },
-  columns: [
-    // {
-    //   label: '字段类型',
-    //   name: 'fieldType',
-    //   width: 50,
-    //   format: (val) => {
-    //     if (val && DataTypeEnum[val]) {
-    //       return DataTypeEnum[val];
-    //     } else {
-    //       return val;
-    //     }
-    //   },
-    // },
-  ],
 };
-
-const setLocalData = (rows: FieldRowType[], tableName: string) => {
-  const result = <FieldRowType[]>[];
-  if (!Tools.isEmpty(tableName)) {
-    rows.forEach((row) => {
-      result.push({
-        ...newFieldRowFun(),
-        ...row,
-        ...{ tableName },
-      });
-    });
-  } else {
+const editorGroup = {
+  label: '编辑页面',
+  name: 'editor',
+  columns: [editorShow, editorIsRequired],
+};
+const columnsComputed = computed(() => {
+  let optionValue = dictionaryOptionValue;
+  if (gridRef.value) {
+    const row = gridRef.value.getSelectedRow();
+    if (row && (row['optionComeFrom'] === DictionaryType.type.array.value || row['optionComeFrom'] === DictionaryType.type.sql.value)) {
+      optionValue = otherOptionValue;
+    }
+  }
+  if (formConfig.cm.fieldComeFromValueComputed.value === 'sql') {
+    return [fieldName, fieldLabel, optionComeFrom, optionValue, editorFormType, queryShow, tableShow];
+  }
+  return [fieldName, fieldSqlType, fieldLabel, optionComeFrom, optionValue, editorFormType, queryShow, tableShow, editorGroup];
+});
+const setTicked = (fieldName: string, value: boolean) => {
+  const rows = gridRef.value.getRows();
+  if (rows) {
     rows.forEach((row: any) => {
-      if (row.name.toUpperCase() === 'ID' || row.name.toUpperCase() === 'ID_') {
-        result.push({
-          ...newFieldRowFun(),
-          ...{
-            ...row,
-            fieldName: row.name,
-            fieldLabel: row.remarks,
-            tableName: row.tableName,
-            columnType: row.javaType,
-            addValueType: 'UUID',
-            editOverride: false,
-          },
-        });
-      } else if (row.name.toUpperCase() === 'DATA_COME_FROM' || row.name.toUpperCase() === 'DATA_COME_FROM_') {
-        result.push({
-          ...newFieldRowFun(),
-          ...{
-            ...row,
-            fieldName: row.name,
-            fieldLabel: row.remarks,
-            tableName: row.tableName,
-            columnType: row.javaType,
-            addValueType: 'DCF_INPUT',
-            editOverride: false,
-          },
-        });
-      } else if (row.name.toUpperCase() === 'CREATOR' || row.name.toUpperCase() === 'CREATOR_') {
-        result.push({
-          ...newFieldRowFun(),
-          ...{
-            ...row,
-            fieldName: row.name,
-            fieldLabel: row.remarks,
-            tableName: row.tableName,
-            columnType: row.javaType,
-            addValueType: 'CURR_USER',
-            editOverride: false,
-          },
-        });
-      } else if (row.name.toUpperCase() === 'CREATE_DATE' || row.name.toUpperCase() === 'CREATE_DATE_') {
-        result.push({
-          ...newFieldRowFun(),
-          ...{
-            ...row,
-            fieldName: row.name,
-            fieldLabel: row.remarks,
-            tableName: row.tableName,
-            columnType: row.javaType,
-            addValueType: 'CURR_DATE',
-            editOverride: false,
-            fieldtype: 'w-date',
-          },
-        });
-      } else if (row.name.toUpperCase() === 'LAST_MODIFIER' || row.name.toUpperCase() === 'LAST_MODIFIER_') {
-        result.push({
-          ...newFieldRowFun(),
-          ...{
-            ...row,
-            fieldName: row.name,
-            fieldLabel: row.remarks,
-            tableName: row.tableName,
-            columnType: row.javaType,
-            addValueType: 'CURR_USER',
-            editOverride: true,
-          },
-        });
-      } else if (row.name.toUpperCase() === 'LAST_MODIFYDATE' || row.name.toUpperCase() === 'LAST_MODIFYDATE_') {
-        result.push({
-          ...newFieldRowFun(),
-          ...{
-            ...row,
-            fieldName: row.name,
-            fieldLabel: row.remarks,
-            tableName: row.tableName,
-            columnType: row.javaType,
-            addValueType: 'CURR_DATE',
-            editOverride: true,
-            fieldtype: 'w-date',
-          },
-        });
-      } else if (row.name.toUpperCase() === 'CORP_CODE' || row.name.toUpperCase() === 'CORP_CODE_') {
-        result.push({
-          ...newFieldRowFun(),
-          ...{
-            ...row,
-            fieldName: row.name,
-            fieldLabel: row.remarks,
-            tableName: row.tableName,
-            columnType: row.javaType,
-            addValueType: 'CURR_CORP',
-            editOverride: true,
-          },
-        });
-      } else {
-        result.push({
-          ...newFieldRowFun(),
-          // tableShow = true 默认设置在表格中显示
-          ...{ ...row, fieldName: row.name, fieldLabel: row.remarks, tableName: row.tableName, columnType: row.javaType, tableShow: true },
-        });
-      }
+      row[fieldName] = value;
+    });
+    // TODO：设置复选框后页面未重新渲染，必须选中一条记录 quasar 的表格才会触发渲染，暂时先使用内部的API，选中后再取消选中。
+    gridRef.value.setSelected(rows[0]);
+    nextTick(() => {
+      gridRef.value.clearSelected();
     });
   }
-  platformGridRef.value.setLocalData(result);
-};
-const updateLocalData = (row: FieldRowType) => {
-  platformGridRef.value.updateLocalData({ ...row, _rowKey_: platformGridRef.value.getSelectedRows()[0]['_rowKey_'] });
-};
-const addLocalData = (row, index) => {
-  platformGridRef.value.addLocalData(row, index);
 };
-const getRows = () => {
-  return platformGridRef.value.getRows();
-};
-const getSelectedRows = () => {
-  return platformGridRef.value.getSelectedRows();
-};
-
-defineExpose({
-  setLocalData,
-  updateLocalData,
-  getRows,
-  addLocalData,
-  getSelectedRows,
-});
 </script>
-./fieldGrid
diff --git a/io.sc.platform.lcdp.frontend/src/views/form/page.ts b/io.sc.platform.lcdp.frontend/src/views/form/page.ts
index 1615f4ec..5f7ab28f 100644
--- a/io.sc.platform.lcdp.frontend/src/views/form/page.ts
+++ b/io.sc.platform.lcdp.frontend/src/views/form/page.ts
@@ -1,4 +1,6 @@
-import { axios, Environment } from 'platform-core';
+import { axios, Environment, Tools } from 'platform-core';
+import { DictionaryType } from './grid/ts/DictionaryType';
+import { ComponentType } from './grid/ts/ComponentType';
 
 /**
  * 页面模板类型枚举
@@ -16,3 +18,365 @@ export async function getPageConfig(configId: string) {
   }
   return null;
 }
+
+export class Page {
+  templateConfig: any = {};
+  templateGrid: any = {};
+  templateGridFields: Array<any> = [];
+  configButton: boolean = false;
+  fieldOptions: any = {};
+
+  constructor(templateConfig_: any, templateGrid_: any, templateGridFields_: Array<any>) {
+    this.templateConfig = templateConfig_;
+    this.templateGrid = templateGrid_;
+    this.templateGridFields = templateGridFields_;
+  }
+
+  async buildGridConfig() {
+    const buttons = this.buildButtons();
+    const dense = this.buildDense();
+    const tablePagination = this.buildTablePagination();
+    const fieldObject = await this.buildField();
+    const sortBy = this.buildDefaultSortBy();
+    return {
+      title: this.templateGrid.title,
+      toolbarActions: buttons,
+      configButton: this.configButton,
+      primaryKey: this.templateGrid.primaryKey,
+      foreignKey: this.templateGrid.foreignKey,
+      dataUrl: Environment.apiContextPath(this.templateGrid.dataUrl),
+      fetchDataUrl: Environment.apiContextPath(this.templateGrid.fetchDataUrl + '?templateGridId=' + this.templateGrid.id),
+      addDataUrl: Environment.apiContextPath(this.templateGrid.addDataUrl) + '/' + this.templateGrid.id,
+      editDataUrl: Environment.apiContextPath(this.templateGrid.editDataUrl) + '/' + this.templateGrid.id + '/' + this.templateGrid.primaryKey,
+      removeDataUrl: Environment.apiContextPath(this.templateGrid.removeDataUrl) + '/' + this.templateGrid.id + '/' + this.templateGrid.primaryKey,
+      sortNo: this.templateGrid.sortNo,
+      checkboxSelection: this.templateGrid.checkboxSelection,
+      draggable: this.templateGrid.draggable,
+      autoFetchData: this.templateGrid.autoFetchData,
+      dense: dense.dense,
+      denseToolbar: dense.denseToolbar,
+      denseHeader: dense.denseHeader,
+      denseBody: dense.denseBody,
+      denseBottom: dense.denseBottom,
+      stickyNum: this.templateGrid.stickyNum,
+      tree: this.templateGrid.tree,
+      treeRelationship: this.templateGrid.treeRelationship,
+      treeDefaultExpandAll: this.templateGrid.treeDefaultExpandAll,
+      pageable: this.templateGrid.pageable,
+      pagination: tablePagination,
+      queryFormColsNum: this.templateGrid.queryFormColsNum,
+      queryFormRowNum: this.templateGrid.queryFormRowNum,
+      editor: {
+        dialog: {
+          width: this.templateGrid.editorWidth,
+          height: this.templateGrid.editorHeight,
+        },
+        form: {
+          colsNum: this.templateGrid.editorFormColsNum,
+          fields: fieldObject.editorFormFields,
+        },
+      },
+      queryFormFields: fieldObject.queryFormFields,
+      columns: fieldObject.tableColumns,
+      sortBy: sortBy,
+    };
+  }
+
+  /**
+   * 得到选项类型的所有options
+   * @param configItem
+   * @returns
+   */
+  async getSelectOptions(configItem) {
+    let options = <any>[];
+    switch (configItem.optionComeFrom) {
+      case DictionaryType.type.dictionary.value:
+        // 数据字典选项值
+        const dictResp = await axios.get(Environment.apiContextPath('api/system/dictionary/getValuesByCodeWithMessage/' + configItem.dictionaryOptionValue));
+        if (dictResp?.data?.length > 0) {
+          dictResp.data.forEach((item) => {
+            options.push({ label: item.value, value: item.key });
+          });
+        }
+        break;
+      case DictionaryType.type.array.value:
+        // 自定义数组
+        options = eval('(' + configItem.otherOptionValue + ')');
+        break;
+      case DictionaryType.type.sql.value:
+        // sql
+        const requestParams = {
+          method: 'POST',
+          headers: { 'content-type': 'text/plain;charset=utf-8;' },
+          data: configItem.otherOptionValue,
+          url: Environment.apiContextPath('api/jdbc/fetchDataBySql'),
+        };
+        const resp = await axios(requestParams);
+        options = resp.data;
+        break;
+      default:
+        break;
+    }
+    return options;
+  }
+
+  /**
+   * 构建编辑页面、查询表单、表格列字段
+   */
+  private async buildField() {
+    await this.buildOptions();
+    const { editorFormFields, queryFormFields, tableColumns } = this.fieldHandler();
+    if (this.templateGrid['moreColumnTitle']) {
+      const columnTitles = JSON.parse(this.templateGrid['columnTitles'])['value'];
+      if (columnTitles) {
+        for (let i = 0; i < columnTitles.length; i++) {
+          const item = columnTitles[i];
+          if (item.columns && item.columns.length > 0) {
+            this.childrenHandler(item.columns);
+          } else if (!item['isGroup']) {
+            this.setColumnProps(item);
+          }
+        }
+      }
+      return { editorFormFields, queryFormFields, tableColumns: columnTitles };
+    } else {
+      return { editorFormFields, queryFormFields, tableColumns };
+    }
+  }
+
+  private childrenHandler(arr: Array<any>) {
+    if (arr && arr.length > 0) {
+      arr.forEach((item: any) => {
+        if (item.children && item.children.length > 0) {
+          this.childrenHandler(item.children);
+        } else {
+          this.setColumnProps(item);
+        }
+      });
+    }
+  }
+
+  private setColumnProps(item: any) {
+    const column = this.templateGridFields.find((tmp) => tmp['fieldName'] === item.name);
+    const options = this.fieldOptions[item.name];
+    if (column.tableSort) {
+      item['sortable'] = column.tableSort;
+    }
+    if (column.tableColumnAlign) {
+      item['align'] = column.tableColumnAlign;
+    }
+    if (column.tableColumnWidth) {
+      item['width'] = column.tableColumnWidth;
+    }
+    if (column.optionComeFrom !== DictionaryType.type.none.value) {
+      item['format'] = (val, row) => {
+        if (Array.isArray(options) && options.length > 0) {
+          let formatResult = val;
+          options.forEach((option: any) => {
+            if (option.value === val) {
+              formatResult = option.label;
+            }
+          });
+          return formatResult;
+        } else {
+          return val;
+        }
+      };
+    }
+  }
+
+  private fieldHandler() {
+    const editorFormFields = <any>[];
+    const queryFormFields = <any>[];
+    const tableColumns = <any>[];
+    let editorFormField = {};
+    let queryFormField = {};
+    let tableColumn = {};
+    for (let i = 0; i < this.templateGridFields.length; i++) {
+      const item = this.templateGridFields[i];
+      editorFormField = { type: ComponentType.type[item.editorFormType].component };
+      queryFormField = { type: ComponentType.type[item.queryFormType].component };
+      tableColumn = {};
+      const options = this.fieldOptions[item.fieldName];
+      if (item.editorShow) {
+        editorFormField['label'] = item.fieldLabel;
+        editorFormField['name'] = item.fieldName;
+        if (ComponentType.selectTypes.findIndex((tmp_) => tmp_.value === item.editorFormType) > -1) {
+          editorFormField['options'] = options;
+        }
+        if (ComponentType.multipleSelectTypes.findIndex((tmp_) => tmp_.value === item.editorFormType) > -1) {
+          editorFormField['multiple'] = true;
+        }
+        if (!Tools.isEmpty(item.editorDefaultValue)) {
+          editorFormField['defaultValue'] = item.editorDefaultValue;
+        }
+        if (item.editorIsRequired) {
+          editorFormField['requiredIf'] = item.editorIsRequired;
+        }
+        editorFormFields.push(editorFormField);
+      }
+      if (item.queryShow) {
+        queryFormField['label'] = item.fieldLabel;
+        queryFormField['name'] = item.fieldName;
+        if (ComponentType.selectTypes.findIndex((tmp_) => tmp_.value === item.queryFormType) > -1) {
+          queryFormField['options'] = options;
+        }
+        if (ComponentType.multipleSelectTypes.findIndex((tmp_) => tmp_.value === item.queryFormType) > -1) {
+          queryFormField['multiple'] = true;
+        }
+        if (!Tools.isEmpty(item.queryDefaultValue)) {
+          queryFormField['defaultValue'] = item.queryDefaultValue;
+        }
+        if (item.queryIsRequired) {
+          queryFormField['requiredIf'] = item.queryIsRequired;
+        }
+        if (item.queryOperator) {
+          queryFormField['queryOperator'] = item.queryOperator;
+        }
+        queryFormFields.push(queryFormField);
+      }
+      if (item.tableShow && !this.templateGrid['moreColumnTitle']) {
+        tableColumn = { label: item.fieldLabel, name: item.fieldName };
+        if (item.tableSort) {
+          tableColumn['sortable'] = item.tableSort;
+        }
+        if (item.tableColumnAlign) {
+          tableColumn['align'] = item.tableColumnAlign;
+        }
+        if (item.tableColumnWidth) {
+          tableColumn['width'] = item.tableColumnWidth;
+        }
+        if (item.optionComeFrom !== DictionaryType.type.none.value) {
+          tableColumn = {
+            ...tableColumn,
+            ...{
+              format: (val, row) => {
+                if (Array.isArray(options) && options.length > 0) {
+                  let formatResult = val;
+                  options.forEach((option: any) => {
+                    if (option.value === val) {
+                      formatResult = option.label;
+                    }
+                  });
+                  return formatResult;
+                } else {
+                  return val;
+                }
+              },
+            },
+          };
+        }
+        tableColumns.push(tableColumn);
+      }
+    }
+    return { editorFormFields, queryFormFields, tableColumns };
+  }
+
+  private async buildOptions() {
+    for (let i = 0; i < this.templateGridFields.length; i++) {
+      const item = this.templateGridFields[i];
+      const options = await this.getSelectOptions(item);
+      this.fieldOptions[item['fieldName']] = options;
+    }
+  }
+
+  /**
+   * 构建分页对象
+   */
+  private buildTablePagination() {
+    const tablePagination = {
+      reqPageStart: 0,
+      rowsPerPage: 10,
+    };
+    if (this.templateGrid.reqPageStart) {
+      tablePagination.reqPageStart = this.templateGrid.reqPageStart;
+    }
+    if (this.templateGrid.rowsPerPage) {
+      tablePagination.rowsPerPage = this.templateGrid.rowsPerPage;
+    }
+    return tablePagination;
+  }
+
+  /**
+   * 构建默认排序
+   */
+  private buildDefaultSortBy() {
+    let defaultSortBy = undefined;
+    if (this.templateGrid.defaultSortBy) {
+      try {
+        defaultSortBy = eval('(' + this.templateGrid.defaultSortBy + ')');
+      } catch (error) {
+        console.error('sortBy eval error!');
+      }
+    }
+    return defaultSortBy;
+  }
+
+  /**
+   * 构建按钮
+   */
+  private buildButtons() {
+    const tableButtons = <any>[];
+    if (this.templateGrid.buttons && this.templateGrid.buttons.length > 0) {
+      this.templateGrid.buttons.forEach((item) => {
+        if (item !== 'config') {
+          tableButtons.push(item);
+        } else {
+          this.configButton = true;
+        }
+      });
+    }
+    return tableButtons;
+  }
+
+  /**
+   * 构建紧凑模式
+   */
+  private buildDense() {
+    const dense = {
+      dense: false,
+      denseToolbar: false,
+      denseHeader: false,
+      denseBody: false,
+      denseBottom: false,
+    };
+    if (this.templateGrid.dense && this.templateGrid.dense.length > 0) {
+      if (
+        this.templateGrid.dense.findIndex((item) => {
+          return item === 'dense';
+        }) > -1
+      ) {
+        dense.dense = true;
+      }
+      if (
+        this.templateGrid.dense.findIndex((item) => {
+          return item === 'denseToolbar';
+        }) > -1
+      ) {
+        dense.denseToolbar = true;
+      }
+      if (
+        this.templateGrid.dense.findIndex((item) => {
+          return item === 'denseHeader';
+        }) > -1
+      ) {
+        dense.denseHeader = true;
+      }
+      if (
+        this.templateGrid.dense.findIndex((item) => {
+          return item === 'denseBody';
+        }) > -1
+      ) {
+        dense.denseBody = true;
+      }
+      if (
+        this.templateGrid.dense.findIndex((item) => {
+          return item === 'denseBottom';
+        }) > -1
+      ) {
+        dense.denseBottom = true;
+      }
+    }
+    return dense;
+  }
+}
diff --git a/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/controller/FormController.java b/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/controller/FormController.java
index bbc2387f..e95a4697 100644
--- a/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/controller/FormController.java
+++ b/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/controller/FormController.java
@@ -9,6 +9,8 @@ import io.sc.platform.lcdp.form.service.FormService;
 import io.sc.platform.lcdp.form.support.GridPageWrapper;
 import io.sc.platform.lcdp.form.vo.FormVo;
 import io.sc.platform.mvc.controller.support.RestCrudController;
+import io.sc.platform.orm.service.support.QueryParameter;
+import io.sc.platform.system.api.dictionary.DictionaryVo;
 import org.springframework.web.bind.annotation.*;
 
 import java.util.List;
@@ -51,4 +53,9 @@ public class FormController extends RestCrudController<FormVo, FormEntity,String
     public GridPageWrapper fetch(@PathVariable(name="templateConfigId") String templateConfigId) throws Exception {
         return service.fetch(templateConfigId);
     }
+
+    @RequestMapping(value = "dictionaryList",method= RequestMethod.GET)
+    public List<DictionaryVo> dictionaryList(QueryParameter parameter) throws Exception {
+        return service.dictionaryList(parameter);
+    }
 }
diff --git a/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/entity/GridFieldEntity.java b/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/entity/GridFieldEntity.java
index aa14bec3..89a59482 100644
--- a/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/entity/GridFieldEntity.java
+++ b/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/entity/GridFieldEntity.java
@@ -46,6 +46,14 @@ public class GridFieldEntity extends CorporationAuditorEntity<GridFieldVo> {
 	@Size(max=500)
 	protected String fieldLabel;
 
+	// 数据库类型
+	@Column(name="SQL_TYPE_")
+	protected String sqlType;
+
+	// 数据库长度
+	@Column(name="SQL_WIDTH_")
+	protected String width;
+
 	// 字段类型
 	@Column(name="FIELD_TYPE_")
 //	@Enumerated(EnumType.STRING)
@@ -167,6 +175,8 @@ public class GridFieldEntity extends CorporationAuditorEntity<GridFieldVo> {
 		vo.setParent(this.getParent());
 		vo.setFieldName(this.getFieldName());
 		vo.setFieldLabel(this.getFieldLabel());
+		vo.setSqlType(this.getSqlType());
+		vo.setWidth(this.getWidth());
 		vo.setFieldType(this.getFieldType());
 		vo.setSortNo(this.getSortNo());
 		vo.setFieldLength(this.getFieldLength());
@@ -233,6 +243,22 @@ public class GridFieldEntity extends CorporationAuditorEntity<GridFieldVo> {
 		this.fieldLabel = fieldLabel;
 	}
 
+	public String getSqlType() {
+		return sqlType;
+	}
+
+	public void setSqlType(String sqlType) {
+		this.sqlType = sqlType;
+	}
+
+	public String getWidth() {
+		return width;
+	}
+
+	public void setWidth(String width) {
+		this.width = width;
+	}
+
 	public String getFieldType() {
 		return fieldType;
 	}
diff --git a/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/entity/GridPageEntity.java b/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/entity/GridPageEntity.java
index c844666f..2b829f3f 100644
--- a/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/entity/GridPageEntity.java
+++ b/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/entity/GridPageEntity.java
@@ -63,6 +63,15 @@ public class GridPageEntity extends CorporationAuditorEntity<GridPageVo> {
 	@Convert(converter = ArrayStringConverter.class)
 	protected String[] buttons;
 
+	// 是否启用多表头
+	@Column(name="MORE_COLUMN_TITLE_")
+	@Convert(converter= NumericBooleanConverter.class)
+	protected Boolean moreColumnTitle;
+
+	// 多表头配置
+	@Column(name="COLUMN_TITLES_")
+	protected String columnTitles;
+
 	// 选择模式(none:不允许选中;cell:单元格选择;row:行选择)
 	@Column(name="SELECTION_")
 	@Size(max=100)
@@ -202,6 +211,14 @@ public class GridPageEntity extends CorporationAuditorEntity<GridPageVo> {
 	@Column(name="EDITOR_FORM_COLS_NUM_")
 	protected Integer editorFormColsNum;
 
+	// 编辑面板窗口宽度
+	@Column(name="EDITOR_WIDTH_")
+	protected String editorWidth;
+
+	// 编辑面板窗口高度
+	@Column(name="EDITOR_HEIGHT_")
+	protected String editorHeight;
+
 	@Override
 	public GridPageVo toVo() {
 		GridPageVo vo = new GridPageVo();
@@ -215,6 +232,8 @@ public class GridPageEntity extends CorporationAuditorEntity<GridPageVo> {
 		vo.setSql(this.getSql());
 		vo.setTitle(this.getTitle());
 		vo.setButtons(this.getButtons());
+		vo.setMoreColumnTitle(this.getMoreColumnTitle());
+		vo.setColumnTitles(this.getColumnTitles());
 		vo.setSelection(this.getSelection());
 		vo.setPrimaryKey(this.getPrimaryKey());
 		vo.setForeignKey(this.getForeignKey());
@@ -244,6 +263,8 @@ public class GridPageEntity extends CorporationAuditorEntity<GridPageVo> {
 		vo.setQueryFormColsNum(this.getQueryFormColsNum());
 		vo.setQueryFormRowNum(this.getQueryFormRowNum());
 		vo.setEditorFormColsNum(this.getEditorFormColsNum());
+		vo.setEditorWidth(this.getEditorWidth());
+		vo.setEditorHeight(this.getEditorHeight());
 		return vo;
 	}
 
@@ -311,6 +332,22 @@ public class GridPageEntity extends CorporationAuditorEntity<GridPageVo> {
 		this.buttons = buttons;
 	}
 
+	public Boolean getMoreColumnTitle() {
+		return moreColumnTitle;
+	}
+
+	public void setMoreColumnTitle(Boolean moreColumnTitle) {
+		this.moreColumnTitle = moreColumnTitle;
+	}
+
+	public String getColumnTitles() {
+		return columnTitles;
+	}
+
+	public void setColumnTitles(String columnTitles) {
+		this.columnTitles = columnTitles;
+	}
+
 	public String getSelection() {
 		return selection;
 	}
@@ -542,4 +579,20 @@ public class GridPageEntity extends CorporationAuditorEntity<GridPageVo> {
 	public void setEditorFormColsNum(Integer editorFormColsNum) {
 		this.editorFormColsNum = editorFormColsNum;
 	}
+
+	public String getEditorWidth() {
+		return editorWidth;
+	}
+
+	public void setEditorWidth(String editorWidth) {
+		this.editorWidth = editorWidth;
+	}
+
+	public String getEditorHeight() {
+		return editorHeight;
+	}
+
+	public void setEditorHeight(String editorHeight) {
+		this.editorHeight = editorHeight;
+	}
 }
diff --git a/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/service/FormService.java b/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/service/FormService.java
index 8a416508..56bd52a7 100644
--- a/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/service/FormService.java
+++ b/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/service/FormService.java
@@ -7,6 +7,8 @@ import io.sc.platform.lcdp.form.entity.FormEntity;
 import io.sc.platform.lcdp.form.repository.FormRepository;
 import io.sc.platform.lcdp.form.support.GridPageWrapper;
 import io.sc.platform.orm.service.DaoService;
+import io.sc.platform.orm.service.support.QueryParameter;
+import io.sc.platform.system.api.dictionary.DictionaryVo;
 
 import java.util.List;
 
@@ -18,4 +20,5 @@ public interface FormService extends DaoService<FormEntity, String, FormReposito
     public FormEntity edit(GridPageWrapper tcrw) throws Exception;
     public void delete(String[] templateConfigIds) throws Exception;
     public GridPageWrapper fetch(String templateConfigId) throws Exception;
+    public List<DictionaryVo> dictionaryList(QueryParameter parameter) throws Exception;
 }
diff --git a/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/service/impl/FormServiceImpl.java b/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/service/impl/FormServiceImpl.java
index 15d49f7b..7b7e8d7a 100644
--- a/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/service/impl/FormServiceImpl.java
+++ b/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/service/impl/FormServiceImpl.java
@@ -15,6 +15,11 @@ import io.sc.platform.lcdp.form.service.GridFieldService;
 import io.sc.platform.lcdp.form.service.GridPageService;
 import io.sc.platform.lcdp.form.support.*;
 import io.sc.platform.orm.service.impl.DaoServiceImpl;
+import io.sc.platform.orm.service.support.QueryParameter;
+import io.sc.platform.system.api.dictionary.DictionaryVo;
+import io.sc.platform.system.dictionary.jpa.entity.DictionaryEntity;
+import io.sc.platform.system.dictionary.service.DictionaryService;
+import io.sc.platform.util.StringUtil;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.jdbc.core.JdbcTemplate;
 import org.springframework.jdbc.core.RowMapper;
@@ -26,6 +31,7 @@ import javax.sql.DataSource;
 import java.sql.Connection;
 import java.sql.DatabaseMetaData;
 import java.util.*;
+import java.util.stream.Collectors;
 
 @Service("lcdpFormService")
 public class FormServiceImpl extends DaoServiceImpl<FormEntity, String, FormRepository> implements FormService {
@@ -43,6 +49,8 @@ public class FormServiceImpl extends DaoServiceImpl<FormEntity, String, FormRepo
 	private GridFieldService templateGridFieldService;
 	@Autowired
 	private DataSource dataSource;
+	@Autowired
+	private DictionaryService dictionaryService;
 
 	@Override
 	public List<Schema> schemas() throws Exception {
@@ -234,4 +242,19 @@ public class FormServiceImpl extends DaoServiceImpl<FormEntity, String, FormRepo
 		}
 		return namedParameterJdbcTemplate.query(columnsSql, columnsParamsMap, ColumnWrapperRowMapper);
 	}
+
+	@Override
+	public List<DictionaryVo> dictionaryList(QueryParameter parameter) throws Exception {
+		List<DictionaryEntity> list = dictionaryService.list(parameter);
+		List<DictionaryVo> result = new ArrayList<>();
+		if (list!=null && list.size() > 0) {
+			Map<String, List<DictionaryEntity>> codes = list.stream().collect(Collectors.groupingBy(DictionaryEntity::getCode));
+			for(String key: codes.keySet()) {
+				DictionaryVo dictVo = new DictionaryVo();
+				dictVo.setCode(key);
+				result.add(dictVo);
+			}
+		}
+		return result;
+	}
 }
diff --git a/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/service/impl/JdbcTemplateServiceImpl.java b/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/service/impl/JdbcTemplateServiceImpl.java
index 8517304f..6d11305e 100644
--- a/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/service/impl/JdbcTemplateServiceImpl.java
+++ b/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/service/impl/JdbcTemplateServiceImpl.java
@@ -18,7 +18,11 @@ import io.sc.platform.orm.api.enums.DataComeFrom;
 import io.sc.platform.orm.service.support.OperatorType;
 import io.sc.platform.orm.service.support.QueryParameter;
 import io.sc.platform.orm.service.support.criteria.Criteria;
+import io.sc.platform.orm.service.support.criteria.impl.Contains;
+import io.sc.platform.orm.service.support.criteria.impl.Equals;
+import io.sc.platform.orm.service.support.criteria.impl.InSet;
 import io.sc.platform.security.util.SecurityUtil;
+import io.sc.platform.util.StringUtil;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.core.convert.ConversionService;
 import org.springframework.jdbc.core.JdbcTemplate;
@@ -267,29 +271,28 @@ public class JdbcTemplateServiceImpl implements JdbcTemplateService {
         String newSql = sqlHandler(sql);
         SqlRowSet sqlRowSet = jdbcTemplate.queryForRowSet(newSql);
         SqlRowSetMetaData sqlRowSetMetaData = sqlRowSet.getMetaData();
-
-        List<String> paramsList = getParamsList(sql);
-        if (null!=paramsList && paramsList.size()> 0) {
-            Map<String, Object> queryField = new HashMap<>();
-            queryField.put("id", "query_field");
-            queryField.put("columnName", "查询字段");
-            list.add(queryField);
-            Map<String, Object> whereField = new HashMap<>();
-            whereField.put("id", "where_field");
-            whereField.put("columnName", "条件字段");
-            list.add(whereField);
-            for (String param:paramsList) {
-                map = new HashMap<>();
-                map.put("id", UUID.randomUUID().toString().trim().replaceAll("-", ""));
-                map.put("parent", "where_field");
-                map.put("columnName", param);
-                list.add(map);
-            }
-        }
+//        List<String> paramsList = getParamsList(sql);
+//        if (null!=paramsList && paramsList.size()> 0) {
+//            Map<String, Object> queryField = new HashMap<>();
+//            queryField.put("id", "query_field");
+//            queryField.put("columnName", "查询字段");
+//            list.add(queryField);
+//            Map<String, Object> whereField = new HashMap<>();
+//            whereField.put("id", "where_field");
+//            whereField.put("columnName", "条件字段");
+//            list.add(whereField);
+//            for (String param:paramsList) {
+//                map = new HashMap<>();
+//                map.put("id", UUID.randomUUID().toString().trim().replaceAll("-", ""));
+//                map.put("parent", "where_field");
+//                map.put("columnName", param);
+//                list.add(map);
+//            }
+//        }
         for (int i=1;i<=sqlRowSetMetaData.getColumnCount();i++) {
             map = new HashMap<>();
-            map.put("id", UUID.randomUUID().toString().trim().replaceAll("-", ""));
-            map.put("parent", "query_field");
+//            map.put("id", UUID.randomUUID().toString().trim().replaceAll("-", ""));
+//            map.put("parent", "query_field");
             map.put("columnName", sqlRowSetMetaData.getColumnLabel(i));
             map.put("columnTypeName", sqlRowSetMetaData.getColumnTypeName(i));
             list.add(map);
@@ -350,7 +353,6 @@ public class JdbcTemplateServiceImpl implements JdbcTemplateService {
         GridPageEntity tg = new GridPageEntity();
         tg.setId(templateGridId);
         List<GridFieldEntity> fields = templateGridFieldRepository.findByTemplateGridOrderBySortNoAsc(tg);
-
         Map<String, Class<?>> fieldTypeMap = new HashMap<String, Class<?>>();
         for(GridFieldEntity field: fields) {
             if (null!=field.getFieldType() && !"".equals(field.getFieldType())) {
@@ -368,7 +370,7 @@ public class JdbcTemplateServiceImpl implements JdbcTemplateService {
         }
         paramsMap = condition.getParameters();
         String orderBySql = builderOrderBy(parameter);
-        String sql = buildQuerySql(fields.get(0).getTemplateGrid(), conditionSql, condition, orderBySql);
+        String sql = buildQuerySql(fields.get(0).getTemplateGrid(), conditionSql, condition, orderBySql, parameter);
 
         List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
         if (!parameter.getPageable()) {
@@ -468,7 +470,7 @@ public class JdbcTemplateServiceImpl implements JdbcTemplateService {
         return rs;
     }
 
-    public String buildQuerySql(GridPageEntity grid, String conditionSql, Condition condition, String orderBySql) throws Exception {
+    public String buildQuerySql(GridPageEntity grid, String conditionSql, Condition condition, String orderBySql, QueryParameter parameter) throws Exception {
         StringBuffer sql = new StringBuffer();
         if (grid.getFieldComeFrom().equals(FieldComeFrom.table)) {
             sql.append("SELECT * FROM ");
@@ -476,11 +478,10 @@ public class JdbcTemplateServiceImpl implements JdbcTemplateService {
             sql.append(conditionSql);
             sql.append(orderBySql);
         } else if (grid.getFieldComeFrom().equals(FieldComeFrom.sql)) {
-            if (null == condition.getParameters() || condition.getParameters().size() == 0) {
+            if (StringUtil.isNullOrEmpty(condition.getWhere())) {
                 String sqlStr = sqlHandler(grid.getSql());
                 sql.append(sqlStr);
             } else {
-                Map<String, Object> map = condition.getParameters();
                 String newSql = grid.getSql();
                 Set<String> set = new LinkedHashSet<>();
                 Matcher betweenAndMatcher = betweenAndPattern.matcher(grid.getSql());
@@ -503,13 +504,21 @@ public class JdbcTemplateServiceImpl implements JdbcTemplateService {
                     for (String str : set) {
                         String replaceResult = str;
                         Matcher paramsMatcher = paramsPattern.matcher(str);
-                        Boolean flag = true;
+                        boolean flag = false;
                         while (paramsMatcher.find()) {
                             String param = paramsMatcher.group(1);
-                            if (map.containsKey(param)) {
-                                replaceResult = replaceResult.replaceAll("#\\{"+param+"\\}", map.get(param).toString());
-                            } else {
-                                flag = false;
+                            Criteria criteria = parameter.getCriteriaByFieldName(param);
+                            if (criteria!=null) {
+                                OperatorType operatorType = criteria.getOperator();
+                                if (OperatorType.equals.equals(operatorType)) {
+                                    flag = true;
+                                    Equals equals = (Equals) criteria;
+                                    replaceResult = replaceResult.replaceAll("#\\{"+param+"\\}", equals.getValue());
+                                } else {
+                                    flag = true;
+                                    Contains contains = (Contains) criteria;
+                                    replaceResult = replaceResult.replaceAll("#\\{"+param+"\\}", contains.getValue());
+                                }
                             }
                         }
                         if (flag) {
diff --git a/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/vo/GridFieldVo.java b/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/vo/GridFieldVo.java
index 62b71f3c..1178fff9 100644
--- a/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/vo/GridFieldVo.java
+++ b/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/vo/GridFieldVo.java
@@ -3,6 +3,8 @@ package io.sc.platform.lcdp.form.vo;
 import io.sc.platform.lcdp.form.enums.AddValueType;
 import io.sc.platform.orm.api.vo.CorporationAuditorVo;
 
+import javax.persistence.Column;
+
 public class GridFieldVo extends CorporationAuditorVo {
 
     //主键
@@ -20,6 +22,12 @@ public class GridFieldVo extends CorporationAuditorVo {
     // 页面显示名称
     private String fieldLabel;
 
+    // 数据库类型
+    private String sqlType;
+
+    // 数据库长度
+    private String width;
+
     // 字段类型
     private String fieldType;
 
@@ -129,6 +137,22 @@ public class GridFieldVo extends CorporationAuditorVo {
         this.fieldLabel = fieldLabel;
     }
 
+    public String getSqlType() {
+        return sqlType;
+    }
+
+    public void setSqlType(String sqlType) {
+        this.sqlType = sqlType;
+    }
+
+    public String getWidth() {
+        return width;
+    }
+
+    public void setWidth(String width) {
+        this.width = width;
+    }
+
     public String getFieldType() {
         return fieldType;
     }
diff --git a/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/vo/GridPageVo.java b/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/vo/GridPageVo.java
index 8d9ebd2d..2a1da22a 100644
--- a/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/vo/GridPageVo.java
+++ b/io.sc.platform.lcdp/src/main/java/io/sc/platform/lcdp/form/vo/GridPageVo.java
@@ -2,6 +2,12 @@ package io.sc.platform.lcdp.form.vo;
 
 import io.sc.platform.lcdp.form.enums.FieldComeFrom;
 import io.sc.platform.orm.api.vo.CorporationAuditorVo;
+import io.sc.platform.orm.converter.MapStringConverter;
+import io.sc.platform.orm.converter.NumericBooleanConverter;
+
+import javax.persistence.Column;
+import javax.persistence.Convert;
+import java.util.Map;
 
 public class GridPageVo extends CorporationAuditorVo {
 
@@ -29,6 +35,12 @@ public class GridPageVo extends CorporationAuditorVo {
     // 表格按钮
     private String[] buttons;
 
+    // 是否启用多表头
+    private Boolean moreColumnTitle;
+
+    // 多表头配置
+    private String columnTitles;
+
     // 选中模式(single:单选,multiple:多选)
     private String selection;
 
@@ -116,6 +128,12 @@ public class GridPageVo extends CorporationAuditorVo {
     // 编辑面板一行显示元素个数
     private Integer editorFormColsNum;
 
+    // 编辑面板窗口宽度
+    private String editorWidth;
+
+    // 编辑面板窗口高度
+    private String editorHeight;
+
     public String getId() {
         return id;
     }
@@ -180,6 +198,22 @@ public class GridPageVo extends CorporationAuditorVo {
         this.buttons = buttons;
     }
 
+    public Boolean getMoreColumnTitle() {
+        return moreColumnTitle;
+    }
+
+    public void setMoreColumnTitle(Boolean moreColumnTitle) {
+        this.moreColumnTitle = moreColumnTitle;
+    }
+
+    public String getColumnTitles() {
+        return columnTitles;
+    }
+
+    public void setColumnTitles(String columnTitles) {
+        this.columnTitles = columnTitles;
+    }
+
     public String getSelection() {
         return selection;
     }
@@ -411,4 +445,20 @@ public class GridPageVo extends CorporationAuditorVo {
     public void setEditorFormColsNum(Integer editorFormColsNum) {
         this.editorFormColsNum = editorFormColsNum;
     }
+
+    public String getEditorWidth() {
+        return editorWidth;
+    }
+
+    public void setEditorWidth(String editorWidth) {
+        this.editorWidth = editorWidth;
+    }
+
+    public String getEditorHeight() {
+        return editorHeight;
+    }
+
+    public void setEditorHeight(String editorHeight) {
+        this.editorHeight = editorHeight;
+    }
 }
diff --git a/io.sc.platform.lcdp/src/main/resources/liquibase/io.sc.platform.lcdp_Form_DDL.xml b/io.sc.platform.lcdp/src/main/resources/liquibase/io.sc.platform.lcdp_Form_DDL.xml
index 3061ffdb..9db85c78 100644
--- a/io.sc.platform.lcdp/src/main/resources/liquibase/io.sc.platform.lcdp_Form_DDL.xml
+++ b/io.sc.platform.lcdp/src/main/resources/liquibase/io.sc.platform.lcdp_Form_DDL.xml
@@ -53,6 +53,8 @@
             <column name="SQL_"                   type="java.sql.Types.LONGNVARCHAR"    remarks="sql"></column>
             <column name="TITLE_"                 type="java.sql.Types.NVARCHAR(100)"   remarks="表格名称"></column>
             <column name="BUTTONS_"               type="java.sql.Types.NVARCHAR(1000)"  remarks="表格按钮"></column>
+            <column name="MORE_COLUMN_TITLE_"     type="java.sql.Types.SMALLINT"        remarks="是否启用多表头"></column>
+            <column name="COLUMN_TITLES_"         type="java.sql.Types.LONGNVARCHAR"    remarks="多表头配置"></column>
             <column name="SELECTION_"             type="java.sql.Types.NVARCHAR(100)"   remarks="选择模式(none:不允许选中;cell:单元格选择;row:行选择)"></column>
             <column name="PRIMARY_KEY_"           type="java.sql.Types.NVARCHAR(100)"   remarks="数据主键"></column>
             <column name="FOREIGN_KEY_"           type="java.sql.Types.NVARCHAR(100)"   remarks="数据外键"></column>
@@ -82,6 +84,8 @@
             <column name="QUERY_FORM_COLS_NUM_"   type="java.sql.Types.SMALLINT"        remarks="查询面板一行显示个数(0为自适应)"></column>
             <column name="QUERY_FORM_ROW_NUM_"    type="java.sql.Types.SMALLINT"        remarks="查询面板显示行数(默认1)"></column>
             <column name="EDITOR_FORM_COLS_NUM_"  type="java.sql.Types.SMALLINT"        remarks="编辑面板一行显示元素个数"></column>
+            <column name="EDITOR_WIDTH_"          type="java.sql.Types.NVARCHAR(10)"    remarks="编辑面板窗口宽度"></column>
+            <column name="EDITOR_HEIGHT_"         type="java.sql.Types.NVARCHAR(10)"    remarks="编辑面板窗口高度"></column>
             <column name="DATA_COME_FROM_"        type="java.sql.Types.NVARCHAR(10)"    remarks="数据来源(INPUT:手工录入,IMPORT:系统自动导入)" defaultValue="INPUT"></column>
             <column name="CREATOR_"               type="java.sql.Types.NVARCHAR(255)"   remarks="创建人"></column>
             <column name="CREATE_DATE_"           type="DATETIME"                       remarks="创建日期"></column>
@@ -103,10 +107,12 @@
             <column name="ID_"             		  type="java.sql.Types.NVARCHAR(50)"   remarks="ID主键">
                 <constraints primaryKey="true"/>
             </column>
-            <column name="GRID_ID_"               type="java.sql.Types.NVARCHAR(50)"     remarks="表格ID"></column>
+            <column name="GRID_ID_"               type="java.sql.Types.NVARCHAR(50)"     remarks="主表ID"></column>
             <column name="PARENT_"                type="java.sql.Types.NVARCHAR(50)"     remarks="字段所属的父类型(query_field: 查询字段;where_field: 条件字段)"></column>
             <column name="FIELD_NAME_"            type="java.sql.Types.NVARCHAR(100)"    remarks="字段名称"></column>
             <column name="FIELD_LABEL_"           type="java.sql.Types.NVARCHAR(500)"    remarks="页面显示名称"></column>
+            <column name="SQL_TYPE_"              type="java.sql.Types.NVARCHAR(100)"    remarks="数据库类型"></column>
+            <column name="SQL_WIDTH_"             type="java.sql.Types.NVARCHAR(100)"    remarks="数据库长度"></column>
             <column name="FIELD_TYPE_"            type="java.sql.Types.NVARCHAR(100)"    remarks="字段类型"></column>
             <column name="SORT_NO_"               type="java.sql.Types.SMALLINT" 		 remarks="字段序号"></column>
             <column name="FIELD_LENGTH_"          type="java.sql.Types.SMALLINT" 		 remarks="字段长度"></column>