RefundRecord.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <template>
  2. <a-card :bordered="false">
  3. <!-- 搜索条件 -->
  4. <div class="orderCenter-searchForm">
  5. <a-form layout="inline" ref="searchForm">
  6. <a-row :gutter="48">
  7. <a-col :span="8">
  8. <a-form-item label="创建时间">
  9. <a-range-picker v-model="time" :placeholder="['开始时间','结束时间']" @change="onChange" />
  10. </a-form-item>
  11. </a-col>
  12. <a-col :span="6">
  13. <a-form-item label="关联订单号">
  14. <a-input v-model.trim="searchForm.num" placeholder="请输入" allowClear style="width: 200px;" />
  15. </a-form-item>
  16. </a-col>
  17. <a-col :span="6">
  18. <a-form-item label="网点名称">
  19. <v-select v-model="searchForm.name" placeholder="请选择" allowClear style="width: 200px;"></v-select>
  20. </a-form-item>
  21. </a-col>
  22. <a-col :span="4">
  23. <a-button style="margin-right: 10px;" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
  24. <a-button type="" @click="resetForm">重置</a-button>
  25. </a-col>
  26. </a-row>
  27. <a-row :gutter="48">
  28. <a-col :span="8">
  29. <a-form-item label="服务项目">
  30. <v-select v-model="searchForm.name" placeholder="请选择" allowClear style="width: 200px;"></v-select>
  31. </a-form-item>
  32. </a-col>
  33. <a-col :span="6">
  34. <a-form-item label="退款状态">
  35. <v-select v-model="searchForm.name" placeholder="请选择" allowClear style="width: 200px;"></v-select>
  36. </a-form-item>
  37. </a-col>
  38. </a-row>
  39. </a-form>
  40. </div>
  41. <!-- 合计 -->
  42. <div class="total">
  43. <a-alert message="合计: 40单, 实收: 2000元" type="info" show-icon />
  44. </div>
  45. <!-- 列表 -->
  46. <s-table ref="table" size="default" :rowKey="(record) => record.id" :columns="columns" :data="loadData" bordered>
  47. <!-- 退款状态 -->
  48. <span slot="status" slot-scope="text, record">
  49. <template></template>
  50. </span>
  51. </s-table>
  52. </a-card>
  53. </template>
  54. <script>
  55. import {
  56. STable,
  57. VSelect
  58. } from '@/components'
  59. export default {
  60. components: {
  61. STable,
  62. VSelect
  63. },
  64. data() {
  65. return {
  66. // 查询参数
  67. searchForm: {
  68. beginDate: null,
  69. endDate: null,
  70. name: '',
  71. num: ''
  72. },
  73. time: null,
  74. columns: [{
  75. title: '创建时间',
  76. dataIndex: 'createTime',
  77. minWidth: '100',
  78. align: 'center'
  79. },
  80. {
  81. title: '交易流水号',
  82. dataIndex: 'createTime',
  83. minWidth: '100',
  84. align: 'center'
  85. },
  86. {
  87. title: '关联订单号',
  88. dataIndex: 'createTime',
  89. width: '100',
  90. align: 'center'
  91. },
  92. {
  93. title: '网点名称',
  94. dataIndex: 'createTime',
  95. minWidth: '100',
  96. align: 'center'
  97. },
  98. {
  99. title: '退款项目',
  100. dataIndex: 'createTime',
  101. minWidth: '100',
  102. align: 'center'
  103. },
  104. {
  105. title: '退款金额(¥)',
  106. dataIndex: 'createTime',
  107. minWidth: '40',
  108. align: 'center'
  109. },
  110. {
  111. title: '退款人',
  112. dataIndex: 'createTime',
  113. minWidth: '100',
  114. align: 'center'
  115. },
  116. {
  117. title: '退款状态',
  118. dataIndex: 'createTime',
  119. minWidth: '100',
  120. align: 'center',
  121. scopedSlots: {
  122. customRender: 'status'
  123. }
  124. },
  125. {
  126. title: '备注',
  127. dataIndex: 'status',
  128. minWidth: '100',
  129. align: 'center',
  130. },
  131. ],
  132. // 加载数据方法 必须为 Promise 对象
  133. loadData: parameter => {
  134. // return getTenantsList(Object.assign(parameter, this.searchForm)).then(res => {
  135. // if (res.status == 200) {
  136. // const no = (res.data.pageNo - 1) * res.data.pageSize
  137. // for (let i = 0; i < res.data.list.length; i++) {
  138. // const _item = res.data.list[i]
  139. // _item.no = no + i + 1
  140. // _item.status = _item.status + '' === '1'
  141. // }
  142. // return res.data
  143. // }
  144. // })
  145. }
  146. }
  147. },
  148. methods: {
  149. // 创建时间change
  150. onChange(dates, dateStrings) {
  151. if ((dates, dateStrings)) {
  152. this.searchForm.beginDate = dateStrings[0]
  153. this.searchForm.endDate = dateStrings[1]
  154. }
  155. console.log(this.searchForm.beginDate, this.searchForm.endDate)
  156. },
  157. // 重置
  158. resetForm() {
  159. this.$refs.searchForm.resetFields()
  160. this.$refs.table.refresh(true)
  161. },
  162. },
  163. }
  164. </script>
  165. <style>
  166. .orderCenter-searchForm,
  167. .addButton {
  168. margin-bottom: 0;
  169. }
  170. .orderCenter-searchForm .ant-form-inline .ant-form-item {
  171. margin-bottom: 15px;
  172. }
  173. .total {
  174. margin-bottom: 15px;
  175. }
  176. </style>