You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by so...@apache.org on 2022/11/01 14:26:36 UTC
[dolphinscheduler] branch dev updated: [Feature][UI] Add a popup component based on dynamic form. (#12645)
This is an automated email from the ASF dual-hosted git repository.
songjian pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new dcb8070a0e [Feature][UI] Add a popup component based on dynamic form. (#12645)
dcb8070a0e is described below
commit dcb8070a0e7e1e70e919727ececcb5ccebabd367
Author: songjianet <17...@qq.com>
AuthorDate: Tue Nov 1 22:26:29 2022 +0800
[Feature][UI] Add a popup component based on dynamic form. (#12645)
---
.../workflow/components/dynamic-dag/index.tsx | 22 +++++---
.../workflow/components/dynamic-dag/task-form.tsx | 63 ++++++++++++++++++++++
.../components/dynamic-dag/use-task-form.ts | 18 ++++++-
3 files changed, 95 insertions(+), 8 deletions(-)
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx
index 156956f73d..d605738820 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx
+++ b/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} />
- </div>
+ <>
+ <div class={styles['workflow-dag']}>
+ <DagSidebar onDragstart={this.handelDragstart}/>
+ <DagCanvas onDrop={this.handelDrop}/>
+ </div>
+ <TaskForm
+ showModal={this.showModal}
+ onCancelModal={() => this.showModal = false}
+ onConfirmModal={() => this.showModal = false}
+ />
+ </>
)
}
})
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task-form.tsx b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task-form.tsx
new file mode 100644
index 0000000000..c440c0ed9e
--- /dev/null
+++ b/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 }
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-task-form.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-task-form.ts
index 7f0ba2ef4b..956356fef5 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-task-form.ts
+++ b/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: '节点名称',
@@ -37,4 +39,16 @@ export const useTaskForm = {
}
}
]
-}
\ No newline at end of file
+}
+
+export function useTaskForm() {
+ const variables = reactive({
+ formStructure: {}
+ })
+
+ variables.formStructure = shell
+
+ return {
+ variables
+ }
+}