RefundRecord.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. <template>
  2. <a-card :bordered="false">
  3. <!-- 搜索条件 -->
  4. <div class="orderCenter-searchForm">
  5. <a-form ref="searchForm">
  6. <a-row :gutter="48">
  7. <a-col :span="8">
  8. <a-form-item label="创建时间" :label-col="{ span:4 }" :wrapper-col="{ span:12}">
  9. <a-range-picker v-model="time" :format="dateFormat" :placeholder="['开始时间','结束时间']" @change="onChange" />
  10. </a-form-item>
  11. </a-col>
  12. <a-col :span="6">
  13. <a-form-item label="关联订单号" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  14. <a-input v-model.trim="searchForm.num" placeholder="请输入" allowClear />
  15. </a-form-item>
  16. </a-col>
  17. <a-col :span="6">
  18. <a-form-item label="网点名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  19. <v-select v-model="searchForm.name" placeholder="请选择" allowClear ></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="服务项目" :label-col="{ span:4 }" :wrapper-col="{ span:12}">
  30. <v-select v-model="searchForm.fwname" placeholder="请选择" allowClear></v-select>
  31. </a-form-item>
  32. </a-col>
  33. <a-col :span="6">
  34. <a-form-item label="退款状态" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  35. <v-select v-model="searchForm.status" placeholder="请选择" allowClear ></v-select>
  36. </a-form-item>
  37. </a-col>
  38. </a-row>
  39. </a-form>
  40. </div>
  41. <!-- 合计 -->
  42. <div class="total">
  43. <a-icon type="info-circle" class="iconImg"/>
  44. <strong>合计:</strong><span v-model="countHJ">{{countHJ}} 单</span><strong style="margin-left: 15px;">实收:</strong><span v-model="incomeHJ">{{incomeHJ}} 元</span>
  45. </div>
  46. <!-- 列表 -->
  47. <s-table ref="table" size="default" :rowKey="(record) => record.id" :columns="columns" :data="loadData" bordered>
  48. <!-- 退款状态 -->
  49. <span slot="status" slot-scope="text, record">
  50. <template></template>
  51. </span>
  52. </s-table>
  53. </a-card>
  54. </template>
  55. <script>
  56. import { STable, VSelect } from '@/components'
  57. import getDate from '../../libs/getDate.js'
  58. import moment from 'moment'
  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. fwname:'', // 服务项目
  73. status:'' // 状态
  74. },
  75. time: [
  76. moment(getDate.getToday().starttime, this.dateFormat),
  77. moment(getDate.getToday().endtime, this.dateFormat)
  78. ],
  79. dateFormat: 'YYYY-MM-DD',
  80. countHJ:'40',
  81. incomeHJ:'2000',
  82. columns: [{
  83. title: '创建时间',
  84. dataIndex: 'createTime',
  85. minWidth: '100',
  86. align: 'center'
  87. },
  88. {
  89. title: '交易流水号',
  90. dataIndex: 'createTime',
  91. minWidth: '100',
  92. align: 'center'
  93. },
  94. {
  95. title: '关联订单号',
  96. dataIndex: 'createTime',
  97. width: '100',
  98. align: 'center'
  99. },
  100. {
  101. title: '网点名称',
  102. dataIndex: 'createTime',
  103. minWidth: '100',
  104. align: 'center'
  105. },
  106. {
  107. title: '退款项目',
  108. dataIndex: 'createTime',
  109. minWidth: '100',
  110. align: 'center'
  111. },
  112. {
  113. title: '退款金额(¥)',
  114. dataIndex: 'createTime',
  115. minWidth: '40',
  116. align: 'center'
  117. },
  118. {
  119. title: '退款人',
  120. dataIndex: 'createTime',
  121. minWidth: '100',
  122. align: 'center'
  123. },
  124. {
  125. title: '退款状态',
  126. dataIndex: 'createTime',
  127. minWidth: '100',
  128. align: 'center',
  129. scopedSlots: {
  130. customRender: 'status'
  131. }
  132. },
  133. {
  134. title: '备注',
  135. dataIndex: 'status',
  136. minWidth: '100',
  137. align: 'center',
  138. },
  139. ],
  140. // 加载数据方法 必须为 Promise 对象
  141. loadData: parameter => {
  142. // this.searchData.beginDate == null ? this.searchData.beginDate = getDate.getToday().starttime : null
  143. // this.searchData.endDate == null ? this.searchData.endDate = getDate.getToday().endtime : null
  144. // return getTenantsList(Object.assign(parameter, this.searchForm)).then(res => {
  145. // if (res.status == 200) {
  146. // const no = (res.data.pageNo - 1) * res.data.pageSize
  147. // for (let i = 0; i < res.data.list.length; i++) {
  148. // const _item = res.data.list[i]
  149. // _item.no = no + i + 1
  150. // _item.status = _item.status + '' === '1'
  151. // }
  152. // return res.data
  153. // }
  154. // })
  155. }
  156. }
  157. },
  158. methods: {
  159. // 创建时间change
  160. onChange(dates, dateStrings) {
  161. if ((dates, dateStrings)) {
  162. this.searchForm.beginDate = dateStrings[0]
  163. this.searchForm.endDate = dateStrings[1]
  164. }
  165. console.log(this.searchForm.beginDate, this.searchForm.endDate)
  166. },
  167. // 重置
  168. resetForm() {
  169. this.$refs.searchForm.resetFields()
  170. this.$refs.table.refresh(true)
  171. },
  172. },
  173. }
  174. </script>
  175. <style lang="less">
  176. .orderCenter-searchForm,
  177. .addButton {
  178. margin-bottom: 0;
  179. }
  180. .orderCenter-searchForm .ant-form-inline .ant-form-item {
  181. margin-bottom: 15px;
  182. }
  183. .total {
  184. margin-bottom: 24px;
  185. width:100%;
  186. background-color: #e6f7ff;
  187. border: 1px solid #91d5ff;
  188. padding: 8px 15px 8px 27px;
  189. border-radius: 4px;
  190. .iconImg{
  191. color: #1890FF;
  192. margin-right: 10px;
  193. }
  194. }
  195. </style>