Browse Source

[Refactor][UI] Refactor file manage using NSpace component. (#11073)

3.1.0-release
songjianet 2 years ago committed by GitHub
parent
commit
445e830a84
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 28
      dolphinscheduler-ui/src/views/resource/file/index.module.scss
  2. 62
      dolphinscheduler-ui/src/views/resource/file/index.tsx

28
dolphinscheduler-ui/src/views/resource/file/index.module.scss

@ -36,13 +36,6 @@
margin-left: 160px; margin-left: 160px;
} }
.pagination {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.table-box { .table-box {
table { table {
width: 100%; width: 100%;
@ -70,27 +63,6 @@
} }
} }
.table-card {
> div div {
flex: none !important;
}
}
.breadcrumb { .breadcrumb {
padding-left: 10px; padding-left: 10px;
} }
.conditions-model {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0;
.right {
> .form-box {
.list {
float: right;
margin: 3px 0 3px 4px;
}
}
}
}

62
dolphinscheduler-ui/src/views/resource/file/index.tsx

@ -30,21 +30,21 @@ import {
} from 'naive-ui' } from 'naive-ui'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { SearchOutlined } from '@vicons/antd' import { SearchOutlined } from '@vicons/antd'
import Card from '@/components/card'
import { useTable } from './table/use-table' import { useTable } from './table/use-table'
import { useFileState } from './use-file' import { useFileState } from './use-file'
import ResourceFolderModal from './folder'
import ResourceUploadModal from './upload'
import ResourceRenameModal from './rename'
import { BreadcrumbItem, IRenameFile } from './types' import { BreadcrumbItem, IRenameFile } from './types'
import type { Router } from 'vue-router'
import styles from './index.module.scss'
import { useFileStore } from '@/store/file/file' import { useFileStore } from '@/store/file/file'
import { import {
queryCurrentResourceById, queryCurrentResourceById,
queryResourceById queryResourceById
} from '@/service/modules/resources' } from '@/service/modules/resources'
import { ResourceFile } from '@/service/modules/resources/types' import Card from '@/components/card'
import ResourceFolderModal from './folder'
import ResourceUploadModal from './upload'
import ResourceRenameModal from './rename'
import styles from './index.module.scss'
import type { ResourceFile } from '@/service/modules/resources/types'
import type { Router } from 'vue-router'
export default defineComponent({ export default defineComponent({
name: 'File', name: 'File',
@ -255,11 +255,10 @@ export default defineComponent({
} = this } = this
return ( return (
<div> <NSpace vertical>
<Card style={{ marginBottom: '8px' }}> <Card>
<div class={styles['conditions-model']}> <NSpace justify='space-between'>
<NSpace> <NButtonGroup size='small'>
<NButtonGroup>
<NButton <NButton
onClick={handleCreateFolder} onClick={handleCreateFolder}
class='btn-create-directory' class='btn-create-directory'
@ -273,31 +272,22 @@ export default defineComponent({
{t('resource.file.upload_files')} {t('resource.file.upload_files')}
</NButton> </NButton>
</NButtonGroup> </NButtonGroup>
</NSpace> <NSpace>
<div class={styles.right}>
<div class={styles['form-box']}>
<div class={styles.list}>
<NButton onClick={handleConditions}>
<NIcon>
<SearchOutlined />
</NIcon>
</NButton>
</div>
<div class={styles.list}>
<NInput <NInput
size='small'
allowInput={this.trim} allowInput={this.trim}
placeholder={t('resource.file.enter_keyword_tips')} placeholder={t('resource.file.enter_keyword_tips')}
v-model={[this.searchRef, 'value']} v-model={[this.searchRef, 'value']}
/> />
</div> <NButton size='small' type='primary' onClick={handleConditions}>
</div> <NIcon>
</div> <SearchOutlined />
</div> </NIcon>
</NButton>
</NSpace>
</NSpace>
</Card> </Card>
<Card <Card title={t('resource.file.file_manage')}>
title={t('resource.file.file_manage')}
class={styles['table-card']}
>
{{ {{
'header-extra': () => ( 'header-extra': () => (
<NBreadcrumb separator='>' class={styles['breadcrumb']}> <NBreadcrumb separator='>' class={styles['breadcrumb']}>
@ -319,7 +309,7 @@ export default defineComponent({
</NBreadcrumb> </NBreadcrumb>
), ),
default: () => ( default: () => (
<div> <NSpace vertical>
<NDataTable <NDataTable
remote remote
columns={columnsRef} columns={columnsRef}
@ -330,7 +320,7 @@ export default defineComponent({
row-class-name='items' row-class-name='items'
scrollX={tableWidth} scrollX={tableWidth}
/> />
<div class={styles.pagination}> <NSpace justify='center'>
<NPagination <NPagination
v-model:page={this.pagination.page} v-model:page={this.pagination.page}
v-model:pageSize={this.pagination.pageSize} v-model:pageSize={this.pagination.pageSize}
@ -341,8 +331,8 @@ export default defineComponent({
show-quick-jumper show-quick-jumper
show-size-picker show-size-picker
/> />
</div> </NSpace>
</div> </NSpace>
) )
}} }}
</Card> </Card>
@ -361,7 +351,7 @@ export default defineComponent({
description={this.renameInfo.description} description={this.renameInfo.description}
onUpdateList={this.updateList} onUpdateList={this.updateList}
/> />
</div> </NSpace>
) )
} }
}) })

Loading…
Cancel
Save