[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,108 +21,110 @@ 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 = [
-    {
-      title: '#',
-      key: 'index',
-      render: (rowData, rowIndex) => rowIndex + 1
-    },
-    {
-      title: t('datasource.datasource_name'),
-      key: 'name'
-    },
-    {
-      title: t('datasource.datasource_user_name'),
-      key: 'userName'
-    },
-    {
-      title: t('datasource.datasource_type'),
-      key: 'type'
-    },
-    {
-      title: t('datasource.datasource_parameter'),
-      key: 'parameter',
-      render: (rowData) => {
-        return h(
-          NPopover,
-          { trigger: 'click' },
-          {
-            trigger: () =>
-              h(ButtonLink, null, {
-                default: () => t('datasource.click_to_view')
-              }),
-            default: () => h(JsonHighlight, { rowData })
-          }
-        )
+  const getColumns = (): TableColumns => {
+    return [
+      {
+        title: '#',
+        key: 'index',
+        render: (rowData, rowIndex) => rowIndex + 1
+      },
+      {
+        title: t('datasource.datasource_name'),
+        key: 'name'
+      },
+      {
+        title: t('datasource.datasource_user_name'),
+        key: 'userName'
+      },
+      {
+        title: t('datasource.datasource_type'),
+        key: 'type'
+      },
+      {
+        title: t('datasource.datasource_parameter'),
+        key: 'parameter',
+        render: (rowData) => {
+          return h(
+            NPopover,
+            { trigger: 'click' },
+            {
+              trigger: () =>
+                h(ButtonLink, null, {
+                  default: () => t('datasource.click_to_view')
+                }),
+              default: () => h(JsonHighlight, { rowData })
+            }
+          )
+        }
+      },
+      {
+        title: t('datasource.description'),
+        key: 'note'
+      },
+      {
+        title: t('datasource.create_time'),
+        key: 'createTime'
+      },
+      {
+        title: t('datasource.update_time'),
+        key: 'updateTime'
+      },
+      {
+        title: t('datasource.operation'),
+        key: 'operation',
+        width: 150,
+        render: (rowData, unused) => {
+          return h(NSpace, null, {
+            default: () => [
+              h(
+                NButton,
+                {
+                  circle: true,
+                  type: 'info',
+                  onClick: () => void onCallback(rowData.id, 'edit')
+                },
+                {
+                  default: () =>
+                    h(NIcon, null, { default: () => h(EditOutlined) })
+                }
+              ),
+              h(
+                NPopconfirm,
+                {
+                  onPositiveClick: () => void onCallback(rowData.id, 'delete'),
+                  negativeText: t('datasource.cancel'),
+                  positiveText: t('datasource.confirm')
+                },
+                {
+                  trigger: () =>
+                    h(
+                      NButton,
+                      {
+                        circle: true,
+                        type: 'error',
+                        class: 'btn-delete'
+                      },
+                      {
+                        default: () =>
+                          h(NIcon, null, { default: () => h(DeleteOutlined) })
+                      }
+                    ),
+                  default: () => t('datasource.delete')
+                }
+              )
+            ]
+          })
+        }
       }
-    },
-    {
-      title: t('datasource.description'),
-      key: 'note'
-    },
-    {
-      title: t('datasource.create_time'),
-      key: 'createTime'
-    },
-    {
-      title: t('datasource.update_time'),
-      key: 'updateTime'
-    },
-    {
-      title: t('datasource.operation'),
-      key: 'operation',
-      width: 150,
-      render: (rowData, unused) => {
-        return h(NSpace, null, {
-          default: () => [
-            h(
-              NButton,
-              {
-                circle: true,
-                type: 'info',
-                onClick: () => void onCallback(rowData.id, 'edit')
-              },
-              {
-                default: () =>
-                  h(NIcon, null, { default: () => h(EditOutlined) })
-              }
-            ),
-            h(
-              NPopconfirm,
-              {
-                onPositiveClick: () => void onCallback(rowData.id, 'delete'),
-                negativeText: t('datasource.cancel'),
-                positiveText: t('datasource.confirm')
-              },
-              {
-                trigger: () =>
-                  h(
-                    NButton,
-                    {
-                      circle: true,
-                      type: 'error',
-                      class: 'btn-delete'
-                    },
-                    {
-                      default: () =>
-                        h(NIcon, null, { default: () => h(DeleteOutlined) })
-                    }
-                  ),
-                default: () => t('datasource.delete')
-              }
-            )
-          ]
-        })
-      }
-    }
-  ]
+    ]
+  }
 
   return {
-    columnsRef
+    getColumns
   }
 }