dy-sign-manager/src/views/order/index.vue

<template>
  <div class='container'>
    <el-form :inline="true"
             v-model="topForm">
      <el-form-item label="乐团" v-if='brancheList.length > 0'>
        <el-select v-model="topForm.team" @change="handleItemChange"  placeholder="请选择分部名称">
            <el-option v-for='(item,index) in brancheList'
                     :key='index'
                     :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
        <el-select v-model="topForm.instruments"  placeholder="请选择乐团名称">
            <el-option v-for='(item,index) in instrumentList'
                     :key='index'
                     :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收费类型">
        <el-select v-model="topForm.money"
                   clearable
                   placeholder="请选择收费类型">
          <el-option label="乐团报名"
                     value="1"></el-option>
          <el-option label="乐团续费"
                     value="2"></el-option>
          <el-option label="小课续费"
                     value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付时间">
        <el-date-picker
            v-model="paymentTime"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
        </el-date-picker>
      </el-form-item>
      <el-button type="primary"
                 icon="el-icon-search"
                 plain
                 @click="getstudentList">搜索</el-button>
      <el-button type="success"
                 icon="el-icon-refresh"
                 plain
                 @click="resetStudentList">重置</el-button>
      <el-button plain
                 @click="exportis">导出</el-button>
    </el-form>
    <div class="tableWrap">
      <el-table :data='tableList'
                id='tableid'
                height="calc(100vh - 174px)"
                show-summary
                :summary-method="getSummaries">
        <el-table-column type="index"
                           width="55"></el-table-column>
        <el-table-column align="center"
                         label="学生姓名"
                         prop='userName'></el-table-column>
        <el-table-column align="center"
                         label="订单编号"
                         width="200"
                         prop='orderNo'></el-table-column>
        <el-table-column align="center"
                         label="收款账户"
                         prop='account'></el-table-column>
        <el-table-column align="center"
                         label="支付金额"
                         prop='amount'></el-table-column>
        <el-table-column align="center"
                         label="到账时间"
                         prop='payTime'></el-table-column>
        <el-table-column align="center"
                         label="课程费用"
                         prop='tuiFee'></el-table-column>
        <el-table-column align="center"
                         label="商品"
                         prop="goodsFee"></el-table-column>
        <el-table-column align="center"
                         label="教辅费用"
                         prop="sdFee"></el-table-column>
        <el-table-column align="center"
                         label="专业"
                         prop="voicyPart"></el-table-column>
        <el-table-column align="left"
                         label="单位/学校"
                         prop="poName"></el-table-column>
        <el-table-column align="left"
                         label="备注"
                         width="300"
                         :formatter="filterRemark">
        </el-table-column>
      </el-table>
      <div class="paginationWrap">
      <el-pagination background
                       class="pagination"
                       layout="prev, pager, next"
                       :total="total"
                       :current-page.sync="currentPage"
                       :page-size.sync="rows"
                       @current-change="handleCurrentChange"></el-pagination>
      </div>

    </div>
  </div>
