yanshouban/src/views/online/reconciliationProcessing/index.vue

<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>交易联机</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">对账处理</span></div>
      </div>
      <div>
        <!-- 搜索 -->
        <div class="formSearch">
          <el-form
            :inline="true"
            :model="formInline"
            label-position="left"
          >
            <el-form-item label="对账状态">
              <el-select
                v-model="formInline.isReconciliation"
                placeholder="请选择"
                style="width: 100px;"
              >
                <el-option label="未对账" value="0" />
                <el-option label="对账成功" value="1" />
                <el-option label="对账失败" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="下单时间">
              <el-date-picker
                v-model="formInline.dates"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width:168px"
              />
            </el-form-item>
            <el-form-item label="支付金额">
                <div>
                  <el-input
                    placeholder="请输入"
                    style="width: 80px;"
                    v-model.number="minOrderPrice">
                  </el-input>
                  至
                  <el-input
                    placeholder="请输入"
                    style="width:80px;"
                    v-model.number="maxOrderPrice
">
                  </el-input>
                </div>
            </el-form-item>
            <el-form-item label="商户名称">
             <el-input
               placeholder="请输入"
               v-model="formInline.shopName">
             </el-input>
            </el-form-item>
          </el-form>
          <div style="width:16%">
            <el-button
              style="background-color: #3F9B6A;color: #fff;"
              @click="search"
              >查询
            </el-button>
            <el-button
             class="buttonHover"
               style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
              @click="resetting"
              >重置
            </el-button>
          </div>
        </div>
        <div style="padding-bottom:20px;">
          <el-button
            style="background-color: #3F9B6A;color: #fff;"
            @click="daochu"
            >导出
          </el-button>
        </div>
        <!-- 表格 -->
        <div class="tableBox">
          <el-table
            ref="multipleTable"
            :data="tableData"
           :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
            tooltip-effect="dark"
          >
            <el-table-column label="订单id" width="150">
              <template slot-scope="scope">{{ scope.row.orderId }}</template>
            </el-table-column>
            <el-table-column prop="number" label="商品数量" width="100" />
            <el-table-column prop="shopName" label="商户名称" width="220" show-overflow-tooltip />
            <el-table-column prop="customerName" label="下单账户" show-overflow-tooltip />
            <el-table-column prop="receiveName" label="收件人" show-overflow-tooltip />
            <el-table-column prop="receivePhone" label="手机号" show-overflow-tooltip />
            <el-table-column prop="price" label="支付金额（元）" width="120" />
            <el-table-column prop="createTime" label="下单时间" show-overflow-tooltip />
            <el-table-column label="对账状态" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.isReconciliation == 0" >未对账</span>
                <span v-if="scope.row.isReconciliation == 2" >对账失败</span>
                <span v-if="scope.row.isReconciliation == 1" >对账成功</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" show-overflow-tooltip>
              <template slot-scope="scope">
                <div class="btnList">
                  <div class="tableBtn greens" @click="addbuss(scope.row)"  v-if="scope.row.isReconciliation == 0" >对账</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="fenye">
            <el-pagination
              :current-page="formInline.page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {merchantQueries,reconciliation,excelGetAll} from '../../../api/online.js'
