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;">商家充值</Button>
            <Button class="select" icon="ios-remove" type="primary" style="margin-right: 10px;">商家罚款</Button>

            <Select class="select" style="width:200px;margin-right: 10px;" :clearable="true" placeholder="所属商家" filterable>
              <Option v-for="item in ['郎业','幸孕纪']" :value="item" :key="item">{{ item }}</Option>
            </Select>
            <Select class="select" style="width:200px;margin-right: 10px;" :clearable="true" placeholder="类型" filterable>
              <Option v-for="item in ['佣金','充值','退款']" :value="item" :key="item">{{ item }}</Option>
            </Select>

            <Button icon="ios-search" type="primary" style="margin-right: 10px;">搜索</Button>
            <Button icon="ios-repeat" type="primary" style="margin-right: 10px;">全部</Button>
            <Button icon="ios-download" type="primary" style="margin-right: 10px;">导出</Button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table :list="list" :table-item="table">
      <template v-slot:btns>
        <div></div>
      </template>
    </xy-table>

    <div style="display: flex;justify-content: flex-end;">
      <Page :total="5" show-elevator />
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'

export default {
  data() {
    return {
      list:JSON.parse('{"total":1351,"rows":[{"id":1354,"merchant_id":5,"order_item_id":1901,"type":"fee","related_type":"App\\\\Models\\\\OrderItemAssign","related_id":1255,"comment":null,"money":"-100.00","balance":"1200.00","created_at":"2022-07-11T06:40:17.000000Z","updated_at":"2022-07-11T06:40:17.000000Z","deleted_at":null,"type_name":"\u4f63\u91d1","related_type_name":"\u8ba2\u5355\u6d41\u8f6c","merchant":{"id":5,"username":"\u661f\u53d4\u53d4","name":"\u661f\u53d4\u53d4","logo_id":null,"address":"\u82cf\u5dde\u4e1c\u5434\u5317\u8def288\u53f7","slogan":null,"site_id":null,"boss":"\u66f9\u5f90\u6d2a","boss_phone":"\u65e0","contact":"\u66fc\u66fc","phone":"18930820580","certificate_id":null,"state":"active","created_at":"2021-08-30T03:07:28.000000Z","updated_at":"2022-07-11T06:40:17.000000Z","deleted_at":null,"business_number":"\u65e0","balance":"1200.00","lng":"120.62723","lat":"31.27856"},"order":{"id":1730,"order_id":1901,"product_type_id":10,"product_id":123,"original_price":null,"price":"0.00","commission":null,"sharing":"0.00","quantity":1,"created_at":"2022-06-22T12:52:34.000000Z","updated_at":"2022-06-29T08:43:00.000000Z","deleted_at":null,"state":"finished","merchant_id":17,"assigned_serial":null,"assign_id":1116,"laravel_through_key":1901,"state_name":"\u5df2\u5b8c\u6210"}},{"id":1353,"merchant_id":4,"order_item_id":1913,"type":"fee","related_type":"App\\\\Models\\\\OrderItemAssign","related_id":1258,"comment":null,"money":"-100.00","balance":"1870.00","created_at":"2022-07-11T06:38:36.000000Z","updated_at":"2022-07-11T06:38:36.000000Z","deleted_at":null,"type_name":"\u4f63\u91d1","related_type_name":"\u8ba2\u5355\u6d41\u8f6c","merchant":{"id":4,"username":"\u4f0a\u7d22","name":"\u82cf\u5dde\u5e02\u4f0a\u7d22\u6587\u5316\u4f20\u64ad\u6709\u9650\u516c\u53f8","logo_id":null,"address":"\u65b0\u533a\\/\u56ed\u533a\\/\u65b0\u751f\u513f\u4e0a\u95e8","slogan":null,"site_id":null,"boss":"\u6881\u542f\u6d77","boss_phone":"13913567424","contact":"\u5b59\u840d","phone":"19962192327","certificate_id":null,"state":"active","created_at":"2021-08-30T03:06:17.000000Z","updated_at":"2022-07-11T06:38:36.000000Z","deleted_at":null,"business_number":"91320508094081197J","balance":"1870.00","lng":"120.61648","lat":"31.31036"},"order":{"id":1742,"order_id":1913,"product_type_id":28,"product_id":39,"original_price":null,"price":"0.00","commission":null,"sharing":"0.00","quantity":1,"created_at":"2022-06-23T04:17:29.000000Z","updated_at":"2022-06-26T03:17:24.000000Z","deleted_at":null,"state":"accepted","merchant_id":3,"assigned_serial":null,"assign_id":1143,"laravel_through_key":1913,"state_name":"\u5df2\u63a5\u6536"}},{"id":1352,"merchant_id":7,"order_item_id":1911,"type":"fee","related_type":"App\\\\Models\\\\OrderItemAssign","related_id":1254,"comment":null,"money":"-100.00","balance":"3150.00","created_at":"2022-07-11T06:37:11.000000Z","updated_at":"2022-07-11T06:37:11.000000Z","deleted_at":null,"type_name":"\u4f63\u91d1","related_type_name":"\u8ba2\u5355\u6d41\u8f6c","merchant":{"id":7,"username":"\u82b3\u59ae\u8c46\u4e01","name":"\u82b3\u59ae\u8c46\u4e01\uff08\u7f8e\u8587\u513f\uff09","logo_id":null,"address":"\u4e0a\u95e8\u62cd\u6444","slogan":null,"site_id":null,"boss":"\u65e0","boss_phone":"\u65e0","contact":"\u6797\u6797","phone":"15724862376","certificate_id":null,"state":"active","created_at":"2021-08-30T03:09:32.000000Z","updated_at":"2022-07-11T06:37:11.000000Z","deleted_at":null,"business_number":"92320594MA25AF430U","balance":"3150.00","lng":"120.6698","lat":"31.26647"},"order":{"id":1740,"order_id":1911,"product_type_id":10,"product_id":123,"original_price":null,"price":"0.00","commission":null,"sharing":"0.00","quantity":1,"created_at":"2022-06-23T03:55:32.000000Z","updated_at":"2022-06-24T08:59:13.000000Z","deleted_at":null,"state":"canceled","merchant_id":17,"assigned_serial":null,"assign_id":1120,"laravel_through_key":1911,"state_name":"\u5df2\u53d6\u6d88"}},{"id":1351,"merchant_id":3,"order_item_id":1915,"type":"fee","related_type":"App\\\\Models\\\\OrderItemAssign","related_id":1257,"comment":null,"money"
      table:[
        {
          prop:'merchant.name',
          label:"商家名称"
        },
        {
          prop:"money",
          label:"金额",
          formatter:(cell,data,value,index)=>{
            return `${value}￥`
          }
        },
        {
          prop:"balance",
          label:"实时余额",
          formatter:(cell,data,value,index)=>{
            return `${value}￥`
          }
        },
        {
          prop:"created_at",
          label:"系统入账时间",
          formatter:(cell,data,value,index)=>{
            return parseTime(new Date(value),"{y}-{m}-{d} {h}:{i}:{s}")
          }
        },
        {
          prop:"related_type_name",
          label:"发生原因"
        },
        {
          prop:"comment",
          label:"备注"
        }
      ]
    }
  },
  methods: {}

}
</script>

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