From 2e530649f8a34b5686de2f0ee073a9d0e5e47ad9 Mon Sep 17 00:00:00 2001 From: labbomb <739955946@qq.com> Date: Thu, 13 Jan 2022 09:05:04 +0800 Subject: [PATCH] [Feature][UI Next]Improve the tenant Modal (#7972) * Enabling Route Forwarding * Added the tenant management page * tenant-modal * Improve the tenant Modal * Enabling Route Forwarding * Improve the tenant Modal * fix bug --- .../content/components/sidebar/index.tsx | 1 + .../tenant/components/tenant-modal.tsx | 60 ++++++++++-- .../tenant/components/use-modalData.ts | 94 +++++++++++++++++++ .../src/views/security/tenant/index.tsx | 8 +- .../src/views/security/tenant/use-table.ts | 60 +++++++----- 5 files changed, 187 insertions(+), 36 deletions(-) create mode 100644 dolphinscheduler-ui-next/src/views/security/tenant/components/use-modalData.ts diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx index d72e71428f..e33d67ca92 100644 --- a/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx +++ b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx @@ -38,6 +38,7 @@ const Sidebar = defineComponent({ const { handleMenuClick } = useMenuClick() + return { collapsedRef, defaultExpandedKeys, handleMenuClick } }, render() { diff --git a/dolphinscheduler-ui-next/src/views/security/tenant/components/tenant-modal.tsx b/dolphinscheduler-ui-next/src/views/security/tenant/components/tenant-modal.tsx index df8f24f05d..0e7fa305b2 100644 --- a/dolphinscheduler-ui-next/src/views/security/tenant/components/tenant-modal.tsx +++ b/dolphinscheduler-ui-next/src/views/security/tenant/components/tenant-modal.tsx @@ -15,43 +15,85 @@ * limitations under the License. */ -import { defineComponent, PropType } from 'vue' -// import { } from 'naive-ui' -// import styles from './index.module.scss' +import { defineComponent, onMounted, PropType, toRefs } from 'vue' import Modal from '@/components/modal' -import { NForm, NFormItem, NInput } from 'naive-ui' +import { NForm, NFormItem, NInput, NSelect } from 'naive-ui' +import { useModalData } from './use-modalData' const TenantModal = defineComponent({ name: 'tenant-modal', emits: ['cancelModal', 'confirmModal'], setup(props, ctx) { + const { variables, getListData, handleValidate} = useModalData(props, ctx) + const cancelModal = () => { + if (props.statusRef === 0) { + variables.model.tenantCode = '' + variables.model.description = '' + } ctx.emit('cancelModal', props.showModalRef) } - const confirmModal = async () => { - ctx.emit('confirmModal', props.showModalRef) + const confirmModal = () => { + handleValidate() } - return { cancelModal, confirmModal } + onMounted(() => { + getListData() + }) + + return { ...toRefs(variables), cancelModal, confirmModal } }, props: { showModalRef: { type: Boolean as PropType, default: false, }, + statusRef: { + type: Number as PropType, + default: 0, + } }, render() { return (
{{ - default: () =>
这里是弹框
, + default: () => ( + + + + + + + + + + + + ), }}
diff --git a/dolphinscheduler-ui-next/src/views/security/tenant/components/use-modalData.ts b/dolphinscheduler-ui-next/src/views/security/tenant/components/use-modalData.ts new file mode 100644 index 0000000000..b50c2f5e5b --- /dev/null +++ b/dolphinscheduler-ui-next/src/views/security/tenant/components/use-modalData.ts @@ -0,0 +1,94 @@ +/* + * 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. + */ + +import { reactive, ref, SetupContext } from 'vue' +import { useI18n } from 'vue-i18n' +import { useAsyncState } from '@vueuse/core' +import { queryList } from '@/service/modules/queues' +import { verifyTenantCode, createTenant } from '@/service/modules/tenants' + +export function useModalData(props: any, ctx: SetupContext<("cancelModal" | "confirmModal")[]>) { + const { t } = useI18n() + + const variables = reactive({ + tenantFormRef: ref(), + model: { + tenantCode: ref(''), + description: ref(''), + queueId: ref(-1), + generalOptions: [] + }, + rules: { + tenantCode: { + required: true + }, + queueId: { + required: true + } + } + }) + + const getListData = () => { + const { state } = useAsyncState( + queryList().then((res: any) => { + variables.model.generalOptions = res.map((item: any) => { + return { + label: item.queueName, + value: item.id + } + }) + variables.model.queueId = res[0].id + }), + {} + ) + + return state + } + + const handleValidate = () => { + variables.tenantFormRef.validate((errors: any) => { + if (!errors) { + console.log('验证成功') + submitTenantModal() + } else { + console.log(errors, '验证失败') + return + } + }) + } + + const submitTenantModal = () => { + verifyTenantCode({tenantCode: variables.model.tenantCode}).then((res: any) => { + const data = { + tenantCode: variables.model.tenantCode, + queueId: variables.model.queueId, + description: variables.model.description + } + createTenant(data).then((res: any) => { + ctx.emit('confirmModal', props.showModalRef) + }, (err: any) => { + console.log('err', err) + }) + }) + } + + return { + variables, + getListData, + handleValidate + } +} diff --git a/dolphinscheduler-ui-next/src/views/security/tenant/index.tsx b/dolphinscheduler-ui-next/src/views/security/tenant/index.tsx index a92b7c3621..566c67e255 100644 --- a/dolphinscheduler-ui-next/src/views/security/tenant/index.tsx +++ b/dolphinscheduler-ui-next/src/views/security/tenant/index.tsx @@ -44,6 +44,7 @@ const tenementManage = defineComponent({ const handleModalChange = () => { variables.showModalRef = true + variables.statusRef = 0 } const onCancelModal = () => { @@ -52,6 +53,7 @@ const tenementManage = defineComponent({ const onConfirmModal = () => { variables.showModalRef = false + requestData() } onMounted(() => { @@ -107,11 +109,7 @@ const tenementManage = defineComponent({ onUpdatePageSize={this.requestData} /> - + ) }, diff --git a/dolphinscheduler-ui-next/src/views/security/tenant/use-table.ts b/dolphinscheduler-ui-next/src/views/security/tenant/use-table.ts index 25cae20bc6..14dd51c1e9 100644 --- a/dolphinscheduler-ui-next/src/views/security/tenant/use-table.ts +++ b/dolphinscheduler-ui-next/src/views/security/tenant/use-table.ts @@ -16,21 +16,28 @@ */ import { useAsyncState } from '@vueuse/core' -import { queryTenantListPaging } from '@/service/modules/tenants' +import { queryTenantListPaging, deleteTenantById } from '@/service/modules/tenants' import { reactive, h, ref } from 'vue' -import { NButton } from 'naive-ui' +import { NButton, NPopconfirm } from 'naive-ui' import { useI18n } from 'vue-i18n' import { DeleteOutlined, EditOutlined } from '@vicons/antd' export function useTable() { const { t } = useI18n() - const handleEdit = (row: any) => { - console.log('click', row) + const handleEdit= (row: any) => { + variables.showModalRef = true + variables.statusRef = 1 } const handleDelete = (row: any) => { - console.log('click2', row) + deleteTenantById(row.id).then(() => { + getTableData({ + pageSize: variables.pageSize, + pageNo: variables.page, + searchVal: variables.searchVal + }) + }) } const createColumns = () => { @@ -70,27 +77,35 @@ export function useTable() { size: 'small', onClick: () => { handleEdit(row) - }, + } }, { - icon: () => h(EditOutlined), + icon: () => h(EditOutlined) } - ), - h( - NButton, - { - size: 'small', - onClick: () => { - handleDelete(row) + ), + h( + NPopconfirm, + { + onPositiveClick: () => { handleDelete(row) } }, - }, - { - icon: () => h(DeleteOutlined), - } - ), - ]) - }, - }, + { + trigger: () => h( + NButton, + { + size: 'small', + style: {'margin-left': '5px'}, + }, + { + icon: () => h(DeleteOutlined), + } + ), + default: () => {return '确定删除吗?'} + } + ) + ] + ) + } + } ] } @@ -102,6 +117,7 @@ export function useTable() { searchVal: ref(null), totalPage: ref(1), showModalRef: ref(false), + statusRef: ref(0), }) const getTableData = (params: any) => {