You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by so...@apache.org on 2022/03/22 02:36:47 UTC
[dolphinscheduler] branch dev updated: [Feature][UI Next][V1.0.0-Alpha] Adjust all table column widths in th… (#9062)
This is an automated email from the ASF dual-hosted git repository.
songjian 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 bf1f959 [Feature][UI Next][V1.0.0-Alpha] Adjust all table column widths in th… (#9062)
bf1f959 is described below
commit bf1f959f587ff7dfb268a21b2c99b72388ad778a
Author: Amy0104 <97...@users.noreply.github.com>
AuthorDate: Tue Mar 22 10:36:40 2022 +0800
[Feature][UI Next][V1.0.0-Alpha] Adjust all table column widths in th… (#9062)
* [Feature][UI Next][V1.0.0-Alpha] Adjust all table column widths in this project.
* [Fix][UI Next][V1.0.0-Alpha] Fix workflow delete handle (#9057)
* [Fix][UI Next][V1.0.0-Alpha] User Manage Queue display error (#9060)
* fix package bug (#9051)
* [Fix][UI Next][V1.0.0-Alpha] Fix the monitoring center does not support multiple worker. (#9061)
* [Fix][UI Next][V1.0.0-Alpha] Remove the unused Ref.
* [Fix-9025] [UI Next] Rectify this issue about failing to save a process when the user is ordinary user. (#9063)
* modify the back-edn api
* fix this issue
* [Fix][UI Next][V1.0.0-Alpha]Change the column-config file name to column-width-config and COLUMN_CONFIG to COLUMN_WIDTH_CONFIG.
* [Bug][UI Next] Fix style errors (#9067)
* [Feature][UI Next][V1.0.0-Alpha] Adjust all table column widths in this project.
* [Fix][UI Next][V1.0.0-Alpha] Remove the unused Ref.
* [Fix][UI Next][V1.0.0-Alpha]Change the column-config file name to column-width-config and COLUMN_CONFIG to COLUMN_WIDTH_CONFIG.
Co-authored-by: Devosend <de...@gmail.com>
Co-authored-by: zixi0825 <su...@gmail.com>
Co-authored-by: songjianet <17...@qq.com>
Co-authored-by: calvin <ji...@163.com>
Co-authored-by: labbomb <73...@qq.com>
---
.../src/utils/column-width-config.ts | 94 ++++++++++++++++++++++
.../src/views/data-quality/task-result/index.tsx | 6 +-
.../views/data-quality/task-result/use-table.ts | 60 ++++++++++----
.../src/views/datasource/list/detail.tsx | 2 +-
.../src/views/datasource/list/index.tsx | 6 +-
.../src/views/datasource/list/use-columns.ts | 40 ++++++---
.../src/views/projects/list/index.tsx | 1 +
.../src/views/projects/list/use-table.ts | 53 ++++++++++--
.../src/views/projects/task/definition/index.tsx | 6 +-
.../views/projects/task/definition/use-table.ts | 45 +++++++----
.../src/views/projects/task/instance/index.tsx | 2 +-
.../src/views/projects/task/instance/use-table.ts | 37 +++++++--
.../views/projects/workflow/definition/index.tsx | 2 +-
.../projects/workflow/definition/timing/index.tsx | 1 +
.../workflow/definition/timing/use-table.ts | 32 ++++++--
.../projects/workflow/definition/use-table.ts | 36 ++++++---
.../src/views/projects/workflow/instance/index.tsx | 2 +-
.../views/projects/workflow/instance/use-table.ts | 36 +++++++--
.../src/views/resource/file/index.tsx | 8 +-
.../src/views/resource/file/table/use-table.ts | 43 +++++++---
.../src/views/resource/task-group/option/index.tsx | 3 +-
.../views/resource/task-group/option/use-table.ts | 53 +++++++++---
.../src/views/resource/task-group/queue/index.tsx | 1 +
.../views/resource/task-group/queue/use-table.ts | 66 ++++++++++++---
.../src/views/resource/udf/function/index.tsx | 1 +
.../src/views/resource/udf/function/use-table.ts | 34 +++++---
.../src/views/resource/udf/resource/index.tsx | 1 +
.../src/views/resource/udf/resource/use-table.ts | 27 +++++--
.../views/security/environment-manage/index.tsx | 1 +
.../views/security/environment-manage/use-table.ts | 29 +++++--
.../views/security/k8s-namespace-manage/index.tsx | 6 +-
.../security/k8s-namespace-manage/use-table.ts | 37 ++++++---
.../src/views/security/tenant-manage/index.tsx | 1 +
.../src/views/security/tenant-manage/use-table.ts | 29 +++++--
.../src/views/security/user-manage/index.tsx | 3 +-
.../src/views/security/user-manage/use-columns.ts | 49 ++++++++---
36 files changed, 673 insertions(+), 180 deletions(-)
diff --git a/dolphinscheduler-ui-next/src/utils/column-width-config.ts b/dolphinscheduler-ui-next/src/utils/column-width-config.ts
new file mode 100644
index 0000000..a4ccda0
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/utils/column-width-config.ts
@@ -0,0 +1,94 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { isNumber, sumBy } from 'lodash'
+import type {
+ TableColumns,
+ CommonColumnInfo
+} from 'naive-ui/es/data-table/src/interface'
+
+export const COLUMN_WIDTH_CONFIG = {
+ selection: {
+ width: 50
+ },
+ index: {
+ width: 50
+ },
+ name: {
+ width: 200,
+ ellipsis: {
+ tooltip: true
+ }
+ },
+ state: {
+ width: 120
+ },
+ type: {
+ width: 120
+ },
+ version: {
+ width: 80
+ },
+ time: {
+ width: 180
+ },
+ operation: (number: number): CommonColumnInfo => ({
+ fixed: 'right',
+ width: Math.max(30 * number + 12 * (number - 1) + 24, 100)
+ }),
+ userName: {
+ width: 120,
+ ellipsis: {
+ tooltip: true
+ }
+ },
+ ruleType: {
+ width: 120
+ },
+ note: {
+ width: 180,
+ ellipsis: {
+ tooltip: true
+ }
+ },
+ dryRun: {
+ width: 140
+ },
+ times: {
+ width: 120
+ },
+ duration: {
+ width: 120
+ },
+ yesOrNo: {
+ width: 100,
+ ellipsis: {
+ tooltip: true
+ }
+ },
+ size: {
+ width: 100
+ },
+ tag: {
+ width: 160
+ }
+}
+
+export const calculateTableWidth = (columns: TableColumns) =>
+ sumBy(columns, (column) => (isNumber(column.width) ? column.width : 0))
+
+export const DefaultTableWidth = 1800
diff --git a/dolphinscheduler-ui-next/src/views/data-quality/task-result/index.tsx b/dolphinscheduler-ui-next/src/views/data-quality/task-result/index.tsx
index 3ac5311..2298064 100644
--- a/dolphinscheduler-ui-next/src/views/data-quality/task-result/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/data-quality/task-result/index.tsx
@@ -155,7 +155,11 @@ const TaskResult = defineComponent({
</NSpace>
</NCard>
<Card class={styles['table-card']}>
- <NDataTable columns={this.columns} data={this.tableData} />
+ <NDataTable
+ columns={this.columns}
+ data={this.tableData}
+ scrollX={this.tableWidth}
+ />
<div class={styles.pagination}>
<NPagination
v-model:page={this.page}
diff --git a/dolphinscheduler-ui-next/src/views/data-quality/task-result/use-table.ts b/dolphinscheduler-ui-next/src/views/data-quality/task-result/use-table.ts
index dc40592..ae6dc97 100644
--- a/dolphinscheduler-ui-next/src/views/data-quality/task-result/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/data-quality/task-result/use-table.ts
@@ -20,6 +20,11 @@ import { reactive, ref } from 'vue'
import { useAsyncState } from '@vueuse/core'
import { queryExecuteResultListPaging } from '@/service/modules/data-quality'
import { format } from 'date-fns'
+import {
+ COLUMN_WIDTH_CONFIG,
+ calculateTableWidth,
+ DefaultTableWidth
+} from '@/utils/column-width-config'
import type {
ResultItem,
ResultListRes
@@ -31,6 +36,7 @@ export function useTable() {
const variables = reactive({
columns: [],
+ tableWidth: DefaultTableWidth,
tableData: [],
page: ref(1),
pageSize: ref(10),
@@ -46,15 +52,18 @@ export function useTable() {
{
title: '#',
key: 'index',
- render: (row: any, index: number) => index + 1
+ render: (row: any, index: number) => index + 1,
+ ...COLUMN_WIDTH_CONFIG['index']
},
{
title: t('data_quality.task_result.task_name'),
- key: 'userName'
+ key: 'userName',
+ ...COLUMN_WIDTH_CONFIG['userName']
},
{
title: t('data_quality.task_result.workflow_instance'),
- key: 'processInstanceName'
+ key: 'processInstanceName',
+ ...COLUMN_WIDTH_CONFIG['name']
},
{
title: t('data_quality.task_result.rule_type'),
@@ -69,11 +78,13 @@ export function useTable() {
} else if (row.ruleType === 3) {
return t('data_quality.task_result.multi_table_comparison')
}
- }
+ },
+ ...COLUMN_WIDTH_CONFIG['ruleType']
},
{
title: t('data_quality.task_result.rule_name'),
- key: 'ruleName'
+ key: 'ruleName',
+ ...COLUMN_WIDTH_CONFIG['name']
},
{
title: t('data_quality.task_result.state'),
@@ -86,15 +97,18 @@ export function useTable() {
} else if (row.state === 2) {
return t('data_quality.task_result.failure')
}
- }
+ },
+ ...COLUMN_WIDTH_CONFIG['state']
},
{
title: t('data_quality.task_result.actual_value'),
- key: 'statisticsValue'
+ key: 'statisticsValue',
+ width: 140
},
{
title: t('data_quality.task_result.excepted_value'),
- key: 'comparisonValue'
+ key: 'comparisonValue',
+ width: 140
},
{
title: t('data_quality.task_result.check_type'),
@@ -109,7 +123,8 @@ export function useTable() {
} else if (row.checkType === 3) {
return t('data_quality.task_result.expected_and_actual_or_expected')
}
- }
+ },
+ ...COLUMN_WIDTH_CONFIG['type']
},
{
title: t('data_quality.task_result.operator'),
@@ -128,40 +143,51 @@ export function useTable() {
} else if (row.operator === 5) {
return '!='
}
- }
+ },
+ ...COLUMN_WIDTH_CONFIG['userName']
},
{
title: t('data_quality.task_result.threshold'),
- key: 'threshold'
+ key: 'threshold',
+ width: 120
},
{
title: t('data_quality.task_result.failure_strategy'),
- key: 'failureStrategy'
+ key: 'failureStrategy',
+ width: 150
},
{
title: t('data_quality.task_result.excepted_value_type'),
- key: 'comparisonTypeName'
+ key: 'comparisonTypeName',
+ width: 200
},
{
title: t('data_quality.task_result.error_output_path'),
key: 'errorOutputPath',
render: (row: ResultItem) => {
return row.errorOutputPath ? row : '-'
- }
+ },
+ width: 200
},
{
title: t('data_quality.task_result.username'),
- key: 'userName'
+ key: 'userName',
+ ...COLUMN_WIDTH_CONFIG['userName']
},
{
title: t('data_quality.task_result.create_time'),
- key: 'createTime'
+ key: 'createTime',
+ ...COLUMN_WIDTH_CONFIG['time']
},
{
title: t('data_quality.task_result.update_time'),
- key: 'updateTime'
+ key: 'updateTime',
+ ...COLUMN_WIDTH_CONFIG['time']
}
]
+ if (variables.tableWidth) {
+ variables.tableWidth = calculateTableWidth(variables.columns)
+ }
}
const getTableData = (params: any) => {
diff --git a/dolphinscheduler-ui-next/src/views/datasource/list/detail.tsx b/dolphinscheduler-ui-next/src/views/datasource/list/detail.tsx
index 08a66b9..294e042 100644
--- a/dolphinscheduler-ui-next/src/views/datasource/list/detail.tsx
+++ b/dolphinscheduler-ui-next/src/views/datasource/list/detail.tsx
@@ -141,7 +141,7 @@ const DetailModal = defineComponent({
rules={rules}
ref='detailFormRef'
require-mark-placement='left'
- label-align='right'
+ label-align='left'
>
<NFormItem
label={t('datasource.datasource')}
diff --git a/dolphinscheduler-ui-next/src/views/datasource/list/index.tsx b/dolphinscheduler-ui-next/src/views/datasource/list/index.tsx
index 1f6ae4e..c35e0f5 100644
--- a/dolphinscheduler-ui-next/src/views/datasource/list/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/datasource/list/index.tsx
@@ -31,6 +31,7 @@ import { useI18n } from 'vue-i18n'
import { useColumns } from './use-columns'
import { useTable } from './use-table'
import styles from './index.module.scss'
+import type { TableColumns } from './types'
const list = defineComponent({
name: 'list',
@@ -38,7 +39,7 @@ const list = defineComponent({
const { t } = useI18n()
const showDetailModal = ref(false)
const selectId = ref()
- const columns = ref()
+ const columns = ref({ columns: [] as TableColumns, tableWidth: 0 })
const { data, changePage, changePageSize, deleteRecord, updateList } =
useTable()
@@ -131,10 +132,11 @@ const list = defineComponent({
<Card title='' class={styles['mt-8']}>
<NDataTable
row-class-name='data-source-items'
- columns={columns}
+ columns={columns.columns}
data={list}
loading={loading}
striped
+ scrollX={columns.tableWidth}
/>
<NPagination
page={page}
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 02f6c70..e376b6b 100644
--- a/dolphinscheduler-ui-next/src/views/datasource/list/use-columns.ts
+++ b/dolphinscheduler-ui-next/src/views/datasource/list/use-columns.ts
@@ -28,33 +28,43 @@ import {
import { EditOutlined, DeleteOutlined } from '@vicons/antd'
import JsonHighlight from './json-highlight'
import ButtonLink from '@/components/button-link'
+import {
+ COLUMN_WIDTH_CONFIG,
+ calculateTableWidth,
+ DefaultTableWidth
+} from '@/utils/column-width-config'
import type { TableColumns } from './types'
export function useColumns(onCallback: Function) {
const { t } = useI18n()
- const getColumns = (): TableColumns => {
- return [
+ const getColumns = (): { columns: TableColumns; tableWidth: number } => {
+ const columns = [
{
title: '#',
key: 'index',
- render: (rowData, rowIndex) => rowIndex + 1
+ render: (unused, rowIndex) => rowIndex + 1,
+ ...COLUMN_WIDTH_CONFIG['index']
},
{
title: t('datasource.datasource_name'),
- key: 'name'
+ key: 'name',
+ ...COLUMN_WIDTH_CONFIG['name']
},
{
title: t('datasource.datasource_user_name'),
- key: 'userName'
+ key: 'userName',
+ ...COLUMN_WIDTH_CONFIG['userName']
},
{
title: t('datasource.datasource_type'),
- key: 'type'
+ key: 'type',
+ width: 180
},
{
title: t('datasource.datasource_parameter'),
key: 'parameter',
+ width: 180,
render: (rowData) => {
return h(
NPopover,
@@ -71,20 +81,23 @@ export function useColumns(onCallback: Function) {
},
{
title: t('datasource.description'),
- key: 'note'
+ key: 'note',
+ ...COLUMN_WIDTH_CONFIG['note']
},
{
title: t('datasource.create_time'),
- key: 'createTime'
+ key: 'createTime',
+ ...COLUMN_WIDTH_CONFIG['time']
},
{
title: t('datasource.update_time'),
- key: 'updateTime'
+ key: 'updateTime',
+ ...COLUMN_WIDTH_CONFIG['time']
},
{
title: t('datasource.operation'),
key: 'operation',
- width: 150,
+ ...COLUMN_WIDTH_CONFIG['operation'](2),
render: (rowData) => {
return h(NSpace, null, {
default: () => [
@@ -139,7 +152,12 @@ export function useColumns(onCallback: Function) {
})
}
}
- ]
+ ] as TableColumns
+
+ return {
+ columns,
+ tableWidth: calculateTableWidth(columns) || DefaultTableWidth
+ }
}
return {
diff --git a/dolphinscheduler-ui-next/src/views/projects/list/index.tsx b/dolphinscheduler-ui-next/src/views/projects/list/index.tsx
index 7a45979..2d901d6 100644
--- a/dolphinscheduler-ui-next/src/views/projects/list/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/list/index.tsx
@@ -126,6 +126,7 @@ const list = defineComponent({
<NDataTable
columns={this.columns}
data={this.tableData}
+ scrollX={this.tableWidth}
row-class-name='items'
/>
<div class={styles.pagination}>
diff --git a/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts
index 61ef412..c708c6d 100644
--- a/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts
@@ -32,6 +32,11 @@ import {
NSpace,
NTooltip
} from 'naive-ui'
+import {
+ COLUMN_WIDTH_CONFIG,
+ calculateTableWidth,
+ DefaultTableWidth
+} from '@/utils/column-width-config'
import type { Router } from 'vue-router'
import type { ProjectRes } from '@/service/modules/projects/types'
import { DeleteOutlined, EditOutlined } from '@vicons/antd'
@@ -64,12 +69,14 @@ export function useTable() {
{
title: '#',
key: 'index',
- render: (row: any, index: number) => index + 1
+ render: (unused: any, index: number) => index + 1,
+ ...COLUMN_WIDTH_CONFIG['index']
},
{
title: t('project.list.project_name'),
key: 'name',
className: 'project-name',
+ ...COLUMN_WIDTH_CONFIG['name'],
render: (row: { code: string; name: any }) =>
h(
NEllipsis,
@@ -89,18 +96,46 @@ export function useTable() {
}
)
},
- { title: t('project.list.owned_users'), key: 'userName' },
- { title: t('project.list.workflow_define_count'), key: 'defCount' },
+ {
+ title: t('project.list.owned_users'),
+ key: 'userName',
+ ...COLUMN_WIDTH_CONFIG['userName']
+ },
+ {
+ title: t('project.list.workflow_define_count'),
+ key: 'defCount',
+ width: 120,
+ ellipsis: {
+ tooltip: true
+ }
+ },
{
title: t('project.list.process_instance_running_count'),
- key: 'instRunningCount'
+ key: 'instRunningCount',
+ width: 120,
+ ellipsis: {
+ tooltip: true
+ }
+ },
+ {
+ title: t('project.list.description'),
+ key: 'description',
+ ...COLUMN_WIDTH_CONFIG['note']
+ },
+ {
+ title: t('project.list.create_time'),
+ key: 'createTime',
+ ...COLUMN_WIDTH_CONFIG['time']
+ },
+ {
+ title: t('project.list.update_time'),
+ key: 'updateTime',
+ ...COLUMN_WIDTH_CONFIG['time']
},
- { title: t('project.list.description'), key: 'description' },
- { title: t('project.list.create_time'), key: 'createTime' },
- { title: t('project.list.update_time'), key: 'updateTime' },
{
title: t('project.list.operation'),
key: 'actions',
+ ...COLUMN_WIDTH_CONFIG['operation'](2),
render(row: any) {
return h(NSpace, null, {
default: () => [
@@ -168,10 +203,14 @@ export function useTable() {
}
}
]
+ if (variables.tableWidth) {
+ variables.tableWidth = calculateTableWidth(variables.columns)
+ }
}
const variables = reactive({
columns: [],
+ tableWidth: DefaultTableWidth,
tableData: [],
page: ref(1),
pageSize: ref(10),
diff --git a/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx b/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx
index ddb9084..bf59455 100644
--- a/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx
@@ -162,7 +162,11 @@ const TaskDefinition = defineComponent({
</div>
</NCard>
<Card class={styles['table-card']}>
- <NDataTable columns={this.columns} data={this.tableData} />
+ <NDataTable
+ columns={this.columns}
+ data={this.tableData}
+ scrollX={this.tableWidth}
+ />
<div class={styles.pagination}>
<NPagination
v-model:page={this.page}
diff --git a/dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts
index c6cbae9..88b1b86 100644
--- a/dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts
@@ -31,6 +31,11 @@ import {
deleteTaskDefinition
} from '@/service/modules/task-definition'
import { useRoute } from 'vue-router'
+import {
+ COLUMN_WIDTH_CONFIG,
+ calculateTableWidth,
+ DefaultTableWidth
+} from '@/utils/column-width-config'
import type {
TaskDefinitionItem,
TaskDefinitionRes
@@ -47,7 +52,8 @@ export function useTable(onEdit: Function) {
{
title: '#',
key: 'index',
- render: (row: any, index: number) => index + 1
+ render: (row: any, index: number) => index + 1,
+ ...COLUMN_WIDTH_CONFIG['index']
},
{
title: t('project.task.task_name'),
@@ -59,40 +65,41 @@ export function useTable(onEdit: Function) {
onClick: () => void onEdit(row, true)
},
{ default: () => row.taskName }
- )
+ ),
+ ...COLUMN_WIDTH_CONFIG['name']
},
{
title: t('project.task.workflow_name'),
- key: 'processDefinitionName'
+ key: 'processDefinitionName',
+ ...COLUMN_WIDTH_CONFIG['name']
},
{
title: t('project.task.workflow_state'),
key: 'processReleaseState',
render: (row: any) => {
if (row.processReleaseState === 'OFFLINE') {
- return h(
- NTag,
- { type: 'error', size: 'small' },
+ return h(NTag, { type: 'error', size: 'small' }, () =>
t('project.task.offline')
)
} else if (row.processReleaseState === 'ONLINE') {
- return h(
- NTag,
- { type: 'info', size: 'small' },
+ return h(NTag, { type: 'info', size: 'small' }, () =>
t('project.task.online')
)
}
- }
+ },
+ ...COLUMN_WIDTH_CONFIG['state']
},
{
title: t('project.task.task_type'),
- key: 'taskType'
+ key: 'taskType',
+ ...COLUMN_WIDTH_CONFIG['type']
},
{
title: t('project.task.version'),
key: 'taskVersion',
render: (row: TaskDefinitionItem) =>
- h('span', null, 'v' + row.taskVersion)
+ h('span', null, 'v' + row.taskVersion),
+ ...COLUMN_WIDTH_CONFIG['version']
},
{
title: t('project.task.upstream_tasks'),
@@ -113,19 +120,23 @@ export function useTable(onEdit: Function) {
)
})
})
- )
+ ),
+ width: 140
},
{
title: t('project.task.create_time'),
- key: 'taskCreateTime'
+ key: 'taskCreateTime',
+ ...COLUMN_WIDTH_CONFIG['time']
},
{
title: t('project.task.update_time'),
- key: 'taskUpdateTime'
+ key: 'taskUpdateTime',
+ ...COLUMN_WIDTH_CONFIG['time']
},
{
title: t('project.task.operation'),
key: 'operation',
+ ...COLUMN_WIDTH_CONFIG['operation'](4),
render(row: any) {
return h(NSpace, null, {
default: () => [
@@ -251,10 +262,14 @@ export function useTable(onEdit: Function) {
}
}
]
+ if (variables.tableWidth) {
+ variables.tableWidth = calculateTableWidth(variables.columns)
+ }
}
const variables = reactive({
columns: [],
+ tableWidth: DefaultTableWidth,
tableData: [],
page: ref(1),
pageSize: ref(10),
diff --git a/dolphinscheduler-ui-next/src/views/projects/task/instance/index.tsx b/dolphinscheduler-ui-next/src/views/projects/task/instance/index.tsx
index 033eb4e..b8f5fa7 100644
--- a/dolphinscheduler-ui-next/src/views/projects/task/instance/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/task/instance/index.tsx
@@ -185,7 +185,7 @@ const TaskInstance = defineComponent({
<NDataTable
columns={this.columns}
data={this.tableData}
- scrollX={1800}
+ scrollX={this.tableWidth}
/>
<div class={styles.pagination}>
<NPagination
diff --git a/dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts
index 440f4f1..26f58bd 100644
--- a/dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts
@@ -33,6 +33,11 @@ import {
import { format } from 'date-fns'
import { useRoute, useRouter } from 'vue-router'
import { parseTime, tasksState } from '@/utils/common'
+import {
+ COLUMN_WIDTH_CONFIG,
+ calculateTableWidth,
+ DefaultTableWidth
+} from '@/utils/column-width-config'
import type { Router, TaskInstancesRes, IRecord, ITaskState } from './types'
export function useTable() {
@@ -44,6 +49,7 @@ export function useTable() {
const variables = reactive({
columns: [],
+ tableWidth: DefaultTableWidth,
tableData: [] as IRecord[],
page: ref(1),
pageSize: ref(10),
@@ -64,15 +70,18 @@ export function useTable() {
{
title: '#',
key: 'index',
- render: (row: any, index: number) => index + 1
+ render: (row: any, index: number) => index + 1,
+ ...COLUMN_WIDTH_CONFIG['index']
},
{
title: t('project.task.task_name'),
- key: 'name'
+ key: 'name',
+ ...COLUMN_WIDTH_CONFIG['name']
},
{
title: t('project.task.workflow_instance'),
key: 'processInstanceName',
+ ...COLUMN_WIDTH_CONFIG['name'],
render: (row: {
processInstanceId: number
processInstanceName: string
@@ -92,52 +101,61 @@ export function useTable() {
},
{
title: t('project.task.executor'),
- key: 'executorName'
+ key: 'executorName',
+ ...COLUMN_WIDTH_CONFIG['name']
},
{
title: t('project.task.node_type'),
- key: 'taskType'
+ key: 'taskType',
+ ...COLUMN_WIDTH_CONFIG['type']
},
{
title: t('project.task.state'),
key: 'state',
+ ...COLUMN_WIDTH_CONFIG['state'],
render: (row: IRecord) => renderStateCell(row.state, t)
},
{
title: t('project.task.submit_time'),
+ ...COLUMN_WIDTH_CONFIG['time'],
key: 'submitTime'
},
{
title: t('project.task.start_time'),
+ ...COLUMN_WIDTH_CONFIG['time'],
key: 'startTime'
},
{
title: t('project.task.end_time'),
+ ...COLUMN_WIDTH_CONFIG['time'],
key: 'endTime'
},
{
title: t('project.task.duration'),
key: 'duration',
+ ...COLUMN_WIDTH_CONFIG['duration'],
render: (row: any) => h('span', null, row.duration ? row.duration : '-')
},
{
title: t('project.task.retry_count'),
- key: 'retryTimes'
+ key: 'retryTimes',
+ ...COLUMN_WIDTH_CONFIG['times']
},
{
title: t('project.task.dry_run_flag'),
key: 'dryRun',
+ ...COLUMN_WIDTH_CONFIG['dryRun'],
render: (row: IRecord) => (row.dryRun === 1 ? 'YES' : 'NO')
},
{
title: t('project.task.host'),
- key: 'host'
+ key: 'host',
+ ...COLUMN_WIDTH_CONFIG['name']
},
{
title: t('project.task.operation'),
key: 'operation',
- width: 150,
- fixed: 'right',
+ ...COLUMN_WIDTH_CONFIG['operation'](3),
render(row: any) {
return h(NSpace, null, {
default: () => [
@@ -220,6 +238,9 @@ export function useTable() {
}
}
]
+ if (variables.tableWidth) {
+ variables.tableWidth = calculateTableWidth(variables.columns)
+ }
}
const handleLog = (row: any) => {
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.tsx
index c16f862..e1deedc 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.tsx
@@ -154,10 +154,10 @@ export default defineComponent({
columns={this.columns}
data={this.tableData}
striped
- size={'small'}
class={styles.table}
v-model:checked-row-keys={this.checkedRowKeys}
row-class-name='items'
+ scrollX={this.tableWidth}
/>
<div class={styles.pagination}>
<NPagination
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/index.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/index.tsx
index 3de139a..4c5f15a 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/index.tsx
@@ -92,6 +92,7 @@ export default defineComponent({
striped
size={'small'}
class={styles.table}
+ scrollX={this.tableWidth}
/>
<div class={styles.pagination}>
<NPagination
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts
index ed3966b..c4a4f02 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts
@@ -31,11 +31,16 @@ import {
DeleteOutlined,
EditOutlined
} from '@vicons/antd'
-import type { Router } from 'vue-router'
+import {
+ COLUMN_WIDTH_CONFIG,
+ calculateTableWidth,
+ DefaultTableWidth
+} from '@/utils/column-width-config'
import { format } from 'date-fns-tz'
import { ISearchParam } from './types'
import { useTimezoneStore } from '@/store/timezone/timezone'
import styles from '../index.module.scss'
+import type { Router } from 'vue-router'
export function useTable() {
const { t } = useI18n()
@@ -45,6 +50,7 @@ export function useTable() {
const variables = reactive({
columns: [],
+ tableWidth: DefaultTableWidth,
row: {},
tableData: [],
projectCode: ref(Number(router.currentRoute.value.params.projectCode)),
@@ -70,13 +76,13 @@ export function useTable() {
{
title: '#',
key: 'id',
- width: 50,
+ ...COLUMN_WIDTH_CONFIG['index'],
render: (row: any, index: number) => index + 1
},
{
title: t('project.workflow.workflow_name'),
key: 'processDefinitionName',
- width: 200,
+ ...COLUMN_WIDTH_CONFIG['name'],
render: (row: any) =>
h(
NEllipsis,
@@ -89,24 +95,29 @@ export function useTable() {
{
title: t('project.workflow.start_time'),
key: 'startTime',
+ ...COLUMN_WIDTH_CONFIG['time'],
render: (row: any) => renderTime(row.startTime)
},
{
title: t('project.workflow.end_time'),
key: 'endTime',
+ ...COLUMN_WIDTH_CONFIG['time'],
render: (row: any) => renderTime(row.endTime)
},
{
title: t('project.workflow.crontab'),
- key: 'crontab'
+ key: 'crontab',
+ width: 140
},
{
title: t('project.workflow.failure_strategy'),
- key: 'failureStrategy'
+ key: 'failureStrategy',
+ width: 140
},
{
title: t('project.workflow.status'),
key: 'releaseState',
+ ...COLUMN_WIDTH_CONFIG['state'],
render: (row: any) =>
row.releaseState === 'ONLINE'
? t('project.workflow.up_line')
@@ -114,16 +125,18 @@ export function useTable() {
},
{
title: t('project.workflow.create_time'),
- key: 'createTime'
+ key: 'createTime',
+ ...COLUMN_WIDTH_CONFIG['time']
},
{
title: t('project.workflow.update_time'),
- key: 'updateTime'
+ key: 'updateTime',
+ ...COLUMN_WIDTH_CONFIG['time']
},
{
title: t('project.workflow.operation'),
key: 'operation',
- fixed: 'right',
+ ...COLUMN_WIDTH_CONFIG['operation'](3),
className: styles.operation,
render: (row: any) => {
return h(NSpace, null, {
@@ -218,6 +231,9 @@ export function useTable() {
}
}
]
+ if (variables.tableWidth) {
+ variables.tableWidth = calculateTableWidth(variables.columns)
+ }
}
const handleEdit = (row: any) => {
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts
index b8c8699..9672505 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts
@@ -31,10 +31,15 @@ import {
release
} from '@/service/modules/process-definition'
import TableAction from './components/table-action'
-import { IDefinitionParam } from './types'
import styles from './index.module.scss'
import { NEllipsis, NTag } from 'naive-ui'
import ButtonLink from '@/components/button-link'
+import {
+ COLUMN_WIDTH_CONFIG,
+ calculateTableWidth,
+ DefaultTableWidth
+} from '@/utils/column-width-config'
+import type { IDefinitionParam } from './types'
export function useTable() {
const { t } = useI18n()
@@ -42,6 +47,7 @@ export function useTable() {
const variables = reactive({
columns: [],
+ tableWidth: DefaultTableWidth,
checkedRowKeys: [] as Array<RowKey>,
row: {},
tableData: [],
@@ -62,19 +68,20 @@ export function useTable() {
{
type: 'selection',
disabled: (row) => row.releaseState === 'ONLINE',
- className: 'btn-selected'
+ className: 'btn-selected',
+ ...COLUMN_WIDTH_CONFIG['selection']
},
{
title: '#',
key: 'id',
- width: 50,
+ ...COLUMN_WIDTH_CONFIG['index'],
render: (row, index) => index + 1
},
{
title: t('project.workflow.workflow_name'),
key: 'name',
- width: 200,
className: 'workflow-name',
+ ...COLUMN_WIDTH_CONFIG['name'],
render: (row) =>
h(
NEllipsis,
@@ -99,6 +106,7 @@ export function useTable() {
{
title: t('project.workflow.status'),
key: 'releaseState',
+ ...COLUMN_WIDTH_CONFIG['state'],
render: (row) =>
row.releaseState === 'ONLINE'
? t('project.workflow.up_line')
@@ -107,28 +115,32 @@ export function useTable() {
{
title: t('project.workflow.create_time'),
key: 'createTime',
- width: 150
+ ...COLUMN_WIDTH_CONFIG['time']
},
{
title: t('project.workflow.update_time'),
key: 'updateTime',
- width: 150
+ ...COLUMN_WIDTH_CONFIG['time']
},
{
title: t('project.workflow.description'),
- key: 'description'
+ key: 'description',
+ ...COLUMN_WIDTH_CONFIG['note']
},
{
title: t('project.workflow.create_user'),
- key: 'userName'
+ key: 'userName',
+ ...COLUMN_WIDTH_CONFIG['userName']
},
{
title: t('project.workflow.modify_user'),
- key: 'modifyBy'
+ key: 'modifyBy',
+ ...COLUMN_WIDTH_CONFIG['userName']
},
{
title: t('project.workflow.schedule_publish_status'),
key: 'scheduleReleaseState',
+ ...COLUMN_WIDTH_CONFIG['state'],
render: (row) => {
if (row.scheduleReleaseState === 'ONLINE') {
return h(
@@ -154,8 +166,7 @@ export function useTable() {
{
title: t('project.workflow.operation'),
key: 'operation',
- width: 360,
- fixed: 'right',
+ ...COLUMN_WIDTH_CONFIG['operation'](8.5),
className: styles.operation,
render: (row) =>
h(TableAction, {
@@ -173,6 +184,9 @@ export function useTable() {
})
}
] as TableColumns<any>
+ if (variables.tableWidth) {
+ variables.tableWidth = calculateTableWidth(variables.columns)
+ }
}
const editWorkflow = (row: any) => {
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.tsx
index 32d36aa..bf07245 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.tsx
@@ -105,7 +105,7 @@ export default defineComponent({
striped
size={'small'}
class={styles.table}
- scrollX={1800}
+ scrollX={this.tableWidth}
v-model:checked-row-keys={this.checkedRowKeys}
row-class-name='items-workflow-instances'
/>
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts
index 8aafe1d..9335b68 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts
@@ -33,6 +33,11 @@ import { runningType } from '@/utils/common'
import { parseTime } from '@/utils/common'
import styles from './index.module.scss'
import { renderStateCell } from '../../task/instance/use-table'
+import {
+ COLUMN_WIDTH_CONFIG,
+ calculateTableWidth,
+ DefaultTableWidth
+} from '@/utils/column-width-config'
import type { Router } from 'vue-router'
import type { IWorkflowInstance } from '@/service/modules/process-instances/types'
import type { ICountDownParam } from './types'
@@ -44,6 +49,7 @@ export function useTable() {
const variables = reactive({
columns: [],
+ tableWidth: DefaultTableWidth,
checkedRowKeys: [] as Array<RowKey>,
tableData: [] as Array<IWorkflowInstance>,
page: ref(1),
@@ -62,18 +68,19 @@ export function useTable() {
variables.columns = [
{
type: 'selection',
- className: 'btn-selected'
+ className: 'btn-selected',
+ ...COLUMN_WIDTH_CONFIG['selection']
},
{
title: '#',
key: 'id',
- width: 50,
+ ...COLUMN_WIDTH_CONFIG['index'],
render: (rowData: any, rowIndex: number) => rowIndex + 1
},
{
title: t('project.workflow.workflow_name'),
key: 'name',
- width: 200,
+ ...COLUMN_WIDTH_CONFIG['name'],
className: 'workflow-name',
render: (row: IWorkflowInstance) =>
h(
@@ -92,12 +99,14 @@ export function useTable() {
{
title: t('project.workflow.status'),
key: 'state',
+ ...COLUMN_WIDTH_CONFIG['state'],
className: 'workflow-status',
render: (_row: IWorkflowInstance) => renderStateCell(_row.state, t)
},
{
title: t('project.workflow.run_type'),
key: 'commandType',
+ width: 160,
className: 'workflow-run-type',
render: (_row: IWorkflowInstance) =>
(
@@ -108,6 +117,7 @@ export function useTable() {
{
title: t('project.workflow.scheduling_time'),
key: 'scheduleTime',
+ ...COLUMN_WIDTH_CONFIG['time'],
render: (_row: IWorkflowInstance) =>
_row.scheduleTime
? format(parseTime(_row.scheduleTime), 'yyyy-MM-dd HH:mm:ss')
@@ -116,6 +126,7 @@ export function useTable() {
{
title: t('project.workflow.start_time'),
key: 'startTime',
+ ...COLUMN_WIDTH_CONFIG['time'],
render: (_row: IWorkflowInstance) =>
_row.startTime
? format(parseTime(_row.startTime), 'yyyy-MM-dd HH:mm:ss')
@@ -124,6 +135,7 @@ export function useTable() {
{
title: t('project.workflow.end_time'),
key: 'endTime',
+ ...COLUMN_WIDTH_CONFIG['time'],
render: (_row: IWorkflowInstance) =>
_row.endTime
? format(parseTime(_row.endTime), 'yyyy-MM-dd HH:mm:ss')
@@ -132,35 +144,40 @@ export function useTable() {
{
title: t('project.workflow.duration'),
key: 'duration',
+ ...COLUMN_WIDTH_CONFIG['duration'],
render: (_row: IWorkflowInstance) => _row.duration || '-'
},
{
title: t('project.workflow.run_times'),
key: 'runTimes',
+ ...COLUMN_WIDTH_CONFIG['times'],
className: 'workflow-run-times'
},
{
title: t('project.workflow.fault_tolerant_sign'),
- key: 'recovery'
+ key: 'recovery',
+ width: 100
},
{
title: t('project.workflow.dry_run_flag'),
key: 'dryRun',
+ ...COLUMN_WIDTH_CONFIG['dryRun'],
render: (_row: IWorkflowInstance) => (_row.dryRun === 1 ? 'YES' : 'NO')
},
{
title: t('project.workflow.executor'),
- key: 'executorName'
+ key: 'executorName',
+ ...COLUMN_WIDTH_CONFIG['name']
},
{
title: t('project.workflow.host'),
- key: 'host'
+ key: 'host',
+ ...COLUMN_WIDTH_CONFIG['name']
},
{
title: t('project.workflow.operation'),
key: 'operation',
- width: 250,
- fixed: 'right',
+ ...COLUMN_WIDTH_CONFIG['operation'](6),
className: styles.operation,
render: (_row: IWorkflowInstance, index: number) =>
h(TableAction, {
@@ -213,6 +230,9 @@ export function useTable() {
})
}
]
+ if (variables.tableWidth) {
+ variables.tableWidth = calculateTableWidth(variables.columns)
+ }
}
const getTableData = () => {
diff --git a/dolphinscheduler-ui-next/src/views/resource/file/index.tsx b/dolphinscheduler-ui-next/src/views/resource/file/index.tsx
index 86e739a..eaebe58 100644
--- a/dolphinscheduler-ui-next/src/views/resource/file/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/resource/file/index.tsx
@@ -196,7 +196,7 @@ export default defineComponent({
const newDir = dirs.slice(0, index + 1).join('/')
if (newDir) {
const id = 0
- let resource = await queryResourceById(
+ const resource = await queryResourceById(
{
id,
type: 'FILE',
@@ -249,7 +249,10 @@ export default defineComponent({
},
render() {
const { t } = useI18n()
- const { columnsRef } = useTable(this.handleRenameFile, this.updateList)
+ const { columnsRef, tableWidth } = useTable(
+ this.handleRenameFile,
+ this.updateList
+ )
const {
handleConditions,
handleCreateFolder,
@@ -322,6 +325,7 @@ export default defineComponent({
size={'small'}
class={styles['table-box']}
row-class-name='items'
+ scrollX={tableWidth}
/>
<div class={styles.pagination}>
<NPagination
diff --git a/dolphinscheduler-ui-next/src/views/resource/file/table/use-table.ts b/dolphinscheduler-ui-next/src/views/resource/file/table/use-table.ts
index 699fcbd..62fb329 100644
--- a/dolphinscheduler-ui-next/src/views/resource/file/table/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/resource/file/table/use-table.ts
@@ -23,6 +23,11 @@ import { useFileStore } from '@/store/file/file'
import TableAction from './table-action'
import { IRenameFile } from '../types'
import ButtonLink from '@/components/button-link'
+import {
+ COLUMN_WIDTH_CONFIG,
+ calculateTableWidth,
+ DefaultTableWidth
+} from '@/utils/column-width-config'
import type { Router } from 'vue-router'
import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
@@ -46,13 +51,13 @@ export function useTable(renameResource: IRenameFile, updateList: () => void) {
{
title: '#',
key: 'id',
- width: 50,
+ ...COLUMN_WIDTH_CONFIG['index'],
render: (_row, index) => index + 1
},
{
title: t('resource.file.name'),
key: 'name',
- width: 120,
+ ...COLUMN_WIDTH_CONFIG['name'],
render: (row) =>
h(
ButtonLink,
@@ -62,37 +67,55 @@ export function useTable(renameResource: IRenameFile, updateList: () => void) {
{ default: () => row.name }
)
},
- { title: t('resource.file.user_name'), width: 100, key: 'user_name' },
+ {
+ title: t('resource.file.user_name'),
+ ...COLUMN_WIDTH_CONFIG['userName'],
+ key: 'user_name'
+ },
{
title: t('resource.file.whether_directory'),
key: 'whether_directory',
- width: 100,
+ ...COLUMN_WIDTH_CONFIG['yesOrNo'],
render: (row) =>
row.directory ? t('resource.file.yes') : t('resource.file.no')
},
- { title: t('resource.file.file_name'), key: 'file_name' },
- { title: t('resource.file.description'), width: 150, key: 'description' },
+ {
+ title: t('resource.file.file_name'),
+ ...COLUMN_WIDTH_CONFIG['name'],
+ key: 'file_name'
+ },
+ {
+ title: t('resource.file.description'),
+ ...COLUMN_WIDTH_CONFIG['note'],
+ key: 'description'
+ },
{
title: t('resource.file.size'),
key: 'size',
+ ...COLUMN_WIDTH_CONFIG['size'],
render: (row) => bytesToSize(row.size)
},
- { title: t('resource.file.update_time'), width: 150, key: 'update_time' },
+ {
+ title: t('resource.file.update_time'),
+ ...COLUMN_WIDTH_CONFIG['time'],
+ key: 'update_time'
+ },
{
title: t('resource.file.operation'),
key: 'operation',
- width: 150,
render: (row) =>
h(TableAction, {
row,
onRenameResource: (id, name, description) =>
renameResource(id, name, description),
onUpdateList: () => updateList()
- })
+ }),
+ ...COLUMN_WIDTH_CONFIG['operation'](4)
}
]
return {
- columnsRef
+ columnsRef,
+ tableWidth: calculateTableWidth(columnsRef) || DefaultTableWidth
}
}
diff --git a/dolphinscheduler-ui-next/src/views/resource/task-group/option/index.tsx b/dolphinscheduler-ui-next/src/views/resource/task-group/option/index.tsx
index 26ccced..551d9c8 100644
--- a/dolphinscheduler-ui-next/src/views/resource/task-group/option/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/resource/task-group/option/index.tsx
@@ -41,7 +41,7 @@ const taskGroupOption = defineComponent({
const searchParamRef = ref()
- let updateItemData = reactive({
+ const updateItemData = reactive({
id: 0,
name: '',
projectCode: 0,
@@ -180,6 +180,7 @@ const taskGroupOption = defineComponent({
size={'small'}
data={this.tableData}
striped
+ scrollX={this.tableWidth}
/>
<div class={styles.pagination}>
<NPagination
diff --git a/dolphinscheduler-ui-next/src/views/resource/task-group/option/use-table.ts b/dolphinscheduler-ui-next/src/views/resource/task-group/option/use-table.ts
index 9152ed4..9357bbe 100644
--- a/dolphinscheduler-ui-next/src/views/resource/task-group/option/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/resource/task-group/option/use-table.ts
@@ -18,12 +18,17 @@
import { h, reactive, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { format } from 'date-fns'
-import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
import { queryTaskGroupListPaging } from '@/service/modules/task-group'
import { queryAllProjectList } from '@/service/modules/projects'
import TableAction from './components/table-action'
import _ from 'lodash'
import { parseTime } from '@/utils/common'
+import {
+ COLUMN_WIDTH_CONFIG,
+ calculateTableWidth,
+ DefaultTableWidth
+} from '@/utils/column-width-config'
+import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
export function useTable(
updateItem = (
@@ -39,24 +44,51 @@ export function useTable(
const { t } = useI18n()
const columns: TableColumns<any> = [
- { title: '#', key: 'index', render: (row, index) => index + 1 },
- { title: t('resource.task_group_option.name'), key: 'name' },
- { title: t('resource.task_group_option.project_name'), key: 'projectName' },
+ {
+ title: '#',
+ key: 'index',
+ render: (row, index) => index + 1,
+ ...COLUMN_WIDTH_CONFIG['index']
+ },
+ {
+ title: t('resource.task_group_option.name'),
+ key: 'name',
+ ...COLUMN_WIDTH_CONFIG['name']
+ },
+ {
+ title: t('resource.task_group_option.project_name'),
+ key: 'projectName',
+ ...COLUMN_WIDTH_CONFIG['name']
+ },
{
title: t('resource.task_group_option.resource_pool_size'),
- key: 'groupSize'
+ key: 'groupSize',
+ width: 160
},
{
title: t('resource.task_group_option.resource_used_pool_size'),
- key: 'useSize'
+ key: 'useSize',
+ width: 140
+ },
+ {
+ title: t('resource.task_group_option.desc'),
+ key: 'description',
+ ...COLUMN_WIDTH_CONFIG['note']
+ },
+ {
+ title: t('resource.task_group_option.create_time'),
+ key: 'createTime',
+ ...COLUMN_WIDTH_CONFIG['time']
+ },
+ {
+ title: t('resource.task_group_option.update_time'),
+ key: 'updateTime',
+ ...COLUMN_WIDTH_CONFIG['time']
},
- { title: t('resource.task_group_option.desc'), key: 'description' },
- { title: t('resource.task_group_option.create_time'), key: 'createTime' },
- { title: t('resource.task_group_option.update_time'), key: 'updateTime' },
{
title: t('resource.task_group_option.actions'),
key: 'actions',
- width: 150,
+ ...COLUMN_WIDTH_CONFIG['operation'](3),
render: (row: any) =>
h(TableAction, {
row,
@@ -82,6 +114,7 @@ export function useTable(
const variables = reactive({
tableData: [],
+ tableWidth: calculateTableWidth(columns) || DefaultTableWidth,
page: ref(1),
pageSize: ref(10),
name: ref(null),
diff --git a/dolphinscheduler-ui-next/src/views/resource/task-group/queue/index.tsx b/dolphinscheduler-ui-next/src/views/resource/task-group/queue/index.tsx
index f3022c9..67ce2dc 100644
--- a/dolphinscheduler-ui-next/src/views/resource/task-group/queue/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/resource/task-group/queue/index.tsx
@@ -196,6 +196,7 @@ const taskGroupQueue = defineComponent({
size={'small'}
data={this.tableData}
striped
+ scrollX={this.tableWidth}
/>
<div class={styles.pagination}>
<NPagination
diff --git a/dolphinscheduler-ui-next/src/views/resource/task-group/queue/use-table.ts b/dolphinscheduler-ui-next/src/views/resource/task-group/queue/use-table.ts
index 08e51c3..7cfdc72 100644
--- a/dolphinscheduler-ui-next/src/views/resource/task-group/queue/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/resource/task-group/queue/use-table.ts
@@ -25,6 +25,11 @@ import {
} from '@/service/modules/task-group'
import TableAction from './components/table-action'
import _ from 'lodash'
+import {
+ COLUMN_WIDTH_CONFIG,
+ calculateTableWidth,
+ DefaultTableWidth
+} from '@/utils/column-width-config'
import { parseTime } from '@/utils/common'
export function useTable(
@@ -34,30 +39,66 @@ export function useTable(
const { t } = useI18n()
const columns: TableColumns<any> = [
- { title: '#', key: 'index', render: (row, index) => index + 1 },
- { title: t('resource.task_group_queue.project_name'), key: 'projectName' },
- { title: t('resource.task_group_queue.task_name'), key: 'taskName' },
+ {
+ title: '#',
+ key: 'index',
+ render: (row, index) => index + 1,
+ ...COLUMN_WIDTH_CONFIG['index']
+ },
+ {
+ title: t('resource.task_group_queue.project_name'),
+ key: 'projectName',
+ ...COLUMN_WIDTH_CONFIG['name']
+ },
+ {
+ title: t('resource.task_group_queue.task_name'),
+ key: 'taskName',
+ ...COLUMN_WIDTH_CONFIG['name']
+ },
{
title: t('resource.task_group_queue.process_instance_name'),
- key: 'processInstanceName'
+ key: 'processInstanceName',
+ ...COLUMN_WIDTH_CONFIG['name']
},
{
title: t('resource.task_group_queue.task_group_name'),
- key: 'taskGroupName'
+ key: 'taskGroupName',
+ ...COLUMN_WIDTH_CONFIG['name']
+ },
+ {
+ title: t('resource.task_group_queue.priority'),
+ key: 'priority',
+ width: 120
},
- { title: t('resource.task_group_queue.priority'), key: 'priority' },
{
title: t('resource.task_group_queue.force_starting_status'),
- key: 'forceStart'
+ key: 'forceStart',
+ ...COLUMN_WIDTH_CONFIG['state']
+ },
+ {
+ title: t('resource.task_group_queue.in_queue'),
+ key: 'inQueue',
+ width: 120
+ },
+ {
+ title: t('resource.task_group_queue.task_status'),
+ key: 'status',
+ ...COLUMN_WIDTH_CONFIG['state']
+ },
+ {
+ title: t('resource.task_group_queue.create_time'),
+ key: 'createTime',
+ ...COLUMN_WIDTH_CONFIG['time']
+ },
+ {
+ title: t('resource.task_group_queue.update_time'),
+ key: 'updateTime',
+ ...COLUMN_WIDTH_CONFIG['time']
},
- { title: t('resource.task_group_queue.in_queue'), key: 'inQueue' },
- { title: t('resource.task_group_queue.task_status'), key: 'status' },
- { title: t('resource.task_group_queue.create_time'), key: 'createTime' },
- { title: t('resource.task_group_queue.update_time'), key: 'updateTime' },
{
title: t('resource.task_group_queue.actions'),
key: 'actions',
- width: 150,
+ ...COLUMN_WIDTH_CONFIG['operation'](2),
render: (row: any) =>
h(TableAction, {
row,
@@ -76,6 +117,7 @@ export function useTable(
const variables = reactive({
tableData: [],
+ tableWidth: calculateTableWidth(columns) || DefaultTableWidth,
page: ref(1),
pageSize: ref(10),
groupId: ref(3),
diff --git a/dolphinscheduler-ui-next/src/views/resource/udf/function/index.tsx b/dolphinscheduler-ui-next/src/views/resource/udf/function/index.tsx
index 158b77b..8739bab 100644
--- a/dolphinscheduler-ui-next/src/views/resource/udf/function/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/resource/udf/function/index.tsx
@@ -129,6 +129,7 @@ export default defineComponent({
size={'small'}
class={styles.table}
row-class-name='items'
+ scrollX={this.tableWidth}
/>
<div class={styles.pagination}>
<NPagination
diff --git a/dolphinscheduler-ui-next/src/views/resource/udf/function/use-table.ts b/dolphinscheduler-ui-next/src/views/resource/udf/function/use-table.ts
index 14174c5..c1e38cf 100644
--- a/dolphinscheduler-ui-next/src/views/resource/udf/function/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/resource/udf/function/use-table.ts
@@ -27,7 +27,12 @@ import {
queryUdfFuncListPaging,
deleteUdfFunc
} from '@/service/modules/resources'
-import { IUdfFunctionParam } from './types'
+import {
+ COLUMN_WIDTH_CONFIG,
+ calculateTableWidth,
+ DefaultTableWidth
+} from '@/utils/column-width-config'
+import type { IUdfFunctionParam } from './types'
export function useTable() {
const { t } = useI18n()
@@ -35,6 +40,7 @@ export function useTable() {
const variables = reactive({
columns: [],
+ tableWidth: DefaultTableWidth,
row: {},
tableData: [],
id: ref(Number(router.currentRoute.value.params.id) || -1),
@@ -50,36 +56,43 @@ export function useTable() {
{
title: '#',
key: 'id',
- width: 50,
- render: (_row, index) => index + 1
+ render: (_row, index) => index + 1,
+ ...COLUMN_WIDTH_CONFIG['index']
},
{
title: t('resource.function.udf_function_name'),
- key: 'funcName'
+ key: 'funcName',
+ ...COLUMN_WIDTH_CONFIG['name']
},
{
title: t('resource.function.class_name'),
- key: 'className'
+ key: 'className',
+ ...COLUMN_WIDTH_CONFIG['name']
},
{
title: t('resource.function.type'),
- key: 'type'
+ key: 'type',
+ ...COLUMN_WIDTH_CONFIG['type']
},
{
title: t('resource.function.description'),
- key: 'description'
+ key: 'description',
+ ...COLUMN_WIDTH_CONFIG['note']
},
{
title: t('resource.function.jar_package'),
- key: 'resourceName'
+ key: 'resourceName',
+ ...COLUMN_WIDTH_CONFIG['name']
},
{
title: t('resource.function.update_time'),
- key: 'updateTime'
+ key: 'updateTime',
+ ...COLUMN_WIDTH_CONFIG['time']
},
{
title: t('resource.function.operation'),
key: 'operation',
+ ...COLUMN_WIDTH_CONFIG['operation'](2),
render: (row) => {
return h(NSpace, null, {
default: () => [
@@ -143,6 +156,9 @@ export function useTable() {
}
}
] as TableColumns<any>
+ if (variables.tableWidth) {
+ variables.tableWidth = calculateTableWidth(variables.columns)
+ }
}
const getTableData = (params: IUdfFunctionParam) => {
diff --git a/dolphinscheduler-ui-next/src/views/resource/udf/resource/index.tsx b/dolphinscheduler-ui-next/src/views/resource/udf/resource/index.tsx
index 2347d40..2bcd409 100644
--- a/dolphinscheduler-ui-next/src/views/resource/udf/resource/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/resource/udf/resource/index.tsx
@@ -161,6 +161,7 @@ export default defineComponent({
size={'small'}
class={styles.table}
row-class-name='items'
+ scrollX={this.tableWidth}
/>
<div class={styles.pagination}>
<NPagination
diff --git a/dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts b/dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts
index 139362c..1ecb374 100644
--- a/dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts
@@ -32,7 +32,12 @@ import {
queryResourceById
} from '@/service/modules/resources'
import ButtonLink from '@/components/button-link'
-import { IUdfResourceParam } from './types'
+import {
+ COLUMN_WIDTH_CONFIG,
+ calculateTableWidth,
+ DefaultTableWidth
+} from '@/utils/column-width-config'
+import type { IUdfResourceParam } from './types'
const goSubFolder = (router: Router, item: any) => {
const fileStore = useFileStore()
@@ -51,6 +56,7 @@ export function useTable() {
const variables = reactive({
columns: [],
+ tableWidth: DefaultTableWidth,
row: {},
tableData: [],
breadList: [],
@@ -68,12 +74,13 @@ export function useTable() {
{
title: '#',
key: 'id',
- width: 50,
+ ...COLUMN_WIDTH_CONFIG['index'],
render: (_row, index) => index + 1
},
{
title: t('resource.udf.udf_source_name'),
key: 'alias',
+ width: 60,
render: (row) => {
return !row.directory
? row.alias
@@ -89,33 +96,40 @@ export function useTable() {
{
title: t('resource.udf.whether_directory'),
key: 'whether_directory',
+ ...COLUMN_WIDTH_CONFIG['yesOrNo'],
render: (row) =>
row.directory ? t('resource.file.yes') : t('resource.file.no')
},
{
title: t('resource.udf.file_name'),
+ ...COLUMN_WIDTH_CONFIG['name'],
key: 'fileName'
},
{
title: t('resource.udf.file_size'),
key: 'size',
+ ...COLUMN_WIDTH_CONFIG['size'],
render: (row) => bytesToSize(row.size)
},
{
title: t('resource.udf.description'),
- key: 'description'
+ key: 'description',
+ ...COLUMN_WIDTH_CONFIG['note']
},
{
title: t('resource.udf.create_time'),
- key: 'createTime'
+ key: 'createTime',
+ ...COLUMN_WIDTH_CONFIG['time']
},
{
title: t('resource.udf.update_time'),
- key: 'updateTime'
+ key: 'updateTime',
+ ...COLUMN_WIDTH_CONFIG['time']
},
{
title: t('resource.udf.operation'),
key: 'operation',
+ ...COLUMN_WIDTH_CONFIG['operation'](3),
render: (row) => {
return h(NSpace, null, {
default: () => [
@@ -204,6 +218,9 @@ export function useTable() {
}
}
] as TableColumns<any>
+ if (variables.tableWidth) {
+ variables.tableWidth = calculateTableWidth(variables.columns)
+ }
}
const getTableData = (params: IUdfResourceParam) => {
diff --git a/dolphinscheduler-ui-next/src/views/security/environment-manage/index.tsx b/dolphinscheduler-ui-next/src/views/security/environment-manage/index.tsx
index 12a87ba..7fb2b8a 100644
--- a/dolphinscheduler-ui-next/src/views/security/environment-manage/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/environment-manage/index.tsx
@@ -138,6 +138,7 @@ const environmentManage = defineComponent({
row-class-name='items'
columns={this.columns}
data={this.tableData}
+ scrollX={this.tableWidth}
/>
<div class={styles.pagination}>
<NPagination
diff --git a/dolphinscheduler-ui-next/src/views/security/environment-manage/use-table.ts b/dolphinscheduler-ui-next/src/views/security/environment-manage/use-table.ts
index 967546c..908230a 100644
--- a/dolphinscheduler-ui-next/src/views/security/environment-manage/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/security/environment-manage/use-table.ts
@@ -30,6 +30,11 @@ import type {
EnvironmentItem
} from '@/service/modules/environment/types'
import { parseTime } from '@/utils/common'
+import {
+ COLUMN_WIDTH_CONFIG,
+ calculateTableWidth,
+ DefaultTableWidth
+} from '@/utils/column-width-config'
export function useTable() {
const { t } = useI18n()
@@ -45,24 +50,29 @@ export function useTable() {
{
title: '#',
key: 'index',
- render: (row: any, index: number) => index + 1
+ render: (row: any, index: number) => index + 1,
+ ...COLUMN_WIDTH_CONFIG['index']
},
{
title: t('security.environment.environment_name'),
key: 'name',
- className: 'environment-name'
+ className: 'environment-name',
+ ...COLUMN_WIDTH_CONFIG['name']
},
{
title: t('security.environment.environment_config'),
- key: 'config'
+ key: 'config',
+ ...COLUMN_WIDTH_CONFIG['note']
},
{
title: t('security.environment.environment_desc'),
- key: 'description'
+ key: 'description',
+ ...COLUMN_WIDTH_CONFIG['note']
},
{
title: t('security.environment.worker_groups'),
key: 'workerGroups',
+ ...COLUMN_WIDTH_CONFIG['tag'],
render: (row: EnvironmentItem) =>
h(NSpace, null, {
default: () =>
@@ -77,15 +87,18 @@ export function useTable() {
},
{
title: t('security.environment.create_time'),
- key: 'createTime'
+ key: 'createTime',
+ ...COLUMN_WIDTH_CONFIG['time']
},
{
title: t('security.environment.update_time'),
- key: 'updateTime'
+ key: 'updateTime',
+ ...COLUMN_WIDTH_CONFIG['time']
},
{
title: t('security.environment.operation'),
key: 'operation',
+ ...COLUMN_WIDTH_CONFIG['operation'](2),
render(row: any) {
return h(NSpace, null, {
default: () => [
@@ -153,10 +166,14 @@ export function useTable() {
}
}
]
+ if (variables.tableWidth) {
+ variables.tableWidth = calculateTableWidth(variables.columns)
+ }
}
const variables = reactive({
columns: [],
+ tableWidth: DefaultTableWidth,
tableData: [],
page: ref(1),
pageSize: ref(10),
diff --git a/dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/index.tsx b/dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/index.tsx
index 1ae290d..9ccc2ad 100644
--- a/dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/index.tsx
@@ -130,7 +130,11 @@ const k8sNamespaceManage = defineComponent({
</div>
</NCard>
<Card class={styles['table-card']}>
- <NDataTable columns={this.columns} data={this.tableData} />
+ <NDataTable
+ columns={this.columns}
+ data={this.tableData}
+ scrollX={this.tableWidth}
+ />
<div class={styles.pagination}>
<NPagination
v-model:page={this.page}
diff --git a/dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/use-table.ts b/dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/use-table.ts
index 68c77a5..16c3e2e 100644
--- a/dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/use-table.ts
@@ -30,6 +30,11 @@ import type {
NamespaceItem
} from '@/service/modules/k8s-namespace/types'
import { parseTime } from '@/utils/common'
+import {
+ COLUMN_WIDTH_CONFIG,
+ calculateTableWidth,
+ DefaultTableWidth
+} from '@/utils/column-width-config'
export function useTable() {
const { t } = useI18n()
@@ -58,43 +63,53 @@ export function useTable() {
{
title: '#',
key: 'index',
- render: (row: any, index: number) => index + 1
+ render: (row: any, index: number) => index + 1,
+ ...COLUMN_WIDTH_CONFIG['index']
},
{
title: t('security.k8s_namespace.k8s_namespace'),
- key: 'namespace'
+ key: 'namespace',
+ ...COLUMN_WIDTH_CONFIG['name']
},
{
title: t('security.k8s_namespace.k8s_cluster'),
- key: 'k8s'
+ key: 'k8s',
+ ...COLUMN_WIDTH_CONFIG['name']
},
{
title: t('security.k8s_namespace.owner'),
- key: 'owner'
+ key: 'owner',
+ ...COLUMN_WIDTH_CONFIG['userName']
},
{
title: t('security.k8s_namespace.tag'),
- key: 'tag'
+ key: 'tag',
+ ...COLUMN_WIDTH_CONFIG['tag']
},
{
title: t('security.k8s_namespace.limit_cpu'),
- key: 'limitsCpu'
+ key: 'limitsCpu',
+ width: 140
},
{
title: t('security.k8s_namespace.limit_memory'),
- key: 'limitsMemory'
+ key: 'limitsMemory',
+ width: 140
},
{
title: t('security.k8s_namespace.create_time'),
- key: 'createTime'
+ key: 'createTime',
+ ...COLUMN_WIDTH_CONFIG['time']
},
{
title: t('security.k8s_namespace.update_time'),
- key: 'updateTime'
+ key: 'updateTime',
+ ...COLUMN_WIDTH_CONFIG['time']
},
{
title: t('security.k8s_namespace.operation'),
key: 'operation',
+ ...COLUMN_WIDTH_CONFIG['operation'](2),
render(row: NamespaceItem) {
return h(NSpace, null, {
default: () => [
@@ -160,11 +175,15 @@ export function useTable() {
}
}
]
+ if (variables.tableWidth) {
+ variables.tableWidth = calculateTableWidth(variables.columns)
+ }
}
const variables = reactive({
columns: [],
tableData: [],
+ tableWidth: DefaultTableWidth,
page: ref(1),
pageSize: ref(10),
searchVal: ref(null),
diff --git a/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx b/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
index ab374e4..d8b5b2b 100644
--- a/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
@@ -127,6 +127,7 @@ const tenementManage = defineComponent({
columns={this.columns}
data={this.tableData}
row-class-name='items'
+ scrollX={this.tableWidth}
/>
<div class={styles.pagination}>
<NPagination
diff --git a/dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts b/dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts
index b1e1b05..b6be067 100644
--- a/dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts
@@ -24,6 +24,11 @@ import { reactive, h, ref } from 'vue'
import { NButton, NIcon, NPopconfirm, NSpace, NTooltip } from 'naive-ui'
import { useI18n } from 'vue-i18n'
import { DeleteOutlined, EditOutlined } from '@vicons/antd'
+import {
+ COLUMN_WIDTH_CONFIG,
+ calculateTableWidth,
+ DefaultTableWidth
+} from '@/utils/column-width-config'
export function useTable() {
const { t } = useI18n()
@@ -52,35 +57,39 @@ export function useTable() {
{
title: '#',
key: 'index',
- render: (row: any, index: number) => index + 1
+ render: (row: any, index: number) => index + 1,
+ ...COLUMN_WIDTH_CONFIG['index']
},
{
title: t('security.tenant.tenant_code'),
key: 'tenantCode',
- className: 'tenant-code'
+ className: 'tenant-code',
+ ...COLUMN_WIDTH_CONFIG['userName']
},
{
title: t('security.tenant.description'),
key: 'description',
- ellipsis: {
- tooltip: true
- }
+ ...COLUMN_WIDTH_CONFIG['note']
},
{
title: t('security.tenant.queue_name'),
- key: 'queueName'
+ key: 'queueName',
+ ...COLUMN_WIDTH_CONFIG['name']
},
{
title: t('security.tenant.create_time'),
- key: 'createTime'
+ key: 'createTime',
+ ...COLUMN_WIDTH_CONFIG['time']
},
{
title: t('security.tenant.update_time'),
- key: 'updateTime'
+ key: 'updateTime',
+ ...COLUMN_WIDTH_CONFIG['time']
},
{
title: t('security.tenant.actions'),
key: 'actions',
+ ...COLUMN_WIDTH_CONFIG['operation'](2),
render(row: any) {
return h(NSpace, null, {
default: () => [
@@ -148,10 +157,14 @@ export function useTable() {
}
}
]
+ if (variables.tableWidth) {
+ variables.tableWidth = calculateTableWidth(variables.columns)
+ }
}
const variables = reactive({
columns: [],
+ tableWidth: DefaultTableWidth,
tableData: [],
page: ref(1),
pageSize: ref(10),
diff --git a/dolphinscheduler-ui-next/src/views/security/user-manage/index.tsx b/dolphinscheduler-ui-next/src/views/security/user-manage/index.tsx
index 8305434..8d912e3 100644
--- a/dolphinscheduler-ui-next/src/views/security/user-manage/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/user-manage/index.tsx
@@ -90,9 +90,10 @@ const UsersManage = defineComponent({
<NSpace vertical>
<NDataTable
row-class-name='items'
- columns={this.columnsRef}
+ columns={this.columnsRef.columns}
data={this.list}
loading={this.loading}
+ scrollX={this.columnsRef.tableWidth}
/>
<NSpace justify='center'>
<NPagination
diff --git a/dolphinscheduler-ui-next/src/views/security/user-manage/use-columns.ts b/dolphinscheduler-ui-next/src/views/security/user-manage/use-columns.ts
index 67b254d..288b2b6 100644
--- a/dolphinscheduler-ui-next/src/views/security/user-manage/use-columns.ts
+++ b/dolphinscheduler-ui-next/src/views/security/user-manage/use-columns.ts
@@ -15,7 +15,7 @@
* limitations under the License.
*/
-import { h, ref, watch, onMounted, Ref } from 'vue'
+import { h, ref, watch, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import {
NSpace,
@@ -27,24 +27,34 @@ import {
NPopconfirm
} from 'naive-ui'
import { EditOutlined, DeleteOutlined, UserOutlined } from '@vicons/antd'
-import { TableColumns, InternalRowData } from './types'
+import {
+ COLUMN_WIDTH_CONFIG,
+ calculateTableWidth,
+ DefaultTableWidth
+} from '@/utils/column-width-config'
+import type { TableColumns, InternalRowData } from './types'
export function useColumns(onCallback: Function) {
const { t } = useI18n()
- const columnsRef = ref([]) as Ref<TableColumns>
+ const columnsRef = ref({
+ columns: [] as TableColumns,
+ tableWidth: DefaultTableWidth
+ })
const createColumns = () => {
- columnsRef.value = [
+ const columns = [
{
title: '#',
key: 'index',
- render: (rowData: InternalRowData, rowIndex: number) => rowIndex + 1
+ render: (rowData: InternalRowData, rowIndex: number) => rowIndex + 1,
+ ...COLUMN_WIDTH_CONFIG['index']
},
{
title: t('security.user.username'),
key: 'userName',
- className: 'name'
+ className: 'name',
+ ...COLUMN_WIDTH_CONFIG['userName']
},
{
title: t('security.user.user_type'),
@@ -52,27 +62,33 @@ export function useColumns(onCallback: Function) {
render: (rowData: InternalRowData) =>
rowData.userType === 'GENERAL_USER'
? t('security.user.ordinary_user')
- : t('security.user.administrator')
+ : t('security.user.administrator'),
+ ...COLUMN_WIDTH_CONFIG['type']
},
{
title: t('security.user.tenant_code'),
- key: 'tenantCode'
+ key: 'tenantCode',
+ ...COLUMN_WIDTH_CONFIG['name']
},
{
title: t('security.user.queue'),
- key: 'queue'
+ key: 'queue',
+ width: 120
},
{
title: t('security.user.email'),
- key: 'email'
+ key: 'email',
+ ...COLUMN_WIDTH_CONFIG['name']
},
{
title: t('security.user.phone'),
- key: 'phone'
+ key: 'phone',
+ width: 140
},
{
title: t('security.user.state'),
key: 'state',
+ ...COLUMN_WIDTH_CONFIG['state'],
render: (rowData: any, unused: number) =>
h(
NTag,
@@ -89,15 +105,18 @@ export function useColumns(onCallback: Function) {
},
{
title: t('security.user.create_time'),
- key: 'createTime'
+ key: 'createTime',
+ ...COLUMN_WIDTH_CONFIG['time']
},
{
title: t('security.user.update_time'),
- key: 'updateTime'
+ key: 'updateTime',
+ ...COLUMN_WIDTH_CONFIG['time']
},
{
title: t('security.user.operation'),
key: 'operation',
+ ...COLUMN_WIDTH_CONFIG['operation'](3),
render: (rowData: any, unused: number) => {
return h(NSpace, null, {
default: () => [
@@ -204,6 +223,10 @@ export function useColumns(onCallback: Function) {
}
}
]
+ columnsRef.value = {
+ columns,
+ tableWidth: calculateTableWidth(columns)
+ }
}
onMounted(() => {