transactionFlowModal.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. <template>
  2. <a-drawer
  3. :title="'交易流水('+(itemInfo.customerName ||'--')+(modalType==1?':充值金额':':抵扣金额')+')'"
  4. placement="right"
  5. :visible="isShow"
  6. width="80%"
  7. id="transaction-flow-modal"
  8. :get-container="false"
  9. :wrap-style="{ position: 'absolute' }"
  10. @close="isShow = false"
  11. >
  12. <a-spin :spinning="spinning" tip="Loading...">
  13. <!-- 搜索条件 -->
  14. <div ref="searchBox" class="table-page-search-wrapper">
  15. <a-form-model
  16. ref="ruleForm"
  17. class="form-model-con"
  18. layout="inline"
  19. :model="queryParam"
  20. @keyup.enter.native="$refs.table.refresh(true)"
  21. id="transactionFlow-form">
  22. <a-row :gutter="5" type="flex" justify="center" align="center">
  23. <a-col :md="8" :sm="24">
  24. <a-form-model-item label="交易时间">
  25. <rangeDate id="transactionFlow-time" ref="rangeDate" :value="time" @change="dateChange" />
  26. </a-form-model-item>
  27. </a-col>
  28. <a-col :md="6" :sm="24">
  29. <a-form-model-item label="关联单号">
  30. <a-input id="transactionFlow-bizNo" v-model.trim="queryParam.bizNo" allowClear placeholder="请输入关联单号"/>
  31. </a-form-model-item>
  32. </a-col>
  33. <a-col :md="6" :sm="24">
  34. <a-form-model-item label="交易类型">
  35. <v-select
  36. v-model="queryParam.bizType"
  37. id="transactionFlow-bizType"
  38. code="STORE_ACCOUNT_BIZ_TYPE"
  39. placeholder="请选择交易类型"
  40. allowClear></v-select>
  41. </a-form-model-item>
  42. </a-col>
  43. <a-col flex="auto" style="margin-bottom: 10px;">
  44. <a-button type="primary" @click="$refs.table.refresh(true)" id="transactionFlow-refresh">查询</a-button>
  45. <a-button style="margin-left: 5px" @click="resetSearchForm" id="transactionFlow-reset">重置</a-button>
  46. </a-col>
  47. </a-row>
  48. </a-form-model>
  49. </div>
  50. <!-- 统计 -->
  51. <div class="table-operator" style="margin-bottom: 10px;">
  52. <div class="alert-message">
  53. 充值金额:<strong>{{ totalData&&(totalData.rechargeAmount || totalData.rechargeAmount==0) ?toThousands(Math.abs(totalData.rechargeAmount)) : '--' }}</strong>;
  54. 销售金额:<strong>{{ totalData&&(totalData.salesAmount || totalData.salesAmount==0) ? toThousands(Math.abs(totalData.salesAmount)) : '--' }}</strong>;
  55. 退款金额:<strong>{{ totalData&&(totalData.refundAmount || totalData.refundAmount==0) ? toThousands(Math.abs(totalData.refundAmount)) : '--' }}</strong>;
  56. 清零金额:<strong>{{ totalData&&(totalData.zeroAmount || totalData.zeroAmount==0) ? toThousands(Math.abs(totalData.zeroAmount)) : '--' }}</strong>;
  57. </div>
  58. </div>
  59. <!-- 列表 -->
  60. <s-table
  61. class="sTable"
  62. ref="table"
  63. size="small"
  64. :rowKey="(record) => record.id"
  65. :columns="columns"
  66. :data="loadData"
  67. :scroll="{ y: tableHeight }"
  68. :defaultLoadData="false"
  69. bordered>
  70. </s-table>
  71. </a-spin>
  72. </a-drawer>
  73. </template>
  74. <script>
  75. import { commonMixin } from '@/utils/mixin'
  76. import { STable, VSelect } from '@/components'
  77. // 组件
  78. import productType from '@/views/common/productType.js'
  79. import productBrand from '@/views/common/productBrand.js'
  80. import rangeDate from '@/views/common/rangeDate.vue'
  81. // 接口
  82. import { storeAccountDetailList, storeAccountDetailCount } from '@/api/storeAccount' // 接口api
  83. export default {
  84. name: 'TransactionFlowModal',
  85. components: { STable, VSelect, productType, productBrand, rangeDate },
  86. mixins: [commonMixin],
  87. props: {
  88. openModal: {
  89. // 弹框显示状态
  90. type: Boolean,
  91. default: false
  92. },
  93. modalType: { // 1是充值交易流水 2是抵扣交易流水
  94. type: String,
  95. default: '1'
  96. },
  97. itemInfo: {// 当前行回显数据
  98. type: Object,
  99. default: () => {
  100. return {}
  101. }
  102. }
  103. },
  104. data () {
  105. const _this = this
  106. return {
  107. spinning: false,
  108. isShow: this.openModal, // 是否打开弹框
  109. tableHeight: 0, // 表格高度
  110. totalData: null, // 统计数据
  111. time: [], // 交易时间
  112. // 查询条件
  113. queryParam: {
  114. beginDate: undefined, // 交易开始时间
  115. endDate: undefined, // 交易结束时间
  116. bizNo: '', // 关联单号
  117. bizType: undefined // 交易类型
  118. },
  119. columns: [
  120. { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
  121. { title: '交易时间', dataIndex: 'tradeDate', width: '24%', align: 'center', customRender: function (text) { return text || '--' } },
  122. { title: '关联单号', dataIndex: 'bizNo', width: '24%', align: 'center', customRender: function (text) { return text || '--' } },
  123. { title: '金额(¥)', dataIndex: 'tradeAmount', width: '24%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  124. { title: '交易类型', dataIndex: 'bizTypeDictValue', width: '24%', align: 'center', customRender: function (text) { return text || '--' } }
  125. ],
  126. // 加载数据方法 必须为 Promise 对象
  127. loadData: parameter => {
  128. const params = Object.assign(parameter, this.queryParam)
  129. params.storeAccountSn = this.itemInfo.storeAccountSn
  130. params.storeSn = this.itemInfo.storeSn
  131. params.shelfSn = this.itemInfo.shelfSn
  132. params.accountType = this.modalType == 1 ? 'RECHARGE' : 'GIVE'
  133. this.disabled = true
  134. this.spinning = true
  135. return storeAccountDetailList(params).then(res => {
  136. let data
  137. if (res.status == 200) {
  138. data = res.data
  139. const no = (data.pageNo - 1) * data.pageSize
  140. for (var i = 0; i < data.list.length; i++) {
  141. data.list[i].no = no + i + 1
  142. }
  143. this.getCount(params)
  144. this.disabled = false
  145. }
  146. this.spinning = false
  147. return data
  148. })
  149. }
  150. }
  151. },
  152. methods: {
  153. // 交易时间 change
  154. dateChange (date) {
  155. this.queryParam.beginDate = date[0]
  156. this.queryParam.endDate = date[1]
  157. },
  158. // 统计
  159. getCount (ajaxData) {
  160. storeAccountDetailCount(ajaxData).then(res => {
  161. if (res.status == 200) {
  162. this.totalData = res.data || []
  163. } else {
  164. this.totalData = null
  165. }
  166. })
  167. },
  168. // 充值
  169. resetSearchForm () {
  170. this.time = []
  171. this.$refs.rangeDate.resetDate()
  172. this.queryParam.beginDate = undefined
  173. this.queryParam.endDate = undefined
  174. this.queryParam.bizNo = undefined
  175. this.queryParam.bizType = undefined
  176. this.$refs.table.refresh(true)
  177. }
  178. },
  179. watch: {
  180. // 父页面传过来的弹框状态
  181. openModal (newValue, oldValue) {
  182. this.isShow = newValue
  183. },
  184. // 重定义的弹框状态
  185. isShow (newValue, oldValue) {
  186. if (!newValue) {
  187. this.$emit('close')
  188. } else {
  189. this.$nextTick(() => {
  190. this.resetSearchForm()
  191. })
  192. }
  193. }
  194. }
  195. }
  196. </script>
  197. <style lang="less">
  198. .outIndetail-modal {
  199. .ant-drawer-body {
  200. padding: 10px 20px;
  201. .outIndetail-modal-table{
  202. padding: 20px 0 0;
  203. }
  204. .baseInfo{
  205. line-height: 24px;
  206. font-size: 14px;
  207. }
  208. }
  209. }
  210. .table-operator{
  211. .subsidyRequired{
  212. margin-right: 5px;
  213. color:#ED1c24;
  214. }
  215. }
  216. </style>