From 9c162c86c3fad159839e0e58b58a20c2bd0abcce Mon Sep 17 00:00:00 2001 From: songjianet <1778651752@qq.com> Date: Sun, 6 Mar 2022 21:36:11 +0800 Subject: [PATCH] [Fix][UI Next][V1.0.0-Alpha] Fix the regularly manage multilingual switching issues. (#8718) --- .../workflow/definition/timing/index.tsx | 9 +- .../workflow/definition/timing/use-table.ts | 315 +++++++++--------- 2 files changed, 166 insertions(+), 158 deletions(-) diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/index.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/index.tsx index 1a436956d9..3de139a3d7 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/index.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/index.tsx @@ -18,7 +18,7 @@ import Card from '@/components/card' import { ArrowLeftOutlined } from '@vicons/antd' import { NButton, NDataTable, NIcon, NPagination } from 'naive-ui' -import { defineComponent, onMounted, toRefs } from 'vue' +import { defineComponent, onMounted, toRefs, watch } from 'vue' import { useI18n } from 'vue-i18n' import { useRouter } from 'vue-router' import type { Router } from 'vue-router' @@ -29,7 +29,7 @@ import styles from '../index.module.scss' export default defineComponent({ name: 'WorkflowDefinitionTiming', setup() { - const { variables, getTableData } = useTable() + const { variables, createColumns, getTableData } = useTable() const requestData = () => { getTableData({ @@ -54,9 +54,14 @@ export default defineComponent({ } onMounted(() => { + createColumns(variables) requestData() }) + watch(useI18n().locale, () => { + createColumns(variables) + }) + return { requestData, handleSearch, diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts index 691150c1f8..9df9e86bcb 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts @@ -47,163 +47,8 @@ export function useTable() { const { t } = useI18n() const router: Router = useRouter() - const columns: TableColumns = [ - { - title: '#', - key: 'id', - width: 50, - render: (_row, index) => index + 1 - }, - { - title: t('project.workflow.workflow_name'), - key: 'processDefinitionName', - width: 200, - render: (_row) => - h( - NEllipsis, - { style: 'max-width: 200px' }, - { - default: () => _row.processDefinitionName - } - ) - }, - { - title: t('project.workflow.start_time'), - key: 'startTime' - }, - { - title: t('project.workflow.end_time'), - key: 'endTime' - }, - { - title: t('project.workflow.crontab'), - key: 'crontab' - }, - { - title: t('project.workflow.failure_strategy'), - key: 'failureStrategy' - }, - { - 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' - }, - { - title: t('project.workflow.update_time'), - key: 'updateTime' - }, - { - title: t('project.workflow.operation'), - key: 'operation', - fixed: 'right', - className: styles.operation, - render: (row) => { - return h(NSpace, null, { - default: () => [ - h( - NTooltip, - {}, - { - trigger: () => - h( - NButton, - { - circle: true, - type: 'info', - size: 'small', - disabled: row.releaseState === 'ONLINE', - onClick: () => { - handleEdit(row) - } - }, - { - icon: () => h(EditOutlined) - } - ), - default: () => t('project.workflow.edit') - } - ), - h( - NTooltip, - {}, - { - trigger: () => - h( - NButton, - { - circle: true, - type: row.releaseState === 'ONLINE' ? 'error' : 'warning', - size: 'small', - onClick: () => { - handleReleaseState(row) - } - }, - { - icon: () => - h( - row.releaseState === 'ONLINE' - ? ArrowDownOutlined - : ArrowUpOutlined - ) - } - ), - default: () => - row.releaseState === 'ONLINE' - ? t('project.workflow.down_line') - : t('project.workflow.up_line') - } - ), - h( - NPopconfirm, - { - onPositiveClick: () => { - handleDelete(row.id) - } - }, - { - trigger: () => - h( - NTooltip, - {}, - { - trigger: () => - h( - NButton, - { - circle: true, - type: 'error', - size: 'small' - }, - { - icon: () => h(DeleteOutlined) - } - ), - default: () => t('project.workflow.delete') - } - ), - default: () => t('project.workflow.delete_confirm') - } - ) - ] - }) - } - } - ] - - const handleEdit = (row: any) => { - variables.showRef = true - variables.row = row - } - const variables = reactive({ - columns, + columns: [], row: {}, tableData: [], projectCode: ref(Number(router.currentRoute.value.params.projectCode)), @@ -214,6 +59,163 @@ export function useTable() { showRef: ref(false) }) + const createColumns = (variables: any) => { + variables.columns = [ + { + title: '#', + key: 'id', + width: 50, + render: (row: any, index: number) => index + 1 + }, + { + title: t('project.workflow.workflow_name'), + key: 'processDefinitionName', + width: 200, + render: (row: any) => + h( + NEllipsis, + { style: 'max-width: 200px' }, + { + default: () => row.processDefinitionName + } + ) + }, + { + title: t('project.workflow.start_time'), + key: 'startTime' + }, + { + title: t('project.workflow.end_time'), + key: 'endTime' + }, + { + title: t('project.workflow.crontab'), + key: 'crontab' + }, + { + title: t('project.workflow.failure_strategy'), + key: 'failureStrategy' + }, + { + title: t('project.workflow.status'), + key: 'releaseState', + render: (row: any) => + row.releaseState === 'ONLINE' + ? t('project.workflow.up_line') + : t('project.workflow.down_line') + }, + { + title: t('project.workflow.create_time'), + key: 'createTime' + }, + { + title: t('project.workflow.update_time'), + key: 'updateTime' + }, + { + title: t('project.workflow.operation'), + key: 'operation', + fixed: 'right', + className: styles.operation, + render: (row: any) => { + return h(NSpace, null, { + default: () => [ + h( + NTooltip, + {}, + { + trigger: () => + h( + NButton, + { + circle: true, + type: 'info', + size: 'small', + disabled: row.releaseState === 'ONLINE', + onClick: () => { + handleEdit(row) + } + }, + { + icon: () => h(EditOutlined) + } + ), + default: () => t('project.workflow.edit') + } + ), + h( + NTooltip, + {}, + { + trigger: () => + h( + NButton, + { + circle: true, + type: row.releaseState === 'ONLINE' ? 'error' : 'warning', + size: 'small', + onClick: () => { + handleReleaseState(row) + } + }, + { + icon: () => + h( + row.releaseState === 'ONLINE' + ? ArrowDownOutlined + : ArrowUpOutlined + ) + } + ), + default: () => + row.releaseState === 'ONLINE' + ? t('project.workflow.down_line') + : t('project.workflow.up_line') + } + ), + h( + NPopconfirm, + { + onPositiveClick: () => { + handleDelete(row.id) + } + }, + { + trigger: () => + h( + NTooltip, + {}, + { + trigger: () => + h( + NButton, + { + circle: true, + type: 'error', + size: 'small' + }, + { + icon: () => h(DeleteOutlined) + } + ), + default: () => t('project.workflow.delete') + } + ), + default: () => t('project.workflow.delete_confirm') + } + ) + ] + }) + } + } + ] + } + + const handleEdit = (row: any) => { + variables.showRef = true + variables.row = row + } + const getTableData = (params: ISearchParam) => { const definitionCode = Number( router.currentRoute.value.params.definitionCode @@ -266,6 +268,7 @@ export function useTable() { return { variables, + createColumns, getTableData } }