From 35316f066e99be9fc1e0d2065ef5b6b433c84ee5 Mon Sep 17 00:00:00 2001 From: Devosend Date: Sun, 13 Feb 2022 21:07:22 +0800 Subject: [PATCH] [Fix][UI Next] Fix a few bug with resource manage (#8363) * fix resource manage list language switch bug * fix func manage list language switch bug --- .../src/views/resource/udf/function/index.tsx | 9 +- .../views/resource/udf/function/use-table.ts | 197 ++++++------ .../src/views/resource/udf/resource/index.tsx | 10 +- .../views/resource/udf/resource/use-table.ts | 294 +++++++++--------- 4 files changed, 265 insertions(+), 245 deletions(-) diff --git a/dolphinscheduler-ui-next/src/views/resource/udf/function/index.tsx b/dolphinscheduler-ui-next/src/views/resource/udf/function/index.tsx index 4aa083fecd..9ebbbc0cd6 100644 --- a/dolphinscheduler-ui-next/src/views/resource/udf/function/index.tsx +++ b/dolphinscheduler-ui-next/src/views/resource/udf/function/index.tsx @@ -15,7 +15,7 @@ * limitations under the License. */ -import { defineComponent, Ref, toRefs, onMounted, toRef } from 'vue' +import { defineComponent, Ref, toRefs, onMounted, toRef, watch } from 'vue' import { NIcon, NSpace, @@ -34,7 +34,7 @@ import styles from './index.module.scss' export default defineComponent({ name: 'function-manage', setup() { - const { variables, getTableData } = useTable() + const { variables, createColumns, getTableData } = useTable() const requestData = () => { getTableData({ @@ -68,7 +68,12 @@ export default defineComponent({ handleShowModal(toRef(variables, 'showRef')) } + watch(useI18n().locale, () => { + createColumns(variables) + }) + onMounted(() => { + createColumns(variables) requestData() }) diff --git a/dolphinscheduler-ui-next/src/views/resource/udf/function/use-table.ts b/dolphinscheduler-ui-next/src/views/resource/udf/function/use-table.ts index a2bf764906..d00d7edf57 100644 --- a/dolphinscheduler-ui-next/src/views/resource/udf/function/use-table.ts +++ b/dolphinscheduler-ui-next/src/views/resource/udf/function/use-table.ts @@ -33,104 +33,8 @@ export function useTable() { const { t } = useI18n() const router: Router = useRouter() - const columns: TableColumns = [ - { - title: t('resource.function.id'), - key: 'id', - width: 50, - render: (_row, index) => index + 1 - }, - { - title: t('resource.function.udf_function_name'), - key: 'funcName' - }, - { - title: t('resource.function.class_name'), - key: 'className' - }, - { - title: t('resource.function.type'), - key: 'type' - }, - { - title: t('resource.function.description'), - key: 'description' - }, - { - title: t('resource.function.jar_package'), - key: 'resourceName' - }, - { - title: t('resource.function.update_time'), - key: 'updateTime' - }, - { - title: t('resource.function.operation'), - key: 'operation', - render: (row) => { - return h(NSpace, null, { - default: () => [ - h( - NTooltip, - {}, - { - trigger: () => - h( - NButton, - { - circle: true, - type: 'info', - size: 'tiny', - onClick: () => { - handleEdit(row) - } - }, - { - icon: () => h(EditOutlined) - } - ), - default: () => t('resource.function.edit') - } - ), - h( - NPopconfirm, - { - onPositiveClick: () => { - handleDelete(row.id) - } - }, - { - trigger: () => - h( - NTooltip, - {}, - { - trigger: () => - h( - NButton, - { - circle: true, - type: 'error', - size: 'tiny' - }, - { - icon: () => h(DeleteOutlined) - } - ), - default: () => t('resource.function.delete') - } - ), - default: () => t('resource.function.delete_confirm') - } - ) - ] - }) - } - } - ] - const variables = reactive({ - columns, + columns: [], row: {}, tableData: [], id: ref(Number(router.currentRoute.value.params.id) || -1), @@ -141,6 +45,104 @@ export function useTable() { showRef: ref(false) }) + const createColumns = (variables: any) => { + variables.columns = [ + { + title: t('resource.function.id'), + key: 'id', + width: 50, + render: (_row, index) => index + 1 + }, + { + title: t('resource.function.udf_function_name'), + key: 'funcName' + }, + { + title: t('resource.function.class_name'), + key: 'className' + }, + { + title: t('resource.function.type'), + key: 'type' + }, + { + title: t('resource.function.description'), + key: 'description' + }, + { + title: t('resource.function.jar_package'), + key: 'resourceName' + }, + { + title: t('resource.function.update_time'), + key: 'updateTime' + }, + { + title: t('resource.function.operation'), + key: 'operation', + render: (row) => { + return h(NSpace, null, { + default: () => [ + h( + NTooltip, + {}, + { + trigger: () => + h( + NButton, + { + circle: true, + type: 'info', + size: 'tiny', + onClick: () => { + handleEdit(row) + } + }, + { + icon: () => h(EditOutlined) + } + ), + default: () => t('resource.function.edit') + } + ), + h( + NPopconfirm, + { + onPositiveClick: () => { + handleDelete(row.id) + } + }, + { + trigger: () => + h( + NTooltip, + {}, + { + trigger: () => + h( + NButton, + { + circle: true, + type: 'error', + size: 'tiny' + }, + { + icon: () => h(DeleteOutlined) + } + ), + default: () => t('resource.function.delete') + } + ), + default: () => t('resource.function.delete_confirm') + } + ) + ] + }) + } + } + ] as TableColumns + } + const getTableData = (params: IUdfFunctionParam) => { const { state } = useAsyncState( queryUdfFuncListPaging({ ...params }).then((res: any) => { @@ -177,6 +179,7 @@ export function useTable() { return { variables, + createColumns, getTableData } } diff --git a/dolphinscheduler-ui-next/src/views/resource/udf/resource/index.tsx b/dolphinscheduler-ui-next/src/views/resource/udf/resource/index.tsx index bed26cc56e..2f12aea095 100644 --- a/dolphinscheduler-ui-next/src/views/resource/udf/resource/index.tsx +++ b/dolphinscheduler-ui-next/src/views/resource/udf/resource/index.tsx @@ -15,7 +15,7 @@ * limitations under the License. */ -import { defineComponent, Ref, toRefs, onMounted, toRef } from 'vue' +import { defineComponent, Ref, toRefs, onMounted, toRef, watch } from 'vue' import { NIcon, NSpace, @@ -37,7 +37,8 @@ import styles from './index.module.scss' export default defineComponent({ name: 'resource-manage', setup() { - const { variables, getTableData, goUdfManage, goBread } = useTable() + const { variables, createColumns, getTableData, goUdfManage, goBread } = + useTable() const requestData = () => { getTableData({ @@ -85,7 +86,12 @@ export default defineComponent({ goBread(breadName) } + watch(useI18n().locale, () => { + createColumns(variables) + }) + onMounted(() => { + createColumns(variables) requestData() }) diff --git a/dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts b/dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts index b7f724303d..0ed6c96a3a 100644 --- a/dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts +++ b/dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts @@ -49,151 +49,8 @@ export function useTable() { const router: Router = useRouter() const fileStore = useFileStore() - const columns: TableColumns = [ - { - title: t('resource.udf.id'), - key: 'id', - width: 50, - render: (_row, index) => index + 1 - }, - { - title: t('resource.udf.udf_source_name'), - key: 'alias', - render: (row) => { - if (!row.directory) { - return row.alias - } else { - return h( - 'a', - { - href: 'javascript:', - class: styles.links, - onClick: () => goSubFolder(router, row) - }, - { - default: () => { - return row.alias - } - } - ) - } - } - }, - { - title: t('resource.udf.whether_directory'), - key: 'whether_directory', - render: (row) => - row.directory ? t('resource.file.yes') : t('resource.file.no') - }, - { - title: t('resource.udf.file_name'), - key: 'fileName' - }, - { - title: t('resource.udf.file_size'), - key: 'size', - render: (row) => bytesToSize(row.size) - }, - { - title: t('resource.udf.description'), - key: 'description' - }, - { - title: t('resource.udf.create_time'), - key: 'createTime' - }, - { - title: t('resource.udf.update_time'), - key: 'updateTime' - }, - { - title: t('resource.udf.operation'), - key: 'operation', - render: (row) => { - return h(NSpace, null, { - default: () => [ - h( - NTooltip, - {}, - { - trigger: () => - h( - NButton, - { - circle: true, - type: 'info', - size: 'tiny', - onClick: () => { - handleEdit(row) - } - }, - { - icon: () => h(EditOutlined) - } - ), - default: () => t('resource.udf.edit') - } - ), - h( - NTooltip, - {}, - { - trigger: () => - h( - NButton, - { - circle: true, - type: 'info', - size: 'tiny', - disabled: row?.directory ? true : false, - onClick: () => downloadResource(row.id) - }, - { - icon: () => h(DownloadOutlined) - } - ), - default: () => t('resource.udf.download') - } - ), - h( - NPopconfirm, - { - onPositiveClick: () => { - handleDelete(row.id) - } - }, - { - trigger: () => - h( - NTooltip, - {}, - { - trigger: () => - h( - NButton, - { - circle: true, - type: 'error', - size: 'tiny' - }, - { - icon: () => h(DeleteOutlined) - } - ), - default: () => t('resource.udf.delete') - } - ), - default: () => t('resource.udf.delete_confirm') - } - ) - ] - }) - } - } - ] - const variables = reactive({ - columns, + columns: [], row: {}, tableData: [], breadList: [], @@ -206,6 +63,154 @@ export function useTable() { uploadShowRef: ref(false) }) + const createColumns = (variables: any) => { + variables.columns = [ + { + title: t('resource.udf.id'), + key: 'id', + width: 50, + render: (_row, index) => index + 1 + }, + { + title: t('resource.udf.udf_source_name'), + key: 'alias', + render: (row) => { + if (!row.directory) { + return row.alias + } else { + return h( + 'a', + { + href: 'javascript:', + class: styles.links, + onClick: () => goSubFolder(router, row) + }, + { + default: () => { + return row.alias + } + } + ) + } + } + }, + { + title: t('resource.udf.whether_directory'), + key: 'whether_directory', + render: (row) => + row.directory ? t('resource.file.yes') : t('resource.file.no') + }, + { + title: t('resource.udf.file_name'), + key: 'fileName' + }, + { + title: t('resource.udf.file_size'), + key: 'size', + render: (row) => bytesToSize(row.size) + }, + { + title: t('resource.udf.description'), + key: 'description' + }, + { + title: t('resource.udf.create_time'), + key: 'createTime' + }, + { + title: t('resource.udf.update_time'), + key: 'updateTime' + }, + { + title: t('resource.udf.operation'), + key: 'operation', + render: (row) => { + return h(NSpace, null, { + default: () => [ + h( + NTooltip, + {}, + { + trigger: () => + h( + NButton, + { + tag: 'div', + circle: true, + type: 'info', + size: 'tiny', + onClick: () => { + handleEdit(row) + } + }, + { + icon: () => h(EditOutlined) + } + ), + default: () => t('resource.udf.edit') + } + ), + h( + NTooltip, + {}, + { + trigger: () => + h( + NButton, + { + tag: 'div', + circle: true, + type: 'info', + size: 'tiny', + disabled: row?.directory ? true : false, + onClick: () => downloadResource(row.id) + }, + { + icon: () => h(DownloadOutlined) + } + ), + default: () => t('resource.udf.download') + } + ), + h( + NPopconfirm, + { + onPositiveClick: () => { + handleDelete(row.id) + } + }, + { + trigger: () => + h( + NTooltip, + {}, + { + trigger: () => + h( + NButton, + { + tag: 'div', + circle: true, + type: 'error', + size: 'tiny' + }, + { + icon: () => h(DeleteOutlined) + } + ), + default: () => t('resource.udf.delete') + } + ), + default: () => t('resource.udf.delete_confirm') + } + ) + ] + }) + } + } + ] as TableColumns + } + const getTableData = (params: IUdfResourceParam) => { const { state } = useAsyncState( queryResourceListPaging({ ...params, type: 'UDF' }).then((res: any) => { @@ -272,6 +277,7 @@ export function useTable() { return { variables, + createColumns, getTableData, goUdfManage, goBread