一、导出
接口封装
static downloadPost(url: string, body: any,name: string) {
return request({
method: 'post',
url:url,
data: body || {},
responseType: 'blob'
}).then((res: any) => {
if (!res) {
message.error('导出失败')
return
}
console.log('res:',res)
let url = window.URL.createObjectURL(new Blob([res], {type: 'application/vnd.ms-excel'}))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
if(!name || typeof name != "string"){
name = "导出文件"
}
link.setAttribute('download', name + '.xls')
document.body.appendChild(link)
link.click()
document.body.removeChild(link); //下载完成移除元素
window.URL.revokeObjectURL(url); //释放掉blob对象
})
}
页面调用接口
// 导出
const getExport = (): void => {
loading.value = true;
Http.downloadPost("/scmp-eosat-svc/v1/vendor/alis/product/export",
{ ...params },
`外包异常联络单产品批次${props.alisCode}`)
.then(() => {})
.finally(() => {
loading.value = false;
});
}
二、导入
<a-button type="primary" @click="visible = true" :loading="loading">
<upload-outlined />
上传
</a-button>
<a-modal v-model:visible="visible" centered title="附件上传" @ok="getUpload">
<a-upload-dragger
v-model::file-list="fileUrl"
action="/cnap-assistant-svc/v1/file/upload"
:headers="headers"
:max-count="1"
:data="{ filePath: 'iwork/admin', bucketName: 'file-system-static-bucket' }"
@change="handleChange"
>
<p class="ant-upload-drag-icon">
<CloudUploadOutlined />
</p>
<p class="ant-upload-text">将文件拖拽到此处上传</p>
</a-upload-dragger>
</a-modal>
<script lang="ts" setup>
import { PlusOutlined, ExclamationCircleOutlined, CloudUploadOutlined, UploadOutlined } from '@ant-design/icons-vue';
import { Modal, message } from 'ant-design-vue';
const userStore = useUserStore();
const headers = { 'X-Access-Token': userStore.getToken, appId: AppGlobal.appId };
const visible = ref<boolean>(false);
const fileUrl = ref('');
const attachmentInfoList = ref<Array>([])
const loading = ref<boolean>(false);
// 上传
const handleChange = (info) => {
if (info.file.status !== 'uploading') {
// console.log(info.file.response.data, "info.fileList");
// 单个文件
fileUrl.value = info.file.response.data;
// 多个文件
// fileList.value = info.fileList.map(e => e.response.data);
}
if (info.file.status === 'done') {
message.success(`${info.file.name} 文件上传成功`);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} 文件上传失败`);
}
};
const getUpload = async(): void => {
await abnormalOtherDetails.createAppendix({
fileUrl: fileUrl.value,
}).then((res) => {
// 列表
attachmentInfoList.value = res?.data || [];
})
.finally(() => visible.value = false );
// 刷新列表
getList()
};
</script>