classList-group.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. <template>
  2. <div>
  3. <el-form :model="form" ref="form">
  4. <classListItem
  5. v-for="(item, index) in form.classList"
  6. :key="index"
  7. :index="index"
  8. :item="item"
  9. @deteleClass="deteleClass"
  10. :form="form"
  11. :classList="activeClassList"
  12. @filterClassList="filterClassList"
  13. />
  14. </el-form>
  15. <el-button
  16. icon="el-icon-circle-plus-outline"
  17. plain
  18. type="info"
  19. size="small"
  20. style="width: 100%; margin: 20px 0"
  21. @click="addClass"
  22. :disabled="form.classList.length >= classList.length"
  23. >添加班级</el-button
  24. >
  25. <el-dialog
  26. :visible.sync="showSecondVisable"
  27. title="缴费信息设置"
  28. append-to-body
  29. width="800px"
  30. >
  31. <classPayList
  32. :classIdList="classIdList"
  33. :addCourseType='addCourseType'
  34. :courseTypesByType="courseTypesByType"
  35. :form="form"
  36. :payInfo="payInfo"
  37. @resetPayInfo="resetPayInfo"
  38. @close="showSecondVisable = false"
  39. v-if="showSecondVisable"
  40. />
  41. </el-dialog>
  42. </div>
  43. </template>
  44. <script>
  45. import classListItem from "./classList-item";
  46. import classPayList from "./class-pay-list";
  47. import { getDefaultPaymentCalender } from "@/api/buildTeam";
  48. export default {
  49. props: ["classList", "courseTypesByType"],
  50. components: { classListItem, classPayList },
  51. data() {
  52. return {
  53. form: {
  54. classList: [
  55. {
  56. classId: "",
  57. studentList: [],
  58. courseList: {},
  59. index: "",
  60. type: "",
  61. classList: this.classList,
  62. },
  63. ],
  64. },
  65. showSecondVisable: false,
  66. classIdList: [],
  67. activeClassList: [],
  68. addCourseType:[]
  69. };
  70. },
  71. mounted() {
  72. this.activeClassList = this.classList;
  73. },
  74. methods: {
  75. addClass() {
  76. this.form.classList.push({
  77. classId: "",
  78. studentList: [],
  79. courseList: {},
  80. index: "",
  81. type: "",
  82. classList: this.classList,
  83. });
  84. },
  85. deteleClass(index) {
  86. this.form.classList.splice(index, 1);
  87. },
  88. gotoSecond() {
  89. this.$refs.form.validate(async (res) => {
  90. if (res) {
  91. let flag = false;
  92. this.form.classList.forEach((item) => {
  93. if (item.studentList.length <= 0) {
  94. flag = true;
  95. }
  96. });
  97. if (flag) {
  98. this.$message.error("每个班级至少勾选一名学员");
  99. return;
  100. }
  101. this.classIdList = this.form.classList.map((item) => {
  102. return item.classId;
  103. });
  104. try {
  105. let result = await getDefaultPaymentCalender(this.classIdList);
  106. this.payInfo = result.data.defaultPaymentCalender;
  107. this.addCourseType = result.data.groupTypeSet
  108. this.showSecondVisable = true;
  109. } catch {}
  110. }
  111. });
  112. },
  113. filterClassList(id) {
  114. let arr = [];
  115. this.form.classList.forEach((item) => {
  116. if (item.classId) {
  117. arr.push(item.classId);
  118. }
  119. });
  120. if (id) {
  121. let item;
  122. // 找到对应的班级
  123. this.classList.forEach((classes) => {
  124. if (classes.id == id) {
  125. item = classes;
  126. }
  127. });
  128. this.form.classList.forEach((classes) => {
  129. if (classes.classId == id) {
  130. classes.type = item.type
  131. }
  132. });
  133. // 过滤类型不一样的
  134. this.activeClassList = this.classList.filter((classes) => {
  135. return item.type == classes.type;
  136. });
  137. this.addDisabled(arr);
  138. } else {
  139. if (arr.length == 0) {
  140. this.activeClassList = this.classList;
  141. } else {
  142. this.addDisabled(arr);
  143. }
  144. }
  145. },
  146. addDisabled(arr) {
  147. this.activeClassList = this.activeClassList.map((classes) => {
  148. return {
  149. ...classes,
  150. disabled: arr.indexOf(classes.id) != -1,
  151. };
  152. });
  153. },
  154. resetPayInfo(key,value,time){
  155. console.log(value,time)
  156. for(let k in this.payInfo){
  157. if( this.payInfo[k][key]){
  158. this.payInfo[k][key].courseCurrentPrice=value
  159. this.payInfo[k][key].courseTotalMinuties= parseInt(time)
  160. }
  161. }
  162. }
  163. },
  164. };
  165. </script>
  166. <style lang="scss" scoped>
  167. </style>