</template>
<script>
import { getBranches, orderListPage, getMusicTeams } from "@/api/table";
import qs from "qs";
import { scrollTo } from '@/utils/scroll-to'
import '@/assets/tableExport.jquery.plugin.js'
export default {
  data () {
    return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        paymentTime: '',
      topForm: {
        team: '', 
        instruments: '', 
        money: ''
      },
      tableList: [],
      rows: 20,
      total: 0,
      page: 1,
      brancheList: [],// 分部列表
      instrumentList: [], // 乐团列表
      idTmr: '',
      tableId: '',
      props: {
        value: 'value',
        label: 'label',
        children: 'children'
      },//cascader 数据格式化
      branchId: '',
      classId: ''
    }
  },
  computed: {
    currentPage: {
      get () {
        return this.page
      },
      set (val) {
        this.$emit('update:page', val)
      }
    },
  },
  mounted () {
    this.getBranches();
    // this.getstudentList();
  },
  methods: {
    handleCurrentChange (val) {
      this.page = val;
    //   this.rows = pageSize;
      this.getstudentList();
    },
    // 获取选项卡
    getBranches () {
      getBranches().then(res => {
        if (res.code == 200) {
          let arr = [];
          res.data.map(item => {
            arr.push({
              value: item.branchId,
              label: item.branchName,
              children: []
            })
          })
          this.brancheList = arr
        }
      });
    },
    getstudentList (rows, callBack) {
        if(rows && typeof rows == 'number' ) {
            console.log(rows)
            this.rows = rows
        } else {
            this.rows = 20
        }
        let startTime = '', endTime = ''
        if(this.paymentTime) {
            startTime = this.paymentTime[0]
            endTime = this.paymentTime[1]
        }
        let params = this.topForm
        orderListPage(qs.stringify({ 
            page: this.page,
            rows: this.rows,
            branchId: params.team, 
            classId: params.instruments, 
            type: params.money,
            startTime: startTime,
            endTime: endTime})).then(res => {
            this.tableList = res.data.rows;
            this.total = res.data.total;
            // 回调函数
            if(callBack && typeof callBack == 'function') {
                callBack()
            }
        })
    },
    resetStudentList () {
      this.branchId = "";
      this.classId = '';
      this.topForm.money = "";
      this.topForm.team = '';
      this.topForm.instruments = '';
      this.page = 1;
      this.getstudentList();
    },
    filterRemark (val) {
      let remark = val.remark ? val.remark : '';
      let sdName = val.sdName ? val.sdName : '';
      return remark + ' ' + sdName;
    },
    exportis () {
        //   this.topForm.money = "";
        //   this.topForm.team = '';
        //   this.topForm.instruments = '';
        this.rows = 9999
        this.page = 1
        
        this.getstudentList(9999, () => {
              setTimeout(() => {
                  // this.method5('tableid');
                  $('#tableid').tableExport({type:'excel'});
              }, 100);
        })
        // this.method5('tableid');
    },

    // 导出
    getExplorer () {
      var explorer = window.navigator.userAgent;
      //ie
      if (explorer.indexOf("MSIE") >= 0) {
        return 'ie';
      }
      //firefox
      else if (explorer.indexOf("Firefox") >= 0) {
        return 'Firefox';
      }
      //Chrome
      else if (explorer.indexOf("Chrome") >= 0) {
        return 'Chrome';
      }
      //Opera
      else if (explorer.indexOf("Opera") >= 0) {
        return 'Opera';
      }
      //Safari
      else if (explorer.indexOf("Safari") >= 0) {
        return 'Safari';
      }
    },
    method5 (tableid) {
      if (this.getExplorer() == 'ie') {
        var curTbl = document.getElementById(tableid);
        var oXL = new ActiveXObject("Excel.Application");
        var oWB = oXL.Workbooks.Add();
        var xlsheet = oWB.Worksheets(1);
        var sel = document.body.createTextRange();
        sel.moveToElementText(curTbl);
        sel.select();
        sel.execCommand("Copy");
        xlsheet.Paste();
        oXL.Visible = true;
        try {

          var fname = oXL.Application.GetSaveAsFilename("哈哈哈.xls", "Excel Spreadsheets (*.xls), *.xls");
        } catch (e) {
          print("Nested catch caught " + e);
        } finally {
          oWB.SaveAs(fname);
          oWB.Close(savechanges = false);
          oXL.Quit();
          oXL = null;
          this.idTmr = window.setInterval("Cleanup();", 1);
        }

      }
      else {
        this.tableToExcel();
      }
    },
    Cleanup () {
      window.clearInterval(this.idTmr);
      this.CollectGarbage();
    },
    tableToExcel () {
      (function () {
        var uri = 'data:application/vnd.ms-excel;base64,',
          template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>',
          base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) },
          format = function (s, c) {
            return s.replace(/{(\w+)}/g,
              function (m, p) { return c[p]; })          }
        // table name
        let table = document.getElementById('tableid')
        // || name
        var ctx = { worksheet: 'Worksheet', table: table.innerHTML }
        window.location.href = uri + base64(format(template, ctx))
        // 
        // return function () {


        // }
      })()
    },
    // 多选框选项卡
    handleItemChange (val) {
        // 发请求 获取分部下的乐团
        if (!val) {
            return false
        }
        getMusicTeams(qs.stringify({ branchId: val })).then(res => {
            this.topForm.instruments = ''
            // res.data.rows
            // 1.格式化数据
            // 2.追加数据到相应的位置 
            if (res.code == 200) {
                let arr = [];
                res.data.rows.map(item => {
                    arr.push({
                        label: item.name,
                        value: item.id
                    })
                })
                this.instrumentList = arr
                // for (let item in this.brancheList) {
                //     if (this.brancheList[item].value == val) {
                //         this.brancheList[item].children = arr;
                //     }
                // }
            }

        })
    },
    handleChange (val) {
      if (val) {
        this.branchId = val[0];
        this.classId = val[1];
      }
    },

    getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
            if (index === 0) {
                sums[index] = '总价';
                return;
            }
            if(index === 2 || index === 3 || index === 9) {
                sums[index] = 'N/A'
                return
            }
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                    return prev + curr;
                } else {
                    return prev;
                }
                }, 0);
                sums[index] += ' 元';
            } else {
                sums[index] = 'N/A';
            }
        });

        return sums;
    }
  }
}
</script>
<style lang="scss">
.container {
  padding: 30px;
  .paginationWrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
  .pagination {
    margin-top: 20px;
  }
}
</style>