[Fix][UI][V1.0.0-Beta] Fix the task name cleared after switching the task type. (#9623)

dolphinscheduler-ui-next/src/store/project/task-node.ts

@@ -32,7 +32,8 @@ export const useTaskNodeStore = defineStore({
     postTaskOptions: [],
     preTasks: [],
     resources: [],
-    mainJars: {}
+    mainJars: {},
+    name: ''
   }),
   persist: true,
   getters: {
@@ -50,6 +51,9 @@ export const useTaskNodeStore = defineStore({
     },
     getMainJar(state) {
       return (type: ProgramType): IMainJar[] | undefined => state.mainJars[type]
+    },
+    getName(): string {
+      return this.name
     }
   },
   actions: {
@@ -116,12 +120,16 @@ export const useTaskNodeStore = defineStore({
     updateMainJar(type: ProgramType, mainJar: IMainJar[]) {
       this.mainJars[type] = mainJar
     },
+    updateName(name: string) {
+      this.name = name
+    },
     init() {
       this.preTaskOptions = []
       this.postTaskOptions = []
       this.preTasks = []
       this.resources = []
       this.mainJars = {}
+      this.name = ''
     }
   }
 })

dolphinscheduler-ui-next/src/store/project/types.ts

@@ -36,6 +36,7 @@ interface TaskNodeState {
   preTasks: number[]
   resources: IResource[]
   mainJars: { [key in ProgramType]?: IMainJar[] }
+  name: string
 }
 export {
   TaskNodeState,

dolphinscheduler-ui-next/src/views/projects/task/components/node/detail-modal.tsx

@@ -39,6 +39,8 @@ import {
 import { NIcon } from 'naive-ui'
 import { TASK_TYPES_MAP } from '../../constants/task-type'
 import { Router, useRouter } from 'vue-router'
+import { querySubProcessInstanceByTaskCode } from '@/service/modules/process-instances'
+import { useTaskNodeStore } from '@/store/project/task-node'
 import type {
   ITaskData,
   ITaskType,
@@ -46,7 +48,6 @@ import type {
   IWorkflowTaskInstance,
   WorkflowInstance
 } from './types'
-import { querySubProcessInstanceByTaskCode } from '@/service/modules/process-instances'
 
 const props = {
   show: {
@@ -92,6 +93,8 @@ const NodeDetailModal = defineComponent({
   setup(props, { emit }) {
     const { t, locale } = useI18n()
     const router: Router = useRouter()
+    const taskStore = useTaskNodeStore()
+
     const renderIcon = (icon: any) => {
       return () => h(NIcon, null, { default: () => h(icon) })
     }
@@ -203,6 +206,7 @@ const NodeDetailModal = defineComponent({
       async () => {
         if (!props.show) return
         initHeaderLinks(props.processInstance, props.data.taskType)
+        taskStore.init()
         await nextTick()
         detailRef.value.value.setValues(formatModel(props.data))
       }

dolphinscheduler-ui-next/src/views/projects/task/components/node/detail.tsx

@@ -35,7 +35,6 @@ const NodeDetail = defineComponent({
   emits: ['taskTypeChange'],
   setup(props, { expose, emit }) {
     const taskStore = useTaskNodeStore()
-    taskStore.init()
 
     const formRef = ref()
     const detailData: IDetailPanel = inject('data') || {
@@ -58,6 +57,7 @@ const NodeDetail = defineComponent({
     watch(
       () => model.taskType,
       async (taskType) => {
+        taskStore.updateName(model.name || '')
         emit('taskTypeChange', taskType)
       }
     )

dolphinscheduler-ui-next/src/views/projects/task/components/node/use-task.ts

@@ -65,6 +65,7 @@ export function useTask({
   const { model, json } = nodes[data.taskType || 'SHELL'](params)
   jsonRef.value = json
   model.preTasks = taskStore.getPreTasks
+  model.name = taskStore.getName
 
   const getElements = () => {
     const { rules, elements } = getElementByJson(jsonRef.value, model)