merchant/src/pages/subPages/reconciliation.vue

<template>
  <div class="reconciliation">
    <el-card>
       <div style="margin-bottom:20px;">
          <el-select
            v-model="value"
            placeholder="请选择日期类型"
            style="margin-right:10px" clearable>
            <el-option
              v-for="item in RecTime"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-date-picker
            v-model="dataRange"
            clearable
            value-format="timestamp"
            format="yyyy-MM-dd"
            placeholder="请选择日期"
            type="date"
            style="width:260px;"
            @focus="hFocusDate"
            :disabled="isDisabled"></el-date-picker>
          <el-button style="margin-left:10px;" type="primary" @click="onSearch" :loading="searchLoading">查询</el-button>
          <el-button style="margin-left:10px;" type="danger" @click="onReset">重置</el-button>
          <el-button style="margin-left:10px;" type="primary" @click="onExportOrder">导出订单</el-button>

      </div>
       <div style="font-size:16px;margin-bottom:10px;">查询结果</div>
      <el-table :data="tableData" border style="width: 100%;font-size:13px;" v-loading="isLoading">
        <el-table-column align="center" prop="count" label="订单总数" />
        <el-table-column align="center" prop="successCount" label="成功订单数" />
        <el-table-column align="center" prop="errorCount" label="失败订单数" />
        <el-table-column align="center" prop="sendCount" label="充值中订单数"></el-table-column>
        <el-table-column align="center" prop="refill_amounts" label="总充值金额"></el-table-column>
        <el-table-column align="center" prop="mch_amounts" label="总扣款金额"></el-table-column>
      </el-table>

      <el-divider />
      <span style="font-size:16px;margin-right:10px;">导出订单记录</span><el-button type="primary" style="margin-bottom:10px;" @click="getExportOrderList">更新状态</el-button>
      <el-table :data="exportOrderList" border style="width: 100%;font-size:13px;" v-loading="isLoading">
        <el-table-column align="center" prop="title" label="记录名称" width="550" />
        <el-table-column align="center" prop="state" label="状态">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.state == 1">待处理</el-tag>
            <el-tag v-if="scope.row.state == 2">处理中</el-tag>
            <el-tag type="success" v-if="scope.row.state == 3">已处理</el-tag>
            <el-tag type="danger" v-if="scope.row.state == 4">处理错误</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="stage" label="进度" />
        <el-table-column align="center" prop="errorCount" label="操作">
           <template slot-scope="scope">
            <el-button size="mini" disabled v-if="scope.row.state != 3">下载</el-button>
            <el-button type="primary" size="mini" v-if="scope.row.state == 3" @click="downloadfile(scope.row.file_path)">下载</el-button>
           </template>
        </el-table-column>
      </el-table>

      <el-row style="margin-top:10px;" type="flex" justify="end">
        <el-pagination background layout="prev, pager, next" :page-count="total" @current-change="onPageChange" :current-page="curpage"></el-pagination>
      </el-row>


      

      
    </el-card>
  </div>
</template>

