Browse Source

[Refactor][UI] Refactor task result using NSpace component. (#11054)

3.1.0-release
songjianet 2 years ago committed by GitHub
parent
commit
878cbbc159
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 26
      dolphinscheduler-ui/src/views/data-quality/task-result/index.module.scss
  2. 22
      dolphinscheduler-ui/src/views/data-quality/task-result/index.tsx

26
dolphinscheduler-ui/src/views/data-quality/task-result/index.module.scss

@ -1,26 +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.
*/
.table-card {
margin-top: 8px;
.pagination {
margin-top: 20px;
display: flex;
justify-content: center;
}
}

22
dolphinscheduler-ui/src/views/data-quality/task-result/index.tsx

@ -25,13 +25,11 @@ import {
NIcon, NIcon,
NDataTable, NDataTable,
NPagination, NPagination,
NCard
} from 'naive-ui' } from 'naive-ui'
import { SearchOutlined } from '@vicons/antd' import { SearchOutlined } from '@vicons/antd'
import { useTable } from './use-table' import { useTable } from './use-table'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import Card from '@/components/card' import Card from '@/components/card'
import styles from './index.module.scss'
const TaskResult = defineComponent({ const TaskResult = defineComponent({
name: 'task-result', name: 'task-result',
@ -83,8 +81,8 @@ const TaskResult = defineComponent({
const { t, requestTableData, onUpdatePageSize, onSearch, loadingRef } = this const { t, requestTableData, onUpdatePageSize, onSearch, loadingRef } = this
return ( return (
<> <NSpace vertical>
<NCard> <Card>
<NSpace justify='end'> <NSpace justify='end'>
<NInput <NInput
allowInput={this.trim} allowInput={this.trim}
@ -148,24 +146,21 @@ const TaskResult = defineComponent({
clearable clearable
/> />
<NButton size='small' type='primary' onClick={onSearch}> <NButton size='small' type='primary' onClick={onSearch}>
{{
icon: () => (
<NIcon> <NIcon>
<SearchOutlined /> <SearchOutlined />
</NIcon> </NIcon>
)
}}
</NButton> </NButton>
</NSpace> </NSpace>
</NCard> </Card>
<Card class={styles['table-card']}> <Card title={t('menu.task_result')}>
<NSpace vertical>
<NDataTable <NDataTable
loading={loadingRef} loading={loadingRef}
columns={this.columns} columns={this.columns}
data={this.tableData} data={this.tableData}
scrollX={this.tableWidth} scrollX={this.tableWidth}
/> />
<div class={styles.pagination}> <NSpace justify='center'>
<NPagination <NPagination
v-model:page={this.page} v-model:page={this.page}
v-model:page-size={this.pageSize} v-model:page-size={this.pageSize}
@ -176,9 +171,10 @@ const TaskResult = defineComponent({
onUpdatePage={requestTableData} onUpdatePage={requestTableData}
onUpdatePageSize={onUpdatePageSize} onUpdatePageSize={onUpdatePageSize}
/> />
</div> </NSpace>
</NSpace>
</Card> </Card>
</> </NSpace>
) )
} }
}) })

Loading…
Cancel
Save