natas_hw
/
dolphinscheduler0701
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
songjianet 2022-08-11 10:08:16 +08:00 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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