From cd980c3b868cc3225c67ec0a0cd0345ecc9e46a7 Mon Sep 17 00:00:00 2001
From: likunming <likunming@163.com>
Date: Thu, 11 Jan 2024 09:53:29 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=87=8D=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/platform/components/PlatformGrid.vue  |  166 +-
 .../src/platform/index.ts                     |    1 -
 .../src/platform/utils/index.ts               |    1 -
 .../src/views/View1.vue                       |    1 +
 .../src/views/View2.vue                       |   93 +-
 .../src/components/index.ts                   |   18 +-
 .../src/menus/menus.json                      |   73 +
 .../platform/components/drawer/WDrawer.vue    |   93 +
 .../src/platform/components/form/WForm.vue    |  197 ++
 .../components/form/elements/WCheckbox.vue    |   39 +
 .../components/form/elements/WDate.vue        |   94 +
 .../components/form/elements/WNumber.vue      |   78 +
 .../components/form/elements/WSelect.vue      |   76 +
 .../components/form/elements/WText.vue        |   75 +
 .../components/form/elements/WTextBtn.vue     |   87 +
 .../components/form/elements/WTextarea.vue    |   75 +
 .../platform/components/grid/EnableIcon.vue   |   15 +
 .../src/platform/components/grid/WGrid.vue    | 2311 +++++++++++++++++
 .../src/platform/components/index.ts          |   46 +-
 .../platform/components/panel/WInfoPanel.vue  |   95 +
 .../components/toolbar/ChildrenBtn.vue        |   57 +
 .../platform/components/toolbar/WToolbar.vue  |  284 ++
 .../components/utils/FormValidators.ts        |   58 +
 .../components/utils/componentComm.ts         |    8 +-
 .../src/platform/components/utils/index.ts    |    2 +
 .../src/platform/index.ts                     |    2 +-
 .../src/routes/routes.json                    |   94 +-
 .../src/views/Form1.vue                       |   30 +
 .../src/views/Grid1.vue                       |    4 +
 .../src/views/likm/A.vue                      |   13 +
 .../src/views/likm/Dialog.vue                 |   35 +
 .../src/views/likm/Drawer.vue                 |   34 +
 .../src/views/likm/Form.vue                   |  152 ++
 .../src/views/likm/Grid.vue                   |  220 ++
 .../src/views/likm/GridLayout.vue             |  308 +++
 .../src/views/likm/InfoPanel.vue              |   15 +
 .../src/views/likm/QuasarGrid.vue             |  154 ++
 .../src/views/likm/Toolbar.vue                |  153 ++
 .../template-project/src/views/Form1.vue      |   30 +
 .../template-project/src/views/Grid1.vue      |    4 +
 40 files changed, 5227 insertions(+), 64 deletions(-)
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/drawer/WDrawer.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/form/WForm.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WCheckbox.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WDate.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WNumber.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WSelect.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WText.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WTextBtn.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WTextarea.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/EnableIcon.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/panel/WInfoPanel.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/toolbar/ChildrenBtn.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/utils/FormValidators.ts
 create mode 100644 io.sc.platform.core.frontend/src/views/Form1.vue
 create mode 100644 io.sc.platform.core.frontend/src/views/Grid1.vue
 create mode 100644 io.sc.platform.core.frontend/src/views/likm/A.vue
 create mode 100644 io.sc.platform.core.frontend/src/views/likm/Dialog.vue
 create mode 100644 io.sc.platform.core.frontend/src/views/likm/Drawer.vue
 create mode 100644 io.sc.platform.core.frontend/src/views/likm/Form.vue
 create mode 100644 io.sc.platform.core.frontend/src/views/likm/Grid.vue
 create mode 100644 io.sc.platform.core.frontend/src/views/likm/GridLayout.vue
 create mode 100644 io.sc.platform.core.frontend/src/views/likm/InfoPanel.vue
 create mode 100644 io.sc.platform.core.frontend/src/views/likm/QuasarGrid.vue
 create mode 100644 io.sc.platform.core.frontend/src/views/likm/Toolbar.vue
 create mode 100644 io.sc.platform.core.frontend/template-project/src/views/Form1.vue
 create mode 100644 io.sc.platform.core.frontend/template-project/src/views/Grid1.vue

diff --git a/io.sc.platform.components.frontend/src/platform/components/PlatformGrid.vue b/io.sc.platform.components.frontend/src/platform/components/PlatformGrid.vue
index 06671f77..dff4490b 100644
--- a/io.sc.platform.components.frontend/src/platform/components/PlatformGrid.vue
+++ b/io.sc.platform.components.frontend/src/platform/components/PlatformGrid.vue
@@ -243,17 +243,22 @@
         </template>
       </template>
       <template v-if="tableRowDrag" #body-cell="scope">
-        <q-td :props="scope">
-          <PlatformGridTdDrag
-            v-if="scope.col.field === '_sortNo_'"
-            :td-value="[scope.rowIndex + 1]"
-            :row-index="scope.rowIndex"
-            @table-sort-fun="tableSortFun"
-          ></PlatformGridTdDrag>
-          <PlatformGridTdDrag v-else :td-value="[scope.value]" :row-index="scope.rowIndex" @table-sort-fun="tableSortFun"></PlatformGridTdDrag>
-          <q-tooltip v-if="scope.col.classes?.indexOf('truncate') > -1 && scope.value && typeof scope.value === 'string'">
+        <q-td
+          :props="scope"
+          draggable="true"
+          @dragenter="onDragEnter($event, scope)"
+          @dragleave="onDragLeave"
+          @dragover="onDragOver($event, scope)"
+          @drop="onDrop($event, scope)"
+          @dragstart="onDragStart($event, scope)"
+        >
+          <template v-if="scope.col.field === '_sortNo_'">{{ scope.rowIndex + 1 }}</template>
+          <template v-else>
             {{ scope.value }}
-          </q-tooltip>
+            <q-tooltip v-if="scope.col.classes?.indexOf('truncate') > -1">
+              {{ scope.value }}
+            </q-tooltip>
+          </template>
         </q-td>
       </template>
       <template v-else #body-cell="scope">
@@ -349,13 +354,12 @@
 
 <script setup lang="ts">
 import { ref, reactive, computed, onMounted, nextTick, toRaw } from 'vue';
-import { axios, Environment, i18n } from 'platform-core';
+import { axios, Environment } from 'platform-core';
 import { useQuasar, getCssVar } from 'quasar';
 import PlatformDialog from './PlatformDialog.vue';
 import PlatformDrawer from './PlatformDrawer.vue';
 import PlatformInfo from './PlatformInfo.vue';
 import PlatformForm from './PlatformForm.vue';
-import PlatformGridTdDrag from './PlatformGridTdDrag.vue';
 import {
   extractTableProps,
   extractTableColumnsProps,
@@ -367,7 +371,6 @@ import {
   isEmpty,
   PageStatusEnum,
   PlatformNotifyTypeEnum,
-  CriteriaType,
 } from '@/platform/utils';
 import '@/css/tailwind.css';
 
@@ -921,6 +924,12 @@ const onResize = () => {
   }
 };
 
+type CriteriaType = {
+  fieldName: string;
+  operator: OperatorTypeEnum;
+  value: any;
+};
+
 // 构建 criteria 查询
 const buildQueryCriterias = (reqParams) => {
   const urlSearchParams = new URLSearchParams(reqParams);
@@ -1344,34 +1353,6 @@ const stickyHeaderColumn = () => {
   }
 };
 
-onMounted(() => {
-  if (extractTableColumns && extractTableColumns.length > props.tableColumns.length) {
-    handlerMoreRowColumnTitle();
-  }
-  if (props.tableInitLoadData) {
-    onRequest({
-      pagination: table.pagination,
-    });
-  } else {
-    stickyHeaderColumn();
-  }
-});
-
-defineExpose({
-  onView,
-  onDelete,
-  getSelectedRows,
-  refreshTable,
-  replaceRowsFun,
-  replaceRowFun,
-  rowClickFun,
-  getRowsFun,
-  deleteRowsFun,
-  addRowFun,
-  getQueryFormRefFun,
-  getAddEditFormRefFun,
-});
-
 const excludeColumnNum = computed(() => {
   let num = 0;
   if (props.tableSelection !== 'none') {
@@ -1578,9 +1559,110 @@ const tableTitleClassComputed = computed(() => {
   }
   return classArr;
 });
+
+// 拖拽开始
+let dragRowIndex;
+const onDragStart = (e, scope) => {
+  dragRowIndex = scope.rowIndex;
+  e.dataTransfer.dropEffect = 'move';
+};
+const addDragTopStyle = (e) => {
+  e.target.parentNode.style.borderTopWidth = '2px';
+  e.target.parentNode.style.borderTopStyle = 'dashed';
+  e.target.parentNode.style.borderTopColor = 'orange';
+};
+const removeDragTopStyle = (e) => {
+  e.target.parentNode.style.borderTopWidth = '';
+  e.target.parentNode.style.borderTopStyle = '';
+  e.target.parentNode.style.borderTopColor = '';
+};
+const addDragBottomStyle = (e) => {
+  e.target.parentNode.style.borderBottomWidth = '2px';
+  e.target.parentNode.style.borderBottomStyle = 'dashed';
+  e.target.parentNode.style.borderBottomColor = 'orange';
+};
+const removeDragBottomStyle = (e) => {
+  e.target.parentNode.style.borderBottomWidth = '';
+  e.target.parentNode.style.borderBottomStyle = '';
+  e.target.parentNode.style.borderBottomColor = '';
+};
+// 拖拽至可放置区域触发
+const onDragEnter = (e, scope) => {
+  if (dragRowIndex !== scope.rowIndex && e.target.parentNode.parentNode.children.length === scope.rowIndex + 1) {
+    // 最后一行
+    addDragBottomStyle(e);
+  } else if (dragRowIndex !== scope.rowIndex) {
+    addDragTopStyle(e);
+  }
+};
+// 拖拽至不可放置区域触发
+const onDragLeave = (e) => {
+  removeDragTopStyle(e);
+  removeDragBottomStyle(e);
+};
+// 拖拽过程触发
+const onDragOver = (e, scope) => {
+  if (e.offsetY >= 24 && dragRowIndex !== scope.rowIndex && e.target.parentNode.parentNode.children.length === scope.rowIndex + 1) {
+    removeDragTopStyle(e);
+    addDragBottomStyle(e);
+  } else if (e.offsetY < 24 && dragRowIndex !== scope.rowIndex && e.target.parentNode.parentNode.children.length === scope.rowIndex + 1) {
+    removeDragBottomStyle(e);
+    addDragTopStyle(e);
+  }
+  e.preventDefault();
+};
+// 拖拽放置时触发
+const onDrop = (e, scope) => {
+  e.preventDefault();
+  if (dragRowIndex === scope.rowIndex) {
+    return;
+  }
+  const dragRow = table.rows[dragRowIndex];
+  if (e.offsetY < 24 && dragRowIndex !== scope.rowIndex && e.target.parentNode.parentNode.children.length === scope.rowIndex + 1) {
+    table.rows.splice(dragRowIndex, 1);
+    table.rows.splice(scope.rowIndex - 1, 0, dragRow);
+  } else {
+    table.rows.splice(dragRowIndex, 1);
+    table.rows.splice(scope.rowIndex, 0, dragRow);
+  }
+  removeDragTopStyle(e);
+  removeDragBottomStyle(e);
+};
+
+onMounted(() => {
+  if (extractTableColumns && extractTableColumns.length > props.tableColumns.length) {
+    handlerMoreRowColumnTitle();
+  }
+  if (props.tableInitLoadData) {
+    onRequest({
+      pagination: table.pagination,
+    });
+  } else {
+    stickyHeaderColumn();
+  }
+});
+
+defineExpose({
+  onView,
+  onDelete,
+  getSelectedRows,
+  refreshTable,
+  replaceRowsFun,
+  replaceRowFun,
+  rowClickFun,
+  getRowsFun,
+  deleteRowsFun,
+  addRowFun,
+  getQueryFormRefFun,
+  getAddEditFormRefFun,
+});
 </script>
 
-<style scope lang="css">
+<style scoped lang="css">
+:deep(.q-table) {
+  border-collapse: collapse;
+}
+
 /** 表格最后一行数据底部边框没有，通过强制覆盖组件样式增加底部边框 */
 .q-table--vertical-separator td,
 .q-table--vertical-separator th,
diff --git a/io.sc.platform.components.frontend/src/platform/index.ts b/io.sc.platform.components.frontend/src/platform/index.ts
index e58d4f92..03925da0 100644
--- a/io.sc.platform.components.frontend/src/platform/index.ts
+++ b/io.sc.platform.components.frontend/src/platform/index.ts
@@ -17,7 +17,6 @@ export { DataTypeEnum } from './utils';
 export { OptionComeFromEnum } from './utils';
 export { FormComponentValidateEnum } from './utils';
 export { OperatorTypeEnum } from './utils';
-export { CriteriaType } from './utils';
 export { PlatformNotifyTypeEnum } from './utils';
 export { platformNotify } from './utils';
 export { isEmpty } from './utils';
diff --git a/io.sc.platform.components.frontend/src/platform/utils/index.ts b/io.sc.platform.components.frontend/src/platform/utils/index.ts
index fa096f0f..4ab7870c 100644
--- a/io.sc.platform.components.frontend/src/platform/utils/index.ts
+++ b/io.sc.platform.components.frontend/src/platform/utils/index.ts
@@ -5,7 +5,6 @@ export { DataTypeEnum } from './commUtil';
 export { OptionComeFromEnum } from './commUtil';
 export { FormComponentValidateEnum } from './commUtil';
 export { OperatorTypeEnum } from './commUtil';
-export { CriteriaType } from './commUtil';
 export { PlatformNotifyTypeEnum } from './commUtil';
 export { platformNotify } from './commUtil';
 export { isEmpty } from './commUtil';
diff --git a/io.sc.platform.components.frontend/src/views/View1.vue b/io.sc.platform.components.frontend/src/views/View1.vue
index 43fd701c..c96f9808 100644
--- a/io.sc.platform.components.frontend/src/views/View1.vue
+++ b/io.sc.platform.components.frontend/src/views/View1.vue
@@ -8,6 +8,7 @@
       :table-row-key="dataSupplementTypeGrid.tableRowKey"
       :table-init-load-data="dataSupplementTypeGrid.tableInitLoadData"
       :table-data-url="dataSupplementTypeGrid.tableDataUrl"
+      :table-row-drag="false"
       :table-show-sort-no="dataSupplementTypeGrid.tableShowSortNo"
       :table-columns="dataSupplementTypeGrid.tableColumns"
       :table-left-column-sticky-number="dataSupplementTypeGrid.tableLeftColumnStickyNumber"
diff --git a/io.sc.platform.components.frontend/src/views/View2.vue b/io.sc.platform.components.frontend/src/views/View2.vue
index cdc64435..dab9227e 100644
--- a/io.sc.platform.components.frontend/src/views/View2.vue
+++ b/io.sc.platform.components.frontend/src/views/View2.vue
@@ -1,9 +1,94 @@
 <template>
-  <div>{{ message }}</div>
+  <div>
+    <PlatformGrid
+      ref="dataSupplementTypeGridRef"
+      :query-form-cols-number="dataSupplementTypeGrid.queryFormColsNumber"
+      :query-form-cols-auto="dataSupplementTypeGrid.queryFormColsAuto"
+      :table-title="dataSupplementTypeGrid.tableTitle"
+      :table-row-key="dataSupplementTypeGrid.tableRowKey"
+      :table-init-load-data="dataSupplementTypeGrid.tableInitLoadData"
+      :table-data-url="dataSupplementTypeGrid.tableDataUrl"
+      :table-row-drag="true"
+      :table-show-sort-no="dataSupplementTypeGrid.tableShowSortNo"
+      :table-columns="dataSupplementTypeGrid.tableColumns"
+      :table-left-column-sticky-number="dataSupplementTypeGrid.tableLeftColumnStickyNumber"
+      :table-buttons="dataSupplementTypeGrid.tableButtons"
+      :query-form-fields="dataSupplementTypeGrid.queryFormFields"
+      :table-pagination="dataSupplementTypeGrid.tablePagination"
+      :add-form-props="dataSupplementTypeGrid.addFormProps"
+    ></PlatformGrid>
+  </div>
 </template>
+
 <script setup lang="ts">
-import { Environment, axios } from 'platform-core';
+import { ref } from 'vue';
+import { Environment } from 'platform-core';
+import { PlatformGrid } from '@/platform';
+import { PlatformIconEnum } from '@/platform/utils';
+
+const dataSupplementTypeGridRef = ref();
+const dataSupplementContentDialogRef = ref();
 
-const response = await axios.post(Environment.apiContextPath('/api/sample/action2'));
-const message = response.data.message;
+const dataSupplementTypeGrid = {
+  queryFormColsNumber: 2,
+  queryFormColsAuto: false,
+  queryFormFields: [
+    { label: '数据补录类型名称', modelName: 'typeName', type: 'text' },
+    { label: '数据补录类型说明', modelName: 'typeDesc', type: 'text' },
+  ],
+  hideBottom: false,
+  tableInitLoadData: true,
+  tableLeftColumnStickyNumber: 0,
+  tableTitle: '数据补录类型列表',
+  tableRowKey: 'id',
+  tableDataUrl: Environment.apiContextPath('api/data/supplement/type'),
+  tablePagination: {
+    sortBy: 'lastModifyDate',
+    descending: true,
+    reqPageStart: 0,
+    rowsPerPage: 10,
+  },
+  tableButtons: [
+    'query',
+    'reset',
+    'separator',
+    'add',
+    'edit',
+    'delete',
+    'separator',
+    {
+      icon: PlatformIconEnum.扳手,
+      label: '补录内容管理',
+      enableIf: (tableSelected) => {
+        if (tableSelected && tableSelected.length > 0) {
+          return true;
+        } else {
+          return false;
+        }
+      },
+      click: (tableSelected) => {
+        dataSupplementContentDialogRef.value.dialogShow(tableSelected[0]);
+      },
+    },
+    'separator',
+    'inFullscreen',
+  ],
+  tableShowSortNo: true,
+  tableColumns: [
+    { name: 'typeName', label: '数据补录类型名称' },
+    { name: 'typeDesc', label: '数据补录类型说明' },
+    { name: 'lastModifier', label: '最后修改人' },
+    { name: 'lastModifyDate', label: '最后修改时间' },
+  ],
+  addFormProps: {
+    dialogInitWidth: '60%',
+    dialogInitHeight: '50%',
+    formColsNumber: 1,
+    formColsAuto: false,
+    formFields: [
+      { label: '数据补录类型名称', modelName: 'typeName', type: 'text', required: true },
+      { label: '数据补录类型说明', modelName: 'typeDesc', type: 'textarea' },
+    ],
+  },
+};
 </script>
diff --git a/io.sc.platform.core.frontend/src/components/index.ts b/io.sc.platform.core.frontend/src/components/index.ts
index aac544bd..0a6f0395 100644
--- a/io.sc.platform.core.frontend/src/components/index.ts
+++ b/io.sc.platform.core.frontend/src/components/index.ts
@@ -6,14 +6,28 @@ import dialog from '@/views/Dialog.vue';
 import codemirror from '@/views/Codemirror.vue';
 import select from '@/views/Select.vue';
 import treeGrid from '@/views/TreeGrid.vue';
-import table from '@/views/Table.vue';
+import likmDialog from '@/views/likm/Dialog.vue';
+import likmDrawer from '@/views/likm/Drawer.vue';
+import likmForm from '@/views/likm/Form.vue';
+import infoPanel from '@/views/likm/InfoPanel.vue';
+import grid from '@/views/likm/Grid.vue';
+import toolbar from '@/views/likm/Toolbar.vue';
+import quasarGrid from '@/views/likm/QuasarGrid.vue';
+import gridLayout from '@/views/likm/GridLayout.vue';
 
 const localComponents = {
   'component.testcase.dialog': dialog,
   'component.testcase.codemirror': codemirror,
   'component.testcase.select': select,
   'component.testcase.treeGrid': treeGrid,
-  'component.testcase.table': table,
+  'component.testcase.likmDialog': likmDialog,
+  'component.testcase.likmDrawer': likmDrawer,
+  'component.testcase.likmForm': likmForm,
+  'component.testcase.infoPanel': infoPanel,
+  'component.testcase.grid': grid,
+  'component.testcase.toolbar': toolbar,
+  'component.testcase.quasarGrid': quasarGrid,
+  'component.testcase.gridLayout': gridLayout,
 };
 
 export default localComponents;
diff --git a/io.sc.platform.core.frontend/src/menus/menus.json b/io.sc.platform.core.frontend/src/menus/menus.json
index 14837958..96cf44a7 100644
--- a/io.sc.platform.core.frontend/src/menus/menus.json
+++ b/io.sc.platform.core.frontend/src/menus/menus.json
@@ -62,5 +62,78 @@
     "titleI18nKey": "menu.testcase.table",
     "icon": "bi-palette",
     "routeName": "route.testcase.table"
+  },
+  { "type": "GROUP", "order": 30000, "id": "menu.testcase.likm", "titleI18nKey": "测试用例-likm", "icon": "home" },
+  {
+    "type": "ROUTE",
+    "order": 100,
+    "parentId": "menu.testcase.likm",
+    "id": "menu.testcase.likm.dialog",
+    "titleI18nKey": "Dialog测试",
+    "icon": "bi-palette",
+    "routeName": "route.testcase.likm.dialog"
+  },
+  {
+    "type": "ROUTE",
+    "order": 200,
+    "parentId": "menu.testcase.likm",
+    "id": "menu.testcase.likm.drawer",
+    "titleI18nKey": "Drawer测试",
+    "icon": "bi-palette",
+    "routeName": "route.testcase.likm.drawer"
+  },
+  {
+    "type": "ROUTE",
+    "order": 300,
+    "parentId": "menu.testcase.likm",
+    "id": "menu.testcase.likm.form",
+    "titleI18nKey": "Form测试",
+    "icon": "bi-palette",
+    "routeName": "route.testcase.likm.form"
+  },
+  {
+    "type": "ROUTE",
+    "order": 400,
+    "parentId": "menu.testcase.likm",
+    "id": "menu.testcase.likm.infoPanel",
+    "titleI18nKey": "InfoPanel测试",
+    "icon": "bi-palette",
+    "routeName": "route.testcase.likm.infoPanel"
+  },
+  {
+    "type": "ROUTE",
+    "order": 500,
+    "parentId": "menu.testcase.likm",
+    "id": "menu.testcase.likm.grid",
+    "titleI18nKey": "Grid测试",
+    "icon": "bi-palette",
+    "routeName": "route.testcase.likm.grid"
+  },
+  {
+    "type": "ROUTE",
+    "order": 600,
+    "parentId": "menu.testcase.likm",
+    "id": "menu.testcase.likm.toolbar",
+    "titleI18nKey": "Toolbar测试",
+    "icon": "bi-palette",
+    "routeName": "route.testcase.likm.toolbar"
+  },
+  {
+    "type": "ROUTE",
+    "order": 700,
+    "parentId": "menu.testcase.likm",
+    "id": "menu.testcase.likm.quasarGrid",
+    "titleI18nKey": "官网表格测试",
+    "icon": "bi-palette",
+    "routeName": "route.testcase.likm.quasarGrid"
+  },
+  {
+    "type": "ROUTE",
+    "order": 700,
+    "parentId": "menu.testcase.likm",
+    "id": "menu.testcase.likm.gridLayout",
+    "titleI18nKey": "grid布局测试",
+    "icon": "bi-palette",
+    "routeName": "route.testcase.likm.gridLayout"
   }
 ]
