PaySettlementRecords.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. <template>
  2. <a-card :bordered="false">
  3. <!-- 搜索条件 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form layout="inline">
  6. <a-row :gutter="48">
  7. <a-col :lg="6" :sm="12">
  8. <a-form-item label="结算时间:">
  9. <a-range-picker
  10. style="width:100%"
  11. :disabledDate="disabledDate"
  12. v-model="queryOrderDate"
  13. format="YYYY-MM-DD"
  14. :placeholder="['开始时间', '结束时间']" />
  15. </a-form-item>
  16. </a-col>
  17. <a-col :lg="6" :sm="12">
  18. <a-form-item label="结算单号">
  19. <a-input class="full-width" v-model="queryParam.settleNo" placeholder="请输入" allowClear />
  20. </a-form-item>
  21. </a-col>
  22. <a-col :lg="6" :sm="12">
  23. <a-button type="primary" @click="refresh">查询</a-button>
  24. <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
  25. </a-col>
  26. </a-row>
  27. </a-form>
  28. </div>
  29. <a-divider />
  30. <!-- 合计 -->
  31. <a-alert type="info" showIcon style="margin-bottom:15px">
  32. <div class="ftext" slot="message">共<span>{{ orderTotal }}</span>单,实收<span>¥{{ amountTotal }}</span>元</div>
  33. </a-alert>
  34. <!-- 列表 -->
  35. <div>
  36. <s-table
  37. ref="table"
  38. size="default"
  39. rowKey="id"
  40. bordered
  41. :columns="columns"
  42. :data="loadData">
  43. <template slot="action" slot-scope="text, record">
  44. <!-- <a-icon type="eye" title="查看" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" @click="handleDetail(record)" /> -->
  45. <a-button type="primary" @click="handleDetail(record)">详情</a-button>
  46. </template>
  47. </s-table>
  48. </div>
  49. <!-- 应收结算记录详情弹窗 -->
  50. <pay-settlement-records-details-modal :itemId="itemId" :openModalDetails="openModalDetails" @close="openModalDetails=false"></pay-settlement-records-details-modal>
  51. </a-card>
  52. </template>
  53. <script>
  54. import moment from 'moment'
  55. import {
  56. STable,
  57. VSelect
  58. } from '@/components'
  59. import {
  60. settlementRecordsList,
  61. settlementRecordsListTotal
  62. } from '@/api/FinancialManagement'
  63. import PaySettlementRecordsDetailsModal from './PaySettlementRecordsDetailsModal.vue'
  64. export default {
  65. name: 'SettlementRecordsList',
  66. components: {
  67. VSelect,
  68. STable,
  69. PaySettlementRecordsDetailsModal
  70. },
  71. data () {
  72. return {
  73. loadData: parameter => {
  74. const searchData = Object.assign(parameter, this.queryParam)
  75. console.log(this.queryOrderDate, 'this.queryOrderDate')
  76. if (this.queryOrderDate && this.queryOrderDate.length) {
  77. searchData.beginDate = moment(this.queryOrderDate[0]).format('YYYY-MM-DD')
  78. searchData.endDate = moment(this.queryOrderDate[1]).format('YYYY-MM-DD')
  79. } else {
  80. searchData.beginDate = ''
  81. searchData.endDate = ''
  82. }
  83. return settlementRecordsList(searchData).then(res => {
  84. const no = (res.data.pageNo - 1) * res.data.pageSize
  85. for (let i = 0; i < res.data.list.length; i++) {
  86. const _item = res.data.list[i]
  87. _item.no = no + i + 1
  88. }
  89. return res.data
  90. })
  91. },
  92. queryOrderDate: undefined,
  93. queryParam: {
  94. settleNo: '',
  95. beginDate: '',
  96. endDate: ''
  97. },
  98. orderTotal: 0, // 订单数量
  99. amountTotal: 0, // 实收总金额
  100. itemId: '', // 每条数据id
  101. openModalDetails: false, // 默认关闭详情弹窗
  102. columns: [{
  103. title: '序号',
  104. dataIndex: 'no',
  105. width: '60px',
  106. align: 'center'
  107. },
  108. {
  109. title: '结算单号',
  110. dataIndex: 'settleNo',
  111. width: '150px',
  112. align: 'center'
  113. },
  114. {
  115. title: '结算时间',
  116. dataIndex: 'settleDate',
  117. width: '150px',
  118. align: 'center'
  119. },
  120. {
  121. title: '结算订单数',
  122. dataIndex: 'orderNum',
  123. width: '150px',
  124. align: 'center',
  125. scopedSlots: {
  126. customRender: 'userInfo'
  127. }
  128. },
  129. {
  130. title: '结算金额',
  131. dataIndex: 'realAmount',
  132. align: 'center',
  133. width: '150px'
  134. },
  135. {
  136. title: '操作',
  137. dataIndex: 'action',
  138. width: '100px',
  139. align: 'center',
  140. scopedSlots: {
  141. customRender: 'action'
  142. }
  143. }
  144. ]
  145. }
  146. },
  147. methods: {
  148. // 禁止不可选日期
  149. disabledDate (current) {
  150. return current && current > moment().endOf('day')
  151. },
  152. // 查看详情
  153. handleDetail (record) {
  154. this.itemId = record.settleNo
  155. console.log(this.itemId)
  156. this.openModalDetails = true
  157. },
  158. // 查询
  159. refresh () {
  160. this.$refs.table.refresh(true)
  161. this.getListTotal()
  162. },
  163. // 重置
  164. resetSearchForm () {
  165. this.queryOrderDate = undefined
  166. this.queryParam = {
  167. settleNo: '',
  168. beginDate: '',
  169. endDate: ''
  170. }
  171. this.$refs.table.refresh(true)
  172. this.getListTotal()
  173. },
  174. // 合计
  175. getListTotal () {
  176. const params = {
  177. settleNo: this.queryParam.settleNo,
  178. beginDate: this.queryParam.beginDate,
  179. endDate: this.queryParam.endDate
  180. }
  181. if (this.queryOrderDate && this.queryOrderDate.length) {
  182. params.beginDate = moment(this.queryOrderDate[0]).format('YYYY-MM-DD')
  183. params.endDate = moment(this.queryOrderDate[1]).format('YYYY-MM-DD')
  184. } else {
  185. params.beginDate = ''
  186. params.endDate = ''
  187. }
  188. // params.beginDate == null ? params.beginDate = getDate.getToday().starttime : null
  189. // params.endDate == null ? params.endDate = getDate.getToday().endtime : null
  190. settlementRecordsListTotal(params).then(res => {
  191. if (res.status == 200) {
  192. if (res.data) {
  193. this.orderTotal = res.data.orderNum || 0
  194. this.amountTotal = res.data.amount || 0
  195. } else {
  196. this.orderTotal = 0
  197. this.amountTotal = 0
  198. }
  199. }
  200. })
  201. }
  202. },
  203. beforeRouteEnter (to, from, next) {
  204. next(vm => {
  205. vm.resetSearchForm()
  206. })
  207. }
  208. }
  209. </script>
  210. <style scoped>
  211. .ftext span {
  212. color: #fa8c16;
  213. font-weight: bold;
  214. }
  215. </style>