style: 增加分页

This commit is contained in:
zhengkunwang223 2022-09-15 10:44:43 +08:00 committed by zhengkunwang223
parent 8ad37807d5
commit 95b18ebc89
7 changed files with 43 additions and 11 deletions

View File

@ -31,6 +31,7 @@ type FileInfo struct {
ModTime time.Time `json:"modTime"`
FileMode os.FileMode `json:"-"`
Items []*FileInfo `json:"items"`
ItemTotal int `json:"itemTotal"`
}
type FileOption struct {
@ -39,6 +40,8 @@ type FileOption struct {
Expand bool `json:"expand"`
Dir bool `json:"dir"`
ShowHidden bool `json:"showHidden"`
Page int `json:"page"`
PageSize int `json:"pageSize"`
}
func NewFileInfo(op FileOption) (*FileInfo, error) {
@ -70,7 +73,7 @@ func NewFileInfo(op FileOption) (*FileInfo, error) {
}
if op.Expand {
if file.IsDir {
if err := file.listChildren(op.Dir, op.ShowHidden); err != nil {
if err := file.listChildren(op.Dir, op.ShowHidden, op.Page, op.PageSize); err != nil {
return nil, err
}
return file, nil
@ -83,12 +86,14 @@ func NewFileInfo(op FileOption) (*FileInfo, error) {
return file, nil
}
func (f *FileInfo) listChildren(dir, showHidden bool) error {
func (f *FileInfo) listChildren(dir, showHidden bool, page, pageSize int) error {
afs := &afero.Afero{Fs: f.Fs}
files, err := afs.ReadDir(f.Path)
if err != nil {
return err
}
f.ItemTotal = len(files)
var items []*FileInfo
for _, df := range files {
if dir && !df.IsDir() {
@ -138,7 +143,17 @@ func (f *FileInfo) listChildren(dir, showHidden bool) error {
}
items = append(items, file)
}
f.Items = items
start := (page - 1) * pageSize
end := pageSize + start
var result []*FileInfo
if start < 0 || start > f.ItemTotal || end < 0 || start > end || end > f.ItemTotal {
result = items
} else {
result = items[start:end]
}
f.Items = result
return nil
}

View File

@ -1,4 +1,4 @@
import { CommonModel } from '.';
import { CommonModel, ReqPage } from '.';
export namespace File {
export interface File extends CommonModel {
path: string;
@ -18,9 +18,10 @@ export namespace File {
dirSize: number;
items: File[];
extension: string;
itemTotal: number;
}
export interface ReqFile {
export interface ReqFile extends ReqPage {
path: string;
search?: string;
expand: boolean;

View File

@ -246,5 +246,6 @@ export default {
canNotDeCompress: 'Can not DeCompress this File',
uploadSuccess: 'Upload Success!',
downloadProcess: 'Download Process',
downloading: 'Downloading...',
},
};

View File

@ -246,5 +246,6 @@ export default {
canNotDeCompress: '无法解压此文件',
uploadSuccess: '上传成功!',
downloadProcess: '下载进度',
downloading: '正在下载...',
},
};

View File

@ -43,6 +43,7 @@
v-model:selects="selects"
:data="data"
v-loading="loading"
@search="search(req)"
>
<template #toolbar>
<el-button-group>
@ -211,7 +212,7 @@ import Process from './process/index.vue';
const data = ref();
let selects = ref<any>([]);
let req = reactive({ path: '/', expand: true, showHidden: false });
let req = reactive({ path: '/', expand: true, showHidden: false, page: 1, pageSize: 100 });
let loading = ref(false);
let treeLoading = ref(false);
const paths = ref<string[]>([]);
@ -223,7 +224,7 @@ const modePage = reactive({ open: false, modeForm: { path: '/', isDir: false, mo
const compressPage = reactive({ open: false, files: [''], name: '', dst: '' });
const deCompressPage = reactive({ open: false, path: '', name: '', dst: '', mimeType: '' });
const editorPage = reactive({ open: false, content: '', loading: false });
const codeReq = reactive({ path: '', expand: false });
const codeReq = reactive({ path: '', expand: false, page: 1, pageSize: 100 });
const uploadPage = reactive({ open: false, path: '' });
const renamePage = reactive({ open: false, path: '', oldName: '' });
const wgetPage = reactive({ open: false, path: '' });
@ -239,14 +240,17 @@ const defaultProps = {
const paginationConfig = reactive({
page: 1,
pageSize: 5,
pageSize: 100,
total: 0,
});
const search = async (req: File.ReqFile) => {
loading.value = true;
req.page = paginationConfig.page;
req.pageSize = paginationConfig.pageSize;
await GetFilesList(req)
.then((res) => {
paginationConfig.total = res.data.itemTotal;
data.value = res.data.items;
req.path = res.data.path;
const pathArray = req.path.split('/');

View File

@ -7,15 +7,16 @@
:before-close="handleClose"
>
<div v-for="(value, index) in res" :key="index">
<span>{{ value['name'] }}</span>
<span>{{ $t('file.downloading') }} {{ value['name'] }}</span>
<el-progress :text-inside="true" :stroke-width="15" :percentage="value['percent']"></el-progress>
<span>{{ value['written'] }}/{{ value['total'] }}</span>
<span>{{ getFileSize(value['written']) }}/{{ getFileSize(value['total']) }}</span>
</div>
</el-dialog>
</template>
<script lang="ts" setup>
import { FileKeys } from '@/api/modules/files';
import { computeSize } from '@/utils/util';
import { onBeforeUnmount, ref, toRefs } from 'vue';
const props = defineProps({
@ -84,6 +85,10 @@ const sendMsg = () => {
}, 1000);
};
const getFileSize = (size: number) => {
return computeSize(size);
};
onBeforeUnmount(() => {
closeSocket();
});

View File

@ -9,7 +9,7 @@
v-loading="loading"
>
<el-form-item :label="$t('file.downloadUrl')" prop="url">
<el-input v-model="addForm.url" />
<el-input v-model="addForm.url" @input="getFileName" />
</el-form-item>
<el-form-item :label="$t('file.path')" prop="path">
<el-input v-model="addForm.path">
@ -100,6 +100,11 @@ const submit = async (formEl: FormInstance | undefined) => {
});
};
const getFileName = (url: string) => {
const paths = url.split('/');
addForm.name = paths[paths.length - 1];
};
const onOpen = () => {
addForm.path = props.path;
};