chore: table style

src/components/Table/src/components/TableHeader.vue

@@ -160,8 +160,8 @@
     &__tableTitle {
       flex: 1;
       display: flex;
-      flex-wrap: wrap;
+      align-items: center;
-      align-content: flex-start;
+      justify-content: flex-start;
 
       > * {
         margin-right: 4px;

src/views/system/devtools/genTable/genTable.data.ts

@@ -4,6 +4,26 @@ import {h} from 'vue';
 import {Tag} from 'ant-design-vue';
 
 export const columns: BasicColumn[] = [
+  {
+    title: '模板名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '模板名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '模板名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '模板名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '模板名称',
+    dataIndex: 'name',
+  },
   {
     title: '模板名称',
     dataIndex: 'name',

src/views/system/devtools/genTable/index.vue

@@ -1,14 +1,35 @@
 <template>
-  <div>
+  <PageWrapper
+    contentClass="flex"
+    contentFullHeight
+    fixedHeight
+    dense
+  >
+    <div class="m-4 mr-0 overflow-hidden bg-white w-1/4 xl:w-1/5">
+      <BasicTree title="流程分类"
+                 toolbar
+                 search
+                 defaultExpandAll
+                 :clickRowToExpand="false"
+                 :treeData="state.treeData"
+                 :fieldNames="{ key: 'id', title: 'name' }"
+                 @select="handleSelect"
+      />
+    </div>
     <BasicTable
+      class="w-3/4 xl:w-4/5"
       @register="registerTable"
       @selection-change="handleSelectionChange"
     >
-      <template #toolbar>
+      <template #tableTitle>
         <a-button
           type="primary"
           @click="handleAdd()"
         >新增</a-button>
+        <a-button
+          type="primary"
+          @click="handleAdd()"
+        >数据库导入表单</a-button>
         <a-button
           type="primary"
           :disabled="state.single"
@@ -18,7 +39,27 @@
           type="primary"
           :disabled="state.multiple"
           @click="handleDel()"
-        >删除</a-button>
+        >移除</a-button>
+        <a-button
+          type="primary"
+          :disabled="state.single"
+          @click="handleEdit()"
+        >生成代码</a-button>
+        <a-button
+          type="primary"
+          :disabled="state.single"
+          @click="handleEdit()"
+        >创建菜单</a-button>
+        <a-button
+          type="primary"
+          :disabled="state.single"
+          @click="handleEdit()"
+        >添加到java类型</a-button>
+        <a-button
+          type="primary"
+          :disabled="state.single"
+          @click="handleEdit()"
+        >获取流程表单</a-button>
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'action'">
@@ -30,22 +71,29 @@
                 onClick: handleEdit.bind(null, record)
               },
               {
-                label: '复制',
+                label: '移除',
-                icon: 'fa-regular:copy',
+                icon: 'ant-design:delete-outlined',
-                onClick: handleCopy.bind(null, record)
+                color: 'error',
-              },
+                onClick: handleDel.bind(null, record)
+              }]"
+            :dropDownActions="[
               {
                 label: '删除',
                 icon: 'ant-design:delete-outlined',
                 color: 'error',
                 onClick: handleDel.bind(null, record)
+              },
+              {
+                label: '同步数据库',
+                icon: 'fa-regular:copy',
+                onClick: handleCopy.bind(null, record)
               }]"
           />
         </template>
       </template>
     </BasicTable>
     <GenTableModal @register="registerModal" @success="handleRefreshTable"/>
-  </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts" setup>
@@ -56,10 +104,13 @@
   import GenTableModal from './GenTableModal.vue';
   import { columns, searchFormSchema } from './genTable.data';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import {PageWrapper} from '/@/components/Page';
+  import {BasicTree, TreeItem} from '/@/components/Tree';
 
   interface TableState {
     single: boolean;
     multiple: boolean;
+    treeData: TreeItem[];
   }
 
   /** 通用变量统一声明区域 */
@@ -67,7 +118,8 @@
     // 非单个禁用
     single: true,
     // 非多个禁用
-    multiple: true
+    multiple: true,
+    treeData: []
   });
   const { createConfirm, createMessage } = useMessage();
   const [registerModal, { openModal }] = useModal();
@@ -93,7 +145,7 @@
       width: 220,
       title: '操作',
       dataIndex: 'action',
-      fixed: false
+      fixed: 'right'
     },
     handleSearchInfoFn: () => clearSelectedRowKeys()
   });