1. avue做导出Excel功能
1.1 vue文件
// 静态页面
<template>
<div>
<template
slot="menuLeft"
slot-scope="scope">
<el-button
icon="el-icon-download"
type="menu"
size="primary"
@click="exportExcel"
:loading="loading.exportLoading"
>导出
</el-button>
</template>
</div>
</template>
<script>
// 格式化日期对象
const getNowDate = () => {
var date = new Date();
var sign2 = ":";
var year = date.getFullYear() // 年
var month = date.getMonth() + 1; // 月
var day = date.getDate(); // 日
var hour = date.getHours(); // 时
var minutes = date.getMinutes(); // 分
var seconds = date.getSeconds() //秒
var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
var week = weekArr[date.getDay()];
// 给一位数的数据前面加 “0”
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (day >= 0 && day <= 9) {
day = "0" + day;
}
if (hour >= 0 && hour <= 9) {
hour = "0" + hour;
}
if (minutes >= 0 && minutes <= 9) {
minutes = "0" + minutes;
}
if (seconds >= 0 && seconds <= 9) {
seconds = "0" + seconds;
}
return year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds;
}
export default {
name: 'logs',
data() {
return {
searchForm: {},
tableData: [],
page: {
total: 0, // 总页数
currentPage: 1, // 当前页数
pageSize: 20 // 每页显示多少条
},
tableLoading: false,
tableOption: tableOption,
excelData: '',
loading:{
exportLoading:false
},
selectContent: {
checkData: []
}
}
},
computed: {
...mapGetters(['permissions']),
},
methods: {
getList(page, params) {
this.tableLoading = true
fetchList(Object.assign({
current: page.currentPage,
size: page.pageSize
}, params, this.searchForm)).then(response => {
this.tableData = response.data.records
this.page.total = response.data.total
this.tableLoading = false
}).catch(() => {
this.tableLoading = false
})
},
sizeChange(pageSize) {
this.page.pageSize = pageSize
},
currentChange(current) {
this.page.currentPage = current
},
searchChange(form, done) {
this.searchForm = form
this.getList(this.page, form)
done()
},
refreshChange() {
this.getList(this.page)
},
// 导出
exportExcel(){
this.loading.exportLoading = true
if (this.isEmpty(this.selectContent.checkData)){
findExcel(this.searchForm).then(res =>{
// this.excelData =
this.handleExcel(res.data)
})
} else {
this.handleExcel(this.selectContent.checkData).then(() =>{
this.selectContent.checkData.clear()
})
}
},
handleExcel(exportData) {
let opt = {
title: "日志(" + getNowDate() + ")",
column: [{
"label": "来源系统",
"prop": "serviceSource"
}, {
"label": "主键",
"prop": "id"
}, {
"label": "接口编码",
"prop": "serviceCode",
}, {
"label": "接口名称",
"prop": "serviceName",
}, {
"label": "说明",
"prop": "description"
}, {
"label": "批次",
"prop": "batchId"
}, {
"label": "ESB标识",
"prop": "esbFlag"
}, {
"label": "ESB返回代码",
"prop": "esbReturnCode"
}, {
"label": "系统返回消息",
"prop": "esbReturnMessage"
}, {
"label": "业务服务执行标识",
"prop": "bizServiceFlag"
}, {
"label": "业务服务返回代码",
"prop": "bizReturnCode"
}, {
"label": "业务服务返回消息",
"prop": "bizReturnMessage"
}, {
"label": "实例ID",
"prop": "instanceId"
}, {
"label": "总记录数",
"prop": "totalRecord"
}, {
"label": "总页数",
"prop": "totalPage"
}, {
"label": "页面大小",
"prop": "pageSize"
}, {
"label": "当前页",
"prop": "currentPage"
}, {
"label": "是否",
"prop": "statusCode"
}, {
"label": "错误信息",
"prop": "errorMessage",
}, {
"label": "创建人ID",
"prop": "createId"
}, {
"label": "创建人",
"prop": "createName"
}, {
"label": "创建时间",
"prop": "createTime"
}, {
"label": "更新人ID",
"prop": "updateId"
}, {
"label": "更新人",
"prop": "updateName"
}, {
"label": "更新时间",
"prop": "updateTime"
}, {
"label": "操作来源(手动/自动)",
"prop": "source"
} ],
data: exportData,
}
$Excel.excel({
title: opt.title,
columns: opt.column,
data: opt.data
});
this.loading.exportLoading = false
},
selectionChange(list){
this.selectContent.checkData = list
}
}
}
</script>
1.2 const下的js文件
export const tableOption = {
title: "日志列表",
"border": true,
"index": true,
"indexLabel": "序号",
"stripe": true,
"menuAlign": "center",
"align": "center",
"searchMenuSpan": 6,
queryBox: true,
viewBtn:true,
selection:true,
addBtn: false,
editBtn: false,
delBtn: false,
calcHeight: 15,
"column": [
{
"type": "select",
"label": "来源系统",
"prop": "serviceSource",
search: true,
dicUrl: '/admin/dict/type/abu_interface_sysname'
},{
"type": "input",
"label": "主键",
"prop": "id",
hide: true
}, {
type: 'input',
"label": '服务编码',
"prop": 'serviceCode',
search: true,
cell: true,
slot: true
}, {
"type": "input",
"label": "服务中文名称",
"prop": "description"
}, {
"type": "input",
"label": "服务英文名",
"prop": "serviceName",
"searchLabel": "服务名称",
search: true
},{
"type": "input",
"label": "批次",
"prop": "batchId",
hide: true
}, {
"type": "input",
"label": "ESB标识",
"prop": "esbFlag"
}, {
"type": "input",
"label": "ESB返回代码",
"prop": "esbReturnCode"
}, {
"type": "input",
"label": "系统返回消息",
"prop": "esbReturnMessage",
hide: true
}, {
"type": "input",
"label": "业务服务执行标识",
"prop": "bizServiceFlag"
}, {
"type": "input",
"label": "业务服务返回代码",
"prop": "bizReturnCode"
}, {
"type": "input",
"label": "业务服务返回消息",
"prop": "bizReturnMessage"
}, {
"type": "input",
"label": "实例ID",
"prop": "instanceId"
}, {
"type": "input",
"label": "总记录数",
"prop": "totalRecord",
hide: true
}, {
"type": "input",
"label": "总页数",
"prop": "totalPage",
hide: true
}, {
"type": "input",
"label": "页面大小",
"prop": "pageSize",
hide: true
}, {
"type": "input",
"label": "当前页",
"prop": "currentPage",
hide: true
}, {
"type": "select",
"label": "是否启用",
"prop": "statusCode",
search: true,
hide: true,
dicData: [
{
label: '否',
value: 'E'
},
{
label: '是',
value: 'S'
}
],
}, {
"type": "input",
"label": "错误信息",
"prop": "errorMessage",
overHidden: true
}, {
"type": "input",
"label": "创建人ID",
"prop": "createId",
hide: true
}, {
"type": "input",
"label": "创建人",
"prop": "createName",
hide: true
}, {
"type": "input",
"label": "创建时间",
"prop": "createTime",
hide: true
}, {
"type": "input",
"label": "更新人ID",
"prop": "updateId",
hide: true
}, {
"type": "input",
"label": "更新人",
"prop": "updateName",
hide: true
}, {
"type": "input",
"label": "更新时间",
"prop": "updateTime",
hide: true
}, {
"type": "input",
"label": "操作来源(手动/自动)",
"prop": "source",
hide: true
} ]
}