朱兆平 / vue_cli · 提交

转到一个项目

作者 xudada
提交 9b1966ed179f5acf92af12c081526e3a0ea5c3b4 1 个父辈 31b5c6c6

电子运单结算导出

内嵌 并排对比
正在显示 3 个修改的文件 包含 177 行增加 和 0 行删除
@@ -32,6 +32,9 @@ export const addTeleAddr = params => {return axios.post(`${base1}/teleaddr/addTe @@ -32,6 +32,9 @@ export const addTeleAddr = params => {return axios.post(`${base1}/teleaddr/addTe
32 export const delTeleAddr = params => {return http.get(`${base1}/teleaddr/delTeleAddr`, params);}; 32 export const delTeleAddr = params => {return http.get(`${base1}/teleaddr/delTeleAddr`, params);};
33 export const ediTeleAddr = params => {return axios.post(`${base1}/teleaddr/ediTeleAddr`, params);}; 33 export const ediTeleAddr = params => {return axios.post(`${base1}/teleaddr/ediTeleAddr`, params);};
34 export const selectLists = params => {return http.get(`${base1}/teleaddr/selectLists`, params);}; 34 export const selectLists = params => {return http.get(`${base1}/teleaddr/selectLists`, params);};
  35 +//结算统计
  36 +export const selectStatistics = params => {return http.get(`${base1}/efre/selectStatistics`, params);};
  37 +
35 38
36 39
37 40
@@ -189,6 +189,7 @@ import TeleAddr from "./views/nav3/TeleAddr.vue"; @@ -189,6 +189,7 @@ import TeleAddr from "./views/nav3/TeleAddr.vue";
189 //朱总让做的网页在线客服 189 //朱总让做的网页在线客服
190 import Webdialog from './views/bus/Webdialog.vue' 190 import Webdialog from './views/bus/Webdialog.vue'
191 import C6Way from './views/nav3/C6Way.vue' 191 import C6Way from './views/nav3/C6Way.vue'
  192 +import DBstatistics from './views/nav3/statistics.vue'
192 193
193 //转运申请 194 //转运申请
194 import Transport from './views/nav4/Transport.vue' 195 import Transport from './views/nav4/Transport.vue'
@@ -276,6 +277,7 @@ let routes = [ @@ -276,6 +277,7 @@ let routes = [
276 {path: '/Webdialog', component: Webdialog, name: '在线客服'}, 277 {path: '/Webdialog', component: Webdialog, name: '在线客服'},
277 {path: '/TeleAddr', component: TeleAddr, name: '电报地址'}, 278 {path: '/TeleAddr', component: TeleAddr, name: '电报地址'},
278 {path: '/C6Way', component: C6Way, name: 'C6货运单'}, 279 {path: '/C6Way', component: C6Way, name: 'C6货运单'},
  280 + {path: '/DBstatistics', component: DBstatistics, name: '结算统计'},
279 ] 281 ]
280 }, 282 },
281 { 283 {
  1 +<template>
  2 + <div>
  3 + <el-form :inline="true" :model="formInline" class="demo-form-inline">
  4 + <el-form-item label="">
  5 + <div class="block">
  6 + <el-date-picker
  7 + size="medium"
  8 + v-model="value2"
  9 + type="datetimerange"
  10 + :picker-options="pickerOptions"
  11 + range-separator="至"
  12 + start-placeholder="开始日期"
  13 + end-placeholder="结束日期"
  14 + align="right">
  15 + </el-date-picker>
  16 + </div>
  17 + </el-form-item>
  18 + <el-form-item>
  19 + <el-button type="primary" size="medium" @click="onSubmit">查询</el-button>
  20 + </el-form-item>
  21 + <el-form-item>
  22 + <el-button type="primary" size="medium" @click="exportToExcel">导出</el-button>
  23 + </el-form-item>
  24 + </el-form>
  25 + <div style="margin-bottom: 10px"><span style="color: red">总计: {{ totalItems }} 主单: {{ emptyAwbhCount }} 分单: {{ nonEmptyAwbhCount }}</span></div>
  26 + <div>
  27 + <el-table
  28 + size="medium"
  29 + :data="tableData"
  30 + border
  31 + style="width: 100%">
  32 + <el-table-column
  33 + prop="awba"
  34 + label="主单号"
  35 + width="180">
  36 + </el-table-column>
  37 + <el-table-column
  38 + prop="awbh"
  39 + label="分单号"
  40 + width="180">
  41 + </el-table-column>
  42 + <el-table-column
  43 + prop="billtype"
  44 + label="单证类型">
  45 + </el-table-column>
  46 + <el-table-column
  47 + prop="costs"
  48 + label="应结费用">
  49 + </el-table-column>
  50 + <el-table-column
  51 + prop="flightdate"
  52 + label="航班日期">
  53 + </el-table-column>
  54 + </el-table>
  55 + </div>
  56 + </div>
  57 +</template>
  58 +<script>
  59 + import {
  60 + selectStatistics
  61 + } from '../../api/remote_interface/byont_import';
  62 + import XLSX from 'xlsx';
  63 + import { saveAs } from 'file-saver';
  64 + import moment from 'moment';
  65 + export default {
  66 + data() {
  67 + return {
  68 + pickerOptions: {
  69 + shortcuts: [{
  70 + text: '最近一周',
  71 + onClick(picker) {
  72 + const end = new Date();
  73 + const start = new Date();
  74 + start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  75 + picker.$emit('pick', [start, end]);
  76 + }
  77 + }, {
  78 + text: '最近一个月',
  79 + onClick(picker) {
  80 + const end = new Date();
  81 + const start = new Date();
  82 + start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
  83 + picker.$emit('pick', [start, end]);
  84 + }
  85 + }, {
  86 + text: '最近三个月',
  87 + onClick(picker) {
  88 + const end = new Date();
  89 + const start = new Date();
  90 + start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
  91 + picker.$emit('pick', [start, end]);
  92 + }
  93 + }]
  94 + },
  95 + value2: '',
  96 + tableData: [],
  97 + query:{
  98 + starttime:'',
  99 + endtime:''
  100 + },
  101 + formInline:{},
  102 + columns: [
  103 + { prop: 'awba', label: '主单号' },
  104 + { prop: 'awbh', label: '分单号' },
  105 + { prop: 'billtype', label: '单证类型' },
  106 + { prop: 'costs', label: '应结费用' },
  107 + { prop: 'flightdate', label: '航班日期' }
  108 + ]
  109 + };
  110 + },
  111 + computed: {
  112 + totalItems() {
  113 + return this.tableData.length;
  114 + },
  115 + emptyAwbhCount() {
  116 + return this.tableData.filter(item => !item.awbh).length;
  117 + },
  118 + nonEmptyAwbhCount() {
  119 + return this.tableData.filter(item => item.awbh).length;
  120 + }
  121 + },
  122 + methods:{
  123 + onSubmit(){
  124 + if(this.value2 !== null && this.value2 !== ""){
  125 + this.query.starttime = this.value2[0];
  126 + this.query.endtime = this.value2[1];
  127 + }else{
  128 + return this.$message.error('请选取时间段！')
  129 + }
  130 + selectStatistics(this.query).then((response) => {
  131 + const res = response.data
  132 + if (res.code !== '200') {
  133 + return this.$message.error('获取消息收发记录，失败！')
  134 + }
  135 + // 获取列表数据
  136 + this.tableData = res.data;
  137 + this.$message.success('获取消息收发记录，成功！');
  138 + }).catch(error => {
  139 + // 关闭加载
  140 + this.$message.error(error.toString())
  141 + })
  142 + },
  143 + exportToExcel() {
  144 + // 创建一个新的工作簿
  145 + const wb = XLSX.utils.book_new();
  146 +
  147 + // 创建一个自定义的头部数组，按照 columns 中的顺序和 label
  148 + const header = this.columns.map(col => col.label);
  149 +
  150 + // 将 tableData 转换成二维数组，并添加到 worksheet 中
  151 + const data = this.tableData.map(row => this.columns.map(col => row[col.prop]));
  152 +
  153 + // 使用 XLSX.utils.aoa_to_sheet 创建工作表，指定头部
  154 + const ws = XLSX.utils.aoa_to_sheet([header, ...data]);
  155 +
  156 + // 添加 worksheet 到 workbook
  157 + XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
  158 +
  159 + // 生成 Excel 文件并下载
  160 + const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
  161 + const blob = new Blob([wbout], { type: 'application/octet-stream' });
  162 +
  163 + // 计算明天的日期
  164 + const tomorrow = moment().add(1, 'days').format('M月D日');
  165 +
  166 + // 使用 file-saver 保存文件，并使用明天的日期作为文件名
  167 + saveAs(blob, `${tomorrow}航班结算统计.xlsx`);
  168 + }
  169 + }
  170 +
  171 + };
  172 +</script>