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 163df5f1a3 [Refactor][UI] Refactor task group option using NSpace
component. (#11209)
163df5f1a3 is described below
commit 163df5f1a3acccea6f6cd68e2921a892b6dc8935
Author: songjianet <[email protected]>
AuthorDate: Sun Jul 31 14:54:18 2022 +0800
[Refactor][UI] Refactor task group option using NSpace component. (#11209)
---
.../resource/task-group/option/index.module.scss | 55 ----------------------
.../src/views/resource/task-group/option/index.tsx | 52 +++++++++-----------
2 files changed, 23 insertions(+), 84 deletions(-)
diff --git
a/dolphinscheduler-ui/src/views/resource/task-group/option/index.module.scss
b/dolphinscheduler-ui/src/views/resource/task-group/option/index.module.scss
deleted file mode 100644
index 3985f529a9..0000000000
--- a/dolphinscheduler-ui/src/views/resource/task-group/option/index.module.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
- * 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.
- */
-
-.toolbar {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 0 0 0;
- .left {
- align-items: center;
- }
- .right {
- display: flex;
- justify-content: space-between;
- align-items: center;
- button {
- margin-left: 10px;
- }
- }
-}
-
-.table-card {
- margin-top: 2px;
-
- .table-action {
- display: flex;
- justify-content: center;
- align-items: center;
- button {
- margin: 0 2px 0 0;
- }
- div {
- margin: 0 2px 0 0;
- }
- }
- .pagination {
- margin-top: 20px;
- display: flex;
- justify-content: center;
- }
-}
diff --git a/dolphinscheduler-ui/src/views/resource/task-group/option/index.tsx
b/dolphinscheduler-ui/src/views/resource/task-group/option/index.tsx
index 2950c433c3..6cd4cf06e2 100644
--- a/dolphinscheduler-ui/src/views/resource/task-group/option/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/task-group/option/index.tsx
@@ -20,14 +20,13 @@ import {
NButton,
NIcon,
NInput,
- NCard,
NDataTable,
- NPagination
+ NPagination,
+ NSpace
} from 'naive-ui'
import Card from '@/components/card'
import { SearchOutlined } from '@vicons/antd'
import { useI18n } from 'vue-i18n'
-import styles from './index.module.scss'
import { useTable } from './use-table'
import FormModal from './components/form-modal'
@@ -146,21 +145,19 @@ const taskGroupOption = defineComponent({
const { columns } = useTable(updateItem, resetTableData)
return (
- <div>
- <NCard>
- <div class={styles.toolbar}>
- <div class={styles.left}>
- <NButton
- size='small'
- type={'primary'}
- onClick={() => this.onCreate()}
- >
- {t('resource.task_group_option.create')}
- </NButton>
- </div>
- <div class={styles.right}>
+ <NSpace vertical>
+ <Card>
+ <NSpace justify='space-between'>
+ <NButton
+ size='small'
+ type={'primary'}
+ onClick={() => this.onCreate()}
+ >
+ {t('resource.task_group_option.create')}
+ </NButton>
+ <NSpace>
<NInput
- allowInput={this.trim}
+ allowInput={this.trim}
size='small'
v-model={[this.name, 'value']}
placeholder={t(
@@ -172,14 +169,11 @@ const taskGroupOption = defineComponent({
<SearchOutlined />
</NIcon>
</NButton>
- </div>
- </div>
- </NCard>
- <Card
- class={styles['table-card']}
- title={t('resource.task_group_option.option')}
- >
- <div>
+ </NSpace>
+ </NSpace>
+ </Card>
+ <Card title={t('resource.task_group_option.option')}>
+ <NSpace vertical>
<NDataTable
loading={loadingRef}
columns={columns}
@@ -188,7 +182,7 @@ const taskGroupOption = defineComponent({
striped
scrollX={this.tableWidth}
/>
- <div class={styles.pagination}>
+ <NSpace justify='center'>
<NPagination
v-model:page={this.page}
v-model:page-size={this.pageSize}
@@ -199,8 +193,8 @@ const taskGroupOption = defineComponent({
onUpdatePage={resetTableData}
onUpdatePageSize={onUpdatePageSize}
/>
- </div>
- </div>
+ </NSpace>
+ </NSpace>
</Card>
{showModalRef && (
<FormModal
@@ -211,7 +205,7 @@ const taskGroupOption = defineComponent({
status={modelStatusRef}
/>
)}
- </div>
+ </NSpace>
)
}
})
