settlementDetail.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. <template>
  2. <div class="goodsAllocationSet-page">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <a-page-header :ghost="false" :backIcon="false" class="goodsAllocationSet-baseInfo" >
  5. <template slot="subTitle">
  6. <a href="javascript:;" @click="handleBack"><a-icon type="left"></a-icon> 返回列表</a>
  7. <span style="margin: 0 15px;color: #666;">{{ this.$route.params.shelfName||'--' }}</span>
  8. </template>
  9. </a-page-header>
  10. <a-card :bordered="false" size="small" class="goodsAllocationSet-baseInfo">
  11. <div ref="tableSearch" class="table-page-search-wrapper">
  12. <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
  13. <a-row :gutter="15">
  14. <a-col :xl="6" :lg="6" :md="12" :sm="24">
  15. <a-form-item label="结算时间">
  16. <a-range-picker v-model="time" allowClear :disabledDate="disabledDate" format="YYYY-MM-DD" @change="dateChange"/>
  17. </a-form-item>
  18. </a-col>
  19. <a-col :xl="6" :lg="6" :md="12" :sm="24">
  20. <a-form-item label="支付方式">
  21. <v-select code="PAY_WAY" v-model="queryParam.payWay" allowClear placeholder="请选择支付方式"></v-select>
  22. </a-form-item>
  23. </a-col>
  24. <a-col :xl="6" :lg="6" :md="6" :sm="6" >
  25. <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="outboundOrderList-refresh" >查询</a-button>
  26. <a-button style="margin-left: 8px" @click="resetSearchForm" :disabled="disabled" id="outboundOrderList-reset">重置</a-button>
  27. </a-col>
  28. </a-row>
  29. </a-form>
  30. </div>
  31. <a-alert type="info" style="margin:10px 0">
  32. <div slot="message" >
  33. 结算资金可通过账户管理-提现管理功能提出至银行卡
  34. </div>
  35. </a-alert>
  36. <s-table
  37. class="sTable fixPagination"
  38. ref="table"
  39. size="small"
  40. rowKey="id"
  41. :showPagination="false"
  42. :columns="columns"
  43. :data="loadData"
  44. :defaultLoadData="false"
  45. bordered>
  46. <template slot="action" slot-scope="text, record">
  47. <a-button
  48. size="small"
  49. type="link"
  50. class="button-primary"
  51. @click="handleDetail(record)"
  52. id="shelfMonitoringList-warehousing-btn">查看详情</a-button>
  53. </template>
  54. </s-table>
  55. </a-card>
  56. <!-- 导入货位模板 -->
  57. <detailModal :openModal="openModal" @close="openModal=false" :settleData="settleData"></detailModal>
  58. </a-spin>
  59. </div>
  60. </template>
  61. <script>
  62. import { commonMixin } from '@/utils/mixin'
  63. import { STable, VSelect } from '@/components'
  64. import detailModal from './detailModal.vue'
  65. import moment from 'moment'
  66. import { querySettleBillPage } from '@/api/merchant'
  67. import { toThousands } from '@/libs/tools.js'
  68. export default {
  69. mixins: [commonMixin],
  70. components: { STable, VSelect, detailModal },
  71. data () {
  72. return {
  73. spinning: false,
  74. disabled: false,
  75. isEdit: false, // 货位号是否为编辑
  76. openModal: false, // 货位模板弹窗初始状态
  77. formItemLayout: {
  78. labelCol: { span: 6 },
  79. wrapperCol: { span: 16 }
  80. },
  81. time: [],
  82. queryParam: {
  83. beginDate: '',
  84. endDate: '',
  85. payWay: undefined
  86. },
  87. settleData: null,
  88. // 表头
  89. columns: [
  90. { title: '序号', dataIndex: 'no', width: '12.5%', align: 'center' },
  91. { title: '结算时间', dataIndex: 'payDate', width: '25%', align: 'center', customRender: function (text) { return text || '--' } },
  92. { title: '结算金额', dataIndex: 'settleAmount', width: '25%', align: 'right', customRender: function (text) { return toThousands(text, 2) || '--' } },
  93. { title: '支付方式', dataIndex: 'payWayDictValue', width: '25%', align: 'center', customRender: function (text) { return text || '--' } },
  94. { title: '操作', width: '12.5%', align: 'left', scopedSlots: { customRender: 'action' } }
  95. ],
  96. // 加载数据方法 必须为 Promise 对象
  97. loadData: parameter => {
  98. this.spinning = true
  99. const paramsPage = Object.assign(parameter, this.queryParam)
  100. paramsPage.shelfSn = this.$route.params.shelfSn
  101. paramsPage.payState = 'FINISH'
  102. return querySettleBillPage(paramsPage).then(res => {
  103. let data
  104. if (res.status == 200) {
  105. data = res.data
  106. const no = (data.pageNo - 1) * data.pageSize
  107. for (let i = 0; i < data.list.length; i++) {
  108. const _item = data.list[i]
  109. _item.no = no + i + 1
  110. }
  111. }
  112. this.spinning = false
  113. return data
  114. })
  115. }
  116. }
  117. },
  118. methods: {
  119. handleBack () {
  120. this.$router.push({ path: '/numsGoodsShelves/settlementManagement/list' })
  121. },
  122. dateChange (date) {
  123. this.queryParam.beginDate = moment(date[0]).format('YYYY-MM-DD')
  124. this.queryParam.endDate = moment(date[1]).format('YYYY-MM-DD')
  125. },
  126. disabledDate (current) {
  127. return current && current > moment().endOf('day')
  128. },
  129. // 重置
  130. resetSearchForm () {
  131. this.time = []
  132. this.queryParam = {
  133. beginDate: '',
  134. endDate: '',
  135. payWay: undefined
  136. }
  137. this.$refs.table.refresh(true)
  138. },
  139. // 查看详情
  140. handleDetail (row) {
  141. this.settleData = row
  142. this.openModal = true
  143. }
  144. },
  145. mounted () {
  146. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  147. // this.getPageInfo()
  148. this.resetSearchForm()
  149. }
  150. },
  151. activated () {
  152. // 如果是新页签打开或者进入新的子页(例:存在列表第2条数据编辑页页签时再打开第4条数据的编辑页),则重置当前页面
  153. if (this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) {
  154. // this.getPageInfo()
  155. this.resetSearchForm()
  156. }
  157. }
  158. }
  159. </script>
  160. <style lang="less">
  161. .goodsAllocationSet-page{
  162. position: relative;
  163. height: 100%;
  164. padding-bottom: 51px;
  165. box-sizing: border-box;
  166. .goodsAllocationSet-baseInfo{
  167. margin-bottom: 10px;
  168. }
  169. .bzj-collapse{
  170. margin-top: 10px;
  171. .ant-collapse-content-box{
  172. padding: 10px !important;
  173. }
  174. }
  175. }
  176. </style>