123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218 |
- <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%"
- :disabledDate="disabledDate"
- 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.settleNo" placeholder="请输入" allowClear />
- </a-form-item>
- </a-col>
- <a-col :lg="6" :sm="12">
- <a-button type="primary" @click="refresh">查询</a-button>
- <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
- </a-col>
- </a-row>
- </a-form>
- </div>
- <a-divider />
- <!-- 合计 -->
- <a-alert type="info" showIcon style="margin-bottom:15px">
- <div class="ftext" slot="message">共<span>{{ orderTotal }}</span>单,实收<span>¥{{ amountTotal }}</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 {
- settlementRecordsList,
- settlementRecordsListTotal
- } from '@/api/FinancialManagement'
- import PaySettlementRecordsDetailsModal from './PaySettlementRecordsDetailsModal.vue'
- export default {
- name: 'SettlementRecordsList',
- 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 settlementRecordsList(searchData).then(res => {
- 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
- }
- return res.data
- })
- },
- queryOrderDate: undefined,
- queryParam: {
- settleNo: '',
- beginDate: '',
- endDate: ''
- },
- orderTotal: 0, // 订单数量
- amountTotal: 0, // 实收总金额
- itemId: '', // 每条数据id
- openModalDetails: false, // 默认关闭详情弹窗
- columns: [{
- title: '序号',
- dataIndex: 'no',
- width: '60px',
- align: 'center'
- },
- {
- title: '结算单号',
- dataIndex: 'settleNo',
- width: '150px',
- align: 'center'
- },
- {
- title: '结算时间',
- dataIndex: 'settleDate',
- width: '150px',
- align: 'center'
- },
- {
- title: '结算订单数',
- dataIndex: 'orderNum',
- width: '150px',
- align: 'center',
- scopedSlots: {
- customRender: 'userInfo'
- }
- },
- {
- title: '结算金额',
- dataIndex: 'realAmount',
- align: 'center',
- width: '150px'
- },
- {
- title: '操作',
- dataIndex: 'action',
- width: '100px',
- align: 'center',
- scopedSlots: {
- customRender: 'action'
- }
- }
- ]
- }
- },
- methods: {
- // 禁止不可选日期
- disabledDate (current) {
- return current && current > moment().endOf('day')
- },
- // 查看详情
- handleDetail (record) {
- this.itemId = record.settleNo
- console.log(this.itemId)
- this.openModalDetails = true
- },
- // 查询
- refresh () {
- this.$refs.table.refresh(true)
- this.getListTotal()
- },
- // 重置
- resetSearchForm () {
- this.queryOrderDate = undefined
- this.queryParam = {
- settleNo: '',
- beginDate: '',
- endDate: ''
- }
- this.$refs.table.refresh(true)
- this.getListTotal()
- },
- // 合计
- getListTotal () {
- const params = {
- settleNo: this.queryParam.settleNo,
- 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 = ''
- }
- // params.beginDate == null ? params.beginDate = getDate.getToday().starttime : null
- // params.endDate == null ? params.endDate = getDate.getToday().endtime : null
- settlementRecordsListTotal(params).then(res => {
- if (res.status == 200) {
- if (res.data) {
- this.orderTotal = res.data.orderNum || 0
- this.amountTotal = res.data.amount || 0
- } else {
- this.orderTotal = 0
- this.amountTotal = 0
- }
- }
- })
- }
- },
- beforeRouteEnter (to, from, next) {
- next(vm => {
- vm.resetSearchForm()
- })
- }
- }
- </script>
- <style scoped>
- .ftext span {
- color: #fa8c16;
- font-weight: bold;
- }
- </style>
|