[Feature][UI Next]Improve tenant manage (#8001)

* Improve tenant manage

* [Feature][UI Next] Delete Conditions Component (#7999)

* delete condition component
* rename file manage route

* [fix-7671][plugin] Supports whether SQL is placed in the same session for configuration(fix-7671) (#7675)

-Supports whether SQL is placed in the same session for configuration

* Add NSpace

* Repair internationalization

* Improve tenant manage

* Add NSpace

* Repair internationalization

* Fix tenant management problems

Co-authored-by: Devosend <devosend@gmail.com>
Co-authored-by: mask <39329477+Narcasserun@users.noreply.github.com>

dolphinscheduler-ui-next/src/locales/modules/en_US.ts

@@ -215,20 +215,23 @@ const project = {
 
 const security = {
   tenant: {
+    tenant_manage: 'Tenant Manage',
     create_tenant: 'Create Tenant',
     search_tips: 'Please enter keywords',
     num: 'Serial number',
-    tenantCode: 'Operating System Tenant',
+    tenant_code: 'Operating System Tenant',
     description: 'Description',
-    queueName: 'QueueName',
-    createTime: 'Create Time',
-    updateTime: 'Update Time',
+    queue_name: 'QueueName',
+    create_time: 'Create Time',
+    update_time: 'Update Time',
     actions: 'Operation',
     edit_tenant: 'Edit Tenant',
-    tenantCode_tips: 'Please enter the operating system tenant',
-    queueName_tips: 'Please select queue',
+    tenant_code_tips: 'Please enter the operating system tenant',
+    queue_name_tips: 'Please select queue',
     description_tips: 'Please enter a description',
     delete_confirm: 'Delete?',
+    edit: 'Edit',
+    delete: 'Delete',
   }
 }
 

dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts

@@ -214,20 +214,23 @@ const project = {
 
 const security = {
   tenant: {
+    tenant_manage: '租户管理',
     create_tenant: '创建租户',
     search_tips: '请输入关键词',
     num: '编号',
-    tenantCode: '操作系统租户',
+    tenant_code: '操作系统租户',
     description: '描述',
-    queueName: '队列',
-    createTime: '创建时间',
-    updateTime: '更新时间',
+    queue_name: '队列',
+    create_time: '创建时间',
+    update_time: '更新时间',
     actions: '操作',
     edit_tenant: '编辑租户',
-    tenantCode_tips: '请输入操作系统租户',
-    queueName_tips: '请选择队列',
+    tenant_code_tips: '请输入操作系统租户',
+    queue_name_tips: '请选择队列',
     description_tips: '请输入描述',
     delete_confirm: '确定删除吗?',
+    edit: '编辑',
+    delete: '删除',
   }
 }
 

dolphinscheduler-ui-next/src/router/modules/security.ts

@@ -26,12 +26,12 @@ export default {
   path: '/security',
   name: 'security',
   meta: { title: '安全中心' },
-  redirect: { name: 'tenement-manage' },
+  redirect: { name: 'tenant-manage' },
   component: () => import('@/layouts/content'),
   children: [
     {
       path: '/security/tenant-manage',
-      name: 'tenement-manage',
+      name: 'tenant-manage',
       component: components['tenant-manage'],
       meta: {
         title: '租户管理',

dolphinscheduler-ui-next/src/views/security/tenant-manage/components/tenant-modal.tsx

@@ -40,8 +40,20 @@ const TenantModal = defineComponent({
       handleValidate(props.statusRef)
     }
 
-    onMounted(() => {
-      getListData()
+    watch(() => props.showModalRef, () => {
+      props.showModalRef && getListData()
+    })
+    
+    watch(() => props.statusRef, () => {
+      if (props.statusRef === 0) {
+        variables.model.tenantCode = ''
+        variables.model.description = ''
+      } else {
+        variables.model.id = props.row.id
+        variables.model.tenantCode = props.row.tenantCode
+        variables.model.queueId = props.row.queueId
+        variables.model.description = props.row.description
+      }
     })
 
     watch(() => props.row, () => {
@@ -89,12 +101,12 @@ const TenantModal = defineComponent({
                 size="small"
                 style="{ maxWidth: '240px' }"
               >
-                <NFormItem label={t('security.tenant.tenantCode')} path="tenantCode">
-                  <NInput disabled={this.statusRef === 1} placeholder={t('security.tenant.tenantCode_tips')} v-model={[this.model.tenantCode, 'value']} />
+                <NFormItem label={t('security.tenant.tenant_code')} path="tenantCode">
+                  <NInput disabled={this.statusRef === 1} placeholder={t('security.tenant.tenant_code_tips')} v-model={[this.model.tenantCode, 'value']} />
                 </NFormItem>
-                <NFormItem label={t('security.tenant.queueName')} path="queueId">
+                <NFormItem label={t('security.tenant.queue_name')} path="queueId">
                   <NSelect
-                    placeholder={t('security.tenant.queueName_tips')}
+                    placeholder={t('security.tenant.queue_name_tips')}
                     options={this.model.generalOptions}
                     v-model={[this.model.queueId, 'value']}
                   />

dolphinscheduler-ui-next/src/views/security/tenant-manage/components/use-modalData.ts

@@ -27,10 +27,10 @@ export function useModalData(props: any, ctx: SetupContext<("cancelModal" | "con
   const variables = reactive({
     tenantFormRef: ref(),
     model: {
-      id: ref<number>(0),
+      id: ref<number>(-1),
       tenantCode: ref(''),
       description: ref(''),
-      queueId: ref<number>(0),
+      queueId: ref<number>(-1),
       generalOptions: []
     },
     rules: {
@@ -82,6 +82,8 @@ export function useModalData(props: any, ctx: SetupContext<("cancelModal" | "con
         description: variables.model.description
       }
       createTenant(data).then((res: any) => {
+        variables.model.tenantCode = ''
+        variables.model.description = ''
         ctx.emit('confirmModal', props.showModalRef)
       }, (err: any) => {
         console.log('err', err)

dolphinscheduler-ui-next/src/views/security/tenant-manage/index.module.scss

@@ -27,12 +27,16 @@
     }
   }
 
-  .form, .pagination {
-    margin-top: 16px;
+  .table-card {
+    margin-top: 8px;
+
+    .pagination {
+      margin-top: 20px;
+    }
   }
 
   .pagination {
     display: flex;
     justify-content: center;
   }
-}
+}

dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx

@@ -29,6 +29,7 @@ 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',
@@ -58,6 +59,16 @@ const tenementManage = defineComponent({
       requestData()
     }
 
+    const handleChangePageSize = () => {
+      variables.page = 1
+      requestData()
+    }
+
+    const handleSearch = () => {
+      variables.page = 1
+      requestData()
+    }
+
     onMounted(() => {
       createColumns(variables)
       requestData()
@@ -74,6 +85,8 @@ const tenementManage = defineComponent({
       handleModalChange,
       onCancelModal,
       onConfirmModal,
+      handleSearch,
+      handleChangePageSize
     }
   },
   render() {
@@ -91,11 +104,10 @@ const tenementManage = defineComponent({
               <NInput
                 size='small'
                 v-model={[this.searchVal, 'value']}
-                on-input={this.requestData}
                 placeholder={t('security.tenant.search_tips')}
                 clearable
               />
-              <NButton size='small'>
+              <NButton size='small' onClick={this.handleSearch}>
                 <NIcon>
                   <SearchOutlined />
                 </NIcon>
@@ -103,21 +115,24 @@ const tenementManage = defineComponent({
             </div>
           </div>
         </NCard>
-        <div class={styles.form}>
+        <Card
+          title={t('security.tenant.tenant_manage')}
+          class={styles['table-card']}
+        >
           <NDataTable columns={this.columns} data={this.tableData} />
-        </div>
-        <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.requestData}
-          />
-        </div>
+          <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}
+            />
+          </div>
+        </Card>
         <TenantModal showModalRef={this.showModalRef} statusRef={this.statusRef} row={this.row} onCancelModal={this.onCancelModal} onConfirmModal={this.onConfirmModal}></TenantModal>
       </div>
     )

dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts

@@ -18,7 +18,7 @@
 import { useAsyncState } from '@vueuse/core'
 import { queryTenantListPaging, deleteTenantById } from '@/service/modules/tenants'
 import { reactive, h, ref } from 'vue'
-import { NButton, NPopconfirm } from 'naive-ui'
+import { NButton, NPopconfirm, NSpace, NTooltip } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { DeleteOutlined, EditOutlined } from '@vicons/antd'
 
@@ -35,7 +35,7 @@ export function useTable() {
     deleteTenantById(row.id).then(() => {
       getTableData({
         pageSize: variables.pageSize,
-        pageNo: variables.page,
+        pageNo: (variables.tableData.length === 1 && variables.page > 1) ? variables.page - 1 : variables.page,
         searchVal: variables.searchVal
       })
     })
@@ -48,7 +48,7 @@ export function useTable() {
         key: 'num',
       },
       {
-        title: t('security.tenant.tenantCode'),
+        title: t('security.tenant.tenant_code'),
         key: 'tenantCode',
       },
       {
@@ -56,58 +56,67 @@ export function useTable() {
         key: 'description',
       },
       {
-        title: t('security.tenant.queueName'),
+        title: t('security.tenant.queue_name'),
         key: 'queueName',
       },
       {
-        title: t('security.tenant.createTime'),
+        title: t('security.tenant.create_time'),
         key: 'createTime',
       },
       {
-        title: t('security.tenant.updateTime'),
+        title: t('security.tenant.update_time'),
         key: 'updateTime',
       },
       {
         title: t('security.tenant.actions'),
         key: 'actions',
         render(row: any) {
-          return h('div', null, [
-            h(
-              NButton,
-              {
-                circle: true,
-                type: 'info',
-                size: 'small',
-                onClick: () => {
-                  handleEdit(row)
+          return h(NSpace, null, {
+            default: () => [
+              h(
+                NTooltip, {}, {
+                  trigger: () => h(NButton,
+                    {
+                      circle: true,
+                      type: 'info',
+                      size: 'small',
+                      onClick: () => {
+                        handleEdit(row)
+                      }
+                    },
+                    {
+                      icon: () => h(EditOutlined)
+                    }
+                  ),
+                  default: () => t('security.tenant.edit')
                 }
-              },
-              {
-                icon: () => h(EditOutlined)
-              }
-            ),
-            h(
-              NPopconfirm,
-              {
-                onPositiveClick: () => { handleDelete(row) }
-              },
-              {
-                trigger: () => h(
-                  NButton,
-                  {
-                    circle: true,
-                    type: 'error',
-                    size: 'small',
-                    style: {'margin-left': '5px'},
-                  },
-                  {
-                    icon: () => h(DeleteOutlined),
-                  }
-                ),
-                default: () => {return t('security.tenant.delete_confirm')}
-              }
-            )
-          ])
+              ),
+              h(
+                NPopconfirm,
+                {
+                  onPositiveClick: () => { handleDelete(row) }
+                },
+                {
+                  trigger: () => h(
+                    NTooltip, {}, {
+                      trigger: () => h(NButton,
+                        {
+                          circle: true,
+                          type: 'error',
+                          size: 'small',
+                        },
+                        {
+                          icon: () => h(DeleteOutlined)
+                        }
+                      ),
+                      default: () => t('security.tenant.delete')
+                    }
+                  ),
+                  default: () => t('security.tenant.delete_confirm')
+                }
+              )
+            ]
+          })
         }
       }
     ]