welcomeRegister_web/src/components/orderList/orderList.vue

<template>
  <div>
    <el-row>
      <el-col :span="24" class="first-row">
        <div id="first-left">
          <div id="logo"></div>
          <div class="tag">订单管理</div>
          <div>
            <el-select v-model="formInline.value" class="selectDate" placeholder="请选择" @change="selectTime">
              <el-option v-for="item in formInline.options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div id="first-right">
          <el-button type="primary" class="first-right-btn" @click="downLoadFile">导出已缴表单</el-button>
        </div>
      </el-col>
    </el-row>
    <hr style="background-color: #CCCCCC;height: 1px;border: 0;margin-top: 32px;">
    <el-row>
      <el-col :span="24" class="second-row">
        <div class="total_balance">总金额：<span class="all-money">{{all_money.toFixed(2)}}</span> 元</div>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="关键字：" class="order">
            <el-input v-model="selectOrder" placeholder="请输入订单号或者班级"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查找</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="third-row">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" highlight-current-row>
          <el-table-column label="订单号" width="280" align="center">
            <template slot-scope="scope">{{ scope.row.order }}</template>
          </el-table-column>
          <el-table-column prop="id" label="学号" width="260"></el-table-column>
          <el-table-column prop="stuName" label="姓名" width="160"></el-table-column>
          <el-table-column prop="class" label="班级" width="180"></el-table-column>
          <el-table-column prop="money" label="金额(元)" width="160"></el-table-column>
          <el-table-column prop="time" label="时间" width="260" widshow-overflow-tooltip></el-table-column>
          <el-table-column label="状态" align="center" width="180">
            <template slot-scope="scope">
              <el-tag :type="scope.row.state === '支付失败' ? 'danger' : 'success'" disable-transitions>{{scope.row.state}}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px" class="table-footer">
          <div class="pages">
            <el-pagination layout="prev, pager, next" :page-size="pageSize" :total="totalCount"
              @current-change="handleCurrentChange"></el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="forth-row">
        <!-- 编辑对话框 -->
        <el-dialog v-if="selectM" title="请选择月份" :visible.sync="editdialogFormVisible" width="400px" top="0vh"
          class="my-dialog">
          <div id="month">
            <el-date-picker v-model="monthValue" type="month" placeholder="选择月" value-format="yyyy-MM"
              @change="handleSelectMonth">
            </el-date-picker>
            <div class="last-row">
              <el-button @click="selectMonth" class="submitBtn" :disabled="btnChangeEnableMonth">确定</el-button>
              <el-button @click="selectLogout" class="submitBtn">取消</el-button>
            </div>
          </div>
        </el-dialog>
        <el-dialog v-if="!selectM" title="请选择日期" :visible.sync="editdialogFormVisible" width="400px" top="0vh"
          class="my-dialog">
          <div id="month">
            <el-date-picker v-model="dayValue" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
              @change="handleSelectDay">
            </el-date-picker>
            <div class="last-row">
              <el-button @click="selectDay" class="submitBtn" :disabled="btnChangeEnableDay">确定</el-button>
              <el-button @click="selectLogout" class="submitBtn">取消</el-button>
            </div>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        editdialogFormVisible: false, //月份
        btnChangeEnableMonth: true, //确定月份按钮
        btnChangeEnableDay: true , //确定日期按钮
        selectM: true, //显示月份
        formInline: {
          user: '',
          options: [{
            value: 'all',
            label: '全部'
          }, {
            value: 'month',
            label: '按月份选择'
          }, {
            value: 'day',
            label: '按日期选择'
          }],
          value: ''
        },
        tableData: [], //订单数据
        user_token: '', //token
        all_money: 0, //总钱数
        pageSize: 10, //每页订单数目
        totalCount: 0, //总订单数
        selectOrder: '', //查找订单号或姓名
        monthValue: '', //选择的月份
        dayValue: '', //选择的日期
        flag: 1, //选择的状态
        datestr: '', //选择的时间
      }
    },
    created: function() {
      this.user_info = JSON.parse(sessionStorage.getItem('usr_info'))
      this.user_token = this.user_info.token
      this.getTableData(this.$Api.orderList, this.flag)
    },
    methods: {
      //分页
      handleCurrentChange(val) {
        this.currentPage = val;
        this.tableData = []
        this.all_money = 0
        this.getTableData(this.$Api.orderList, this.flag, val)
      },
      //选择时间
      selectTime(val) {
        if (val == 'month') {
          this.editdialogFormVisible = true
          this.selectM = true
          this.flag = 2
        } else if (val == 'day') {
          this.editdialogFormVisible = true
          this.selectM = false
          this.flag = 3
        } else {
          this.tableData = []
          this.all_money = 0
          this.flag = 1
          this.getTableData(this.$Api.orderList, this.flag)
        }
      },
      //选择月份按钮
      handleSelectMonth() {
        // console.log(this.monthValue)
        if (this.monthValue != '') {
          this.btnChangeEnableMonth = false
        }
      },
      //确定选择日期
      handleSelectDay(){
        if (this.dayValue != '') {
          this.btnChangeEnableDay = false
        }
      },
      //确定选择月份
      selectMonth(val) {
        console.log(this.monthValue)
        this.formInline.value = this.monthValue
        this.editdialogFormVisible = false
        this.tableData = []
        this.all_money = 0
        this.getTableData(this.$Api.orderList, this.flag, 1, '', this.monthValue)
      },
      //确定选择日期
      selectDay() {
        console.log(this.dayValue)
        this.formInline.value = this.dayValue
        this.editdialogFormVisible = false
        this.tableData = []
        this.all_money = 0
        this.getTableData(this.$Api.orderList, this.flag, 1, '', this.dayValue)
      },
      //退出选择
      selectLogout() {
        this.editdialogFormVisible = false
        this.formInline.value = '请重新选择'
      },
      //根据关键字查找订单
      onSubmit() {
        // console.log(this.selectOrder)
        this.tableData = []
        this.all_money = 0
        this.getTableData(this.$Api.orderList, this.flag, 1, this.selectOrder)
      },
      //获取订单数据
      getTableData(url, flag, index, key, dateStr) {
        this.$axios.get(url + '?' + this.$qs.stringify({
          'flag': flag,
          'curPage': index,
          'pageSize': this.pageSize,
          'keyword': key,
          'dateStr': dateStr
        }), {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
            'Author': 'codingliang',
            'admin_token': this.user_token
          }
        }).then(res => {
          // console.log(res)
          this.totalCount = res.data.data.page.totalCount
          for (var i = 0; i < res.data.data.page.list.length; i++) {
            var list = {}
            list.order = res.data.data.page.list[i].orderNo
            list.id = res.data.data.page.list[i].payerIdentify
            list.stuName = res.data.data.page.list[i].studentName
            list.class = res.data.data.page.list[i].className
            list.money = res.data.data.page.list[i].orderAmount

            // this.all_money = (this.all_money + list.money).toFixed(2)
            this.all_money = this.all_money + list.money

            list.time = res.data.data.page.list[i].finishTime
            if (res.data.data.page.list[i].status == 2) {
              list.state = '支付成功'
            } else {
              list.state = '支付失败'
            }
            this.tableData.push(list)
          }
          // console.log(this.tableData)
        }).catch(err => {
          console.log(err)
        })
      },
      //下载文件
      downLoadFile() {
        if (this.flag == 1) {
          this.datestr = ''
        } else if (this.flag == 2) {
          this.datestr = this.monthValue
        } else if (this.flag == 3) {
          this.datestr = this.dayValue
        }
        this.$axios.get(this.$Api.orderDownload + '?' + this.$qs.stringify({
          'flag': this.flag,
          'dateStr': this.datestr
        }), {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
            'Author': 'codingliang',
            'admin_token': this.user_token
          },
          responseType: 'blob'
        }).then(res => {
          // console.log(res)
          this.download(res.data)
        }).catch(err => {
          console.log(err)
        })
      },
      //下载
      download(data) {
        if (!data) {
          return
        }
        let url = window.URL.createObjectURL(new Blob([data]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '订单列表' + this.datestr + '.xlsx')
        document.body.appendChild(link)
        link.click()
      }
    },

  }
</script>

<style scoped>
  @import url("orderList.css");
</style>