CashOutManagement.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. <template>
  2. <a-card :bordered="false">
  3. <!-- 搜索条件 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form layout="inline" @keyup.enter.native="refresh">
  6. <a-row :gutter="48">
  7. <a-col :lg="8" :sm="12">
  8. <a-form-item label="提现时间" :label-col="{ span:4 }" :wrapper-col="{ span:16}">
  9. <a-range-picker
  10. id="PaySettlementRecords-queryOrderDate"
  11. :disabledDate="disabledDate"
  12. style="width: 100%;"
  13. v-model="queryOrderDate"
  14. :show-time="{ format: 'HH:mm' }"
  15. format="YYYY-MM-DD HH:mm"
  16. :placeholder="['开始时间', '结束时间']" />
  17. </a-form-item>
  18. </a-col>
  19. <a-col :lg="6" :sm="12">
  20. <a-button type="primary" @click="refresh" id="PaySettlementRecords-refresh">查询</a-button>
  21. <a-button style="margin-left: 8px" @click="resetSearchForm" id="PaySettlementRecords-resetSearchForm">重置</a-button>
  22. </a-col>
  23. </a-row>
  24. </a-form>
  25. </div>
  26. <!-- 合计 -->
  27. <div class="ftext" >
  28. <a-button class="btn-cont" type="primary" @click="openModal" id="PaySettlementRecords-refresh">申请提现</a-button>
  29. 可提现余额:<span>{{ amountTotal }}</span>元</div>
  30. <!-- 列表 -->
  31. <div>
  32. <s-table
  33. ref="table"
  34. size="default"
  35. rowKey="id"
  36. bordered
  37. :columns="columns"
  38. :data="loadData">
  39. </s-table>
  40. </div>
  41. <!-- 申请提现弹窗 -->
  42. <cashOut-modal :openCashOutModal="openCashOutModal" @close="openCashOutModal=false" @refresh="refresh"></cashOut-modal>
  43. </a-card>
  44. </template>
  45. <script>
  46. import moment from 'moment'
  47. import {
  48. STable,
  49. VSelect
  50. } from '@/components'
  51. import cashOutModal from './CashOutModal.vue'
  52. import {
  53. settlementRecordsList,
  54. settlementRecordsListTotal
  55. } from '@/api/FinancialManagement'
  56. export default {
  57. name: 'CashOutManagement',
  58. components: {
  59. VSelect,
  60. STable,
  61. cashOutModal
  62. },
  63. data () {
  64. return {
  65. openCashOutModal: false, // 是否打开申请提现弹窗
  66. queryOrderDate: undefined,
  67. storeList: [
  68. { id: 11, name: '常青二路店' },
  69. { id: 112, name: '西部大道店' },
  70. { id: 114, name: '渭滨路店' },
  71. { id: 115, name: '未央店' },
  72. { id: 116, name: '凤城八路店' }
  73. ],
  74. queryParam: {
  75. storeName: '', // 客户名称
  76. partName: '', // 配件名称
  77. status: '', // 分账状态
  78. settleNo: '',
  79. beginDate: '',
  80. endDate: ''
  81. },
  82. orderTotal: 0, // 订单数量
  83. amountTotal: 0, // 实收总金额
  84. itemId: '', // 每条数据id
  85. settleId: '',
  86. columns: [{
  87. title: '序号',
  88. dataIndex: 'no',
  89. width: 60,
  90. align: 'center'
  91. },
  92. {
  93. title: '提现时间',
  94. dataIndex: 'settleDate',
  95. width: 200,
  96. align: 'center'
  97. },
  98. {
  99. title: '提现单号',
  100. dataIndex: 'settleNo',
  101. width: 150,
  102. align: 'center'
  103. },
  104. {
  105. title: '申请提现金额',
  106. dataIndex: 'orderNum',
  107. width: 150,
  108. align: 'center',
  109. scopedSlots: {
  110. customRender: 'userInfo'
  111. }
  112. },
  113. {
  114. title: '开户名',
  115. dataIndex: 'realAmount',
  116. align: 'center',
  117. width: 150
  118. },
  119. {
  120. title: '银行卡号',
  121. dataIndex: 'code',
  122. align: 'center',
  123. width: 150
  124. },
  125. {
  126. title: '状态',
  127. dataIndex: 'status',
  128. align: 'center',
  129. width: 150
  130. },
  131. {
  132. title: '备注',
  133. dataIndex: 'remarks',
  134. width: 100,
  135. align: 'center',
  136. customRender: (text) => {
  137. return text || '--'
  138. }
  139. }
  140. ],
  141. loadData: parameter => {
  142. const searchData = Object.assign(parameter, this.queryParam)
  143. console.log(this.queryOrderDate, 'this.queryOrderDate')
  144. if (this.queryOrderDate && this.queryOrderDate.length) {
  145. searchData.beginDate = moment(this.queryOrderDate[0]).format('YYYY-MM-DD')
  146. searchData.endDate = moment(this.queryOrderDate[1]).format('YYYY-MM-DD')
  147. } else {
  148. searchData.beginDate = ''
  149. searchData.endDate = ''
  150. }
  151. return settlementRecordsList(searchData).then(res => {
  152. const no = (res.data.pageNo - 1) * res.data.pageSize
  153. for (let i = 0; i < res.data.list.length; i++) {
  154. const _item = res.data.list[i]
  155. _item.no = no + i + 1
  156. }
  157. return res.data
  158. })
  159. }
  160. }
  161. },
  162. methods: {
  163. // 禁止不可选日期
  164. disabledDate (current) {
  165. return current && current > moment().endOf('day')
  166. },
  167. // 查询
  168. refresh () {
  169. this.$refs.table.refresh(true)
  170. this.getListTotal()
  171. },
  172. // 重置
  173. resetSearchForm () {
  174. this.queryOrderDate = null
  175. this.$refs.table.refresh(true)
  176. this.getListTotal()
  177. },
  178. // 合计
  179. getListTotal () {
  180. const params = {
  181. settleNo: this.queryParam.settleNo,
  182. beginDate: this.queryParam.beginDate,
  183. endDate: this.queryParam.endDate
  184. }
  185. if (this.queryOrderDate && this.queryOrderDate.length) {
  186. params.beginDate = moment(this.queryOrderDate[0]).format('YYYY-MM-DD')
  187. params.endDate = moment(this.queryOrderDate[1]).format('YYYY-MM-DD')
  188. } else {
  189. params.beginDate = ''
  190. params.endDate = ''
  191. }
  192. settlementRecordsListTotal(params).then(res => {
  193. if (res.status == 200) {
  194. if (res.data) {
  195. this.orderTotal = res.data.orderNum || 0
  196. this.amountTotal = res.data.amount || 0
  197. } else {
  198. this.orderTotal = 0
  199. this.amountTotal = 0
  200. }
  201. }
  202. })
  203. },
  204. // 打开提现弹窗
  205. openModal () {
  206. this.openCashOutModal = true
  207. }
  208. //
  209. },
  210. beforeRouteEnter (to, from, next) {
  211. next(vm => {
  212. vm.queryOrderDate = null
  213. })
  214. }
  215. }
  216. </script>
  217. <style scoped lang="less">
  218. .ftext{
  219. margin-bottom: 15px;
  220. font-size: 18px;
  221. .btn-cont{
  222. margin-right: 20px;
  223. }
  224. }
  225. .ftext span {
  226. color: #fa8c16;
  227. font-weight: bold;
  228. }
  229. </style>