<script>
// getRec-对账管理
import { getRec,getExportOrder,getExportOrderList } from '@/api'
import { RecTime } from '@/utils/constants'
export default {
  name: 'reconciliation',
  data () {
    return {
      dataRange: '',
      startTime: '',
      endTime: '',
      value: '',
      RecTime,
      recForm: {
        // 订单总数
        count: 0,
        // 成功
        successCount: 0,
        // 失败
        errorCount: 0,
        // 充值中
        sendCount: 0,
        // 总充值金额
        refill_amounts: 0,
        // 扣款金额
        mch_amounts: 0,
      },
      isDisabled: false,
      tableData: [],
      isLoading: false,
      searchLoading: false,
      exportOrderList: [],
      curpage:1,
      total:5
    }
  },
  created() {
    this.getExportOrderList();
  },
  // 监听器
  watch: {
    dataRange(newVal) {
      // console.log(newVal);
      if (newVal == null) {
          this.startTime = '';
          this.endTime = '';
      }
    },
    value: {
      handler(newVal) {
        // console.log('newVal', newVal);
        if (!newVal) {
          this.isDisabled = true
        } else {
          this.isDisabled = false
        }
      },
      immediate: true
    }
  },
  methods: {
    onPageChange(page){
      if(page == this.curpage) return;
      this.curpage = page;
      this.getExportOrderList();
    },
    async getExportOrderList(){
      this.isLoading = true;
      const res = await getExportOrderList(this.curpage);
       this.isLoading = false;
      if(res && res.code == 200) {
         console.log('getExportOrderList',res.datas);
         this.exportOrderList = res.datas.data;
         this.total = res.datas.total;
      }
      else {
        this.$message.warning('获取导出列表失败')
      }
    },
  async onExportOrder(){
       try {
        if (!this.value) {
          if (this.timer) {
            window.clearTimeout(this.timer)
          }
          this.timer = setTimeout(() => {
            this.$message.warning('请选择日期类型')
          }, 1000)
          return
        }
        if(!this.dataRange) {
           this.$message.warning('请选择日期')
           return;
        }
        this.searchLoading = true
        this.isLoading = true
        console.log('this.dataRange',this.dataRange);
        this.startTime = this.dataRange/1000
        this.endTime = (this.dataRange+86400000)/1000
        let param = new URLSearchParams()
        param.append('time_type', this.value)
        param.append('start_time', this.startTime)
        param.append('end_time', this.endTime)
        let res = await getExportOrder(param)
       
        if (res && res.code == 200) {
           console.log('导出订单', res.datas.file_path);
           if(res.datas.file_path) {
            this.downloadfile(res.datas.file_path)
           }
           else{
             this.$message.warning('导出任务生成成功')
             this.curpage = 1;
             this.getExportOrderList();
           }
         
        }
        this.isLoading =  false
        this.searchLoading = false
      } catch (error) {
        console.log(error);
        this.isLoading =  false
        this.searchLoading = false
      }
    },
    downloadfile(file_path){
      const a = document.createElement('a');
            a.href = file_path;
            a.download = '导出订单';
            a.style.display = 'none';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
    },
    // 查询
    async onSearch() {
      try {
        if (!this.value) {
          if (this.timer) {
            window.clearTimeout(this.timer)
          }
          this.timer = setTimeout(() => {
            this.$message.warning('请选择日期类型')
          }, 1000)
          return
        }
         if(!this.dataRange) {
           this.$message.warning('请选择日期')
           return;
        }
        this.searchLoading = true
        this.isLoading = true
        this.startTime = this.dataRange/1000
        this.endTime = (this.dataRange+86400000)/1000
        let param = new URLSearchParams()
        param.append('time_type', this.value)
        param.append('start_time', this.startTime)
        param.append('end_time', this.endTime)
        let res = await getRec(param)
        console.log('对账管理', res);
        if (res && res.code == 200) {
          this.recForm = res.datas
          if (!this.tableData.length) {
            this.tableData.push(res.datas)
          } else {
            const obj = this.tableData[0]
            // console.log('obj', obj);
            this.tableData[0] = Object.assign(obj, res.datas)
          }
        }
        this.isLoading =  false
        this.searchLoading = false
      } catch (error) {
        console.log(error);
        this.isLoading =  false
        this.searchLoading = false
      }
    },
    // 重置
    onReset() {
      this.dataRange = [];
      this.startTime = ''
      this.endTime = ''
      this.value = ''
      this.recForm.count = 0
      this.recForm.successCount = 0
      this.recForm.errorCount = 0
      this.recForm.sendCount = 0
      this.recForm.refill_amounts = 0
      this.recForm.mch_amounts = 0
      this.tableData = []
    },
    // 时间获取焦点
    hFocusDate() {
      if (!this.value) {
        if (this.timer) {
            window.clearTimeout(this.timer)
          }
          this.timer = setTimeout(() => {
            this.$message.warning('请选择日期类型')
          }, 1000)
      }
    }
  }
}
</script>

<style scoped>
/deep/.el-date-editor .el-range-separator {
    padding: 0;
    width: 20px;/*no */
}
/deep/.el-date-editor .el-range-input {
    width: 100px;/*no */
}
/deep/.el-form-item {
  margin-bottom: 5px;/*no */
}
/deep/.el-card {
  padding-bottom: 0;
}
/deep/.el-date-editor .el-range-input {
    width: 100px;/*no */
}
/deep/.el-form-item__label {
    text-align: left;
}
/deep/.el-table td, 
/deep/.el-table th {
    padding: 7px 0;
}
/deep/.el-table .cell,
/deep/.el-table--border td:first-child .cell,
/deep/.el-table--border th:first-child .cell {
    padding-left: 7px;
}
/deep/.el-table .cell {
    padding-right: 7px;
}
</style>
<style>
.el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
  border-color: #ccc; 
}
.el-table--border::after, .el-table--group::after, .el-table::before{
  background-color: #ccc;
}
.el-table td, .el-table th.is-leaf {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.el-table thead {
  color: #606266;
}
</style>