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.username }}</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:'refund'},{label:'扣款',value:'fine'},{label:'手工返佣',value:'manually_refund_fee'},{label:'自动返佣',value:'auto_refund_fee'}]"
                :value="item.value" :key="item.value">{{ item.label }}
              </Option>
            </Select>
            <Input v-model="select.serial" style="width: 140px;margin-right: 10px;" clearable placeholder="请输入订单编号" />

            <div>
              <Input v-model="select.money_min" style="width: 90px;" clearable placeholder="开始金额" />
              <span>~</span>
              <Input v-model="select.money_max" style="width: 90px;margin-right: 10px;" clearable placeholder="结束金额" />
            </div>
              <div class="select-content-item">
                <!-- <div class="select-content-item-label">日期</div> -->
                <div>
                  <el-date-picker style="width: 260px;margin-right: 10px;height:32px;line-height:32px" @change="changeCreatedDate" v-model="select.createdDate" type="daterange"
                    :picker-options="pickerOptions" value-format="yyyy-MM-dd" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                  </el-date-picker>
                </div>
              </div>

            <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:'',start_date:'',end_date:''},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: '',
          money_min: '',
          money_max: ''
        },

        merchants: [],
pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        total: 0,
        list: [],
        table: [{
            prop: 'merchant.username',
            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: 'recharge.paid_at',
            label: '商户充值时间',
            width: 220,
            formatter: (cell, data, value, index) => {
              if (value)
                return parseTime(new Date(value), '{y}-{m}-{d} {h}:{i}:{s}')
            }
          },
          {
            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,
            start_date:this.select.start_date,
            end_date:this.select.end_date
          },
          '财务流水.xlsx')
      },

      pageChange(e) {
        this.select.pageIndex = e
        this.getFlow()
      },
      changeCreatedDate(e) {
        this.select.start_date = e[0];
        this.select.end_date = e[1];
      },

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

  }
</script>
<style scoped>
  /deep/ .el-date-editor .el-range__icon{
      line-height: 25px;
    }
  /deep/ .el-date-editor .el-range-separator{
    line-height: 25px;
  }
  /deep/ .el-date-editor .el-range__close-icon{
    line-height: 25px;
  }
</style>
<style scoped lang="scss">
  @media screen and (max-width: 1190px) {
    .select {
      margin-bottom: 6px;
    }
  }
  // .select-content-item{
  //   v::deep .el-date-editor .el-range__icon{
  //     line-height: 25px;
  //   }
  // }

</style>