test/DolphinScheduler
1
0
Fork 0
mirror of https://gitee.com/dolphinscheduler/DolphinScheduler.git synced 2024-12-04 05:09:48 +08:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
songjianet 2022-03-17 20:16:11 +08:00 committed by GitHub
parent 44c8d615a4
commit 451f2849c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 85 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/index.tsx
View File

@ -15,7 +15,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { defineComponent, onMounted, ref, toRefs } from 'vue' import {defineComponent, onMounted, ref, toRefs, watch} from 'vue'
import { import {
NButton, NButton,
NInput, NInput,
@ -40,10 +40,12 @@ const AlarmInstanceManage = defineComponent({
const { t } = useI18n() const { t } = useI18n()
const showDetailModal = ref(false) const showDetailModal = ref(false)
const currentRecord = ref() const currentRecord = ref()
const columns = ref()
const { IS_ADMIN } = useUserInfo() const { IS_ADMIN } = useUserInfo()
const { data, changePage, changePageSize, deleteRecord, updateList } =
useTable()
const { columnsRef } = useColumns( const { getColumns } = useColumns(
(record: IRecord, type: 'edit' | 'delete') => { (record: IRecord, type: 'edit' | 'delete') => {
if (type === 'edit') { if (type === 'edit') {
showDetailModal.value = true showDetailModal.value = true
@ -54,9 +56,6 @@ const AlarmInstanceManage = defineComponent({
} }
) )
const { data, changePage, changePageSize, deleteRecord, updateList } =
useTable()
const onCreate = () => { const onCreate = () => {
currentRecord.value = null currentRecord.value = null
showDetailModal.value = true showDetailModal.value = true
@ -69,6 +68,11 @@ const AlarmInstanceManage = defineComponent({
onMounted(() => { onMounted(() => {
changePage(1) changePage(1)
columns.value = getColumns()
})
watch(useI18n().locale, () => {
columns.value = getColumns()
}) })
return { return {
@ -76,7 +80,7 @@ const AlarmInstanceManage = defineComponent({
IS_ADMIN, IS_ADMIN,
showDetailModal, showDetailModal,
currentRecord: currentRecord, currentRecord: currentRecord,
columnsRef, columns,
...toRefs(data), ...toRefs(data),
changePage, changePage,
changePageSize, changePageSize,
@ -91,7 +95,7 @@ const AlarmInstanceManage = defineComponent({
IS_ADMIN, IS_ADMIN,
currentRecord, currentRecord,
showDetailModal, showDetailModal,
columnsRef, columns,
list, list,
page, page,
pageSize, pageSize,
@ -141,7 +145,7 @@ const AlarmInstanceManage = defineComponent({
</Card> </Card>
<Card title='' class={styles['mt-8']}> <Card title='' class={styles['mt-8']}>
<NDataTable <NDataTable
columns={columnsRef} columns={columns}
data={list} data={list}
loading={loading} loading={loading}
striped striped

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

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