diff --git a/io.sc.platform.core.frontend/src/platform/components/drawer/WDrawer.vue b/io.sc.platform.core.frontend/src/platform/components/drawer/WDrawer.vue
new file mode 100644
index 00000000..350b53f1
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/drawer/WDrawer.vue
@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <q-dialog v-model="drawer.show" position="right" v-bind="attrs" :maximized="true">
+      <q-card :style="drawerStyleComputed">
+        <div class="w-full h-full">
+          <div style="height: 69px">
+            <q-card-section>
+              <div class="flex justify-between">
+                <div class="text-h6">{{ title }}</div>
+                <div class="flex justify-end gap-4">
+                  <template v-if="buttons && buttons.length > 0">
+                    <template v-for="(btn, index) in buttons as any" :key="index">
+                      <q-btn v-if="typeof btn === 'object'" :loading="false" :color="'primary'" v-bind="btn" @click="btn.click ? btn.click() : () => {}">
+                      </q-btn>
+                    </template>
+                  </template>
+                  <slot name="buttons"></slot>
+                  <q-btn
+                    v-if="canMaximized"
+                    dense
+                    flat
+                    :icon="!drawer.actualMaximizedToggle ? IconEnum.全屏 : IconEnum.退出全屏"
+                    @click="drawerMaximizeBtnClick"
+                  >
+                    <q-tooltip v-if="!drawer.actualMaximizedToggle">全屏</q-tooltip>
+                    <q-tooltip v-else-if="drawer.actualMaximizedToggle">退出全屏</q-tooltip>
+                  </q-btn>
+                  <q-btn v-close-popup dense flat :icon="IconEnum.关闭">
+                    <q-tooltip>关闭</q-tooltip>
+                  </q-btn>
+                </div>
+              </div>
+            </q-card-section>
+            <q-separator />
+          </div>
+          <div style="height: calc(100% - 69px)">
+            <q-card-section style="height: 100%; padding: 0px" class="scroll">
+              <slot></slot>
+            </q-card-section>
+          </div>
+        </div>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, computed, useAttrs } from 'vue';
+import { IconEnum } from '@/platform/enums';
+
+const attrs = useAttrs();
+const props = defineProps({
+  title: { type: String, default: '' },
+  width: { type: String, default: '50vw' },
+  height: { type: String, default: '100vh' },
+  canMaximized: { type: Boolean, default: true },
+  buttons: { type: Array, default: () => [] },
+});
+
+const drawer = reactive({
+  show: false,
+  /**
+   * 实际全屏属性，Drawer 使用的 dialog 进行封装，而 dialog 的非全屏模式,
+   * 不管高宽给到多少，Quasar 内置的 css 样式都会有一个 padding: 24px 的属性,
+   * 所以封装 Drawer 时默认就是 dialog 的全屏模式，同时希望提供全屏的功能，所以需要一个实际是否全屏的属性。
+   */
+  actualMaximizedToggle: false,
+});
+
+const drawerMaximizeBtnClick = () => {
+  drawer.actualMaximizedToggle = !drawer.actualMaximizedToggle;
+};
+
+const drawerStyleComputed = computed(() => {
+  if (!drawer.actualMaximizedToggle) {
+    return { width: props.width, 'max-width': '100vw', height: props.height, 'max-height': '100vh' };
+  } else {
+    return { width: '100vw', 'max-width': '100vw', height: '100vh', 'max-height': '100vh' };
+  }
+});
+
+const show = () => {
+  drawer.show = true;
+};
+const hide = () => {
+  drawer.show = false;
+};
+
+defineExpose({
+  show,
+  hide,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/WForm.vue b/io.sc.platform.core.frontend/src/platform/components/form/WForm.vue
new file mode 100644
index 00000000..dfc0d7aa
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/form/WForm.vue
@@ -0,0 +1,197 @@
+<template>
+  <div>
+    <q-form ref="formRef" :autofocus="false" :greedy="true" v-bind="attrs">
+      <div class="grid" :class="formLayoutComputed">
+        <template v-for="(field, index) in fields as any" :key="String(index)">
+          <div
+            :class="
+              (field.colsFirst ? 'col-start-1 ' : ' ') +
+              (field.colspan === 'full'
+                ? ' col-span-' + screenColsNumComputed
+                : field.colspan && screenColsNumComputed >= field.colspan
+                ? ' col-span-' + field.colspan
+                : ' col-span-1')
+            "
+          >
+            <component :is="field.type" v-if="field.name" v-model="formData[field.name]" v-bind="field" :form-data="formData"></component>
+            <component :is="field.type" v-else :form-ref="formRef" v-bind="field" :form-data="formData"></component>
+          </div>
+        </template>
+      </div>
+      <slot></slot>
+    </q-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, computed, toRaw, defineProps, useAttrs } from 'vue';
+import { useQuasar } from 'quasar';
+import { PageStatusEnum } from '@/platform/components/utils';
+
+const $q = useQuasar();
+const attrs = useAttrs();
+const props = defineProps({
+  colsNum: { type: Number, default: 0 },
+  // 不同屏幕尺寸下 colsNum 为 0 时一行显示的字段个数
+  screenCols: {
+    type: Object,
+    default: () => {
+      return { xs: 1, sm: 2, md: 3, lg: 4, xl: 6 };
+    },
+  },
+  colsXGap: { type: Number, default: 8 },
+  colsYGap: { type: Number, default: 4 },
+  fields: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+
+const formRef = ref();
+const formStatus = ref(PageStatusEnum.新增);
+const formModel: any = {};
+const formFieldsMap = new Map();
+
+const defaultValueHandler = (field) => {
+  if (field.hasOwnProperty('defaultValue') && field.defaultValue !== null && field.defaultValue !== undefined) {
+    return field.defaultValue;
+  } else if (field.type === 'w-checkbox') {
+    return false;
+  }
+  return null;
+};
+
+watch(
+  () => props.fields,
+  (newVal, oldVal) => {
+    if (newVal) {
+      for (const field of props.fields as any) {
+        if (field.name) {
+          formModel[field.name] = defaultValueHandler(field);
+          formFieldsMap.set(field.name, field);
+        }
+      }
+    }
+  },
+);
+
+for (const field of props.fields as any) {
+  if (field.name) {
+    formModel[field.name] = defaultValueHandler(field);
+    formFieldsMap.set(field.name, field);
+  }
+}
+
+const formData = reactive(formModel);
+
+const screenColsNumComputed = computed(() => {
+  if (props.colsNum > 0) {
+    return props.colsNum;
+  } else {
+    return props.screenCols[$q.screen.name];
+  }
+});
+const formLayoutComputed = computed(() => {
+  let className = '';
+  if (props.colsNum > 0) {
+    className = 'grid-cols-' + props.colsNum;
+  } else {
+    className = 'grid-cols-' + screenColsNumComputed.value;
+  }
+  className += ' gap-x-[' + props.colsXGap + 'px]';
+  className += ' gap-y-[' + props.colsYGap + 'px]';
+  return className;
+});
+
+/**
+ * 对外暴露方法-获取form所有数据
+ */
+const getData = () => {
+  const data = { ...toRaw(formData) };
+  return data;
+};
+/**
+ * 对外暴露方法-设置form所有字段值
+ * @param data 数据对象(JSON格式)
+ */
+const setData = (data) => {
+  for (const field of props.fields as any) {
+    formData[field.name] = data[field.name];
+  }
+};
+/**
+ * 对外暴露方法-重置表单
+ */
+const reset = () => {
+  Object.keys(formData).forEach((key) => {
+    formData[key] = defaultValueHandler(formFieldsMap.get(key));
+  });
+};
+const formValidate = async () => {
+  let validate = false;
+  await formRef.value.validate().then((success) => {
+    if (success) {
+      validate = true;
+    }
+  });
+  return validate;
+};
+/**
+ * 对外暴露方法-表单验证
+ */
+const validate = async () => {
+  const v = await formValidate();
+  return v;
+};
+/**
+ * 对外暴露方法-设置字段值
+ * @param fieldName 字段name
+ * @param value 字段值
+ */
+const setFieldValue = (fieldName, value) => {
+  const field = formFieldsMap.get(fieldName);
+  formData[field.name] = value;
+};
+/**
+ * 对外暴露方法-获取字段值
+ * @param fieldName 字段name
+ */
+const getFieldValue = (fieldName) => {
+  return formData[fieldName];
+};
+/**
+ * 对外暴露方法-设置form状态
+ * @param status 状态
+ */
+const setStatus = (status) => {
+  formStatus.value = status;
+};
+/**
+ * 对外暴露方法-获取form状态
+ */
+const getStatus = () => {
+  return toRaw(formStatus.value);
+};
+/**
+ * 对外暴露方法-获取当前一行应该显示的元素个数
+ */
+const getRowColsNum = () => {
+  return screenColsNumComputed.value;
+};
+
+defineExpose({
+  data: formData,
+  fieldsMap: formFieldsMap,
+  getData,
+  setData,
+  reset,
+  validate,
+  getFieldValue,
+  setFieldValue,
+  setStatus,
+  getStatus,
+  getRowColsNum,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WCheckbox.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WCheckbox.vue
new file mode 100644
index 00000000..fa2ea5d4
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/form/elements/WCheckbox.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <q-checkbox v-show="!hideIfComputed" v-bind="attrs" :rules="rulesComputed" :disable="disableIfComputed"></q-checkbox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps, useAttrs } from 'vue';
+// import { FormValidators } from '@/platform/components';
+
+const attrs = useAttrs();
+const inRules = attrs.rules;
+const props = defineProps({
+  hideIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  disableIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+});
+
+const rulesComputed = computed(() => {
+  let rules = inRules || <any>[];
+  return rules;
+});
+
+const hideIfComputed = computed(() => {
+  return props.hideIf();
+});
+const disableIfComputed = computed(() => {
+  return props.disableIf();
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WDate.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WDate.vue
new file mode 100644
index 00000000..5801934c
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/form/elements/WDate.vue
@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <q-input
+      v-show="!hideIfComputed"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      :rules="rulesComputed"
+      :readonly="readonlyIfComputed"
+      :disable="disableIfComputed"
+    >
+      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
+      <template #append>
+        <q-icon :name="IconEnum.日期" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-date v-model="date" today-btn mask="YYYY-MM-DD">
+              <div class="row items-center justify-end">
+                <q-btn v-close-popup label="关闭" color="primary" flat />
+              </div>
+            </q-date>
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineProps, useAttrs, watch } from 'vue';
+import { FormValidators } from '@/platform/components';
+import { IconEnum } from '@/platform/enums';
+
+const date = ref(null);
+const attrs = useAttrs();
+const inRules = attrs.rules;
+const props = defineProps({
+  hideIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  requiredIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  readonlyIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  disableIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+});
+
+watch(
+  () => date.value,
+  (newVal, oldVal) => {
+    attrs['form-data'][attrs.name] = newVal;
+  },
+);
+
+const rulesComputed = computed(() => {
+  let rules = inRules || <any>[];
+  if (!hideIfComputed.value && requiredIfComputed.value) {
+    rules.push(FormValidators.required());
+  } else {
+    rules.splice(rules.length - 1, 1);
+  }
+  return rules;
+});
+
+const hideIfComputed = computed(() => {
+  return props.hideIf();
+});
+const requiredIfComputed = computed(() => {
+  return props.requiredIf();
+});
+const readonlyIfComputed = computed(() => {
+  return props.readonlyIf();
+});
+const disableIfComputed = computed(() => {
+  return props.disableIf();
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WNumber.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WNumber.vue
new file mode 100644
index 00000000..2f502373
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/form/elements/WNumber.vue
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <q-input
+      v-show="!hideIfComputed"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      type="number"
+      title=""
+      :rules="rulesComputed"
+      :readonly="readonlyIfComputed"
+      :disable="disableIfComputed"
+    >
+      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
+    </q-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps, useAttrs } from 'vue';
+import { FormValidators } from '@/platform/components';
+
+const attrs = useAttrs();
+const inRules = attrs.rules;
+const props = defineProps({
+  precision: { type: Number, default: 0 },
+  hideIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  requiredIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  readonlyIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  disableIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+});
+
+const rulesComputed = computed(() => {
+  let rules = inRules || <any>[];
+  rules.push(FormValidators.maxPrecision(props.precision));
+  if (!hideIfComputed.value && requiredIfComputed.value) {
+    rules.push(FormValidators.required());
+  } else {
+    rules.splice(rules.length - 1, 1);
+  }
+  return rules;
+});
+
+const hideIfComputed = computed(() => {
+  return props.hideIf();
+});
+const requiredIfComputed = computed(() => {
+  return props.requiredIf();
+});
+const readonlyIfComputed = computed(() => {
+  return props.readonlyIf();
+});
+const disableIfComputed = computed(() => {
+  return props.disableIf();
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WSelect.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WSelect.vue
new file mode 100644
index 00000000..a3467d01
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/form/elements/WSelect.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <q-select
+      v-show="!hideIfComputed"
+      emit-value
+      map-options
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      :rules="rulesComputed"
+      :readonly="readonlyIfComputed"
+      :disable="disableIfComputed"
+    >
+      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
+    </q-select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps, useAttrs } from 'vue';
+import { FormValidators } from '@/platform/components';
+
+const attrs = useAttrs();
+const inRules = attrs.rules;
+const props = defineProps({
+  hideIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  requiredIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  readonlyIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  disableIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+});
+
+const rulesComputed = computed(() => {
+  let rules = inRules || <any>[];
+  if (!hideIfComputed.value && requiredIfComputed.value) {
+    rules.push(FormValidators.required());
+  } else {
+    rules.splice(rules.length - 1, 1);
+  }
+  return rules;
+});
+
+const hideIfComputed = computed(() => {
+  return props.hideIf();
+});
+const requiredIfComputed = computed(() => {
+  return props.requiredIf();
+});
+const readonlyIfComputed = computed(() => {
+  return props.readonlyIf();
+});
+const disableIfComputed = computed(() => {
+  return props.disableIf();
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WText.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WText.vue
new file mode 100644
index 00000000..e29da8ff
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/form/elements/WText.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <q-input
+      v-show="!hideIfComputed"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      type="text"
+      :rules="rulesComputed"
+      :readonly="readonlyIfComputed"
+      :disable="disableIfComputed"
+    >
+      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
+    </q-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps, useAttrs } from 'vue';
+import { FormValidators } from '@/platform/components';
+
+const attrs = useAttrs();
+const inRules = attrs.rules;
+const props = defineProps({
+  hideIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  requiredIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  readonlyIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  disableIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+});
+
+const rulesComputed = computed(() => {
+  let rules = inRules || <any>[];
+  if (!hideIfComputed.value && requiredIfComputed.value) {
+    rules.push(FormValidators.required());
+  } else {
+    rules.splice(rules.length - 1, 1);
+  }
+  return rules;
+});
+
+const hideIfComputed = computed(() => {
+  return props.hideIf();
+});
+const requiredIfComputed = computed(() => {
+  return props.requiredIf();
+});
+const readonlyIfComputed = computed(() => {
+  return props.readonlyIf();
+});
+const disableIfComputed = computed(() => {
+  return props.disableIf();
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WTextBtn.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WTextBtn.vue
new file mode 100644
index 00000000..a4aab45a
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/form/elements/WTextBtn.vue
@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <q-input
+      v-show="!hideIfComputed"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      type="text"
+      :rules="rulesComputed"
+      :readonly="readonlyIfComputed"
+      :disable="disableIfComputed"
+    >
+      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
+      <template v-if="attrs.button && attrs.buttonPosition === 'prepend'" #prepend>
+        <q-btn round dense flat v-bind="attrs.button" @click="attrs.button.click" />
+      </template>
+      <template v-else-if="attrs.button && attrs.buttonPosition === 'before'" #before>
+        <q-btn round dense flat v-bind="attrs.button" @click="attrs.button.click" />
+      </template>
+      <template v-else-if="attrs.button && attrs.buttonPosition === 'after'" #after>
+        <q-btn round dense flat v-bind="attrs.button" @click="attrs.button.click" />
+      </template>
+      <template v-else-if="attrs.button" #append>
+        <q-btn round dense flat v-bind="attrs.button" @click="attrs.button.click" />
+      </template>
+    </q-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps, useAttrs } from 'vue';
+import { FormValidators } from '@/platform/components';
+
+const attrs = useAttrs();
+const inRules = attrs.rules;
+const props = defineProps({
+  hideIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  requiredIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  readonlyIf: {
+    type: Function,
+    default: () => {
+      return true;
+    },
+  },
+  disableIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+});
+
+const rulesComputed = computed(() => {
+  let rules = inRules || <any>[];
+  if (!hideIfComputed.value && requiredIfComputed.value) {
+    rules.push(FormValidators.required());
+  } else {
+    rules.splice(rules.length - 1, 1);
+  }
+  return rules;
+});
+
+const hideIfComputed = computed(() => {
+  return props.hideIf();
+});
+const requiredIfComputed = computed(() => {
+  return props.requiredIf();
+});
+const readonlyIfComputed = computed(() => {
+  return props.readonlyIf();
+});
+const disableIfComputed = computed(() => {
+  return props.disableIf();
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WTextarea.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WTextarea.vue
new file mode 100644
index 00000000..d7aac1b2
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/form/elements/WTextarea.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <q-input
+      v-show="!hideIfComputed"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      type="textarea"
+      :rules="rulesComputed"
+      :readonly="readonlyIfComputed"
+      :disable="disableIfComputed"
+    >
+      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
+    </q-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps, useAttrs } from 'vue';
+import { FormValidators } from '@/platform/components';
+
+const attrs = useAttrs();
+const inRules = attrs.rules;
+const props = defineProps({
+  hideIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  requiredIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  readonlyIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  disableIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+});
+
+const rulesComputed = computed(() => {
+  let rules = inRules || <any>[];
+  if (!hideIfComputed.value && requiredIfComputed.value) {
+    rules.push(FormValidators.required());
+  } else {
+    rules.splice(rules.length - 1, 1);
+  }
+  return rules;
+});
+
+const hideIfComputed = computed(() => {
+  return props.hideIf();
+});
+const requiredIfComputed = computed(() => {
+  return props.requiredIf();
+});
+const readonlyIfComputed = computed(() => {
+  return props.readonlyIf();
+});
+const disableIfComputed = computed(() => {
+  return props.disableIf();
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/EnableIcon.vue b/io.sc.platform.core.frontend/src/platform/components/grid/EnableIcon.vue
new file mode 100644
index 00000000..53b19fc5
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/EnableIcon.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <q-icon v-if="value" :name="IconEnum.是状态" color="green" size="sm"> </q-icon>
+    <q-icon v-else-if="!value && showNoEnable" :name="IconEnum.否状态" color="red" size="sm"> </q-icon>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { IconEnum } from '@/platform/enums';
+
+const props = defineProps({
+  value: { type: Boolean, default: false }, // 值
+  showNoEnable: { type: Boolean, default: false }, // 不可用是否显示
+});
+</script>
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
new file mode 100644
index 00000000..c9e035e4
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
@@ -0,0 +1,2311 @@
+<template>
+  <div>
+    <q-table
+      ref="tableRef"
+      v-model:pagination="table.pagination"
+      v-model:selected="table.selected"
+      :flat="true"
+      binary-state-sort
+      :selection="'single'"
+      :separator="'cell'"
+      :rows="table.rows"
+      :columns="extractTableColumns"
+      :rows-per-page-options="props.tablePagination.rowsPerPage && table.refHeightWidth.middleWidth > 600 ? table.pagination.rowsPerPageOptions : []"
+      :loading="table.loading"
+      :no-data-label="table.noDataLabel"
+      :loading-label="table.loadingLabel"
+      :class="tableClassComputed"
+      :table-style="tableHeightComputed"
+      v-bind="attrs"
+      @request="onRequest"
+      @fullscreen="tableFullscreenFun"
+    >
+      <template #top="scope">
+        <q-resize-observer @resize="onResize" />
+        <div class="col">
+          <w-form ref="queryFormRef" v-bind="props.queryForm" :fields="table.queryFormFields">
+            <div class="pt-2.5 flex flex-nowrap">
+              <div class="flex-none text-[18px] pt-[9px]">{{ title }}</div>
+              <div class="flex-1">
+                <w-toolbar
+                  v-bind="toolbar_"
+                  :grid-prop="{
+                    gridSelected: table.selected,
+                    gridRefs: {
+                      gridRef: tableRef,
+                      queryFormRef: queryFormRef,
+                      addEditDialogRef: dialogRef,
+                      addEditFormRef: dialogFormRef,
+                      viewDrawerRef: drawerRef,
+                    },
+                  }"
+                ></w-toolbar>
+              </div>
+              <div v-if="canFullScreen" class="flex-none pl-1">
+                <q-btn :icon="scope.inFullscreen ? IconEnum.退出全屏 : IconEnum.全屏" unelevated outline @click="scope.toggleFullscreen">
+                  <q-tooltip transition-show="rotate" transition-hide="rotate">
+                    {{ scope.inFullscreen ? '退出全屏' : '全屏' }}
+                  </q-tooltip>
+                </q-btn>
+              </div>
+            </div>
+          </w-form>
+        </div>
+      </template>
+      <template #header="scope">
+        <template v-if="columnTitleState.columnTitleRowNum > 1">
+          <q-tr v-for="(r, rIndex) in columnTitleState.columnTitleArr" :key="rIndex">
+            <q-th
+              v-if="rIndex === 0 && (!attrs.selection || attrs.selection !== 'none')"
+              :rowspan="columnTitleState.columnTitleRowNum"
+              :style="moreColumnTitleTableSelectionStyle"
+            >
+            </q-th>
+            <q-th v-if="rIndex === 0 && props.showSortNo" :rowspan="columnTitleState.columnTitleRowNum" :style="moreColumnTitleTableSortNoStyle"> 序号 </q-th>
+            <q-th
+              v-for="c in r"
+              :key="c.name"
+              :rowspan="c.rowspan"
+              :colspan="c.colspan"
+              :style="thStyleHandler(c, scope)"
+              :class="c.classes"
+              :props="titleScopeHandler(c, scope)"
+            >
+              {{ c.label }}
+            </q-th>
+          </q-tr>
+        </template>
+        <template v-else>
+          <q-tr :props="scope">
+            <q-th v-if="attrs.selection || attrs.selection === 'multiple'">
+              <q-checkbox v-model="scope.selected" />
+            </q-th>
+            <q-th v-else-if="!attrs.selection || attrs.selection !== 'none'"></q-th>
+            <q-th v-for="col in scope.cols" :key="col.name" :props="scope" :style="col.style" :class="col.classes">
+              {{ col.label }}
+            </q-th>
+          </q-tr>
+        </template>
+      </template>
+      <template #body="scope">
+        <q-tr :props="scope" @click="rowClick($el, scope.row, scope.rowIndex)" @dblclick="rowDbClick($el, scope.row, scope.rowIndex)">
+          <q-td v-if="!attrs.selection || attrs.selection !== 'none'" class="text-center">
+            <q-checkbox v-model="scope.selected" />
+          </q-td>
+          <q-td
+            v-for="col in scope.cols"
+            :key="col.name"
+            draggable="true"
+            :props="scope"
+            :title="col.classes?.indexOf('truncate') > -1 ? col.value : ''"
+            @dragenter="onDragEnter($event, scope)"
+            @dragleave="onDragLeave"
+            @dragover="onDragOver($event, scope)"
+            @drop="onDrop($event, scope)"
+            @dragstart="onDragStart($event, scope)"
+          >
+            <template v-if="col.name === '_sortNo_'">
+              {{ scope.rowIndex + 1 }}
+            </template>
+            <template v-else-if="col.value && typeof col.value === 'object' && col.value.type && col.value._vuecomp_">
+              <component :is="col.value.type" v-bind="col.value.props"></component>
+            </template>
+            <template v-else>
+              {{ col.value }}
+            </template>
+          </q-td>
+        </q-tr>
+      </template>
+      <template #loading>
+        <q-inner-loading :showing="table.loading" style="z-index: 999">
+          <q-spinner-gears size="50px" color="primary" />
+        </q-inner-loading>
+      </template>
+      <template #pagination="scope">
+        <template v-if="props.tablePagination.rowsPerPage">
+          <template v-if="table.refHeightWidth.middleWidth > 600">
+            <q-pagination
+              v-model="table.pagination.page"
+              :boundary-links="table.pagination.config.boundaryLinks"
+              :boundary-numbers="table.pagination.config.boundaryNumbers"
+              :direction-links="table.pagination.config.directionLinks"
+              :ellipses="table.pagination.config.ellipses"
+              :max-pages="table.pagination.config.maxPages"
+              :min="1"
+              :max="scope.pagesNumber"
+              @update:model-value="pageChange"
+            />
+          </template>
+          <template v-else>
+            <q-pagination
+              v-model="table.pagination.page"
+              :boundary-links="table.pagination.config.boundaryLinks"
+              :boundary-numbers="table.pagination.config.boundaryNumbers"
+              :direction-links="table.pagination.config.directionLinks"
+              :ellipses="table.pagination.config.ellipses"
+              :max-pages="3"
+              :min="1"
+              :max="scope.pagesNumber"
+              @update:model-value="pageChange"
+            />
+          </template>
+          <span>共 {{ table.pagination.rowsNumber }} 条记录</span>
+        </template>
+        <template v-else> 当前未启用分页，共 {{ table.pagination.rowsNumber }} 条记录 </template>
+      </template>
+      <template v-if="!attrs.hideBottom" #no-data="{ message }">
+        <div class="full-width row flex-center text-dark q-gutter-sm" :style="`height:` + noDataBottomHeightComputed">
+          <q-icon size="2em" :name="IconEnum.提示" />
+          <span>
+            {{ message }}
+          </span>
+        </div>
+      </template>
+    </q-table>
+    <w-dialog ref="dialogRef" v-bind="addEdit.dialog" :title="dialog.dialogTitle" :buttons="dialog.dialogButtons">
+      <w-form ref="dialogFormRef" v-bind="addEdit.form" class="pt-1.5 px-1.5"></w-form>
+    </w-dialog>
+    <w-drawer ref="drawerRef" title="查看" v-bind="view.drawer">
+      <div class="p-2.5">
+        <w-info-panel v-bind="view.infoPanel" :info="viewInfo.infoArray"></w-info-panel>
+      </div>
+    </w-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted, nextTick, toRaw, useAttrs } from 'vue';
+import { axios, Environment, NotifyManager } from '@/platform';
+import { useQuasar, getCssVar, exportFile } from 'quasar';
+import { IconEnum } from '@/platform/enums';
+import { extractTableColumnsProps, arrayToMap, OperatorTypeEnum, isEmpty, PageStatusEnum } from '@/platform/components/utils';
+
+const attrs = useAttrs();
+const gc = Environment.getConfigure();
+const darkBgColor = getCssVar('dark');
+const tableHeadBgColor = gc.theme.dark ? darkBgColor : gc.theme?.grid?.headBgColor || '#f5f7fa';
+const tableBorderColor = gc.theme?.grid?.borderColor || 'rgba(0, 0, 0, 0.12)';
+const stickyBgColor = gc.theme.dark ? darkBgColor : gc.theme?.grid?.stickyBgColor || '#ffffff';
+
+const props = defineProps({
+  height: { type: Number, default: 0 }, // 表格高度
+  spaceHeight: { type: Number, default: 4 }, // 留白高度
+  title: { type: String, default: '' }, // 表格标题
+  autoLoadData: { type: Boolean, default: true }, // 自动加载数据
+  rowKey: { type: String, default: 'id' }, // 行唯一键
+  rowDrag: { type: Boolean, default: false }, // 开启行拖拽
+  canFullScreen: { type: Boolean, default: true }, // 是否支持全屏
+  templateGridId: { type: String, default: '' }, // 模板ID
+  getDataUrl: { type: String, default: '' }, // 获取数据url
+  addDataUrl: { type: String, default: '' }, // 新增数据url
+  editDataUrl: { type: String, default: '' }, // 修改数据url
+  removeDataUrl: { type: String, default: '' }, // 删除数据url
+  columnTitleDense: { type: Boolean, default: false }, // 表格列标题紧凑模式
+  showSortNo: { type: Boolean, default: false }, // 是否显示排序号
+  leftColumnStickyNumber: { type: Number, default: 0 }, // 从左侧开始冻结列数，复选框与排序列不计算在内，目前支持1-10列。
+  clickSelectedRow: { type: Boolean, default: true }, // 单击选中行，selection为'none'时无效。
+  columns: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  queryForm: {
+    type: Object,
+    default: () => {
+      return {
+        rowNum: 1,
+        fields: [],
+      };
+    },
+  },
+  toolbar: {
+    type: Object,
+    default: () => {
+      return {
+        buttons: [],
+      };
+    },
+  },
+  tablePagination: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+  addEdit: {
+    type: Object,
+    default: () => {
+      return {
+        dialog: {},
+        form: {},
+      };
+    },
+  },
+  view: {
+    type: Object,
+    default: () => {
+      return {
+        drawer: {},
+        infoPanel: {
+          fields: [],
+        },
+      };
+    },
+  },
+  onRowClick: {
+    type: Function,
+    default: null,
+  }, // 监听使用，不要传递覆盖！！！
+  onRowDbClick: {
+    type: Function,
+    default: null,
+  }, // 监听使用，不要传递覆盖！！！
+});
+const emit = defineEmits<{
+  (
+    e: 'rowClick', // 行点击事件
+    evt: Event, // 第一个参数，JS 事件对象
+    row: any, // 第二个参数, 点击的行对象
+    index: number, // 第三个参数, 当前页中行的索引
+  ): void;
+  (
+    e: 'rowDbClick', // 行双击事件
+    evt: Event, // 第一个参数，JS 事件对象
+    row: any, // 第二个参数, 点击的行对象
+    index: number, // 第三个参数, 当前页中行的索引
+  ): void;
+  (
+    e: 'requestDataBefore', // 表格请求数据前触发事件
+    requestParams: URLSearchParams | any, // 第一个参数，请求参数
+    callback: any, // 回调函数
+  ): void;
+  (
+    e: 'requestDataAfter', // 表格请求数据完成后触发事件
+    responseResult: any, // 第一个参数，请求响应结果
+  ): void;
+  (
+    e: 'addEditDataSubmitBefore', // 内置新增编辑功能数据提交前触发事件
+    data: any, // 第一个参数，提交的数据对象
+    callback: any,
+  ): void; // 返回值：处理完成后的数据对象
+  (
+    e: 'addEditDataSubmitAfter', // 内置新增编辑功能数据提交完成后触发事件
+    responseResult: any, // 第一个参数，请求响应结果
+  ): void;
+  (
+    e: 'deleteDataBefore', // 内置删除功能提交完成前回调函数
+    data: Array<any | string>, // 第一个参数，删除提交的数据
+    callback: any,
+  ): void; // 返回值：处理完成后的数据
+  (
+    e: 'deleteDataAfter', // 内置删除功能提交完成后回调函数
+    responseResult: any, // 第一个参数，删除提交的数据
+  ): void;
+  (
+    e: 'addDialogOpenAfter', // 新增窗口打开之后
+  ): void;
+  (
+    e: 'editDialogOpenAfter', // 编辑窗口打开之后
+    editData: any, // 第一个参数，编辑对应的数据
+  ): void;
+  (
+    e: 'rowDragDropAfter', // 行拖拽完成后
+  ): void;
+}>();
+
+const $q = useQuasar();
+const queryFormRef = ref();
+const tableRef = ref();
+const dialogRef = ref();
+const drawerRef = ref();
+const dialogFormRef = ref();
+const tableColumnsMap = arrayToMap('name', props.columns);
+const queryFormFieldsMap = arrayToMap('name', props.queryForm.fields);
+
+/**
+ * 内置按钮枚举
+ */
+enum ButtonEnum {
+  query = 'query', //查询
+  moreQuery = 'moreQuery', //更多查询
+  reset = 'reset', //重置
+  refresh = 'refresh', //刷新
+  add = 'add', //新增
+  edit = 'edit', //编辑
+  clone = 'clone', //复制
+  remove = 'remove', //删除
+  removeAll = 'removeAll', //删除全部
+  view = 'view', //查看
+  export = 'export', //导出
+}
+/**
+ * 内置按钮
+ */
+const buttonObj = {
+  separator: 'separator',
+  query: {
+    name: ButtonEnum.query,
+    icon: IconEnum.查询,
+    label: '查询',
+    click: (selected, context) => {
+      refresh();
+    },
+  },
+  moreQuery: {
+    name: ButtonEnum.moreQuery,
+    icon: IconEnum.更多查询,
+    label: '更多查询',
+    enableIf: () => {
+      if (props.queryForm.fields.length <= table.queryFormFields.length && !table.moreQueryStatus) {
+        return false;
+      } else {
+        return true;
+      }
+    },
+    click: (selected, context) => {
+      table.moreQueryStatus = !table.moreQueryStatus;
+      handlerQueryFormShowField();
+    },
+  },
+  reset: {
+    name: ButtonEnum.reset,
+    icon: IconEnum.重置,
+    label: '重置',
+    click: (selected, context) => {
+      queryFormRef.value.reset();
+    },
+  },
+  refresh: {
+    name: ButtonEnum.refresh,
+    icon: IconEnum.刷新,
+    label: '刷新',
+    click: (selected, context) => {
+      refresh();
+    },
+  },
+  add: {
+    name: ButtonEnum.add,
+    icon: IconEnum.新增,
+    label: '新增',
+    click: (selected, context) => {
+      dialog.dialogTitle = '新增';
+      dialogRef.value.show();
+      nextTick(() => {
+        dialogFormRef.value.setStatus(PageStatusEnum.新增);
+        emit('addDialogOpenAfter');
+      });
+    },
+  },
+  edit: {
+    name: ButtonEnum.edit,
+    icon: IconEnum.编辑,
+    label: '编辑',
+    enableIf: (selected) => {
+      if (selected && selected.length > 0) {
+        return true;
+      }
+      return false;
+    },
+    click: (selected, context) => {
+      if (!table.selected || table.selected.length <= 0) {
+        NotifyManager.warn('请选择要编辑的记录');
+      } else {
+        dialogRef.value.show();
+        dialog.dialogTitle = '编辑';
+        nextTick(() => {
+          dialogFormRef.value.setStatus(PageStatusEnum.编辑);
+          dialogFormRef.value.setData(table.selected[0]);
+          emit('editDialogOpenAfter', table.selected[0]);
+        });
+      }
+    },
+  },
+  clone: {
+    name: ButtonEnum.clone,
+    icon: 'content_copy',
+    label: '复制',
+    enableIf: (selected) => {
+      if (selected && selected.length > 0) {
+        return true;
+      }
+      return false;
+    },
+    click: (selected, context) => {
+      if (!table.selected || table.selected.length <= 0) {
+        NotifyManager.warn('请选择要复制的记录');
+      } else {
+        dialogRef.value.show();
+        dialog.dialogTitle = '复制';
+        nextTick(() => {
+          dialogFormRef.value.setStatus(PageStatusEnum.新增);
+          dialogFormRef.value.setData(table.selected[0]);
+        });
+      }
+    },
+  },
+  remove: {
+    name: ButtonEnum.remove,
+    icon: IconEnum.删除,
+    label: '删除',
+    enableIf: (selected) => {
+      if (selected && selected.length > 0) {
+        return true;
+      }
+      return false;
+    },
+    click: (selected, context) => {
+      if (!table.selected || table.selected.length <= 0) {
+        NotifyManager.warn('请选择要删除的记录');
+      } else {
+        $q.dialog({
+          title: '询问',
+          message: '您确认要删除所选记录吗？',
+          cancel: true,
+          persistent: true,
+        }).onOk(() => {
+          let requestParams: any = {
+            method: 'DELETE',
+            url: (props.removeDataUrl ? props.removeDataUrl : props.getDataUrl) + '/' + table.selected[0][props.rowKey],
+          };
+          if (props.templateGridId) {
+            const data = <any>[];
+            table.selected.forEach((item) => {
+              data.push(item[props.rowKey]);
+            });
+            requestParams = {
+              method: 'POST',
+              url:
+                (props.removeDataUrl ? props.removeDataUrl : Environment.apiContextPath('api/jdbc/delete')) + '/' + props.templateGridId + '/' + props.rowKey,
+              data: data,
+            };
+          }
+          axios(requestParams)
+            .then((resp) => {
+              table.selected = [];
+              NotifyManager.info('操作成功');
+              onRequest({ pagination: table.pagination });
+            })
+            .catch((error) => {
+              console.info('error====', error);
+              NotifyManager.error('操作失败');
+            });
+        });
+      }
+    },
+  },
+  view: {
+    name: ButtonEnum.view,
+    icon: IconEnum.查看,
+    label: '查看',
+    enableIf: (selected) => {
+      if (selected && selected.length > 0) {
+        return true;
+      }
+      return false;
+    },
+    click: (selected, context) => {
+      if (!table.selected || table.selected.length <= 0) {
+        NotifyManager.warn('请选择要查看的记录');
+      } else {
+        viewInfo.infoArray = <any>[];
+        if (props.view.infoPanel.fields && props.view.infoPanel.fields.length > 0) {
+          for (let item of props.view.infoPanel.fields) {
+            if (item.format) {
+              viewInfo.infoArray.push({ label: item.label, value: item.format(table.selected[0][item.name]) });
+            } else {
+              let value = null;
+              if (tableColumnsMap.get(item.name) && tableColumnsMap.get(item.name).format) {
+                value = tableColumnsMap.get(item.name).format(table.selected[0][item.name]);
+              } else {
+                value = table.selected[0][item.name];
+              }
+              viewInfo.infoArray.push({ label: item.label, value: value });
+            }
+          }
+        } else {
+          for (let item of tableColumnsMap) {
+            if (item[1].format) {
+              viewInfo.infoArray.push({ label: item[1].label, value: item[1].format(table.selected[0][item[0]]) });
+            } else {
+              viewInfo.infoArray.push({ label: item[1].label, value: table.selected[0][item[0]] });
+            }
+          }
+        }
+        drawerRef.value.show();
+      }
+    },
+  },
+  export: {
+    name: ButtonEnum.export,
+    icon: 'file_download',
+    label: '导出',
+    click: (selected, context) => {
+      const content = [props.columns.map((col) => wrapCsvValue(col.label))]
+        .concat(
+          table.rows.map((row) =>
+            props.columns
+              .map((col) => wrapCsvValue(typeof col.field === 'function' ? col.field(row) : row[col.field === void 0 ? col.name : col.field], col.format, row))
+              .join(','),
+          ),
+        )
+        .join('\r\n');
+
+      const status = exportFile('table-export.csv', content, {
+        encoding: 'utf-8',
+        mimeType: 'text/csv',
+        byteOrderMark: '\uFEFF', // 解决乱码问题
+      });
+
+      if (status !== true) {
+        NotifyManager.error('导出失败');
+      }
+    },
+  },
+};
+
+// 处理toobar
+const { buttons, ...other } = props.toolbar;
+const buttons_ = <any>[];
+const handleChildrenBtn = (arr) => {
+  const tempArr = <any>[];
+  for (let i = 0; i < arr.length; i++) {
+    const btn = arr[i];
+    if (Array.isArray(btn) && btn.length > 0) {
+      const handleResult = handleChildrenBtn(btn);
+      if (handleResult && handleResult.length > 0) {
+        tempArr.push(handleResult);
+      }
+    } else if (typeof btn === 'string' && buttonObj[btn]) {
+      tempArr.push(buttonObj[btn]);
+    } else if (typeof btn === 'object' && btn.extend && buttonObj[btn.extend]) {
+      tempArr.push({ ...buttonObj[btn.extend], ...btn, _click: buttonObj[btn.extend].click });
+    } else {
+      tempArr.push(btn);
+    }
+  }
+  return tempArr;
+};
+buttons.forEach((btn, index) => {
+  if (typeof btn === 'string' && buttonObj[btn]) {
+    buttons_.push(buttonObj[btn]);
+  } else if (Array.isArray(btn) && btn.length > 0) {
+    buttons_.push(handleChildrenBtn(btn));
+  } else if (typeof btn === 'object' && btn.extend && buttonObj[btn.extend]) {
+    // 继承内置按钮
+    buttons_.push({ ...buttonObj[btn.extend], ...btn, _click: buttonObj[btn.extend].click });
+  } else {
+    buttons_.push(btn);
+  }
+});
+const toolbar_ = { ...other, buttons: buttons_ };
+
+const extractTableColumns = extractTableColumnsProps(props);
+// 多表头插槽传入的 props 处理
+const titleScopeHandler = (column: any, scope: any) => {
+  if (extractTableColumns && extractTableColumns.length > 0) {
+    const i = extractTableColumns.findIndex((item) => item.name === column.name);
+    if (i > -1) {
+      return scope;
+    }
+  }
+  return undefined;
+};
+
+const table = reactive({
+  selected: <any>[],
+  headerCellHeight: props.columnTitleDense || attrs.dense ? 24 : 48,
+  bodyCellHeight: attrs.dense ? 24 : 48,
+  noDataLabel: '没有可用数据',
+  loading: false,
+  loadingLabel: '数据加载中',
+  queryFormFields: [],
+  moreQueryStatus: false,
+  pagination: {
+    config: {
+      boundaryLinks: true, // 显示边界按钮链接
+      boundaryNumbers: false, // 始终显示第一页和最后一页按钮（如果不使用“输入”）
+      directionLinks: false, // 显示方向按钮
+      ellipses: false, // 页面可用时显示省略号
+      maxPages: 5, // 一次显示的最大页面链接数；0表示无限
+    },
+    sortBy: props.tablePagination.sortBy ? props.tablePagination.sortBy : '',
+    descending: props.tablePagination.descending ? props.tablePagination.descending : false,
+    reqPageStart: Object.hasOwnProperty.call(props.tablePagination, 'reqPageStart') ? props.tablePagination.reqPageStart : 1,
+    page: 1,
+    rowsPerPage: props.tablePagination.rowsPerPage ? props.tablePagination.rowsPerPage : 0,
+    rowsNumber: 10,
+    rowsPerPageOptions: [5, 10, 20, 50, 100],
+  },
+  rows: <any>[],
+  // 表格响应式高宽
+  refHeightWidth: {
+    yLocation: 0, // 表格当前所在Y轴位置
+    topHeight: 0, // 表格当前top区域高度（表格列头上方区域）
+    bottomHeight: 0, // 表格当前bottom区域高度（无可用数据、分页那块区域）
+    middleWidth: 0, // 表格当前middle区域宽度（表格列头及数据行区域）
+    middleScrollWidth: 0, // 表格出现滚动条时的宽度，若无滚动条则与 middleWidth 一致
+    middleHeight: 0, // 表格当前middle区域高度(表格列头及数据行区域)
+    columnHeadHeight: 0, // 表格当前列头高度
+    tableTitleWidth: 0, // 当前表格title宽度
+  },
+  inFullscreen: false, // 表格当前是否为全屏模式
+});
+
+const dialog = reactive({
+  dialogTitle: '新增',
+  dialogButtons: [
+    {
+      icon: IconEnum.提交,
+      label: '提交',
+      loading: false,
+      click: () => {
+        save();
+      },
+    },
+  ],
+});
+
+const viewInfo = reactive({
+  infoArray: <any>[],
+});
+
+// 多行列标题相关变量
+const columnTitleState = reactive({
+  columnTitleRowNum: 1, // 多行列标题总行数
+  columnTitleArr: <any>[], // 多行列标题集合
+});
+// 多行列标题的处理类型
+type MoreColumnTitleType = {
+  name: string; // 列模型的name
+  label: string; // 列模型的label
+  parentLevel: number; // 父层级数
+  childrenLevel: number; // 子层级数
+  rowspan: number; // 跨行数
+  colspan: number; // 跨列数
+  rowIndex: number; // 列模型所处的行下标
+  style: any; // 列模型配置的内嵌样式
+  classes: any; // 列模型配置的 classes
+  parents: any; // 列模型的父name集合
+};
+// 多行列标题的记录 map
+const moreColumnTitleMap = new Map<string, MoreColumnTitleType>();
+const allColumnMap = new Map();
+
+// 将所有列转换到 map 中
+const columnToMap = (column: any) => {
+  if (column && column.childrenColumns && column.childrenColumns.length > 0) {
+    allColumnMap.set(column.name, column);
+    moreColumnTitleMap.set(column.name, {
+      name: column.name,
+      label: column.label,
+      parentLevel: 0,
+      childrenLevel: 0,
+      rowspan: 0,
+      colspan: 0,
+      rowIndex: 0,
+      style: column.style,
+      classes: column.classes,
+      parents: [],
+    });
+    column.childrenColumns.forEach((item) => {
+      columnToMap(item);
+    });
+  } else {
+    allColumnMap.set(column.name, column);
+    moreColumnTitleMap.set(column.name, {
+      name: column.name,
+      label: column.label,
+      parentLevel: 0,
+      childrenLevel: 0,
+      rowspan: 0,
+      colspan: 0,
+      rowIndex: 0,
+      style: column.style,
+      classes: column.classes,
+      parents: [],
+    });
+  }
+};
+let tmpChildrenLevel = 0;
+let tmpColspan = 0;
+const getChildrenLevel = (column) => {
+  if (column && column.childrenColumns && column.childrenColumns.length > 0) {
+    tmpChildrenLevel += 1;
+    column.childrenColumns.forEach((item) => {
+      getChildrenLevel(item);
+    });
+  } else if (column) {
+    tmpColspan += 1;
+  }
+};
+
+// 根据子找所有父,返回值不包含查找的对象
+function findParents(arrData: any, name: any) {
+  if (arrData.length == 0) return;
+  for (let i = 0; i < arrData.length; i++) {
+    if (arrData[i].name == name) {
+      return [];
+    } else {
+      if (arrData[i].childrenColumns) {
+        const res = findParents(arrData[i].childrenColumns, name);
+        if (res !== undefined) {
+          return res.concat(arrData[i].name).reverse();
+        }
+      }
+    }
+  }
+}
+
+const handlerMoreRowColumnTitle = () => {
+  props.columns.forEach((tableColumn: any) => {
+    columnToMap(tableColumn);
+  });
+  let maxColumnChildrenLevel = 0;
+  for (let key of allColumnMap.keys()) {
+    // 处理列的 childrenLevel
+    getChildrenLevel(allColumnMap.get(key));
+    moreColumnTitleMap.get(key)!.childrenLevel = tmpChildrenLevel;
+    if (tmpChildrenLevel > 0 && tmpChildrenLevel > maxColumnChildrenLevel) {
+      maxColumnChildrenLevel = tmpChildrenLevel;
+    }
+    tmpChildrenLevel = 0;
+    // 处理列的 colspan
+    moreColumnTitleMap.get(key)!.colspan = tmpColspan;
+    tmpColspan = 0;
+
+    // 处理列的 parent
+    const parent = findParents(props.columns, key);
+    moreColumnTitleMap.get(key)!.parents = parent;
+
+    // 处理列的 parentLevel
+    moreColumnTitleMap.get(key)!.parentLevel = parent.length;
+
+    // 处理列的 rowIndex
+    moreColumnTitleMap.get(key)!.rowIndex = parent.length;
+  }
+  if (maxColumnChildrenLevel > 0) {
+    // 更改列头总行数 = 最大子层级数 + 1
+    columnTitleState.columnTitleRowNum = maxColumnChildrenLevel + 1;
+  }
+
+  const map = new Map<number, [any]>();
+  for (let key of moreColumnTitleMap.keys()) {
+    const value: any = moreColumnTitleMap.get(key);
+    // 得到列头总行数后处理列的 rowspan
+    if (value.parentLevel === 0 && value.childrenLevel === 0) {
+      value.rowspan = columnTitleState.columnTitleRowNum;
+    } else if (value.parentLevel === 0) {
+      value.rowspan = 1;
+    } else {
+      // 总行数 - 父层级数 - 子层级数
+      value.rowspan = columnTitleState.columnTitleRowNum - value.parentLevel - value.childrenLevel;
+    }
+    if (map.has(value.rowIndex)) {
+      (map.get(value.rowIndex) as any).push(value);
+    } else {
+      map.set(value.rowIndex, [value]);
+    }
+  }
+  const arr = Array.from(map);
+
+  arr.sort((a, b) => a[0] - b[0]);
+  arr.forEach((item) => {
+    columnTitleState.columnTitleArr.push(item[1]);
+  });
+};
+
+const tableHeightComputed = computed(() => {
+  // 浏览器可视区域高度
+  const screenHeight = $q.screen.height;
+  // 系统底部高度（一般用来显示XX版权所有那一层）
+  const footerHeight = gc.theme.footer.enable ? gc.theme.footer.height : 0;
+  // 主面板下边距
+  const mainPaddingBottom = gc.theme.main.paddingBottom || 0;
+  // 主面板容器下边距
+  const mainContainerPaddingBottom = gc.theme.main.containerPaddingBottom || 0;
+  // 其他高度，边框，用户自定义留白等，默认 4px
+  const otherHeight = props.spaceHeight || 4;
+  const resultHeight =
+    screenHeight -
+    table.refHeightWidth.yLocation -
+    (table.refHeightWidth.topHeight || 0) -
+    (table.refHeightWidth.bottomHeight || 0) -
+    footerHeight -
+    mainPaddingBottom -
+    mainContainerPaddingBottom -
+    otherHeight;
+  if ((table.rows && table.rows.length > 0) || attrs.hideBottom) {
+    return {
+      height: props.height > 0 ? props.height + 'px' : resultHeight + 'px',
+    };
+  } else {
+    return {
+      height: table.refHeightWidth.middleHeight + 'px',
+    };
+  }
+});
+
+const noDataBottomHeightComputed = computed(() => {
+  // 浏览器可视区域高度
+  const screenHeight = $q.screen.height;
+  // 系统底部高度（一般用来显示XX版权所有那一层）
+  const footerHeight = gc.theme.footer.enable ? gc.theme.footer.height : 0;
+  // 其他高度，边框，用户自定义留白等，默认 4px
+  const otherHeight = props.spaceHeight || 4;
+  // 主面板下边距
+  const mainPaddingBottom = gc.theme.main.paddingBottom || 0;
+  // 主面板容器下边距
+  const mainContainerPaddingBottom = gc.theme.main.containerPaddingBottom || 0;
+  const resultHeight =
+    screenHeight -
+    table.refHeightWidth.yLocation -
+    table.refHeightWidth.topHeight -
+    table.refHeightWidth.middleHeight -
+    mainPaddingBottom -
+    mainContainerPaddingBottom -
+    footerHeight -
+    otherHeight;
+  if (table.rows && table.rows.length > 0) {
+    return '0px';
+  } else {
+    return table.inFullscreen ? resultHeight + 'px' : props.height > 0 ? props.height + 'px' : resultHeight + 'px';
+  }
+});
+
+// 表格进入全屏模式时所在Y轴会变成0，退出时也无法准确获得，最终导致出现滚动条，需要在进入全屏时记录Y轴位置。
+let tableY = 0;
+const tableFullscreenFun = (value) => {
+  table.inFullscreen = !table.inFullscreen;
+  if (value) {
+    tableY = table.refHeightWidth.yLocation;
+  } else {
+    table.refHeightWidth.yLocation = tableY;
+    tableY = 0;
+  }
+};
+
+const rowClick = (evt: any, row: any, index: any) => {
+  if (props.onRowClick) {
+    if (props.clickSelectedRow && (!attrs.selection || attrs.selection !== 'none')) {
+      rowClickFun(row);
+    }
+    emit('rowClick', evt, row, index);
+  } else {
+    rowClickFun(row);
+  }
+};
+const rowClickFun = (row: any) => {
+  // 设置单击表格行选中记录
+  if (!attrs.selection || attrs.selection === 'single') {
+    table.selected = [];
+    table.selected.push(row);
+  } else if (attrs.selection && attrs.selection === 'multiple') {
+    table.selected.push(row);
+  }
+};
+const rowDbClick = (evt, row, index) => {
+  if (props.onRowDbClick) {
+    emit('rowDbClick', evt, row, index);
+  } else {
+    onView();
+  }
+};
+
+const onResize = () => {
+  handlerQueryFormShowField();
+  if (tableRef.value) {
+    table.refHeightWidth.yLocation = tableRef.value.$el.getBoundingClientRect().y;
+    table.refHeightWidth.topHeight = tableRef.value.$el.getElementsByClassName('q-table__top')[0]?.clientHeight;
+    table.refHeightWidth.middleWidth = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.clientWidth;
+    table.refHeightWidth.middleScrollWidth = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.scrollWidth;
+    table.refHeightWidth.columnHeadHeight = tableRef.value.$el.getElementsByTagName('thead')[0]?.clientHeight;
+    // 判断是否有数据，没数据修改 middleHeight
+    if ((table.rows && table.rows.length > 0) || attrs.hideBottom) {
+      table.refHeightWidth.middleHeight = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.clientHeight;
+    } else {
+      let scrollHeight = 0;
+      if (table.refHeightWidth.middleScrollWidth - table.refHeightWidth.middleWidth > 0) {
+        scrollHeight = 15;
+      }
+      table.refHeightWidth.middleHeight = table.refHeightWidth.columnHeadHeight + scrollHeight;
+    }
+    table.refHeightWidth.tableTitleWidth = tableRef.value.$el.getElementsByClassName('_table-title')[0]?.clientWidth;
+  }
+};
+
+type CriteriaType = {
+  fieldName: string;
+  operator: OperatorTypeEnum;
+  value: any;
+};
+
+// 构建 criteria 查询
+const buildQueryCriterias = (reqParams) => {
+  const urlSearchParams = new URLSearchParams(reqParams);
+  if (queryFormRef.value) {
+    const queryFormData = queryFormRef.value.getData();
+    Object.keys(queryFormData).forEach((item) => {
+      if (!isEmpty(queryFormData[item])) {
+        const criteria = <CriteriaType>{
+          fieldName: item,
+          operator: queryFormFieldsMap.get(item)?.hasOwnProperty.call('queryOperator') ? queryFormFieldsMap.get(item).queryOperator : OperatorTypeEnum.contains,
+          value: queryFormData[item],
+        };
+        urlSearchParams.append('criteria', JSON.stringify(criteria));
+      }
+    });
+  }
+  return urlSearchParams;
+};
+// 构建普通实体查询
+const buildQueryEntity = (reqParams) => {
+  const urlSearchParams = new URLSearchParams(reqParams);
+  if (queryFormRef.value) {
+    const queryFormData = queryFormRef.value.getData();
+    Object.keys(queryFormData).forEach((item) => {
+      if (!isEmpty(queryFormData[item])) {
+        urlSearchParams.append(item, queryFormData[item]);
+      }
+    });
+  }
+  return urlSearchParams;
+};
+
+const pageChange = (value) => {
+  table.pagination.page = value;
+  onRequest(table);
+};
+const requestHandle = async (ops) => {
+  const reqParams: any = {};
+  if (props.tablePagination.rowsPerPage) {
+    reqParams.page = ops.pagination.page;
+    reqParams.size = ops.pagination.rowsPerPage;
+  }
+  if (ops.pagination.sortBy && ops.pagination.sortBy !== '') {
+    if (ops.pagination.descending) {
+      reqParams.sortBy = props.templateGridId ? ops.pagination.sortBy : '-' + ops.pagination.sortBy;
+      reqParams.descending = ops.pagination.descending;
+    } else {
+      reqParams.sortBy = ops.pagination.sortBy;
+    }
+  }
+
+  if (props.templateGridId) {
+    // 根据表格模板进行数据库表查询
+    reqParams.templateGridId = props.templateGridId;
+    let queryFormDataJson = {};
+    if (queryFormRef.value) {
+      const queryFormData = queryFormRef.value.getData();
+      Object.keys(queryFormData).forEach((item) => {
+        if (!isEmpty(queryFormData[item])) {
+          queryFormDataJson[item] = queryFormData[item];
+        }
+      });
+    }
+    emit('requestDataBefore', queryFormDataJson, (handlerRequestParams: URLSearchParams | any) => {
+      queryFormDataJson = handlerRequestParams;
+    });
+    reqParams.params = JSON.stringify(queryFormDataJson);
+    const resp = await axios.post(props.getDataUrl || Environment.apiContextPath('api/jdbc/list'), reqParams).catch((error) => {
+      table.loading = false;
+    });
+    return resp;
+  } else {
+    // 后台 RestCrudController 查询
+    // TODO 当前后端 criteria 查询尚未开发完成，只能使用普通实体查询，待后续开发完成替换即可。
+    let urlSearchParams = buildQueryCriterias(reqParams);
+    // const urlSearchParams = buildQueryEntity(reqParams);
+    emit('requestDataBefore', urlSearchParams, (handlerRequestParams: URLSearchParams | any) => {
+      urlSearchParams = handlerRequestParams;
+    });
+    const resp = await axios.get(props.getDataUrl, { params: urlSearchParams }).catch((error) => {
+      console.info('error-------------', error);
+      table.loading = false;
+    });
+    return resp;
+  }
+};
+const onRequest = async (ops: any) => {
+  table.loading = true;
+  const resp: any = await requestHandle(ops);
+  table.loading = false;
+  // const result = platformRequestResultHandle($q, resp.data);
+  if (resp && resp.data) {
+    const responseData = resp.data;
+    if (props.tablePagination.rowsPerPage) {
+      table.pagination.page = table.pagination.reqPageStart === 0 ? responseData.number + 1 : responseData.number;
+      table.pagination.rowsPerPage = responseData.size;
+    }
+    table.pagination.rowsNumber = responseData.totalElements;
+    table.pagination.sortBy = ops.pagination.sortBy;
+    table.pagination.descending = ops.pagination.descending;
+    table.rows = responseData.content;
+  }
+  stickyHeaderColumn();
+};
+
+const save = async () => {
+  dialog.dialogButtons[0].loading = true;
+  const formStatus = dialogFormRef.value.getStatus();
+  const validate = await dialogFormRef.value.validate();
+  if (validate) {
+    let dialogFormData = dialogFormRef.value.getData();
+    if (table.selected && table.selected.length > 0) {
+      dialogFormData[props.rowKey] = table.selected[0][props.rowKey];
+    }
+    let submitFlag = true;
+    emit('addEditDataSubmitBefore', dialogFormData, (handlerRequestParams: any | boolean) => {
+      if (typeof handlerRequestParams === 'boolean' && handlerRequestParams === false) {
+        submitFlag = false;
+      } else {
+        dialogFormData = handlerRequestParams;
+      }
+    });
+    if (submitFlag) {
+      let requestParams = {
+        method: formStatus === PageStatusEnum.新增 ? 'POST' : 'PUT',
+        headers: { 'content-type': 'application/json;charset=utf-8;' },
+        data: dialogFormData,
+        url:
+          formStatus === PageStatusEnum.新增
+            ? props.addDataUrl
+              ? props.addDataUrl
+              : props.getDataUrl
+            : (props.editDataUrl ? props.editDataUrl : props.getDataUrl) + '/' + table.selected[0][props.rowKey],
+      };
+      if (props.templateGridId) {
+        requestParams = {
+          method: 'POST',
+          headers: { 'content-type': 'application/json;charset=utf-8;' },
+          data: dialogFormData,
+          url:
+            formStatus === PageStatusEnum.新增
+              ? (props.addDataUrl ? props.addDataUrl : Environment.apiContextPath('api/jdbc/add')) + '/' + props.templateGridId
+              : (props.editDataUrl ? props.editDataUrl : Environment.apiContextPath('api/jdbc/edit')) +
+                '/' +
+                props.templateGridId +
+                '/' +
+                props.rowKey +
+                '/' +
+                table.selected[0][props.rowKey],
+        };
+      }
+      dialog.dialogButtons[0].loading = false;
+      axios(requestParams)
+        .then((resp) => {
+          dialog.dialogButtons[0].loading = false;
+          emit('addEditDataSubmitAfter', resp.data);
+          NotifyManager.info('操作成功');
+          dialogRef.value.hide();
+          onRequest({ pagination: table.pagination });
+          table.selected = [];
+        })
+        .catch((error) => {
+          console.info('error====', error);
+          dialog.dialogButtons[0].loading = false;
+          NotifyManager.error('操作失败');
+        });
+    } else {
+      dialog.dialogButtons[0].loading = false;
+    }
+  } else {
+    dialog.dialogButtons[0].loading = false;
+  }
+};
+const onView = () => {
+  if (!table.selected || table.selected.length <= 0) {
+    NotifyManager.warn('请选择要查看的数据');
+  } else {
+    if (drawerRef.value) {
+      viewInfo.infoArray = <any>[];
+      for (let item of tableColumnsMap) {
+        if (item[1].format) {
+          viewInfo.infoArray.push({ label: item[1].label, value: item[1].format(table.selected[0][item[0]]) });
+        } else {
+          viewInfo.infoArray.push({ label: item[1].label, value: table.selected[0][item[0]] });
+        }
+      }
+      drawerRef.value.show();
+    }
+  }
+};
+
+const wrapCsvValue = (val, formatFn, row) => {
+  let formatted = formatFn !== void 0 ? formatFn(val, row) : val;
+  formatted = formatted === void 0 || formatted === null ? '' : String(formatted);
+  formatted = formatted.split('"').join('""');
+  /**
+   * Excel accepts \n and \r in strings, but some other CSV parsers do not
+   * Uncomment the next two lines to escape new lines
+   */
+  // .split('\n').join('\\n')
+  // .split('\r').join('\\r')
+  return `"${formatted}"`;
+};
+
+// 替换全部行
+const replaceRows = (rows: any) => {
+  table.rows = rows;
+  stickyHeaderColumn();
+};
+// 替换单行数据
+const replaceRow = (row) => {
+  for (let i = 0; i < table.rows.length; i++) {
+    if (row[props.rowKey] === table.rows[i][props.rowKey]) {
+      table.rows[i] = { ...table.rows[i], ...row };
+      break;
+    }
+  }
+};
+// 删除选中数据
+const deleteRows = (rows) => {
+  rows.forEach((item) => {
+    table.rows.splice(
+      table.rows.findIndex((v) => {
+        return v[props.rowKey] === item[props.rowKey];
+      }),
+      1,
+    );
+  });
+  table.selected.splice(0, table.selected.length);
+  stickyHeaderColumn();
+};
+// 新增一行数据
+const addRow = (row, index) => {
+  if (!index || index >= table.rows.length) {
+    table.rows.push(row);
+  } else {
+    table.rows.splice(index, 0, row);
+  }
+  stickyHeaderColumn();
+};
+
+const getSelectedRows = () => {
+  return table.selected;
+};
+
+const getQueryFormRef = () => {
+  return queryFormRef;
+};
+const getAddEditFormRef = () => {
+  return dialogFormRef;
+};
+
+const getRows = () => {
+  return toRaw(table.rows);
+};
+
+const refresh = () => {
+  onRequest({
+    pagination: table.pagination,
+  });
+};
+
+const stickyHeaderColumn = () => {
+  setTimeout(() => {
+    // 延迟处理锁定列及表格宽高的获取
+    if (tableRef.value) {
+      table.refHeightWidth.yLocation = tableRef.value.$el.getBoundingClientRect()?.y;
+      table.refHeightWidth.topHeight = tableRef.value.$el.getElementsByClassName('q-table__top')[0]?.clientHeight;
+      table.refHeightWidth.bottomHeight = tableRef.value.$el.getElementsByClassName('q-table__bottom')[0]?.clientHeight;
+      table.refHeightWidth.middleWidth = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.clientWidth;
+      table.refHeightWidth.middleScrollWidth = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.scrollWidth;
+      table.refHeightWidth.columnHeadHeight = tableRef.value.$el.getElementsByTagName('thead')[0]?.clientHeight;
+      table.refHeightWidth.tableTitleWidth = tableRef.value.$el.getElementsByClassName('_table-title')[0]?.clientWidth;
+      // 判断是否有数据，没数据修改 middleHeight
+      if ((table.rows && table.rows.length > 0) || attrs.hideBottom) {
+        table.refHeightWidth.middleHeight = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.clientHeight;
+      } else {
+        let scrollHeight = 0;
+        if (table.refHeightWidth.middleScrollWidth - table.refHeightWidth.middleWidth > 0) {
+          scrollHeight = 15;
+        }
+        table.refHeightWidth.middleHeight = table.refHeightWidth.columnHeadHeight + scrollHeight;
+      }
+
+      const tableDom = tableRef.value.$el.getElementsByTagName('table')[0];
+      if (props.leftColumnStickyNumber > 0) {
+        if (columnTitleState.columnTitleRowNum > 1) {
+          const theadDom = tableDom.getElementsByTagName('thead')[0];
+          const theadTrDom = theadDom.getElementsByTagName('tr');
+          tableDom.style.setProperty('--columnWidth' + '-' + 0 + '-' + 0, 0 + 'px');
+          for (let i = 0; i < theadDom.getElementsByTagName('tr').length; i++) {
+            const theadThDom = theadTrDom[i].getElementsByTagName('th');
+            for (let k = 0; k < theadThDom.length; k++) {
+              tableDom.style.setProperty('--columnWidth' + '-' + (i + 1) + '-' + (k + 1), theadThDom[k].offsetWidth + 'px');
+            }
+          }
+        }
+
+        let column1Width = tableDom.getElementsByTagName('td')[0]?.offsetWidth;
+        let column2Width = tableDom.getElementsByTagName('td')[1]?.offsetWidth;
+        let column3Width = tableDom.getElementsByTagName('td')[2]?.offsetWidth;
+        let column4Width = tableDom.getElementsByTagName('td')[3]?.offsetWidth;
+        let column5Width = tableDom.getElementsByTagName('td')[4]?.offsetWidth;
+        let column6Width = tableDom.getElementsByTagName('td')[5]?.offsetWidth;
+        let column7Width = tableDom.getElementsByTagName('td')[6]?.offsetWidth;
+        let column8Width = tableDom.getElementsByTagName('td')[7]?.offsetWidth;
+        let column9Width = tableDom.getElementsByTagName('td')[8]?.offsetWidth;
+
+        tableDom.style.setProperty('--column1Width', column1Width + 'px');
+        tableDom.style.setProperty('--column2Width', column1Width + column2Width + 'px');
+        tableDom.style.setProperty('--column3Width', column1Width + column2Width + column3Width + 'px');
+        tableDom.style.setProperty('--column4Width', column1Width + column2Width + column3Width + column4Width + 'px');
+        tableDom.style.setProperty('--column5Width', column1Width + column2Width + column3Width + column4Width + column5Width + 'px');
+        tableDom.style.setProperty('--column6Width', column1Width + column2Width + column3Width + column4Width + column5Width + column6Width + 'px');
+        tableDom.style.setProperty(
+          '--column7Width',
+          column1Width + column2Width + column3Width + column4Width + column5Width + column6Width + column7Width + 'px',
+        );
+        tableDom.style.setProperty(
+          '--column8Width',
+          column1Width + column2Width + column3Width + column4Width + column5Width + column6Width + column7Width + column8Width + 'px',
+        );
+        tableDom.style.setProperty(
+          '--column9Width',
+          column1Width + column2Width + column3Width + column4Width + column5Width + column6Width + column7Width + column8Width + column9Width + 'px',
+        );
+      }
+      const titleTotalHeight = tableDom.getElementsByTagName('thead')[0].offsetHeight;
+      const titleRowHeight = titleTotalHeight / columnTitleState.columnTitleRowNum;
+      if (columnTitleState.columnTitleRowNum > 1) {
+        const row1Height = titleRowHeight * 1;
+        const row2Height = titleRowHeight * 2;
+        const row3Height = titleRowHeight * 3;
+        const row4Height = titleRowHeight * 4;
+        const row5Height = titleRowHeight * 5;
+        const row6Height = titleRowHeight * 6;
+        const row7Height = titleRowHeight * 7;
+        const row8Height = titleRowHeight * 8;
+        const row9Height = titleRowHeight * 9;
+        tableDom.style.setProperty('--row1Height', row1Height + 'px');
+        tableDom.style.setProperty('--row2Height', row2Height + 'px');
+        tableDom.style.setProperty('--row3Height', row3Height + 'px');
+        tableDom.style.setProperty('--row4Height', row4Height + 'px');
+        tableDom.style.setProperty('--row5Height', row5Height + 'px');
+        tableDom.style.setProperty('--row6Height', row6Height + 'px');
+        tableDom.style.setProperty('--row7Height', row7Height + 'px');
+        tableDom.style.setProperty('--row8Height', row8Height + 'px');
+        tableDom.style.setProperty('--row9Height', row9Height + 'px');
+      }
+    }
+  }, 500);
+
+  tableRef.value.$el.getElementsByTagName('table')[0].style.setProperty('--tableHeadBgColor', tableHeadBgColor);
+  tableRef.value.$el.getElementsByTagName('table')[0].style.setProperty('--stickyBgColor', stickyBgColor);
+  tableRef.value.$el.getElementsByTagName('table')[0].style.setProperty('--tableBorderColor', tableBorderColor);
+  tableRef.value.$el.getElementsByTagName('table')[0].style.setProperty('--tableColumnTitleHeight', table.headerCellHeight + 'px');
+};
+
+const excludeColumnNum = computed(() => {
+  let num = 0;
+  if (!attrs.selection || attrs.selection !== 'none') {
+    num += 1;
+  }
+  if (props.showSortNo) {
+    num += 1;
+  }
+  return num;
+});
+
+// 获取多行的列标题下标
+const getMoreRowColumnTitleIndex = (name: any) => {
+  let trIndex = -1;
+  let tdIndex = -1;
+  for (let tr = 0; tr < columnTitleState.columnTitleArr.length; tr++) {
+    const tdArr = columnTitleState.columnTitleArr[tr];
+    let flag = false;
+    for (let td = 0; td < tdArr.length; td++) {
+      if (name === tdArr[td].name) {
+        trIndex = tr + 1;
+        tdIndex = td + 1;
+        flag = true;
+        break;
+      }
+    }
+    if (flag) {
+      break;
+    }
+  }
+  return { trIndex: trIndex, tdIndex: tdIndex };
+};
+
+const handlerStickyChildrenColumn = (item, columns) => {
+  columns.push(item);
+  if (item.childrenColumns && item.childrenColumns.length > 0) {
+    item.childrenColumns.forEach((children) => {
+      handlerStickyChildrenColumn(children, columns);
+    });
+  }
+};
+const getStickyColumn = () => {
+  const columns = props.columns.filter((item, index) => {
+    return index < props.leftColumnStickyNumber;
+  });
+  const arr = [];
+  columns.forEach((item) => {
+    handlerStickyChildrenColumn(item, arr);
+  });
+  return arr;
+};
+const stickyColumnArr = getStickyColumn();
+
+const moreColumnTitleTableSelectionStyle = computed(() => {
+  if ((!attrs.selection || attrs.selection !== 'none') && props.leftColumnStickyNumber > 0) {
+    return 'z-index: 3;position: sticky;left: 0px;';
+  }
+  return '';
+});
+const moreColumnTitleTableSortNoStyle = computed(() => {
+  if (props.showSortNo && props.leftColumnStickyNumber > 0) {
+    return 'z-index: 3;position: sticky;left: var(--columnWidth-1-1);';
+  }
+  return '';
+});
+
+const thStickyLastNameComputed = computed(() => {
+  let result = <any>[];
+  const lastColumn = getMoreRowColumnTitleIndex(stickyColumnArr[stickyColumnArr.length - 1].name);
+  if (lastColumn.trIndex === 1) {
+    // 多表头锁定列的结尾列如果行下标为1直接取最后一列
+    result = [stickyColumnArr[stickyColumnArr.length - 1]];
+  } else {
+    const map = new Map();
+    stickyColumnArr.forEach((item) => {
+      const trtdIndex = getMoreRowColumnTitleIndex(item.name);
+      if (map.has(trtdIndex.trIndex) && map.get(trtdIndex.trIndex)[0] < trtdIndex.tdIndex) {
+        map.set(trtdIndex.trIndex, [trtdIndex.tdIndex, item]);
+      } else if (!map.has(trtdIndex.trIndex)) {
+        map.set(trtdIndex.trIndex, [trtdIndex.tdIndex, item]);
+      }
+    });
+    for (let key of map.keys()) {
+      result.push(map.get(key)[1]);
+    }
+  }
+  return result;
+});
+
+const thStyleHandler = (c: any, scope: any) => {
+  let style = '';
+  if (!isEmpty(c.style)) {
+    if (c.style.substr(-1) !== ';') {
+      style = c.style + ';';
+    }
+    style = c.style;
+  }
+  if (
+    props.leftColumnStickyNumber > 0 &&
+    stickyColumnArr.findIndex((item: any) => {
+      return item.name === c.name;
+    }) > -1
+  ) {
+    const stickyThArr = <any>[];
+    const trtdIndex = getMoreRowColumnTitleIndex(c.name);
+    if (c.parents && c.parents.length > 0) {
+      // 存在父级节点，得到父级节点的列下标
+      // 找到parent相同且tdIndex小于其的一共多少列
+      for (let tr = 0; tr < trtdIndex.trIndex; tr++) {
+        const tdArr = columnTitleState.columnTitleArr[tr];
+        for (let td = 0; td < trtdIndex.tdIndex - 1; td++) {
+          if (tdArr[td].parents && tdArr[td].parents.length > 0) {
+            const result =
+              tdArr[td].parents.length === c.parents.length &&
+              tdArr[td].parents.every((a) => c.parents.some((b) => a === b)) &&
+              c.parents.every((_b) => tdArr[td].parents.some((_a) => _a === _b));
+            if (result) {
+              if (tr === 0) {
+                stickyThArr.push({ trIndex: tr + 1, tdIndex: td + excludeColumnNum.value + 1 });
+              } else {
+                stickyThArr.push({ trIndex: tr + 1, tdIndex: td + 1 });
+              }
+            }
+          }
+        }
+      }
+      c.parents.forEach((parent) => {
+        const parentTrtdIndex = getMoreRowColumnTitleIndex(parent);
+        if (moreColumnTitleMap.get(parent)!.parents && moreColumnTitleMap.get(parent)!.parents.length > 0) {
+          const tdArr = columnTitleState.columnTitleArr[parentTrtdIndex.trIndex - 1];
+          for (let td = 0; td < parentTrtdIndex.tdIndex - 1; td++) {
+            const result =
+              tdArr[td].parents.length === moreColumnTitleMap.get(parent)!.parents.length &&
+              tdArr[td].parents.every((a) => moreColumnTitleMap.get(parent)!.parents.some((b) => a === b)) &&
+              moreColumnTitleMap.get(parent)!.parents.every((_b) => tdArr[td].parents.some((_a) => _a === _b));
+            if (result) {
+              stickyThArr.push({ trIndex: parentTrtdIndex.trIndex, tdIndex: td + 1 });
+            }
+          }
+        } else {
+          const tdArr = columnTitleState.columnTitleArr[parentTrtdIndex.trIndex - 1];
+          for (let td = 0; td < parentTrtdIndex.tdIndex - 1; td++) {
+            if (
+              tdArr[td].parents &&
+              tdArr[td].parents.length > 0 &&
+              tdArr[td].parents.findIndex((item) => {
+                return item === parent;
+              }) > -1
+            ) {
+              stickyThArr.push({ trIndex: parentTrtdIndex.trIndex, tdIndex: td + excludeColumnNum.value + 1 });
+            } else {
+              stickyThArr.push({ trIndex: parentTrtdIndex.trIndex, tdIndex: td + excludeColumnNum.value + 1 });
+            }
+          }
+        }
+      });
+      if (trtdIndex.tdIndex === 1 && stickyThArr.length === 0) {
+        stickyThArr.push({ trIndex: 0, tdIndex: 0 });
+      }
+    } else {
+      if (trtdIndex.tdIndex === 1) {
+        if (excludeColumnNum.value === 2) {
+          return thStickyLastNameComputed.value.findIndex((item) => {
+            return item.name === c.name;
+          }) > -1
+            ? (style += 'z-index: 3;position: sticky;left: calc(var(--columnWidth-1-1) + var(--columnWidth-1-2));')
+            : (style += 'z-index: 3;position: sticky;left: calc(var(--columnWidth-1-1) + var(--columnWidth-1-2));');
+        } else if (excludeColumnNum.value === 1) {
+          return thStickyLastNameComputed.value.findIndex((item) => {
+            return item.name === c.name;
+          }) > -1
+            ? (style += 'z-index: 3;position: sticky;left: var(--columnWidth-1-1);')
+            : (style += 'z-index: 3;position: sticky;left: var(--columnWidth-1-1);');
+        } else {
+          return thStickyLastNameComputed.value.findIndex((item) => {
+            return item.name === c.name;
+          }) > -1
+            ? (style += 'z-index: 3;position: sticky;left: 0px;')
+            : (style += 'z-index: 3;position: sticky;left: 0px;');
+        }
+      } else {
+        for (let i = 1; i < trtdIndex.tdIndex; i++) {
+          stickyThArr.push({ trIndex: 1, tdIndex: i + excludeColumnNum.value });
+        }
+      }
+    }
+    if (excludeColumnNum.value === 2) {
+      stickyThArr.push({ trIndex: 1, tdIndex: 1 });
+      stickyThArr.push({ trIndex: 1, tdIndex: 2 });
+    } else if (excludeColumnNum.value === 1) {
+      stickyThArr.push({ trIndex: 1, tdIndex: 1 });
+    }
+    if (stickyThArr && stickyThArr.length > 0) {
+      let left = '';
+      stickyThArr.forEach((item) => {
+        left += '+ var(--columnWidth-' + item.trIndex + '-' + item.tdIndex + ') ';
+      });
+      if (left) {
+        style += 'z-index: 3;position: sticky;left: calc(' + left.substring(1) + ')' + ';';
+      }
+    }
+  }
+  return style;
+};
+
+const tableClassComputed = computed(() => {
+  const classArr = <string[]>['sticky-header-column-table'];
+  if (props.leftColumnStickyNumber && props.leftColumnStickyNumber > 0) {
+    if (columnTitleState.columnTitleRowNum > 1) {
+      // 存在多行列头
+      const stickyColumn = props.columns.filter((item, index) => {
+        return index < props.leftColumnStickyNumber;
+      });
+      let tdNum = excludeColumnNum.value;
+      stickyColumn.forEach((item: any, index: number) => {
+        tdNum += moreColumnTitleMap.get(item.name)!.colspan;
+      });
+      // 处理表格数据列锁定
+      if (tdNum > 0) {
+        for (let n = 1; n <= tdNum; n++) {
+          classArr.push('sticky-header-column-table-td-' + n);
+        }
+      }
+    } else {
+      // 不存在多行列头
+      if (excludeColumnNum.value === 2) {
+        classArr.push('sticky-header-column-table-tr-1' + '-' + 1);
+        classArr.push('sticky-header-column-table-tr-1' + '-' + 2);
+        classArr.push('sticky-header-column-table-td-' + 1);
+        classArr.push('sticky-header-column-table-td-' + 2);
+      } else if (excludeColumnNum.value === 1) {
+        classArr.push('sticky-header-column-table-tr-1' + '-' + 1);
+        classArr.push('sticky-header-column-table-td-' + 1);
+      }
+      for (let i = 1; i <= props.leftColumnStickyNumber; i++) {
+        classArr.push('sticky-header-column-table-tr-1' + '-' + (i + excludeColumnNum.value));
+        classArr.push('sticky-header-column-table-td-' + (i + excludeColumnNum.value));
+      }
+    }
+  }
+  return classArr;
+});
+
+// 拖拽开始
+let dragRowIndex;
+const onDragStart = (e, scope) => {
+  dragRowIndex = scope.rowIndex;
+  e.dataTransfer.dropEffect = 'move';
+};
+const addDragTopStyle = (e) => {
+  if (e.target?.parentNode?.children) {
+    for (let i = 0; i < e.target.parentNode.children.length; i++) {
+      e.target.parentNode.children[i].style.borderTopWidth = '2px';
+      e.target.parentNode.children[i].style.borderTopStyle = 'dashed';
+      e.target.parentNode.children[i].style.borderTopColor = 'orange';
+    }
+  }
+};
+
+const removeDragTopStyle = (e) => {
+  if (e.target?.parentNode?.children) {
+    for (let i = 0; i < e.target.parentNode.children.length; i++) {
+      e.target.parentNode.children[i].style.borderTopWidth = '';
+      e.target.parentNode.children[i].style.borderTopStyle = '';
+      e.target.parentNode.children[i].style.borderTopColor = '';
+    }
+  }
+};
+const addDragBottomStyle = (e) => {
+  if (e.target?.parentNode?.children) {
+    for (let i = 0; i < e.target.parentNode.children.length; i++) {
+      e.target.parentNode.children[i].style.borderBottomWidth = '2px';
+      e.target.parentNode.children[i].style.borderBottomStyle = 'dashed';
+      e.target.parentNode.children[i].style.borderBottomColor = 'orange';
+    }
+  }
+};
+const removeDragBottomStyle = (e) => {
+  if (e.target?.parentNode?.children) {
+    for (let i = 0; i < e.target.parentNode.children.length; i++) {
+      e.target.parentNode.children[i].style.borderBottomWidth = '';
+      e.target.parentNode.children[i].style.borderBottomStyle = '';
+      e.target.parentNode.children[i].style.borderBottomColor = '';
+    }
+  }
+};
+// 拖拽至可放置区域触发
+const onDragEnter = (e, scope) => {
+  if (dragRowIndex !== scope.rowIndex && e.target.parentNode.parentNode.children.length === scope.rowIndex + 1) {
+    // 最后一行
+    addDragBottomStyle(e);
+  } else if (dragRowIndex !== scope.rowIndex) {
+    addDragTopStyle(e);
+  }
+};
+// 拖拽至不可放置区域触发
+const onDragLeave = (e) => {
+  removeDragTopStyle(e);
+  removeDragBottomStyle(e);
+};
+// 拖拽过程触发
+const onDragOver = (e, scope) => {
+  if (e.offsetY >= table.bodyCellHeight / 2 && dragRowIndex !== scope.rowIndex && e.target.parentNode.parentNode.children.length === scope.rowIndex + 1) {
+    removeDragTopStyle(e);
+    addDragBottomStyle(e);
+  } else if (e.offsetY < table.bodyCellHeight / 2 && dragRowIndex !== scope.rowIndex && e.target.parentNode.parentNode.children.length === scope.rowIndex + 1) {
+    removeDragBottomStyle(e);
+    addDragTopStyle(e);
+  }
+  e.preventDefault();
+};
+// 拖拽放置时触发
+const onDrop = (e, scope) => {
+  e.preventDefault();
+  if (dragRowIndex === scope.rowIndex) {
+    return;
+  }
+  const dragRow = table.rows[dragRowIndex];
+  if (e.offsetY < table.bodyCellHeight / 2 && dragRowIndex !== scope.rowIndex && e.target.parentNode.parentNode.children.length === scope.rowIndex + 1) {
+    table.rows.splice(dragRowIndex, 1);
+    table.rows.splice(scope.rowIndex - 1, 0, dragRow);
+  } else {
+    table.rows.splice(dragRowIndex, 1);
+    table.rows.splice(scope.rowIndex, 0, dragRow);
+  }
+  removeDragTopStyle(e);
+  removeDragBottomStyle(e);
+
+  emit('rowDragDropAfter');
+};
+// 处理查询form显示的字段
+const handlerQueryFormShowField = () => {
+  table.queryFormFields = [];
+  if (table.moreQueryStatus) {
+    props.queryForm.fields.forEach((item) => {
+      table.queryFormFields.push(item);
+    });
+  } else {
+    const rowColsNum = queryFormRef.value.getRowColsNum() * (props.queryForm.rowNum || 1);
+    let currRowColsNum = 0;
+    props.queryForm.fields.forEach((item) => {
+      if (item.hasOwnProperty('colspan')) {
+        currRowColsNum += item.colspan;
+      } else {
+        currRowColsNum += 1;
+      }
+      if (currRowColsNum <= rowColsNum) {
+        table.queryFormFields.push(item);
+      }
+    });
+  }
+};
+
+onMounted(() => {
+  if (extractTableColumns && extractTableColumns.length > props.columns.length) {
+    handlerMoreRowColumnTitle();
+  }
+  handlerQueryFormShowField();
+  if (props.autoLoadData) {
+    onRequest({
+      pagination: table.pagination,
+    });
+  } else {
+    stickyHeaderColumn();
+  }
+});
+
+defineExpose({
+  getSelectedRows,
+  getRows,
+  refresh,
+  replaceRows,
+  replaceRow,
+  deleteRows,
+  addRow,
+  getQueryFormRef,
+  getAddEditFormRef,
+});
+</script>
+
+<style scoped lang="css">
+:deep(.q-table th) {
+  border-left-width: 0px;
+  border-right-width: 1px;
+  border-top-width: 0px;
+  border-bottom-width: 1px;
+}
+:deep(.q-table td) {
+  border-left-width: 0px;
+  border-right-width: 1px;
+  border-top-width: 0px;
+  border-bottom-width: 1px;
+}
+
+.sticky-header-column-table thead tr {
+  height: var(--tableColumnTitleHeight);
+}
+
+/** 表格所有th固定、设置默认index、背景设置 */
+.sticky-header-column-table tr th {
+  position: sticky;
+  z-index: 2;
+  background: var(--tableHeadBgColor);
+}
+
+/** 固定表头后，修改top距离，第一行top为0，从第二行开始，每增加一行，top增加相应高度，由于紧凑模式与常规模式列头高度不一致，需要计算得出  */
+.sticky-header-column-table thead tr:first-child th {
+  top: 0;
+}
+.sticky-header-column-table thead tr:nth-child(2) th {
+  top: var(--row1Height);
+}
+.sticky-header-column-table thead tr:nth-child(3) th {
+  top: var(--row2Height);
+}
+.sticky-header-column-table thead tr:nth-child(4) th {
+  top: var(--row3Height);
+}
+.sticky-header-column-table thead tr:nth-child(5) th {
+  top: var(--row4Height);
+}
+.sticky-header-column-table thead tr:nth-child(6) th {
+  top: var(--row5Height);
+}
+.sticky-header-column-table thead tr:nth-child(7) th {
+  top: var(--row6Height);
+}
+.sticky-header-column-table thead tr:nth-child(8) th {
+  top: var(--row7Height);
+}
+.sticky-header-column-table thead tr:nth-child(9) th {
+  top: var(--row8Height);
+}
+.sticky-header-column-table thead tr:nth-child(10) th {
+  top: var(--row9Height);
+}
+
+.sticky-header-column-table-tr-1-1 tr:first-child th:first-child {
+  z-index: 3;
+  position: sticky;
+  left: 0px;
+}
+.sticky-header-column-table-tr-1-2 tr:first-child th:nth-child(2) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column1Width);
+}
+.sticky-header-column-table-tr-1-2-rb tr:first-child th:nth-child(2) {
+  border-right-width: 1px;
+}
+.sticky-header-column-table-tr-1-3 tr:first-child th:nth-child(3) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column2Width);
+}
+.sticky-header-column-table-tr-1-4 tr:first-child th:nth-child(4) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column3Width);
+}
+.sticky-header-column-table-tr-1-5 tr:first-child th:nth-child(5) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column4Width);
+}
+.sticky-header-column-table-tr-1-6 tr:first-child th:nth-child(6) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column5Width);
+}
+.sticky-header-column-table-tr-1-7 tr:first-child th:nth-child(7) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column6Width);
+}
+.sticky-header-column-table-tr-1-8 tr:first-child th:nth-child(8) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column7Width);
+}
+.sticky-header-column-table-tr-1-9 tr:first-child th:nth-child(9) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column8Width);
+}
+.sticky-header-column-table-tr-1-10 tr:first-child th:nth-child(10) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column9Width);
+}
+
+.sticky-header-column-table-tr-2-1 tr:nth-child(2) th:first-child {
+  z-index: 3;
+  position: sticky;
+  left: 0px;
+}
+.sticky-header-column-table-tr-2-2 tr:nth-child(2) th:nth-child(2) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column1Width);
+}
+.sticky-header-column-table-tr-2-3 tr:nth-child(2) th:nth-child(3) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column2Width);
+}
+.sticky-header-column-table-tr-2-4 tr:nth-child(2) th:nth-child(4) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column3Width);
+}
+.sticky-header-column-table-tr-2-5 tr:nth-child(2) th:nth-child(5) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column4Width);
+}
+.sticky-header-column-table-tr-2-6 tr:nth-child(2) th:nth-child(6) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column5Width);
+}
+.sticky-header-column-table-tr-2-7 tr:nth-child(2) th:nth-child(7) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column6Width);
+}
+.sticky-header-column-table-tr-2-8 tr:nth-child(2) th:nth-child(8) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column7Width);
+}
+.sticky-header-column-table-tr-2-9 tr:nth-child(2) th:nth-child(9) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column8Width);
+}
+.sticky-header-column-table-tr-2-10 tr:nth-child(2) th:nth-child(10) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column9Width);
+}
+
+.sticky-header-column-table-tr-3-1 tr:nth-child(3) th:first-child {
+  z-index: 3;
+  position: sticky;
+  left: 0px;
+}
+.sticky-header-column-table-tr-3-2 tr:nth-child(3) th:nth-child(2) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column1Width);
+}
+.sticky-header-column-table-tr-3-3 tr:nth-child(3) th:nth-child(3) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column2Width);
+}
+.sticky-header-column-table-tr-3-4 tr:nth-child(3) th:nth-child(4) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column3Width);
+}
+.sticky-header-column-table-tr-3-5 tr:nth-child(3) th:nth-child(5) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column4Width);
+}
+.sticky-header-column-table-tr-3-6 tr:nth-child(3) th:nth-child(6) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column5Width);
+}
+.sticky-header-column-table-tr-3-7 tr:nth-child(3) th:nth-child(7) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column6Width);
+}
+.sticky-header-column-table-tr-3-8 tr:nth-child(3) th:nth-child(8) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column7Width);
+}
+.sticky-header-column-table-tr-3-9 tr:nth-child(3) th:nth-child(9) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column8Width);
+}
+.sticky-header-column-table-tr-3-10 tr:nth-child(3) th:nth-child(10) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column9Width);
+}
+
+.sticky-header-column-table-tr-4-1 tr:nth-child(4) th:first-child {
+  z-index: 3;
+  position: sticky;
+  left: 0px;
+}
+.sticky-header-column-table-tr-4-2 tr:nth-child(4) th:nth-child(2) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column1Width);
+}
+.sticky-header-column-table-tr-4-3 tr:nth-child(4) th:nth-child(3) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column2Width);
+}
+.sticky-header-column-table-tr-4-4 tr:nth-child(4) th:nth-child(4) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column3Width);
+}
+.sticky-header-column-table-tr-4-5 tr:nth-child(4) th:nth-child(5) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column4Width);
+}
+.sticky-header-column-table-tr-4-6 tr:nth-child(4) th:nth-child(6) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column5Width);
+}
+.sticky-header-column-table-tr-4-7 tr:nth-child(4) th:nth-child(7) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column6Width);
+}
+.sticky-header-column-table-tr-4-8 tr:nth-child(4) th:nth-child(8) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column7Width);
+}
+.sticky-header-column-table-tr-4-9 tr:nth-child(4) th:nth-child(9) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column8Width);
+}
+.sticky-header-column-table-tr-4-10 tr:nth-child(4) th:nth-child(10) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column9Width);
+}
+
+.sticky-header-column-table-tr-5-1 tr:nth-child(5) th:first-child {
+  z-index: 3;
+  position: sticky;
+  left: 0px;
+}
+.sticky-header-column-table-tr-5-2 tr:nth-child(5) th:nth-child(2) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column1Width);
+}
+.sticky-header-column-table-tr-5-3 tr:nth-child(5) th:nth-child(3) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column2Width);
+}
+.sticky-header-column-table-tr-5-4 tr:nth-child(5) th:nth-child(4) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column3Width);
+}
+.sticky-header-column-table-tr-5-5 tr:nth-child(5) th:nth-child(5) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column4Width);
+}
+.sticky-header-column-table-tr-5-6 tr:nth-child(5) th:nth-child(6) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column5Width);
+}
+.sticky-header-column-table-tr-5-7 tr:nth-child(5) th:nth-child(7) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column6Width);
+}
+.sticky-header-column-table-tr-5-8 tr:nth-child(5) th:nth-child(8) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column7Width);
+}
+.sticky-header-column-table-tr-5-9 tr:nth-child(5) th:nth-child(9) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column8Width);
+}
+.sticky-header-column-table-tr-5-10 tr:nth-child(5) th:nth-child(10) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column9Width);
+}
+
+.sticky-header-column-table-tr-6-1 tr:nth-child(6) th:first-child {
+  z-index: 3;
+  position: sticky;
+  left: 0px;
+}
+.sticky-header-column-table-tr-6-2 tr:nth-child(6) th:nth-child(2) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column1Width);
+}
+.sticky-header-column-table-tr-6-3 tr:nth-child(6) th:nth-child(3) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column2Width);
+}
+.sticky-header-column-table-tr-6-4 tr:nth-child(6) th:nth-child(4) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column3Width);
+}
+.sticky-header-column-table-tr-6-5 tr:nth-child(6) th:nth-child(5) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column4Width);
+}
+.sticky-header-column-table-tr-6-6 tr:nth-child(6) th:nth-child(6) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column5Width);
+}
+.sticky-header-column-table-tr-6-7 tr:nth-child(6) th:nth-child(7) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column6Width);
+}
+.sticky-header-column-table-tr-6-8 tr:nth-child(6) th:nth-child(8) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column7Width);
+}
+.sticky-header-column-table-tr-6-9 tr:nth-child(6) th:nth-child(9) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column8Width);
+}
+.sticky-header-column-table-tr-6-10 tr:nth-child(6) th:nth-child(10) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column9Width);
+}
+
+.sticky-header-column-table-tr-7-1 tr:nth-child(7) th:first-child {
+  z-index: 3;
+  position: sticky;
+  left: 0px;
+}
+.sticky-header-column-table-tr-7-2 tr:nth-child(7) th:nth-child(2) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column1Width);
+}
+.sticky-header-column-table-tr-7-3 tr:nth-child(7) th:nth-child(3) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column2Width);
+}
+.sticky-header-column-table-tr-7-4 tr:nth-child(7) th:nth-child(4) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column3Width);
+}
+.sticky-header-column-table-tr-7-5 tr:nth-child(7) th:nth-child(5) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column4Width);
+}
+.sticky-header-column-table-tr-7-6 tr:nth-child(7) th:nth-child(6) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column5Width);
+}
+.sticky-header-column-table-tr-7-7 tr:nth-child(7) th:nth-child(7) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column6Width);
+}
+.sticky-header-column-table-tr-7-8 tr:nth-child(7) th:nth-child(8) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column7Width);
+}
+.sticky-header-column-table-tr-7-9 tr:nth-child(7) th:nth-child(9) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column8Width);
+}
+.sticky-header-column-table-tr-7-10 tr:nth-child(7) th:nth-child(10) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column9Width);
+}
+
+.sticky-header-column-table-tr-8-1 tr:nth-child(8) th:first-child {
+  z-index: 3;
+  position: sticky;
+  left: 0px;
+}
+.sticky-header-column-table-tr-8-2 tr:nth-child(8) th:nth-child(2) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column1Width);
+}
+.sticky-header-column-table-tr-8-3 tr:nth-child(8) th:nth-child(3) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column2Width);
+}
+.sticky-header-column-table-tr-8-4 tr:nth-child(8) th:nth-child(4) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column3Width);
+}
+.sticky-header-column-table-tr-8-5 tr:nth-child(8) th:nth-child(5) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column4Width);
+}
+.sticky-header-column-table-tr-8-6 tr:nth-child(8) th:nth-child(6) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column5Width);
+}
+.sticky-header-column-table-tr-8-7 tr:nth-child(8) th:nth-child(7) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column6Width);
+}
+.sticky-header-column-table-tr-8-8 tr:nth-child(8) th:nth-child(8) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column7Width);
+}
+.sticky-header-column-table-tr-8-9 tr:nth-child(8) th:nth-child(9) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column8Width);
+}
+.sticky-header-column-table-tr-8-10 tr:nth-child(8) th:nth-child(10) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column9Width);
+}
+
+.sticky-header-column-table-tr-9-1 tr:nth-child(9) th:first-child {
+  z-index: 3;
+  position: sticky;
+  left: 0px;
+}
+.sticky-header-column-table-tr-9-2 tr:nth-child(9) th:nth-child(2) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column1Width);
+}
+.sticky-header-column-table-tr-9-3 tr:nth-child(9) th:nth-child(3) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column2Width);
+}
+.sticky-header-column-table-tr-9-4 tr:nth-child(9) th:nth-child(4) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column3Width);
+}
+.sticky-header-column-table-tr-9-5 tr:nth-child(9) th:nth-child(5) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column4Width);
+}
+.sticky-header-column-table-tr-9-6 tr:nth-child(9) th:nth-child(6) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column5Width);
+}
+.sticky-header-column-table-tr-9-7 tr:nth-child(9) th:nth-child(7) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column6Width);
+}
+.sticky-header-column-table-tr-9-8 tr:nth-child(9) th:nth-child(8) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column7Width);
+}
+.sticky-header-column-table-tr-9-9 tr:nth-child(9) th:nth-child(9) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column8Width);
+}
+.sticky-header-column-table-tr-9-10 tr:nth-child(9) th:nth-child(10) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column9Width);
+}
+
+.sticky-header-column-table-tr-10-1 tr:nth-child(10) th:first-child {
+  z-index: 3;
+  position: sticky;
+  left: 0px;
+}
+.sticky-header-column-table-tr-10-2 tr:nth-child(10) th:nth-child(2) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column1Width);
+}
+.sticky-header-column-table-tr-10-3 tr:nth-child(10) th:nth-child(3) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column2Width);
+}
+.sticky-header-column-table-tr-10-4 tr:nth-child(10) th:nth-child(4) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column3Width);
+}
+.sticky-header-column-table-tr-10-5 tr:nth-child(10) th:nth-child(5) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column4Width);
+}
+.sticky-header-column-table-tr-10-6 tr:nth-child(10) th:nth-child(6) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column5Width);
+}
+.sticky-header-column-table-tr-10-7 tr:nth-child(10) th:nth-child(7) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column6Width);
+}
+.sticky-header-column-table-tr-10-8 tr:nth-child(10) th:nth-child(8) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column7Width);
+}
+.sticky-header-column-table-tr-10-9 tr:nth-child(10) th:nth-child(9) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column8Width);
+}
+.sticky-header-column-table-tr-10-10 tr:nth-child(10) th:nth-child(10) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column9Width);
+}
+
+.sticky-header-column-table-td-1 td:first-child {
+  background-color: var(--stickyBgColor);
+  z-index: 1;
+  position: sticky;
+  left: 0px;
+}
+.sticky-header-column-table-td-2 td:nth-child(2) {
+  background-color: var(--stickyBgColor);
+  z-index: 1;
+  position: sticky;
+  left: var(--column1Width);
+}
+.sticky-header-column-table-td-3 td:nth-child(3) {
+  background-color: var(--stickyBgColor);
+  z-index: 1;
+  position: sticky;
+  left: var(--column2Width);
+}
+.sticky-header-column-table-td-4 td:nth-child(4) {
+  background-color: var(--stickyBgColor);
+  z-index: 1;
+  position: sticky;
+  left: var(--column3Width);
+}
+.sticky-header-column-table-td-5 td:nth-child(5) {
+  background-color: var(--stickyBgColor);
+  z-index: 1;
+  position: sticky;
+  left: var(--column4Width);
+}
+.sticky-header-column-table-td-6 td:nth-child(6) {
+  background-color: var(--stickyBgColor);
+  z-index: 1;
+  position: sticky;
+  left: var(--column5Width);
+}
+.sticky-header-column-table-td-7 td:nth-child(7) {
+  background-color: var(--stickyBgColor);
+  z-index: 1;
+  position: sticky;
+  left: var(--column6Width);
+}
+.sticky-header-column-table-td-8 td:nth-child(8) {
+  background-color: var(--stickyBgColor);
+  z-index: 1;
+  position: sticky;
+  left: var(--column7Width);
+}
+.sticky-header-column-table-td-9 td:nth-child(9) {
+  background-color: var(--stickyBgColor);
+  z-index: 1;
+  position: sticky;
+  left: var(--column8Width);
+}
+.sticky-header-column-table-td-10 td:nth-child(10) {
+  background-color: var(--stickyBgColor);
+  z-index: 1;
+  position: sticky;
+  left: var(--column9Width);
+}
+</style>
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 8625dc10..4cc0cdb5 100644
--- a/io.sc.platform.core.frontend/src/platform/components/index.ts
+++ b/io.sc.platform.core.frontend/src/platform/components/index.ts
@@ -7,17 +7,31 @@ import WColorInput from './widget/color/WColorInput.vue';
 import WColorInputPalette from './widget/color/WColorInputPalette.vue';
 import WPosition from './widget/position/WPosition.vue';
 import WCodemirror from './widget/codemirror/WCodemirror.vue';
