123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232 |
- <template>
- <a-card :bordered="false">
- <!-- 搜索条件 -->
- <div class="table-page-search-wrapper">
- <a-form layout="inline" @keyup.enter.native="refresh">
- <a-row :gutter="48">
- <a-col :lg="8" :sm="12">
- <a-form-item label="提现时间" :label-col="{ span:4 }" :wrapper-col="{ span:16}">
- <a-range-picker
- id="PaySettlementRecords-queryOrderDate"
- :disabledDate="disabledDate"
- style="width: 100%;"
- v-model="queryOrderDate"
- :show-time="{ format: 'HH:mm' }"
- format="YYYY-MM-DD HH:mm"
- :placeholder="['开始时间', '结束时间']" />
- </a-form-item>
- </a-col>
- <a-col :lg="6" :sm="12">
- <a-button type="primary" @click="refresh" id="PaySettlementRecords-refresh">查询</a-button>
- <a-button style="margin-left: 8px" @click="resetSearchForm" id="PaySettlementRecords-resetSearchForm">重置</a-button>
- </a-col>
- </a-row>
- </a-form>
- </div>
- <!-- 合计 -->
- <div class="ftext" >
- <a-button class="btn-cont" type="primary" @click="openModal" id="PaySettlementRecords-refresh">申请提现</a-button>
- 可提现余额:<span>{{ amountTotal }}</span>元</div>
- <!-- 列表 -->
- <div>
- <s-table
- ref="table"
- size="default"
- rowKey="id"
- bordered
- :columns="columns"
- :data="loadData">
- </s-table>
- </div>
- <!-- 申请提现弹窗 -->
- <cashOut-modal :openCashOutModal="openCashOutModal" @close="openCashOutModal=false" @refresh="refresh"></cashOut-modal>
- </a-card>
- </template>
- <script>
- import moment from 'moment'
- import {
- STable,
- VSelect
- } from '@/components'
- import cashOutModal from './CashOutModal.vue'
- import {
- settlementRecordsList,
- settlementRecordsListTotal
- } from '@/api/FinancialManagement'
- export default {
- name: 'CashOutManagement',
- components: {
- VSelect,
- STable,
- cashOutModal
- },
- data () {
- return {
- openCashOutModal: false, // 是否打开申请提现弹窗
- queryOrderDate: undefined,
- storeList: [
- { id: 11, name: '常青二路店' },
- { id: 112, name: '西部大道店' },
- { id: 114, name: '渭滨路店' },
- { id: 115, name: '未央店' },
- { id: 116, name: '凤城八路店' }
- ],
- queryParam: {
- storeName: '', // 客户名称
- partName: '', // 配件名称
- status: '', // 分账状态
- settleNo: '',
- beginDate: '',
- endDate: ''
- },
- orderTotal: 0, // 订单数量
- amountTotal: 0, // 实收总金额
- itemId: '', // 每条数据id
- settleId: '',
- columns: [{
- title: '序号',
- dataIndex: 'no',
- width: 60,
- align: 'center'
- },
- {
- title: '提现时间',
- dataIndex: 'settleDate',
- width: 200,
- align: 'center'
- },
- {
- title: '提现单号',
- dataIndex: 'settleNo',
- width: 150,
- align: 'center'
- },
- {
- title: '申请提现金额',
- dataIndex: 'orderNum',
- width: 150,
- align: 'center',
- scopedSlots: {
- customRender: 'userInfo'
- }
- },
- {
- title: '开户名',
- dataIndex: 'realAmount',
- align: 'center',
- width: 150
- },
- {
- title: '银行卡号',
- dataIndex: 'code',
- align: 'center',
- width: 150
- },
- {
- title: '状态',
- dataIndex: 'status',
- align: 'center',
- width: 150
- },
- {
- title: '备注',
- dataIndex: 'remarks',
- width: 100,
- align: 'center',
- customRender: (text) => {
- return text || '--'
- }
- }
- ],
- 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
- })
- }
- }
- },
- methods: {
- // 禁止不可选日期
- disabledDate (current) {
- return current && current > moment().endOf('day')
- },
- // 查询
- refresh () {
- this.$refs.table.refresh(true)
- this.getListTotal()
- },
- // 重置
- resetSearchForm () {
- this.queryOrderDate = null
- 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 = ''
- }
- 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
- }
- }
- })
- },
- // 打开提现弹窗
- openModal () {
- this.openCashOutModal = true
- }
- //
- },
- beforeRouteEnter (to, from, next) {
- next(vm => {
- vm.queryOrderDate = null
- })
- }
- }
- </script>
- <style scoped lang="less">
- .ftext{
- margin-bottom: 15px;
- font-size: 18px;
- .btn-cont{
- margin-right: 20px;
- }
- }
- .ftext span {
- color: #fa8c16;
- font-weight: bold;
- }
- </style>
|