一. 背景

当页面不支持使用平台导出功能时则使用自定义导出方法

二. 实现流程

1.Vue 文件前端导出功能方法代码

<template>  
  <eh-layout>  
    <div slot="center">  
      <eh-tabs :tabs.sync="tabs" ref="umppWorkOrderTabs">  
        <template slot="umppWorkOrder-select">  
          <x-grid  
            id="umppWorkOrder"  
            ref="umppWorkOrder"  
            :grid="workOrderGrid.grid"  
            :dataSource="workOrderGrid.dataSource"  
            :options="workOrderGrid.options"  
            class="grid-main"  
          >  
            <template slot="toolbar">  
              <eh-button class="changeButton" v-throttle @click="exportData()">导出</eh-button>  
            </template></x-grid  
          >  
        </template>  
      </eh-tabs>  
    </div>  
  </eh-layout>  
</template>  
  
<script>  
export default {  
  name: "umppWorkOrder",  
  data() {  
    return {  
      tabs: [{ name: "umppWorkOrder-select", title: "工单查询" }],  
      workOrderGrid: {  
        dataSource: {  
          bean: "platform",  
          method: "select",  
          entity: "com.epichust.entity.UmppWorkOrder",  
        },  
        grid: {  
          columns: [  
            {  
              prop: "id",  
              label: "id",  
              visible: false,  
            },  
            {  
              prop: "code",  
              label: "工单编码",  
              width: "140px",  
            },  
            {  
              prop: "qty",  
              label: "工单数量",  
              width: "100px",  
            },  
            {  
              prop: "proState",  
              label: "工单状态",  
              width: "100px",  
              formatter: ({ cellValue, row, col }) => {  
                if (row.proState == 0) {  
                  return "未开工";  
                } else if (row.proState == 1) {  
                  return "已开工";  
                } else if (row.proState == 3) {  
                  return "完工";  
                }  
              },  
            },  
            {  
              prop: "produCode",  
              label: "产品编码",  
              width: "140px",  
            },  
            {  
              prop: "produName",  
              label: "产品名称",  
              width: "140px",  
            },  
            {  
              prop: "plannedBeginDate",  
              label: "计划开始时间",  
              width: "140px",  
            },  
            {  
              prop: "plannedEndDate",  
              label: "计划结束时间",  
              width: "140px",  
            },  
          ],  
          defaultSort: {  
            prop: "code",  
            order: "desc",  
          },  
          pagination: {  
            pageSize: 15,  
            pageSizes: [15, 25, 50, 100, 200], // 页容量选项  
          },  
          selectMax: 1,  
        },  
        options: {  
          extraParamFields: {},  
        },  
      },  
    };  
  },  
  methods: {  
    //导出  
    exportData() {  
      this.$http.post("umppWorkOrderController!exportAllData.m").then((res) => {  
        let columns = this.workOrderGrid.grid.columns.concat(this.workOrderGrid.grid.columns);  
        for (let i in columns) {  
          // 如果配置中使用到了formatter需要删除  
          if (columns[i].prop == "proState") {  
            delete columns[i].formatter;  
          }  
        }  
        // 不导出隐藏列  
        columns = columns.filter((item) => {  
          return item.visible !== false;  
        });  
        this.$refs.umppWorkOrder.exportCSV("工单详情", columns, res);  
      });  
    },  
  },  
};  
</script>  
  
<style  lang="scss"  scoped></style>

2. 后端 controller 层导出功能代码

/**
  * 导出
  */
public void exportAllData() {
	try {
		List<Map<String, Object>> mapList = recordService.getExportListByParams();
		this.returnData.toParam(mapList);
	} catch (MestarException e) {
		throw new MestarException("导出失败！" + e);
	}
}

3. 后端 service 层导出功能代码，主要用于查询数据以及数据转换

/**
 * 处理导出数据
 * 
 * @return
 */
public List<Map<String, Object>> getExportListByParams() {
    List<Map<String, Object>> mapList = new ArrayList<>();
    List<UmppWorkOrder> workOrderList = this.dao.findHql(
            " from UmppWorkOrder d where d.isDelete=0 and d.proState=1 order by d.createDate desc");
    for (UmppWorkOrder order : workOrderList) {
        Map map = new HashMap();
        map.put("code", order.getCode());
        map.put("qty", order.getQty());
        if (order.getProState() == 0) {
            map.put("proState", "未开工");
        } else if (order.getProState() == 1) {
            map.put("proState", "已开工");
        } else if (order.getProState() == 3) {
            map.put("proState", "完工");
        }
        map.put("produCode", order.getProduCode());
        map.put("produName", order.getProduName());
        map.put("plannedBeginDate",order.getPlannedBeginDate() != null ? TimeUtils.dateToString(order.getPlannedBeginDate()) : "");
        map.put("plannedEndDate",order.getPlannedEndDate() != null ?  TimeUtils.dateToString(order.getPlannedEndDate()) : "");
        mapList.add(map);
    }
    return mapList;
}

4. 效果图如下