orderList.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. <!-- -->
  2. <template>
  3. <div class="m-container">
  4. <h2>
  5. <div class="squrt"></div>
  6. 推广订单
  7. </h2>
  8. <div class="m-core">
  9. <save-form
  10. :inline="true"
  11. :model="searchForm"
  12. @submit="search"
  13. @reset="onReSet"
  14. ref="searchForm"
  15. >
  16. <el-form-item prop="courseStatus">
  17. <el-input v-model="searchForm.orderNo" placeholder="请输入订单编号"></el-input>
  18. </el-form-item>
  19. <el-form-item prop="extensionUserId">
  20. <remote-search
  21. ariaPlaceholder="请选择推荐人"
  22. :commit="'setTeachers'"
  23. v-model="searchForm.extensionUserId"
  24. :demissionFlag="true"
  25. :isForzenWithQueryCondition="true"
  26. />
  27. </el-form-item>
  28. <el-form-item>
  29. <el-button native-type="submit" type="primary">搜索</el-button>
  30. <el-button native-type="reset" type="danger">重置</el-button>
  31. </el-form-item>
  32. </save-form>
  33. <div class="tableWrap">
  34. <el-table
  35. style="width: 100%"
  36. :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
  37. :data="tableList"
  38. >
  39. <el-table-column
  40. align="center"
  41. prop="orderNo"
  42. label="订单编号"
  43. >
  44. </el-table-column>
  45. <el-table-column
  46. align="center"
  47. prop="orderType"
  48. label="订单类型"
  49. >
  50. <template slot-scope="scope">
  51. {{getOrderType(scope.row.orderType)}}
  52. </template>
  53. </el-table-column>
  54. <el-table-column
  55. align="center"
  56. prop="orderAmount"
  57. label="订单金额"
  58. >
  59. <template slot-scope="scope">
  60. {{ scope.row.orderAmount|moneyFormat }}元
  61. </template>
  62. </el-table-column>
  63. <el-table-column
  64. align="center"
  65. prop="orderAmount"
  66. label="支付时间"
  67. >
  68. <template slot-scope="scope">
  69. {{ scope.row.payTime }}
  70. </template>
  71. </el-table-column>
  72. <el-table-column
  73. align="center"
  74. prop="extensionUser"
  75. label="推广人员"
  76. >
  77. <template slot-scope="scope">
  78. {{scope.row.extensionUser}}
  79. </template>
  80. </el-table-column>
  81. <el-table-column
  82. align="center"
  83. prop="extensionFee"
  84. label="绩效金额"
  85. >
  86. <template slot-scope="scope">
  87. {{scope.row.extensionFee|moneyFormat}}元
  88. </template>
  89. </el-table-column>
  90. </el-table>
  91. <pagination
  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 axios from "axios";
  105. import { getToken } from "@/utils/auth";
  106. import pagination from "@/components/Pagination/index";
  107. import { getOrderPage } from "@/api/businessManager";
  108. import { getInstrument } from "@/api/buildTeam";
  109. import { getTimes } from "@/utils";
  110. import load from "@/utils/loading";
  111. const orderType = {
  112. COURSE_SALE:'课包销售',
  113. MUSICAL_SALE:'乐器销售',
  114. REPAIR:'维修订单',
  115. "":'--'
  116. }
  117. export default {
  118. components: { pagination },
  119. data() {
  120. return {
  121. searchForm: {
  122. extensionUserId: null,
  123. orderNo:'',
  124. },
  125. soundLists: [],
  126. organList: [],
  127. tableList:[],
  128. pageInfo: {
  129. // 分页规则
  130. limit: 10, // 限制显示条数
  131. page: 1, // 当前页
  132. total: 0, // 总条数
  133. page_size: [10, 20, 40, 50], // 选择限制显示条数
  134. },
  135. categoryList:[]
  136. };
  137. },
  138. //生命周期 - 创建完成(可以访问当前this实例)
  139. created() {},
  140. //生命周期 - 挂载完成(可以访问DOM元素)
  141. mounted() {
  142. // 获取分部
  143. this.$store.dispatch("setBranchs");
  144. this.init();
  145. this.getList()
  146. },
  147. methods: {
  148. init() {
  149. },
  150. search() {
  151. this.pageInfo.page = 1;
  152. this.getList()
  153. },
  154. onReSet() {
  155. this.pageInfo.page = 1;
  156. this.searchForm= {
  157. search: null,
  158. organId:'',
  159. teacherIdList:'',
  160. timer:[],
  161. courseStatus:'',
  162. teachMode:''
  163. }
  164. this.getList()
  165. },
  166. async getList() {
  167. try{
  168. const { timer, ...rest } = this.searchForm;
  169. let obj = {
  170. page: this.pageInfo.page,
  171. rows: this.pageInfo.limit,
  172. ...rest,
  173. }
  174. const res = await getOrderPage(obj)
  175. this.tableList = res.data.rows
  176. this.pageInfo.total = res.data.total
  177. }catch(e){
  178. console.log(e)
  179. }
  180. },
  181. getOrderType(type){
  182. return type?orderType[type]:'--'
  183. }
  184. },
  185. };
  186. </script>
  187. <style lang='scss' scoped>
  188. </style>