billFlowModal.vue 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. <template>
  2. <a-drawer
  3. title="账单流水"
  4. placement="right"
  5. class="billFlowModal-modal jg-page-wrap"
  6. :visible="isShow"
  7. @close="isShow=false"
  8. width="78%"
  9. :get-container="false"
  10. :wrap-style="{ position: 'absolute' }">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <!-- 搜索条件 -->
  13. <div class="table-page-search-wrapper">
  14. <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
  15. <a-row :gutter="15">
  16. <a-col :md="7" :sm="24">
  17. <a-form-item label="创建时间">
  18. <rangeDate id="billFlowModal-createDate" ref="rangeDate" v-model="time" @change="createDateChange" />
  19. </a-form-item>
  20. </a-col>
  21. <a-col :md="6" :sm="24">
  22. <a-form-model-item label="客户名称">
  23. <custList id="billFlowModal-custList" ref="custSatelliteList" @change="custSatelliteChange"></custList>
  24. </a-form-model-item>
  25. </a-col>
  26. <a-col :md="6" :sm="24">
  27. <a-form-item label="关联单号">
  28. <a-input id="billFlowModal-dealerSalesNo" v-model.trim="queryParam.dealerSalesNo" allowClear placeholder="请输入关联单号"/>
  29. </a-form-item>
  30. </a-col>
  31. <a-col :md="5" :sm="24">
  32. <a-form-item label="收支类型">
  33. <v-select
  34. v-model="queryParam.inOutType"
  35. ref="inOutType"
  36. id="billFlowModal-inOutType"
  37. code="SHOP_PROMO_IN_OUT_TYPE"
  38. placeholder="请选择收支类型"
  39. allowClear></v-select>
  40. </a-form-item>
  41. </a-col>
  42. <a-col :md="7" :sm="24">
  43. <a-form-item label="交易类型">
  44. <v-select
  45. v-model="queryParam.tradeType"
  46. id="billFlowModal-tradeType"
  47. code="BIZ_TRADE_TRADE_TYPE"
  48. placeholder="请选择交易类型"
  49. allowClear></v-select>
  50. </a-form-item>
  51. </a-col>
  52. <a-col :md="6" :sm="24">
  53. <a-form-item label="交易状态">
  54. <v-select
  55. v-model="queryParam.dealState"
  56. id="billFlowModal-dealState"
  57. code="BIZ_TRADE_DEAL_STATE"
  58. placeholder="请选择交易状态"
  59. allowClear></v-select>
  60. </a-form-item>
  61. </a-col>
  62. <a-col :md="6" :sm="24">
  63. <a-button style="margin-bottom: 18px;" type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="billFlowModal-refresh">查询</a-button>
  64. <a-button style="margin: 0 0 18px 8px" @click="resetSearchForm" :disabled="disabled" id="billFlowModal-reset">重置</a-button>
  65. </a-col>
  66. </a-row>
  67. </a-form>
  68. </div>
  69. <div class="table-operator">
  70. <div class="alert-message">
  71. 收入金额:<strong>{{ detailData&&(detailData.skAmount || detailData.skAmount==0) ? toThousands(detailData.skAmount) : '--' }}</strong>,
  72. 其中到账金额:<strong>{{ detailData&&(detailData.skdzAmount || detailData.skdzAmount==0) ? toThousands(detailData.skdzAmount) : '--' }}</strong>,
  73. 在途金额:<strong>{{ detailData&&(detailData.skztAmount || detailData.skztAmount==0) ? toThousands(detailData.skztAmount) : '--' }}</strong>,
  74. 已退款:<strong>{{ detailData&&(detailData.skytkAmount || detailData.skytkAmount ==0) ? toThousands(detailData.skytkAmount) : '--' }}</strong>;
  75. 支出金额:<strong>{{ detailData&&(detailData.kkAmount || detailData.kkAmount==0) ? toThousands(detailData.kkAmount) : '--' }}</strong>,
  76. 其中退款金额:<strong>{{ detailData&&(detailData.tkAmount || detailData.tkAmount==0) ? toThousands(detailData.tkAmount) : '--' }}</strong>,
  77. 提现金额:<strong>{{ detailData&&(detailData.txAmount || detailData.txAmount==0) ? toThousands(detailData.txAmount) : '--' }}</strong>,
  78. 提现服务费:<strong>{{ detailData&&(detailData.txfwfAmount || detailData.txfwfAmount==0) ? toThousands(detailData.txfwfAmount) : '--' }}</strong>
  79. </div>
  80. </div>
  81. <!-- 列表 -->
  82. <s-table
  83. class="sTable fixPagination"
  84. ref="table"
  85. size="small"
  86. :rowKey="(record) => record.id"
  87. :style="{ height: 510+'px' }"
  88. :columns="columns"
  89. :data="loadData"
  90. :scroll="{ y: 450 }"
  91. :defaultLoadData="false"
  92. bordered>
  93. <!-- 金额 -->
  94. <template slot="realAmount" slot-scope="text, record">
  95. <div v-if="record.realAmount">
  96. {{ record.tradeType=='SK'? '+'+(record.realAmount).toFixed(2):'-'+(record.realAmount).toFixed(2) }}
  97. </div>
  98. <div v-else>{{ record.realAmount==0?(record.realAmount).toFixed(2):'--' }}</div>
  99. </template>
  100. <!-- 交易状态 -->
  101. <template slot="status" slot-scope="text, record">
  102. <div v-if="record.dealState&&record.dealStateDictValue">
  103. <span :style="{color:(record.dealState=='KK'||record.dealState=='YTK')?'#Ed1c24':record.dealState=='DZ'?'#2ac30f':''}">{{ record.dealStateDictValue }}</span>
  104. </div>
  105. <div v-else>--</div>
  106. </template>
  107. </s-table>
  108. </a-spin>
  109. </a-drawer>
  110. </template>
  111. <script>
  112. import { commonMixin } from '@/utils/mixin'
  113. import { STable, VSelect } from '@/components'
  114. import rangeDate from '@/views/common/rangeDate.vue'
  115. import custList from '@/views/common/custList.vue'
  116. import { bizTradeList, bizTradeQueryGroupCount } from '@/api/merchantNew.js'
  117. export default {
  118. name: 'BillFlowModal',
  119. components: { STable, VSelect, rangeDate, custList },
  120. mixins: [commonMixin],
  121. props: {
  122. openModal: { // 弹框显示状态
  123. type: Boolean,
  124. default: false
  125. }
  126. },
  127. data () {
  128. return {
  129. spinning: false,
  130. isShow: this.openModal, // 是否打开弹框
  131. disabled: false,
  132. time: [], // 创建时间
  133. queryParam: {
  134. beginDate: '', // 创建开始时间
  135. endDate: '', // 创建结束时间
  136. customerName: undefined, // 客户名称
  137. customerSn: undefined, // 客户Sn
  138. dealerSalesNo: '', // 关联单号
  139. inOutType: undefined, // 收支类型
  140. tradeType: undefined, // 交易类型
  141. dealState: undefined // 交易状态
  142. },
  143. // 表头
  144. columns: [
  145. { title: '序号', dataIndex: 'no', width: '6%', align: 'center' },
  146. { title: '创建时间', dataIndex: 'createDate', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  147. { title: '客户名称', dataIndex: 'customerName', width: '12%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  148. { title: '关联单号', dataIndex: 'dealerSalesNo', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  149. { title: '金额(¥)', dataIndex: 'realAmount', width: '8%', align: 'right', scopedSlots: { customRender: 'realAmount' } },
  150. { title: '交易类型', dataIndex: 'tradeTypeDictValue', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
  151. { title: '交易状态', dataIndex: 'dealStateDictValue', width: '8%', align: 'center', scopedSlots: { customRender: 'status' } }
  152. ],
  153. // 加载数据方法 必须为 Promise 对象
  154. loadData: parameter => {
  155. this.disabled = true
  156. this.spinning = true
  157. const _this = this
  158. const parames = Object.assign(parameter, _this.queryParam)
  159. parames.dealerSn = _this.$store.state.user.authOrgs[0].orgSn
  160. return bizTradeList(parames).then(res => {
  161. let data
  162. if (res.status == 200) {
  163. data = res.data
  164. _this.getCount(parames)
  165. const no = (data.pageNo - 1) * data.pageSize
  166. for (var i = 0; i < data.list.length; i++) {
  167. data.list[i].no = no + i + 1
  168. }
  169. _this.disabled = false
  170. }
  171. _this.spinning = false
  172. return data
  173. })
  174. },
  175. detailData: null // 统计
  176. }
  177. },
  178. methods: {
  179. // 选择客户
  180. custSatelliteChange (obj, row) {
  181. if (row) {
  182. this.queryParam.customerSn = row && row.customerSn || undefined
  183. this.queryParam.customerName = undefined
  184. } else {
  185. this.queryParam.customerName = obj || undefined
  186. this.queryParam.customerSn = undefined
  187. }
  188. },
  189. // 统计
  190. getCount (val) {
  191. this.spinning = true
  192. bizTradeQueryGroupCount(val).then(res => {
  193. if (res.status == 200) {
  194. this.detailData = res.data
  195. }
  196. this.spinning = false
  197. })
  198. },
  199. // 创建时间 change
  200. createDateChange (date) {
  201. this.queryParam.beginDate = date[0]
  202. this.queryParam.endDate = date[1]
  203. },
  204. // 重置
  205. resetSearchForm () {
  206. this.time = []
  207. this.$refs.rangeDate.resetDate([])
  208. this.queryParam.beginDate = ''
  209. this.queryParam.endDate = ''
  210. this.queryParam.customerName = undefined
  211. this.queryParam.customerSn = undefined
  212. this.queryParam.dealerSalesNo = ''
  213. this.queryParam.inOutType = undefined
  214. this.queryParam.tradeType = undefined
  215. this.queryParam.dealState = undefined
  216. this.$refs.custSatelliteList.resetForm()
  217. this.$refs.table.refresh(true)
  218. }
  219. },
  220. watch: {
  221. // 父页面传过来的弹框状态
  222. openModal (newValue, oldValue) {
  223. this.isShow = newValue
  224. },
  225. // 重定义的弹框状态
  226. isShow (newValue, oldValue) {
  227. const _this = this
  228. if (!newValue) {
  229. _this.$emit('close')
  230. _this.resetSearchForm()
  231. } else {
  232. setTimeout(() => {
  233. _this.$refs.table.refresh(true)
  234. }, 200)
  235. }
  236. }
  237. }
  238. }
  239. </script>
  240. <style lang="less">
  241. .billFlowModal-new-modal{
  242. .btn-cont {
  243. margin: 0 0 10px 0;
  244. text-align: left;
  245. }
  246. }
  247. </style>