You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by so...@apache.org on 2022/08/11 02:08:21 UTC
[dolphinscheduler] branch dev updated: [Refactor][UI] Refactor project workflow definition using NSpace component. (#11398)
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 f76520c07e [Refactor][UI] Refactor project workflow definition using NSpace component. (#11398)
f76520c07e is described below
commit f76520c07e65e44f0c8eb25f7cd66f26be1a1b22
Author: songjianet <17...@qq.com>
AuthorDate: Thu Aug 11 10:08:16 2022 +0800
[Refactor][UI] Refactor project workflow definition using NSpace component. (#11398)
---
.../views/projects/workflow/definition/index.tsx | 209 ++++++++++-----------
1 file changed, 104 insertions(+), 105 deletions(-)
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
index dfe0aee6b1..380cc5b88c 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
@@ -15,7 +15,6 @@
* limitations under the License.
*/
-import Card from '@/components/card'
import { SearchOutlined } from '@vicons/antd'
import {
NButton,
@@ -30,14 +29,14 @@ import {
import { defineComponent, getCurrentInstance, onMounted, toRefs, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useTable } from './use-table'
+import { useRouter, useRoute } from 'vue-router'
+import Card from '@/components/card'
import ImportModal from './components/import-modal'
import StartModal from './components/start-modal'
import TimingModal from './components/timing-modal'
import VersionModal from './components/version-modal'
import CopyModal from './components/copy-modal'
-import { useRouter, useRoute } from 'vue-router'
import type { Router } from 'vue-router'
-import styles from './index.module.scss'
export default defineComponent({
name: 'WorkflowDefinitionList',
@@ -117,121 +116,121 @@ export default defineComponent({
const { loadingRef } = this
return (
- <div class={styles.content}>
- <Card class={styles.card}>
- <div class={styles.header}>
+ <NSpace vertical>
+ <Card>
+ <NSpace justify='space-between'>
<NSpace>
<NButton
type='primary'
+ size='small'
onClick={this.createDefinition}
class='btn-create-process'
>
{t('project.workflow.create_workflow')}
</NButton>
- <NButton strong secondary onClick={() => (this.showRef = true)}>
+ <NButton strong secondary size='small' onClick={() => (this.showRef = true)}>
{t('project.workflow.import_workflow')}
</NButton>
</NSpace>
- <div class={styles.right}>
- <div class={styles.search}>
- <div class={styles.list}>
- <NButton type='primary' onClick={this.handleSearch}>
- <NIcon>
- <SearchOutlined />
- </NIcon>
- </NButton>
- </div>
- <div class={styles.list}>
- <NInput
- allowInput={this.trim}
- placeholder={t('resource.function.enter_keyword_tips')}
- v-model={[this.searchVal, 'value']}
- />
- </div>
- </div>
- </div>
- </div>
+ <NSpace>
+ <NInput
+ allowInput={this.trim}
+ size='small'
+ placeholder={t('resource.function.enter_keyword_tips')}
+ v-model={[this.searchVal, 'value']}
+ />
+ <NButton type='primary' size='small' onClick={this.handleSearch}>
+ <NIcon>
+ <SearchOutlined />
+ </NIcon>
+ </NButton>
+ </NSpace>
+ </NSpace>
</Card>
<Card title={t('project.workflow.workflow_definition')}>
- <NDataTable
- loading={loadingRef}
- rowKey={(row) => row.code}
- columns={this.columns}
- data={this.tableData}
- striped
- class={styles.table}
- v-model:checked-row-keys={this.checkedRowKeys}
- row-class-name='items'
- 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={this.requestData}
- onUpdatePageSize={this.handleChangePageSize}
+ <NSpace vertical>
+ <NDataTable
+ loading={loadingRef}
+ rowKey={(row) => row.code}
+ columns={this.columns}
+ data={this.tableData}
+ striped
+ v-model:checked-row-keys={this.checkedRowKeys}
+ row-class-name='items'
+ scrollX={this.tableWidth}
/>
- </div>
- <div class={styles['batch-button']}>
- <NTooltip>
- {{
- default: () => t('project.workflow.delete'),
- trigger: () => (
- <NPopconfirm onPositiveClick={this.batchDeleteWorkflow}>
- {{
- default: () => t('project.workflow.delete_confirm'),
- trigger: () => (
- <NButton
- tag='div'
- type='primary'
- disabled={this.checkedRowKeys.length <= 0}
- class='btn-delete-all'
- >
- {t('project.workflow.delete')}
- </NButton>
- )
- }}
- </NPopconfirm>
- )
- }}
- </NTooltip>
- <NTooltip>
- {{
- default: () => t('project.workflow.export'),
- trigger: () => (
- <NButton
- tag='div'
- type='primary'
- disabled={this.checkedRowKeys.length <= 0}
- onClick={this.batchExportWorkflow}
- class='btn-delete-all'
- >
- {t('project.workflow.export')}
- </NButton>
- )
- }}
- </NTooltip>
- <NTooltip>
- {{
- default: () => t('project.workflow.batch_copy'),
- trigger: () => (
- <NButton
- tag='div'
- type='primary'
- disabled={this.checkedRowKeys.length <= 0}
- onClick={() => (this.copyShowRef = true)}
- class='btn-delete-all'
- >
- {t('project.workflow.batch_copy')}
- </NButton>
- )
- }}
- </NTooltip>
- </div>
+ <NSpace justify='space-between'>
+ <NSpace>
+ <NTooltip>
+ {{
+ default: () => t('project.workflow.delete'),
+ trigger: () => (
+ <NPopconfirm onPositiveClick={this.batchDeleteWorkflow}>
+ {{
+ default: () => t('project.workflow.delete_confirm'),
+ trigger: () => (
+ <NButton
+ tag='div'
+ size='small'
+ type='primary'
+ disabled={this.checkedRowKeys.length <= 0}
+ class='btn-delete-all'
+ >
+ {t('project.workflow.delete')}
+ </NButton>
+ )
+ }}
+ </NPopconfirm>
+ )
+ }}
+ </NTooltip>
+ <NTooltip>
+ {{
+ default: () => t('project.workflow.export'),
+ trigger: () => (
+ <NButton
+ tag='div'
+ size='small'
+ type='primary'
+ disabled={this.checkedRowKeys.length <= 0}
+ onClick={this.batchExportWorkflow}
+ class='btn-delete-all'
+ >
+ {t('project.workflow.export')}
+ </NButton>
+ )
+ }}
+ </NTooltip>
+ <NTooltip>
+ {{
+ default: () => t('project.workflow.batch_copy'),
+ trigger: () => (
+ <NButton
+ tag='div'
+ size='small'
+ type='primary'
+ disabled={this.checkedRowKeys.length <= 0}
+ onClick={() => (this.copyShowRef = true)}
+ class='btn-delete-all'
+ >
+ {t('project.workflow.batch_copy')}
+ </NButton>
+ )
+ }}
+ </NTooltip>
+ </NSpace>
+ <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={this.requestData}
+ onUpdatePageSize={this.handleChangePageSize}
+ />
+ </NSpace>
+ </NSpace>
</Card>
<ImportModal
v-model:show={this.showRef}
@@ -257,7 +256,7 @@ export default defineComponent({
v-model:show={this.copyShowRef}
onUpdateList={this.handleCopyUpdateList}
/>
- </div>
+ </NSpace>
)
}
})