This is an automated email from the ASF dual-hosted git repository.
zhongjiajie pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new deaeb2b [Feature][UI Next]Improve tenant manage (#8001)
deaeb2b is described below
commit deaeb2bd23f5b978d9ef9af517a4619553301242
Author: labbomb <[email protected]>
AuthorDate: Fri Jan 14 01:48:46 2022 +0800
[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 <[email protected]>
Co-authored-by: mask <[email protected]>
---
.../src/locales/modules/en_US.ts | 15 ++--
.../src/locales/modules/zh_CN.ts | 15 ++--
.../src/router/modules/security.ts | 4 +-
.../tenant-manage/components/tenant-modal.tsx | 24 ++++--
.../tenant-manage/components/use-modalData.ts | 6 +-
.../views/security/tenant-manage/index.module.scss | 10 ++-
.../src/views/security/tenant-manage/index.tsx | 47 +++++++----
.../src/views/security/tenant-manage/use-table.ts | 93 ++++++++++++----------
8 files changed, 131 insertions(+), 83 deletions(-)
diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
index a425e51..6cf0088 100644
--- 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',
}
}
diff --git a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
index 3f3c855..ac768f6 100644
--- 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: '删除',
}
}
diff --git a/dolphinscheduler-ui-next/src/router/modules/security.ts
b/dolphinscheduler-ui-next/src/router/modules/security.ts
index 85617d2..baac494 100644
--- 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: '租户管理',
diff --git
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
index a57fe3a..8eb2920 100644
---
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']}
/>
diff --git
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
index d0d31a5..2caa47c 100644
---
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)
diff --git
a/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.module.scss
b/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.module.scss
index bd7ded4..5073137 100644
---
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;
}
-}
\ No newline at end of file
+}
diff --git
a/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
b/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
index b135a05..eac154b 100644
--- 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>
)
diff --git
a/dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts
b/dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts
index f77630a..7526ed8 100644
--- 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')
+ }
+ )
+ ]
+ })
}
}
]
