上传组件
This commit is contained in:
‘huanghaiixia’
@ -56,7 +56,7 @@
|
||||
:multiple="multiple"
|
||||
:beforeUpload="beforeUpload"
|
||||
:listType="listType"
|
||||
:show-upload-list="{ showDownloadIcon, showPreviewIcon, showRemoveIcon }"
|
||||
:show-upload-list="showUploadList"
|
||||
@remove="handleRemove"
|
||||
@download="handleDownload"
|
||||
@preview="handlePreview"
|
||||
@ -67,7 +67,7 @@
|
||||
<div :style="style" v-else>
|
||||
<a-button :loading="loading" :disabled="loading" v-if="!disabled">
|
||||
<upload-outlined />
|
||||
点击上传
|
||||
{{ btnTip || '点击上传' }}
|
||||
</a-button>
|
||||
<div v-if="VITE_GLOB_UPLOAD_ALERT_TIP?.trim()" style="color: red; margin-top: 8px">
|
||||
{{ VITE_GLOB_UPLOAD_ALERT_TIP }}
|
||||
@ -161,6 +161,16 @@ import { methodOf } from 'lodash-es';
|
||||
showDownloadIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showUploadList: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
fileList: Array,
|
||||
btnTip: String,
|
||||
dataDelete: { // 是否调接口删除
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
@ -178,9 +188,9 @@ import { methodOf } from 'lodash-es';
|
||||
tableName.value = data.tableName;
|
||||
columnName.value = data.columnName;
|
||||
}else{
|
||||
tableId.value = '';
|
||||
tableName.value = '';
|
||||
columnName.value = '';
|
||||
tableId.value = props.value || '';
|
||||
tableName.value = props.tableName || '';
|
||||
columnName.value = props.columnName || '';
|
||||
}
|
||||
}
|
||||
|
||||
@ -193,8 +203,35 @@ import { methodOf } from 'lodash-es';
|
||||
const previewFile = ref('');
|
||||
const previewTitle = ref('');
|
||||
|
||||
watch(
|
||||
() => props.fileList,
|
||||
async (val) => {
|
||||
if (val) {
|
||||
fileList.value = props.fileList
|
||||
if (fileList.value.length) {
|
||||
fileList.value.forEach((x) => {
|
||||
x.name = x.fileOrg;
|
||||
x.url = x.filePath;
|
||||
x.thumbUrl = x.thUrl;
|
||||
x.status = 'done'; //没有则不会展示下载按钮
|
||||
});
|
||||
}
|
||||
bindValues(fileList.value[0]);
|
||||
} else {
|
||||
bindValues(undefined);
|
||||
}
|
||||
if (!val) {
|
||||
fileList.value = [];
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
|
||||
const refreshList = async (val:any) => {
|
||||
if (val) {
|
||||
if (props.dataDelete) return
|
||||
let _list = await getFileList({ tableName: props.tableName, columnName: props.columnName,tableId: props.value });
|
||||
fileList.value = _list.filter((o) => !removeIds.value.includes(o.id));
|
||||
if (fileList.value.length) {
|
||||
@ -205,6 +242,7 @@ import { methodOf } from 'lodash-es';
|
||||
x.status = 'done'; //没有则不会展示下载按钮
|
||||
});
|
||||
bindValues(fileList.value[0]);
|
||||
emit('change', fileList.value);
|
||||
}
|
||||
} else {
|
||||
bindValues(undefined);
|
||||
@ -249,10 +287,20 @@ import { methodOf } from 'lodash-es';
|
||||
});
|
||||
let tableIdValue = tableId.value;
|
||||
bindValues(res[0]);
|
||||
if (props.dataDelete) {
|
||||
let fileArr = res||[]
|
||||
fileArr.forEach((x) => {
|
||||
x.status = 'done'; //没有则不会展示下载按钮
|
||||
x.url = x.fileUrl;
|
||||
x.thumbUrl = x.thUrl;
|
||||
x.name = x.fileOrg;
|
||||
});
|
||||
fileList.value = [...fileList.value, ...fileArr]
|
||||
}
|
||||
emit('update:value', tableId.value);
|
||||
emit('update:tableName', tableName.value);
|
||||
emit('update:columnName', columnName.value);
|
||||
emit('change');
|
||||
emit('change', fileList.value);
|
||||
if(tableIdValue==tableId.value){
|
||||
await refreshList(tableId.value);
|
||||
}
|
||||
@ -293,6 +341,17 @@ import { methodOf } from 'lodash-es';
|
||||
}
|
||||
const handleRemove = async (info) => {
|
||||
const id = info.response ? info.response.data.id : info.id;
|
||||
if (props.dataDelete) {
|
||||
const index = fileList.value.findIndex((x) => x.id === id);
|
||||
fileList.value.splice(index, 1);
|
||||
emit('update:value', tableId.value);
|
||||
emit('change', fileList.value);
|
||||
notification.success({
|
||||
message: 'Tip',
|
||||
description: '删除成功！'
|
||||
});
|
||||
return
|
||||
}
|
||||
const status = await deleteFile([id]);
|
||||
if (status) {
|
||||
removeIds.value.push(id);
|
||||
@ -303,7 +362,7 @@ import { methodOf } from 'lodash-es';
|
||||
emit('update:value', tableId.value);
|
||||
emit('update:tableName', tableName.value);
|
||||
emit('update:columnName', columnName.value);
|
||||
emit('change');
|
||||
emit('change', fileList.value);
|
||||
await refreshList(tableId.value);
|
||||
notification.success({
|
||||
message: 'Tip',
|
||||
|
||||
@ -174,9 +174,9 @@
|
||||
tableName.value = data.tableName;
|
||||
columnName.value = data.columnName;
|
||||
}else{
|
||||
tableId.value = '';
|
||||
tableName.value = '';
|
||||
columnName.value = '';
|
||||
tableId.value = props.value || '';
|
||||
tableName.value = props.tableName || '';
|
||||
columnName.value = props.columnName || '';
|
||||
}
|
||||
}
|
||||
const deleteFlag = ref(false);
|
||||
@ -262,13 +262,14 @@
|
||||
x.url = x.fileUrl;
|
||||
x.thumbUrl = x.thUrl;
|
||||
x.fileSize = x.fileSize
|
||||
x.name = x.fileOrg;
|
||||
});
|
||||
bindValues(res[0]);
|
||||
fileList.value = [...fileList.value, ...fileArr]
|
||||
emit('update:value', tableId.value);
|
||||
emit('update:tableName', tableName.value);
|
||||
emit('update:columnName', columnName.value);
|
||||
emit('change');
|
||||
emit('change', fileList.value);
|
||||
loading.value = false;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
|
||||
Reference in New Issue
Block a user