From 2d50079e24fe18c0cb903cd49eec07ad0d9f96a4 Mon Sep 17 00:00:00 2001
From: lijiahang <ljh1553488six@139.com>
Date: Fri, 11 Aug 2023 16:17:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BB=A3=E7=A0=81=E6=A8=A1?=
 =?UTF-8?q?=E6=9D=BF.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 orion-ops-ui/src/assets/style/layout.less     | 38 ++++++++++++++++++-
 orion-ops-ui/src/types/global.ts              | 10 +++--
 orion-ops-ui/src/types/table.ts               | 25 ++++++++++++
 orion-ops-ui/src/utils/index.ts               |  4 +-
 .../menu/components/menu-form-modal.vue       |  7 ++--
 .../system/menu/components/menu-table.vue     | 28 +++++---------
 orion-ops-ui/src/views/system/menu/index.vue  |  3 +-
 .../system/menu/{type => types}/enum.types.ts |  0
 .../system/menu/{type => types}/form.rules.ts |  0
 .../menu/{type => types}/table.columns.ts     |  2 +-
 10 files changed, 87 insertions(+), 30 deletions(-)
 create mode 100644 orion-ops-ui/src/types/table.ts
 rename orion-ops-ui/src/views/system/menu/{type => types}/enum.types.ts (100%)
 rename orion-ops-ui/src/views/system/menu/{type => types}/form.rules.ts (100%)
 rename orion-ops-ui/src/views/system/menu/{type => types}/table.columns.ts (97%)

diff --git a/orion-ops-ui/src/assets/style/layout.less b/orion-ops-ui/src/assets/style/layout.less
index 1cc3918c..50525289 100644
--- a/orion-ops-ui/src/assets/style/layout.less
+++ b/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;
   }
diff --git a/orion-ops-ui/src/types/global.ts b/orion-ops-ui/src/types/global.ts
index d28b5d4a..8095a246 100644
--- a/orion-ops-ui/src/types/global.ts
+++ b/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];
diff --git a/orion-ops-ui/src/types/table.ts b/orion-ops-ui/src/types/table.ts
new file mode 100644
index 00000000..840c20e4
--- /dev/null
+++ b/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,
+  };
+};
diff --git a/orion-ops-ui/src/utils/index.ts b/orion-ops-ui/src/utils/index.ts
index 959ee36c..2ca87960 100644
--- a/orion-ops-ui/src/utils/index.ts
+++ b/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(),
diff --git a/orion-ops-ui/src/views/system/menu/components/menu-form-modal.vue b/orion-ops-ui/src/views/system/menu/components/menu-form-modal.vue
index bc8ad0b6..37b578f9 100644
--- a/orion-ops-ui/src/views/system/menu/components/menu-form-modal.vue
+++ b/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();
diff --git a/orion-ops-ui/src/views/system/menu/components/menu-table.vue b/orion-ops-ui/src/views/system/menu/components/menu-table.vue
index 46e96a88..9a559baa 100644
--- a/orion-ops-ui/src/views/system/menu/components/menu-table.vue
+++ b/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>
diff --git a/orion-ops-ui/src/views/system/menu/index.vue b/orion-ops-ui/src/views/system/menu/index.vue
index f871ca1c..2017294c 100644
--- a/orion-ops-ui/src/views/system/menu/index.vue
+++ b/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>();
 
diff --git a/orion-ops-ui/src/views/system/menu/type/enum.types.ts b/orion-ops-ui/src/views/system/menu/types/enum.types.ts
similarity index 100%
rename from orion-ops-ui/src/views/system/menu/type/enum.types.ts
rename to orion-ops-ui/src/views/system/menu/types/enum.types.ts
diff --git a/orion-ops-ui/src/views/system/menu/type/form.rules.ts b/orion-ops-ui/src/views/system/menu/types/form.rules.ts
similarity index 100%
rename from orion-ops-ui/src/views/system/menu/type/form.rules.ts
rename to orion-ops-ui/src/views/system/menu/types/form.rules.ts
diff --git a/orion-ops-ui/src/views/system/menu/type/table.columns.ts b/orion-ops-ui/src/views/system/menu/types/table.columns.ts
similarity index 97%
rename from orion-ops-ui/src/views/system/menu/type/table.columns.ts
rename to orion-ops-ui/src/views/system/menu/types/table.columns.ts
index 1a50670d..f82edc0f 100644
--- a/orion-ops-ui/src/views/system/menu/type/table.columns.ts
+++ b/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',
   }