[Fix] [UI Next][V1.0.0-Alpha] Enviroment name display error in cron manage (#8957)

* fix timing modal env name -1 bug

* add param type

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

@@ -22,7 +22,8 @@ import {
   h,
   onMounted,
   ref,
-  watch
+  watch,
+  computed
 } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Modal from '@/components/modal'
@@ -83,6 +84,12 @@ export default defineComponent({
       getPreviewSchedule
     } = useModal(timingState, ctx)
 
+    const environmentOptions = computed(() =>
+      variables.environmentList.filter((item: any) =>
+        item.workerGroups?.includes(timingState.timingForm.workerGroup)
+      )
+    )
+
     const hideModal = () => {
       ctx.emit('update:show')
     }
@@ -95,7 +102,7 @@ export default defineComponent({
       }
     }
 
-    const generalWarningTypeListOptions = () => [
+    const warningTypeOptions = [
       {
         value: 'NONE',
         label: t('project.workflow.none_send')
@@ -114,7 +121,7 @@ export default defineComponent({
       }
     ]
 
-    const generalPriorityList = () => [
+    const priorityOptions = [
       {
         value: 'HIGHEST',
         label: 'HIGHEST',
@@ -178,6 +185,24 @@ export default defineComponent({
       getPreviewSchedule()
     }
 
+    const initEnvironment = () => {
+      timingState.timingForm.environmentCode = null
+      variables.environmentList.forEach((item) => {
+        if (props.row.environmentCode === item.value) {
+          timingState.timingForm.environmentCode = item.value
+        }
+      })
+    }
+
+    const initWarningGroup = () => {
+      timingState.timingForm.warningGroupId = null
+      variables.alertGroups.forEach((item) => {
+        if (props.row.warningGroupId === item.value) {
+          timingState.timingForm.warningGroupId = item.value
+        }
+      })
+    }
+
     onMounted(() => {
       getWorkerGroups()
       getAlertGroups()
@@ -199,9 +224,9 @@ export default defineComponent({
         timingState.timingForm.warningType = props.row.warningType
         timingState.timingForm.processInstancePriority =
           props.row.processInstancePriority
-        timingState.timingForm.warningGroupId = props.row.warningGroupId
         timingState.timingForm.workerGroup = props.row.workerGroup
-        timingState.timingForm.environmentCode = props.row.environmentCode
+        initWarningGroup()
+        initEnvironment()
       }
     )
 
@@ -209,10 +234,11 @@ export default defineComponent({
       t,
       crontabRef,
       parallelismRef,
+      priorityOptions,
+      warningTypeOptions,
+      environmentOptions,
       hideModal,
       handleTiming,
-      generalWarningTypeListOptions,
-      generalPriorityList,
       timezoneOptions,
       renderLabel,
       updateWorkerGroup,
@@ -225,9 +251,6 @@ export default defineComponent({
 
   render() {
     const { t } = this
-    if (Number(this.timingForm.warningGroupId) === 0) {
-      this.timingForm.warningGroupId = ''
-    }
 
     return (
       <Modal
@@ -318,7 +341,7 @@ export default defineComponent({
             path='warningType'
           >
             <NSelect
-              options={this.generalWarningTypeListOptions()}
+              options={this.warningTypeOptions}
               v-model:value={this.timingForm.warningType}
             />
           </NFormItem>
@@ -327,7 +350,7 @@ export default defineComponent({
             path='processInstancePriority'
           >
             <NSelect
-              options={this.generalPriorityList()}
+              options={this.priorityOptions}
               renderLabel={this.renderLabel}
               v-model:value={this.timingForm.processInstancePriority}
             />
@@ -347,9 +370,7 @@ export default defineComponent({
             path='environmentCode'
           >
             <NSelect
-              options={this.environmentList.filter((item: any) =>
-                item.workerGroups?.includes(this.timingForm.workerGroup)
-              )}
+              options={this.environmentOptions}
               v-model:value={this.timingForm.environmentCode}
               clearable
             />

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

@@ -0,0 +1,41 @@
+/*
+ * 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.
+ */
+
+export interface IEnvironmentOption {
+  label: string
+  value: string
+  workerGroups: Array<string>
+}
+
+export interface IOption {
+  label: string
+  value: number
+}
+
+export interface IParam {
+  prop: string
+  value: string
+}
+
+export interface ITimingState {
+  projectCode: number
+  workerGroups: Array<IOption>
+  alertGroups: Array<IOption>
+  environmentList: Array<IEnvironmentOption>
+  startParamsList: Array<IParam>
+  schedulePreviewList: Array<string>
+}

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

@@ -82,9 +82,9 @@ export const useForm = () => {
       failureStrategy: 'CONTINUE',
       warningType: 'NONE',
       processInstancePriority: 'MEDIUM',
-      warningGroupId: '',
+      warningGroupId: null as null | number,
       workerGroup: 'default',
-      environmentCode: null
+      environmentCode: null as null | string
     },
     saving: false
   })

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

@@ -36,6 +36,8 @@ import {
   previewSchedule
 } from '@/service/modules/schedules'
 import { parseTime } from '@/utils/common'
+import { EnvironmentItem } from '@/service/modules/environment/types'
+import { ITimingState } from './types'
 
 export function useModal(
   state: any,
@@ -45,12 +47,12 @@ export function useModal(
   const router: Router = useRouter()
   const route = useRoute()
 
-  const variables = reactive({
+  const variables = reactive<ITimingState>({
     projectCode: Number(route.params.projectCode),
     workerGroups: [],
     alertGroups: [],
     environmentList: [],
-    startParamsList: [] as Array<{ prop: string; value: string }>,
+    startParamsList: [],
     schedulePreviewList: []
   })
 
@@ -197,10 +199,9 @@ export function useModal(
       failureStrategy: state.timingForm.failureStrategy,
       warningType: state.timingForm.warningType,
       processInstancePriority: state.timingForm.processInstancePriority,
-      warningGroupId:
-        state.timingForm.warningGroupId === ''
-          ? 0
-          : state.timingForm.warningGroupId,
+      warningGroupId: state.timingForm.warningGroupId
+        ? state.timingForm.warningGroupId
+        : 0,
       workerGroup: state.timingForm.workerGroup,
       environmentCode: state.timingForm.environmentCode
     }
@@ -217,8 +218,8 @@ export function useModal(
   }
 
   const getEnvironmentList = () => {
-    queryAllEnvironmentList().then((res: any) => {
-      variables.environmentList = res.map((item: any) => ({
+    queryAllEnvironmentList().then((res: Array<EnvironmentItem>) => {
+      variables.environmentList = res.map((item) => ({
         label: item.name,
         value: item.code,
         workerGroups: item.workerGroups