[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,82 +19,84 @@ 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 = [
-    {
-      title: '#',
-      key: 'index',
-      render: (rowData, rowIndex) => rowIndex + 1
-    },
-    {
-      title: t('security.alarm_instance.alarm_instance_name'),
-      key: 'instanceName'
-    },
-    {
-      title: t('security.alarm_instance.alarm_plugin_name'),
-      key: 'alertPluginName'
-    },
-    {
-      title: t('security.alarm_instance.create_time'),
-      key: 'createTime'
-    },
-    {
-      title: t('security.alarm_instance.update_time'),
-      key: 'updateTime'
-    },
-    {
-      title: t('security.alarm_instance.operation'),
-      key: 'operation',
-      width: 150,
-      render: (rowData, unused) => {
-        return h(NSpace, null, {
-          default: () => [
-            h(
-              NButton,
-              {
-                circle: true,
-                type: 'info',
-                onClick: () => void onCallback(rowData, 'edit')
-              },
-              {
-                default: () =>
-                  h(NIcon, null, { default: () => h(EditOutlined) })
-              }
-            ),
-            h(
-              NPopconfirm,
-              {
-                onPositiveClick: () => void onCallback(rowData, 'delete'),
-                negativeText: t('security.alarm_instance.cancel'),
-                positiveText: t('security.alarm_instance.confirm')
-              },
-              {
-                trigger: () =>
-                  h(
-                    NButton,
-                    {
-                      circle: true,
-                      type: 'error'
-                    },
-                    {
-                      default: () =>
-                        h(NIcon, null, { default: () => h(DeleteOutlined) })
-                    }
-                  ),
-                default: () => t('security.alarm_instance.delete')
-              }
-            )
-          ]
-        })
+  const getColumns = (): TableColumns => {
+    return [
+      {
+        title: '#',
+        key: 'index',
+        render: (rowData, rowIndex) => rowIndex + 1
+      },
+      {
+        title: t('security.alarm_instance.alarm_instance_name'),
+        key: 'instanceName'
+      },
+      {
+        title: t('security.alarm_instance.alarm_plugin_name'),
+        key: 'alertPluginName'
+      },
+      {
+        title: t('security.alarm_instance.create_time'),
+        key: 'createTime'
+      },
+      {
+        title: t('security.alarm_instance.update_time'),
+        key: 'updateTime'
+      },
+      {
+        title: t('security.alarm_instance.operation'),
+        key: 'operation',
+        width: 150,
+        render: (rowData, unused) => {
+          return h(NSpace, null, {
+            default: () => [
+              h(
+                NButton,
+                {
+                  circle: true,
+                  type: 'info',
+                  onClick: () => void onCallback(rowData, 'edit')
+                },
+                {
+                  default: () =>
+                    h(NIcon, null, { default: () => h(EditOutlined) })
+                }
+              ),
+              h(
+                NPopconfirm,
+                {
+                  onPositiveClick: () => void onCallback(rowData, 'delete'),
+                  negativeText: t('security.alarm_instance.cancel'),
+                  positiveText: t('security.alarm_instance.confirm')
+                },
+                {
+                  trigger: () =>
+                    h(
+                      NButton,
+                      {
+                        circle: true,
+                        type: 'error'
+                      },
+                      {
+                        default: () =>
+                          h(NIcon, null, { default: () => h(DeleteOutlined) })
+                      }
+                    ),
+                  default: () => t('security.alarm_instance.delete')
+                }
+              )
+            ]
+          })
+        }
       }
-    }
-  ]
+    ]
+  }
 
   return {
-    columnsRef
+    getColumns
   }
 }