Browse Source

[Refactor][UI] Refactor workflow definition timing using NSpace component. (#11415)

* [Refactor][UI] Refactor workflow definition timing using NSpace component.

* [Refactor][UI] Refactor workflow definition timing using NSpace component.
3.1.0-release
songjianet 2 years ago committed by GitHub
parent
commit
16134014f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 51
      dolphinscheduler-ui/src/views/projects/workflow/definition/index.module.scss
  2. 24
      dolphinscheduler-ui/src/views/projects/workflow/definition/timing/index.tsx

51
dolphinscheduler-ui/src/views/projects/workflow/definition/index.module.scss

@ -15,29 +15,6 @@
* limitations under the License. * 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 {
table { table {
width: 100%; width: 100%;
@ -79,37 +56,9 @@
} }
} }
.batch-button {
position: absolute;
bottom: 10px;
left: 10px;
> div {
margin-right: 5px;
}
}
.formItem { .formItem {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
word-break: break-all; word-break: break-all;
} }
.workflow-name {
:global {
div:first-child {
width: calc(100% - 32px);
.n-button,
.n-button__content {
width: 100%;
span {
padding-bottom: 1px;
}
}
}
}
}
.width-100 {
width: 100%;
}

24
dolphinscheduler-ui/src/views/projects/workflow/definition/timing/index.tsx

@ -15,16 +15,15 @@
* limitations under the License. * limitations under the License.
*/ */
import Card from '@/components/card'
import { ArrowLeftOutlined } from '@vicons/antd' import { ArrowLeftOutlined } from '@vicons/antd'
import { NButton, NDataTable, NIcon, NPagination } from 'naive-ui' import { NButton, NDataTable, NIcon, NPagination, NSpace } from 'naive-ui'
import { defineComponent, onMounted, toRefs, watch } from 'vue' import { defineComponent, onMounted, toRefs, watch } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import type { Router } from 'vue-router'
import { useTable } from './use-table' import { useTable } from './use-table'
import Card from '@/components/card'
import TimingModal from '../components/timing-modal' import TimingModal from '../components/timing-modal'
import styles from '../index.module.scss' import type { Router } from 'vue-router'
export default defineComponent({ export default defineComponent({
name: 'WorkflowDefinitionTiming', name: 'WorkflowDefinitionTiming',
@ -76,27 +75,25 @@ 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}> <NButton type='primary' size='small' onClick={() => router.go(-1)}>
<NButton type='primary' onClick={() => router.go(-1)}>
<NIcon> <NIcon>
<ArrowLeftOutlined /> <ArrowLeftOutlined />
</NIcon> </NIcon>
</NButton> </NButton>
</div>
</Card> </Card>
<Card title={t('project.workflow.cron_manage')}> <Card title={t('project.workflow.cron_manage')}>
<NSpace vertical>
<NDataTable <NDataTable
loading={loadingRef} loading={loadingRef}
columns={this.columns} columns={this.columns}
data={this.tableData} data={this.tableData}
striped striped
size={'small'} size={'small'}
class={styles.table}
scrollX={this.tableWidth} scrollX={this.tableWidth}
/> />
<div class={styles.pagination}> <NSpace justify='center'>
<NPagination <NPagination
v-model:page={this.page} v-model:page={this.page}
v-model:page-size={this.pageSize} v-model:page-size={this.pageSize}
@ -107,7 +104,8 @@ export default defineComponent({
onUpdatePage={this.requestData} onUpdatePage={this.requestData}
onUpdatePageSize={this.handleChangePageSize} onUpdatePageSize={this.handleChangePageSize}
/> />
</div> </NSpace>
</NSpace>
</Card> </Card>
<TimingModal <TimingModal
type={'update'} type={'update'}
@ -115,7 +113,7 @@ export default defineComponent({
v-model:show={this.showRef} v-model:show={this.showRef}
onUpdateList={this.handleUpdateList} onUpdateList={this.handleUpdateList}
/> />
</div> </NSpace>
) )
} }
}) })

Loading…
Cancel
Save