前端发送请求获取后端文件，并且前端实现下载文件功能
<template>
<div class="mainBox">
<!-- 仿冒日志 -->
<el-card shadow="always" :style="'height:100%;overflow:auto;'">
<div class="centerLeftBox">
<search-form
ref="searchForm_Board"
@reset="reset_Board"
@handleSubmit="handleSubmitSearch_Board"
:formData="formData_Board"
:isInline="true"
:searchConfig="searchConfig_Board"
>
</search-form>
</div>
</el-card>
<div style="height:10px;"></div>
<el-card>
<commonTable
:tableHead="tableHead_Board"
:tableData="tableData_Board"
:selectionFlag="true"
:toolBoxFlag="true"
:resizable="true"
:dataFiter="true"
:xuhaoFlag="false"
:dropdownList="dropdownList"
@selectAction="selectAction"
:addBtn="false"
:tableLoading="tableLoading_Board"
:showListD="showListD_Board"
:maxHeight="'458'"
:freeElfFlag="false"
:rightBtnList="rightBtnList"
ref="commonTable"
>
<template slot-scope="scope" slot="freeElf">
<!-- <el-button
size="mini"
type="text"
@click="goFakeLog()"
v-authbuttons:[otherAuth]
>仿冒日志</el-button
> -->
</template>
</commonTable>
<div style="height:10px;"></div>
<el-pagination
class="tac page-style"
background
@size-change="BoardChangeSize"
@current-change="BoardCurrentChange"
:current-page.sync=""
:page-sizes="[10, 20, 30, 40, 50]"
:page-size.sync="BoardPageObj.page_size"
:current.sync=""
layout="total, sizes, prev, pager, next, jumper"
:total=""
:style="'text-align:left;'"
></el-pagination>
</el-card>
<el-dialog
title="处理仿冒"
center
:visible.sync="isShowModal"
@close="closeModal"
:show-close="true"
:close-on-click-modal="false"
:width="'800px'"
>
<fake-edit
v-if="isShowModal"
ref="fakeEdit"
:formData="FakeObj"
:newValue="newValue"
@closeFake="closeFake"
/>
<div slot="footer" class="dialog-footer">
<el-button @click="isShowModal = false">取 消</el-button>
<el-button type="primary" :loading="saveLoading" @click="editOk"
>处 理</el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
import searchForm from "@/components/search-form";
import commonTable from "@/components/common-table";
import { getFakelogList } from "@/api/";
import { getBoardFakeCommonData } from "@/api/";
import localDownloadUtil from "@/utils/";
import { getToken } from "@/utils/auth";
import axios from "axios";
export default {
name: "PendingProcessing",
components: {
commonTable,
searchForm
},
data() {
return {
formData_Board: {},
searchConfig_Board: [
{
type: "select",
label: "操作类型",
props: "log_pd_result",
labelWidth: 95,
options: [],
changeSearch: true,
changeSearch: true,
defaultPropsLabel: "val",
defaultPropsValue: "key"
},
{ type: "input", label: "设备IP", props: "ip", labelWidth: 95 },
{ type: "input", label: "设备MAC", props: "old", labelWidth: 95 },
{
type: "input",
label: "当前MAC",
props: "new",
labelWidth: 95
},
{
type: "timeBox",
label: "时间范围",
props: "time"
},
{ type: "btnList" }
],
tableHead_Board: [
{
label: "设备IP",
prop: "ip",
type: "normal",
sortable: false
},
{ label: "设备MAC", prop: "old", type: "normal", sortable: false },
{
label: "仿冒原因",
prop: "cause_str",
type: "normal",
sortable: false
},
{
label: "当前MAC",
prop: "new",
type: "normal",
sortable: false
},
{
label: "操作人账户",
prop: "user_name",
type: "normal",
sortable: false
},
{
label: "操作类型",
prop: "pd_result_str",
type: "normal",
sortable: false
},
{
label: "更新时间",
prop: "c_time",
type: "normal",
sortable: false
}
],
tableData_Board: [],
tableLoading_Board: false,
showListD_Board: [
"ip",
"old",
"cause_str",
"new",
"user_name",
"c_time",
"pd_result_str"
],
BoardPageObj: {
page: 1,
page_size: 10,
total: 0
},
editAuth: "update,FakeManage",
otherAuth: "others,FakeManage",
FakeObj: {},
isShowModal: false,
saveLoading: false,
newValue: "",
dropdownList: [
// {actionName:'fileAction',label:'归档',iconClass:'el-icon-s-cooperation',actionConfirm:'是否确定归档这些数据'},
// {actionName:'deleteAction',label:'删除',iconClass:'el-icon-delete',actionConfirm:'是否确定删除这些数据'},
{
actionName: "downLoadBatch",
label: "批量导出",
type: "primary",
iconClass: "el-icon-download",
actionConfirm: "是否确定导出这些数据"
}
// {
// actionName: "editGroup",
// label: "移动分组",
// type: "primary",
// iconClass: "el-icon-s-cooperation",
// actionConfirm: "是否确定移动这些数据",
// flag: true,
// },
// {actionName:'editGroupHigh',label:'高级分组',type:'primary',iconClass:'el-icon-s-grid',actionConfirm:'', flagEx: true,},
],
rightBtnList: [
{
actionName: "downAll",
label: "一键导出",
type: "primary",
iconClass: "el-icon-download",
actionConfirm: "",
flagEx: true
}
]
};
},
created() {
this.formData_Board.ip = this.$route.query.fakeIp;
this.handleSubmit_Board({}, true);
this.getCommonData();
},
methods: {
// 每页显示数变动
BoardChangeSize(pageSize) {
// ("条数", pageSize);
this.BoardPageObj.page_size = pageSize;
this.handleSubmit_Board({}, true);
},
BoardCurrentChange(page) {
// ("当前页", page);
this.BoardPageObj.page = page;
this.handleSubmit_Board({}, false);
},
// 获取交换机列表数据
handleSubmit_Board(data, flag) {
if (flag) {
this.BoardPageObj.page = 1;
}
let dataT = JSON.parse(JSON.stringify(this.formData_Board));
dataT.page = this.BoardPageObj.page;
dataT.page_size = this.BoardPageObj.page_size;
if (dataT.time && dataT.time.length > 0) {
dataT.start_time = dataT.time[0];
dataT.end_time = dataT.time[1];
delete dataT.time;
}
this.tableLoading_Board = true;
getFakelogList(dataT)
.then(res => {
this.tableData_Board = res.data.list;
this.BoardPageObj.total = res.data.total;
this.tableLoading_Board = false;
})
.catch(err => {});
},
// 重置筛选项
reset_Board() {
this.formData_Board = {};
this.handleSubmit_Board({}, true);
},
handleSubmitSearch_Board(data) {
this.handleSubmit_Board(data, true);
},
editData(item) {
this.isShowModal = true;
this.newValue = item.new;
this.FakeObj = {
...item,
process_type: "1"
};
},
closeModal() {
this.isShowModal = false;
},
closeFake() {
this.isShowModal = false;
this.reset_Board();
},
editOk() {
this.$nextTick(() => {
this.$refs.fakeEdit.submit();
});
},
// 数据批量操作,判断和提示都已经做好了
selectAction(data) {
var idList = [];
var idString = "";
for (let index = 0; index < data.data.length; index++) {
const element = data.data[index];
idList.push(element.id);
idString = idString + element.id;
if (index + 1 !== data.data.length) {
idString = idString + ",";
}
}
var dataT = { ids: idString };
var that = this;
if (data.name === "fileAction") {
// 归档
// assetsdevinfofiling(dataT).then((res) => {
// that.$message({ message: "归档成功", type: "success" });
// ({});
// });
} else if (data.name === "deleteAction") {
// if ( <= 1) {
// assetsListDelete().then((res) => {
// that.$message({ message: "删除成功", type: "success" });
// ({});
// });
// } else {
// multipleDelete().then((res) => {
// that.$message({ message: "删除成功", type: "success" });
// ({});
// });
// }
} else if (data.name === "editGroup") {
// var showListFenzu = [];
// for (let index = 0; index < ; index++) {
// const element = [index];
// ();
// }
// = showListFenzu;
// = "设置资产分组";
// = true;
} else if (data.name === "downLoadBatch") {
// dataT.id_ls = (idList);
dataT.filename = "仿冒文件";
dataT.pending_flag = "1";
dataT.ip = that.formData_Board.ip ? that.formData_Board.ip : "";
dataT.old = that.formData_Board.old ? that.formData_Board.old : "";
dataT.new = that.formData_Board.new ? that.formData_Board.new : "";
dataT.pd_result = "";
this.tableLoading_Board = true;
let datatFormdata = new FormData();
for (var key in dataT) {
datatFormdata.append(`${key}`, dataT[key]);
}
axios({
url: `${window.g.API_URL}/counterfeits/log/export/`,
method: "post",
data: datatFormdata,
headers: {
"Content-Type": "multipart/form-data",
Authorization: "Bearer " + getToken()
}
})
.then(res => {
// ("导出", res);
if (res.data.code == 200) {
let filename = res.data.data;
window.open(`${window.g.API_URL}/media/${filename}`);
this.$message.success("批量导出成功", 4000);
this.$nextTick(() => {
this.$refs.commonTable.resetSelect();
this.$refs.commonTable.clearSelection();
});
this.tableLoading_Board = false;
}
})
.catch(err => {});
} else if (data.name === "downAll") {
this.tableLoading_Board = true;
let query = {
filename: "仿冒文件",
ids: "all"
};
let queryFormdata = new FormData();
for (var k in query) {
queryFormdata.append(`${k}`, query[k]);
}
axios({
url: `${window.g.API_URL}/counterfeits/log/export/`,
method: "post",
data: queryFormdata,
headers: {
"Content-Type": "multipart/form-data",
Authorization: "Bearer " + getToken()
}
})
.then(res => {
// ("导出", res);
if (res.data.code == 200) {
let filename = res.data.data;
window.open(`${window.g.API_URL}/media/${filename}`);
this.$message.success("一键导出成功", 4000);
this.$nextTick(() => {
this.$refs.commonTable.resetSelect();
this.$refs.commonTable.clearSelection();
});
this.tableLoading_Board = false;
}
})
.catch(err => {});
}
},
goFakeLog(item) {
this.$router.push({
path: "FakeLog",
query: {
fakeIp: item.ip
}
});
},
//获取公共数据
getCommonData() {
getBoardFakeCommonData()
.then(res => {
// ("获取公共数据", res);
this.$nextTick(() => {
this.searchConfig_Board[0].options = res.data.log_pd_result;
});
})
.catch(err => {});
}
}
};
</script>