[Fix][UI Next][V1.0.0-Alpha] Fix the problem of table multilingual switching in alarm instance management. (#8968)

dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/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,
@@ -40,10 +40,12 @@ const AlarmInstanceManage = defineComponent({
     const { t } = useI18n()
     const showDetailModal = ref(false)
     const currentRecord = ref()
-
+    const columns = ref()
     const { IS_ADMIN } = useUserInfo()
+    const { data, changePage, changePageSize, deleteRecord, updateList } =
+      useTable()
 
-    const { columnsRef } = useColumns(
+    const { getColumns } = useColumns(
       (record: IRecord, type: 'edit' | 'delete') => {
         if (type === 'edit') {
           showDetailModal.value = true
@@ -54,9 +56,6 @@ const AlarmInstanceManage = defineComponent({
       }
     )
 
-    const { data, changePage, changePageSize, deleteRecord, updateList } =
-      useTable()
-
     const onCreate = () => {
       currentRecord.value = null
       showDetailModal.value = true
@@ -69,6 +68,11 @@ const AlarmInstanceManage = defineComponent({
 
     onMounted(() => {
       changePage(1)
+      columns.value = getColumns()
+    })
+
+    watch(useI18n().locale, () => {
+      columns.value = getColumns()
     })
 
     return {
@@ -76,7 +80,7 @@ const AlarmInstanceManage = defineComponent({
       IS_ADMIN,
       showDetailModal,
       currentRecord: currentRecord,
-      columnsRef,
+      columns,
       ...toRefs(data),
       changePage,
       changePageSize,
@@ -91,7 +95,7 @@ const AlarmInstanceManage = defineComponent({
       IS_ADMIN,
       currentRecord,
       showDetailModal,
-      columnsRef,
+      columns,
       list,
       page,
       pageSize,
@@ -141,7 +145,7 @@ const AlarmInstanceManage = defineComponent({
         </Card>
         <Card title='' class={styles['mt-8']}>
           <NDataTable
-            columns={columnsRef}
+            columns={columns}
             data={list}
             loading={loading}
             striped

dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/use-columns.ts

@@ -19,12 +19,13 @@ import { h } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { NButton, NIcon, NPopconfirm, NSpace } from 'naive-ui'
 import { EditOutlined, DeleteOutlined } from '@vicons/antd'
-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',
@@ -93,8 +94,9 @@ export function useColumns(onCallback: Function) {
         }
       }
     ]
+  }
 
   return {
-    columnsRef
+    getColumns
   }
 }