From af39ae3ce9e055da5a9485ccc5f5678e8120ad17 Mon Sep 17 00:00:00 2001 From: labbomb <739955946@qq.com> Date: Fri, 18 Feb 2022 16:55:49 +0800 Subject: [PATCH] [Feature][UI Next] Improve modal component, add link function (#8426) --- .../src/components/modal/index.tsx | 29 +++++++++++++++++-- .../src/locales/modules/en_US.ts | 2 ++ .../src/locales/modules/zh_CN.ts | 2 ++ .../task/components/node/detail-modal.tsx | 25 ++++++++++++++-- .../projects/task/components/node/detail.tsx | 11 ++++++- 5 files changed, 62 insertions(+), 7 deletions(-) diff --git a/dolphinscheduler-ui-next/src/components/modal/index.tsx b/dolphinscheduler-ui-next/src/components/modal/index.tsx index 4f2828b7c8..33cd1ce838 100644 --- a/dolphinscheduler-ui-next/src/components/modal/index.tsx +++ b/dolphinscheduler-ui-next/src/components/modal/index.tsx @@ -58,13 +58,19 @@ const props = { autoFocus: { type: Boolean as PropType, default: true + }, + linkEventShow: { + type: Boolean as PropType + }, + linkEventText: { + type: String as PropType } } 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': () => ( + + {this.linkEventShow && ( + + {this.linkEventText} + + )} + + ) + , footer: () => ( {this.cancelShow && ( diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts index d161cd9080..6ce08e52d6 100644 --- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts +++ b/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', diff --git a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts index 22d096fe19..96892b9bea 100644 --- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts +++ b/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: '禁止执行', diff --git a/dolphinscheduler-ui-next/src/views/projects/task/components/node/detail-modal.tsx b/dolphinscheduler-ui-next/src/views/projects/task/components/node/detail-modal.tsx index 8a2761e8e4..3cc2ee3505 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/detail-modal.tsx +++ b/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 ( ) diff --git a/dolphinscheduler-ui-next/src/views/projects/task/components/node/detail.tsx b/dolphinscheduler-ui-next/src/views/projects/task/components/node/detail.tsx index d773738b4f..27b57c7c43 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/detail.tsx +++ b/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, '', '') + } } )