groupRecordManager.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <template>
  2. <div class="m-container">
  3. <h2>
  4. <div class="squrt"></div>
  5. 团练宝激活记录
  6. </h2>
  7. <div class="m-core">
  8. <save-form
  9. :inline="true"
  10. class="searchForm"
  11. ref="searchForm"
  12. @submit="search"
  13. @reset="reset"
  14. :saveKey="'tenantTradeManager'"
  15. :model.sync="searchForm"
  16. >
  17. <el-form-item prop="queryCondition">
  18. <el-input
  19. placeholder="学员编号/姓名/手机号"
  20. clearable
  21. type="text"
  22. v-model.trim="searchForm.queryCondition"
  23. ></el-input>
  24. </el-form-item>
  25. <el-form-item prop="orderNo">
  26. <el-input
  27. placeholder="订单号"
  28. clearable
  29. type="text"
  30. v-model.trim="searchForm.orderNo"
  31. ></el-input>
  32. </el-form-item>
  33. <el-form-item prop="createTimer">
  34. <el-date-picker
  35. v-model.trim="searchForm.createTimer"
  36. type="daterange"
  37. value-format="yyyy-MM-dd"
  38. range-separator="至"
  39. start-placeholder="订单开始时间"
  40. end-placeholder="订单结束时间"
  41. :picker-options="{ firstDayOfWeek: 1 }"
  42. ></el-date-picker>
  43. </el-form-item>
  44. <el-form-item>
  45. <el-button native-type="submit" type="danger">搜索</el-button>
  46. <el-button native-type="reset" type="primary">重置</el-button>
  47. </el-form-item>
  48. </save-form>
  49. <!-- 列表 -->
  50. <div class="tableWrap">
  51. <el-table
  52. :data="tableList"
  53. :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
  54. >
  55. <el-table-column align="center" label="交易流水号" prop="transNo">
  56. </el-table-column>
  57. <el-table-column align="center" label="订单号" prop="orderNo">
  58. </el-table-column>
  59. <el-table-column align="center" label="订单时间" prop="orderTime">
  60. </el-table-column>
  61. <el-table-column align="center" label="学员编号" prop="studentId">
  62. </el-table-column>
  63. <el-table-column align="center" label="学员名称" prop="name">
  64. </el-table-column>
  65. <el-table-column align="center" label="手机号码" prop="phone">
  66. </el-table-column>
  67. <!-- <el-table-column align="center" label="交易类型">
  68. <template slot-scope="scope">
  69. {{ scope.row.type | tenantStatus }}
  70. </template>
  71. </el-table-column> -->
  72. <el-table-column align="center" label="团练宝类型">
  73. <template slot-scope="scope">
  74. {{ scope.row.type | memberEnumType }}
  75. </template>
  76. </el-table-column>
  77. <!-- <el-table-column align="center" label="网络教室剩余时长" prop="productName">
  78. </el-table-column> -->
  79. <el-table-column align="center" label="数量">
  80. <template slot-scope="scope">
  81. {{ scope.row.time }}
  82. </template>
  83. </el-table-column>
  84. <el-table-column align="center" label="激活费用(元)">
  85. <template slot-scope="scope">
  86. {{ scope.row.amount | moneyFormat }}
  87. </template>
  88. </el-table-column>
  89. </el-table>
  90. <pagination
  91. :saveKey="'tenantTradeManager'"
  92. sync
  93. :total.sync="pageInfo.total"
  94. :page.sync="pageInfo.page"
  95. :limit.sync="pageInfo.limit"
  96. :page-sizes="pageInfo.page_size"
  97. @pagination="getList"
  98. />
  99. </div>
  100. </div>
  101. </div>
  102. </template>
  103. <script>
  104. import pagination from "@/components/Pagination/index";
  105. import { queryActiveRecord } from "./api";
  106. import { dealStatus } from "@/utils/searchArray";
  107. import { getTimes } from "@/utils";
  108. const initSearch = {
  109. queryCondition: null,
  110. orderNo: null,
  111. createTimer: [],
  112. };
  113. export default {
  114. components: { pagination },
  115. data() {
  116. return {
  117. dealStatus,
  118. tableList: [],
  119. pageInfo: {
  120. // 分页规则
  121. limit: 10, // 限制显示条数
  122. page: 1, // 当前页
  123. total: 0, // 总条数
  124. page_size: [10, 20, 40, 50], // 选择限制显示条数
  125. },
  126. searchForm: { ...initSearch }
  127. };
  128. },
  129. async mounted() {
  130. this.getList();
  131. },
  132. methods: {
  133. async getList() {
  134. try {
  135. let { createTimer, ...reset } = this.searchForm;
  136. const res = await queryActiveRecord({
  137. ...reset,
  138. ...getTimes(createTimer, ["startDate", "endDate"], "YYYY-MM-DD"),
  139. page: this.pageInfo.page,
  140. rows: this.pageInfo.limit
  141. });
  142. console.log(res)
  143. this.pageInfo.total = res.data.total;
  144. this.tableList = res.data.rows;
  145. } catch (e) {}
  146. },
  147. search() {
  148. this.pageInfo.page = 1;
  149. this.$refs.searchForm.save(this.searchForm);
  150. this.$refs.searchForm.save(this.pageInfo, "page");
  151. this.getList();
  152. },
  153. reset() {
  154. this.searchForm = { ...initSearch };
  155. this.search();
  156. },
  157. openService(row) {
  158. this.orderVisible = true
  159. },
  160. },
  161. filters: {
  162. tenantOrderStatus(val) {
  163. const template = {
  164. 0: "待支付",
  165. 1: "已支付",
  166. 2: "支付失败"
  167. }
  168. return template[val]
  169. }
  170. }
  171. };
  172. </script>
  173. <style lang="scss" scoped>
  174. .courseMask .el-dialog__body {
  175. padding-bottom: 0;
  176. }
  177. </style>