[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

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/views/security/tenant/components/tenant-modal.tsx

@@ -15,43 +15,85 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType } from 'vue'
+import { defineComponent, onMounted, PropType, toRefs } from 'vue'
-// import {  } from 'naive-ui'
-// import styles from './index.module.scss'
 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 () => {
+    const confirmModal = () => {
-      ctx.emit('confirmModal', props.showModalRef)
+      handleValidate()
     }
 
-    return { cancelModal, confirmModal }
+    onMounted(() => {
+      getListData()
+    })
+
+    return { ...toRefs(variables), cancelModal, confirmModal }
   },
   props: {
     showModalRef: {
       type: Boolean as PropType<boolean>,
       default: false,
     },
+    statusRef: {
+      type: Number as PropType<number>,
+      default: 0,
+    }
   },
   render() {
     return (
       <div>
         <Modal
-          title='创建租户'
+          title={this.statusRef === 0 ? '创建租户' : '编辑租户'}
           show={this.showModalRef}
           onCancel={this.cancelModal}
           onConfirm={this.confirmModal}
         >
           {{
-            default: () => <div>这里是弹框</div>,
+            default: () => (
+              <NForm
+                model={this.model}
+                rules={this.rules}
+                ref="tenantFormRef"
+                label-placement="left"
+                label-width={140}
+                require-mark-placement="left"
+                size="small"
+                style="{ maxWidth: '240px' }"
+              >
+                <NFormItem label="操作系统租户" path="tenantCode">
+                  <NInput disabled={this.statusRef === 1} placeholder="请输入操作系统租户" v-model={[this.model.tenantCode, 'value']} />
+                </NFormItem>
+                <NFormItem label="队列" path="queueId">
+                  <NSelect
+                    placeholder="Select"
+                    options={this.model.generalOptions}
+                    v-model={[this.model.queueId, 'value']}
+                  />
+                </NFormItem>
+                <NFormItem label="描述" path="description">
+                  <NInput
+                    placeholder="请输入描述"
+                    v-model={[this.model.description, 'value']}
+                    type="textarea"
+                  />
+                </NFormItem>
+              </NForm>
+            ),
           }}
         </Modal>
       </div>

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

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}
           />
         </div>
-        <TenantModal
+        <TenantModal showModalRef={this.showModalRef} statusRef={this.statusRef} onCancelModal={this.onCancelModal} onConfirmModal={this.onConfirmModal}></TenantModal>
-          showModalRef={this.showModalRef}
-          onCancelModal={this.onCancelModal}
-          onConfirmModal={this.onConfirmModal}
-        ></TenantModal>
       </div>
     )
   },

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) => {
+  const handleEdit= (row: any) => {
-    console.log('click', row)
+    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(
+                NPopconfirm,
+                {
+                  onPositiveClick: () => { handleDelete(row) }
+                },
+                {
+                  trigger: () => h(
                     NButton,
                     {
                       size: 'small',
-                onClick: () => {
+                      style: {'margin-left': '5px'},
-                  handleDelete(row)
-                },
                     },
                     {
                       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) => {