[Feature][UI Next]Improve the tenant Modal (#7983)

* Enabling Route Forwarding

* Added the tenant management page

* tenant-modal

* Improve the tenant Modal

* Enabling Route Forwarding

* Improve the tenant Modal

* fix bug

* Improve the tenant Modal

* Improve the tenant Modal

* Improve the tenant Modal

dolphinscheduler-ui-next/src/service/modules/tenants/index.ts

@@ -49,15 +49,15 @@ export function verifyTenantCode(params: TenantCodeReq): any {
   })
 }
 
-export function updateTenant(data: TenantCodeReq, id: IdReq): any {
+export function updateTenant(data: TenantCodeReq, idReq: IdReq): any {
   return axios({
-    url: `/tenants/${id}`,
+    url: `/tenants/${idReq.id}`,
     method: 'put',
     data,
   })
 }
 
-export function deleteTenantById(id: IdReq): any {
+export function deleteTenantById(id: number): any {
   return axios({
     url: `/tenants/${id}`,
     method: 'delete',

dolphinscheduler-ui-next/src/views/security/tenant/components/tenant-modal.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, PropType, toRefs } from 'vue'
+import { defineComponent, onMounted, PropType, toRefs, watch } from 'vue'
 import Modal from '@/components/modal'
 import { NForm, NFormItem, NInput, NSelect } from 'naive-ui'
 import { useModalData } from './use-modalData'
@@ -35,13 +35,20 @@ const TenantModal = defineComponent({
     }
 
     const confirmModal = () => {
-      handleValidate()
+      handleValidate(props.statusRef)
     }
 
     onMounted(() => {
       getListData()
     })
 
+    watch(() => props.row, () => {
+      variables.model.id = props.row.id
+      variables.model.tenantCode = props.row.tenantCode
+      variables.model.queueId = props.row.queueId
+      variables.model.description = props.row.description
+    })
+
     return { ...toRefs(variables), cancelModal, confirmModal }
   },
   props: {
@@ -52,6 +59,10 @@ const TenantModal = defineComponent({
     statusRef: {
       type: Number as PropType<number>,
       default: 0,
+    },
+    row: {
+      type: Object as PropType<any>,
+      default: {},
     }
   },
   render() {

dolphinscheduler-ui-next/src/views/security/tenant/components/use-modalData.ts

@@ -19,7 +19,7 @@ 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'
+import { verifyTenantCode, createTenant, updateTenant } from '@/service/modules/tenants'
 
 export function useModalData(props: any, ctx: SetupContext<("cancelModal" | "confirmModal")[]>) {
   const { t } = useI18n()
@@ -27,9 +27,10 @@ export function useModalData(props: any, ctx: SetupContext<("cancelModal" | "con
   const variables = reactive({
     tenantFormRef: ref(),
     model: {
+      id: ref<number>(0),
       tenantCode: ref(''),
       description: ref(''),
-      queueId: ref<number>(-1),
+      queueId: ref<number>(0),
       generalOptions: []
     },
     rules: {
@@ -59,11 +60,13 @@ export function useModalData(props: any, ctx: SetupContext<("cancelModal" | "con
     return state
   }
 
-  const handleValidate = () => {
+  const handleValidate = (statusRef: number) => {
     variables.tenantFormRef.validate((errors: any) => {
       if (!errors) {
         console.log('验证成功')
-        submitTenantModal()
+
+        console.log('statusRef', statusRef)
+        statusRef === 0 ? submitTenantModal() : updateTenantModal()
       } else {
         console.log(errors, '验证失败')
         return
@@ -86,6 +89,18 @@ export function useModalData(props: any, ctx: SetupContext<("cancelModal" | "con
     })
   }
 
+  const updateTenantModal = () => {
+    const data = {
+      tenantCode: variables.model.tenantCode,
+      queueId: variables.model.queueId,
+      description: variables.model.description,
+      id: variables.model.id
+    }
+    updateTenant(data, {id: variables.model.id}).then((res: any) => {
+      ctx.emit('confirmModal', props.showModalRef)
+    })
+  }
+
   return {
     variables,
     getListData,

dolphinscheduler-ui-next/src/views/security/tenant/index.tsx

@@ -109,7 +109,7 @@ const tenementManage = defineComponent({
             onUpdatePageSize={this.requestData}
           />
         </div>
-        <TenantModal showModalRef={this.showModalRef} statusRef={this.statusRef} onCancelModal={this.onCancelModal} onConfirmModal={this.onConfirmModal}></TenantModal>
+        <TenantModal showModalRef={this.showModalRef} statusRef={this.statusRef} row={this.row} onCancelModal={this.onCancelModal} onConfirmModal={this.onConfirmModal}></TenantModal>
       </div>
     )
   },

dolphinscheduler-ui-next/src/views/security/tenant/use-table.ts

@@ -28,6 +28,7 @@ export function useTable() {
   const handleEdit= (row: any) => {
     variables.showModalRef = true
     variables.statusRef = 1
+    variables.row = row
   }
 
   const handleDelete = (row: any) => {
@@ -82,28 +83,27 @@ export function useTable() {
               {
                 icon: () => h(EditOutlined)
               }
-              ),
+            ),
-              h(
+            h(
-                NPopconfirm,
+              NPopconfirm,
-                {
+              {
-                  onPositiveClick: () => { handleDelete(row) }
+                onPositiveClick: () => { handleDelete(row) }
-                },
+              },
-                {
+              {
-                  trigger: () => h(
+                trigger: () => h(
-                    NButton,
+                  NButton,
-                    {
+                  {
-                      size: 'small',
+                    size: 'small',
-                      style: {'margin-left': '5px'},
+                    style: {'margin-left': '5px'},
-                    },
+                  },
-                    {
+                  {
-                      icon: () => h(DeleteOutlined),
+                    icon: () => h(DeleteOutlined),
-                    }
+                  }
-                  ),
+                ),
-                  default: () => {return '确定删除吗?'}
+                default: () => {return '确定删除吗?'}
-                }
+              }
-              )
+            )
-            ]
+          ])
-          )
         }
       }
     ]
@@ -118,6 +118,7 @@ export function useTable() {
     totalPage: ref(1),
     showModalRef: ref(false),
     statusRef: ref(0),
+    row: {}
   })
 
   const getTableData = (params: any) => {