From ea22c2a41990040ba8d4252ef9b102b743e6cb15 Mon Sep 17 00:00:00 2001 From: devosend Date: Sun, 13 Feb 2022 12:00:07 +0800 Subject: [PATCH 1/3] fix workflow define international bug --- .../src/locales/modules/en_US.ts | 3 +- .../projects/workflow/definition/index.tsx | 9 +- .../workflow/definition/use-table.tsx | 230 +++++++++--------- 3 files changed, 125 insertions(+), 117 deletions(-) diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts index 978d49864cdd..b308e793fb65 100644 --- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts +++ b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts @@ -384,7 +384,8 @@ const project = { start: 'Start', timing: 'Timing', timezone: 'Timezone', - upline: 'Online', + up_line: 'Online', + down_line: 'Offline', copy_workflow: 'Copy Workflow', cron_manage: 'Cron manage', delete: 'Delete', diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.tsx index 792a4f4fa417..774209a50293 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.tsx @@ -25,7 +25,7 @@ import { NPagination, NSpace } from 'naive-ui' -import { defineComponent, onMounted, toRefs } from 'vue' +import { defineComponent, onMounted, toRefs, watch } from 'vue' import { useI18n } from 'vue-i18n' import { useTable } from './use-table' import ImportModal from './components/import-modal' @@ -43,7 +43,7 @@ export default defineComponent({ const route = useRoute() const projectCode = Number(route.params.projectCode) - const { variables, getTableData } = useTable() + const { variables, createColumns, getTableData } = useTable() const requestData = () => { getTableData({ @@ -73,7 +73,12 @@ export default defineComponent({ }) } + watch(useI18n().locale, () => { + createColumns(variables) + }) + onMounted(() => { + createColumns(variables) requestData() }) diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.tsx index 351cecfa9a11..90c2a381d908 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.tsx @@ -38,109 +38,125 @@ export function useTable() { const { t } = useI18n() const router: Router = useRouter() - const columns: TableColumns = [ - { - title: t('project.workflow.id'), - key: 'id', - width: 50, - render: (_row, index) => index + 1 - }, - { - title: t('project.workflow.workflow_name'), - key: 'name', - width: 200, - render: (_row) => ( - - { + variables.columns = [ + { + title: t('project.workflow.id'), + key: 'id', + width: 50, + render: (row, index) => index + 1 + }, + { + title: t('project.workflow.workflow_name'), + key: 'name', + width: 200, + render: (row) => ( + - {_row.name} - - - ) - }, - { - title: t('project.workflow.status'), - key: 'releaseState', - render: (_row) => - _row.releaseState === 'ONLINE' - ? t('project.workflow.up_line') - : t('project.workflow.down_line') - }, - { - title: t('project.workflow.create_time'), - key: 'createTime', - width: 150 - }, - { - title: t('project.workflow.update_time'), - key: 'updateTime', - width: 150 - }, - { - title: t('project.workflow.description'), - key: 'description' - }, - { - title: t('project.workflow.create_user'), - key: 'userName' - }, - { - title: t('project.workflow.modify_user'), - key: 'modifyBy' - }, - { - title: t('project.workflow.schedule_publish_status'), - key: 'scheduleReleaseState', - render: (_row) => { - if (_row.scheduleReleaseState === 'ONLINE') { - return h( - NTag, - { type: 'success', size: 'small' }, - { - default: () => t('project.workflow.up_line') - } - ) - } else if (_row.scheduleReleaseState === 'OFFLINE') { - return h( - NTag, - { type: 'warning', size: 'small' }, - { - default: () => t('project.workflow.down_line') - } - ) - } else { - return '-' + + {row.name} + + + ) + }, + { + title: t('project.workflow.status'), + key: 'releaseState', + render: (row) => + row.releaseState === 'ONLINE' + ? t('project.workflow.up_line') + : t('project.workflow.down_line') + }, + { + title: t('project.workflow.create_time'), + key: 'createTime', + width: 150 + }, + { + title: t('project.workflow.update_time'), + key: 'updateTime', + width: 150 + }, + { + title: t('project.workflow.description'), + key: 'description' + }, + { + title: t('project.workflow.create_user'), + key: 'userName' + }, + { + title: t('project.workflow.modify_user'), + key: 'modifyBy' + }, + { + title: t('project.workflow.schedule_publish_status'), + key: 'scheduleReleaseState', + render: (row) => { + if (row.scheduleReleaseState === 'ONLINE') { + return h( + NTag, + { type: 'success', size: 'small' }, + { + default: () => t('project.workflow.up_line') + } + ) + } else if (row.scheduleReleaseState === 'OFFLINE') { + return h( + NTag, + { type: 'warning', size: 'small' }, + { + default: () => t('project.workflow.down_line') + } + ) + } else { + return '-' + } } + }, + { + title: t('project.workflow.operation'), + key: 'operation', + width: 300, + fixed: 'right', + className: styles.operation, + render: (row) => + h(TableAction, { + row, + onStartWorkflow: () => startWorkflow(row), + onTimingWorkflow: () => timingWorkflow(row), + onVersionWorkflow: () => versionWorkflow(row), + onDeleteWorkflow: () => deleteWorkflow(row), + onReleaseWorkflow: () => releaseWorkflow(row), + onCopyWorkflow: () => copyWorkflow(row), + onExportWorkflow: () => exportWorkflow(row), + onGotoTimingManage: () => gotoTimingManage(row) + }) } - }, - { - title: t('project.workflow.operation'), - key: 'operation', - width: 300, - fixed: 'right', - className: styles.operation, - render: (row) => - h(TableAction, { - row, - onStartWorkflow: () => startWorkflow(row), - onTimingWorkflow: () => timingWorkflow(row), - onVersionWorkflow: () => versionWorkflow(row), - onDeleteWorkflow: () => deleteWorkflow(row), - onReleaseWorkflow: () => releaseWorkflow(row), - onCopyWorkflow: () => copyWorkflow(row), - onExportWorkflow: () => exportWorkflow(row), - onGotoTimingManage: () => gotoTimingManage(row) - }) - } - ] - + ] as TableColumns + } const startWorkflow = (row: any) => { variables.startShowRef = true variables.row = row @@ -258,21 +274,6 @@ export function useTable() { }) } - const variables = reactive({ - columns, - row: {}, - tableData: [], - projectCode: ref(Number(router.currentRoute.value.params.projectCode)), - page: ref(1), - pageSize: ref(10), - searchVal: ref(), - totalPage: ref(1), - showRef: ref(false), - startShowRef: ref(false), - timingShowRef: ref(false), - versionShowRef: ref(false) - }) - const getTableData = (params: IDefinitionParam) => { const { state } = useAsyncState( queryListPaging({ ...params }, variables.projectCode).then((res: any) => { @@ -288,6 +289,7 @@ export function useTable() { return { variables, + createColumns, getTableData } } From 190810cdf74c1ed383564d8b08914bd32589fc27 Mon Sep 17 00:00:00 2001 From: devosend Date: Sun, 13 Feb 2022 16:36:50 +0800 Subject: [PATCH 2/3] fix workflow name link font color --- .../workflow/definition/index.module.scss | 8 ++++ .../{use-table.tsx => use-table.ts} | 39 +++++++++++-------- 2 files changed, 31 insertions(+), 16 deletions(-) rename dolphinscheduler-ui-next/src/views/projects/workflow/definition/{use-table.tsx => use-table.ts} (92%) diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.module.scss b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.module.scss index 7eac1719965f..cfaee429a2b4 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.module.scss +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.module.scss @@ -86,3 +86,11 @@ width: 86%; } } + +.links { + color: #2080f0; + text-decoration: none; + &:hover { + text-decoration: underline; + } +} diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts similarity index 92% rename from dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.tsx rename to dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts index 90c2a381d908..9ed6e936b85a 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts @@ -17,7 +17,7 @@ import { h, ref, reactive } from 'vue' import { useI18n } from 'vue-i18n' -import { useRouter, RouterLink } from 'vue-router' +import { useRouter } from 'vue-router' import type { Router } from 'vue-router' import type { TableColumns } from 'naive-ui/es/data-table/src/interface' import { useAsyncState } from '@vueuse/core' @@ -65,21 +65,28 @@ export function useTable() { title: t('project.workflow.workflow_name'), key: 'name', width: 200, - render: (row) => ( - - - {row.name} - - - ) + render: (row) => + h( + NEllipsis, + { style: 'max-width: 200px; color: white' }, + { + default: () => + h( + 'a', + { + href: 'javascript:', + class: styles.links, + onClick: () => + router.push({ + name: 'workflow-definition-detail', + params: { code: row.code } + }) + }, + row.name + ), + tooltip: () => row.name + } + ) }, { title: t('project.workflow.status'), From 4f0c35d0af487038309f8b936db1a988e4f76d89 Mon Sep 17 00:00:00 2001 From: devosend Date: Sun, 13 Feb 2022 16:42:29 +0800 Subject: [PATCH 3/3] fix operation tooltip display bug --- .../projects/workflow/definition/components/table-action.tsx | 3 +++ .../src/views/projects/workflow/definition/use-table.ts | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/table-action.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/table-action.tsx index 4920bd4e1eb4..379f6ea23c1c 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/table-action.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/table-action.tsx @@ -131,6 +131,7 @@ export default defineComponent({ @@ -227,6 +229,7 @@ export default defineComponent({ diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts index 9ed6e936b85a..8bd68eb5fc43 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts @@ -68,7 +68,7 @@ export function useTable() { render: (row) => h( NEllipsis, - { style: 'max-width: 200px; color: white' }, + { style: 'max-width: 200px; color: #2080f0' }, { default: () => h(