朱兆平 / vue_cli · 提交

转到一个项目

作者 唐俊升
提交 89451443f23b39aababc2696842618f2501413ed 1 个父辈 1f43944b

制单->新增导入计划表、导出word、批量导出excel按钮

内嵌 并排对比
正在显示 2 个修改的文件 包含 111 行增加 和 2 行删除
... ... @@ -6,8 +6,14 @@ let baseUrl = 'zhidan-service'
export const extPdf = params => { return http.getPDF(`${baseUrl}/zhidan/extpdf`, params); };
//excel导出
export const extExcel = params => { return http.getPDF(`${baseUrl}/zhidan/extexcel`, params); };
// excel批量导出
export const batchExtExcel = params => { return http.getPDF(`${baseUrl}/zhidan/batchExtExcel`, params); };
// docx导出
export const extDocx = params => { return http.getPDF(`${baseUrl}/zhidan/extdocx`, params); };
//导入excel
export const importExcel = params => { return http.postExcelData(`${baseUrl}/zhidan/importexcel`, params); };
// 导入计划表
export const importPlanExcel = params => { return http.postExcelData(`${baseUrl}/zhidan/importPlanExcel`, params); };
//查询列表
export const selectLists = params => { return axios.get(`${baseUrl}/zhidan/selectLists`, { params: params }); };
... ...
... ... @@ -29,13 +29,29 @@
<el-button size="medium" type="success">导入数据</el-button>
</el-upload>
</el-col>
<el-col :span="2">
<el-upload
class="upload-demo"
action=""
:before-upload="beforeUpload"
:http-request="importPlanExcel"
:show-file-list="false">
<el-button size="medium" type="success">导入计划表</el-button>
</el-upload>
</el-col>
<el-col :span="2">
<el-button size="medium" @click="batchExtExcel" type="success" round>批量导出excel</el-button>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-table
:data="tableData"
border
style="width: 100%">
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column
prop="waybill"
label="运单号"
... ... @@ -88,6 +104,7 @@
<template slot-scope="scope">
<el-button @click="handlePdf(scope.row)" type="text" size="small">下载PDF</el-button>
<el-button @click="handleExcel(scope.row)" type="text" size="small">下载EXCEL</el-button>
<el-button @click="handleDocx(scope.row)" type="text" size="small">下载DOCX</el-button>
</template>
</el-table-column>
</el-table>
... ... @@ -108,7 +125,7 @@
</div>
</template>
<script>
import {selectLists,extPdf,extExcel,importExcel} from "../../api/zhidan/zhidan";
import {selectLists,extPdf,extExcel,batchExtExcel,extDocx,importExcel,importPlanExcel} from "../../api/zhidan/zhidan";
export default {
data(){
... ... @@ -152,6 +169,7 @@
value2:'',
tableData: [],
total:0,
selectedRows: []
}
},
mounted() {
... ... @@ -187,6 +205,25 @@
onError(error); // 调用 onError 回调通知上传失败
})
},
// 导入计划表
importPlanExcel({file, onSuccess, onError}){
// 生成 FormData 对象
const formData = new FormData();
formData.append('file', file);
importPlanExcel(formData).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error(res.msg);
}
this.$message.success(res.msg);
this.getList();
onSuccess(response.data); // 调用 onSuccess 回调通知上传成功
}).catch(error => {
// 关闭加载
this.$message.error(error.toString())
onError(error); // 调用 onError 回调通知上传失败
})
},
getList(){
if(this.value2 !== null && this.value2 !== ""){
this.query.starttime=this.value2[0];
... ... @@ -252,6 +289,68 @@
console.error('Error downloading Excel:', error);
});
},
handleDocx(row){
extDocx({id: row.id}).then(response => {
// 创建一个 Blob 对象
const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
// 创建一个隐藏的可下载链接
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = row.waybill + '.docx'; // 设置下载文件名
// 将链接添加到 DOM 中
document.body.appendChild(link);
// 触发下载
link.click();
// 移除链接
document.body.removeChild(link);
}).catch(error => {
console.error('Error downloading DOCX:', error);
});
},
batchExtExcel(){
if(this.selectedRows.length === 0){
this.$message.error('请选择需要批量导出的数据')
return
}
const ids = this.selectedRows.map(item => item.id)
const idsString = ids.join(',');
console.log(idsString)
batchExtExcel({ids: idsString}).then(response => {
if (!response || !response.data) {
console.error('Response data is empty or not a Blob.');
return;
}
const blob = new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
const tempFile = URL.createObjectURL(blob);
fetch(tempFile)
.then(res => res.blob())
.then(blob => {
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 主单excel +'.xlsx');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
})
.catch(error => {
console.error('Error creating temporary file:', error);
});
window.URL.revokeObjectURL(tempFile);
}).catch(error => {
console.error('Error downloading Excel:', error);
});
},
handleSizeChange(val) {
this.query.pageSize=val;
this.getList();
... ... @@ -259,6 +358,10 @@
handleCurrentChange(val) {
this.query.pageNum=val;
this.getList();
},
//多选
handleSelectionChange(selection) {
this.selectedRows = selection;
}
}
}
... ...