diff --git a/dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/index.tsx b/dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/index.tsx index 5abba11f02..b3df1b0330 100644 --- a/dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/index.tsx +++ b/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({ 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 } }