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

[Refactor][UI] Refactor project workflow definition using NSpace component. (#11398)

3.1.0-release
songjianet 2 years ago committed by GitHub
parent
50380e008f
commit
f76520c07e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 104 additions and 105 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. 209
      dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx

209
dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
Unescape View File

@ -15,7 +15,6 @@
* limitations under the License. * limitations under the License.
*/ */
import Card from '@/components/card'
import { SearchOutlined } from '@vicons/antd' import { SearchOutlined } from '@vicons/antd'
import { import {
NButton, NButton,
@ -30,14 +29,14 @@ import {
import { defineComponent, getCurrentInstance, onMounted, toRefs, watch } from 'vue' import { defineComponent, getCurrentInstance, onMounted, toRefs, watch } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useTable } from './use-table' import { useTable } from './use-table'
import { useRouter, useRoute } from 'vue-router'
import Card from '@/components/card'
import ImportModal from './components/import-modal' import ImportModal from './components/import-modal'
import StartModal from './components/start-modal' import StartModal from './components/start-modal'
import TimingModal from './components/timing-modal' import TimingModal from './components/timing-modal'
import VersionModal from './components/version-modal' import VersionModal from './components/version-modal'
import CopyModal from './components/copy-modal' import CopyModal from './components/copy-modal'
import { useRouter, useRoute } from 'vue-router'
import type { Router } from 'vue-router' import type { Router } from 'vue-router'
import styles from './index.module.scss'
export default defineComponent({ export default defineComponent({
name: 'WorkflowDefinitionList', name: 'WorkflowDefinitionList',
@ -117,121 +116,121 @@ export default defineComponent({
const { loadingRef } = this const { loadingRef } = this
return ( return (
<div class={styles.content}> <NSpace vertical>
<Card class={styles.card}> <Card>
<div class={styles.header}> <NSpace justify='space-between'>
<NSpace> <NSpace>
<NButton <NButton
type='primary' type='primary'
size='small'
onClick={this.createDefinition} onClick={this.createDefinition}
class='btn-create-process' class='btn-create-process'
> >
{t('project.workflow.create_workflow')} {t('project.workflow.create_workflow')}
</NButton> </NButton>
<NButton strong secondary onClick={() => (this.showRef = true)}> <NButton strong secondary size='small' onClick={() => (this.showRef = true)}>
{t('project.workflow.import_workflow')} {t('project.workflow.import_workflow')}
</NButton> </NButton>
</NSpace> </NSpace>
<div class={styles.right}> <NSpace>
<div class={styles.search}> <NInput
<div class={styles.list}> allowInput={this.trim}
<NButton type='primary' onClick={this.handleSearch}> size='small'
<NIcon> placeholder={t('resource.function.enter_keyword_tips')}
<SearchOutlined /> v-model={[this.searchVal, 'value']}
</NIcon> />
</NButton> <NButton type='primary' size='small' onClick={this.handleSearch}>
</div> <NIcon>
<div class={styles.list}> <SearchOutlined />
<NInput </NIcon>
allowInput={this.trim} </NButton>
placeholder={t('resource.function.enter_keyword_tips')} </NSpace>
v-model={[this.searchVal, 'value']} </NSpace>
/>
</div>
</div>
</div>
</div>
</Card> </Card>
<Card title={t('project.workflow.workflow_definition')}> <Card title={t('project.workflow.workflow_definition')}>
<NDataTable <NSpace vertical>
loading={loadingRef} <NDataTable
rowKey={(row) => row.code} loading={loadingRef}
columns={this.columns} rowKey={(row) => row.code}
data={this.tableData} columns={this.columns}
striped data={this.tableData}
class={styles.table} striped
v-model:checked-row-keys={this.checkedRowKeys} v-model:checked-row-keys={this.checkedRowKeys}
row-class-name='items' row-class-name='items'
scrollX={this.tableWidth} 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}
/> />
</div> <NSpace justify='space-between'>
<div class={styles['batch-button']}> <NSpace>
<NTooltip> <NTooltip>
{{ {{
default: () => t('project.workflow.delete'), default: () => t('project.workflow.delete'),
trigger: () => ( trigger: () => (
<NPopconfirm onPositiveClick={this.batchDeleteWorkflow}> <NPopconfirm onPositiveClick={this.batchDeleteWorkflow}>
{{ {{
default: () => t('project.workflow.delete_confirm'), default: () => t('project.workflow.delete_confirm'),
trigger: () => ( trigger: () => (
<NButton <NButton
tag='div' tag='div'
type='primary' size='small'
disabled={this.checkedRowKeys.length <= 0} type='primary'
class='btn-delete-all' disabled={this.checkedRowKeys.length <= 0}
> class='btn-delete-all'
{t('project.workflow.delete')} >
</NButton> {t('project.workflow.delete')}
) </NButton>
}} )
</NPopconfirm> }}
) </NPopconfirm>
}} )
</NTooltip> }}
<NTooltip> </NTooltip>
{{ <NTooltip>
default: () => t('project.workflow.export'), {{
trigger: () => ( default: () => t('project.workflow.export'),
<NButton trigger: () => (
tag='div' <NButton
type='primary' tag='div'
disabled={this.checkedRowKeys.length <= 0} size='small'
onClick={this.batchExportWorkflow} type='primary'
class='btn-delete-all' disabled={this.checkedRowKeys.length <= 0}
> onClick={this.batchExportWorkflow}
{t('project.workflow.export')} class='btn-delete-all'
</NButton> >
) {t('project.workflow.export')}
}} </NButton>
</NTooltip> )
<NTooltip> }}
{{ </NTooltip>
default: () => t('project.workflow.batch_copy'), <NTooltip>
trigger: () => ( {{
<NButton default: () => t('project.workflow.batch_copy'),
tag='div' trigger: () => (
type='primary' <NButton
disabled={this.checkedRowKeys.length <= 0} tag='div'
onClick={() => (this.copyShowRef = true)} size='small'
class='btn-delete-all' type='primary'
> disabled={this.checkedRowKeys.length <= 0}
{t('project.workflow.batch_copy')} onClick={() => (this.copyShowRef = true)}
</NButton> class='btn-delete-all'
) >
}} {t('project.workflow.batch_copy')}
</NTooltip> </NButton>
</div> )
}}
</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> </Card>
<ImportModal <ImportModal
v-model:show={this.showRef} v-model:show={this.showRef}
@ -257,7 +256,7 @@ export default defineComponent({
v-model:show={this.copyShowRef} v-model:show={this.copyShowRef}
onUpdateList={this.handleCopyUpdateList} onUpdateList={this.handleCopyUpdateList}
/> />
</div> </NSpace>
) )
} }
}) })

Write Preview
Loading…
Cancel
Save