mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2024-11-24 02:59:16 +08:00
style: 增加分页
This commit is contained in:
parent
8ad37807d5
commit
95b18ebc89
@ -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
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
@ -246,5 +246,6 @@ export default {
|
||||
canNotDeCompress: 'Can not DeCompress this File',
|
||||
uploadSuccess: 'Upload Success!',
|
||||
downloadProcess: 'Download Process',
|
||||
downloading: 'Downloading...',
|
||||
},
|
||||
};
|
||||
|
@ -246,5 +246,6 @@ export default {
|
||||
canNotDeCompress: '无法解压此文件',
|
||||
uploadSuccess: '上传成功!',
|
||||
downloadProcess: '下载进度',
|
||||
downloading: '正在下载...',
|
||||
},
|
||||
};
|
||||
|
@ -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('/');
|
||||
|
@ -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();
|
||||
});
|
||||
|
@ -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;
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user