|
@@ -0,0 +1,167 @@
|
|
|
|
+<template>
|
|
|
|
+ <a-card :bordered="false">
|
|
|
|
+ <!-- 搜索条件 -->
|
|
|
|
+ <div class="table-page-search-wrapper">
|
|
|
|
+ <a-form layout="inline">
|
|
|
|
+ <a-row :gutter="48">
|
|
|
|
+ <a-col :lg="6" :sm="12">
|
|
|
|
+ <a-form-item label="结算时间:">
|
|
|
|
+ <a-range-picker style="width:100%" v-model="queryOrderDate" format="YYYY-MM-DD" :placeholder="['开始时间', '结束时间']" />
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :lg="6" :sm="12">
|
|
|
|
+ <a-form-item label="结算单号">
|
|
|
|
+ <a-input class="full-width" v-model="queryParam.number" :maxLength="11" placeholder="请输入" allowClear />
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :lg="6" :sm="12">
|
|
|
|
+ <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
|
|
|
|
+ <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ </a-form>
|
|
|
|
+ </div>
|
|
|
|
+ <a-divider style="margin-top: 0;"/>
|
|
|
|
+ <!-- 合计 -->
|
|
|
|
+ <a-alert type="info" showIcon style="margin-bottom:15px">
|
|
|
|
+ <div class="ftext" slot="message">总计:<span>{{ 3 }}</span> 单,实收<span>¥{{ 2900 }}</span> 元</div>
|
|
|
|
+ </a-alert>
|
|
|
|
+ <!-- 列表 -->
|
|
|
|
+ <div>
|
|
|
|
+ <s-table
|
|
|
|
+ ref="table"
|
|
|
|
+ size="default"
|
|
|
|
+ rowKey="id"
|
|
|
|
+ bordered
|
|
|
|
+ :columns="columns"
|
|
|
|
+ :data="loadData">
|
|
|
|
+ <template slot="action" slot-scope="text, record">
|
|
|
|
+ <!-- <a-icon type="eye" title="查看" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" @click="handleDetail(record)" /> -->
|
|
|
|
+ <a-button type="primary" @click="handleDetail(record)">查看</a-button>
|
|
|
|
+ </template>
|
|
|
|
+ </s-table>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 应收结算记录详情弹窗 -->
|
|
|
|
+ <pay-settlement-records-details-modal :itemId="itemId" :openModalDetails="openModalDetails" @close="openModalDetails=false"></pay-settlement-records-details-modal>
|
|
|
|
+ </a-card>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import moment from 'moment'
|
|
|
|
+import {
|
|
|
|
+ STable,
|
|
|
|
+ VSelect
|
|
|
|
+} from '@/components'
|
|
|
|
+// import {
|
|
|
|
+// listCustomerBundle
|
|
|
|
+// } from '@/api/customerBundle'
|
|
|
|
+import PaySettlementRecordsDetailsModal from './PaySettlementRecordsDetailsModal.vue'
|
|
|
|
+export default {
|
|
|
|
+ name: 'PaySettlementRecordsList',
|
|
|
|
+ components: {
|
|
|
|
+ VSelect,
|
|
|
|
+ STable,
|
|
|
|
+ PaySettlementRecordsDetailsModal
|
|
|
|
+ },
|
|
|
|
+ data () {
|
|
|
|
+ return {
|
|
|
|
+ loadData: parameter => {
|
|
|
|
+ // const searchData = Object.assign(parameter, this.queryParam)
|
|
|
|
+ // console.log(this.queryOrderDate, 'this.queryOrderDate')
|
|
|
|
+ // 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 listCustomerBundle(searchData).then(res => {
|
|
|
|
+ // const no = (res.pageNo - 1) * res.pageSize
|
|
|
|
+ // for (let i = 0; i < res.list.length; i++) {
|
|
|
|
+ // const _item = res.list[i]
|
|
|
|
+ // _item.no = no + i + 1
|
|
|
|
+ // }
|
|
|
|
+ // return res
|
|
|
|
+ // })
|
|
|
|
+ },
|
|
|
|
+ queryOrderDate: undefined,
|
|
|
|
+ queryParam: {
|
|
|
|
+ number: '',
|
|
|
|
+ beginDate: '',
|
|
|
|
+ endDate: '',
|
|
|
|
+ orderFlag: ''
|
|
|
|
+ },
|
|
|
|
+ itemId: null, // 每条数据id
|
|
|
|
+ openModalDetails: false, // 默认关闭详情弹窗
|
|
|
|
+ columns: [{
|
|
|
|
+ title: '序号',
|
|
|
|
+ dataIndex: 'no',
|
|
|
|
+ width: '60px',
|
|
|
|
+ align: 'center'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '结算单号',
|
|
|
|
+ dataIndex: 'aaa',
|
|
|
|
+ width: '150px',
|
|
|
|
+ align: 'center'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '结算时间',
|
|
|
|
+ dataIndex: 'orderDate',
|
|
|
|
+ width: '150px',
|
|
|
|
+ align: 'center'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '结算订单数',
|
|
|
|
+ dataIndex: 'custMobile',
|
|
|
|
+ width: '150px',
|
|
|
|
+ align: 'center',
|
|
|
|
+ scopedSlots: {
|
|
|
|
+ customRender: 'userInfo'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '结算订单总金额(¥)',
|
|
|
|
+ dataIndex: 'bundleName',
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: '150px'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '操作',
|
|
|
|
+ dataIndex: 'action',
|
|
|
|
+ width: '100px',
|
|
|
|
+ align: 'center',
|
|
|
|
+ scopedSlots: {
|
|
|
|
+ customRender: 'action'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ // 查看详情
|
|
|
|
+ handleDetail (record) {
|
|
|
|
+ this.itemId = record.id
|
|
|
|
+ console.log(this.itemId)
|
|
|
|
+ this.openModalDetails = true
|
|
|
|
+ },
|
|
|
|
+ // 重置
|
|
|
|
+ resetSearchForm () {
|
|
|
|
+ this.queryOrderDate = undefined
|
|
|
|
+ this.queryParam = {
|
|
|
|
+ number: '',
|
|
|
|
+ beginDate: '',
|
|
|
|
+ endDate: '',
|
|
|
|
+ orderFlag: '',
|
|
|
|
+ custMobile: '',
|
|
|
|
+ bundleName: '',
|
|
|
|
+ vehicleNumber: ''
|
|
|
|
+ }
|
|
|
|
+ this.$refs.table.refresh(true)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style>
|
|
|
|
+</style>
|