|
@@ -1,8 +1,190 @@
|
|
|
<template>
|
|
|
+ <a-card :bordered="false" class="leduQuery-table-page-search-wrapper">
|
|
|
+ <div class="leduQuery-searchForm">
|
|
|
+ <a-form layout="inline" @keyup.enter.native="refresh">
|
|
|
+ <a-row :gutter="20">
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item label="交易时间:" :label-col="{ span: 7 }" :wrapper-col="{ span: 17}">
|
|
|
+ <a-range-picker
|
|
|
+ style="width:100%"
|
|
|
+ id="releaseRecordList-queryOrderDate"
|
|
|
+ :disabledDate="disabledDate"
|
|
|
+ v-model="queryOrderDate"
|
|
|
+ :format="dateFormat"
|
|
|
+ :placeholder="['开始时间', '结束时间']" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item label="商户名称" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
|
|
|
+ <a-input id="releaseRecordList-customerMobile" allowClear :maxLength="11" v-model=" queryParam.customerMobile" placeholder="请输入商户名称" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-button class="handle-btn serach-btn" id="releaseRecordList-serach" type="primary" @click="refresh">查询</a-button>
|
|
|
+ <a-button class="handle-btn" id="releaseRecordList-reset" @click="handleReset">重置</a-button>
|
|
|
+ <a-button class="handle-btn export-btn" id="releaseRecordList-export" @click="handleExport">导出</a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ <!-- 合计 -->
|
|
|
+ <a-alert type="info" showIcon style="margin-bottom:15px">
|
|
|
+ <div class="ftext" slot="message">总计<span> {{ orderTotal }} </span>个,收取乐豆<span> {{ amountTotal }} </span>个</div>
|
|
|
+ </a-alert>
|
|
|
+ <s-table
|
|
|
+ ref="table"
|
|
|
+ size="default"
|
|
|
+ :rowKey="(record) => record.id"
|
|
|
+ :columns="columns"
|
|
|
+ :data="loadData"
|
|
|
+ bordered>
|
|
|
+ </s-table>
|
|
|
+ </a-card>
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-</script>
|
|
|
+import { STable, VSelect } from '@/components'
|
|
|
+import { getDeliveryLogList, getDeliveryLogTotal, stationList } from '@/api/releaseRecord.js'
|
|
|
+import moment from 'moment'
|
|
|
+import getDate from '@/libs/getDate.js'
|
|
|
+export default {
|
|
|
+ components: { STable, VSelect },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ form: this.$form.createForm(this),
|
|
|
+ formItemLayout: {
|
|
|
+ labelCol: { span: 4 },
|
|
|
+ wrapperCol: { span: 16 }
|
|
|
+ },
|
|
|
+ // 将默认当天时间日期回显在时间选择框中
|
|
|
+ queryOrderDate: [
|
|
|
+ moment(getDate.getRecentday().starttime, this.dateFormat),
|
|
|
+ moment(getDate.getRecentday().endtime, this.dateFormat)
|
|
|
+ ],
|
|
|
+ dateFormat: 'YYYY-MM-DD',
|
|
|
+ // 查询参数
|
|
|
+ queryParam: {
|
|
|
+ beginDate: null, // 开始时间
|
|
|
+ endDate: null, // 结束时间
|
|
|
+ customerMobile: '' // 用户手机
|
|
|
+ },
|
|
|
+ optionData: [],
|
|
|
+ orderTotal: 0, // 总单数
|
|
|
+ amountTotal: 0, // 总金额
|
|
|
+ // 表头
|
|
|
+ columns: [
|
|
|
+ { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
|
|
|
+ { title: '商户名称', dataIndex: 'stationName', width: 200, align: 'center' },
|
|
|
+ { title: '收取乐豆个数', dataIndex: 'stationName', width: 200, align: 'center' }
|
|
|
+ ],
|
|
|
+ // 加载数据方法 必须为 Promise 对象
|
|
|
+ loadData: parameter => {
|
|
|
+ const searchData = Object.assign(parameter, this.queryParam)
|
|
|
+ if (this.queryOrderDate && this.queryOrderDate.length) {
|
|
|
+ searchData.beginDate = moment(this.queryOrderDate[0]).format('YYYY-MM-DD')
|
|
|
+ searchData.endDate = moment(this.queryOrderDate[1]).format('YYYY-MM-DD')
|
|
|
+ } else {
|
|
|
+ searchData.beginDate = ''
|
|
|
+ searchData.endDate = ''
|
|
|
+ }
|
|
|
+ return getDeliveryLogList(searchData).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ const no = (res.data.pageNo - 1) * res.data.pageSize
|
|
|
+ for (let i = 0; i < res.data.list.length; i++) {
|
|
|
+ const _item = res.data.list[i]
|
|
|
+ _item.no = no + i + 1
|
|
|
+ }
|
|
|
+ this.getListTotal()
|
|
|
+ return res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeRouteEnter (to, from, next) {
|
|
|
+ next(vm => {
|
|
|
+ vm.handleReset()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ moment,
|
|
|
+ // 不可选日期
|
|
|
+ disabledDate (date, dateStrings) {
|
|
|
+ return date && date.valueOf() > Date.now()
|
|
|
+ },
|
|
|
+ // 导出
|
|
|
+ handleExport () {
|
|
|
|
|
|
-<style>
|
|
|
+ },
|
|
|
+ // 查询
|
|
|
+ refresh () {
|
|
|
+ this.$refs.table.refresh(true)
|
|
|
+ },
|
|
|
+ // 合计
|
|
|
+ getListTotal () {
|
|
|
+ const params = {
|
|
|
+ customerMobile: this.queryParam.customerMobile,
|
|
|
+ beginDate: this.queryParam.beginDate,
|
|
|
+ endDate: this.queryParam.endDate
|
|
|
+ }
|
|
|
+ if (this.queryOrderDate && this.queryOrderDate.length) {
|
|
|
+ params.beginDate = moment(this.queryOrderDate[0]).format('YYYY-MM-DD')
|
|
|
+ params.endDate = moment(this.queryOrderDate[1]).format('YYYY-MM-DD')
|
|
|
+ } else {
|
|
|
+ params.beginDate = ''
|
|
|
+ params.endDate = ''
|
|
|
+ }
|
|
|
+ getDeliveryLogTotal(params).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ if (res.data) {
|
|
|
+ this.orderTotal = res.data.totalNum || 0
|
|
|
+ this.amountTotal = res.data.goldNum || 0
|
|
|
+ } else {
|
|
|
+ this.orderTotal = 0
|
|
|
+ this.amountTotal = 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 重置
|
|
|
+ handleReset () {
|
|
|
+ this.queryOrderDate = [
|
|
|
+ moment(getDate.getRecentday().starttime, this.dateFormat),
|
|
|
+ moment(getDate.getRecentday().endtime, this.dateFormat)
|
|
|
+ ]
|
|
|
+ this.queryParam.customerMobile = ''
|
|
|
+ this.$refs.table.refresh(true)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+ .leduQuery-table-page-search-wrapper{
|
|
|
+ .leduQuery-searchForm{
|
|
|
+ .ant-form-inline .ant-form-item{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ // 搜索框的下间距
|
|
|
+ .ant-form-item {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .handle-btn{
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ .serach-btn{
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .export-btn{
|
|
|
+ background-color: #ff9900;
|
|
|
+ border-color: #ff9900;
|
|
|
+ color: #fff;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ .export-btn.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger), .export-btn.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger){
|
|
|
+ color: #fff;
|
|
|
+ border-color: #ff9900;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|