[Fix-13802][UI] Display english column name in resource center (#13806)

dolphinscheduler-ui/src/views/resource/components/resource/index.tsx

@@ -22,7 +22,8 @@ import {
   ref,
   getCurrentInstance,
   PropType,
-  toRefs
+  toRefs,
+  watch
 } from 'vue'
 import {
   NIcon,
@@ -65,10 +66,10 @@ export default defineComponent({
 
     const {
       variables,
-      columnsRef,
       tableWidth,
       requestData,
       updateList,
+      createColumns,
       handleCreateFile,
     } = useTable()
 
@@ -130,9 +131,16 @@ export default defineComponent({
       }
     }
 
+    onMounted(() => {
+      createColumns(variables)
+      requestData()
+    })
+    watch(useI18n().locale, () => {
+      createColumns(variables)
+    })
+
     return {
       breadListRef,
-      columnsRef,
       tableWidth,
       updateList,
       handleConditions,
@@ -155,7 +163,6 @@ export default defineComponent({
       handleCreateFolder,
       handleCreateFile,
       handleUploadFile,
-      columnsRef,
       tableWidth,
     } = this
     const manageTitle = this.resourceType === 'UDF'
@@ -220,7 +227,7 @@ export default defineComponent({
               <NSpace vertical>
                 <NDataTable
                   remote
-                  columns={columnsRef}
+                  columns={this.columns}
                   data={this.resourceList?.table}
                   striped
                   size={'small'}

dolphinscheduler-ui/src/views/resource/components/resource/table/use-table.ts

@@ -20,7 +20,7 @@ import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { bytesToSize } from '@/common/common'
 import TableAction from './table-action'
-import { IRenameResource, IReuploadResource, ResourceFileTableData, ResourceType } from '../types'
+import { IRenameResource, IReuploadResource, ResourceType } from '../types'
 import ButtonLink from '@/components/button-link'
 import { NEllipsis } from 'naive-ui'
 import {
@@ -29,10 +29,9 @@ import {
   DefaultTableWidth
 } from '@/common/column-width-config'
 import type { Router } from 'vue-router'
-import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
 import { useFileState } from "@/views/resource/components/resource/use-file";
 
-const goSubFolder = (router: Router, item: ResourceFileTableData) => {
+const goSubFolder = (router: Router, item: any) => {
   if (item.directory) {
     router.push({
       name: item.type === 'UDF' ? 'resource-sub-manage' : 'resource-file-subdirectory',
@@ -49,6 +48,7 @@ export function useTable() {
   const router: Router = useRouter()
 
   const variables = reactive({
+    columns: [],
     fullName: ref(String(router.currentRoute.value.query.prefix || "")),
     tenantCode: ref(String(router.currentRoute.value.query.tenantCode || "")),
     resourceType: ref<ResourceType>(),
@@ -79,18 +79,19 @@ export function useTable() {
     })
   })
 
-  const columnsRef: TableColumns<any> = [
+  const createColumns = (variables: any) => {
+    variables.columns = [
       {
         title: '#',
         key: 'id',
         ...COLUMN_WIDTH_CONFIG['index'],
-      render: (_row, index) => index + 1
+        render: (_row: any, index: number) => index + 1
       },
       {
         title: t('resource.file.name'),
         key: 'name',
         ...COLUMN_WIDTH_CONFIG['linkName'],
-      render: (row) => {
+        render: (row: any) => {
           return !row.directory
               ? row.alias
               : h(
@@ -118,7 +119,7 @@ export function useTable() {
         title: t('resource.file.whether_directory'),
         key: 'whether_directory',
         ...COLUMN_WIDTH_CONFIG['yesOrNo'],
-      render: (row) =>
+        render: (row: any) =>
             row.directory ? t('resource.file.yes') : t('resource.file.no')
       },
       {
@@ -135,7 +136,7 @@ export function useTable() {
         title: t('resource.file.size'),
         key: 'size',
         ...COLUMN_WIDTH_CONFIG['size'],
-      render: (row) => bytesToSize(row.size)
+        render: (row: any) => bytesToSize(row.size)
       },
       {
         title: t('resource.file.create_time'),
@@ -150,7 +151,7 @@ export function useTable() {
       {
         title: t('resource.file.operation'),
         key: 'operation',
-      render: (row) =>
+        render: (row: any) =>
             h(TableAction, {
               row,
               onReuploadResource: ( name, description, fullName, user_name ) =>
@@ -162,6 +163,7 @@ export function useTable() {
         ...COLUMN_WIDTH_CONFIG['operation'](variables.resourceType === 'UDF' ? 4 : 5)
       }
     ]
+  }
 
   const createFile = () => {
     const { fullName } = variables
@@ -220,10 +222,10 @@ export function useTable() {
 
   return {
     variables,
-    columnsRef,
-    tableWidth: calculateTableWidth(columnsRef) || DefaultTableWidth,
+    tableWidth: calculateTableWidth(variables.columns) || DefaultTableWidth,
     requestData,
     updateList,
+    createColumns,
     handleCreateFile: createFile,
   }
 }