1
0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-03-16 02:34:45 +08:00

413 lines
14 KiB
Vue
Raw Normal View History

2023-03-02 13:54:07 +08:00
<template>
<div>
2024-07-05 16:48:38 +08:00
<DrawerPro
v-model="upVisible"
2024-07-05 16:48:38 +08:00
:header="$t('commons.button.import')"
:resource="title"
:back="handleClose"
size="large"
>
2024-07-05 16:48:38 +08:00
<template #content>
<div v-loading="loading">
<div class="mb-4" v-if="type === 'mysql' || type === 'mariadb'">
<el-alert type="error" :title="$t('database.formatHelper', [remark])" />
2023-03-02 13:54:07 +08:00
</div>
2024-07-05 16:48:38 +08:00
<div class="mb-4" v-if="type === 'website'">
<el-alert :closable="false" type="warning" :title="$t('website.websiteBackupWarn')"></el-alert>
</div>
<el-upload
:limit="1"
ref="uploadRef"
drag
:on-exceed="handleExceed"
:on-change="fileOnChange"
class="upload-demo"
:auto-upload="false"
>
2024-07-05 16:48:38 +08:00
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
{{ $t('database.dropHelper') }}
<em>{{ $t('database.clickHelper') }}</em>
2023-03-02 13:54:07 +08:00
</div>
2024-07-05 16:48:38 +08:00
<template #tip>
<el-progress
v-if="isUpload"
text-inside
:stroke-width="12"
:percentage="uploadPercent"
></el-progress>
<div
v-if="type === 'mysql' || type === 'mariadb' || type === 'postgresql'"
style="width: 80%"
class="el-upload__tip"
>
<span class="input-help">{{ $t('database.supportUpType') }}</span>
<span class="input-help">
{{ $t('database.zipFormat') }}
</span>
</div>
<div v-else style="width: 80%" class="el-upload__tip">
<span class="input-help">{{ $t('website.supportUpType') }}</span>
<span class="input-help">
{{ $t('website.zipFormat', [type + '.json']) }}
</span>
</div>
2023-03-02 13:54:07 +08:00
</template>
2024-07-05 16:48:38 +08:00
</el-upload>
<el-button :disabled="isUpload || uploaderFiles.length !== 1" icon="Upload" @click="onSubmit">
2024-07-05 16:48:38 +08:00
{{ $t('commons.button.upload') }}
</el-button>
2023-10-28 11:11:31 +08:00
2024-07-05 16:48:38 +08:00
<el-divider />
<ComplexTable
:pagination-config="paginationConfig"
@search="search"
v-model:selects="selects"
:data="data"
>
<template #leftToolBar>
2024-07-05 16:48:38 +08:00
<el-button
class="ml-2.5"
plain
:disabled="selects.length === 0"
@click="onBatchDelete(null)"
>
{{ $t('commons.button.delete') }}
</el-button>
</template>
<el-table-column type="selection" fix />
<el-table-column :label="$t('commons.table.name')" show-overflow-tooltip prop="name" />
<el-table-column :label="$t('file.size')" prop="size">
<template #default="{ row }">
{{ computeSize(row.size) }}
</template>
</el-table-column>
<el-table-column
show-overflow-tooltip
:label="$t('commons.table.createdAt')"
min-width="90"
fix
>
<template #default="{ row }">
{{ row.createdAt }}
</template>
</el-table-column>
<fu-table-operations
width="150px"
:buttons="buttons"
:ellipsis="10"
:label="$t('commons.table.operate')"
fix
/>
</ComplexTable>
</div>
</template>
</DrawerPro>
<el-dialog
v-model="open"
:title="$t('commons.button.recover') + ' - ' + name"
width="40%"
:close-on-click-modal="false"
:before-close="handleBackupClose"
>
<el-form ref="backupForm" label-position="left" v-loading="loading">
<el-form-item
:label="$t('setting.compressPassword')"
style="margin-top: 10px"
v-if="type === 'app' || type === 'website'"
>
<el-input v-model="secret" :placeholder="$t('setting.backupRecoverMessage')" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose" :disabled="loading">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button type="primary" @click="onHandleRecover" :disabled="loading">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</el-dialog>
2023-10-28 11:11:31 +08:00
<OpDialog ref="opRef" @search="search" />
2023-03-02 13:54:07 +08:00
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { computeSize, newUUID } from '@/utils/util';
2023-03-02 13:54:07 +08:00
import i18n from '@/lang';
import { UploadFile, UploadFiles, UploadInstance, UploadProps, UploadRawFile, genFileId } from 'element-plus';
2023-03-02 13:54:07 +08:00
import { File } from '@/api/interface/file';
2023-03-22 15:20:30 +08:00
import { BatchDeleteFile, CheckFile, ChunkUploadFileData, GetUploadList } from '@/api/modules/files';
import { loadBaseDir } from '@/api/modules/setting';
2023-03-02 13:54:07 +08:00
import { MsgError, MsgSuccess } from '@/utils/message';
import { handleRecoverByUpload } from '@/api/modules/backup';
2023-03-02 13:54:07 +08:00
const loading = ref();
2023-03-22 15:20:30 +08:00
const isUpload = ref();
const uploadPercent = ref<number>(0);
2023-03-02 13:54:07 +08:00
const selects = ref<any>([]);
const baseDir = ref();
2023-10-28 11:11:31 +08:00
const opRef = ref();
const open = ref();
2023-03-02 13:54:07 +08:00
const data = ref();
const title = ref();
const paginationConfig = reactive({
cacheSizeKey: 'upload-page-size',
2023-03-02 13:54:07 +08:00
currentPage: 1,
pageSize: 10,
total: 0,
});
2023-10-07 15:46:44 +08:00
const upVisible = ref(false);
2023-03-02 13:54:07 +08:00
const type = ref();
const name = ref();
const detailName = ref();
const remark = ref();
const secret = ref();
2023-03-02 13:54:07 +08:00
interface DialogProps {
type: string;
name: string;
detailName: string;
remark: string;
2023-03-02 13:54:07 +08:00
}
const acceptParams = async (params: DialogProps): Promise<void> => {
type.value = params.type;
name.value = params.name;
detailName.value = params.detailName;
remark.value = params.remark;
2023-03-02 13:54:07 +08:00
const pathRes = await loadBaseDir();
switch (type.value) {
case 'mysql':
case 'mariadb':
case 'postgresql':
title.value = name.value + ' [ ' + detailName.value + ' ]';
if (detailName.value) {
baseDir.value = `${pathRes.data}/uploads/database/${type.value}/${name.value}/${detailName.value}/`;
} else {
baseDir.value = `${pathRes.data}/uploads/database/${type.value}/${name.value}/`;
}
break;
case 'website':
title.value = name.value;
baseDir.value = `${pathRes.data}/uploads/website/${type.value}/${detailName.value}/`;
break;
case 'app':
title.value = name.value;
baseDir.value = `${pathRes.data}/uploads/app/${type.value}/${name.value}/`;
}
2023-10-07 15:46:44 +08:00
upVisible.value = true;
2023-03-02 13:54:07 +08:00
search();
};
const search = async () => {
let params = {
page: paginationConfig.currentPage,
pageSize: paginationConfig.pageSize,
path: baseDir.value,
};
const res = await GetUploadList(params);
data.value = res.data.items || [];
paginationConfig.total = res.data.total;
};
const onHandleRecover = async (row?: any) => {
let params = {
downloadAccountID: 1,
type: type.value,
name: name.value,
detailName: detailName.value,
file: baseDir.value + row.name,
secret: secret.value,
taskID: newUUID(),
};
loading.value = true;
await handleRecoverByUpload(params)
.then(() => {
loading.value = false;
handleClose();
handleBackupClose();
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
search();
})
.catch(() => {
loading.value = false;
});
};
const onRecover = async (row: File.File) => {
if (type.value !== 'app' && type.value !== 'website') {
ElMessageBox.confirm(
i18n.global.t('commons.msg.recoverHelper', [row.name]),
i18n.global.t('commons.button.recover'),
{
confirmButtonText: i18n.global.t('commons.button.confirm'),
cancelButtonText: i18n.global.t('commons.button.cancel'),
},
).then(async () => {
onHandleRecover(row);
});
return;
}
open.value = true;
2023-03-02 13:54:07 +08:00
};
const uploaderFiles = ref<UploadFiles>([]);
const uploadRef = ref<UploadInstance>();
const beforeAvatarUpload = (rawFile) => {
2023-03-02 13:54:07 +08:00
if (type.value === 'app' || type.value === 'website') {
if (!rawFile.name.endsWith('.tar.gz')) {
MsgError(i18n.global.t('commons.msg.unSupportType'));
2023-03-02 13:54:07 +08:00
return false;
}
2023-03-02 13:54:07 +08:00
return true;
}
2023-03-07 15:51:48 +08:00
if (!rawFile.name.endsWith('.sql') && !rawFile.name.endsWith('.tar.gz') && !rawFile.name.endsWith('.sql.gz')) {
MsgError(i18n.global.t('commons.msg.unSupportType'));
2023-03-02 13:54:07 +08:00
return false;
}
2023-03-02 13:54:07 +08:00
return true;
};
const fileOnChange = (_uploadFile: UploadFile, uploadFiles: UploadFiles) => {
uploaderFiles.value = uploadFiles;
2023-03-02 13:54:07 +08:00
};
const handleClose = () => {
uploaderFiles.value = [];
uploadRef.value!.clearFiles();
2023-10-07 15:46:44 +08:00
upVisible.value = false;
2023-03-02 13:54:07 +08:00
};
const handleBackupClose = () => {
open.value = false;
};
2023-03-02 13:54:07 +08:00
const handleExceed: UploadProps['onExceed'] = (files) => {
uploadRef.value!.clearFiles();
const file = files[0] as UploadRawFile;
file.uid = genFileId();
uploadRef.value!.handleStart(file);
};
2023-03-08 15:33:43 +08:00
const onSubmit = async () => {
2023-03-02 13:54:07 +08:00
if (uploaderFiles.value.length !== 1) {
return;
}
2023-03-22 15:20:30 +08:00
const file = uploaderFiles.value[0];
if (!file.raw.name) {
2023-03-08 15:33:43 +08:00
MsgError(i18n.global.t('commons.msg.fileNameErr'));
return;
}
let reg = /^[a-zA-Z0-9\u4e00-\u9fa5]{1}[a-z:A-Z0-9_.\u4e00-\u9fa5-]{0,256}$/;
2023-03-22 15:20:30 +08:00
if (!reg.test(file.raw.name)) {
2023-03-08 15:33:43 +08:00
MsgError(i18n.global.t('commons.msg.fileNameErr'));
return;
}
2023-03-22 15:20:30 +08:00
const res = await CheckFile(baseDir.value + file.raw.name);
if (res.data) {
2023-03-08 15:33:43 +08:00
MsgError(i18n.global.t('commons.msg.fileExist'));
return;
2023-03-02 13:54:07 +08:00
}
2023-03-22 15:20:30 +08:00
let isOk = beforeAvatarUpload(file.raw);
if (!isOk) {
return;
}
2023-03-22 15:20:30 +08:00
submitUpload(file);
};
const submitUpload = async (file: any) => {
isUpload.value = true;
const CHUNK_SIZE = 1024 * 1024;
const fileSize = file.size;
const chunkCount = Math.ceil(fileSize / CHUNK_SIZE);
let uploadedChunkCount = 0;
for (let i = 0; i < chunkCount; i++) {
const start = i * CHUNK_SIZE;
const end = Math.min(start + CHUNK_SIZE, fileSize);
const chunk = file.raw.slice(start, end);
const formData = new FormData();
formData.append('filename', file.name);
formData.append('path', baseDir.value);
formData.append('chunk', chunk);
formData.append('chunkIndex', i.toString());
formData.append('chunkCount', chunkCount.toString());
try {
await ChunkUploadFileData(formData, {
onUploadProgress: (progressEvent) => {
const progress = Math.round(
((uploadedChunkCount + progressEvent.loaded / progressEvent.total) * 100) / chunkCount,
);
uploadPercent.value = progress;
2023-03-22 15:20:30 +08:00
},
});
uploadedChunkCount++;
} catch (error) {
isUpload.value = false;
break;
2023-03-22 15:20:30 +08:00
}
if (uploadedChunkCount == chunkCount) {
isUpload.value = false;
2023-03-02 13:54:07 +08:00
uploadRef.value?.clearFiles();
uploaderFiles.value = [];
MsgSuccess(i18n.global.t('file.uploadSuccess'));
search();
2023-03-22 15:20:30 +08:00
}
}
2023-03-02 13:54:07 +08:00
};
const onBatchDelete = async (row: File.File | null) => {
let files: Array<string> = [];
2023-10-28 11:11:31 +08:00
let names: Array<string> = [];
2023-03-02 13:54:07 +08:00
if (row) {
files.push(baseDir.value + row.name);
2023-10-28 11:11:31 +08:00
names.push(row.name);
2023-03-02 13:54:07 +08:00
} else {
selects.value.forEach((item: File.File) => {
files.push(baseDir.value + item.name);
2023-10-28 11:11:31 +08:00
names.push(item.name);
2023-03-02 13:54:07 +08:00
});
}
2023-10-28 11:11:31 +08:00
opRef.value.acceptParams({
title: i18n.global.t('commons.button.delete'),
names: names,
msg: i18n.global.t('commons.msg.operatorHelper', [
i18n.global.t('commons.button.import'),
i18n.global.t('commons.button.delete'),
]),
api: BatchDeleteFile,
params: { paths: files, isDir: false },
});
2023-03-02 13:54:07 +08:00
};
const buttons = [
{
label: i18n.global.t('commons.button.recover'),
click: (row: File.File) => {
onRecover(row);
2023-03-02 13:54:07 +08:00
},
},
{
label: i18n.global.t('commons.button.delete'),
click: (row: File.File) => {
onBatchDelete(row);
},
},
];
defineExpose({
acceptParams,
});
</script>