[Feature][UI] Added form request parser. (#12691)

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-field.ts

@@ -18,7 +18,7 @@
 import { ref } from 'vue'
 import type { Ref } from 'vue'
 
-export function useFormField(forms: any) {
+export function useFormField(forms: Array<any>) {
   const model: any = {}
 
   const setField = (value: string, type: string): Ref<null | string> => {

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-request.ts

@@ -0,0 +1,39 @@
+/*
+ * 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 { axios } from '@/service/service'
+
+const reqFunction = (url: string, method: string) => {
+  return axios({
+    url,
+    method
+  })
+}
+
+export function useFormRequest(apis: any, forms: Array<any>) {
+  forms.map(f => {
+    if (f.api) {
+      reqFunction(apis[f.api].url, apis[f.api].method).then((res: any) => {
+        f.options = res.map((r: any) => {
+          return { label: r, value: r }
+        })
+      })
+    }
+  })
+
+  return forms
+}

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-structure.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-export function useFormStructure(forms: any) {
+export function useFormStructure(forms: Array<any>) {
   return forms.map((f: any) => {
     delete f.validate
     delete f.api

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-form-validate.ts

@@ -18,7 +18,7 @@
 import { useI18n } from 'vue-i18n'
 import type { FormItemRule } from 'naive-ui'
 
-export function useFormValidate(forms: any) {
+export function useFormValidate(forms: Array<any>) {
   const { t } = useI18n()
   const validate: any = {}
 

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-task-form.ts

@@ -20,6 +20,7 @@ import { useDynamicLocales } from './use-dynamic-locales'
 import { useFormField } from './use-form-field'
 import { useFormValidate } from './use-form-validate'
 import { useFormStructure } from './use-form-structure'
+import { useFormRequest } from './use-form-request'
 
 const data = {
   task: 'shell',
@@ -49,13 +50,12 @@ const data = {
       script: 'Script'
     }
   },
-  apis: [
-    {
-      name: 'getWorkerGroupList',
-      uri: '/worker-groups/all',
+  apis: {
+    getWorkerGroupList: {
+      url: '/worker-groups/all',
       method: 'get'
     }
-  ],
+  },
   forms: [
     {
       label: 'task_components.node_name',
@@ -121,10 +121,10 @@ export function useTaskForm() {
     rules: {}
   })
 
+  useDynamicLocales(data.locales)
   variables.model = useFormField(data.forms)
   variables.rules = useFormValidate(data.forms)
-  useDynamicLocales(data.locales)
-  variables.formStructure = useFormStructure(data.forms)
+  variables.formStructure = useFormStructure(useFormRequest(data.apis, data.forms))
 
   return {
     variables