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
commit
4d063192cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  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

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

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

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

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

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

@ -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…
Cancel
Save