-import WSelect from './widget/select/WSelect.vue';
-import WListGrid from './grid/WListGrid.vue';
 import WTreeGrid from './tree/WTreeGrid.vue';
 
 import WDialog from './dialog/WDialog.vue';
 import PlatformDialog from './dialog/PlatformDialog.vue';
 import PlatformDrawer from './drawer/PlatformDrawer.vue';
+import WDrawer from './drawer/WDrawer.vue';
+
 import PlatformForm from './form/PlatformForm.vue';
+import WForm from './form/WForm.vue';
+import WText from './form/elements/WText.vue';
+import WNumber from './form/elements/WNumber.vue';
+import WTextarea from './form/elements/WTextarea.vue';
+import WSelect from './form/elements/WSelect.vue';
+import WDate from './form/elements/WDate.vue';
+import WCheckbox from './form/elements/WCheckbox.vue';
+import WTextBtn from './form/elements/WTextBtn.vue';
+
+import WInfoPanel from './panel/WInfoPanel.vue';
+
 import PlatformGrid from './grid/PlatformGrid.vue';
+import WGrid from './grid/WGrid.vue';
 import PlatformGridTdDrag from './grid/PlatformGridTdDrag.vue';
 
+import WToolbar from './toolbar/WToolbar.vue';
+
 export default {
   install: (app: App) => {
     app.component('WPlatformPage', WPlatformPage);
@@ -29,15 +43,28 @@ export default {
     app.component('WPosition', WPosition);
     app.component('WCodemirror', WCodemirror);
     app.component('WSelect', WSelect);
-    app.component('WListGrid', WListGrid);
     app.component('WTreeGrid', WTreeGrid);
 
     app.component('WDialog', WDialog);
     app.component('PlatformDialog', PlatformDialog);
+    app.component('WDrawer', WDrawer);
     app.component('PlatformDrawer', PlatformDrawer);
+    app.component('WForm', WForm);
+    app.component('WText', WText);
+    app.component('WNumber', WNumber);
+    app.component('WTextarea', WTextarea);
+    app.component('WDate', WDate);
+    app.component('WCheckbox', WCheckbox);
+    app.component('WTextBtn', WTextBtn);
+
+    app.component('WInfoPanel', WInfoPanel);
+
     app.component('PlatformForm', PlatformForm);
     app.component('PlatformGrid', PlatformGrid);
+    app.component('WGrid', WGrid);
     app.component('PlatformGridTdDrag', PlatformGridTdDrag);
+
+    app.component('WToolbar', WToolbar);
   },
 };
 
@@ -50,14 +77,23 @@ export {
   WPosition,
   WCodemirror,
   WSelect,
-  WListGrid,
   WTreeGrid,
   WDialog,
   PlatformDialog,
   PlatformDrawer,
+  WDrawer,
   PlatformForm,
+  WForm,
+  WText,
+  WNumber,
+  WTextarea,
+  WDate,
+  WCheckbox,
+  WTextBtn,
   PlatformGrid,
+  WGrid,
   PlatformGridTdDrag,
+  WToolbar,
 };
 
 export { PlatformIconEnum } from './utils';
@@ -79,3 +115,5 @@ export { extractTableProps } from './utils';
 export { extractTableColumnsProps } from './utils';
 export { getQueryFormColsNumberByScreen } from './utils';
 export { arrayToMap } from './utils';
+
+export { FormValidators } from './utils';
diff --git a/io.sc.platform.core.frontend/src/platform/components/panel/WInfoPanel.vue b/io.sc.platform.core.frontend/src/platform/components/panel/WInfoPanel.vue
new file mode 100644
index 00000000..a4ea1e8f
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/panel/WInfoPanel.vue
@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <q-markup-table separator="cell" flat bordered wrap-cells v-bind="attrs">
+      <tbody>
+        <template v-for="(trItem, trIndex) in tableComputed" :key="trIndex">
+          <tr class="q-tr--no-hover">
+            <template v-for="(tdItem, tdIndex) in trItem as any" :key="tdIndex">
+              <td :class="labelAlignClassComputed">{{ tdItem.label }}</td>
+              <td :class="valueAlignClassComputed">
+                <template v-if="tdItem.value && typeof tdItem.value === 'object' && tdItem.value.type && tdItem.value._vuecomp_">
+                  <component :is="tdItem.value.type" v-bind="tdItem.value.props"></component>
+                </template>
+                <template v-else>
+                  {{ tdItem.value }}
+                </template>
+              </td>
+            </template>
+          </tr>
+        </template>
+      </tbody>
+    </q-markup-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
+import { getCssVar } from 'quasar';
+import { Environment } from '@/platform';
+
+const attrs = useAttrs();
+const gc = Environment.getConfigure();
+const darkBgColor = getCssVar('dark');
+const bgColor = gc.theme.dark ? darkBgColor : gc.theme?.grid?.headBgColor || '#f5f7fa';
+const props = defineProps({
+  columnNum: { type: Number, default: 1 },
+  labelAlign: { type: String, default: 'left' },
+  valueAlign: { type: String, default: 'left' },
+  info: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+
+const tableComputed = computed(() => {
+  const table = <any>[];
+  let tmp = <any>[];
+  props.info.forEach((item, index) => {
+    if (tmp.length < props.columnNum) {
+      tmp.push(item);
+    } else {
+      table.push(tmp);
+      tmp = [];
+      tmp.push(item);
+    }
+  });
+  table.push(tmp);
+  return table;
+});
+const labelAlignClassComputed = computed(() => {
+  let className = '';
+  switch (props.labelAlign) {
+    case 'right':
+      className = 'text-right';
+      break;
+    case 'center':
+      className = 'text-center';
+      break;
+    default:
+      className = 'text-left';
+  }
+  return className;
+});
+const valueAlignClassComputed = computed(() => {
+  let className = '';
+  switch (props.valueAlign) {
+    case 'right':
+      className = 'text-right';
+      break;
+    case 'center':
+      className = 'text-center';
+      break;
+    default:
+      className = 'text-left';
+  }
+  return className;
+});
+</script>
+
+<style scoped>
+.q-table td:nth-child(odd) {
+  background-color: v-bind(bgColor);
+}
+</style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/toolbar/ChildrenBtn.vue b/io.sc.platform.core.frontend/src/platform/components/toolbar/ChildrenBtn.vue
new file mode 100644
index 00000000..b46447f4
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/toolbar/ChildrenBtn.vue
@@ -0,0 +1,57 @@
+<template>
+  <q-item clickable :disable="button[0].enableIf ? !button[0].enableIf(gridProp.gridSelected) : false">
+    <q-item-section>
+      <q-item-label><q-icon v-if="button[0].icon" :name="button[0].icon" size="20px"></q-icon> {{ button[0].label }}</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-icon name="keyboard_arrow_right" />
+    </q-item-section>
+
+    <q-menu anchor="top end" self="top start">
+      <q-list>
+        <template v-for="(childrenBtn, index) in button" :key="index">
+          <template v-if="index === 0 && !childrenBtn.click"></template>
+          <q-separator v-else-if="typeof childrenBtn === 'string' && childrenBtn === 'separator'" />
+          <ChildrenBtn v-else-if="Array.isArray(childrenBtn) && childrenBtn.length > 0" :button="childrenBtn"></ChildrenBtn>
+          <template v-else>
+            <q-item
+              v-close-popup
+              clickable
+              :disable="childrenBtn.enableIf ? !childrenBtn.enableIf(gridProp.gridSelected) : false"
+              @click="buttonClick(childrenBtn)"
+            >
+              <q-item-section>
+                <q-item-label><q-icon v-if="childrenBtn.icon" :name="childrenBtn.icon" size="20px"></q-icon> {{ childrenBtn.label }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </template>
+        </template>
+      </q-list>
+    </q-menu>
+  </q-item>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  button: {
+    type: Object,
+    default: () => {
+      return [];
+    },
+  },
+  gridProp: {
+    type: Object,
+    default: () => {
+      return {
+        gridSelected: [],
+        gridRefs: {},
+      };
+    },
+  },
+  buttonClick: {
+    type: Function,
+    default: () => {
+      return () => {};
+    },
+  },
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue b/io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue
new file mode 100644
index 00000000..e0149e10
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue
@@ -0,0 +1,284 @@
+<template>
+  <div>
+    <div
+      ref="containerRef"
+      :class="'flex ' + (align === 'left' ? 'justify-start' : align === 'center' ? 'justify-center' : 'justify-end') + ' gap-x-[' + props.xGap + 'px]'"
+    >
+      <!-- buttons -->
+      <template v-for="(btn, index) in baseActions" :key="'button_' + index">
+        <q-separator v-if="typeof btn.data === 'string' && btn.data === 'separator'" vertical class="class-action-item" />
+        <q-btn-dropdown
+          v-else-if="Array.isArray(btn.data) && btn.data.length > 0"
+          unelevated
+          outline
+          v-bind="btn.data[0]"
+          :split="btn.data[0].click ? true : false"
+          :disable="btn.data[0].enableIf ? !btn.data[0].enableIf(gridProp.gridSelected) : false"
+          class="class-action-item"
+          @click="buttonClick(btn.data[0])"
+        >
+          <q-list>
+            <template v-for="(childrenBtn, childrenIndex) in btn.data" :key="'button_c_' + childrenIndex">
+              <template v-if="childrenIndex === 0"></template>
+              <template v-else>
+                <q-separator v-if="typeof childrenBtn === 'string' && childrenBtn === 'separator'" />
+                <ChildrenBtn
+                  v-else-if="Array.isArray(childrenBtn) && childrenBtn.length > 0"
+                  :button="childrenBtn"
+                  :grid-prop="gridProp"
+                  :button-click="buttonClick"
+                ></ChildrenBtn>
+                <q-item
+                  v-else
+                  v-close-popup
+                  clickable
+                  :disable="childrenBtn.enableIf ? !childrenBtn.enableIf(gridProp.gridSelected) : false"
+                  @click="buttonClick(childrenBtn)"
+                >
+                  <q-item-section>
+                    <q-item-label><q-icon v-if="childrenBtn.icon" :name="childrenBtn.icon" size="20px"></q-icon> {{ childrenBtn.label }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </template>
+            </template>
+          </q-list>
+        </q-btn-dropdown>
+        <q-btn
+          v-else
+          :disable="btn.data.enableIf ? !btn.data.enableIf(gridProp.gridSelected) : false"
+          no-wrap
+          outline
+          v-bind="btn.data"
+          class="class-action-item"
+          @click="buttonClick(btn.data)"
+        />
+      </template>
+
+      <!-- moreActions -->
+      <q-btn-dropdown v-if="moreActions && moreActions.length > 0" unelevated outline :label="$t('more')" class="class-action-item">
+        <q-list>
+          <template v-for="(childrenBtn, childrenIndex) in moreActions" :key="'moreAction_' + childrenIndex">
+            <q-separator v-if="typeof childrenBtn.data === 'string' && childrenBtn.data === 'separator'" />
+            <ChildrenBtn
+              v-else-if="Array.isArray(childrenBtn.data) && childrenBtn.data.length > 0"
+              :button="childrenBtn.data"
+              :grid-prop="gridProp"
+              :button-click="buttonClick"
+            ></ChildrenBtn>
+            <q-item
+              v-else
+              v-close-popup
+              clickable
+              :disable="childrenBtn.data.enableIf ? !childrenBtn.data.enableIf(gridProp.gridSelected) : false"
+              @click="buttonClick(childrenBtn.data)"
+            >
+              <q-item-section>
+                <q-item-label
+                  ><q-icon v-if="childrenBtn.data.icon" :name="childrenBtn.data.icon" size="20px"></q-icon> {{ childrenBtn.data.label }}</q-item-label
+                >
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-list>
+      </q-btn-dropdown>
+    </div>
+    <q-resize-observer @resize="onResize" />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, nextTick } from 'vue';
+import { Tools } from '@/platform/utils';
+import ChildrenBtn from './ChildrenBtn.vue';
+
+const props = defineProps({
+  xGap: { type: Number, default: 4 }, // 按扭之间x轴间隔像素点
+  noIcon: { type: Boolean, default: false }, // 无icon模式
+  align: { type: String, default: 'right' }, // 对齐方式
+  buttons: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  gridProp: {
+    type: Object,
+    default: () => {
+      return {
+        gridSelected: [],
+        gridRefs: {},
+      };
+    },
+  },
+});
+const containerRef = ref();
+
+// 将所有按钮根据 name 提取到 JSON 对象中
+const buttonsJson = {};
+const extractButton = (btns: any) => {
+  for (const btn of btns) {
+    if (Array.isArray(btn)) {
+      extractButton(btn);
+    } else if (typeof btn === 'object') {
+      buttonsJson[btn.name] = { ...btn };
+      if (props.noIcon) {
+        buttonsJson[btn.name].icon = undefined;
+      }
+    }
+  }
+};
+extractButton(props.buttons);
+
+// // 将按钮形成父子关系
+// const handleChildren = (parent, children, arr) => {
+//   for (const item of arr) {
+//     if (Array.isArray(item)) {
+//       const other = item.splice(1);
+//       const children_ = <any>[];
+//       handleChildren(item[0].name, children_, other);
+//       children.push({ parent, children: children_, button: buttonsJson[item[0].name] });
+//     } else if (typeof item === 'object') {
+//       children.push({ parent, children: null, button: buttonsJson[item.name] });
+//     } else if (typeof item === 'string' && item === 'separator') {
+//       // 当最后一个元素是分割符时，不再追加分割符，避免两个按钮之间出现重复的无意义分割符
+//       if (children.length > 0 && children[children.length - 1].button !== 'separator') {
+//         children.push({ parent, children: null, button: 'separator' });
+//       }
+//     }
+//   }
+// };
+// const buttons_ = <any>[];
+// for (const btn of props.buttons) {
+//   if (Array.isArray(btn)) {
+//     const other = btn.splice(1);
+//     const children = <any>[];
+//     handleChildren(btn[0].name, children, other);
+//     buttons_.push({ parent: null, children: children, button: buttonsJson[btn[0].name] });
+//   } else if (typeof btn === 'object') {
+//     buttons_.push({ parent: null, children: null, button: buttonsJson[btn.name] });
+//   } else if (typeof btn === 'string' && btn === 'separator') {
+//     // 当最后一个元素是分割符时，不再追加分割符，避免两个按钮之间出现重复的无意义分割符
+//     if (buttons_.length > 0 && buttons_[buttons_.length - 1].button !== 'separator') {
+//       buttons_.push({ parent: null, children: null, button: 'separator' });
+//     }
+//   }
+// }
+
+const buttons_ = <any>[];
+const handleChildrenSeparator = (arr) => {
+  const tempArr = [];
+  for (let i = 0; i < arr.length; i++) {
+    const btn = arr[i];
+    if (i === 0 && typeof btn === 'string' && btn === 'separator') {
+      // 按钮数组第一个元素为分割符时直接跳过
+      continue;
+    }
+    if (typeof btn === 'string' && btn === 'separator' && tempArr.length > 0 && tempArr[tempArr.length - 1] === btn) {
+      // 连续的分割符直接跳过，避免出现重复的无意义分割符
+      continue;
+    }
+    if (Array.isArray(btn) && btn.length > 0) {
+      const handleResult = handleChildrenSeparator(btn);
+      if (handleResult && handleResult.length > 0) {
+        tempArr.push(handleResult);
+      }
+    } else if (typeof btn === 'string' && btn === 'separator') {
+      tempArr.push(btn);
+    } else {
+      tempArr.push(buttonsJson[btn.name]);
+    }
+  }
+  return tempArr;
+};
+for (let i = 0; i < props.buttons.length; i++) {
+  const btn = props.buttons[i];
+  if (i === 0 && typeof btn === 'string' && btn === 'separator') {
+    // 按钮数组第一个元素为分割符时直接跳过
+    continue;
+  }
+  if (typeof btn === 'string' && btn === 'separator' && buttons_.length > 0 && buttons_[buttons_.length - 1].data === btn) {
+    // 连续的分割符直接跳过，避免出现重复的无意义分割符
+    continue;
+  }
+  if (Array.isArray(btn) && btn.length > 0) {
+    buttons_.push({ data: handleChildrenSeparator(btn) });
+  } else if (typeof btn === 'string' && btn === 'separator') {
+    buttons_.push({ data: btn });
+  } else {
+    buttons_.push({ data: buttonsJson[btn.name] });
+  }
+}
+const baseActions = ref(buttons_);
+const moreActions = ref([]);
+const isActionWidthInitializedRef = ref(false);
+const moreActionWidth = 100;
+const onResize = (size) => {
+  if (Tools.isUndefinedOrNull(containerRef.value)) {
+    return;
+  }
+
+  if (!isActionWidthInitializedRef.value) {
+    const nodes = containerRef.value.getElementsByClassName('class-action-item');
+    for (let i = 0; i < buttons_.length; i++) {
+      buttons_[i].width = nodes[i].clientWidth;
+    }
+    isActionWidthInitializedRef.value = true;
+  }
+
+  const _baseActions = [];
+  const _moreActions = [];
+  const length = buttons_.length;
+  let availableWidth = size.width;
+  let width = 0;
+  let index = 0;
+
+  for (; index < length; index++) {
+    if (width + buttons_[index].width > availableWidth) {
+      availableWidth -= moreActionWidth;
+      while (width > availableWidth) {
+        index--;
+        width -= buttons_[index].width;
+        _baseActions.pop();
+      }
+      break;
+    } else {
+      _baseActions.push(buttons_[index]);
+      width += buttons_[index].width;
+      width += props.xGap;
+    }
+  }
+
+  for (; index < length; index++) {
+    _moreActions.push(buttons_[index]);
+  }
+
+  baseActions.value = _baseActions;
+  moreActions.value = _moreActions;
+};
+
+const buttonClick = async (button) => {
+  let beforeResult = true;
+  const context = {};
+  if (button.beforeClick) {
+    beforeResult = await button.beforeClick(props.gridProp.gridSelected, context, props.gridProp.gridRefs);
+  }
+  if (beforeResult && button.click) {
+    await button.click(props.gridProp.gridSelected, context, button._click, props.gridProp.gridRefs);
+    if (button.afterClick) {
+      nextTick(() => {
+        button.afterClick(props.gridProp.gridSelected, context, props.gridProp.gridRefs);
+      });
+    }
+  }
+};
+</script>
+
+<style scoped lang="css">
+.q-btn.disabled {
+  opacity: 0.7 !important;
+  color: #a8a8a8;
+}
+.q-item.disabled {
+  opacity: 0.6 !important;
+  color: #a8a8a8;
+}
+</style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/utils/FormValidators.ts b/io.sc.platform.core.frontend/src/platform/components/utils/FormValidators.ts
new file mode 100644
index 00000000..f9061516
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/utils/FormValidators.ts
@@ -0,0 +1,58 @@
+/**
+ * Form表单元素验证器
+ */
+export class FormValidators {
+  /**
+   * 必填项验证
+   * @returns
+   */
+  public static required(msg: string) {
+    return (val) => {
+      if (val === null || val === undefined) {
+        return msg || '必填项未填写';
+      }
+      if (typeof val === 'string') {
+        return val !== '' || msg || '必填项未填写';
+      } else if (Array.isArray(val)) {
+        return val.length > 0 || msg || '必填项未填写';
+      } else {
+        return true;
+      }
+    };
+  }
+
+  /**
+   * 长度范围验证
+   * @param min 最小长度
+   * @param max 最大长度
+   * @returns
+   */
+  public static lengthRange(min: number, max: number, msg: string) {
+    return (val) => {
+      const tmp = String(val);
+      if (tmp === null || tmp === '' || (tmp.length >= min && tmp.length <= max)) {
+        return true;
+      } else {
+        return msg || '长度不符合要求(' + min + '-' + max + ')';
+      }
+    };
+  }
+
+  /**
+   * 数字最大精度校验
+   * @param precision 最大位数
+   * @returns
+   */
+  public static maxPrecision(precision: number, msg: string) {
+    return (val) => {
+      const tmp = String(val);
+      if (val === null || tmp === '' || tmp.indexOf('.') === -1 || tmp.substring(tmp.indexOf('.') + 1).length <= precision) {
+        return true;
+      } else if (precision === 0) {
+        return '只能输入整数';
+      } else {
+        return msg || '最大允许输入的小数位：' + precision;
+      }
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/utils/componentComm.ts b/io.sc.platform.core.frontend/src/platform/components/utils/componentComm.ts
index 46a98ca8..cc38a5e3 100644
--- a/io.sc.platform.core.frontend/src/platform/components/utils/componentComm.ts
+++ b/io.sc.platform.core.frontend/src/platform/components/utils/componentComm.ts
@@ -254,7 +254,7 @@ function columnStyle(item: any) {
     style = item.style;
   }
   if (Object.hasOwnProperty.call(item, 'width')) {
-    item.style = `min-width: ` + item.width + `px; max-width: ` + item.width + `px;` + style;
+    item.style = `min-width: ` + item.width + `px; width: ` + item.width + `px;max-width: ` + item.width + `px;` + style;
     delete item.width;
 
     if (Object.hasOwnProperty.call(item, 'classes')) {
@@ -282,11 +282,11 @@ function columnChildrenHandler(item: any, gridColumns: any) {
  */
 export function extractTableColumnsProps(props: any) {
   const gridColumns = <any>[];
-  if (props.tableColumns && props.tableColumns.length > 0) {
-    if (props.tableShowSortNo) {
+  if (props.columns && props.columns.length > 0) {
+    if (props.showSortNo) {
       gridColumns.push({ name: '_sortNo_', align: 'center', label: '序号', field: '_sortNo_' });
     }
-    props.tableColumns.forEach((item: any) => {
+    props.columns.forEach((item: any) => {
       columnChildrenHandler(item, gridColumns);
     });
     return gridColumns;
diff --git a/io.sc.platform.core.frontend/src/platform/components/utils/index.ts b/io.sc.platform.core.frontend/src/platform/components/utils/index.ts
index c5949a65..83328339 100644
--- a/io.sc.platform.core.frontend/src/platform/components/utils/index.ts
+++ b/io.sc.platform.core.frontend/src/platform/components/utils/index.ts
@@ -17,3 +17,5 @@ export { extractTableProps } from './componentComm';
 export { extractTableColumnsProps } from './componentComm';
 export { getQueryFormColsNumberByScreen } from './componentComm';
 export { arrayToMap } from './componentComm';
+
+export { FormValidators } from './FormValidators';
diff --git a/io.sc.platform.core.frontend/src/platform/index.ts b/io.sc.platform.core.frontend/src/platform/index.ts
index 35a4a397..0de8e7d1 100644
--- a/io.sc.platform.core.frontend/src/platform/index.ts
+++ b/io.sc.platform.core.frontend/src/platform/index.ts
@@ -105,7 +105,7 @@ export {
   WPosition,
   WCodemirror,
   WSelect,
-  WListGrid,
+  // WListGrid,
   WTreeGrid,
   PlatformDialog,
   PlatformDrawer,
diff --git a/io.sc.platform.core.frontend/src/routes/routes.json b/io.sc.platform.core.frontend/src/routes/routes.json
index fdcc0041..7efd0281 100644
--- a/io.sc.platform.core.frontend/src/routes/routes.json
+++ b/io.sc.platform.core.frontend/src/routes/routes.json
@@ -48,15 +48,99 @@
     }
   },
   {
-    "name": "route.testcase.table",
-    "path": "testcase/table",
+    "name": "route.testcase.likm.dialog",
+    "path": "testcase/likm/dialog",
     "parent": "/",
     "priority": 0,
-    "component": "component.testcase.table",
-    "componentPath": "@/views/Table.vue",
+    "component": "component.testcase.likmDialog",
+    "componentPath": "@/views/likm/Dialog.vue",
     "redirect": null,
     "meta": {
-      "permissions": ["/testcase/table/**/*"]
+      "permissions": ["/testcase/treeGrid/**/*"]
+    }
+  },
+  {
+    "name": "route.testcase.likm.drawer",
+    "path": "testcase/likm/drawer",
+    "parent": "/",
+    "priority": 0,
+    "component": "component.testcase.likmDrawer",
+    "componentPath": "@/views/likm/Drawer.vue",
+    "redirect": null,
+    "meta": {
+      "permissions": ["/testcase/treeGrid/**/*"]
+    }
+  },
+  {
+    "name": "route.testcase.likm.form",
+    "path": "testcase/likm/form",
+    "parent": "/",
+    "priority": 0,
+    "component": "component.testcase.likmForm",
+    "componentPath": "@/views/likm/Form.vue",
+    "redirect": null,
+    "meta": {
+      "permissions": ["/testcase/treeGrid/**/*"]
+    }
+  },
+  {
+    "name": "route.testcase.likm.infoPanel",
+    "path": "testcase/likm/infoPanel",
+    "parent": "/",
+    "priority": 0,
+    "component": "component.testcase.infoPanel",
+    "componentPath": "@/views/likm/InfoPanel.vue",
+    "redirect": null,
+    "meta": {
+      "permissions": ["/testcase/treeGrid/**/*"]
+    }
+  },
+  {
+    "name": "route.testcase.likm.grid",
+    "path": "testcase/likm/grid",
+    "parent": "/",
+    "priority": 0,
+    "component": "component.testcase.grid",
+    "componentPath": "@/views/likm/Grid.vue",
+    "redirect": null,
+    "meta": {
+      "permissions": ["/testcase/treeGrid/**/*"]
+    }
+  },
+  {
+    "name": "route.testcase.likm.toolbar",
+    "path": "testcase/likm/toolbar",
+    "parent": "/",
+    "priority": 0,
+    "component": "component.testcase.toolbar",
+    "componentPath": "@/views/likm/Toolbar.vue",
+    "redirect": null,
+    "meta": {
+      "permissions": ["/testcase/treeGrid/**/*"]
+    }
+  },
+  {
+    "name": "route.testcase.likm.quasarGrid",
+    "path": "testcase/likm/quasarGrid",
+    "parent": "/",
+    "priority": 0,
+    "component": "component.testcase.quasarGrid",
+    "componentPath": "@/views/likm/QuasarGrid.vue",
+    "redirect": null,
+    "meta": {
+      "permissions": ["/testcase/treeGrid/**/*"]
+    }
+  },
+  {
+    "name": "route.testcase.likm.gridLayout",
+    "path": "testcase/likm/gridLayout",
+    "parent": "/",
+    "priority": 0,
+    "component": "component.testcase.gridLayout",
+    "componentPath": "@/views/likm/GridLayout.vue",
+    "redirect": null,
+    "meta": {
+      "permissions": ["/testcase/treeGrid/**/*"]
     }
   }
 ]
diff --git a/io.sc.platform.core.frontend/src/views/Form1.vue b/io.sc.platform.core.frontend/src/views/Form1.vue
new file mode 100644
index 00000000..444f06df
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/views/Form1.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <w-form :fields="fields" :cols-num-auto="false" :cols-num="3"></w-form>
+  </div>
+</template>
+<script setup lang="ts">
+const fields = [
+  {
+    label: '姓名',
+    name: 'name',
+    type: 'text',
+    required: true,
+    colspan: 2,
+    button: {
+      round: false,
+      icon: 'home',
+      label: '选择',
+      click: () => {
+        console.info('11111');
+      },
+    },
+  },
+  {
+    label: '年龄',
+    name: 'age',
+    type: 'number',
+    required: true,
+  },
+];
+</script>
diff --git a/io.sc.platform.core.frontend/src/views/Grid1.vue b/io.sc.platform.core.frontend/src/views/Grid1.vue
new file mode 100644
index 00000000..d7e5272c
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/views/Grid1.vue
@@ -0,0 +1,4 @@
+<template>
+  <div>2222</div>
+</template>
+<script setup lang="ts"></script>
diff --git a/io.sc.platform.core.frontend/src/views/likm/A.vue b/io.sc.platform.core.frontend/src/views/likm/A.vue
new file mode 100644
index 00000000..f1d6b20d
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/views/likm/A.vue
@@ -0,0 +1,13 @@
+<template>
+  <q-input ref="aaaref" :model-value="a" label="dddd"></q-input>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+const aaaref = ref();
+const a = ref('');
+
+onMounted(() => {
+  aaaref.value.focus();
+  console.info('aaaref====', aaaref);
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/views/likm/Dialog.vue b/io.sc.platform.core.frontend/src/views/likm/Dialog.vue
new file mode 100644
index 00000000..91b5a8b9
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/views/likm/Dialog.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <w-dialog
+      ref="dialogRef"
+      :buttons="[
+        {
+          label: '测试',
+          click: aaaaa,
+        },
+      ]"
+      @hide="aaaaa"
+    >
+      <q-splitter v-model="aa" style="height: 100%">
+        <template #before> 11111 </template>
+        <template #after> 22222 </template>
+      </q-splitter>
+      <template #buttons> <q-btn label="xxx"></q-btn> </template
+    ></w-dialog>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+
+const dialogRef = ref();
+
+const aa = ref(50);
+const aaaaa = (e) => {
+  console.info('dddddddddddddd', e);
+};
+
+onMounted(() => {
+  console.info('dialogRef====', dialogRef);
+  dialogRef.value.show();
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/views/likm/Drawer.vue b/io.sc.platform.core.frontend/src/views/likm/Drawer.vue
new file mode 100644
index 00000000..210f1cb7
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/views/likm/Drawer.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <q-btn label="弹出" @click="click"></q-btn>
+    <w-drawer
+      ref="drawerRef"
+      title="xxx"
+      :maximized="false"
+      :buttons="[
+        {
+          label: '测试',
+        },
+      ]"
+    >
+      1111
+      <template #buttons> <q-btn label="xxx"></q-btn> </template>
+    </w-drawer>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { IconEnum } from '@/platform/enums';
+
+const drawerRef = ref();
+
+const aa = ref(50);
+const aaaaa = (e) => {
+  console.info('dddddddddddddd', e);
+};
+const click = () => {
+  drawerRef.value.show();
+};
+
+onMounted(() => {});
+</script>
diff --git a/io.sc.platform.core.frontend/src/views/likm/Form.vue b/io.sc.platform.core.frontend/src/views/likm/Form.vue
new file mode 100644
index 00000000..cc38fdfe
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/views/likm/Form.vue
@@ -0,0 +1,152 @@
+<template>
+  <div>
+    <w-form ref="formRef" :fields="aaaa.fields" :cols-x-gap="8"> </w-form>
+    <q-btn label="提交" @click="submit"></q-btn>&nbsp; <q-btn label="重置" @click="reset"></q-btn>&nbsp;
+    <q-btn label="初始化值" @click="setValue"></q-btn>&nbsp;
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import { FormValidators } from '@/platform/components';
+const formRef = ref();
+const aaaa = {
+  fields: [
+    {
+      label: '姓名',
+      name: 'name',
+      type: 'w-text',
+      // maxlength: 10,
+      rules: [FormValidators.lengthRange(5, 10, '22222')],
+      defaultValue: '123',
+      colspan: 2,
+      requiredIf: () => true,
+      'onUpdate:modelValue': () => {},
+      onFocus: () => {
+        // console.info('33333333');
+      },
+    },
+    {
+      label: '机构',
+      name: 'org',
+      type: 'w-text-btn',
+      requiredIf: () => true,
+      // buttonPosition: 'prepend',
+      button: {
+        icon: 'home',
+        click: () => {
+          console.info('点击！！');
+        },
+      },
+    },
+    {
+      label: '年龄',
+      name: 'age',
+      type: 'w-number',
+      defaultValue: 111,
+      precision: 0,
+      requiredIf: () => true,
+    },
+    {
+      label: '出生日期',
+      name: 'cs',
+      type: 'w-date',
+      requiredIf: () => true,
+    },
+    {
+      label: '爱好',
+      name: 'ah',
+      type: 'w-text',
+      requiredIf: () => true,
+    },
+    {
+      label: '性别',
+      name: 'sex',
+      type: 'w-select',
+      options: [
+        {
+          label: '男',
+          value: 1,
+        },
+        {
+          label: '女',
+          value: 0,
+        },
+      ],
+      requiredIf: () => true,
+      'onUpdate:modelValue': (value) => {
+        if (value === 1) {
+          formRef.value.fieldsMap.get('addr').label = '地址2222';
+        } else {
+          formRef.value.fieldsMap.get('addr').label = '地址3333';
+        }
+      },
+    },
+    {
+      label: '地址',
+      name: 'addr',
+      rows: 2,
+      colspan: 'full',
+      type: 'w-textarea',
+      hideIf: () => {
+        if (formRef.value) {
+          if (formRef.value.data.sex && formRef.value.data.sex === 1) {
+            return false;
+          } else {
+            return false;
+          }
+        }
+        return false;
+      },
+      requiredIf: () => true,
+      // readonlyIf: () => {
+      //   return true;
+      // },
+      disableIf: () => {
+        return false;
+      },
+    },
+    {
+      label: '是否可用1',
+      name: 'ky1',
+      colsFirst: true,
+      colspan: 2,
+      type: 'w-checkbox',
+      // disableIf: () => {
+      //   return true;
+      // },
+    },
+    {
+      label: '是否可用2',
+      name: 'ky2',
+      type: 'w-checkbox',
+    },
+    {
+      label: '是否可用3',
+      name: 'ky3',
+      type: 'w-checkbox',
+    },
+  ],
+};
+
+const submit = async () => {
+  aaaa.fields[1].required = false;
+  const validateResult = await formRef.value.validate();
+  console.info('表单验证结果：', validateResult);
+  console.info('数据：', formRef.value.getData());
+};
+const reset = () => {
+  formRef.value.reset();
+};
+const setValue = () => {
+  const data = {
+    name: '张三',
+    age: 18,
+    cs: '2023-12-25',
+    ah: '唱、跳、篮球',
+    ky: true,
+    sex: 1,
+    addr: '上海市',
+  };
+  formRef.value.setData(data);
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/views/likm/Grid.vue b/io.sc.platform.core.frontend/src/views/likm/Grid.vue
new file mode 100644
index 00000000..7e4b8ae4
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/views/likm/Grid.vue
@@ -0,0 +1,220 @@
+<template>
+  <div>
+    <w-grid
+      :title="testGrid.title"
+      :row-drag="true"
+      :row-key="testGrid.rowKey"
+      :auto-load-data="testGrid.autoLoadData"
+      :get-data-url="testGrid.tableDataUrl"
+      :show-sort-no="testGrid.tableShowSortNo"
+      :columns="testGrid.tableColumns"
+      :left-column-sticky-number="testGrid.tableLeftColumnStickyNumber"
+      :column-title-dense="true"
+      :toolbar="testGrid.toolbar"
+      :query-form="testGrid.queryForm"
+      :table-pagination="testGrid.tablePagination"
+      :add-edit="testGrid.addEdit"
+      :view="testGrid.view"
+      @selection="selection"
+      @row-click="rowClick"
+      @row-db-click="rowDbClick"
+    ></w-grid>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick } from 'vue';
+import { axios, Environment } from '@/platform';
+import EnableIcon from '@/platform/components/grid/EnableIcon.vue';
+import { IconEnum } from '@/platform/enums';
+
+const selection = (details) => {
+  console.info('details====', details);
+};
+const rowClick = (evt, row, index) => {
+  console.info('row====', row);
+};
+const rowDbClick = (evt, row, index) => {
+  console.info('row1====', row);
+};
+const testGrid = {
+  hideBottom: false,
+  autoLoadData: true,
+  tableLeftColumnStickyNumber: 0,
+  title: '用户列表',
+  rowKey: 'id',
+  tableDataUrl: Environment.apiContextPath('api/system/user'),
+  tablePagination: {
+    sortBy: 'lastModifyDate',
+    descending: true,
+    reqPageStart: 0,
+    rowsPerPage: 10,
+  },
+  toolbar: {
+    buttons: [
+      ['query', 'separator', 'moreQuery'],
+      'reset',
+      'refresh',
+      'separator',
+      {
+        name: 'custBtn',
+        extend: 'add',
+        icon: undefined,
+        label: '自定义按钮',
+        enableIf: (selected) => {
+          if (selected && selected.length > 0) {
+            return true;
+          }
+          return false;
+        },
+        // beforeClick: (selected, context, gridRefs) => {
+        //   console.info('先执行before');
+        //   context.aaa = '111';
+        // },
+        click: (selected, context, _click, gridRefs) => {
+          _click();
+        },
+        afterClick: (selected, context, gridRefs) => {
+          gridRefs.addEditFormRef.setFieldValue('userName', '李四');
+        },
+      },
+      [
+        {
+          name: 'op',
+          icon: 'difference',
+          label: '操作',
+        },
+        'add',
+        'edit',
+        'clone',
+        'remove',
+        'separator',
+        'view',
+        'export',
+      ],
+      'separator',
+    ],
+  },
+  tableShowSortNo: true,
+  queryForm: {
+    rowNum: 1,
+    fields: [
+      { label: '登录名', name: 'loginName', type: 'w-text' },
+      { label: '用户名', name: 'userName', type: 'w-text' },
+      { label: '描述', name: 'description', type: 'w-text' },
+      { label: '是否可用', name: 'enable', type: 'w-select' },
+      // { label: '邮箱地址', name: 'email', type: 'w-text' },
+      // { label: '电话', name: 'phone', type: 'w-text' },
+      // { label: '手机号', name: 'mobile', type: 'w-number' },
+      // { label: '最后修改人', name: 'lastModifier', type: 'w-text' },
+      // { label: '最后修改时间', name: 'lastModifyDate', type: 'w-date' },
+    ],
+  },
+  tableColumns: [
+    {
+      name: 'info',
+      label: '用户信息',
+      childrenColumns: [
+        { name: 'loginName', label: '登录名', align: 'right' },
+        { name: 'userName', label: '用户名' },
+      ],
+    },
+    {
+      name: 'lxxx',
+      label: '联系方式',
+      childrenColumns: [
+        { name: 'email', label: '邮箱地址' },
+        {
+          name: 'tx',
+          label: '通讯',
+          childrenColumns: [
+            { name: 'phone', label: '电话' },
+            { name: 'mobile', label: '手机号' },
+          ],
+        },
+        { name: 'qq', label: 'QQ' },
+      ],
+    },
+    { name: 'description', label: '描述' },
+    {
+      name: 'enable',
+      label: '是否可用',
+      align: 'center',
+      format: (val, row) => {
+        // return {
+        //   _vuecomp_: true,
+        //   type: EnableIcon,
+        //   props: {
+        //     value: val,
+        //     showNoEnable: true,
+        //   },
+        // };
+        // return {
+        //   _vuecomp_: true,
+        //   type: 'q-chip',
+        //   props: {
+        //     label: val ? '是' : '否',
+        //     icon: val ? IconEnum.是状态 : IconEnum.否状态,
+        //     color: val ? 'green' : 'red',
+        //   },
+        // };
+        return {
+          _vuecomp_: true,
+          type: 'q-icon',
+          props: {
+            name: val ? IconEnum.是状态 : IconEnum.否状态,
+            color: val ? 'green' : 'red',
+            size: 'sm',
+          },
+        };
+        // return {
+        //   _vuecomp_: true,
+        //   type: 'w-text',
+        //   props: {
+        //     name: 'aaa',
+        //     label: '请输入',
+        //   },
+        // };
+      },
+    },
+    { name: 'lastModifier', label: '最后修改人' },
+    { name: 'lastModifyDate', label: '最后修改时间' },
+  ],
+  addEdit: {
+    dialog: {},
+    form: {
+      colsNum: 1,
+      fields: [
+        { label: '登录名', name: 'loginName', type: 'w-text' },
+        { label: '用户名', name: 'userName', type: 'w-text' },
+        { label: '密码', name: 'password', type: 'w-text' },
+        { label: '是否可用1111', name: 'enable', type: 'w-checkbox' },
+      ],
+    },
+  },
+  view: {
+    infoPanel: {
+      columnNum: 2,
+      fields: [
+        { name: 'id', label: '主键' },
+        { name: 'loginName', label: '登录名' },
+        { name: 'userName', label: '用户名' },
+        { name: 'description', label: '描述' },
+        {
+          name: 'enable',
+          label: '是否可用',
+        },
+        { name: 'email', label: '邮箱地址' },
+        { name: 'phone', label: '电话' },
+        { name: 'mobile', label: '手机号' },
+        { name: 'lastModifier', label: '最后修改人' },
+        { name: 'lastModifyDate', label: '最后修改时间' },
+      ],
+    },
+  },
+};
+
+onMounted(() => {
+  // testGridRef.value.replaceRowsFun([{ typeName: '股权投资信息', typeDesc: '股权投资信息', lastModifier: 'admin', lastModifyDate: '2023-12-26' }]);
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/views/likm/GridLayout.vue b/io.sc.platform.core.frontend/src/views/likm/GridLayout.vue
new file mode 100644
index 00000000..2b8c2a7c
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/views/likm/GridLayout.vue
@@ -0,0 +1,308 @@
+<template>
+  <q-splitter :model-value="70" class="w-full h-full">
+    <template #before>
+      <w-grid
+        ref="userGridRef"
+        :title="userConfigure.tableTitle"
+        :row-key="userConfigure.tableRowKey"
+        :auto-load-data="userConfigure.tableInitLoadData"
+        :get-data-url="userConfigure.tableDataUrl"
+        :show-sort-no="false"
+        :columns="userConfigure.tableColumns"
+        :left-column-sticky-number="userConfigure.tableLeftColumnStickyNumber"
+        :toolbar="userConfigure.toolbar"
+        :query-form="userConfigure.queryForm"
+        :table-pagination="userConfigure.tablePagination"
+        @row-click="userConfigure.rowClickFun"
+      ></w-grid>
+    </template>
+    <template #after>
+      <q-tabs v-model="selectedTabRef" inline-label align="left" :breakpoint="0">
+        <q-tab name="role" icon="bi-people" :label="$t('role')" />
+        <q-tab name="org" icon="bi-diagram-3" :label="$t('org')" />
+      </q-tabs>
+
+      <q-tab-panels v-model="selectedTabRef" animated swipeable keep-alive>
+        <q-tab-panel name="role" class="p-0">
+          <w-grid
+            ref="roleGridRef"
+            selection="multiple"
+            :hide-bottom="false"
+            :title="roleConfigure.tableTitle"
+            :row-key="roleConfigure.tableRowKey"
+            :auto-load-data="roleConfigure.tableInitLoadData"
+            :get-data-url="roleConfigure.tableDataUrl"
+            :show-sort-no="false"
+            :columns="roleConfigure.tableColumns"
+            :left-column-sticky-number="roleConfigure.tableLeftColumnStickyNumber"
+            :toolbar="roleConfigure.toolbar"
+            :table-pagination="roleConfigure.tablePagination"
+          ></w-grid>
+        </q-tab-panel>
+        <q-tab-panel name="org"> 11111 </q-tab-panel>
+      </q-tab-panels>
+    </template>
+  </q-splitter>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Environment, axios } from '@/platform';
+
+const { t } = useI18n();
+
+const userGridRef = ref();
+const roleGridRef = ref();
+const orgTreeGridRef = ref();
+
+const selectRoleDialog = ref();
+const changePasswordDialog = ref();
+
+const selectedTabRef = ref('role');
+
+const userConfigure = {
+  queryForm: {
+    fields: [
+      { label: t('loginName'), name: 'loginName', type: 'w-text' },
+      { label: t('userName'), name: 'userName', type: 'w-text' },
+      {
+        label: t('enable'),
+        name: 'enable',
+        type: 'w-select',
+        options: [
+          { value: true, label: '是' },
+          { value: false, label: '否' },
+        ],
+      },
+      {
+        label: t('dataComeFrom'),
+        name: 'dataComeFrom',
+        type: 'w-select',
+        options: [
+          { value: 'MANUAL', label: t('io.sc.platform.orm.api.enums.DataComeFrom.MANUAL') },
+          { value: 'AUTO', label: t('io.sc.platform.orm.api.enums.DataComeFrom.AUTO') },
+        ],
+      },
+    ],
+  },
+  hideBottom: false,
+  tableInitLoadData: true,
+  tableLeftColumnStickyNumber: 0,
+  tableTitle: t('system.user.gridTitle'),
+  tableRowKey: 'id',
+  tableDataUrl: Environment.apiContextPath('/api/system/user'),
+  tablePagination: {
+    sortBy: 'lastModifyDate',
+    descending: true,
+    reqPageStart: 0,
+    rowsPerPage: 10,
+  },
+  toolbar: {
+    buttons: [
+      'query',
+      'reset',
+      'separator',
+      'refresh',
+      'add',
+      'edit',
+      'remove',
+      'separator',
+      'view',
+      'separator',
+      {
+        name: 'setPassword',
+        label: t('system.user.action.setPassword'),
+        icon: 'bi-shield-exclamation',
+        enableIf: function () {},
+        click: function () {
+          changePasswordDialog.value.show();
+        },
+      },
+    ],
+  },
+  tableColumns: [
+    { width: 100, name: 'loginName', label: t('loginName') },
+    { width: 100, name: 'userName', label: t('userName') },
+    { width: 100, name: 'enable', label: t('isEnable'), format: (value) => (value ? t('yes') : t('no')) },
+    { width: 100, name: 'dataComeFrom', label: t('dataComeFrom') },
+    { width: 100, name: 'accountExpired', label: t('accountExpired'), format: (value) => (value ? t('yes') : t('no')) },
+    { width: 100, name: 'accountLocked', label: t('accountLocked'), format: (value) => (value ? t('yes') : t('no')) },
+    { width: 120, name: 'credentialsExpired', label: t('credentialsExpired'), format: (value) => (value ? t('yes') : t('no')) },
+    { width: 110, name: 'lastModifier', label: t('lastModifier') },
+    { width: 115, name: 'lastModifyDate', label: t('lastModifyDate') },
+  ],
+  addFormProps: {
+    dialogInitWidth: '50%',
+    dialogInitHeight: '90%',
+    formColsNumber: 1,
+    formColsAuto: false,
+    formFields: [
+      { modelName: 'loginName', label: t('loginName'), type: 'text', required: true },
+      { modelName: 'userName', label: t('userName'), type: 'text', required: true },
+      { modelName: 'password', label: t('password'), type: 'password' },
+      { modelName: 'confirmPassword', label: t('confirmPassword'), type: 'password' },
+      { modelName: 'description', label: t('description'), type: 'textarea' },
+      { modelName: 'email', label: t('email'), type: 'text' },
+      { modelName: 'phone', label: t('phone'), type: 'text' },
+      { modelName: 'mobile', label: t('mobile'), type: 'text' },
+      { modelName: 'weixin', label: t('weixin'), type: 'text' },
+      { modelName: 'qq', label: t('qq'), type: 'text' },
+      { modelName: 'enable', label: t('enable'), type: 'checkbox', defaultValue: true },
+      { modelName: 'accountExpired', label: t('accountExpired'), type: 'checkbox' },
+      { modelName: 'accountLocked', label: t('accountLocked'), type: 'checkbox' },
+      { modelName: 'credentialsExpired', label: t('credentialsExpired'), type: 'checkbox' },
+    ],
+  },
+  rowClickFun: (evt, row, index) => {
+    if (roleGridRef.value) {
+      axios.get(Environment.apiContextPath('/api/system/role/queryRolesByUser?userId=') + row.id).then((response) => {
+        roleGridRef.value.replaceRowsFun(response.data.content);
+      });
+    }
+    if (orgTreeGridRef.value) {
+      axios.get(Environment.apiContextPath('/api/system/org/listAllOrgsWithSelectedStatusByUser?userId=') + row.id).then((response) => {
+        orgTreeGridRef.value.setNodes(response.data);
+      });
+    }
+  },
+};
+
+const roleConfigure = {
+  queryFormColsNumber: 4,
+  queryFormColsAuto: false,
+  queryFormFields: [],
+  hideBottom: true,
+  tableInitLoadData: false,
+  tableLeftColumnStickyNumber: 0,
+  tableTitle: t('system.role.gridTitle'),
+  tableRowKey: 'id',
+  tableDataUrl: '',
+  tablePagination: {
+    sortBy: 'lastModifyDate',
+    descending: true,
+    reqPageStart: 0,
+    rowsPerPage: 0,
+  },
+  toolbar: {
+    buttons: [
+      'refresh',
+      {
+        name: 'addRole',
+        label: t('system.role.action.addRole'),
+        icon: '',
+        enable: () => {
+          if (userGridRef.value) {
+            return userGridRef.value.getSelectedRows().length > 0;
+          }
+          return false;
+        },
+        click: () => {
+          selectRoleDialog.value.show({ userGrid: userGridRef, roleGrid: roleGridRef });
+        },
+      },
+      {
+        name: 'addAllRole',
+        label: t('system.role.action.addAllRole'),
+        icon: '',
+        enable: () => {
+          if (userGridRef.value) {
+            console.log(userGridRef.value.getSelectedRows());
+            return userGridRef.value.getSelectedRows().length > 0;
+          }
+          return false;
+        },
+        click: () => {
+          axios
+            .post(Environment.apiContextPath('/api/system/user/addAllRoles'), {
+              one: userGridRef.value.getSelectedRows()[0].id,
+              many: [],
+            })
+            .then((response) => {
+              axios
+                .get(Environment.apiContextPath('/api/system/role/queryRolesByUser?userId=') + userGridRef.value.getSelectedRows()[0].id)
+                .then((response) => {
+                  roleGridRef.value.replaceRowsFun(response.data.content);
+                });
+            });
+        },
+      },
+      {
+        name: 'removeRole',
+        label: t('system.role.action.removeRole'),
+        icon: '',
+        enable: () => {
+          if (userGridRef.value) {
+            return userGridRef.value.getSelectedRows().length > 0;
+          }
+          return false;
+        },
+        click: () => {
+          const roleIds = [];
+          for (const role of roleGridRef.value.getSelectedRows()) {
+            roleIds.push(role.id);
+          }
+          axios
+            .post(Environment.apiContextPath('/api/system/user/removeRoles'), {
+              one: userGridRef.value.getSelectedRows()[0].id,
+              many: roleIds,
+            })
+            .then((response) => {
+              axios
+                .get(Environment.apiContextPath('/api/system/role/queryRolesByUser?userId=') + userGridRef.value.getSelectedRows()[0].id)
+                .then((response) => {
+                  roleGridRef.value.replaceRowsFun(response.data.content);
+                });
+            });
+        },
+      },
+      {
+        name: 'removeAllRole',
+        label: t('system.role.action.removeAllRole'),
+        icon: '',
+        enable: () => {
+          if (userGridRef.value) {
+            return userGridRef.value.getSelectedRows().length > 0;
+          }
+          return false;
+        },
+        click: () => {
+          axios
+            .post(Environment.apiContextPath('/api/system/user/removeAllRoles'), {
+              one: userGridRef.value.getSelectedRows()[0].id,
+              many: [],
+            })
+            .then((response) => {
+              axios
+                .get(Environment.apiContextPath('/api/system/role/queryRolesByUser?userId=') + userGridRef.value.getSelectedRows()[0].id)
+                .then((response) => {
+                  roleGridRef.value.replaceRowsFun(response.data.content);
+                });
+            });
+        },
+      },
+    ],
+  },
+  tableColumns: [
+    { name: 'code', label: t('code') },
+    { name: 'name', label: t('name') },
+    { name: 'enable', label: t('isEnable'), format: (value) => (value ? t('yes') : t('no')) },
+  ],
+};
+
+const orgConfigure = {
+  actions: [
+    {
+      name: 'save',
+      label: '保存',
+      click: () => {
+        axios
+          .post(Environment.apiContextPath('/api/system/user/updateOrgs'), {
+            one: userGridRef.value.getSelectedRows()[0].id,
+            many: orgTreeGridRef.value.getTicked(),
+          })
+          .then((response) => {});
+      },
+    },
+  ],
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/views/likm/InfoPanel.vue b/io.sc.platform.core.frontend/src/views/likm/InfoPanel.vue
new file mode 100644
index 00000000..1b13197c
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/views/likm/InfoPanel.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <w-info-panel :column-num="2" label-align="center" value-align="center" :info="infoArray" dense> </w-info-panel>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+
+const infoArray = [
+  { label: '姓名', value: '张三' },
+  { label: '年龄', value: 18 },
+  { label: '性别', value: '男' },
+  { label: '爱好', value: '唱跳' },
+];
+</script>
diff --git a/io.sc.platform.core.frontend/src/views/likm/QuasarGrid.vue b/io.sc.platform.core.frontend/src/views/likm/QuasarGrid.vue
new file mode 100644
index 00000000..b5d0620a
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/views/likm/QuasarGrid.vue
@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <q-table
+      title="Treats"
+      table-style="height: 500px;"
+      :rows="rows"
+      :columns="columns"
+      row-key="name"
+      :flat="true"
+      :selection="'single'"
+      :separator="'cell'"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const columns = [
+  {
+    name: 'name',
+    required: true,
+    label: 'Dessert (100g serving)',
+    align: 'left',
+    field: (row) => row.name,
+    format: (val) => `${val}`,
+    sortable: true,
+  },
+  { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
+  { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
+  { name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
+  { name: 'protein', label: 'Protein (g)', field: 'protein' },
+  { name: 'sodium', label: 'Sodium (mg)', field: 'sodium' },
+  { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
+  { name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
+];
+
+const rows = [
+  {
+    name: 'Frozen Yogurt',
+    calories: 159,
+    fat: 6.0,
+    carbs: 24,
+    protein: 4.0,
+    sodium: 87,
+    calcium: '14%',
+    iron: '1%',
+  },
+  {
+    name: 'Ice cream sandwich',
+    calories: 237,
+    fat: 9.0,
+    carbs: 37,
+    protein: 4.3,
+    sodium: 129,
+    calcium: '8%',
+    iron: '1%',
+  },
+  {
+    name: 'Eclair',
+    calories: 262,
+    fat: 16.0,
+    carbs: 23,
+    protein: 6.0,
+    sodium: 337,
+    calcium: '6%',
+    iron: '7%',
+  },
+  {
+    name: 'Cupcake',
+    calories: 305,
+    fat: 3.7,
+    carbs: 67,
+    protein: 4.3,
+    sodium: 413,
+    calcium: '3%',
+    iron: '8%',
+  },
+  {
+    name: 'Gingerbread',
+    calories: 356,
+    fat: 16.0,
+    carbs: 49,
+    protein: 3.9,
+    sodium: 327,
+    calcium: '7%',
+    iron: '16%',
+  },
+  {
+    name: 'Jelly bean',
+    calories: 375,
+    fat: 0.0,
+    carbs: 94,
+    protein: 0.0,
+    sodium: 50,
+    calcium: '0%',
+    iron: '0%',
+  },
+  {
+    name: 'Lollipop',
+    calories: 392,
+    fat: 0.2,
+    carbs: 98,
+    protein: 0,
+    sodium: 38,
+    calcium: '0%',
+    iron: '2%',
+  },
+  {
+    name: 'Honeycomb',
+    calories: 408,
+    fat: 3.2,
+    carbs: 87,
+    protein: 6.5,
+    sodium: 562,
+    calcium: '0%',
+    iron: '45%',
+  },
+  {
+    name: 'Donut',
+    calories: 452,
+    fat: 25.0,
+    carbs: 51,
+    protein: 4.9,
+    sodium: 326,
+    calcium: '2%',
+    iron: '22%',
+  },
+  {
+    name: 'KitKat',
+    calories: 518,
+    fat: 26.0,
+    carbs: 65,
+    protein: 7,
+    sodium: 54,
+    calcium: '12%',
+    iron: '6%',
+  },
+];
+
+const separator = ref('vertical');
+</script>
+
+<style scoped lang="css">
+:deep(.q-table) {
+  border-collapse: collapse;
+}
+.q-table--vertical-separator td,
+.q-table--vertical-separator th,
+.q-table--cell-separator td,
+.q-table--cell-separator th {
+  border-bottom-width: 1px !important;
+}
+</style>
diff --git a/io.sc.platform.core.frontend/src/views/likm/Toolbar.vue b/io.sc.platform.core.frontend/src/views/likm/Toolbar.vue
new file mode 100644
index 00000000..f2910ede
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/views/likm/Toolbar.vue
@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <div class="flex flex-nowrap">
+      <div class="flex-none">这是测试标题</div>
+      <div class="flex-1">
+        <w-toolbar :no-icon="toolbar.noIcon" :align="toolbar.align" :x-gap="toolbar.xGap" :buttons="toolbar.buttons"></w-toolbar>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const toolbar = {
+  xGap: 8,
+  noIcon: false,
+  align: 'right',
+  buttons: [
+    [
+      {
+        name: 'query',
+        icon: 'search',
+        label: '查询',
+        beforeClick: (tableRef, context) => {},
+        click: (tableRef, context, _click) => {
+          console.info('查询');
+        },
+        afterClick: (tableRef, context) => {},
+      },
+      'separator',
+      {
+        name: 'moreQuery',
+        icon: 'search',
+        label: '更多查询',
+        click: (tableRef, context, _click) => {
+          console.info('更多查询');
+        },
+      },
+      'separator',
+      {
+        name: 'reset',
+        icon: 'autorenew',
+        label: '重置',
+        click: (tableRef, context, _click) => {
+          console.info('重置');
+        },
+      },
+    ],
+    'separator',
+    {
+      name: 'addnew',
+      extend: 'add',
+      icon: 'add',
+      label: '新增',
+      beforeClick: (tableRef, context) => {},
+      click: (tableRef, context, _click) => {
+        console.info('新增');
+      },
+      afterClick: (tableRef, context) => {},
+    },
+    'separator',
+    [
+      {
+        name: 'edit',
+        icon: 'edit',
+        label: '编辑',
+        click: (tableRef, context, _click) => {
+          console.info('编辑');
+        },
+      },
+      {
+        name: 'clone',
+        icon: 'edit',
+        label: '复制',
+        click: (tableRef, context, _click) => {
+          console.info('复制');
+        },
+      },
+      'separator',
+      [
+        {
+          name: 'editConfig',
+          icon: 'edit',
+          label: '修改配置信息',
+          click: (tableRef, context, _click) => {
+            console.info('修改配置信息');
+          },
+        },
+        {
+          name: 'editBasicInfo',
+          icon: 'edit',
+          label: '修改基本信息',
+          click: (tableRef, context, _click) => {
+            console.info('修改基本信息');
+          },
+        },
+        {
+          name: 'editVersionInfo',
+          icon: 'edit',
+          label: '修改版本信息',
+          click: (tableRef, context, _click) => {
+            console.info('修改版本信息');
+          },
+        },
+        'separator',
+        [
+          {
+            name: 'edit1',
+            icon: 'edit',
+            label: '修改详细信息1',
+            click: (tableRef, context, _click) => {
+              console.info('修改详细信息1');
+            },
+          },
+          {
+            name: 'edit2',
+            icon: 'edit',
+            label: '修改详细信息2',
+            click: (tableRef, context, _click) => {
+              console.info('修改详细信息2');
+            },
+          },
+        ],
+      ],
+    ],
+    'separator',
+    {
+      name: 'remove',
+      icon: 'remove',
+      label: '删除',
+      click: (tableRef, context, _click) => {
+        console.info('删除');
+      },
+    },
+    // { icon: 'home', label: '测试1' },
+    // { separator: true },
+    // { icon: 'home', label: '测试2' },
+    // { icon: 'home', label: '测试3' },
+    // { icon: 'home', label: '测试4' },
+    // { separator: true },
+    // { separator: true },
+    // { icon: 'home', label: '测试5' },
+    // { icon: 'home', label: '测试6' },
+    // { icon: 'home', label: '测试7' },
+    // { icon: 'home', label: '测试8' },
+    // { icon: 'home', label: '测试9' },
+    // { icon: 'home', label: '测试10' },
+    // { icon: 'home', label: '测试11' },
+    // { icon: 'home', label: '测试12' },
+    // { icon: 'home', label: '测试13' },
+  ],
+};
+</script>
diff --git a/io.sc.platform.core.frontend/template-project/src/views/Form1.vue b/io.sc.platform.core.frontend/template-project/src/views/Form1.vue
new file mode 100644
index 00000000..444f06df
--- /dev/null
+++ b/io.sc.platform.core.frontend/template-project/src/views/Form1.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <w-form :fields="fields" :cols-num-auto="false" :cols-num="3"></w-form>
+  </div>
+</template>
+<script setup lang="ts">
+const fields = [
+  {
+    label: '姓名',
+    name: 'name',
+    type: 'text',
+    required: true,
+    colspan: 2,
+    button: {
+      round: false,
+      icon: 'home',
+      label: '选择',
+      click: () => {
+        console.info('11111');
+      },
+    },
+  },
+  {
+    label: '年龄',
+    name: 'age',
+    type: 'number',
+    required: true,
+  },
+];
+</script>
diff --git a/io.sc.platform.core.frontend/template-project/src/views/Grid1.vue b/io.sc.platform.core.frontend/template-project/src/views/Grid1.vue
new file mode 100644
index 00000000..d7e5272c
--- /dev/null
+++ b/io.sc.platform.core.frontend/template-project/src/views/Grid1.vue
@@ -0,0 +1,4 @@
+<template>
+  <div>2222</div>
+</template>
+<script setup lang="ts"></script>