[Feature][UI Next] Support readonly model for dag

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx

@@ -219,6 +219,7 @@ export default defineComponent({
           definition={props.definition}
         />
         <TaskModal
+          readonly={props.readonly}
           show={taskModalVisible.value}
           projectCode={props.projectCode}
           data={currTask.value as any}

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-task-edit.ts

@@ -37,10 +37,11 @@ interface Options {
  */
 export function useTaskEdit(options: Options) {
   const { graph, definition } = options
-
   const { addNode, setNodeName } = useCellUpdate({ graph })
 
-  const taskDefinitions = ref<NodeData[]>([])
+  const taskDefinitions = ref<NodeData[]>(
+    definition.value?.taskDefinitionList || []
+  )
   const currTask = ref<NodeData>({
     taskType: 'SHELL',
     code: 0,

dolphinscheduler-ui-next/src/views/projects/workflow/definition/detail/index.tsx

@@ -53,10 +53,15 @@ export default defineComponent({
     const code = Number(route.params.code)
 
     const definition = ref<WorkflowDefinition>()
+    const readonly = ref(false)
+    const isLoading = ref(true)
 
     const refresh = () => {
+      isLoading.value = true
       queryProcessDefinitionByCode(code, projectCode).then((res: any) => {
+        readonly.value = res.processDefinition.releaseState === 'ONLINE'
         definition.value = res
+        isLoading.value = false
       })
     }
 
@@ -107,12 +112,15 @@ export default defineComponent({
           theme.darkTheme ? Styles['dark'] : Styles['light']
         ]}
       >
-        <Dag
+        {!isLoading.value && (
-          definition={definition.value}
+          <Dag
-          onRefresh={refresh}
+            definition={definition.value}
-          projectCode={projectCode}
+            onRefresh={refresh}
-          onSave={save}
+            projectCode={projectCode}
-        />
+            onSave={save}
+            readonly={readonly.value}
+          />
+        )}
       </div>
     )
   }