vue-IVIEW 导出 excel
<div style="background:#eee; height: 100%;">
<Row style="background:#eee; height:100%">
<Col span="24">
<Card :bordered="false" style="background:#eee;padding:0; height: 100%;">
<p slot="title">
{{sblxname}}-巡视设备
<a href="javascript:;" slot="extra">
<Tooltip content="点击返回上一页" placement="left" @click.native="ibuttonclass">
<Icon :type="$iconConfig.RETURN" size="20"/>
<Form :model="form" :label-width="110"
style="background: #F8F8F9; padding: 15px 5px 0px 5px;margin-bottom: 10px;">
<Col span="5" style="height: 40px;">
<FormItem label="时间">
<DatePicker v-model="form.startTime" type="datetime" placeholder="请选择开始时间"
style="width:127%">
<Col span="5" style="height: 40px;">
<FormItem label="--">
<DatePicker v-model="form.endTime" type="datetime" placeholder="请选择结束时间"
style="width:127%">
<Col span="6" offset="1" style="height: 40px;">
<FormItem label="单位">
<Select v-model="form.whdwsjbm" clearable :disabled="disabled">
<Option v-for="whdwsjbm1 inwhdwsjbmList" :value="whdwsjbm1.whdwid" :key="whdwsjbm1.whdwid">{{
whdwsjbm1.whdwmc }}
<Col span="6" offset="1" style="height: 40px;">
<FormItem label="站线类型">
<Select v-model="form.xzlx" clearable>
<Option v-for="xzlx1 inxzlxList" :value="xzlx1.value" :key="xzlx1.value">{{ xzlx1.label }}
<Col span="6" style="height: 40px;">
<FormItem label="站线名称">
<Input v-model="form.xzmc" placeholder="请输入站线名称"/>
<Col span="6" style="height: 40px;">
<FormItem label="工单类型">
<Select v-model="form.gdlx" clearable clearable>
<Option v-for="gdlx1 ingdlxList" :value="gdlx1.value" :key="gdlx1.value">{{ gdlx1.label }}
<Col span="6" style="height: 40px;">
<FormItem label="巡视班组">
<Input v-model="form.bz" placeholder="请输入巡视班组"/>
<Col span="6" style="height: 40px;">
<FormItem label="巡视人员">
<Input v-model="form.jdrname" placeholder="请输入巡视人员"/>
<Col span="6" style="height: 40px;">
<FormItem label="设备巡视状态">
<Select v-model="form.xszt" clearable clearable>
<Option v-for="xszt1 inxsztList" :value="xszt1.value" :key="xszt1.value">{{ xszt1.label }}
<Col span="17" style="margin-top:1px;margin-left:1%;text-align: right">
<Tooltip content="搜索" placement="bottom">
<Button @click="listSearch" type="primary" :loading="isSearchLoading"
style="background:#4A6FD7; width: 80px; color:#FFFFFF !important;border:none;padding-left: 12px; margin-left: 10px; !important;">
<Icon :type="$iconConfig.SEARCH" style="margin-right: 5px;">
搜索
<Tooltip :content="exportExcelContent" placement="bottom">
<Button :disabled="exportExcelButtonIsDisabled" @click="exportExcel" type="primary"
style="margin-left: 10px;">
<Icon :type="$iconConfig.DOWNLOAD" style="margin-right: 2px;">
导出EXCEL
<Row style="background:#eee; height: 100%;">
<Col span="24">
<Table border
@on-sort-change="onSortChange"
:columns="tableA.tableColumns"
:data="tableA.tableData"
:height="height"
ref="currentRowTable"
:percent="percent"
style="white-space: nowrap;word-break: keep-all"
>
<Page align="right" :total="tableParams.total" :current="tableParams.pageNo"
@on-change="onPageChange"
@on-page-size-change="onPageSizeChange"
:page-size="tableParams.pageSize"
:page-size-opts="tableA.pageSizeOpts"
show-sizer show-elevator show-total>
<xsxDetail ref="xsxDetailModal">
<fxwtDetail ref="fxwtDetailModal">
<Spin fix v-if="spinShow" style="font-size: 20px;background:rgba(7,18,38,.5);color:#FFFFFF">加载中...
import {getLastTimeBefore, timeFormatter}from '@/libs/tools'
import excelfrom '@/libs/excel'
import {
getTableConfig,
objectCopy
}from '@/libs/util'
import homeyfrom '@/api/homey'
import xsxDetailfrom './xsxDetail'
import fxwtDetailfrom './fxwtDetail'
//时间
import momentfrom 'moment'
export default {
name:"task_bd_page",
components: {xsxDetail, fxwtDetail},
data() {
return {
exportExcelButtonIsDisabled:false,
exportExcelContent:'导出列表查询数据为excel文件',
percent:0.87,
height:100,
isFirst:true,
spinShow:false,
form: {
startTime:moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'), // 开始时间
endTime:moment().format('YYYY-MM-DD HH:mm:ss'), // 结束时间
start:moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'), // 开始时间
end:moment().format('YYYY-MM-DD HH:mm:ss'), // 结束时间
whdwsjbm:'', //单位
xzlx:'', //站/线类型
xzmc:'', //站/线名称
gdlx:'', //工单类型
bz:'', //巡视班组
jdrname:'', // 巡视人员
xszt:'', //设备巡视状态
ksxssj:'', //巡视开始时间
key:'xswcsj', //巡视完成时间
// pageNo:this.$pageConfig.DEFAULT_PAGE_NO, //当前页
// pageSize:this.$pageConfig.DEFAULT_PAGE_SIZE, //每页显示多少条
// pageSize:'2',
pageCurrent:'1',//当前页
total:'',
// sorter: 'name desc , age asc',
nodata:''
},
disabled:false,
//输电线路
sblxname:'',
// sdxl:this.sdrw+"输电线路",
datetimerangeValue: [],
theTime:'',
tableConfig: {},
isSearchLoading:false,
selectData:this.$dictConfig.getSelectData(102),
gender:3,
tableParams: {
total:0,
pageNo:this.$pageConfig.DEFAULT_PAGE_NO,
pageSize:this.$pageConfig.DEFAULT_PAGE_SIZE,
sorter:'',
nodata:1,
},
queryParam: {
name:''
},
whdwsjbmList: [], //单位
xzlxList:this.$dictConfig.getSelectData(128), //站/线类型
gdlxList:this.$dictConfig.getSelectData(129), //工单类型
xsztList:this.$dictConfig.getSelectData(130), //设备巡视状态
tableA: {
pageSizeOpts:this.$pageConfig.DEFAULT_TABLE_PAGE_SIZE,
tableColumns: [
{
type:'index',
width:60,
align:'center',
title:'序号',
key:'num',
},
{
title:'单位',
align:'center',
sortable:true,
width:100,
key:'whdwjc'
},
{
title:'电压等级',
align:'center',
width:100,
key:'dydj'
},
{
title:'站/线类型',
align:'center',
width:100,
key:'xzlx'
},
{
title:'站/线名称',
align:'center', width:120,
key:'xzmc'
},
{
title:'工单编号',
align:'center', width:140,
key:'gdbh'
},
{
title:'工单名称',
align:'center', width:200,
key:'gdmc'
},
{
title:'工单类型',
align:'center', width:120,
key:'gdlx'
},
{
title:'巡视班组',
align:'center', width:160,
key:'xsbzname'
},
{
title:'巡视人员',
align:'center', width:90,
key:'xsry'
},
{
title:'设备巡视状态',
align:'center', width:120,
key:'xszt'
},
{
title:'巡视开始时间',
align:'center', width:160,
key:"ksxssj",
},
{
title:'巡视完成时间', width:160,
align:'center',
key:'xswcsj',
},
{
title:'巡视项',
align:'left', width:90,
key:'xsx',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type:'text',
// icon: this.$iconConfig.LOCK,
size:'small',
disabled: (params.row.xsx <=0)
},
style: {
marginRight:'5px',
color:'rgb(122,173,234)',
},
on: {
click: () => {
// this.$router.push('/tour_details')
this.onXsx(params);
}
}
},
(params.row.xsx)
),
])
}
},
{
title:'发现问题',
align:'left',
key:'fxwt',
className:'demo-table-info-column', width:100,
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type:'text',
// icon: this.$iconConfig.LOCK,
size:'small',
disabled: (params.row.fxwt <=0)
},
style: {
marginRight:'5px',
color:'rgb(122,173,234)',
},
on: {
click: () => {
this.onFxwt(params);
}
}
},
(params.row.fxwt)
),
])
}
}
],
tableData: [],
tableDatalist: [],
},
}
},
methods: {
//自动设置列表的高度
RowResize() {
let me =this;
const deviceHeight = document.documentElement.clientHeight
if (me.$refs.currentRowTable) {
me.height = Number(deviceHeight) *0.65
}
},
//获取单位
gittask1() {
let me =this;
homey.gettask().then(res => {
let data = res.data.data
me.whdwsjbmList = data.whdwList
if (data.hasAlldata =="owner") {
me.disabled =true
}
}).catch(() => {
//出错后，取消进度条啥的
})
},
// 巡视项
onXsx(param) {
this.$refs.xsxDetailModal.show(param.row)
},
//发现问题
onFxwt(param) {
this.$refs.fxwtDetailModal.show(param.row)
},
showSuccess() {
this.$systemMessage.success('你操作成功了')
},
/**
* 窗口关闭回调
*/
handleModalClose() {
this.$Message.info('你把弹窗关闭了')
},
onPageChange(page) {
// this.$Message.info('页码:' + page)
this.tableParams.pageNo = page;
//此处执行列表数据刷新请求
this.getUserListData();
},
//每页数量改变
onPageSizeChange(size) {
// this.$Message.info('每页条数:' + size)
this.tableParams.pageSize = size
this.getUserListData();
//此处执行列表数据刷新请求
},
//table排序点击事件
onSortChange(sort) {
if (sort) {
this.tableParams.sorter =' ' + sort.key +' ' + sort.order;
this.getUserListData()
}
},
/**
* 成功post
*/
handleSuccessPost() {
},
/**
* 失败post
*/
handleFailPost() {
},
/**
* 获取列表数据
*/
handleListData() {
},
beforeMount() {
//挂在前
},
//点击返回上一次流浪路由
ibuttonclass() {
this.$router.go(-1)
},
// 搜索
listSearch() {
let me =this
if (me.form.startTime.valueOf() /1000 > me.form.endTime.valueOf() /1000) {
me.$systemMessage.success('结束时间不能小于开始时间')
}else {
me.isFirst =false
me.isSearchLoading =true
me.tableParams = Object.assign(this.tableParams, this.queryParam);
me.tableParams.pageNo =1
me.getUserListData()
}
},
// 首次加载 查询
getUserListData() {
let me =this;
me.spinShow =true
let pramsA = {
pageSize: me.tableParams.pageSize,
pageNo: me.tableParams.pageNo,
whdwsjbm: me.form.whdwsjbm, //单位编码
xzlx: me.form.xzlx, //线站类型(参数传递：变电站、输电线路、配电站室)
xzmc: me.form.xzmc, ////站/线名称
gdlx: me.form.gdlx, //工单类型
bz: me.form.bz, ///班组
jdrname: me.form.jdrname, /// 巡视人员
xszt: me.form.xszt, //巡视状态（传递参数：1或2或3，1：待巡视，2：巡视中，3：已巡视）
start:moment(me.form.startTime).format(me.$pageConfig.SECOND_FORMAT),
end:moment(me.form.endTime).format(me.$pageConfig.SECOND_FORMAT),
}
let pramsB = {
pageSize: me.tableParams.pageSize,
pageNo: me.tableParams.pageNo,
whdwsjbm: me.form.whdwsjbm, //单位编码
xzlx: me.form.xzlx, //线站类型(参数传递：变电站、输电线路、配电站室)
xzmc: me.form.xzmc, ////站/线名称
gdlx: me.form.gdlx, //工单类型
bz: me.form.bz, ///班组
jdrname: me.form.jdrname, /// 巡视人员
xszt: me.form.xszt, //巡视状态（传递参数：1或2或3，1：待巡视，2：巡视中，3：已巡视）
startTime:moment(me.form.startTime).format(me.$pageConfig.SECOND_FORMAT),
endTime:moment(me.form.endTime).format(me.$pageConfig.SECOND_FORMAT)
}
homey.getrw(me.isFirst ? pramsA : pramsB).then(res => {
me.tableA.tableData = res.data.data.list
me.tableParams.total = res.data.data.count
me.isSearchLoading =false
if (me.tableParams.total >0) {
me.exportExcelButtonIsDisabled =false
me.exportExcelContent ='导出列表查询数据为excel文件'
}else {
me.exportExcelButtonIsDisabled =true
me.exportExcelContent ='暂无可导出数据，请修改查询条件后再试'
}
}).catch(() => {
}).finally(() => {
me.spinShow =false
})
},
handleCancelSearch() {
this.$refs['searchFrom'].resetFields()
this.handleSearch()
},
handleRefresh() {
this.tableParams.pageNo =1
this.getUserListData()
},
//导出excel
exportExcel() {
let me =this;
//当前页面的搜索条件下，先从页面拿一下总数，然后再判断总数情况
let pramsTotalA = {
pageSize: me.tableParams.pageSize,
pageNo: me.tableParams.pageNo,
whdwsjbm: me.form.whdwsjbm, //单位编码
xzlx: me.form.xzlx, //线站类型(参数传递：变电站、输电线路、配电站室)
xzmc: me.form.xzmc, ////站/线名称
gdlx: me.form.gdlx, //工单类型
bz: me.form.bz, ///班组
jdrname: me.form.jdrname, /// 巡视人员
xszt: me.form.xszt, //巡视状态（传递参数：1或2或3，1：待巡视，2：巡视中，3：已巡视）
start:moment(me.form.startTime).format(me.$pageConfig.SECOND_FORMAT),
end:moment(me.form.endTime).format(me.$pageConfig.SECOND_FORMAT),
}
let pramsTotalB = {
pageSize: me.tableParams.pageSize,
pageNo: me.tableParams.pageNo,
whdwsjbm: me.form.whdwsjbm, //单位编码
xzlx: me.form.xzlx, //线站类型(参数传递：变电站、输电线路、配电站室)
xzmc: me.form.xzmc, ////站/线名称
gdlx: me.form.gdlx, //工单类型
bz: me.form.bz, ///班组
jdrname: me.form.jdrname, /// 巡视人员
xszt: me.form.xszt, //巡视状态（传递参数：1或2或3，1：待巡视，2：巡视中，3：已巡视）
startTime:moment(me.form.startTime).format(me.$pageConfig.SECOND_FORMAT),
endTime:moment(me.form.endTime).format(me.$pageConfig.SECOND_FORMAT)
}
//先使用列表查询接口获取当前查询条件下有多少数据可导出
homey.getrw(me.isFirst ? pramsTotalA : pramsTotalB).then(res => {
//没导出数据，提示并返回
if (res.data.data.count <=0) {
me.$systemMessage.alert({
title:'提示',
content:'当前查询条件下无可导出数据，请修改查询条件后再试'
})
return false
}
//超过10000条，提示并返回
if (res.data.data.count >10000) {
me.$systemMessage.alert({
title:'提示',
content:'单次导出数据最多10000条，请修改查询条件后再试'
})
return false
}
//弹出确认导出询问框
me.$systemMessage.confirm({
title:'确认导出?',
content:'本次共导出数据:' + res.data.data.count +' 条，点击"导出"开始导出数据.',
okText:'导出',
//确认导出
onOk:function () {
let paramA = {
start:moment(me.form.startTime).format(me.$pageConfig.SECOND_FORMAT),
end:moment(me.form.endTime).format(me.$pageConfig.SECOND_FORMAT),
whdwsjbm: me.form.whdwsjbm, //单位ID
xzlx: me.form.xzlx,//战线类型
xszt: me.form.xszt,//巡视状态
xzmc: me.form.xzmc,//战线名称
gdlx: me.form.gdlx,//工单类型
bz: me.form.bz,//巡视班组
jdrname: me.form.jdrname,//巡视人员
pageNo:1,//把pageNo变成1，pageSize变成total就可以了
pageSize: res.data.data.count
}
let paramB = {
startTime:moment(me.form.startTime).format(me.$pageConfig.SECOND_FORMAT),
endTime:moment(me.form.endTime).format(me.$pageConfig.SECOND_FORMAT),
whdwsjbm: me.form.whdwsjbm, //单位ID
xzlx: me.form.xzlx,//战线类型
xszt: me.form.xszt,//巡视状态
xzmc: me.form.xzmc,//战线名称
gdlx: me.form.gdlx,//工单类型
bz: me.form.bz,//巡视班组
jdrname: me.form.jdrname,//巡视人员
pageNo:1,//把pageNo变成1，pageSize变成total就可以了
pageSize: res.data.data.count
}
//显示loading
me.$Spin.show({
render: (h) => {
return h('div', [
h('Icon', {
'class':'demo-spin-icon-load',
props: {
type:'ios-loading',
size:18
}
}),
h('div', '正在导出，请稍后...')
])
}
});
//跟列表使用一个接口即可，把pageNo变成1，pageSize变成total就可以了
homey.getrw(me.isFirst ? paramA : paramB).then(res => {
let data = res.data.data.list;//获取到数据
if (data) {
let newData = []
let num =1;
data.filter(function (item) {
item.num = num
newData.push(item)
num++
})
const params = {
title: ['序号', '单位', '电压等级', '站/线类型', '站/线名称', '工单编号', '工单名称', '工单类型', '巡视班组', '巡视人员', '设备巡视状态', '巡视开始时间', '巡视完成时间', '巡视项', '发现问题'],
key: ['num', 'whdwjc', 'dydj', 'xzlx', 'xzmc', 'gdbh', 'gdlx', 'gdlx', 'xsbzname', 'xsry', 'xszt', 'ksxssj', 'xswcsj', 'xsx', 'fxwt'],
data: newData,
autoWidth:true,
filename:'设备列表导出'
};
excel.export_array_to_excel(params)
}else {
me.$systemMessage.alert('当前无可导出数据!')
}
}).catch(() => {
}).finally(() => {
me.isFirst =false
//隐藏loading
me.$Spin.hide()
})
}
})
}).catch(() => {
}).finally(() => {
})
},
},
mounted() {
let me =this
me.RowResize();
//监听窗口大小变化
window.onresize =function () {
me.RowResize();
}
// console.log(currentUser.companyCode)
//vue组件传参
let routeParams =this.$route.params
//url query传参
let routeQuery =this.$route.query
if (routeParams && routeQuery) {
me.sblxname = routeParams.xzlx || routeQuery.xzlx
//先从Params取，没有就从query取，还没有，就默认一天
me.form.startTime = routeParams.startTime || routeQuery.startTime ||moment().subtract(1, 'days').format(me.$pageConfig.SECOND_FORMAT)
me.form.endTime = routeParams.endTime || routeQuery.endTime ||moment().format(me.$pageConfig.SECOND_FORMAT)
me.form.xzlx = routeParams.xzlx || routeQuery.xzlx
//单位如果不传，默认就是currentUser的
me.form.whdwsjbm = routeParams.whdwsjbm || routeQuery.whdwsjbm || currentUser.companyCode
me.form.xszt = routeParams.xszt || routeQuery.xszt
}
me.getUserListData()
me.gittask1()
},
//页面渲染完毕后初始化表格数据
created() {
// this.getUserListData();
}
}
.demo-spin-icon-load {
font-size:16px;
font-weight:900;
animation:ani-demo-spin 1s linear infinite;
}
