test/DolphinScheduler
1
0
Fork 0
mirror of https://gitee.com/dolphinscheduler/DolphinScheduler.git synced 2024-12-03 12:48:46 +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.
*/
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

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 { 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
}
}