import { orderGetAll , orderExport} from '@/api/order'
export default {
  data () {
    return {
      rules: {},
      formInline: {
          searchType: '1',
          search: '', // 搜索字段
          state: '4',
          // afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭
          dates: [], // 下单时间数组
          page: 1,
          shopName: '',
          pageSize: 10
      },
      minOrderPrice:null,
      maxOrderPrice:null,
      currentPage: 1,
      total: 0,
      flag: false,
      pageSize: 10,
      ggXin: false,
      index:1,
      formSel:{
        state:'',
        minMach:'',
        maxMach:'',
        shopName:'',
      },
      paryTime:[],
      tableData: [],
      pageindex: {
        merchantId:'9E602E5977EC48DEA06D42C67F4C93F0',
        page: 1,
        limit: 10,
        orderTimeStart:'',
        orderTimeEnd:'',
      },
      orderTimeStart:'',
      orderTimeEnd:'',
      duiData:{
          orderNo:'',
          page: 1,
          limit: 10,
          orderTimeStart:'',
          orderTimeEnd:'',
        orderPrice:[]
      }
    }
  },
  computed: {},
  mounted(){
    this.getAll()
    this.getOrder()
  },
  methods: {
    async getAll (formInline) {
      this.tableLoading = true
      const res = await orderGetAll(this.formInline)
      this.tableData = res.data.list
      this.total = res.data.total
      this.tableData.map(res=>{
        res.customerName = this.$decrypt(res.customerName)
        res.receiveName = this.$decrypt(res.receiveName)
        res.receivePhone = this.$decrypt(res.receivePhone)
        res.receiveAdress = this.$decrypt(res.receiveAdress)
      })
      // this.tableLoading = false
    },
   async getOrder(){
  //    this.getFirstDayOfYear()
  //   this.getLastDayOfYear()
  //  const res =   await merchantQueries(this.pageindex)
  //   this.tableData = JSON.parse(res.data).records
  // this.total = JSON.parse(res.data).records.length
  // console.log(JSON.parse(res.data))
    },
getFirstDayOfYear() {
  const now = new Date();
  const year = now.getFullYear();
  const firstDay = new Date(year, 0, 1, 0, 0, 0, 0);
  this.orderTimeStart = this.formatDate(firstDay);
},
  getLastDayOfYear() {
    const now = new Date()
    const year = now.getFullYear()
    const lastDay = new Date(year, 11, 31, 23, 59, 59, 999)
    this.orderTimeEnd = this.formatDate(lastDay)
  },
  formatDate(date) {
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  },
    addbuss(item) {
      let obj ={
        orderNo:item.orderFormid,
        payState:"",
        merchantId:"9E602E5977EC48DEA06D42C67F4C93F0",
        page:1,
        limit:10,
        orderTimeStart:this.orderTimeStart,
        orderTimeEnd:this.orderTimeEnd
      }
             const h = this.$createElement;
                     this.$msgbox({
                       title: '对账',
                       message: h('p', null, [
                         h('span', null, '是否已对账 '),
                       ]),
                       showCancelButton: true,
                       showClose:false,
                       confirmButtonText: '确定',
                       cancelButtonText: '取消',
                       customClass:'oe-dialog-btn',
                       beforeClose: (action, instance, done) => {
                         if (action === 'confirm') {
                           reconciliation(obj).then(res=>{
                             this.$message({
                               message: res.data,
                               type: 'success'
                             })
                             this.getAll()
                           })
                            done();
                         } else {
                           done();
                         }
           }
           })
    },
    onSubmit(){
      if(this.formInline.paryTime.length !=0){
        this.pageindex.orderTimeStart = this.formInline.paryTime[0]
          this.pageindex.orderTimeEnd = this.formInline.paryTime[1]
          const res =   merchantQueries(this.pageindex).then(res=>{
                this.tableData = JSON.parse(res.data).records
                this.total = JSON.parse(res.data).records.length
              })
      }
    },
    resetting(){
      // this.pageindex={
      //   merchantId:'9E602E5977EC48DEA06D42C67F4C93F0',
      //   page: 1,
      //   limit: 10,
      //   orderTimeStart:'',
      //   orderTimeEnd:'',
      // }
      this.formInline = {
            searchType: '1',
            search: '', // 搜索字段
            state: '4',
            // afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭
            dates: [], // 下单时间数组
            page: 1,
            shopName: '',
            pageSize: 10
      }
      this.minOrderPrice = null
        this.maxOrderPrice = null
    this.getAll()
    },
  async daochu(){
 let res = await excelGetAll(this.formInline)
    if(!res){
      return
    }
    const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
    const fileName = '对账结果.xls'
    if ('download' in document.createElement('a')) {
       // 非IE下载
       const elink = document.createElement('a')
       elink.download = fileName
       elink.style.display = 'none'
       elink.href = URL.createObjectURL(blob)
       document.body.appendChild(elink)
       elink.click()
       URL.revokeObjectURL(elink.href) // 释放URL 对象
       document.body.removeChild(elink)
     } else {
      // IE10+下载
      navigator.msSaveBlob(blob, fileName)
    }
    this.$message({
      message: '导出成功',
      type: 'success'
    })
    },
    handleSizeChange(){
    },
    handleCurrentChange(){
    },
    search () {
      this.total = 1
      this.formInline.page = 1
       if(this.minOrderPrice!=null && this.minOrderPrice!= '' ){
         this.formInline.minOrderPrice =  this.minOrderPrice
       }
       if(this.maxOrderPrice!=null && this.maxOrderPrice!= '' ){
         this.formInline.maxOrderPrice =  this.maxOrderPrice
       }
      this.getAll(this.formInline)
    },
    closeFn () {
      this.ggXin = false
      this.index = 1
    }
  }
}
</script>
<style scoped >
.zhuti {
    padding: 0 20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;
    position: relative;
  }
/deep/ .el-form-item__content {
  line-height: 0;
}
.tableBtn {
  display: inline-block;
  margin-right: 10px;
}
::v-deep .formSearch {
  position: relative;
  margin: 20px 0;
  display: flex;
  width: 100%;
  font-size: 14px;
  justify-content: space-between;
  .el-form-item__label{
    font-size: 14px;
    color: #000;
  }
}
.greens {
  color: #3F9B6A;
}
.fenye {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  position: relative;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #3F9B6A;
}
.el-row {
  margin-bottom: 20px;
}
:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
/deep/ .bg-purple[data-v-0e3fe4ec] {
  background: #fff;
  height: 50px;
}
/deep/ .el-form--label-top .el-form-item__label {
  padding: 0;
}
.demo-input-suffix{
  display: flex;
  margin-right: 20px;
}
.pagination{
  text-align:right;
  line-height: 20px;
}
</style>
<style lang="scss" scoped>
  ::v-deep .buttonHover:hover {
    color: #3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }
</style>