[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>
2 years ago · deaeb2bd23
8 changed files with 131 additions and 83 deletions
--- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
+++ b/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',
  }
 }

--- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
+++ b/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: '删除',
  }
 }

--- a/dolphinscheduler-ui-next/src/router/modules/security.ts
+++ b/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: '租户管理',
--- a/dolphinscheduler-ui-next/src/views/security/tenant-manage/components/tenant-modal.tsx
+++ b/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']}
                  />
--- a/dolphinscheduler-ui-next/src/views/security/tenant-manage/components/use-modalData.ts
+++ b/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)
--- a/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.module.scss
+++ b/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;
  }
-}
+}
--- a/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
+++ b/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>
    )
--- a/dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts
+++ b/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')
+                }
+              )
+            ]
+          })
        }
      }
    ]