feat: 🚀 flx:修复bug

This commit is contained in:
X_Rian 2024-08-26 17:31:00 +08:00
parent 58f7d41023
commit 607c699ca3
3 changed files with 84 additions and 29 deletions

View File

@ -30,14 +30,20 @@
<section class="upload-area">
<div class="header">
<p v-if="!fileList.length">
<el-icon class="info"><InfoFilled /></el-icon>
<el-icon class="info">
<InfoFilled />
</el-icon>
<span>温馨提示:将文件添加到上传队列, 然后点击开始上传按钮</span>
</p>
<p v-if="isOverflow">
<el-icon class="error"><WarningFilled /></el-icon>
<el-icon class="error">
<WarningFilled />
</el-icon>
<span>文件大小错误: 文件大小不超过 {{ calculateFileSize(maxTotalFileSize!) }}</span>
</p>
<el-icon class="close" @click.capture="close"><Close /></el-icon>
<el-icon class="close" @click.capture="close">
<Close />
</el-icon>
</div>
<div class="upload-list">
@ -55,9 +61,16 @@
<template #default="{ row }">
{{ /* TODO: 只是为了触发视图更新, 因为 File 对象无法被 vue 托管 */ __JUST_UPDATE_VIEW ? "" : "" }}
<el-icon v-if="row.response" class="success"><CircleCheckFilled /></el-icon>
<el-icon v-else-if="row.uploading" class="uploading"> <Upload /></el-icon>
<el-icon v-else class="remove" @click.capture="remove(row)"><RemoveFilled /></el-icon>
<el-icon v-if="row.response" class="success">
<CircleCheckFilled />
</el-icon>
<el-icon v-else-if="row.uploading" class="uploading">
<Upload />
</el-icon>
<el-icon class="remove" @click.capture="remove(row, 1)">
<RemoveFilled />
</el-icon>
<!-- v-else -->
</template>
</el-table-column>
</el-table>
@ -73,9 +86,15 @@
<p>{{ calculateFileSize(file.size) }}</p>
</div>
<el-icon v-if="file.response" class="success"><CircleCheckFilled /></el-icon>
<el-icon v-else-if="file.uploading" class="uploading"> <Upload /></el-icon>
<el-icon v-else class="remove" @click.capture="remove(file)"><RemoveFilled /></el-icon>
<el-icon v-if="file.response" class="success">
<CircleCheckFilled />
</el-icon>
<el-icon v-else-if="file.uploading" class="uploading">
<Upload />
</el-icon>
<el-icon v-else class="remove" @click.capture="remove(file)">
<RemoveFilled />
</el-icon>
</div>
</div>
</div>
@ -84,7 +103,12 @@
<div class="file-info">
<span class="size">{{ !fileList.length ? "未选择" : calculateFileSize(totalFileSize) }}</span>
<div class="progress" :style="{ '--progress': `${parseInt((progress / currentTask) * 100 + '')}%` }"></div>
<div
class="progress"
:style="{
'--progress': `${parseInt((progress / currentTask) * 100 + '')}%`
}"
></div>
<!-- <span class="uploaded" :class="{ active: isUploading }">{{ `已上传 ${completeCount}/${currentTask} 个文件` }}</span> -->
</div>
@ -305,11 +329,18 @@ const selectFile = (e: Event) => {
* @description 删除指定文件对象
* @param row 文件对象
*/
const remove = (row: UploadFile) => {
const remove = (row: UploadFile, type?: number) => {
if (isUploading.value) return ElMessage.warning("上传中, 请不要执行任何操作");
const i = fileList.value.indexOf(row);
if (type == 1) {
const findIndex = successList.value.findIndex(item => item.id === row.id);
if (findIndex > -1) {
successList.value.splice(findIndex, 1);
}
}
if (i >= 0) {
fileList.value.splice(i, 1);
@ -367,7 +398,11 @@ const handlerUpload = () => {
controllerList.value.push(controller);
upload(data, { signal: controller.signal, onUploadProgress, headers: { noLoading: true } })
upload(data, {
signal: controller.signal,
onUploadProgress,
headers: { noLoading: true }
})
.then(res => {
if (res.code == "200") {
file.response = res.result;

View File

@ -95,10 +95,10 @@
</el-select>
</div>
<div>
<!-- <el-input placeholder="请输入" v-model="item.punish" class="form-element-input" /> -->
<el-select placeholder="请选择" class="form-element-select" v-model="item.punish">
<el-input placeholder="请输入" v-model="item.punish" class="form-element-input" />
<!-- <el-select placeholder="请选择" class="form-element-select" v-model="item.punish">
<el-option v-for="(item2, index) in rankRemark" :key="item2.label" :label="item2.label" :value="item2.value" />
</el-select>
</el-select> -->
</div>
<div>
<el-input placeholder="请输入" v-model="item.remark" class="form-element-input" />

View File

@ -70,32 +70,52 @@ const handlechange = e => {
const handleSubmit = (isTemporary?: any) => {
const fileList: AnnexFile[] = [];
console.log(annexFiles.value, 888999);
annexFiles.value.forEach(item => {
const files = item.files;
files.forEach(file => {
const curr: AnnexFile = {};
files.forEach((file: any) => {
if (file.response.fileId) {
const curr: AnnexFile = {};
curr.createTime = file.response?.createTime;
curr.extendName = file.response?.ext;
curr.createTime = file.response?.createTime;
curr.extendName = file.response?.extendName;
// TODO: , name , filename, originalFilename
curr.fileName = file.response?.originalFilename;
// curr.fileName = file.response?.filename;
// TODO: , name , filename, originalFilename
curr.fileName = file.response?.fileName;
// curr.fileName = file.response?.filename;
// curr.fileId = file.response && +file.response.id;
curr.fileSize = `${file.response?.size || ""}`;
curr.fileUrl = file.response?.url;
// curr.fileId = file.response && +file.response.id;
curr.fileSize = `${file.response?.fileSize || ""}`;
curr.fileUrl = file.response?.fileUrl;
curr.label = file.label;
curr.label = file.response?.label;
fileList.push(curr);
fileList.push(curr);
} else {
const curr: AnnexFile = {};
curr.createTime = file.response?.createTime;
curr.extendName = file.response?.ext;
// TODO: , name , filename, originalFilename
curr.fileName = file.response?.originalFilename;
// curr.fileName = file.response?.filename;
// curr.fileId = file.response && +file.response.id;
curr.fileSize = `${file.response?.size || ""}`;
curr.fileUrl = file.response?.url;
curr.label = file.label;
fileList.push(curr);
}
});
item.files = files;
});
console.log(fileList, 888999);
// return;
emit("next", { annexFiles: fileList }, isTemporary);
};