actualDetail.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. <template>
  2. <div>
  3. <el-dialog title="实际课耗详情" width="1000px" :visible.sync="courseVisible">
  4. <el-form
  5. :inline="true"
  6. @submit="getList"
  7. ref="searchForm"
  8. :model="searchForm"
  9. >
  10. <el-form-item prop="search">
  11. <el-input
  12. class="search"
  13. type="text"
  14. clearable
  15. v-model="searchForm.search"
  16. placeholder="学员名称/编号/手机号"
  17. ></el-input>
  18. </el-form-item>
  19. <el-form-item>
  20. <el-button type="danger" @click="getList">搜索</el-button>
  21. <el-button native-type="reset" type="primary" @click="onReSet"
  22. >重置</el-button
  23. >
  24. <ExportChiose
  25. v-permission="'export/orderList'"
  26. style="margin-bottom: 20px;margin-right:10px; margin-left:10px;display:inline-block"
  27. name="导出"
  28. ExportEnum="EXPORT_COURSE_CONSUMER_DETAIL"
  29. :exportData="onExport"
  30. fileName="实际课耗详细导出"
  31. errorMsg="请选择时间"
  32. :isDownList="true"
  33. />
  34. </el-form-item>
  35. </el-form>
  36. <el-table
  37. :data="tableList"
  38. ref="tableList"
  39. :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
  40. >
  41. <el-table-column prop="username" label="学生姓名"></el-table-column>
  42. <el-table-column prop="userId" label="学生姓名"></el-table-column>
  43. <el-table-column prop="phone" label="手机号"></el-table-column>
  44. <el-table-column prop="preConsumerNum" label="应耗课时">
  45. <template slot-scope="scope">
  46. <div>
  47. {{scope.row.preConsumerNum}}节
  48. </div>
  49. </template></el-table-column>
  50. <el-table-column prop="consumerNum" label="实耗课时">
  51. <template slot-scope="scope">
  52. <div>
  53. {{scope.row.consumerNum}}节
  54. </div>
  55. </template></el-table-column>
  56. </el-table>
  57. <pagination
  58. :total.sync="pageInfo.total"
  59. :page.sync="pageInfo.page"
  60. :limit.sync="pageInfo.limit"
  61. :page-sizes="pageInfo.page_size"
  62. @pagination="getList"
  63. />
  64. <div slot="footer" class="dialog-footer">
  65. <el-button
  66. type="primary"
  67. @click="courseVisible = false"
  68. >确 定</el-button
  69. >
  70. </div>
  71. </el-dialog>
  72. </div>
  73. </template>
  74. <script>
  75. import pagination from "@/components/Pagination/index";
  76. import { getCourseConsumerDetail } from '../api'
  77. import ExportChiose from "@/components/Export-chiose";
  78. export default {
  79. data(){
  80. return {
  81. tableList:[],
  82. courseVisible:false,
  83. searchForm:{search:'',month:'',organId:''},
  84. pageInfo: {
  85. // 分页规则
  86. limit: 10, // 限制显示条数
  87. page: 1, // 当前页
  88. total: 0, // 总条数
  89. page_size: [10, 20, 40, 50], // 选择限制显示条数
  90. },
  91. }
  92. },
  93. components:{
  94. pagination,
  95. ExportChiose
  96. },
  97. mounted() {
  98. },methods: {
  99. async openDialog(row,month){
  100. try{
  101. this.searchForm.month = month
  102. this.searchForm.organId = row.organId
  103. this.getList()
  104. this.courseVisible = true
  105. }catch(e){
  106. console.log(e)
  107. }
  108. },
  109. async getList(){
  110. const res = await getCourseConsumerDetail({page:this.pageInfo.page,rows:this.pageInfo.limit,...this.searchForm})
  111. this.tableList = res.data.rows;
  112. this.pageInfo.total = res.data.total;
  113. },
  114. onReSet(){
  115. this.searchForm.search='';
  116. this.pageInfo.page = 1;
  117. this.getList()
  118. },
  119. },
  120. computed:{
  121. onExport(){
  122. return {
  123. ...this.searchForm
  124. }
  125. }
  126. }
  127. }
  128. </script>
  129. <style scoped></style>