123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270 |
- <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="8" :sm="12">
- <a-form-item label="客户名称" :label-col="{ span:4 }" :wrapper-col="{ span:12}">
- <a-select
- show-search
- allowClear
- placeholder="请输入客户名称"
- option-filter-prop="children"
- v-model="queryParam.storeName"
- >
- <a-select-option v-for="item in storeList" :key="item.id" :value="item.id">
- {{ item.name }}
- </a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- <a-col :lg="8" :sm="12">
- <a-form-item label="配件名称" :label-col="{ span:4 }" :wrapper-col="{ span:12}">
- <a-input class="full-width" v-model="queryParam.partName" placeholder="请输入配件名称" allowClear id="PaySettlementRecords-queryOrderDate"/>
- </a-form-item>
- </a-col>
- <a-col :lg="8" :sm="12">
- <a-form-item label="配件编码" :label-col="{ span:4 }" :wrapper-col="{ span:12}">
- <a-input class="full-width" v-model="queryParam.settleNo" placeholder="请输入配件编码" allowClear id="PaySettlementRecords-queryOrderDate"/>
- </a-form-item>
- </a-col>
- <a-col :lg="6" :sm="12">
- <a-form-item label="分账状态" :label-col="{ span:4 }" :wrapper-col="{ span:12}">
- <v-select
- v-model="queryParam.status"
- ref="ledgerStatus"
- id="purchasedSetmeal-status"
- code="SETTLE_STATUS_ALL"
- placeholder="请选择分账状态"
- allowClear></v-select>
- </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>
- <!-- 合计 -->
- <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">
- </s-table>
- </div>
- </a-card>
- </template>
- <script>
- import moment from 'moment'
- import {
- STable,
- VSelect
- } from '@/components'
- import {
- settlementRecordsList,
- settlementRecordsListTotal
- } from '@/api/FinancialManagement'
- export default {
- name: 'LedgerRecords',
- components: {
- VSelect,
- STable
- },
- data () {
- return {
- 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: 'type',
- align: 'center',
- width: 150
- },
- {
- title: '分账金额(¥)',
- dataIndex: 'money',
- 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 = 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>
|