mirror of
https://gitee.com/dolphinscheduler/DolphinScheduler.git
synced 2024-12-02 12:17:43 +08:00
[Refactor][UI] Refactor task definition batch stream using NSpace component. (#11485)
* [Refactor][UI] Refactor task definition batch stream using NSpace component. * [Refactor][UI] Refactor task definition batch stream using NSpace component. * [Refactor][UI] Refactor task definition batch stream using NSpace component.
This commit is contained in:
songjianet
GitHub
parent
9330d6cfcd
commit
4d063192cd
@ -25,7 +25,6 @@ import {
|
||||
import { useRoute } from 'vue-router'
|
||||
import {
|
||||
NButton,
|
||||
NCard,
|
||||
NDataTable,
|
||||
NIcon,
|
||||
NInput,
|
||||
@ -42,7 +41,6 @@ import Card from '@/components/card'
|
||||
import VersionModal from './components/version-modal'
|
||||
import MoveModal from './components/move-modal'
|
||||
import TaskModal from '@/views/projects/task/components/node/detail-modal'
|
||||
import styles from './index.module.scss'
|
||||
import type { INodeData } from './types'
|
||||
|
||||
const BatchTaskDefinition = defineComponent({
|
||||
@ -134,15 +132,13 @@ const BatchTaskDefinition = defineComponent({
|
||||
} = this
|
||||
|
||||
return (
|
||||
<>
|
||||
<NCard>
|
||||
<div class={styles['search-card']}>
|
||||
<div>
|
||||
<NButton size='small' type='primary' onClick={onCreate}>
|
||||
{t('project.task.create_task')}
|
||||
</NButton>
|
||||
</div>
|
||||
<NSpace justify='end'>
|
||||
<NSpace vertical>
|
||||
<Card>
|
||||
<NSpace justify='space-between'>
|
||||
<NButton size='small' type='primary' onClick={onCreate}>
|
||||
{t('project.task.create_task')}
|
||||
</NButton>
|
||||
<NSpace>
|
||||
<NInput
|
||||
allowInput={this.trim}
|
||||
size='small'
|
||||
@ -168,36 +164,34 @@ const BatchTaskDefinition = defineComponent({
|
||||
clearable
|
||||
/>
|
||||
<NButton size='small' type='primary' onClick={onSearch}>
|
||||
{{
|
||||
icon: () => (
|
||||
<NIcon>
|
||||
<SearchOutlined />
|
||||
</NIcon>
|
||||
)
|
||||
}}
|
||||
<NIcon>
|
||||
<SearchOutlined />
|
||||
</NIcon>
|
||||
</NButton>
|
||||
</NSpace>
|
||||
</div>
|
||||
</NCard>
|
||||
<Card class={styles['table-card']}>
|
||||
<NDataTable
|
||||
loading={loadingRef}
|
||||
columns={this.columns}
|
||||
data={this.tableData}
|
||||
scrollX={this.tableWidth}
|
||||
/>
|
||||
<div class={styles.pagination}>
|
||||
<NPagination
|
||||
v-model:page={this.page}
|
||||
v-model:page-size={this.pageSize}
|
||||
page-count={this.totalPage}
|
||||
show-size-picker
|
||||
page-sizes={[10, 30, 50]}
|
||||
show-quick-jumper
|
||||
onUpdatePage={requestData}
|
||||
onUpdatePageSize={onUpdatePageSize}
|
||||
</NSpace>
|
||||
</Card>
|
||||
<Card title={t('project.task.batch_task')}>
|
||||
<NSpace vertical>
|
||||
<NDataTable
|
||||
loading={loadingRef}
|
||||
columns={this.columns}
|
||||
data={this.tableData}
|
||||
scrollX={this.tableWidth}
|
||||
/>
|
||||
</div>
|
||||
<NSpace justify='center'>
|
||||
<NPagination
|
||||
v-model:page={this.page}
|
||||
v-model:page-size={this.pageSize}
|
||||
page-count={this.totalPage}
|
||||
show-size-picker
|
||||
page-sizes={[10, 30, 50]}
|
||||
show-quick-jumper
|
||||
onUpdatePage={requestData}
|
||||
onUpdatePageSize={onUpdatePageSize}
|
||||
/>
|
||||
</NSpace>
|
||||
</NSpace>
|
||||
</Card>
|
||||
<VersionModal
|
||||
show={this.showVersionModalRef}
|
||||
@ -221,7 +215,7 @@ const BatchTaskDefinition = defineComponent({
|
||||
readonly={this.taskReadonly}
|
||||
saving={this.taskSaving}
|
||||
/>
|
||||
</>
|
||||
</NSpace>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
@ -37,7 +37,6 @@ import {
|
||||
NSwitch
|
||||
} from 'naive-ui'
|
||||
import { DeleteOutlined, PlusCircleOutlined } from '@vicons/antd'
|
||||
import styles from '../index.module.scss'
|
||||
|
||||
const props = {
|
||||
row: {
|
||||
@ -161,7 +160,7 @@ export default defineComponent({
|
||||
>
|
||||
<NForm ref='startFormRef' model={this.startForm}>
|
||||
<NFormItem label={t('project.task.task_name')} path='task_name'>
|
||||
<div class={styles.formItem} title={this.row.taskName}>
|
||||
<div title={this.row.taskName}>
|
||||
{this.row.taskName}
|
||||
</div>
|
||||
</NFormItem>
|
||||
@ -217,7 +216,7 @@ export default defineComponent({
|
||||
) : (
|
||||
<NSpace vertical>
|
||||
{this.startParamsList.map((item, index) => (
|
||||
<NSpace class={styles.startup} key={Date.now() + index}>
|
||||
<NSpace key={Date.now() + index}>
|
||||
<NInput
|
||||
allowInput={this.trim}
|
||||
pair
|
||||
|
||||
@ -1,44 +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.
|
||||
*/
|
||||
|
||||
.search-card {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
width: 300px;
|
||||
|
||||
button,
|
||||
input {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-card {
|
||||
margin-top: 8px;
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@ -27,11 +27,11 @@ import {
|
||||
NPagination
|
||||
} from 'naive-ui'
|
||||
import { useRoute } from 'vue-router'
|
||||
import Card from '@/components/card'
|
||||
import TaskModal from '@/views/projects/task/components/node/detail-modal'
|
||||
import { useTable } from './use-stream-table'
|
||||
import { useTask } from './use-task'
|
||||
import StartModal from './components/start-modal'
|
||||
import Card from '@/components/card'
|
||||
import TaskModal from '@/views/projects/task/components/node/detail-modal'
|
||||
import type { INodeData } from './types'
|
||||
|
||||
const StreamTaskDefinition = defineComponent({
|
||||
@ -85,33 +85,26 @@ const StreamTaskDefinition = defineComponent({
|
||||
return () => (
|
||||
<NSpace vertical>
|
||||
<Card>
|
||||
<NSpace justify='space-between'>
|
||||
<NSpace />
|
||||
<NSpace>
|
||||
<NInput
|
||||
allowInput={trim}
|
||||
size='small'
|
||||
clearable
|
||||
v-model={[variables.searchTaskName, 'value']}
|
||||
placeholder={t('project.task.task_name')}
|
||||
/>
|
||||
<NInput
|
||||
allowInput={trim}
|
||||
size='small'
|
||||
clearable
|
||||
v-model={[variables.searchWorkflowName, 'value']}
|
||||
placeholder={t('project.task.workflow_name')}
|
||||
/>
|
||||
<NButton size='small' type='primary' onClick={onSearch}>
|
||||
{{
|
||||
icon: () => (
|
||||
<NIcon>
|
||||
<SearchOutlined />
|
||||
</NIcon>
|
||||
)
|
||||
}}
|
||||
</NButton>
|
||||
</NSpace>
|
||||
<NSpace justify='end'>
|
||||
<NInput
|
||||
allowInput={trim}
|
||||
size='small'
|
||||
clearable
|
||||
v-model={[variables.searchTaskName, 'value']}
|
||||
placeholder={t('project.task.task_name')}
|
||||
/>
|
||||
<NInput
|
||||
allowInput={trim}
|
||||
size='small'
|
||||
clearable
|
||||
v-model={[variables.searchWorkflowName, 'value']}
|
||||
placeholder={t('project.task.workflow_name')}
|
||||
/>
|
||||
<NButton size='small' type='primary' onClick={onSearch}>
|
||||
<NIcon>
|
||||
<SearchOutlined />
|
||||
</NIcon>
|
||||
</NButton>
|
||||
</NSpace>
|
||||
</Card>
|
||||
<Card>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user