You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by ki...@apache.org on 2022/03/17 12:16:20 UTC
[dolphinscheduler] branch dev updated: [Fix][UI Next][V1.0.0-Alpha] Fix the problem of table multilingual switching in alarm instance management. (#8968)
This is an automated email from the ASF dual-hosted git repository.
kirs pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 451f284 [Fix][UI Next][V1.0.0-Alpha] Fix the problem of table multilingual switching in alarm instance management. (#8968)
451f284 is described below
commit 451f2849c10e972b61ed0c3f89e0e65791db95c5
Author: songjianet <17...@qq.com>
AuthorDate: Thu Mar 17 20:16:11 2022 +0800
[Fix][UI Next][V1.0.0-Alpha] Fix the problem of table multilingual switching in alarm instance management. (#8968)
---
.../views/security/alarm-instance-manage/index.tsx | 22 ++--
.../security/alarm-instance-manage/use-columns.ts | 142 +++++++++++----------
2 files changed, 85 insertions(+), 79 deletions(-)
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 5abba11..b3df1b0 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({
</Card>
<Card title='' class={styles['mt-8']}>
<NDataTable
- columns={columnsRef}
+ columns={columns}
data={list}
loading={loading}
striped
diff --git a/dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/use-columns.ts b/dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/use-columns.ts
index 15a8678..b3803a0 100644
--- a/dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/use-columns.ts
+++ b/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
}
}