Browse Source

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

3.0.0/version-upgrade
labbomb 3 years ago committed by GitHub
parent
commit
af39ae3ce9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 29
      dolphinscheduler-ui-next/src/components/modal/index.tsx
  2. 2
      dolphinscheduler-ui-next/src/locales/modules/en_US.ts
  3. 2
      dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
  4. 25
      dolphinscheduler-ui-next/src/views/projects/task/components/node/detail-modal.tsx
  5. 11
      dolphinscheduler-ui-next/src/views/projects/task/components/node/detail.tsx

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

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

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

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

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

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

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

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

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

Loading…
Cancel
Save