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 13:27:31 UTC
[dolphinscheduler] branch dev updated: [Fix][UI Next][V1.0.0-Alpha] Fix the problem of table multilingual switching in datasource. (#8970)
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 045ef75 [Fix][UI Next][V1.0.0-Alpha] Fix the problem of table multilingual switching in datasource. (#8970)
045ef75 is described below
commit 045ef753d1276aafe938fa319b16f444be783845
Author: songjianet <17...@qq.com>
AuthorDate: Thu Mar 17 21:26:59 2022 +0800
[Fix][UI Next][V1.0.0-Alpha] Fix the problem of table multilingual switching in datasource. (#8970)
---
.../src/views/datasource/list/index.tsx | 21 ++-
.../src/views/datasource/list/use-columns.ts | 194 +++++++++++----------
2 files changed, 111 insertions(+), 104 deletions(-)
diff --git a/dolphinscheduler-ui-next/src/views/datasource/list/index.tsx b/dolphinscheduler-ui-next/src/views/datasource/list/index.tsx
index 955c0f2..1f6ae4e 100644
--- a/dolphinscheduler-ui-next/src/views/datasource/list/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/datasource/list/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,
@@ -38,8 +38,11 @@ const list = defineComponent({
const { t } = useI18n()
const showDetailModal = ref(false)
const selectId = ref()
+ const columns = ref()
+ const { data, changePage, changePageSize, deleteRecord, updateList } =
+ useTable()
- const { columnsRef } = useColumns((id: number, type: 'edit' | 'delete') => {
+ const { getColumns } = useColumns((id: number, type: 'edit' | 'delete') => {
if (type === 'edit') {
showDetailModal.value = true
selectId.value = id
@@ -48,9 +51,6 @@ const list = defineComponent({
}
})
- const { data, changePage, changePageSize, deleteRecord, updateList } =
- useTable()
-
const onCreate = () => {
selectId.value = null
showDetailModal.value = true
@@ -58,13 +58,18 @@ const list = defineComponent({
onMounted(() => {
changePage(1)
+ columns.value = getColumns()
+ })
+
+ watch(useI18n().locale, () => {
+ columns.value = getColumns()
})
return {
t,
showDetailModal,
id: selectId,
- columnsRef,
+ columns,
...toRefs(data),
changePage,
changePageSize,
@@ -77,7 +82,7 @@ const list = defineComponent({
t,
id,
showDetailModal,
- columnsRef,
+ columns,
list,
page,
pageSize,
@@ -126,7 +131,7 @@ const list = defineComponent({
<Card title='' class={styles['mt-8']}>
<NDataTable
row-class-name='data-source-items'
- columns={columnsRef}
+ columns={columns}
data={list}
loading={loading}
striped
diff --git a/dolphinscheduler-ui-next/src/views/datasource/list/use-columns.ts b/dolphinscheduler-ui-next/src/views/datasource/list/use-columns.ts
index 976c723..493c506 100644
--- a/dolphinscheduler-ui-next/src/views/datasource/list/use-columns.ts
+++ b/dolphinscheduler-ui-next/src/views/datasource/list/use-columns.ts
@@ -21,108 +21,110 @@ import { NPopover, NButton, NIcon, NPopconfirm, NSpace } from 'naive-ui'
import { EditOutlined, DeleteOutlined } from '@vicons/antd'
import JsonHighlight from './json-highlight'
import ButtonLink from '@/components/button-link'
-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('datasource.datasource_name'),
- key: 'name'
- },
- {
- title: t('datasource.datasource_user_name'),
- key: 'userName'
- },
- {
- title: t('datasource.datasource_type'),
- key: 'type'
- },
- {
- title: t('datasource.datasource_parameter'),
- key: 'parameter',
- render: (rowData) => {
- return h(
- NPopover,
- { trigger: 'click' },
- {
- trigger: () =>
- h(ButtonLink, null, {
- default: () => t('datasource.click_to_view')
- }),
- default: () => h(JsonHighlight, { rowData })
- }
- )
+ const getColumns = (): TableColumns => {
+ return [
+ {
+ title: '#',
+ key: 'index',
+ render: (rowData, rowIndex) => rowIndex + 1
+ },
+ {
+ title: t('datasource.datasource_name'),
+ key: 'name'
+ },
+ {
+ title: t('datasource.datasource_user_name'),
+ key: 'userName'
+ },
+ {
+ title: t('datasource.datasource_type'),
+ key: 'type'
+ },
+ {
+ title: t('datasource.datasource_parameter'),
+ key: 'parameter',
+ render: (rowData) => {
+ return h(
+ NPopover,
+ { trigger: 'click' },
+ {
+ trigger: () =>
+ h(ButtonLink, null, {
+ default: () => t('datasource.click_to_view')
+ }),
+ default: () => h(JsonHighlight, { rowData })
+ }
+ )
+ }
+ },
+ {
+ title: t('datasource.description'),
+ key: 'note'
+ },
+ {
+ title: t('datasource.create_time'),
+ key: 'createTime'
+ },
+ {
+ title: t('datasource.update_time'),
+ key: 'updateTime'
+ },
+ {
+ title: t('datasource.operation'),
+ key: 'operation',
+ width: 150,
+ render: (rowData, unused) => {
+ return h(NSpace, null, {
+ default: () => [
+ h(
+ NButton,
+ {
+ circle: true,
+ type: 'info',
+ onClick: () => void onCallback(rowData.id, 'edit')
+ },
+ {
+ default: () =>
+ h(NIcon, null, { default: () => h(EditOutlined) })
+ }
+ ),
+ h(
+ NPopconfirm,
+ {
+ onPositiveClick: () => void onCallback(rowData.id, 'delete'),
+ negativeText: t('datasource.cancel'),
+ positiveText: t('datasource.confirm')
+ },
+ {
+ trigger: () =>
+ h(
+ NButton,
+ {
+ circle: true,
+ type: 'error',
+ class: 'btn-delete'
+ },
+ {
+ default: () =>
+ h(NIcon, null, { default: () => h(DeleteOutlined) })
+ }
+ ),
+ default: () => t('datasource.delete')
+ }
+ )
+ ]
+ })
+ }
}
- },
- {
- title: t('datasource.description'),
- key: 'note'
- },
- {
- title: t('datasource.create_time'),
- key: 'createTime'
- },
- {
- title: t('datasource.update_time'),
- key: 'updateTime'
- },
- {
- title: t('datasource.operation'),
- key: 'operation',
- width: 150,
- render: (rowData, unused) => {
- return h(NSpace, null, {
- default: () => [
- h(
- NButton,
- {
- circle: true,
- type: 'info',
- onClick: () => void onCallback(rowData.id, 'edit')
- },
- {
- default: () =>
- h(NIcon, null, { default: () => h(EditOutlined) })
- }
- ),
- h(
- NPopconfirm,
- {
- onPositiveClick: () => void onCallback(rowData.id, 'delete'),
- negativeText: t('datasource.cancel'),
- positiveText: t('datasource.confirm')
- },
- {
- trigger: () =>
- h(
- NButton,
- {
- circle: true,
- type: 'error',
- class: 'btn-delete'
- },
- {
- default: () =>
- h(NIcon, null, { default: () => h(DeleteOutlined) })
- }
- ),
- default: () => t('datasource.delete')
- }
- )
- ]
- })
- }
- }
- ]
+ ]
+ }
return {
- columnsRef
+ getColumns
}
}