From 553159f780fce02aa2dee0a8e64081c7b01b1234 Mon Sep 17 00:00:00 2001
From: songjianet <1778651752@qq.com>
Date: Mon, 11 Jul 2022 15:46:04 +0800
Subject: [PATCH] [Refactor][UI] Refactor tenant manage using NSpace component.
 (#10879)

---
 .../security/tenant-manage/index.module.scss  | 38 -------------
 .../views/security/tenant-manage/index.tsx    | 57 +++++++++----------
 2 files changed, 27 insertions(+), 68 deletions(-)
 delete mode 100644 dolphinscheduler-ui/src/views/security/tenant-manage/index.module.scss

diff --git a/dolphinscheduler-ui/src/views/security/tenant-manage/index.module.scss b/dolphinscheduler-ui/src/views/security/tenant-manage/index.module.scss
deleted file mode 100644
index 80745b2e3e..0000000000
--- a/dolphinscheduler-ui/src/views/security/tenant-manage/index.module.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.container {
-  width: 100%;
-
-  .header {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .table-card {
-    margin-top: 8px;
-
-    .pagination {
-      margin-top: 20px;
-    }
-  }
-
-  .pagination {
-    display: flex;
-    justify-content: center;
-  }
-}
diff --git a/dolphinscheduler-ui/src/views/security/tenant-manage/index.tsx b/dolphinscheduler-ui/src/views/security/tenant-manage/index.tsx
index e6410ca3af..75ca5fde9d 100644
--- a/dolphinscheduler-ui/src/views/security/tenant-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/tenant-manage/index.tsx
@@ -25,12 +25,10 @@ import {
   NCard,
   NSpace
 } from 'naive-ui'
-import styles from './index.module.scss'
 import { useTable } from './use-table'
 import { SearchOutlined } from '@vicons/antd'
 import TenantModal from './components/tenant-modal'
 import { useI18n } from 'vue-i18n'
-import Card from '@/components/card'
 
 const tenementManage = defineComponent({
   name: 'tenement-manage',
@@ -93,9 +91,9 @@ const tenementManage = defineComponent({
   render() {
     const { t, loadingRef } = this
     return (
-      <div class={styles.container}>
-        <NCard>
-          <div class={styles.header}>
+      <NSpace vertical>
+        <NCard size='small'>
+          <NSpace justify='space-between'>
             <NButton
               size='small'
               onClick={this.handleModalChange}
@@ -117,32 +115,31 @@ const tenementManage = defineComponent({
                 </NIcon>
               </NButton>
             </NSpace>
-          </div>
+          </NSpace>
         </NCard>
-        <Card
-          title={t('security.tenant.tenant_manage')}
-          class={styles['table-card']}
-        >
-          <NDataTable
-            loading={loadingRef}
-            columns={this.columns}
-            data={this.tableData}
-            row-class-name='items'
-            scrollX={this.tableWidth}
-          />
-          <div class={styles.pagination}>
-            <NPagination
-              v-model:page={this.page}
-              v-model:page-size={this.pageSize}
-              page-count={this.totalPage}
-              show-size-picker
-              page-sizes={[10, 30, 50]}
-              show-quick-jumper
-              onUpdatePage={this.requestData}
-              onUpdatePageSize={this.handleChangePageSize}
+        <NCard size='small'>
+          <NSpace vertical>
+            <NDataTable
+              loading={loadingRef}
+              columns={this.columns}
+              data={this.tableData}
+              row-class-name='items'
+              scrollX={this.tableWidth}
             />
-          </div>
-        </Card>
+            <NSpace justify='center'>
+              <NPagination
+                v-model:page={this.page}
+                v-model:page-size={this.pageSize}
+                page-count={this.totalPage}
+                show-size-picker
+                page-sizes={[10, 30, 50]}
+                show-quick-jumper
+                onUpdatePage={this.requestData}
+                onUpdatePageSize={this.handleChangePageSize}
+              />
+            </NSpace>
+          </NSpace>
+        </NCard>
         <TenantModal
           showModalRef={this.showModalRef}
           statusRef={this.statusRef}
@@ -150,7 +147,7 @@ const tenementManage = defineComponent({
           onCancelModal={this.onCancelModal}
           onConfirmModal={this.onConfirmModal}
         />
-      </div>
+      </NSpace>
     )
   }
 })