classroom-setting-item.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. <template>
  2. <div>
  3. <!-- <el-form-item
  4. label="排课次数"
  5. prop="courseTimes"
  6. >
  7. <el-input v-model="form.courseTimes" placeholder="请输入排课次数"/>
  8. </el-form-item> -->
  9. <el-form-item
  10. label="排课起始时间"
  11. label-width="112px"
  12. :prop="'classs.' + type + '.courseTime'"
  13. :rules="[{ required: true, message: '请选择排课起始时间' }]"
  14. >
  15. <el-date-picker v-model.trim="form.courseTime"
  16. :picker-options="pickerOptions"
  17. style="width:100%!important;"
  18. type="date"
  19. value-format="yyyy-MM-dd"
  20. placeholder="选择日期">
  21. </el-date-picker>
  22. </el-form-item>
  23. <el-form-item
  24. label="跳过节假日"
  25. :prop="'classs.' + type + '.holiday'"
  26. :rules="[{ required: true, message: '否跳过节假日' }]"
  27. >
  28. <el-radio-group v-model="form.holiday">
  29. <el-radio :label="true">是</el-radio>
  30. <el-radio :label="false">否</el-radio>
  31. </el-radio-group>
  32. </el-form-item>
  33. <el-table
  34. v-if="form && form.cycle"
  35. :data="form.cycle"
  36. >
  37. <el-table-column
  38. prop="dayOfWeek"
  39. label="循环周期"
  40. width="160">
  41. <template slot-scope="scope">
  42. <el-form-item
  43. inline-message
  44. :rules="[{ required: true, message: '请选择循环周期' }]"
  45. :prop="'classs.' + type + '.cycle.' + scope.$index + '.dayOfWeek'"
  46. >
  47. <el-select v-model.trim="scope.row.dayOfWeek"
  48. style="width:100%!important"
  49. placeholder="请选择循环周期"
  50. clearable
  51. filterable>
  52. <el-option v-for="(item,index) in weekDateList"
  53. :key="index"
  54. :label="item.label"
  55. :value="item.value">
  56. </el-option>
  57. </el-select>
  58. </el-form-item>
  59. </template>
  60. </el-table-column>
  61. <el-table-column
  62. prop="time"
  63. label="课程时长(分)"
  64. width="160">
  65. <template slot-scope="scope">
  66. <el-form-item
  67. :prop="'classs.' + type + '.cycle.' + scope.$index + '.time'"
  68. inline-message>
  69. <el-select v-model.trim="scope.row.time"
  70. style="width:100%!important"
  71. placeholder="请选择课程时长"
  72. clearable
  73. :disabled="!!selectPrice"
  74. @change="startTimeChange(scope.row)"
  75. filterable>
  76. <el-option v-for="(item,index) in pricesArray"
  77. :key="index"
  78. :disabled="surplustime < item"
  79. :label="item"
  80. :value="item">
  81. </el-option>
  82. </el-select>
  83. <!-- <el-input disabled v-model="scope.row.time" placeholder="请输入课程时长"/> -->
  84. </el-form-item>
  85. </template>
  86. </el-table-column>
  87. <el-table-column
  88. prop="startClassTime"
  89. label="开始时间"
  90. width="160">
  91. <template slot-scope="scope">
  92. <el-form-item
  93. :prop="'classs.' + type + '.cycle.' + scope.$index + '.startClassTime'"
  94. :rules="[{ required: true, message: '请选择开始时间' }]"
  95. inline-message>
  96. <el-time-picker style="width: 100%!important;"
  97. v-model.trim="scope.row.startClassTime"
  98. format='HH:mm'
  99. value-format='HH:mm'
  100. placeholder="请选择时间"
  101. @change="startTimeChange(scope.row)"
  102. :picker-options="{
  103. selectableRange: ['04:30:00 - 23:59:59']
  104. }">
  105. </el-time-picker>
  106. </el-form-item>
  107. </template>
  108. </el-table-column>
  109. <el-table-column
  110. prop="endClassTime"
  111. label="结束时间"
  112. width="160">
  113. <template slot-scope="scope">
  114. <el-form-item
  115. :prop="'classs.' + type + '.cycle.' + scope.$index + '.endClassTime'"
  116. inline-message>
  117. <el-time-picker style="width: 100%!important;"
  118. v-model.trim="scope.row.endClassTime"
  119. format='HH:mm'
  120. disabled
  121. value-format='HH:mm'
  122. placeholder="请选择时间"
  123. :picker-options="{
  124. selectableRange: [scope.row.startClassTime + ':00 - 23:59:59']
  125. }">
  126. </el-time-picker>
  127. </el-form-item>
  128. </template>
  129. </el-table-column>
  130. <el-table-column
  131. prop="date"
  132. label=""
  133. >
  134. <template slot-scope="scope">
  135. <i @click="remove(scope.$index)" v-if="form.cycle.length > 1" class="close-icon el-icon-circle-close"></i>
  136. </template>
  137. </el-table-column>
  138. </el-table>
  139. <el-button
  140. icon="el-icon-circle-plus-outline"
  141. type="info"
  142. size="small"
  143. plain
  144. :disabled="surplustime < ((selectPrice || 0) || Math.min(...pricesArray))"
  145. @click="create"
  146. style="margin-top: 10px;width: 100%;"
  147. >添加循环</el-button>
  148. </div>
  149. </template>
  150. <script>
  151. import { diffTimerFormMinute, addTimerFormMinute } from '@/utils/date'
  152. import { classTimeList } from '@/utils/searchArray'
  153. import dayjs from 'dayjs'
  154. const classTimeListByType = {}
  155. for (const item of classTimeList) {
  156. classTimeListByType[item.value] = item.label
  157. }
  158. export default {
  159. props: ['form', 'type', 'surplustime', 'prices', 'selectPrice'],
  160. data() {
  161. return {
  162. classTimeListByType,
  163. }
  164. },
  165. computed: {
  166. pickerOptions() {
  167. return {
  168. firstDayOfWeek: 1,
  169. disabledDate (time) {
  170. return time.getTime() + 86400000 <= new Date().getTime();
  171. }
  172. }
  173. },
  174. weekDateList() {
  175. return [
  176. { value: "1", label: "星期一" },
  177. { value: "2", label: "星期二" },
  178. { value: "3", label: "星期三" },
  179. { value: "4", label: "星期四" },
  180. { value: "5", label: "星期五" },
  181. { value: "6", label: "星期六" },
  182. { value: "7", label: "星期日" }
  183. ]
  184. },
  185. pricesArray() {
  186. return (this.prices[this.type] || '').split(',').filter(item => !!item)
  187. }
  188. },
  189. methods: {
  190. create() {
  191. const initVal = {}
  192. if (this.selectPrice) {
  193. initVal.time = this.selectPrice
  194. }
  195. this.form.cycle.push(initVal)
  196. },
  197. remove(index) {
  198. this.form.cycle.splice(index, 1)
  199. },
  200. startTimeChange(item) {
  201. if (item.time && item.startClassTime) {
  202. let str = dayjs(new Date()).format('YYYY-MM-DD')
  203. this.$set(item, 'endClassTime', addTimerFormMinute(str, item.startClassTime, item.time))
  204. } else {
  205. this.$set(item, 'endClassTime', '')
  206. }
  207. }
  208. },
  209. }
  210. </script>
  211. <style lang="less" scoped>
  212. /deep/ .close-icon{
  213. cursor: pointer;
  214. font-size: 16px;
  215. }
  216. </style>