[Fix][UI Next][V1.0.0-Alpha] Fix the regularly manage multilingual switching issues. (#8718)

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,

dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts

@@ -47,23 +47,36 @@ export function useTable() {
   const { t } = useI18n()
   const router: Router = useRouter()
 
-  const columns: TableColumns<any> = [
+  const variables = reactive({
+    columns: [],
+    row: {},
+    tableData: [],
+    projectCode: ref(Number(router.currentRoute.value.params.projectCode)),
+    page: ref(1),
+    pageSize: ref(10),
+    searchVal: ref(),
+    totalPage: ref(1),
+    showRef: ref(false)
+  })
+
+  const createColumns = (variables: any) => {
+    variables.columns = [
       {
         title: '#',
         key: 'id',
         width: 50,
-      render: (_row, index) => index + 1
+        render: (row: any, index: number) => index + 1
       },
       {
         title: t('project.workflow.workflow_name'),
         key: 'processDefinitionName',
         width: 200,
-      render: (_row) =>
+        render: (row: any) =>
           h(
             NEllipsis,
             { style: 'max-width: 200px' },
             {
-            default: () => _row.processDefinitionName
+              default: () => row.processDefinitionName
             }
           )
       },
@@ -86,8 +99,8 @@ export function useTable() {
       {
         title: t('project.workflow.status'),
         key: 'releaseState',
-      render: (_row) =>
+        render: (row: any) =>
-        _row.releaseState === 'ONLINE'
+          row.releaseState === 'ONLINE'
             ? t('project.workflow.up_line')
             : t('project.workflow.down_line')
       },
@@ -104,7 +117,7 @@ export function useTable() {
         key: 'operation',
         fixed: 'right',
         className: styles.operation,
-      render: (row) => {
+        render: (row: any) => {
           return h(NSpace, null, {
             default: () => [
               h(
@@ -196,24 +209,13 @@ export function useTable() {
         }
       }
     ]
+  }
 
   const handleEdit = (row: any) => {
     variables.showRef = true
     variables.row = row
   }
 
-  const variables = reactive({
-    columns,
-    row: {},
-    tableData: [],
-    projectCode: ref(Number(router.currentRoute.value.params.projectCode)),
-    page: ref(1),
-    pageSize: ref(10),
-    searchVal: ref(),
-    totalPage: ref(1),
-    showRef: ref(false)
-  })
-
   const getTableData = (params: ISearchParam) => {
     const definitionCode = Number(
       router.currentRoute.value.params.definitionCode
@@ -266,6 +268,7 @@ export function useTable() {
 
   return {
     variables,
+    createColumns,
     getTableData
   }
 }