修改代码模板.

orion-ops-ui/src/assets/style/layout.less

@@ -7,18 +7,52 @@
 
 .table-search-card {
   width: 100%;
+  padding-top: 16px;
   margin-bottom: 16px;
+
+  .arco-form-item {
+    margin-bottom: 0;
+  }
+}
+
+.table-bar-handle {
+  display: flex;
+  align-items: center;
+  justify-content: end
 }
 
 .table-card {
   width: 100%;
+
+  .arco-card-header {
+    padding: 8px 16px 0 16px;
+
+    .arco-card-header-title {
+      display: flex;
+      justify-content: space-between;
+
+      .table-title {
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        font-weight: 600;
+      }
+    }
+  }
+
 }
 
 .table-wrapper {
-  margin-top: 16px;
+  &-8 {
+    margin-top: 8px;
+  }
+
+  &-16 {
+    margin-top: 16px;
+  }
 }
 
-.table-option-wrapper {
+.table-handle-wrapper {
   .arco-btn-text {
     padding: 0 8px;
   }

orion-ops-ui/src/types/global.ts

@@ -26,9 +26,13 @@ export interface PostData {
 export interface Pagination {
   page?: number;
   limit?: number;
-  current?: number;
-  pageSize?: number;
-  total?: number;
+}
+
+export interface DataGrid<T> {
+  page: number;
+  limit: number;
+  total: number;
+  rows: T[];
 }
 
 export type TimeRanger = [string, string];

orion-ops-ui/src/types/table.ts

@@ -0,0 +1,25 @@
+import { PaginationProps, TableRowSelection } from '@arco-design/web-vue';
+
+/**
+ * 默认分页
+ */
+export const defaultPagination = (): PaginationProps => {
+  return {
+    current: 1,
+    pageSize: 10,
+    showTotal: true,
+    showPageSize: true,
+    pageSizeOptions: [10, 20, 30, 50, 100]
+  };
+};
+
+/**
+ * 默认行选择器
+ */
+export const defaultRowSelection = (): TableRowSelection => {
+  return {
+    type: 'checkbox',
+    showCheckedAll: true,
+    onlyCurrent: true,
+  };
+};

orion-ops-ui/src/utils/index.ts

@@ -57,10 +57,12 @@ export function isEmptyStr(val: any) {
   return typeof (val) === 'undefined' || val == null || val === '';
 }
 
+export const YMD_HMS = 'yyyy-MM-dd HH:mm:ss';
+
 /**
  * 格式化时间
  */
-export function dateFormat(date = new Date(), pattern = 'yyyy-MM-dd HH:mm:ss') {
+export function dateFormat(date = new Date(), pattern = YMD_HMS) {
   const o = {
     'M+': date.getMonth() + 1,
     'd+': date.getDate(),

orion-ops-ui/src/views/system/menu/components/menu-form-modal.vue

@@ -107,16 +107,15 @@
 </script>
 
 <script lang="ts" setup>
-  import { reactive, ref, watch, watchEffect } from 'vue';
+  import { reactive, ref, watch } from 'vue';
   import useLoading from '@/hooks/loading';
   import useVisible from '@/hooks/visible';
-  import formRules from '../type/form.rules';
-  import { MenuTypeEnum, MenuVisibleEnum, MenuCacheEnum } from '../type/enum.types';
+  import formRules from '../types/form.rules';
+  import { MenuTypeEnum, MenuVisibleEnum, MenuCacheEnum } from '../types/enum.types';
   import { toOptions } from '@/utils/enum';
   import IconPicker from '@sanqi377/arco-vue-icon-picker';
   import MenuTreeSelector from '@/views/system/menu/components/menu-tree-selector.vue';
   import { createMenu, updateMenu } from '@/api/system/menu';
-  import { keysIn } from 'lodash';
 
   const { visible, setVisible } = useVisible();
   const { loading, setLoading } = useLoading();

orion-ops-ui/src/views/system/menu/components/menu-table.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 搜索 -->
   <a-card class="general-card table-search-card">
-    <a-row style="margin-top: 16px">
+    <a-row>
       <!-- 搜索框 -->
       <a-col :span="12">
         <a-form :model="formModel"
@@ -30,7 +30,7 @@
         </a-form>
       </a-col>
       <!-- 操作 -->
-      <a-col :span="12" class="form-option">
+      <a-col :span="12" class="table-bar-handle">
         <a-space>
           <!-- 新增 -->
           <a-button type="primary"
@@ -69,7 +69,7 @@
   <!-- 表格 -->
   <a-card class="general-card table-card">
     <a-table row-key="id"
-             class="table-wrapper"
+             class="table-wrapper-16"
              ref="tableRef"
              label-align="left"
              :loading="fetchLoading"
@@ -115,8 +115,8 @@
         </a-space>
       </template>
       <!-- 操作 -->
-      <template #option="{ record }">
-        <div class="table-option-wrapper">
+      <template #handle="{ record }">
+        <div class="table-handle-wrapper">
           <!-- 新增 -->
           <a-button type="text"
                     size="mini"
@@ -158,17 +158,17 @@
 <script lang="ts" setup>
   import { reactive, ref, onUnmounted } from 'vue';
   import useLoading from '@/hooks/loading';
-  import { getMenuList, deleteMenu, updateMenuStatus, MenuQueryResponse } from '@/api/system/menu';
+  import { getMenuList, deleteMenu, updateMenuStatus, MenuQueryRequest, MenuQueryResponse } from '@/api/system/menu';
   import { toOptions, getEnumValue, toggleEnumValue } from '@/utils/enum';
-  import { MenuStatusEnum, MenuVisibleEnum, MenuTypeEnum } from '../type/enum.types';
-  import columns from '../type/table.columns';
+  import { MenuStatusEnum, MenuVisibleEnum, MenuTypeEnum } from '../types/enum.types';
+  import columns from '../types/table.columns';
   import { Message } from '@arco-design/web-vue';
   import { useCacheStore } from '@/store';
 
   const cacheStore = useCacheStore();
 
   const formRef = ref<any>();
-  const formModel = reactive({
+  const formModel = reactive<MenuQueryRequest>({
     name: undefined,
     status: undefined
   });
@@ -220,7 +220,7 @@
           }
         }
       }
-      Message.success({ content: '删除成功' });
+      Message.success('删除成功');
     } finally {
       setFetchLoading(false);
     }
@@ -284,13 +284,5 @@
 </script>
 
 <style lang="less" scoped>
-  .form-option {
-    display: flex;
-    align-items: center;
-    justify-content: end
-  }
 
-  :deep(.arco-form-item) {
-    margin-bottom: 0 !important;
-  }
 </style>

orion-ops-ui/src/views/system/menu/index.vue

@@ -19,9 +19,10 @@
 
 <script lang="ts" setup>
   import MenuTable from '@/views/system/menu/components/menu-table.vue';
-  import { ref } from 'vue';
   import MenuFormModal from '@/views/system/menu/components/menu-form-modal.vue';
 
+  import { ref } from 'vue';
+
   const table = ref<any>();
   const modal = ref<any>();
 

orion-ops-ui/src/views/system/menu/types/table.columns.ts

@@ -49,7 +49,7 @@ const columns = [
     tooltip: true,
   }, {
     title: '操作',
-    slotName: 'option',
+    slotName: 'handle',
     width: 158,
     fixed: 'right',
   }