github
/
DolphinScheduler
mirror of https://gitee.com/dolphinscheduler/DolphinScheduler.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

[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.
3.1.0-release
songjianet 2 years ago committed by GitHub
parent
9330d6cfcd
commit
4d063192cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 57 additions and 115 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 72
      dolphinscheduler-ui/src/views/projects/task/definition/batch-task.tsx
  2. 5
      dolphinscheduler-ui/src/views/projects/task/definition/components/start-modal.tsx
  3. 44
      dolphinscheduler-ui/src/views/projects/task/definition/index.module.scss
  4. 51
      dolphinscheduler-ui/src/views/projects/task/definition/stream-task.tsx

72
dolphinscheduler-ui/src/views/projects/task/definition/batch-task.tsx
Unescape View File

@ -25,7 +25,6 @@ import {
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import { import {
NButton, NButton,
NCard,
NDataTable, NDataTable,
NIcon, NIcon,
NInput, NInput,
@ -42,7 +41,6 @@ import Card from '@/components/card'
import VersionModal from './components/version-modal' import VersionModal from './components/version-modal'
import MoveModal from './components/move-modal' import MoveModal from './components/move-modal'
import TaskModal from '@/views/projects/task/components/node/detail-modal' import TaskModal from '@/views/projects/task/components/node/detail-modal'
import styles from './index.module.scss'
import type { INodeData } from './types' import type { INodeData } from './types'
const BatchTaskDefinition = defineComponent({ const BatchTaskDefinition = defineComponent({
@ -134,15 +132,13 @@ const BatchTaskDefinition = defineComponent({
} = this } = this
return ( return (
<> <NSpace vertical>
<NCard> <Card>
<div class={styles['search-card']}> <NSpace justify='space-between'>
<div> <NButton size='small' type='primary' onClick={onCreate}>
<NButton size='small' type='primary' onClick={onCreate}> {t('project.task.create_task')}
{t('project.task.create_task')} </NButton>
</NButton> <NSpace>
</div>
<NSpace justify='end'>
<NInput <NInput
allowInput={this.trim} allowInput={this.trim}
size='small' size='small'
@ -168,36 +164,34 @@ const BatchTaskDefinition = defineComponent({
clearable clearable
/> />
<NButton size='small' type='primary' onClick={onSearch}> <NButton size='small' type='primary' onClick={onSearch}>
{{ <NIcon>
icon: () => ( <SearchOutlined />
<NIcon> </NIcon>
<SearchOutlined />
</NIcon>
)
}}
</NButton> </NButton>
</NSpace> </NSpace>
</div> </NSpace>
</NCard> </Card>
<Card class={styles['table-card']}> <Card title={t('project.task.batch_task')}>
<NDataTable <NSpace vertical>
loading={loadingRef} <NDataTable
columns={this.columns} loading={loadingRef}
data={this.tableData} columns={this.columns}
scrollX={this.tableWidth} 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}
/> />
</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> </Card>
<VersionModal <VersionModal
show={this.showVersionModalRef} show={this.showVersionModalRef}
@ -221,7 +215,7 @@ const BatchTaskDefinition = defineComponent({
readonly={this.taskReadonly} readonly={this.taskReadonly}
saving={this.taskSaving} saving={this.taskSaving}
/> />
</> </NSpace>
) )
} }
}) })

5
dolphinscheduler-ui/src/views/projects/task/definition/components/start-modal.tsx
Unescape View File

@ -37,7 +37,6 @@ import {
NSwitch NSwitch
} from 'naive-ui' } from 'naive-ui'
import { DeleteOutlined, PlusCircleOutlined } from '@vicons/antd' import { DeleteOutlined, PlusCircleOutlined } from '@vicons/antd'
import styles from '../index.module.scss'
const props = { const props = {
row: { row: {
@ -161,7 +160,7 @@ export default defineComponent({
> >
<NForm ref='startFormRef' model={this.startForm}> <NForm ref='startFormRef' model={this.startForm}>
<NFormItem label={t('project.task.task_name')} path='task_name'> <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} {this.row.taskName}
</div> </div>
</NFormItem> </NFormItem>
@ -217,7 +216,7 @@ export default defineComponent({
) : ( ) : (
<NSpace vertical> <NSpace vertical>
{this.startParamsList.map((item, index) => ( {this.startParamsList.map((item, index) => (
<NSpace class={styles.startup} key={Date.now() + index}> <NSpace key={Date.now() + index}>
<NInput <NInput
allowInput={this.trim} allowInput={this.trim}
pair pair

44
dolphinscheduler-ui/src/views/projects/task/definition/index.module.scss
Unescape View File

@ -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;
}
}

51
dolphinscheduler-ui/src/views/projects/task/definition/stream-task.tsx
Unescape View File

@ -27,11 +27,11 @@ import {
NPagination NPagination
} from 'naive-ui' } from 'naive-ui'
import { useRoute } from 'vue-router' 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 { useTable } from './use-stream-table'
import { useTask } from './use-task' import { useTask } from './use-task'
import StartModal from './components/start-modal' 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' import type { INodeData } from './types'
const StreamTaskDefinition = defineComponent({ const StreamTaskDefinition = defineComponent({
@ -85,33 +85,26 @@ const StreamTaskDefinition = defineComponent({
return () => ( return () => (
<NSpace vertical> <NSpace vertical>
<Card> <Card>
<NSpace justify='space-between'> <NSpace justify='end'>
<NSpace /> <NInput
<NSpace> allowInput={trim}
<NInput size='small'
allowInput={trim} clearable
size='small' v-model={[variables.searchTaskName, 'value']}
clearable placeholder={t('project.task.task_name')}
v-model={[variables.searchTaskName, 'value']} />
placeholder={t('project.task.task_name')} <NInput
/> allowInput={trim}
<NInput size='small'
allowInput={trim} clearable
size='small' v-model={[variables.searchWorkflowName, 'value']}
clearable placeholder={t('project.task.workflow_name')}
v-model={[variables.searchWorkflowName, 'value']} />
placeholder={t('project.task.workflow_name')} <NButton size='small' type='primary' onClick={onSearch}>
/> <NIcon>
<NButton size='small' type='primary' onClick={onSearch}> <SearchOutlined />
{{ </NIcon>
icon: () => ( </NButton>
<NIcon>
<SearchOutlined />
</NIcon>
)
}}
</NButton>
</NSpace>
</NSpace> </NSpace>
</Card> </Card>
<Card> <Card>

Write Preview
Loading…
Cancel
Save