vue-IVIEW 导出 excel

{{sblxname}}-巡视设备

<Form :model="form" :label-width="110"

style="background: #F8F8F9; padding: 15px 5px 0px 5px;margin-bottom: 10px;">

<DatePicker v-model="form.startTime" type="datetime" placeholder="请选择开始时间"

style="width:127%">

<DatePicker v-model="form.endTime" type="datetime" placeholder="请选择结束时间"

style="width:127%">

<Option v-for="whdwsjbm1 inwhdwsjbmList" :value="whdwsjbm1.whdwid" :key="whdwsjbm1.whdwid">{{

whdwsjbm1.whdwmc }}

<Option v-for="xzlx1 inxzlxList" :value="xzlx1.value" :key="xzlx1.value">{{ xzlx1.label }}

<Option v-for="gdlx1 ingdlxList" :value="gdlx1.value" :key="gdlx1.value">{{ gdlx1.label }}

<Option v-for="xszt1 inxsztList" :value="xszt1.value" :key="xszt1.value">{{ xszt1.label }}

<Button @click="listSearch" type="primary" :loading="isSearchLoading"

style="background:#4A6FD7; width: 80px; color:#FFFFFF !important;border:none;padding-left: 12px; margin-left: 10px; !important;">

搜索

<Button :disabled="exportExcelButtonIsDisabled" @click="exportExcel" type="primary"

style="margin-left: 10px;">

导出EXCEL

<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>

<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;

}

vue-IVIEW 导出 excel

推荐阅读更多精彩内容