[Fix][UI Next][V1.0.0-Alpha] Fix the problem of table multilingual switching in datasource. (#8970)

dolphinscheduler-ui-next/src/views/datasource/list/index.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, ref, toRefs } from 'vue'
+import { defineComponent, onMounted, ref, toRefs, watch } from 'vue'
 import {
   NButton,
   NInput,
@@ -38,8 +38,11 @@ const list = defineComponent({
     const { t } = useI18n()
     const showDetailModal = ref(false)
     const selectId = ref()
+    const columns = ref()
+    const { data, changePage, changePageSize, deleteRecord, updateList } =
+      useTable()
 
-    const { columnsRef } = useColumns((id: number, type: 'edit' | 'delete') => {
+    const { getColumns } = useColumns((id: number, type: 'edit' | 'delete') => {
       if (type === 'edit') {
         showDetailModal.value = true
         selectId.value = id
@@ -48,9 +51,6 @@ const list = defineComponent({
       }
     })
 
-    const { data, changePage, changePageSize, deleteRecord, updateList } =
-      useTable()
-
     const onCreate = () => {
       selectId.value = null
       showDetailModal.value = true
@@ -58,13 +58,18 @@ const list = defineComponent({
 
     onMounted(() => {
       changePage(1)
+      columns.value = getColumns()
+    })
+
+    watch(useI18n().locale, () => {
+      columns.value = getColumns()
     })
 
     return {
       t,
       showDetailModal,
       id: selectId,
-      columnsRef,
+      columns,
       ...toRefs(data),
       changePage,
       changePageSize,
@@ -77,7 +82,7 @@ const list = defineComponent({
       t,
       id,
       showDetailModal,
-      columnsRef,
+      columns,
       list,
       page,
       pageSize,
@@ -126,7 +131,7 @@ const list = defineComponent({
         <Card title='' class={styles['mt-8']}>
           <NDataTable
             row-class-name='data-source-items'
-            columns={columnsRef}
+            columns={columns}
             data={list}
             loading={loading}
             striped

dolphinscheduler-ui-next/src/views/datasource/list/use-columns.ts

@@ -21,12 +21,13 @@ import { NPopover, NButton, NIcon, NPopconfirm, NSpace } from 'naive-ui'
 import { EditOutlined, DeleteOutlined } from '@vicons/antd'
 import JsonHighlight from './json-highlight'
 import ButtonLink from '@/components/button-link'
-import { TableColumns } from './types'
+import type { TableColumns } from './types'
 
 export function useColumns(onCallback: Function) {
   const { t } = useI18n()
 
-  const columnsRef: TableColumns = [
+  const getColumns = (): TableColumns => {
+    return [
       {
         title: '#',
         key: 'index',
@@ -121,8 +122,9 @@ export function useColumns(onCallback: Function) {
         }
       }
     ]
+  }
 
   return {
-    columnsRef
+    getColumns
   }
 }