[Feature][UI Next]Added the tenant management page (#7945)

* Enabling Route Forwarding
* Added the tenant management page
* tenant-modal

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() {

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

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: {

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<boolean>,
+      default: false,
+    }
+  },
+  render() {
+    return (
+      <div>
+        <Modal
+          title="创建租户"
+          show={this.showModalRef}
+          onCancel={this.cancelModal}
+          onConfirm={this.confirmModal}
+        >
+          {{
+            default: () => (
+              <div>这里是弹框</div>
+            ),
+          }}
+        </Modal>
+      </div>
+    )
+  },
+})
+
+export default TenantModal

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

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 (
+      <div class={styles.container}>
+        <NCard>
+          <div class={styles.header}>
+            <div>
+              <NButton size="small" onClick={this.handleModalChange}>创建租户</NButton>
+            </div>
+            <div class={styles.search}>
+              <NInput size="small" v-model={[this.searchVal, 'value']} on-input={this.requestData} placeholder="请输入关键词" clearable />
+              <NButton size="small"><NIcon><SearchOutlined /></NIcon></NButton>
+            </div>
+          </div>
+        </NCard>
+        <div class={styles.form}>
+          <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>
+        <TenantModal showModalRef={this.showModalRef} onCancelModal={this.onCancelModal} onConfirmModal={this.onConfirmModal}></TenantModal>
+      </div>
+    )
+  },
+})
+
+export default tenementManage

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
+  }
+}