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:160px;margin-right: 10px;" :clearable="true"
                    placeholder="所属商家" filterable
            >
              <Option v-for="item in merchants" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
            <Select v-model="select.type" class="select" style="width:100px;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>
            <Input v-model="select.serial" style="width: 140px;margin-right: 10px;" clearable placeholder="请输入订单编号"/>

            <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: '',
        serial:''
      },

      merchants: [],

      total: 0,
      list: [],
      table: [
        {
          prop: 'merchant.name',
          label: '商家名称',
          width: 240,
          align: 'left',
          fixed:'left'
        },
        {
          prop:'order.serial',
          label:'订单编号',
          width: 150
        },
        {
          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: '备注',
          minWidth:220,
          align: 'left'
        }
      ]
    }
  },
  methods: {
    downloadExel() {
      download(
        '/api/admin/finance/index',
        'get',
        {
          merchant_id: this.select.merchantId,
          type: this.select.type,
          serial: this.select.serial,
          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,
        serial: this.select.serial
      })
      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>