mirror of
https://gitee.com/dolphinscheduler/DolphinScheduler.git
synced 2024-11-30 11:17:54 +08:00
[Refactor][UI] Refactor workflow instance using NSpace component. (#11446)
* [Refactor][UI] Refactor workflow instance using NSpace component. * [Refactor][UI] Refactor workflow instance using NSpace component.
This commit is contained in:
songjianet
GitHub
parent
a2b5219315
commit
32361f4fef
@ -17,13 +17,12 @@
|
||||
|
||||
import { SearchOutlined } from '@vicons/antd'
|
||||
import {
|
||||
NGrid,
|
||||
NGridItem,
|
||||
NInput,
|
||||
NButton,
|
||||
NDatePicker,
|
||||
NSelect,
|
||||
NIcon
|
||||
NIcon,
|
||||
NSpace
|
||||
} from 'naive-ui'
|
||||
import { defineComponent, getCurrentInstance, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
@ -79,51 +78,46 @@ export default defineComponent({
|
||||
render() {
|
||||
const { t } = useI18n()
|
||||
const options = stateType(t)
|
||||
|
||||
return (
|
||||
<NGrid xGap={6} cols={24}>
|
||||
<NGridItem offset={5} span={3}>
|
||||
<NInput
|
||||
allowInput={this.trim}
|
||||
v-model:value={this.searchValRef}
|
||||
placeholder={t('project.workflow.name')}
|
||||
/>
|
||||
</NGridItem>
|
||||
<NGridItem span={3}>
|
||||
<NInput
|
||||
allowInput={this.trim}
|
||||
v-model:value={this.executorNameRef}
|
||||
placeholder={t('project.workflow.executor')}
|
||||
/>
|
||||
</NGridItem>
|
||||
<NGridItem span={3}>
|
||||
<NInput
|
||||
allowInput={this.trim}
|
||||
v-model:value={this.hostRef}
|
||||
placeholder={t('project.workflow.host')}
|
||||
/>
|
||||
</NGridItem>
|
||||
<NGridItem span={3}>
|
||||
<NSelect
|
||||
options={options}
|
||||
defaultValue={''}
|
||||
v-model:value={this.stateTypeRef}
|
||||
/>
|
||||
</NGridItem>
|
||||
<NGridItem span={6}>
|
||||
<NDatePicker
|
||||
type='datetimerange'
|
||||
clearable
|
||||
v-model:value={this.startEndTimeRef}
|
||||
/>
|
||||
</NGridItem>
|
||||
<NGridItem span={1}>
|
||||
<NButton type='primary' onClick={this.handleSearch}>
|
||||
<NIcon>
|
||||
<SearchOutlined />
|
||||
</NIcon>
|
||||
</NButton>
|
||||
</NGridItem>
|
||||
</NGrid>
|
||||
<NSpace justify='end'>
|
||||
<NInput
|
||||
allowInput={this.trim}
|
||||
size='small'
|
||||
v-model:value={this.searchValRef}
|
||||
placeholder={t('project.workflow.name')}
|
||||
/>
|
||||
<NInput
|
||||
allowInput={this.trim}
|
||||
size='small'
|
||||
v-model:value={this.executorNameRef}
|
||||
placeholder={t('project.workflow.executor')}
|
||||
/>
|
||||
<NInput
|
||||
allowInput={this.trim}
|
||||
size='small'
|
||||
v-model:value={this.hostRef}
|
||||
placeholder={t('project.workflow.host')}
|
||||
/>
|
||||
<NSelect
|
||||
options={options}
|
||||
size='small'
|
||||
style={{width: '210px'}}
|
||||
defaultValue={''}
|
||||
v-model:value={this.stateTypeRef}
|
||||
/>
|
||||
<NDatePicker
|
||||
type='datetimerange'
|
||||
size='small'
|
||||
clearable
|
||||
v-model:value={this.startEndTimeRef}
|
||||
/>
|
||||
<NButton type='primary' size='small' onClick={this.handleSearch}>
|
||||
<NIcon>
|
||||
<SearchOutlined />
|
||||
</NIcon>
|
||||
</NButton>
|
||||
</NSpace>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,80 +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.
|
||||
*/
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
|
||||
.card {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
.right {
|
||||
> .search {
|
||||
.list {
|
||||
float: right;
|
||||
margin: 3px 0 3px 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
table {
|
||||
width: 100%;
|
||||
tr {
|
||||
height: 40px;
|
||||
font-size: 12px;
|
||||
th,
|
||||
td {
|
||||
&:nth-child(1) {
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
th {
|
||||
&:nth-child(1) {
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
> span {
|
||||
font-size: 12px;
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.startup {
|
||||
align-items: center;
|
||||
> div:first-child {
|
||||
width: 86%;
|
||||
}
|
||||
}
|
||||
@ -17,18 +17,18 @@
|
||||
|
||||
import { defineComponent, onMounted, onUnmounted, toRefs, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import Card from '@/components/card'
|
||||
import {
|
||||
NButton,
|
||||
NDataTable,
|
||||
NPagination,
|
||||
NPopconfirm,
|
||||
NTooltip
|
||||
NTooltip,
|
||||
NSpace
|
||||
} from 'naive-ui'
|
||||
import { useTable } from './use-table'
|
||||
import Card from '@/components/card'
|
||||
import ProcessInstanceCondition from './components/process-instance-condition'
|
||||
import { IWorkflowInstanceSearch } from './types'
|
||||
import styles from './index.module.scss'
|
||||
import type { IWorkflowInstanceSearch } from './types'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'WorkflowInstanceList',
|
||||
@ -92,37 +92,36 @@ export default defineComponent({
|
||||
const { loadingRef } = this
|
||||
|
||||
return (
|
||||
<div class={styles.content}>
|
||||
<Card class={styles.card}>
|
||||
<div class={styles.header}>
|
||||
<ProcessInstanceCondition onHandleSearch={this.handleSearch} />
|
||||
</div>
|
||||
<NSpace vertical>
|
||||
<Card>
|
||||
<ProcessInstanceCondition onHandleSearch={this.handleSearch} />
|
||||
</Card>
|
||||
<Card title={t('project.workflow.workflow_instance')}>
|
||||
<NDataTable
|
||||
loading={loadingRef}
|
||||
rowKey={(row) => row.id}
|
||||
columns={this.columns}
|
||||
data={this.tableData}
|
||||
striped
|
||||
size={'small'}
|
||||
class={styles.table}
|
||||
scrollX={this.tableWidth}
|
||||
v-model:checked-row-keys={this.checkedRowKeys}
|
||||
row-class-name='items-workflow-instances'
|
||||
/>
|
||||
<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.id}
|
||||
columns={this.columns}
|
||||
data={this.tableData}
|
||||
striped
|
||||
size={'small'}
|
||||
scrollX={this.tableWidth}
|
||||
v-model:checked-row-keys={this.checkedRowKeys}
|
||||
row-class-name='items-workflow-instances'
|
||||
/>
|
||||
</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={this.requestData}
|
||||
onUpdatePageSize={this.handleChangePageSize}
|
||||
/>
|
||||
</NSpace>
|
||||
</NSpace>
|
||||
<NTooltip>
|
||||
{{
|
||||
default: () => t('project.workflow.delete'),
|
||||
@ -145,7 +144,7 @@ export default defineComponent({
|
||||
}}
|
||||
</NTooltip>
|
||||
</Card>
|
||||
</div>
|
||||
</NSpace>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user