yunyubang-web/src/views/finance/flow.vue

<template>
  <div style="padding: 0 20px;">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="平台财务管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
            <Button class="select" icon="ios-add" type="primary" style="margin-right: 10px;" @click="$refs['rechargeFine'].isShow = true,$refs['rechargeFine'].type = 'recharge'">商家充值</Button>
            <Button class="select" icon="ios-remove" type="primary" style="margin-right: 10px;" @click="$refs['rechargeFine'].isShow = true,$refs['rechargeFine'].type = 'fine'">商家罚款</Button>

            <Select v-model="select.merchantId" class="select" style="width:200px;margin-right: 10px;" :clearable="true" placeholder="所属商家" filterable>
              <Option v-for="item in merchants" :value="item.id" :key="item.id">{{ item.username }}</Option>
            </Select>
            <Select v-model="select.type" class="select" style="width:200px;margin-right: 10px;" :clearable="true" placeholder="类型" filterable>
              <Option v-for="item in [{label:'佣金',value:'fee'},{label:'充值',value:'recharge'},{label:'退款',value:'fine'}]" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>

            <Button icon="ios-search" type="primary" style="margin-right: 10px;" @click="getFlow">搜索</Button>
            <Button icon="ios-repeat" type="primary" style="margin-right: 10px;" @click="select = {pageIndex:1,pageSize:10,merchantId:'',type:''},getFlow()">全部</Button>
            <Button icon="ios-download" type="primary" style="margin-right: 10px;" @click="downloadExel">导出</Button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table :total="total" @pageSizeChange="e => select.pageSize = e" @pageIndexChange="pageChange" :list="list" :table-item="table">
      <template v-slot:btns>
        <div></div>
      </template>
    </xy-table>

    <rechargeFine ref="rechargeFine" :merchants="merchants" @refresh="getFlow"></rechargeFine>
  </div>
</template>

<script>
import {index,getMerchants} from "@/api/finance"
import { parseTime } from '@/utils'
import {download} from '@/utils/downloadRequest'

import rechargeFine from '@/views/finance/component/rechargeFine'
export default {
  components:{
    rechargeFine
  },
  data() {
    return {
      select:{
        pageIndex:1,
        pageSize:10,
        merchantId:'',
        type:''
      },

      merchants:[],

      total:0,
      list:[],
      table:[
        {
          prop:'merchant.name',
          label:"商家名称",
          width: 240,
          align:'left'
        },
        {
          prop:"money",
          label:"金额",
          align:'right',
          width: 140
        },
        {
          prop:"balance",
          label:"实时余额",
          align:'right',
          width: 140
        },
        {
          prop:"created_at",
          label:"系统入账时间",
          width:220,
          formatter:(cell,data,value,index)=>{
            return parseTime(new Date(value),"{y}-{m}-{d} {h}:{i}:{s}")
          }
        },
        {
          prop:"related_type_name",
          label:"发生原因",
          width: 140,
        },
        {
          prop:"comment",
          label:"备注",
          align:'left'
        }
      ]
    }
  },
  methods: {
    downloadExel(){
      download('/api/admin/finance/index','get',{is_export:1},'财务流水.xlsx')
    },

    pageChange(e){
      this.select.pageIndex = e
      this.getFlow()
    },

    async getMerchant(){
      const res = await getMerchants()
      this.merchants = res
    },
    async getFlow(){
      const res = await index({
        page:this.select.pageIndex,
        page_size:this.select.pageSize,
        merchant_id:this.select.merchantId,
        type:this.select.type
      })
      this.list = res.data
      this.total = res.total
    }
  },
  mounted() {
    this.getMerchant()
    this.getFlow()
  }

}
</script>

<style scoped lang="scss">
@media screen  and (max-width: 1190px){
  .select{
    margin-bottom: 6px;
  }
}
</style>