Browse Source

[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>
3.0.0/version-upgrade
labbomb 3 years ago committed by GitHub
parent
commit
deaeb2bd23
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 15
      dolphinscheduler-ui-next/src/locales/modules/en_US.ts
  2. 15
      dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
  3. 4
      dolphinscheduler-ui-next/src/router/modules/security.ts
  4. 24
      dolphinscheduler-ui-next/src/views/security/tenant-manage/components/tenant-modal.tsx
  5. 6
      dolphinscheduler-ui-next/src/views/security/tenant-manage/components/use-modalData.ts
  6. 10
      dolphinscheduler-ui-next/src/views/security/tenant-manage/index.module.scss
  7. 47
      dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
  8. 93
      dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts

15
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',
}
}

15
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: '删除',
}
}

4
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: '租户管理',

24
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']}
/>

6
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)

10
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;
}
}
}

47
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>
)

93
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')
}
)
]
})
}
}
]

Loading…
Cancel
Save