[Feature][UI Next] Improve modal component, add link function (#8426)

dolphinscheduler-ui-next/src/components/modal/index.tsx

@@ -58,13 +58,19 @@ const props = {
   autoFocus: {
     type: Boolean as PropType<boolean>,
     default: true
+  },
+  linkEventShow: {
+    type: Boolean as PropType<boolean>
+  },
+  linkEventText: {
+    type: String as PropType<string>
   }
 }
 
 const Modal = defineComponent({
   name: 'Modal',
   props,
-  emits: ['cancel', 'confirm'],
+  emits: ['cancel', 'confirm', 'jumpLink'],
   setup(props, ctx) {
     const { t } = useI18n()
 
@@ -76,10 +82,14 @@ const Modal = defineComponent({
       ctx.emit('confirm')
     }
 
-    return { t, onCancel, onConfirm }
+    const onJumpLink = () => {
+      ctx.emit('jumpLink')
+    }
+
+    return { t, onCancel, onConfirm, onJumpLink }
   },
   render() {
-    const { $slots, t, onCancel, onConfirm, confirmDisabled, confirmLoading } =
+    const { $slots, t, onCancel, onConfirm, confirmDisabled, confirmLoading, onJumpLink } =
       this
 
     return (
@@ -96,6 +106,19 @@ const Modal = defineComponent({
         >
           {{
             default: () => renderSlot($slots, 'default'),
+            'header-extra': () => (
+              <NSpace justify='end'>
+                {this.linkEventShow && (
+                  <NButton
+                    text
+                    onClick={onJumpLink}
+                  >
+                    {this.linkEventText}
+                  </NButton>
+                )}
+              </NSpace>
+            )
+            ,
             footer: () => (
               <NSpace justify='end'>
                 {this.cancelShow && (

dolphinscheduler-ui-next/src/locales/modules/en_US.ts

@@ -560,6 +560,8 @@ const project = {
     task_type: 'Task Type',
     task_type_tips: 'Please select a task type (required)',
     process_name: 'Process Name',
+    child_node: 'Child Node',
+    enter_child_node: 'Enter child node',
     run_flag: 'Run flag',
     normal: 'Normal',
     prohibition_execution: 'Prohibition execution',

dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts

@@ -558,6 +558,8 @@ const project = {
     task_type: '任务类型',
     task_type_tips: '请选择任务类型(必选)',
     process_name: '工作流名称',
+    child_node: '子节点',
+    enter_child_node: '进入该子节点',
     run_flag: '运行标志',
     normal: '正常',
     prohibition_execution: '禁止执行',

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

@@ -61,7 +61,10 @@ const NodeDetailModal = defineComponent({
     const { t } = useI18n()
     const state = reactive({
       saving: false,
-      detailRef: ref()
+      detailRef: ref(),
+      linkEventShowRef: ref(),
+      linkEventTextRef: ref(),
+      linkUrlRef: ref(),
     })
 
     const onConfirm = async () => {
@@ -72,6 +75,16 @@ const NodeDetailModal = defineComponent({
       emit('cancel')
     }
 
+    const onJumpLink = () => {
+      // TODO: onJumpLink
+    }
+
+    const getLinkEventText = (status: boolean, text: string, url: 'string') => {
+      state.linkEventShowRef = status
+      state.linkEventTextRef = text
+      state.linkUrlRef = url
+    }
+
     watch(
       () => props.data,
       async () => {
@@ -83,12 +96,14 @@ const NodeDetailModal = defineComponent({
     return {
       t,
       ...toRefs(state),
+      getLinkEventText,
       onConfirm,
-      onCancel
+      onCancel,
+      onJumpLink
     }
   },
   render() {
-    const { t, show, onConfirm, onCancel, projectCode, data, readonly, from } =
+    const { t, show, onConfirm, onCancel, projectCode, data, readonly, from, onJumpLink } =
       this
     return (
       <Modal
@@ -98,6 +113,9 @@ const NodeDetailModal = defineComponent({
         confirmLoading={false}
         confirmDisabled={readonly}
         onCancel={onCancel}
+        linkEventShow={this.linkEventShowRef}
+        linkEventText={this.linkEventTextRef}
+        onJumpLink={onJumpLink}
       >
         <Detail
           ref='detailRef'
@@ -105,6 +123,7 @@ const NodeDetailModal = defineComponent({
           projectCode={projectCode}
           readonly={readonly}
           from={from}
+          onLinkEventText={this.getLinkEventText}
         />
       </Modal>
     )

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

@@ -20,6 +20,7 @@ import Form from '@/components/form'
 import { useTask } from './use-task'
 import getElementByJson from '@/components/form/get-elements-by-json'
 import type { ITaskData } from './types'
+import { useI18n } from 'vue-i18n'
 
 const props = {
   projectCode: {
@@ -46,8 +47,10 @@ const props = {
 const NodeDetail = defineComponent({
   name: 'NodeDetail',
   props,
-  setup(props, { expose }) {
+  emits: ['linkEventText'],
+  setup(props, { expose, emit }) {
     const { data, projectCode, from, readonly } = props
+    const { t } = useI18n()
 
     const { json, model } = useTask({
       taskType: data.taskType,
@@ -69,6 +72,12 @@ const NodeDetail = defineComponent({
       () => model.taskType,
       (taskType) => {
         // TODO: Change task type
+        if (taskType === 'SUB_PROCESS') {
+          // TODO: add linkUrl
+          emit('linkEventText', true, `${t('project.node.enter_child_node')}`, '')
+        } else {
+          emit('linkEventText', false, '', '')
+        }
       }
     )