Browse Source

[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.
3.1.0-release
songjianet 2 years ago committed by GitHub
parent
commit
32361f4fef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 88
      dolphinscheduler-ui/src/views/projects/workflow/instance/components/process-instance-condition.tsx
  2. 80
      dolphinscheduler-ui/src/views/projects/workflow/instance/index.module.scss
  3. 65
      dolphinscheduler-ui/src/views/projects/workflow/instance/index.tsx

88
dolphinscheduler-ui/src/views/projects/workflow/instance/components/process-instance-condition.tsx

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

80
dolphinscheduler-ui/src/views/projects/workflow/instance/index.module.scss

@ -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%;
}
}

65
dolphinscheduler-ui/src/views/projects/workflow/instance/index.tsx

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