[Feature][UI Next][V1.0.0-Alpha] Fix startup global params not init bug (#8749)

dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/start-modal.tsx

@@ -15,7 +15,15 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType, toRefs, h, onMounted, ref } from 'vue'
+import {
+  defineComponent,
+  PropType,
+  toRefs,
+  h,
+  onMounted,
+  ref,
+  watch
+} from 'vue'
 import { useI18n } from 'vue-i18n'
 import Modal from '@/components/modal'
 import { useForm } from './use-form'
@@ -67,7 +75,8 @@ export default defineComponent({
       handleStartDefinition,
       getWorkerGroups,
       getAlertGroups,
-      getEnvironmentList
+      getEnvironmentList,
+      getStartParamsList
     } = useModal(startState, ctx)
 
     const hideModal = () => {
@@ -176,6 +185,11 @@ export default defineComponent({
       getEnvironmentList()
     })
 
+    watch(
+      () => props.row,
+      () => getStartParamsList(props.row.code)
+    )
+
     return {
       t,
       parallelismRef,
@@ -368,6 +382,7 @@ export default defineComponent({
                       pair
                       separator=':'
                       placeholder={['prop', 'value']}
+                      defaultValue={[item.prop, item.value]}
                       onUpdateValue={(param) =>
                         this.updateParamsList(index, param)
                       }

dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/use-modal.ts

@@ -18,10 +18,13 @@
 import _ from 'lodash'
 import { reactive, SetupContext } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import type { Router } from 'vue-router'
 import { format } from 'date-fns'
-import { importProcessDefinition } from '@/service/modules/process-definition'
+import {
+  importProcessDefinition,
+  queryProcessDefinitionByCode
+} from '@/service/modules/process-definition'
 import { queryAllWorkerGroups } from '@/service/modules/worker-groups'
 import { queryAllEnvironmentList } from '@/service/modules/environment'
 import { listAlertGroupById } from '@/service/modules/alert-group'
@@ -39,9 +42,10 @@ export function useModal(
 ) {
   const { t } = useI18n()
   const router: Router = useRouter()
+  const route = useRoute()
 
   const variables = reactive({
-    projectCode: Number(router.currentRoute.value.params.projectCode),
+    projectCode: Number(route.params.projectCode),
     workerGroups: [],
     alertGroups: [],
     environmentList: [],
@@ -205,6 +209,16 @@ export function useModal(
     })
   }
 
+  const getStartParamsList = (code: number) => {
+    queryProcessDefinitionByCode(code, variables.projectCode)
+      .then((res: any) => {
+        variables.startParamsList = res.processDefinition.globalParamList
+      })
+      .catch((error: any) => {
+        window.$message.error(error.message)
+      })
+  }
+
   const getPreviewSchedule = () => {
     state.timingFormRef.validate(async (valid: any) => {
       if (!valid) {
@@ -244,6 +258,7 @@ export function useModal(
     getWorkerGroups,
     getAlertGroups,
     getEnvironmentList,
+    getStartParamsList,
     getPreviewSchedule
   }
 }