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

Loading…
Cancel
Save