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 af39ae3 [Feature][UI Next] Improve modal component, add link function
(#8426)
af39ae3 is described below
commit af39ae3ce9e055da5a9485ccc5f5678e8120ad17
Author: labbomb <[email protected]>
AuthorDate: Fri Feb 18 16:55:49 2022 +0800
[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 ++
.../projects/task/components/node/detail-modal.tsx | 25 ++++++++++++++++---
.../views/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 4f2828b..33cd1ce 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<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 && (
diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
index d161cd9..6ce08e5 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 22d096f..96892b9 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 8a2761e..3cc2ee3 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 (
<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>
)
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 d773738..27b57c7 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, '', '')
+ }
}
)
