[Feature][UI] Add a popup component based on dynamic form. (#12645)

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

@@ -20,12 +20,14 @@ import { DagSidebar } from './dag-sidebar'
 import { DagCanvas } from './dag-canvas'
 import { useDagStore } from '@/store/project/dynamic/dag'
 import { NodeShape, NodeHeight, NodeWidth } from './dag-setting'
+import { TaskForm } from './task-form'
 import styles from './index.module.scss'
 
 const DynamicDag = defineComponent({
   name: 'DynamicDag',
   setup() {
     const draggedTask = ref('')
+    const showModal = ref(false)
 
     const handelDragstart = (task: string) => {
       draggedTask.value = task
@@ -50,20 +52,28 @@ const DynamicDag = defineComponent({
 
       useDagStore().setDagTasks(shapes)
 
-
+      showModal.value = true
     }
 
     return {
       handelDragstart,
-      handelDrop
+      handelDrop,
+      showModal
     }
   },
   render() {
     return (
+      <>
         <div class={styles['workflow-dag']}>
-        <DagSidebar onDragstart={this.handelDragstart} />
-        <DagCanvas onDrop={this.handelDrop} />
+          <DagSidebar onDragstart={this.handelDragstart}/>
+          <DagCanvas onDrop={this.handelDrop}/>
         </div>
+        <TaskForm
+          showModal={this.showModal}
+          onCancelModal={() => this.showModal = false}
+          onConfirmModal={() => this.showModal = false}
+        />
+      </>
     )
   }
 })

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

@@ -0,0 +1,63 @@
+/*
+ * 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 { defineComponent, PropType } from 'vue'
+import { NForm } from 'naive-ui'
+import { useTaskForm } from './use-task-form'
+import Modal from '@/components/modal'
+
+const props = {
+  showModal: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  }
+}
+
+const TaskForm = defineComponent({
+  name: 'TaskForm',
+  props,
+  emits: ['cancelModal', 'confirmModal'],
+  setup(props, ctx) {
+    const { variables } = useTaskForm()
+
+    const cancelModal = () => {
+      ctx.emit('cancelModal')
+    }
+
+    const confirmModal = () => {
+      ctx.emit('confirmModal')
+    }
+
+    return { ...variables, cancelModal, confirmModal }
+  },
+  render() {
+    return (
+      <Modal
+        title={''}
+        show={this.showModal}
+        onCancel={this.cancelModal}
+        onConfirm={this.confirmModal}>
+        <NForm
+          ref={'TaskForm'}>
+
+        </NForm>
+      </Modal>
+    )
+  }
+})
+
+export { TaskForm }

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

@@ -15,7 +15,9 @@
  * limitations under the License.
  */
 
-export const useTaskForm = {
+import { reactive } from 'vue'
+
+const shell = {
   locales: {
     zh_CN: {
       node_name: '节点名称',
@@ -38,3 +40,15 @@ export const useTaskForm = {
     }
   ]
 }
+
+export function useTaskForm() {
+  const variables = reactive({
+    formStructure: {}
+  })
+
+  variables.formStructure = shell
+
+  return {
+    variables
+  }
+}