Merge branch 'dev' of http://47.94.165.164:13000/geg-gas/geg-gas-web into dev
# Conflicts: # src/router/routes/basic.ts
This commit is contained in:
@ -38,6 +38,8 @@
|
||||
|
||||
const props = defineProps({
|
||||
value: String,
|
||||
tableName: String,
|
||||
columnName: String,
|
||||
maxNumber: Number,
|
||||
accpet: String,
|
||||
name: String,
|
||||
@ -67,9 +69,24 @@
|
||||
const fileList = ref<any[]>([]);
|
||||
const list = ref<any[]>([]);
|
||||
const { notification } = useMessage();
|
||||
const folderId = ref<string>('');
|
||||
const tableId = ref<string>('');
|
||||
const tableName = ref<string>('');
|
||||
const columnName = ref<string>('');
|
||||
|
||||
const bindValues = (data:any)=>{
|
||||
if(data){
|
||||
tableId.value = data.tableId;
|
||||
tableName.value = data.tableName;
|
||||
columnName.value = data.columnName;
|
||||
}else{
|
||||
tableId.value = '';
|
||||
tableName.value = '';
|
||||
columnName.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
const deleteFlag = ref(false);
|
||||
const emit = defineEmits(['update:value', 'change', 'click']);
|
||||
const emit = defineEmits(['update:value', 'change', 'click', 'update:tableName', 'update:columnName']);
|
||||
const loading = ref(false);
|
||||
|
||||
const previewVisible = ref(false);
|
||||
@ -80,18 +97,19 @@
|
||||
() => props.value,
|
||||
async (val) => {
|
||||
if (val) {
|
||||
fileList.value = await getFileList({ folderId: props.value });
|
||||
fileList.value = await getFileList({ tableName: props.tableName, columnName: props.columnName,tableId: props.value });
|
||||
if (fileList.value.length) {
|
||||
fileList.value.forEach((x) => {
|
||||
x.name = x.fileName;
|
||||
x.name = x.fileOrg;
|
||||
x.thumbUrl = x.fileUrl;
|
||||
x.status = 'done'; //没有则不会展示下载按钮
|
||||
});
|
||||
folderId.value = fileList.value[0].folderId;
|
||||
bindValues(fileList.value[0]);
|
||||
}
|
||||
}
|
||||
if (!val) {
|
||||
fileList.value = [];
|
||||
bindValues(undefined);
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -113,14 +131,16 @@
|
||||
name: 'file',
|
||||
file: arr
|
||||
},
|
||||
folderId.value
|
||||
tableId.value, tableName.value, columnName.value
|
||||
);
|
||||
folderId.value = res[0].folderId;
|
||||
bindValues(res[0]);
|
||||
fileList.value.forEach((x) => {
|
||||
x.status = 'done'; //没有则不会展示下载按钮
|
||||
x.thumbUrl = x.fileUrl;
|
||||
});
|
||||
emit('update:value', folderId.value);
|
||||
emit('update:value', tableId.value);
|
||||
emit('update:tableName', tableName.value);
|
||||
emit('update:columnName', columnName.value);
|
||||
emit('change');
|
||||
loading.value = false;
|
||||
} catch (error) {
|
||||
@ -155,26 +175,21 @@
|
||||
}
|
||||
const handleRemove = async (info) => {
|
||||
const id = info.response ? info.response.data.id : info.id;
|
||||
|
||||
const newFolderId = await deleteSingleFile(id);
|
||||
|
||||
folderId.value = newFolderId;
|
||||
|
||||
deleteFlag.value = true;
|
||||
|
||||
const index = fileList.value.findIndex((x) => x.id === id);
|
||||
fileList.value.splice(index, 1);
|
||||
|
||||
fileList.value.forEach((x) => {
|
||||
x.folderId = newFolderId;
|
||||
});
|
||||
|
||||
emit('update:value', folderId.value);
|
||||
emit('change');
|
||||
notification.success({
|
||||
message: 'Tip',
|
||||
description: '删除成功！'
|
||||
});
|
||||
const status = await deleteSingleFile(id);
|
||||
if (status) {
|
||||
deleteFlag.value = true;
|
||||
const index = fileList.value.findIndex((x) => x.id === id);
|
||||
fileList.value.splice(index, 1);
|
||||
notification.success({
|
||||
message: 'Tip',
|
||||
description: '删除成功！'
|
||||
});
|
||||
}else{
|
||||
notification.error({
|
||||
message: 'Tip',
|
||||
description: '删除失败！'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownload = (info) => {
|
||||
|
||||
@ -29,13 +29,21 @@
|
||||
import { Upload } from 'ant-design-vue';
|
||||
import { PlusOutlined } from '@ant-design/icons-vue';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { getFileList } from '/@/api/system/file';
|
||||
import { getFileList,parseDownloadUrl } from '/@/api/system/file';
|
||||
|
||||
import { uploadMultiApi } from '/@/api/sys/upload';
|
||||
import { Icon } from '/@/components/Icon';
|
||||
|
||||
const props = defineProps({
|
||||
value: String,
|
||||
tableName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
columnName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
name: String,
|
||||
disabled: Boolean,
|
||||
isUpload: Boolean
|
||||
@ -44,9 +52,23 @@
|
||||
const fileList = ref('');
|
||||
const list = ref<any[]>([]);
|
||||
const { notification } = useMessage();
|
||||
const folderId = ref<string>('');
|
||||
const tableId = ref<string>('');
|
||||
const tableName = ref<string>('');
|
||||
const columnName = ref<string>('');
|
||||
|
||||
const bindValues = (data:any)=>{
|
||||
if(data){
|
||||
tableId.value = data.tableId;
|
||||
tableName.value = data.tableName;
|
||||
columnName.value = data.columnName;
|
||||
}else{
|
||||
tableId.value = '';
|
||||
tableName.value = '';
|
||||
columnName.value = '';
|
||||
}
|
||||
}
|
||||
const deleteFlag = ref(false);
|
||||
const emit = defineEmits(['update:value', 'change', 'click']);
|
||||
const emit = defineEmits(['update:value', 'change', 'click', 'update:tableName', 'update:columnName']);
|
||||
const loading = ref(false);
|
||||
const visible = ref<boolean>(false);
|
||||
const setVisible = (value): void => {
|
||||
@ -57,14 +79,14 @@
|
||||
() => props.value,
|
||||
async (val) => {
|
||||
if (val) {
|
||||
let result = await getFileList({ folderId: props.value });
|
||||
let result = await getFileList({tableName: props.tableName, columnName: props.columnName,tableId: props.value});
|
||||
if (result.length) {
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let x = result[i];
|
||||
if (i > 0) break;
|
||||
fileList.value = x.fileUrl;
|
||||
fileList.value = parseDownloadUrl(x.fileUrl,false,true);
|
||||
}
|
||||
folderId.value = result[0].folderId;
|
||||
bindValues(result[0]);
|
||||
console.log(fileList.value, val, 'fileList.value');
|
||||
}
|
||||
}
|
||||
@ -91,21 +113,22 @@
|
||||
name: 'file',
|
||||
file: arr
|
||||
},
|
||||
folderId.value
|
||||
tableId.value, tableName.value, columnName.value
|
||||
);
|
||||
folderId.value = res[0].folderId;
|
||||
bindValues(res[0]);
|
||||
if (res.length) {
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
let x = res[i];
|
||||
|
||||
if (i > 0) break;
|
||||
fileList.value = x.fileUrl;
|
||||
fileList.value = parseDownloadUrl(x.fileUrl,false,true);
|
||||
}
|
||||
folderId.value = res[0].folderId;
|
||||
bindValues(res[0]);
|
||||
console.log(fileList.value, 'fileList.value1111111');
|
||||
}
|
||||
|
||||
emit('update:value', folderId.value);
|
||||
emit('update:value', tableId.value);
|
||||
emit('update:tableName', tableName.value);
|
||||
emit('update:columnName', columnName.value);
|
||||
emit('change');
|
||||
loading.value = false;
|
||||
} catch (error) {
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
import { Upload } from 'ant-design-vue';
|
||||
import { QuestionCircleFilled, CloseCircleFilled } from '@ant-design/icons-vue';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { deleteSingleFile, getFileList } from '/@/api/system/file';
|
||||
import { deleteSingleFile, getFileList, parseDownloadUrl } from '/@/api/system/file';
|
||||
import { downloadByUrl } from '/@/utils/file/download';
|
||||
import { uploadMultiApi } from '/@/api/sys/upload';
|
||||
import { Icon } from '/@/components/Icon';
|
||||
@ -51,6 +51,14 @@
|
||||
const { VITE_GLOB_UPLOAD_ALERT_TIP } = getAppEnvConfig();
|
||||
const props = defineProps({
|
||||
value: String,
|
||||
tableName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
columnName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
showTip: { type: Boolean, default: true },
|
||||
placeholder: String,
|
||||
tipType: String,
|
||||
@ -61,9 +69,24 @@
|
||||
const fileList = ref<any[]>([]);
|
||||
const list = ref<any[]>([]);
|
||||
const { notification } = useMessage();
|
||||
const folderId = ref<string>('');
|
||||
const tableId = ref<string>('');
|
||||
const tableName = ref<string>('');
|
||||
const columnName = ref<string>('');
|
||||
|
||||
const bindValues = (data:any)=>{
|
||||
if(data){
|
||||
tableId.value = data.tableId;
|
||||
tableName.value = data.tableName;
|
||||
columnName.value = data.columnName;
|
||||
}else{
|
||||
tableId.value = '';
|
||||
tableName.value = '';
|
||||
columnName.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
const deleteFlag = ref(false);
|
||||
const emit = defineEmits(['update:value', 'change', 'click']);
|
||||
const emit = defineEmits(['update:value', 'change', 'click', 'update:tableName', 'update:columnName']);
|
||||
const loading = ref(false);
|
||||
const name = ref();
|
||||
const previewVisible = ref(false);
|
||||
@ -74,16 +97,16 @@
|
||||
() => props.value,
|
||||
async (val) => {
|
||||
if (val) {
|
||||
fileList.value = await getFileList({ folderId: props.value });
|
||||
fileList.value = await getFileList({ tableName: props.tableName, columnName: props.columnName,tableId: props.value});
|
||||
if (fileList.value.length) {
|
||||
fileList.value.forEach((x) => {
|
||||
x.name = x.fileName;
|
||||
x.name = x.fileOrg;
|
||||
x.url = x.fileUrl;
|
||||
x.thumbUrl = x.thUrl;
|
||||
x.status = 'done'; //没有则不会展示下载按钮
|
||||
});
|
||||
folderId.value = fileList.value[0].folderId;
|
||||
name.value = fileList.value[0].name + fileList.value[0].fileType;
|
||||
bindValues(fileList.value[0]);
|
||||
name.value = fileList.value[0].fileOrg;
|
||||
}
|
||||
}
|
||||
if (!val) {
|
||||
@ -110,16 +133,18 @@
|
||||
name: 'file',
|
||||
file: arr
|
||||
},
|
||||
folderId.value
|
||||
tableId.value, tableName.value, columnName.value
|
||||
);
|
||||
folderId.value = res[0].folderId;
|
||||
bindValues(res[0]);
|
||||
fileList.value.forEach((x) => {
|
||||
x.status = 'done'; //没有则不会展示下载按钮
|
||||
x.url = x.fileUrl;
|
||||
x.thumbUrl = x.thUrl;
|
||||
});
|
||||
name.value = res[0].fileName + res[0].fileType;
|
||||
emit('update:value', folderId.value);
|
||||
name.value = res[0].fileOrg;
|
||||
emit('update:value', tableId.value);
|
||||
emit('update:tableName', tableName.value);
|
||||
emit('update:columnName', columnName.value);
|
||||
emit('change');
|
||||
loading.value = false;
|
||||
} catch (error) {
|
||||
@ -152,40 +177,40 @@
|
||||
const handleRemove = async (info) => {
|
||||
const id = info.response ? info.response.data.id : info.id;
|
||||
|
||||
const newFolderId = await deleteSingleFile(id);
|
||||
const status = await deleteSingleFile(id);
|
||||
|
||||
folderId.value = newFolderId;
|
||||
|
||||
deleteFlag.value = true;
|
||||
|
||||
const index = fileList.value.findIndex((x) => x.id === id);
|
||||
fileList.value.splice(index, 1);
|
||||
|
||||
fileList.value.forEach((x) => {
|
||||
x.folderId = newFolderId;
|
||||
});
|
||||
|
||||
emit('update:value', folderId.value);
|
||||
emit('change');
|
||||
notification.success({
|
||||
message: 'Tip',
|
||||
description: '删除成功！'
|
||||
});
|
||||
if (status) {
|
||||
deleteFlag.value = true;
|
||||
const index = fileList.value.findIndex((x) => x.id === id);
|
||||
fileList.value.splice(index, 1);
|
||||
notification.success({
|
||||
message: 'Tip',
|
||||
description: '删除成功！'
|
||||
});
|
||||
}else{
|
||||
notification.error({
|
||||
message: 'Tip',
|
||||
description: '删除失败！'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownload = (info) => {
|
||||
const url = info.response ? info.response.data.fileUrl : info.fileUrl;
|
||||
const fileName = info.response ? info.response.data.fileName : info.fileName;
|
||||
const url = parseDownloadUrl(info.response ? info.response.data.fileUrl : info.fileUrl);
|
||||
const fileName = info.response ? info.response.data.fileOrg : info.fileOrg;
|
||||
|
||||
downloadByUrl({ url, fileName });
|
||||
};
|
||||
|
||||
const handlePreview = async (file) => {
|
||||
const fileUrl = file.response?.data?.fileUrl || file.fileUrl;
|
||||
previewFile.value = getAppEnvConfig().VITE_GLOB_UPLOAD_PREVIEW + encodeURIComponent(Base64.encode(fileUrl.includes('http://') || fileUrl.includes('https://') ? fileUrl : getAppEnvConfig().VITE_GLOB_API_URL + fileUrl));
|
||||
const fileFullUrl = fileUrl.includes('http://') || fileUrl.includes('https://') ? fileUrl : location.origin + getAppEnvConfig().VITE_GLOB_API_URL + fileUrl;
|
||||
previewFile.value = getAppEnvConfig().VITE_GLOB_UPLOAD_PREVIEW + encodeURIComponent(Base64.encode(fileFullUrl));
|
||||
|
||||
previewVisible.value = true;
|
||||
previewTitle.value = file.name || file.fileName;
|
||||
previewTitle.value = file.name || file.fileOrg;
|
||||
|
||||
console.log(fileFullUrl);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
@ -195,8 +220,8 @@
|
||||
|
||||
function handleClear() {
|
||||
name.value = '';
|
||||
folderId.value = '';
|
||||
emit('update:value', folderId.value);
|
||||
tableId.value = '';
|
||||
emit('update:value', tableId.value);
|
||||
emit('change');
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -69,9 +69,9 @@
|
||||
<upload-outlined />
|
||||
点击上传
|
||||
</a-button>
|
||||
<!-- <div v-if="VITE_GLOB_UPLOAD_ALERT_TIP?.trim()" style="color: red; margin-top: 8px">
|
||||
<div v-if="VITE_GLOB_UPLOAD_ALERT_TIP?.trim()" style="color: red; margin-top: 8px">
|
||||
{{ VITE_GLOB_UPLOAD_ALERT_TIP }}
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #itemRender="{ file, actions }">
|
||||
@ -110,7 +110,7 @@
|
||||
import { Upload } from 'ant-design-vue';
|
||||
import { UploadOutlined, PlusOutlined, DownloadOutlined, DeleteOutlined, EditOutlined, PaperClipOutlined } from '@ant-design/icons-vue';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { deleteSingleFile, getAppToken, getFileList, getOnlineEditUrl, getZipFiles } from '/@/api/system/file';
|
||||
import { deleteFile, getAppToken, getFileList, getZipFiles,parseDownloadUrl } from '/@/api/system/file';
|
||||
import { downloadByUrl } from '/@/utils/file/download';
|
||||
import { uploadMultiApi } from '/@/api/sys/upload';
|
||||
import Icon from '/@/components/Icon/index';
|
||||
@ -124,8 +124,18 @@
|
||||
|
||||
const { createSuccessModal } = useMessage();
|
||||
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
value: String,
|
||||
tableName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
columnName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
maxNumber: Number,
|
||||
accept: String,
|
||||
name: String,
|
||||
@ -156,9 +166,24 @@
|
||||
const fileList = ref<any[]>([]);
|
||||
const list = ref<any[]>([]);
|
||||
const { notification } = useMessage();
|
||||
const folderId = ref<string>('');
|
||||
const tableId = ref<string>('');
|
||||
const tableName = ref<string>('');
|
||||
const columnName = ref<string>('');
|
||||
|
||||
const bindValues = (data:any)=>{
|
||||
if(data){
|
||||
tableId.value = data.tableId;
|
||||
tableName.value = data.tableName;
|
||||
columnName.value = data.columnName;
|
||||
}else{
|
||||
tableId.value = '';
|
||||
tableName.value = '';
|
||||
columnName.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
const deleteFlag = ref(false);
|
||||
const emit = defineEmits(['update:value', 'change', 'click']);
|
||||
const emit = defineEmits(['update:value', 'change', 'click', 'update:tableName', 'update:columnName']);
|
||||
const loading = ref(false);
|
||||
|
||||
const previewVisible = ref(false);
|
||||
@ -170,18 +195,18 @@
|
||||
() => props.value,
|
||||
async (val) => {
|
||||
if (val) {
|
||||
fileList.value = await getFileList({ folderId: props.value });
|
||||
fileList.value = await getFileList({ tableName: props.tableName, columnName: props.columnName,tableId: props.value });
|
||||
if (fileList.value.length) {
|
||||
fileList.value.forEach((x) => {
|
||||
x.name = x.fileName;
|
||||
x.name = x.fileOrg;
|
||||
x.url = x.fileUrl;
|
||||
x.thumbUrl = x.thUrl;
|
||||
x.status = 'done'; //没有则不会展示下载按钮
|
||||
});
|
||||
folderId.value = fileList.value[0].folderId;
|
||||
bindValues(fileList.value[0]);
|
||||
}
|
||||
} else {
|
||||
folderId.value = '';
|
||||
bindValues(undefined);
|
||||
}
|
||||
if (!val) {
|
||||
fileList.value = [];
|
||||
@ -206,9 +231,9 @@
|
||||
name: 'file',
|
||||
file: arr
|
||||
},
|
||||
folderId.value
|
||||
tableId.value, tableName.value, columnName.value
|
||||
);
|
||||
folderId.value = res[0].folderId;
|
||||
bindValues(res[0]);
|
||||
fileList.value.forEach((x) => {
|
||||
x.status = 'done'; //没有则不会展示下载按钮
|
||||
x.url = x.fileUrl;
|
||||
@ -216,8 +241,10 @@
|
||||
x.fileSize = x.fileSize
|
||||
});
|
||||
|
||||
emit('update:value', folderId.value);
|
||||
emit('change', fileList.value);
|
||||
emit('update:value', tableId.value);
|
||||
emit('update:tableName', tableName.value);
|
||||
emit('update:columnName', columnName.value);
|
||||
emit('change');
|
||||
loading.value = false;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
@ -255,34 +282,27 @@
|
||||
}
|
||||
const handleRemove = async (info) => {
|
||||
const id = info.response ? info.response.data.id : info.id;
|
||||
|
||||
const newFolderId = await deleteSingleFile(id);
|
||||
|
||||
folderId.value = newFolderId;
|
||||
|
||||
deleteFlag.value = true;
|
||||
|
||||
const index = fileList.value.findIndex((x) => x.id === id);
|
||||
fileList.value.splice(index, 1);
|
||||
|
||||
fileList.value.forEach((x) => {
|
||||
x.folderId = newFolderId;
|
||||
});
|
||||
|
||||
emit('update:value', folderId.value);
|
||||
emit('change');
|
||||
notification.success({
|
||||
message: 'Tip',
|
||||
description: '删除成功！'
|
||||
});
|
||||
const status = await deleteFile([id]);
|
||||
if (status) {
|
||||
deleteFlag.value = true;
|
||||
const index = fileList.value.findIndex((x) => x.id === id);
|
||||
fileList.value.splice(index, 1);
|
||||
notification.success({
|
||||
message: 'Tip',
|
||||
description: '删除成功！'
|
||||
});
|
||||
}else{
|
||||
notification.error({
|
||||
message: 'Tip',
|
||||
description: '删除失败！'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownload = (info) => {
|
||||
const url = info.response ? info.response.data.fileUrl : info.fileUrl;
|
||||
const fileName = info.response ? info.response.data.fileName : info.fileName;
|
||||
const fileType = info.response ? info.response.data.fileType : info.fileType;
|
||||
|
||||
downloadByUrl({ url, fileName: fileName + fileType });
|
||||
const url = parseDownloadUrl(info.response ? info.response.data.fileUrl : info.fileUrl);
|
||||
const fileName = info.response ? info.response.data.fileOrg : info.fileOrg;
|
||||
downloadByUrl({ url, fileName: fileName});
|
||||
};
|
||||
|
||||
const handleCancelWps = () => {
|
||||
@ -322,12 +342,13 @@
|
||||
|
||||
const handlePreview = async (file) => {
|
||||
const fileUrl = file.response?.data?.fileUrl || file.fileUrl;
|
||||
previewFile.value = getAppEnvConfig().VITE_GLOB_UPLOAD_PREVIEW + encodeURIComponent(Base64.encode(fileUrl.includes('http://') || fileUrl.includes('https://') ? fileUrl : getAppEnvConfig().VITE_GLOB_API_URL + fileUrl));
|
||||
const fileFullUrl = fileUrl.includes('http://') || fileUrl.includes('https://') ? fileUrl : location.origin + getAppEnvConfig().VITE_GLOB_API_URL + fileUrl;
|
||||
previewFile.value = getAppEnvConfig().VITE_GLOB_UPLOAD_PREVIEW + encodeURIComponent(Base64.encode(fileFullUrl));
|
||||
|
||||
previewVisible.value = true;
|
||||
previewTitle.value = file.name || file.fileName;
|
||||
previewTitle.value = file.name || file.fileOrg;
|
||||
|
||||
console.log(fileUrl.includes('http://') || fileUrl.includes('https://') ? fileUrl : getAppEnvConfig().VITE_GLOB_API_URL + fileUrl);
|
||||
console.log(fileFullUrl);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
@ -377,15 +398,9 @@
|
||||
createSuccessModal({ title: 'Tip', content: res.msg });
|
||||
return;
|
||||
} else if (res.type === 'synced') {
|
||||
downloadByUrl({ url: res.url, fileName: res.name || 'files.zip' });
|
||||
downloadByUrl({ url: parseDownloadUrl(res.url), fileName: res.name || 'files.zip' });
|
||||
}
|
||||
}
|
||||
function getValue () {
|
||||
return fileList.value
|
||||
}
|
||||
defineExpose({
|
||||
getValue
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.list-upload {
|
||||
|
||||
511
src/components/Form/src/components/UploadNew.vue
Normal file
511
src/components/Form/src/components/UploadNew.vue
Normal file
@ -0,0 +1,511 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="listType === 'dragger'">
|
||||
<a-upload-dragger
|
||||
:file-list="fileList"
|
||||
:maxCount="maxNumber"
|
||||
:accept="accept"
|
||||
:name="name"
|
||||
:disabled="disabled"
|
||||
:multiple="multiple"
|
||||
:beforeUpload="beforeUpload"
|
||||
listType="picture"
|
||||
:show-upload-list="{ showDownloadIcon, showPreviewIcon, showRemoveIcon }"
|
||||
@remove="handleRemove"
|
||||
@download="handleDownload"
|
||||
@preview="handlePreview"
|
||||
@drop="handleClick"
|
||||
@click="handleClick"
|
||||
class="list-upload dragger-upload"
|
||||
:style="style"
|
||||
>
|
||||
<div class="dragger-text">
|
||||
<Icon icon="ep:upload-filled" color="#5e95ff" :size="24" />
|
||||
<div class="mt-2 text-xs">点击或将文件拖拽到这里上传</div>
|
||||
</div>
|
||||
<div class="dragger-tip">{{ tip }}</div>
|
||||
</a-upload-dragger>
|
||||
</div>
|
||||
<div v-else-if="listType === 'picture'">
|
||||
<a-upload
|
||||
:file-list="fileList"
|
||||
:maxCount="maxNumber"
|
||||
:accept="accept"
|
||||
:name="name"
|
||||
:disabled="disabled"
|
||||
:multiple="multiple"
|
||||
:beforeUpload="beforeUpload"
|
||||
:listType="listType"
|
||||
:show-upload-list="{ showDownloadIcon, showPreviewIcon, showRemoveIcon }"
|
||||
@remove="handleRemove"
|
||||
@download="handleDownload"
|
||||
@preview="handlePreview"
|
||||
@click="handleClick"
|
||||
class="list-upload"
|
||||
:style="style"
|
||||
>
|
||||
<plus-outlined />
|
||||
</a-upload>
|
||||
</div>
|
||||
<a-upload
|
||||
:file-list="fileListWithHeader"
|
||||
:maxCount="maxNumber"
|
||||
:accept="accept"
|
||||
:name="name"
|
||||
:disabled="disabled"
|
||||
:multiple="multiple"
|
||||
:beforeUpload="beforeUpload"
|
||||
:listType="listType"
|
||||
:show-upload-list="showUploadList"
|
||||
@remove="handleRemove"
|
||||
@download="handleDownload"
|
||||
@preview="handlePreview"
|
||||
@click="handleClick"
|
||||
v-else
|
||||
>
|
||||
<plus-outlined v-if="listType == 'picture-card'" />
|
||||
<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 }}
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<template #itemRender="{ file, actions }">
|
||||
<template v-if="file.__header && showDownloadIcon">
|
||||
<!-- <div class="file-list-header" style="display: flex; align-items: center; padding: 4px 0">
|
||||
<input type="checkbox" :checked="isAllSelected" @change="toggleSelectAll" style="margin-right: 8px" />全选
|
||||
<a-button type="primary" size="small" :disabled="!selectedIds.length" @click="handleBatchDownload" style="margin-left: 8px">批量打包下载</a-button>
|
||||
</div> -->
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-space class="file-space">
|
||||
<!-- <input v-if="showDownloadIcon" type="checkbox" :checked="selectedIds.includes(file.id)" @change="(e) => toggleSelectOne(file.id, e)" style="margin-right: 8px" /> -->
|
||||
<PaperClipOutlined />
|
||||
<span class="file-name-span" @click="actions.preview">{{ file.name }}</span>
|
||||
<a-tooltip v-if="showDownloadIcon" title="下载">
|
||||
<span @click="actions.download" class="file-outlined-span"><DownloadOutlined /></span>
|
||||
</a-tooltip>
|
||||
<a-tooltip v-if="!disabled && showRemoveIcon" title="删除">
|
||||
<span @click="actions.remove" class="file-outlined-span"><DeleteOutlined /></span>
|
||||
</a-tooltip>
|
||||
<!-- <a-tooltip v-if="'.doc,.docx,.xls,.xlsx,.pdf'.includes(file.fileType)" title="编辑文档">
|
||||
<span @click="editFile(file)" class="file-outlined-span"><EditOutlined /></span>
|
||||
</a-tooltip> -->
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-upload>
|
||||
<a-modal :bodyStyle="bodyStyle" :width="800" :visible="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel"> <iframe v-if="previewVisible" :src="previewFile" class="iframe-box"></iframe>; </a-modal>
|
||||
<a-modal wrap-class-name="full-modal" width="100%" :visible="wpsPreviewVisible" :title="previewTitle" :footer="null" @cancel="handleCancelWps">
|
||||
<div v-if="wpsPreviewVisible" id="office-container"></div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { nextTick, ref, watch, computed } from 'vue';
|
||||
import { Upload } from 'ant-design-vue';
|
||||
import { UploadOutlined, PlusOutlined, DownloadOutlined, DeleteOutlined, EditOutlined, PaperClipOutlined } from '@ant-design/icons-vue';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { deleteSingleFile, getAppToken, getFileList, parseDownloadUrl, getZipFiles } from '/@/api/system/file';
|
||||
import { downloadByUrl } from '/@/utils/file/download';
|
||||
import { uploadMultiApi } from '/@/api/sys/upload';
|
||||
import Icon from '/@/components/Icon/index';
|
||||
import { Base64 } from 'js-base64';
|
||||
import { getAppEnvConfig } from '/@/utils/env';
|
||||
import WebOfficeSDK from '/@/assets/libs/open-jssdk-v0.1.3.es.js';
|
||||
import { getToken } from '/@/utils/auth';
|
||||
import { useRoute } from 'vue-router';
|
||||
const route = useRoute();
|
||||
const { VITE_GLOB_UPLOAD_ALERT_TIP } = getAppEnvConfig();
|
||||
|
||||
const { createSuccessModal } = useMessage();
|
||||
|
||||
const props = defineProps({
|
||||
value: String,
|
||||
tableName: String,
|
||||
columnName: String,
|
||||
maxNumber: Number,
|
||||
accept: String,
|
||||
name: String,
|
||||
disabled: Boolean,
|
||||
multiple: Boolean,
|
||||
maxSize: Number,
|
||||
api: Function,
|
||||
style: Object,
|
||||
listType: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
tip: String,
|
||||
showPreviewIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showRemoveIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showDownloadIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showUploadList: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
fileList: Array,
|
||||
btnTip: String
|
||||
});
|
||||
|
||||
const fileList = ref<any[]>([]);
|
||||
const list = ref<any[]>([]);
|
||||
const { notification } = useMessage();
|
||||
const tableId = ref<string>('');
|
||||
const tableName = ref<string>('');
|
||||
const columnName = ref<string>('');
|
||||
|
||||
const bindValues = (data:any)=>{
|
||||
if(data){
|
||||
tableId.value = data.tableId;
|
||||
tableName.value = data.tableName;
|
||||
columnName.value = data.columnName;
|
||||
}else{
|
||||
tableId.value = '';
|
||||
tableName.value = '';
|
||||
columnName.value = '';
|
||||
}
|
||||
}
|
||||
const deleteFlag = ref(false);
|
||||
const emit = defineEmits(['update:value', 'change', 'click','update:tableName', 'update:columnName']);
|
||||
const loading = ref(false);
|
||||
|
||||
const previewVisible = ref(false);
|
||||
const wpsPreviewVisible = ref(false);
|
||||
const previewFile = ref('');
|
||||
const previewTitle = ref('');
|
||||
watch(
|
||||
() => props.fileList,
|
||||
async (val) => {
|
||||
console.log(val, 43)
|
||||
if (val) {
|
||||
fileList.value = props.fileList
|
||||
if (fileList.value.length) {
|
||||
fileList.value.forEach((x) => {
|
||||
x.name = x.fileName || x.fileOrg;
|
||||
x.url = x.fileUrl || x.filePath;
|
||||
x.thumbUrl = x.thUrl || x.filePath;
|
||||
x.status = 'done'; //没有则不会展示下载按钮
|
||||
x.fileType =x.fileType || ('.' + x.filePath.split('?')[0]?.split('.')?.pop())
|
||||
});
|
||||
}
|
||||
bindValues(fileList.value[0]);
|
||||
} else {
|
||||
bindValues(undefined);
|
||||
}
|
||||
if (!val) {
|
||||
fileList.value = [];
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => props.value,
|
||||
async (val) => {
|
||||
if (val) {
|
||||
fileList.value = await getFileList({tableName: props.tableName, columnName: props.columnName,tableId: props.value});
|
||||
if (fileList.value.length) {
|
||||
fileList.value.forEach((x) => {
|
||||
x.name = x.fileName;
|
||||
x.url = x.fileUrl;
|
||||
x.thumbUrl = x.thUrl;
|
||||
x.status = 'done'; //没有则不会展示下载按钮
|
||||
});
|
||||
}
|
||||
bindValues(fileList.value[0]);
|
||||
} else {
|
||||
bindValues(undefined);
|
||||
}
|
||||
if (!val) {
|
||||
fileList.value = [];
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => list.value,
|
||||
async (val) => {
|
||||
if (deleteFlag.value) return;
|
||||
if (val.length) {
|
||||
let arr: any[] = val.filter((o) => {
|
||||
return !o.status;
|
||||
});
|
||||
if (arr.length <= 0) return;
|
||||
try {
|
||||
let res = await uploadMultiApi(
|
||||
{
|
||||
name: 'file',
|
||||
file: arr
|
||||
},
|
||||
tableId.value, tableName.value, columnName.value
|
||||
);
|
||||
let fileArr = res||[]
|
||||
fileArr.forEach((x) => {
|
||||
x.status = 'done'; //没有则不会展示下载按钮
|
||||
x.url = x.fileUrl;
|
||||
x.thumbUrl = x.thUrl;
|
||||
x.fileSize = x.fileSize
|
||||
});
|
||||
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');
|
||||
loading.value = false;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const bodyStyle = { height: '500px' };
|
||||
|
||||
const beforeUpload = (file) => {
|
||||
if (props.maxSize && file.size / 1024 / 1024 > props.maxSize) {
|
||||
notification.error({
|
||||
message: 'Tip',
|
||||
description: `文件大小不能超过${props.maxSize}MB！`
|
||||
});
|
||||
return false || Upload.LIST_IGNORE;
|
||||
}
|
||||
if (props.maxNumber && fileList.value.length + list.value.length === props.maxNumber!) {
|
||||
notification.error({
|
||||
message: 'Tip',
|
||||
description: `文件数量不能超过${props.maxNumber}个！`
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
list.value = [...list.value, file];
|
||||
deleteFlag.value = false;
|
||||
loading.value = true;
|
||||
return Upload.LIST_IGNORE;
|
||||
};
|
||||
function handleClick() {
|
||||
list.value = [];
|
||||
}
|
||||
const handleRemove = async (info) => {
|
||||
const id = info.response ? info.response.data.id : info.id;
|
||||
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: '删除成功！'
|
||||
});
|
||||
};
|
||||
|
||||
const handleDownload = (info) => {
|
||||
console.log(info, 434)
|
||||
const url = parseDownloadUrl(info.response ? info.response.data.fileUrl : (info.presignedUrl || info.fileUrl));
|
||||
const fileName = info.response ? info.response.data.fileOrg : info.fileOrg;
|
||||
downloadByUrl({ url, fileName: fileName });
|
||||
};
|
||||
|
||||
const handleCancelWps = () => {
|
||||
wpsPreviewVisible.value = false;
|
||||
previewTitle.value = '';
|
||||
};
|
||||
|
||||
const refreshToken = async () => {
|
||||
return getToken();
|
||||
};
|
||||
|
||||
const editFile = async (file) => {
|
||||
wpsPreviewVisible.value = true;
|
||||
previewTitle.value = file.name || file.fileName;
|
||||
let appToken = await getAppToken({ _w_fileid: file.id });
|
||||
let containerNode = document.getElementById('office-container');
|
||||
containerNode.style.height = 'calc(100vh - 50px)';
|
||||
containerNode.style.width = '100%';
|
||||
let webOfficeSdk = WebOfficeSDK.config({
|
||||
mount: containerNode,
|
||||
url: appToken.wpsUrl + '&_w_tokentype=1',
|
||||
refreshToken: refreshToken
|
||||
});
|
||||
webOfficeSdk.setToken({
|
||||
token: appToken.token,
|
||||
timeout: 10 * 60 * 1000
|
||||
});
|
||||
|
||||
/*await webOfficeSdk.ready();
|
||||
const app = webOfficeSdk.Application;
|
||||
// 获取总页数
|
||||
const totalPages = await app.ActiveDocument.Range.Information(
|
||||
app.Enum.WdInformation.wdNumberOfPagesInDocument
|
||||
);
|
||||
console.log("总页数为：", totalPages);*/
|
||||
};
|
||||
|
||||
const handlePreview = async (file) => {
|
||||
const fileUrl = file.presignedUrl|| file.response?.data?.fileUrl || file.fileUrl;
|
||||
console.log(fileUrl, 'fileUrl', file)
|
||||
window.open(fileUrl)
|
||||
|
||||
// previewFile.value = getAppEnvConfig().VITE_GLOB_UPLOAD_PREVIEW + encodeURIComponent(Base64.encode(fileUrl.includes('http://') || fileUrl.includes('https://') ? fileUrl : getAppEnvConfig().VITE_GLOB_API_URL + fileUrl));
|
||||
|
||||
// previewVisible.value = true;
|
||||
// previewTitle.value = file.name || file.fileName;
|
||||
// console.log(previewFile.value, 99)
|
||||
// console.log(fileUrl.includes('http://') || fileUrl.includes('https://') ? fileUrl : getAppEnvConfig().VITE_GLOB_API_URL + fileUrl);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
previewVisible.value = false;
|
||||
previewTitle.value = '';
|
||||
};
|
||||
|
||||
const selectedIds = ref<string[]>([]);
|
||||
const isAllSelected = computed(() => fileList.value.length > 0 && selectedIds.value.length === fileList.value.length);
|
||||
const fileListWithHeader = computed(() => {
|
||||
// 只在有文件时插入头部
|
||||
if (fileList.value.length) {
|
||||
return [{ __header: true, uid: '__header__' }, ...fileList.value];
|
||||
}
|
||||
return fileList.value;
|
||||
});
|
||||
function toggleSelectAll(e: Event) {
|
||||
const checked = (e.target as HTMLInputElement).checked;
|
||||
selectedIds.value = checked ? fileList.value.map((f) => f.id) : [];
|
||||
}
|
||||
function toggleSelectOne(id: string, e: Event) {
|
||||
const checked = (e.target as HTMLInputElement).checked;
|
||||
if (checked) {
|
||||
selectedIds.value = [...selectedIds.value, id];
|
||||
} else {
|
||||
selectedIds.value = selectedIds.value.filter((item) => item !== id);
|
||||
}
|
||||
}
|
||||
async function handleBatchDownload() {
|
||||
if (!selectedIds.value.length) return;
|
||||
// getZipFiles 返回下载url
|
||||
let formName = '';
|
||||
try {
|
||||
formName = (route.query.formName as string) || '';
|
||||
// 获取当前页面得form name
|
||||
} catch (error) {
|
||||
console.warn(error);
|
||||
}
|
||||
const res = await getZipFiles({ fileIds: selectedIds.value.join(','), insertionFileName: formName });
|
||||
if (!res) {
|
||||
notification.error({
|
||||
message: 'Tip',
|
||||
description: '批量下载失败，请稍后重试！'
|
||||
});
|
||||
return;
|
||||
} else if (res.type === 'async') {
|
||||
createSuccessModal({ title: 'Tip', content: res.msg });
|
||||
return;
|
||||
} else if (res.type === 'synced') {
|
||||
downloadByUrl({ url: res.url, fileName: res.name || 'files.zip' });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.list-upload {
|
||||
:deep(.ant-upload) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
background: #fafafa;
|
||||
border: 1px dashed #d9d9d9;
|
||||
}
|
||||
|
||||
:deep(.anticon-plus) {
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.dragger-tip {
|
||||
background: rgb(0 0 0 / 60%);
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
display: none;
|
||||
padding: 8px 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dragger-text {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
&:hover .dragger-tip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover .dragger-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-upload) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.iframe-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.file-name-span {
|
||||
margin-right: 16px;
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-outlined-span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-space:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.file-space {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.full-modal {
|
||||
.ant-modal {
|
||||
max-width: 100%;
|
||||
top: 0;
|
||||
padding-bottom: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.ant-modal-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh);
|
||||
}
|
||||
.ant-modal-body {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user