qmx_page_admin/src/views/sales/settleList.vue

<template>
  <div class="jie-suan">
    <h1>结算列表</h1>
    <table-lists 
        ref="tableLists" 
        v-model="list" 
        :filter="filter" 
        :sear="sear"
        :filterSear="2" 
        @emptyFilter="emptyFilter"
        requestApi="/sales/settleList" 
        style="background:#fff;padding:10px"
        @loading="load"
    >
      <template slot="filterContent">
          <FormItem label="可提现金额：" :label-width="90">
            <Input style="width: 73px" type="text" size="large" v-model="filter.cashMoneyMin" placeholder="最小金额" clearable/>
            <Input style="width: 73px;margin-left: 2px" type="text" size="large" v-model="filter.cashMoneyMax" placeholder="最大金额" clearable/>
        </FormItem>
        <FormItem label="结算时间：" :label-width="70" style="margin-right: 30px">
            <DatePicker 
                type="datetime" 
                size="large"
                v-model="dataVals1"
                placeholder="起始时间" 
                format="yyyy-MM-dd HH:mm:ss"
                style="width: 172px"
                :options="options1"
                @on-change="handleChange1"
                @on-ok="confirmed1"
                @on-open-change="opened1"
            ></DatePicker>
            <DatePicker 
                type="datetime" 
                size="large"
                v-model="dataVals2"
                placeholder="截止时间" 
                format="yyyy-MM-dd HH:mm:ss"
                style="width:172px; margin-left:2px"
                :options="options2"
                @on-change="handleChange2"
                @on-ok="confirmed2"
                @on-open-change="opened2"
            ></DatePicker>
        </FormItem>
      </template>
      <template slot="filterRight">
          <Input suffix="md-search" type="text" size="large" v-model="sear.keyword" placeholder="搜索单号或手机号" clearable class="ser-ipt"/>
      </template>
      <Table 
        size="large"
        ellipsis 
        :loading="loading" 
        ref="selection" 
        :columns="columns" 
        :data="list.lists" 
        stripe
        @on-row-click="rowClick"
      >
      </Table>
      <template slot="options">
        <div style="color:#d7d7d7;font-size:14px">共计{{list.total ? list.total : '0'}}条结算记录</div>
      </template>
    </table-lists>
  </div>
</template>
<script>
import { ChangeDate } from '../../assets/js/date'
export default {
    methods: {
        load (val) {
            this.loading = val
        },
        rowClick (data) {
            const news = this.$router.resolve({path: '/sales/settleList/settleDetail', query:{id:data.id, uid:data.uid, deType:'jiesuan'}})
            window.open(news.href,'_blank')
        },
        emptyFilter (val) {
            if (val) {
                this.filter.keyword = ''
                this.filter.cashMoneyMin = ''
                this.filter.cashMoneyMax = ''
                this.filter.cashTimeStart = ''
                this.filter.cashTimeEnd = ''
                this.dataVals1 = ''
                this.dataVals2 = ''
            }
        },
        handleChange1 (date) {
            this.filter.cashTimeStart = date
        },
        handleChange2 (date) {
            this.filter.cashTimeEnd = date
        },
        confirmed1 () {
            if (this.filter.cashTimeStart && this.filter.cashTimeEnd) {
                if (this.filter.cashTimeStart > this.filter.cashTimeEnd) {
                    this.dataVals1 = ''
                    this.filter.cashTimeStart = ''
                    this.$Notice.warning({
                        title: '警告提示',
                        desc: "起始时间应小于截止时间",
                        duration: 5
                    })
                }
            }
        },
        confirmed2 () {
            if (this.filter.cashTimeStart && this.filter.cashTimeEnd) {
                if (this.filter.cashTimeStart > this.filter.cashTimeEnd) {
                    this.dataVals2 = ''
                    this.filter.cashTimeEnd = ''
                    this.$Notice.warning({
                        title: '警告提示',
                        desc: "截止时间应大于起始时间",
                        duration: 5
                    })
                }
            }
        },
        opened1 (val) {
            if (val) {
                return
            } else {
                this.confirmed1()
            }
        },
        opened2 (val) {
            if (val) {
                return
            } else {
                this.confirmed2()
            }
        }
    },
    data () {
        return {
            lis: '',
            loading: false,
            requestType: [],
            dataVals1: '',
            dataVals2: '',
            filter: {
                // keyword: '',
                cashMoneyMin: '',
                cashMoneyMax: '',
                cashTimeStart: '',
                cashTimeEnd: ''
            },
            sear: {
                keyword: ''
            },
            options1: {
                disabledDate: (function(date) {
                    var timeEnd = ChangeDate(this.filter.cashTimeEnd)
                    var p_time = new Date(timeEnd).getTime()
                    return date && date.valueOf() > p_time;
                }).bind(this)
            },
            options2: {
                disabledDate: (function(date) {
                    var timeStart = ChangeDate(this.filter.cashTimeStart)
                    var p_time = new Date(timeStart).getTime()
                    return date && date.valueOf() < p_time;
                }).bind(this)
            },
            columns: [
                {
                    title: '结算单号',
                    key: 'code',
                    align: 'center'
                },
                {
                    title: '手机号',
                    key: 'phone',
                    align: 'center'
                },
                {
                    title: '结算时间',
                    key: 'createtime',
                    width: '170',
                    align: 'center'
                },
                {
                    title: '销售金额',
                    key: 'sale_cash',
                    align: 'center',
                    render: (h, {row}) => {
                        return h('div','￥' + (row.sale_cash/100).toLocaleString('en-US'))
                    }
                },
                {
                    title: '佣金金额',
                    key: 'commission',
                    align: 'center',
                    render: (h, {row}) => {
                        return h('div','￥' + (row.commission/100).toLocaleString('en-US'))
                    }
                },
                {
                    title: '个税金额',
                    key: 'tax_cash',
                    align: 'center',
                    render: (h, {row}) => {
                        return h('div','￥' + (row.tax_cash/100).toLocaleString('en-US'))
                    }
                },
                {
                    title: '认证金额',
                    key: 'auth_cash',
                    align: 'center',
                    render: (h, {row}) => {
                        return h('div','￥' + (row.auth_cash/100).toLocaleString('en-US'))
                    }
                },
                {
                    title: '可提现金额',
                    key: 'can_cash',
                    className: 'table-info-settle',
                    align: 'center',
                    render: (h, {row}) => {
                        return h('div','￥' + (row.can_cash/100).toLocaleString('en-US'))
                    }
                }
            ],
            list: []
        }
    },
}
</script>

<style lang="scss" scoped>
.jie-suan {
    h1 {
        font-size:24px;
        color:#3f4047;
        padding: 10px 0 20px 10px;
    }
    .ser-ipt {
        width: 162px;
    }
}
</style>