From 8a4ae60d81059e173f8bfcb733f37b35da735f5c Mon Sep 17 00:00:00 2001 From: labbomb <739955946@qq.com> Date: Wed, 12 Jan 2022 10:12:21 +0800 Subject: [PATCH] [Feature][UI Next]Added the tenant management page (#7945) * Enabling Route Forwarding * Added the tenant management page * tenant-modal --- .../content/components/sidebar/index.tsx | 1 + .../src/router/modules/security.ts | 2 +- .../src/store/menu/menu.ts | 2 +- .../tenant/components/tenant-modal.tsx | 64 +++++++++ .../views/security/tenant/index.module.scss | 38 ++++++ .../src/views/security/tenant/index.tsx | 91 ++++++++++++ .../src/views/security/tenant/use-table.ts | 129 ++++++++++++++++++ 7 files changed, 325 insertions(+), 2 deletions(-) create mode 100644 dolphinscheduler-ui-next/src/views/security/tenant/components/tenant-modal.tsx create mode 100644 dolphinscheduler-ui-next/src/views/security/tenant/index.module.scss create mode 100644 dolphinscheduler-ui-next/src/views/security/tenant/index.tsx create mode 100644 dolphinscheduler-ui-next/src/views/security/tenant/use-table.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/router/modules/security.ts b/dolphinscheduler-ui-next/src/router/modules/security.ts index 9f2873634e..799af5173e 100644 --- a/dolphinscheduler-ui-next/src/router/modules/security.ts +++ b/dolphinscheduler-ui-next/src/router/modules/security.ts @@ -32,7 +32,7 @@ export default { { path: '/security/tenant', name: 'tenement-manage', - component: components['home'], + component: components['tenant'], meta: { title: '租户管理', }, diff --git a/dolphinscheduler-ui-next/src/store/menu/menu.ts b/dolphinscheduler-ui-next/src/store/menu/menu.ts index bdb86950b1..b86cdc7057 100644 --- a/dolphinscheduler-ui-next/src/store/menu/menu.ts +++ b/dolphinscheduler-ui-next/src/store/menu/menu.ts @@ -21,7 +21,7 @@ import MenuState from './types' export const useMenuStore = defineStore({ id: 'menu', state: (): MenuState => ({ - menuKey: '', + menuKey: 'home', }), persist: true, getters: { 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 new file mode 100644 index 0000000000..fa7f04f5af --- /dev/null +++ b/dolphinscheduler-ui-next/src/views/security/tenant/components/tenant-modal.tsx @@ -0,0 +1,64 @@ +/* + * 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 { defineComponent, PropType } from 'vue' +// import { } from 'naive-ui' +// import styles from './index.module.scss' +import Modal from '@/components/modal' +import { NForm, NFormItem, NInput } from 'naive-ui' + +const TenantModal = defineComponent({ + name: 'tenant-modal', + emits: ['cancelModal', 'confirmModal'], + setup(props, ctx) { + const cancelModal = () => { + ctx.emit('cancelModal', props.showModalRef) + } + + const confirmModal = async () => { + ctx.emit('confirmModal', props.showModalRef) + } + + return { cancelModal, confirmModal } + }, + props: { + showModalRef: { + type: Boolean as PropType, + default: false, + } + }, + render() { + return ( +
+ + {{ + default: () => ( +
这里是弹框
+ ), + }} + +
+ ) + }, +}) + +export default TenantModal diff --git a/dolphinscheduler-ui-next/src/views/security/tenant/index.module.scss b/dolphinscheduler-ui-next/src/views/security/tenant/index.module.scss new file mode 100644 index 0000000000..bd7ded4d42 --- /dev/null +++ b/dolphinscheduler-ui-next/src/views/security/tenant/index.module.scss @@ -0,0 +1,38 @@ +/* + * 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. + */ + +.container { + width: 100%; + + .header { + display: flex; + justify-content: space-between; + + .search { + display: flex; + } + } + + .form, .pagination { + margin-top: 16px; + } + + .pagination { + display: flex; + justify-content: center; + } +} \ No newline at end of file diff --git a/dolphinscheduler-ui-next/src/views/security/tenant/index.tsx b/dolphinscheduler-ui-next/src/views/security/tenant/index.tsx new file mode 100644 index 0000000000..f39235f36e --- /dev/null +++ b/dolphinscheduler-ui-next/src/views/security/tenant/index.tsx @@ -0,0 +1,91 @@ +/* + * 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 { defineComponent, toRefs, onMounted } from 'vue' +import { NButton, NInput, NIcon, NDataTable, NPagination, NCard } from 'naive-ui' +import styles from './index.module.scss' +import { useTable } from './use-table' +import { SearchOutlined } from '@vicons/antd' +import TenantModal from './components/tenant-modal' + +const tenementManage = defineComponent({ + name: 'tenement-manage', + setup() { + const { variables, getTableData } = useTable() + + const requestData = () => { + getTableData({ + pageSize: variables.pageSize, + pageNo: variables.page, + searchVal: variables.searchVal + }) + } + + const handleModalChange = () => { + variables.showModalRef = true + } + + const onCancelModal = () => { + variables.showModalRef = false + } + + const onConfirmModal = () => { + variables.showModalRef = false + } + + onMounted(() => { + requestData() + }) + + return { ...toRefs(variables), requestData, handleModalChange, onCancelModal, onConfirmModal } + }, + render() { + return ( +
+ +
+
+ 创建租户 +
+
+ + +
+
+ +
+ +
+
+ +
+ +
+ ) + }, +}) + +export default tenementManage diff --git a/dolphinscheduler-ui-next/src/views/security/tenant/use-table.ts b/dolphinscheduler-ui-next/src/views/security/tenant/use-table.ts new file mode 100644 index 0000000000..8e99ea5b80 --- /dev/null +++ b/dolphinscheduler-ui-next/src/views/security/tenant/use-table.ts @@ -0,0 +1,129 @@ +/* + * 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 { useAsyncState } from '@vueuse/core' +import { queryTenantListPaging } from '@/service/modules/tenants' +import { reactive, h, ref } from 'vue' +import { NButton } 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 handleDelete = (row: any) => { + console.log('click2', row) + } + + const createColumns = () => { + return [ + { + title: '编号', + key: 'num' + }, + { + title: '操作系统租户', + key: 'tenantCode' + }, + { + title: '描述', + key: 'description' + }, + { + title: '队列', + key: 'queueName' + }, + { + title: '创建时间', + key: 'createTime' + }, + { + title: '更新时间', + key: 'updateTime' + }, + { + title: '操作', + key: 'actions', + render (row: any) { + return h( + 'div', + null, [ + h( + NButton, + { + size: 'small', + onClick: () => { handleEdit(row) } + }, + { + icon: () => h(EditOutlined) + } + ), + h( + NButton, + { + size: 'small', + onClick: () => { handleDelete(row) } + }, + { + icon: () => h(DeleteOutlined) + } + ) + ] + ) + } + } + ] + } + + const variables = reactive({ + columns: createColumns(), + tableData: [], + page: ref(1), + pageSize: ref(10), + searchVal: ref(null), + totalPage: ref(1), + showModalRef: ref(false) + }) + + const getTableData = (params: any) => { + const { state } = useAsyncState( + queryTenantListPaging({...params}).then((res: any) => { + variables.tableData = res.totalList.map((item: any, index: number) => { + return { + num: index + 1, + ...item + } + }) + variables.totalPage = res.totalPage + }), + {} + ) + + return state + } + + return { + variables, + getTableData + } +}