index.vue 63 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010
  1. <template>
  2. <div class="m-container">
  3. <h2>
  4. <el-page-header
  5. @back="onCancel"
  6. content="VIP/乐理课申请"
  7. ></el-page-header>
  8. <!-- <div class="squrt" /> -->
  9. </h2>
  10. <div class="m-core">
  11. <div class="vipLeft">
  12. <el-alert
  13. title="课程信息"
  14. type="info"
  15. :closable="false"
  16. class="vipMsg"
  17. ></el-alert>
  18. <el-form
  19. ref="leftForm"
  20. :inline="true"
  21. :rules="leftFormRules"
  22. :label-position="labelPosition"
  23. label-width="110px"
  24. :model="leftForm"
  25. >
  26. <!-- <el-form-item label="课程名称" prop="name">
  27. <el-input v-model.trim="leftForm.name" />
  28. </el-form-item> -->
  29. <!-- :disabled="!leftForm.teacher || !leftForm.educationalTeacherId" -->
  30. <el-form-item label="课程分部" prop="classOrganId">
  31. <el-select
  32. v-model.trim="leftForm.classOrganId"
  33. filterable
  34. clearable
  35. @change="onClassChange"
  36. >
  37. <el-option
  38. v-for="(item, index) in selects.branchs"
  39. :key="index"
  40. :label="item.name"
  41. :value="item.id"
  42. />
  43. </el-select>
  44. </el-form-item>
  45. <el-form-item label="科目名称" prop="subject">
  46. <el-select
  47. v-model.trim="leftForm.subject"
  48. filterable
  49. clearable
  50. @change="changeSubject"
  51. :disabled="!leftForm.classOrganId"
  52. >
  53. <el-option
  54. v-for="(item, index) in subjectList"
  55. :key="index"
  56. :value="item.id"
  57. :label="item.name"
  58. />
  59. </el-select>
  60. </el-form-item>
  61. <!-- -->
  62. <el-form-item label="指导老师" prop="teacher">
  63. <el-select
  64. v-model.trim="leftForm.teacher"
  65. filterable
  66. clearable
  67. :disabled="!leftForm.subject"
  68. @change="setSection($event)"
  69. >
  70. <el-option
  71. v-for="(item, index) in teacherList"
  72. :key="index"
  73. :label="item.realName"
  74. :value="item.id"
  75. />
  76. </el-select>
  77. </el-form-item>
  78. <!-- @change="getClassOrgan()" -->
  79. <el-form-item label="乐团主管" prop="educationalTeacherId">
  80. <el-select
  81. v-model.trim="leftForm.educationalTeacherId"
  82. filterable
  83. clearable
  84. :disabled="!leftForm.subject"
  85. >
  86. <el-option
  87. v-for="(item, index) in educationList"
  88. :key="index"
  89. :label="item.userName"
  90. :value="item.userId"
  91. />
  92. </el-select>
  93. </el-form-item>
  94. <el-form-item label="课程形式" prop="courseType">
  95. <el-select
  96. v-model.trim="leftForm.courseType"
  97. clearable
  98. filterable
  99. :disabled="!leftForm.classOrganId || !leftForm.teacher"
  100. @change="changeType"
  101. >
  102. <el-option
  103. v-for="(item, index) in courseTypeList"
  104. :key="index"
  105. :label="item.name"
  106. :value="item.id"
  107. />
  108. </el-select>
  109. </el-form-item>
  110. <el-form-item label="教学点">
  111. <el-select
  112. v-model.trim="leftForm.section"
  113. filterable
  114. clearable
  115. :disabled="!leftForm.teacher"
  116. >
  117. <el-option
  118. v-for="(item, index) in scetionList"
  119. :key="index"
  120. :value="item.id"
  121. :label="item.name"
  122. />
  123. </el-select>
  124. </el-form-item>
  125. <el-form-item label="活动方案" prop="activeType" v-if="isMusicTheory">
  126. <el-select
  127. v-model.trim="leftForm.activeType"
  128. filterable
  129. clearable
  130. :disabled="!leftForm.courseType || isMusicTheory"
  131. @change="chioseActive"
  132. >
  133. <el-option
  134. v-for="(item, index) in activeList"
  135. :key="index"
  136. :value="item.id"
  137. :label="item.name"
  138. />
  139. </el-select>
  140. </el-form-item>
  141. <el-form-item
  142. label="活动方案"
  143. prop="activeType"
  144. v-else
  145. :rules="[
  146. {
  147. required: true,
  148. message: '请选择活动方案',
  149. trigger: 'change',
  150. },
  151. ]"
  152. >
  153. <el-select
  154. v-model.trim="leftForm.activeType"
  155. filterable
  156. clearable
  157. :disabled="!leftForm.courseType"
  158. @change="chioseActive"
  159. >
  160. <el-option
  161. v-for="(item, index) in activeList"
  162. :key="index"
  163. :value="item.id"
  164. :label="item.name"
  165. />
  166. </el-select>
  167. </el-form-item>
  168. <el-form-item label="每课时长">
  169. <el-select
  170. v-model.trim="leftForm.classTime"
  171. :disabled="timeTable.length > 0"
  172. >
  173. <el-option
  174. v-for="(item, index) in this.classTimeList"
  175. :key="index"
  176. :value="item"
  177. :label="item"
  178. ></el-option>
  179. </el-select>
  180. </el-form-item>
  181. <el-form-item label="报名开始时间" prop="signUpStart">
  182. <!-- @change="changeStartTime" -->
  183. <el-date-picker
  184. v-model.trim="leftForm.signUpStart"
  185. type="date"
  186. :picker-options="pickerOptions"
  187. value-format="yyyy-MM-dd HH:mm:ss"
  188. placeholder="请选择时间"
  189. />
  190. <!-- <el-date-picker
  191. v-model="leftForm.signTimer"
  192. type="daterange"
  193. range-separator="至"
  194. start-placeholder="开始日期"
  195. end-placeholder="结束日期"
  196. >
  197. </el-date-picker> -->
  198. </el-form-item>
  199. <el-form-item label="报名结束时间" prop="signUpEnd">
  200. <el-date-picker
  201. v-model.trim="leftForm.signUpEnd"
  202. type="date"
  203. :picker-options="pickerOptions1"
  204. value-format="yyyy-MM-dd HH:mm:ss"
  205. placeholder="请选择时间"
  206. />
  207. </el-form-item>
  208. <el-form-item label="上课学员" prop="students">
  209. <el-select
  210. v-model.trim="leftForm.students"
  211. collapse-tags
  212. multiple
  213. clearable
  214. placeholder="请输入上课学员"
  215. remote
  216. reserve-keyword
  217. @change="changeStudent"
  218. filterable
  219. :multiple-limit="studentLimit"
  220. :disabled="!leftForm.classOrganId || !leftForm.courseType"
  221. :remote-method="remoteMethod"
  222. :loading="remoteLoading"
  223. >
  224. <el-option
  225. v-for="item in studentList"
  226. :key="item.userId"
  227. :label="item.username"
  228. :value="item.userId"
  229. >
  230. <span style="float: left">{{ item.username }}</span>
  231. <span style="float: right; color: #8492a6; font-size: 13px">{{
  232. item.parentsPhone
  233. }}</span>
  234. </el-option>
  235. </el-select>
  236. </el-form-item>
  237. </el-form>
  238. </div>
  239. <div class="center">
  240. <el-alert
  241. title="排课设置"
  242. type="info"
  243. :closable="false"
  244. class="vipMsg"
  245. ></el-alert>
  246. <p
  247. class="submitP"
  248. v-if="minCourseNum && maxCourseNum && this.hotType == 'DISCOUNT'"
  249. >
  250. 该活动最小课时数:<span style="color: red">{{ minCourseNum }}</span
  251. >节 最大课时数:<span style="color: red">{{ maxCourseNum }}</span
  252. >节
  253. </p>
  254. <el-form
  255. :inline="true"
  256. :model="centerForm"
  257. label-width="100px"
  258. :label-position="labelPosition"
  259. >
  260. <el-form-item v-if="leftForm.courseStart" label="最早排课时间">
  261. <el-date-picker
  262. v-model.trim="leftForm.courseStart"
  263. disabled
  264. type="date"
  265. value-format="yyyy-MM-dd HH:mm:ss"
  266. placeholder="请选择时间"
  267. />
  268. </el-form-item>
  269. <el-form-item v-if="leftForm.courseEnd" label="最晚排课时间">
  270. <el-date-picker
  271. v-model.trim="leftForm.courseEnd"
  272. disabled
  273. type="date"
  274. value-format="yyyy-MM-dd HH:mm:ss"
  275. placeholder="请选择时间"
  276. />
  277. </el-form-item>
  278. <el-form-item v-if="hasOnline" label="线上课数">
  279. <el-input
  280. v-model.trim="centerForm.onlineCourseNum"
  281. @mousewheel.native.prevent
  282. @input="onCourseNumChange('online')"
  283. type="number"
  284. >
  285. <template slot="append">节</template>
  286. </el-input>
  287. </el-form-item>
  288. <el-form-item v-if="hasOffline" label="线下课数">
  289. <el-input
  290. v-model.trim="centerForm.offlineCourseNum"
  291. @mousewheel.native.prevent
  292. @input="onCourseNumChange('offline')"
  293. type="number"
  294. >
  295. <template slot="append">节</template>
  296. </el-input>
  297. </el-form-item>
  298. <el-form-item label="待排课数">
  299. <el-input v-model.trim="allCourseCount" disabled>
  300. <template slot="append">节</template>
  301. </el-input>
  302. </el-form-item>
  303. <el-form-item
  304. v-if="hotType == 'GIVE_CLASS' && isGiveClass"
  305. label="赠课课程类型"
  306. >
  307. <el-radio v-model.trim="centerForm.radio" label="ONLINE"
  308. >线上课</el-radio
  309. >
  310. <el-radio v-model.trim="centerForm.radio" label="OFFLINE"
  311. >线下课</el-radio
  312. >
  313. </el-form-item>
  314. <el-form-item label="">
  315. <el-button type="danger" @click="setCourse">点击排课</el-button>
  316. </el-form-item>
  317. </el-form>
  318. <!-- 排课列表开始 planList-->
  319. <div class="">
  320. <!-- <div class="planTop">
  321. <p>已排课程</p>
  322. <el-button type="text" @click="setCourse">{{
  323. id ? "新增排课" : "点击排课"
  324. }}</el-button>
  325. </div> -->
  326. <!-- <div class="planCore"> -->
  327. <el-table
  328. style="width: 100%"
  329. :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
  330. :data="timeTable"
  331. >
  332. <el-table-column align="center" prop="studentId" label="课程时间">
  333. <template slot-scope="scope">
  334. <div>{{ scope.row.classDate | formatTimer }}</div>
  335. </template>
  336. </el-table-column>
  337. <el-table-column
  338. align="center"
  339. prop="studentId"
  340. label="课程开始时间"
  341. >
  342. <template slot-scope="scope">
  343. <div>{{ scope.row.startClassTimeStr }}</div>
  344. </template>
  345. </el-table-column>
  346. <el-table-column
  347. align="center"
  348. prop="studentId"
  349. label="课程结束时间"
  350. >
  351. <template slot-scope="scope">
  352. <div>{{ scope.row.endClassTimeStr }}</div>
  353. </template>
  354. </el-table-column>
  355. <el-table-column align="center" prop="studentId" label="课程类型">
  356. <template slot-scope="scope">
  357. <div>{{ scope.row.teachMode | teachMode }}</div>
  358. </template>
  359. </el-table-column>
  360. </el-table>
  361. <!-- <div class="row">
  362. <div class="name">时间</div>
  363. <div class="week">开始时间</div>
  364. <div class="time">结束时间</div>
  365. <div class="time">课程类型</div>
  366. </div> -->
  367. <!-- <div
  368. v-for="(item, index) in this.timeTable"
  369. :key="index"
  370. class="row"
  371. >
  372. <div class="name">{{ item.classDate | formatTimer }}</div>
  373. <div class="week">{{ item.startClassTimeStr }}</div>
  374. <div class="time">{{ item.endClassTimeStr }}</div>
  375. <div class="time">{{ item.teachMode | teachMode }}</div>
  376. </div> -->
  377. <!-- </div> -->
  378. </div>
  379. </div>
  380. <div class="right">
  381. <el-alert
  382. title="课酬&缴费设置"
  383. type="info"
  384. :closable="false"
  385. class="vipMsg"
  386. ></el-alert>
  387. <el-form
  388. :model="rightForm"
  389. label-width="100px"
  390. :label-position="labelPosition"
  391. :inline="true"
  392. >
  393. <el-form-item v-if="hasOnline" label="线上课课酬">
  394. <el-input v-model.trim="rightForm.onlineCourse" :disabled="true">
  395. <template slot="append" v-if="!isMusicTheory">元/节</template>
  396. <template slot="append" v-else>元/人</template>
  397. </el-input>
  398. <!-- || onlineSalary!='TEACHER_DEFAULT' salaryReadonlyFlag==0 -->
  399. </el-form-item>
  400. <el-form-item v-if="hasOffline" label="线下课课酬">
  401. <el-input v-model.trim="rightForm.offlineCourse" :disabled="true">
  402. <template slot="append" v-if="!isMusicTheory">元/节</template>
  403. <template slot="append" v-else>元/人</template>
  404. </el-input>
  405. <!-- || offlineSalary!='TEACHER_DEFAULT' salaryReadonlyFlag==0 -->
  406. </el-form-item>
  407. <!-- <el-form-item v-if="hasOnline" label="线上课单价">
  408. <el-input
  409. v-model.trim="rightForm.onlinePrice"
  410. :disabled="paymentReadonlyFlag == 0"
  411. />
  412. </el-form-item>
  413. <el-form-item v-if="hasOffline" label="线下课单价">
  414. <el-input
  415. v-model.trim="rightForm.offlinePrice"
  416. :disabled="paymentReadonlyFlag == 0"
  417. />
  418. </el-form-item> -->
  419. <!-- <el-form-item label="课程总价">
  420. <el-input v-model.trim="rightForm.allPrice" disabled />
  421. </el-form-item> -->
  422. </el-form>
  423. <div style="width: 700px; clear: both">
  424. <el-table
  425. :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
  426. :data="activeStudentList"
  427. >
  428. <el-table-column align="center" prop="studentId" label="学员编号">
  429. </el-table-column>
  430. <el-table-column align="center" prop="userName" label="学员名称">
  431. </el-table-column>
  432. <el-table-column
  433. align="center"
  434. prop="studentId"
  435. v-if="hasOnline"
  436. label="线上课单价"
  437. >
  438. <template slot-scope="scope">
  439. <el-input-number
  440. :disabled="!isMusicTheory"
  441. size="mini"
  442. @change="changeStudentMoney"
  443. style="width: 90% !important"
  444. class="number-input"
  445. v-model="scope.row.onlineClassesUnitPrice"
  446. :controls="false"
  447. :min="0"
  448. placeholder="线上课单价"
  449. />
  450. </template>
  451. </el-table-column>
  452. <el-table-column
  453. align="center"
  454. prop="studentId"
  455. v-if="hasOffline"
  456. label="线下课单价"
  457. >
  458. <template slot-scope="scope">
  459. <el-input-number
  460. @change="changeStudentMoney"
  461. size="mini"
  462. style="width: 90% !important"
  463. class="number-input"
  464. :disabled="!isMusicTheory"
  465. v-model="scope.row.offlineClassesUnitPrice"
  466. :controls="false"
  467. :min="0"
  468. placeholder="线下课单价"
  469. />
  470. </template>
  471. </el-table-column>
  472. <el-table-column align="center" prop="studentId" label="缴费总额">
  473. <template slot-scope="scope">
  474. <el-input-number
  475. size="mini"
  476. style="width: 90% !important"
  477. class="number-input"
  478. v-model="scope.row.paymentPrice"
  479. :controls="false"
  480. :min="0"
  481. :disabled="true"
  482. placeholder="缴费总额"
  483. />
  484. </template>
  485. </el-table-column>
  486. </el-table>
  487. <!-- class="computeMoney" -->
  488. <div style="overflow: hidden">
  489. <el-button
  490. type="primary"
  491. class="computeMoney"
  492. @click="computational"
  493. >计算</el-button
  494. >
  495. </div>
  496. </div>
  497. </div>
  498. </div>
  499. <!-- 弹窗 -->
  500. <el-dialog
  501. title="VIP排课"
  502. ref="maskForm"
  503. width="500px"
  504. destroy-on-close
  505. :visible.sync="dialogFormVisible"
  506. >
  507. <el-form :model="maskForm" label-position="right" label-width="150px">
  508. <el-form-item label="开课时间">
  509. <!-- :picker-options="pickerOptions" -->
  510. <el-date-picker
  511. v-model.trim="maskForm.courseStartOnline"
  512. type="date"
  513. :picker-options="courseOption"
  514. placeholder="请选择开课时间"
  515. />
  516. </el-form-item>
  517. <!-- <el-form-item label="线下课开课时间">
  518. <el-date-picker
  519. v-model.trim="maskForm.courseStartOffline"
  520. type="date"
  521. :picker-options="courseOption"
  522. placeholder="请选择开课时间"
  523. />
  524. </el-form-item> -->
  525. <div
  526. class="line"
  527. style="height: 1px; background: #ccc; margin: 0 25px"
  528. ></div>
  529. <el-form-item label="课程类型" prop="type">
  530. <el-radio v-if="hasOnline" v-model.trim="maskForm.type" label="ONLINE"
  531. >线上课</el-radio
  532. >
  533. <el-radio
  534. v-if="hasOffline"
  535. v-model.trim="maskForm.type"
  536. label="OFFLINE"
  537. >线下课</el-radio
  538. >
  539. </el-form-item>
  540. <el-form-item label="循环周次" prop="week">
  541. <el-select
  542. v-model.trim="maskForm.week"
  543. style="width: 220px !important"
  544. >
  545. <el-option label="星期日" value="0" />
  546. <el-option label="星期一" value="1" />
  547. <el-option label="星期二" value="2" />
  548. <el-option label="星期三" value="3" />
  549. <el-option label="星期四" value="4" />
  550. <el-option label="星期五" value="5" />
  551. <el-option label="星期六" value="6" />
  552. </el-select>
  553. </el-form-item>
  554. <el-form-item label="上课时间" prop="startTime">
  555. <el-time-picker
  556. v-model.trim="maskForm.startTime"
  557. @change="getStartTime"
  558. format="HH:mm"
  559. value-format="HH:mm"
  560. placeholder="选择时间"
  561. />
  562. </el-form-item>
  563. <el-form-item label="下课时间" prop="endTime">
  564. <el-time-picker
  565. v-model.trim="maskForm.endTime"
  566. disabled
  567. format="HH:mm"
  568. value-format="HH:mm"
  569. :picker-options="{
  570. start: '04:30',
  571. step: '00:05',
  572. end: '23:30',
  573. }"
  574. placeholder="选择时间"
  575. />
  576. </el-form-item>
  577. </el-form>
  578. <div class="btnWrap">
  579. <div class="okBtn" @click="addWeek">确认</div>
  580. </div>
  581. <div class="planList">
  582. <div class="planTop">
  583. <p>已排课程</p>
  584. </div>
  585. <div class="planCore" v-if="this.lookList.length > 0">
  586. <div v-for="(item, index) in this.lookList" class="row" :key="index">
  587. <div class="name">{{ item.type }}</div>
  588. <div class="week">{{ item.week }}</div>
  589. <div class="time">{{ item.time }}</div>
  590. <div class="operation">
  591. <el-button type="text" @click="removeWeekCourse(item.id)"
  592. >删除</el-button
  593. >
  594. </div>
  595. </div>
  596. </div>
  597. <div class="nomore" v-else>暂无数据</div>
  598. <div slot="footer" style="margin-top: 20px" class="dialog-footer">
  599. <el-button @click="dialogFormVisible = false">取 消</el-button>
  600. <el-button type="primary" @click="setTimeTable">确 定</el-button>
  601. </div>
  602. </div>
  603. </el-dialog>
  604. <el-row>
  605. <el-col>
  606. <div class="okBtn" @click="submitInfo">{{ id ? "修改" : "确定" }}</div>
  607. </el-col>
  608. </el-row>
  609. <!-- <div class="btnWrap"> -->
  610. <!-- <div class="closeBtn">
  611. 取消
  612. </div>-->
  613. <!-- </div> -->
  614. </div>
  615. </template>
  616. <script>
  617. import {
  618. findTeacherByOrganId,
  619. getSubject,
  620. findEducationUsers,
  621. } from "@/api/buildTeam";
  622. import {
  623. vipGroupCategory,
  624. vipGroupActivityFind,
  625. getVipGroupCostCount,
  626. createVip,
  627. updateVipBaseInfo,
  628. } from "@/api/vipSeting";
  629. import { getTeachSchool, getTeacherBySubject } from "@/api/teacherManager";
  630. import axios from "axios";
  631. import { getToken } from "@/utils/auth";
  632. import { diffTimerFormMinute, addTimerFormMinute } from "@/utils/date";
  633. import { queryOrganStudentList } from "@/api/studentManager";
  634. import dayjs from "dayjs";
  635. export default {
  636. name: "buildVip",
  637. data() {
  638. return {
  639. dialogFormVisible: false,
  640. labelPosition: "right",
  641. leftForm: {
  642. // name: "",
  643. teacher: "",
  644. subject: "",
  645. courseType: "",
  646. activeType: "",
  647. classNum: "",
  648. classTime: "",
  649. // signTimer:[],
  650. signUpStart: "",
  651. signUpEnd: "",
  652. courseStartOnline: "",
  653. courseStartOffline: "",
  654. section: "",
  655. courseStart: "",
  656. courseEnd: "",
  657. educationalTeacherId: "",
  658. students: [],
  659. classOrganId: "", // 课程分部
  660. },
  661. activeStudentList: [],
  662. studentLimit: 0,
  663. classTimeList: [],
  664. centerForm: {
  665. allCourseNum: "",
  666. onlineCourseNum: 0,
  667. offlineCourseNum: 0,
  668. radio: "",
  669. },
  670. maskForm: {
  671. type: "",
  672. week: "",
  673. startTime: "",
  674. endTime: "",
  675. },
  676. rightForm: {
  677. onlineCourse: "",
  678. offlineCourse: "",
  679. onlinePrice: "",
  680. offlinePrice: "",
  681. allPrice: "",
  682. },
  683. remoteLoading: false,
  684. computationalBtn: false,
  685. subjectList: [], // 科目列表
  686. teacherList: [], // 老师列表
  687. educationList: [], // 教务
  688. // classOrganList: [], // 公用分部
  689. courseTypeList: [], // 课程类型集合
  690. activeList: [], //活动集合
  691. hasOnline: true,
  692. hasOffline: true,
  693. onlineSalary: "", // 线上课课酬结算方式
  694. offlineSalary: "", // 线下课课酬结算方式
  695. hotType: "",
  696. attribute1: "",
  697. attribute2: "",
  698. attribute3: "",
  699. maxCourseNum: 0,
  700. minCourseNum: 0,
  701. salaryReadonlyFlag: "", // 老师课酬是否可配
  702. paymentReadonlyFlag: "", // 课程单价是否可配
  703. lookList: [],
  704. onlinelookList: [], // 展示课表线上
  705. offlineLookList: [], // 展示课表线下
  706. timeTable: [], // 真正的课表
  707. giveNum: "",
  708. weekDay: [
  709. "星期日",
  710. "星期一",
  711. "星期二",
  712. "星期三",
  713. "星期四",
  714. "星期五",
  715. "星期六",
  716. ],
  717. scetionList: [],
  718. isGiveClass: false,
  719. activeStartTime: null,
  720. courseOption: null,
  721. pickerOptions: null,
  722. pickerOptions1: null,
  723. leftFormRules: {
  724. /**?
  725. * teacher: '',
  726. subject: '',
  727. courseType: '',
  728. activeType: '',
  729. */
  730. name: [
  731. {
  732. required: true,
  733. message: "请输入名称",
  734. trigger: "blur",
  735. },
  736. ],
  737. teacher: [
  738. {
  739. required: true,
  740. message: "请选择老师",
  741. trigger: "change",
  742. },
  743. ],
  744. educationalTeacherId: [
  745. {
  746. required: true,
  747. message: "请选择教务",
  748. trigger: "change",
  749. },
  750. ],
  751. classOrganId: [
  752. {
  753. required: true,
  754. message: "请选择课程分部",
  755. trigger: "change",
  756. },
  757. ],
  758. subject: [
  759. {
  760. required: true,
  761. message: "请选择科目",
  762. trigger: "change",
  763. },
  764. ],
  765. courseType: [
  766. {
  767. required: true,
  768. message: "请选择课程类型",
  769. trigger: "change",
  770. },
  771. ],
  772. students: [
  773. {
  774. required: true,
  775. message: "请选择上课学生",
  776. trigger: "change",
  777. },
  778. ],
  779. // activeType: [
  780. // {
  781. // required: true,
  782. // message: "请选择活动",
  783. // trigger: "change",
  784. // },
  785. // ],
  786. signUpStart: [
  787. {
  788. required: true,
  789. message: "请选择报名开始时间",
  790. trigger: "change",
  791. },
  792. ],
  793. signUpEnd: [
  794. {
  795. required: true,
  796. message: "请选择报名结束时间",
  797. trigger: "change",
  798. },
  799. ],
  800. },
  801. id: "",
  802. studentList: [],
  803. courseTimeList: [],
  804. isMusicTheory: false,
  805. };
  806. },
  807. computed: {
  808. allCourseCount() {
  809. let online, offline;
  810. this.centerForm.onlineCourseNum
  811. ? (online = this.centerForm.onlineCourseNum)
  812. : (online = 0);
  813. this.centerForm.offlineCourseNum
  814. ? (offline = this.centerForm.offlineCourseNum)
  815. : (offline = 0);
  816. let giveNum;
  817. if (this.hotType == "GIVE_CLASS") {
  818. // this.attribute1 从多少节开始送
  819. // this.attribute2 送多少节
  820. giveNum = parseInt(
  821. parseInt(offline) + parseInt(online) - this.attribute1 >= 0
  822. ? (giveNum = this.attribute2)
  823. : (giveNum = 0)
  824. );
  825. if (giveNum) {
  826. // 有赠送课时
  827. this.isGiveClass = true;
  828. }
  829. this.giveNum = giveNum || 0;
  830. return parseInt(offline) + parseInt(online) + "+" + giveNum || "";
  831. }
  832. return parseInt(offline) + parseInt(online) || "";
  833. },
  834. },
  835. created() {
  836. // this.init();
  837. },
  838. mounted() {
  839. // 获取所有老师的接口 根据声部id获取老师
  840. // 获取课程类型的接口
  841. // 获取学生列表
  842. Object.assign(this.$data, this.$options.data());
  843. setTimeout(() => {
  844. this.$refs["leftForm"].resetFields();
  845. }, 100);
  846. this.init();
  847. },
  848. activated() {
  849. // Object.assign(this.$data, this.$options.data());
  850. // setTimeout(() => {
  851. // this.$refs["leftForm"].resetFields();
  852. // }, 100);
  853. // this.init();
  854. },
  855. methods: {
  856. async init() {
  857. if (this.$route.query.rules) {
  858. this.rules = this.$route.query.rules;
  859. }
  860. if (this.$route.query.searchForm) {
  861. this.searchForm = this.$route.query.searchForm;
  862. }
  863. // 获取所有科目的接口
  864. await this.$store.dispatch("setBranchs");
  865. getSubject({
  866. tenantId: 1,
  867. }).then((res) => {
  868. if (res.code == 200) {
  869. this.subjectList = res.data;
  870. }
  871. });
  872. // 获取乐团主管
  873. this.pickerOptions = this.beginDate();
  874. this.pickerOptions1 = this.processDate();
  875. this.courseOption = this.coursesDate();
  876. },
  877. onCourseNumChange(type) {
  878. // 折扣类型,并且设置的排课数有值
  879. let centerForm = this.centerForm;
  880. if (
  881. this.hotType == "DISCOUNT" &&
  882. this.maxCourseNum &&
  883. this.minCourseNum
  884. ) {
  885. // 判断线上或线下总和大于排课次数
  886. let onlineNum = centerForm.onlineCourseNum || 0;
  887. let offlineNum = centerForm.offlineCourseNum || 0;
  888. let allNUm = parseInt(onlineNum) + parseInt(offlineNum);
  889. if (allNUm > this.maxCourseNum || allNUm < this.minCourseNum) {
  890. this.$message.error("待排课数不可超过该活动限制");
  891. return;
  892. }
  893. }
  894. },
  895. coursesDate() {
  896. let self = this;
  897. return {
  898. firstDayOfWeek: 1,
  899. disabledDate: (time) => {
  900. if (self.leftForm.courseStart) {
  901. let date = new Date(self.leftForm.courseStart.replace(/-/, "/"));
  902. let nowDate = new Date()
  903. let changeDate = date.getTime()-nowDate.getTime() >0?date:nowDate
  904. return time.getTime() < changeDate.getTime();
  905. }
  906. return;
  907. },
  908. };
  909. },
  910. beginDate() {
  911. let self = this;
  912. return {
  913. firstDayOfWeek: 1,
  914. disabledDate(time) {
  915. return time.getTime() + 86400000 <= new Date().getTime(); //开始时间不选时,结束时间最大值小于等于当天
  916. },
  917. };
  918. },
  919. processDate() {
  920. //提出结束时间必须大于提出开始时间
  921. let self = this;
  922. return {
  923. firstDayOfWeek: 1,
  924. disabledDate(time) {
  925. if (self.leftForm.signUpStart) {
  926. return (
  927. new Date(self.leftForm.signUpStart).getTime() > time.getTime()
  928. );
  929. } else {
  930. return time.getTime() > Date.now();
  931. //开始时间不选时,结束时间最大值小于等于当天
  932. }
  933. },
  934. };
  935. },
  936. changeSubject(val) {
  937. this.leftForm.teacher = "";
  938. this.leftForm.section = "";
  939. // 根据科目id获取相应的老师
  940. findTeacherByOrganId({
  941. subjectIds: val,
  942. organId: this.leftForm.classOrganId,
  943. }).then((res) => {
  944. if (res.code == 200) {
  945. this.teacherList = res.data;
  946. }
  947. });
  948. // getTeacherBySubject({ subjecId: val }).then(res => {
  949. // if (res.code == 200) {
  950. // this.teacherList = res.data;
  951. // }
  952. // })
  953. },
  954. // 选择课程类型
  955. changeType(val) {
  956. // 在这里清空默认课酬
  957. this.rightForm.offlineCourse = "";
  958. this.rightForm.onlineCourse = "";
  959. this.leftForm.activeType = "";
  960. this.leftForm.students = []; // 重置所选学生
  961. for (let i in this.courseTypeList) {
  962. if (this.courseTypeList[i].id == val) {
  963. // 学生人数
  964. this.leftForm.classNum = this.courseTypeList[i].studentNum;
  965. this.studentLimit = this.courseTypeList[i].studentNum;
  966. // 每课时长
  967. this.classTimeList = this.courseTypeList[i].singleClassMinutes.split(
  968. ","
  969. );
  970. // this.leftForm.classTime = this.courseTypeList[i].singleClassMinutes;
  971. this.leftForm.classTime = this.classTimeList[0];
  972. // 线上课单节价格
  973. this.rightForm.onlinePrice = this.courseTypeList[
  974. i
  975. ].onlineClassesUnitPrice;
  976. // 线下课单节价格
  977. this.rightForm.offlinePrice = this.courseTypeList[
  978. i
  979. ].offlineClassesUnitPrice;
  980. this.isMusicTheory = this.courseTypeList[i].musicTheory;
  981. }
  982. }
  983. // teacherId
  984. if (this.leftForm.courseType && this.leftForm.teacher) {
  985. // 根据课程类型获取活动方案
  986. vipGroupActivityFind({
  987. categoryId: this.leftForm.courseType,
  988. teacherId: this.leftForm.teacher,
  989. }).then((res) => {
  990. if (res.code == 200) {
  991. this.activeList = res.data;
  992. }
  993. });
  994. }
  995. },
  996. // 选择活动方案
  997. chioseActive(val) {
  998. this.rightForm.offlineCourse = "";
  999. this.rightForm.onlineCourse = "";
  1000. // this.rightForm.onlinePrice = '';
  1001. // this.rightForm.offlinePrice = '';
  1002. this.lookList = [];
  1003. this.timeTable = [];
  1004. this.attribute1 = "";
  1005. this.attribute2 = "";
  1006. this.attribute3 = "";
  1007. this.giveNum = 0;
  1008. this.isGiveClass = false;
  1009. this.leftForm.courseStart = "";
  1010. this.leftForm.courseEnd = "";
  1011. this.hasOnline = true;
  1012. this.hasOffline = true;
  1013. if (val) {
  1014. for (let i in this.courseTypeList) {
  1015. if (this.courseTypeList[i].id == this.leftForm.courseType) {
  1016. // 学生人数
  1017. this.leftForm.classNum = this.courseTypeList[i].studentNum;
  1018. // 每课时长
  1019. this.classTimeList = this.courseTypeList[
  1020. i
  1021. ].singleClassMinutes.split(",");
  1022. // this.leftForm.classTime = this.courseTypeList[i].singleClassMinutes;
  1023. this.leftForm.classTime = this.classTimeList[0];
  1024. // 线上课单节价格
  1025. this.rightForm.onlinePrice = this.courseTypeList[
  1026. i
  1027. ].onlineClassesUnitPrice;
  1028. // 线下课单节价格
  1029. this.rightForm.offlinePrice = this.courseTypeList[
  1030. i
  1031. ].offlineClassesUnitPrice;
  1032. }
  1033. }
  1034. // 根须活动id获取 相应的值
  1035. for (let i in this.activeList) {
  1036. if (this.activeList[i].id == val) {
  1037. // 如果是买赠就必须选择赠课类型
  1038. // 报名开始 报名结束 课程开始 课程结束 // 判断是否有线上,线下课 并同步状态
  1039. // this.leftForm.signUpStart = this.activeList[i].startTime;
  1040. // this.leftForm.signUpEnd = this.activeList[i].endTime;
  1041. this.maxCourseNum = this.activeList[i].maxCourseNum || 0;
  1042. this.minCourseNum = this.activeList[i].minCourseNum || 0;
  1043. this.leftForm.courseStart = this.activeList[i].coursesStartTime;
  1044. this.leftForm.courseEnd = this.activeList[i].coursesEndTime;
  1045. // 获取活动种类并保存
  1046. this.hotType = this.activeList[i].type;
  1047. // 获取买赠必要参数
  1048. this.attribute1 = this.activeList[i].attribute1;
  1049. this.attribute2 = this.activeList[i].attribute2;
  1050. this.attribute3 = this.activeList[i].attribute3;
  1051. // 存储课酬是否可配置
  1052. this.salaryReadonlyFlag = this.activeList[i].salaryReadonlyFlag;
  1053. this.paymentReadonlyFlag = this.activeList[i].paymentReadonlyFlag;
  1054. // hasOnline: false, hasOffline: false 还需要判断type类型 根据活动id获取
  1055. if (this.activeList[i].salarySettlementJson) {
  1056. let obj = JSON.parse(this.activeList[i].salarySettlementJson);
  1057. if (obj && obj.onlineSalarySettlement) {
  1058. // 有线上课
  1059. this.hasOnline = true;
  1060. this.onlineSalary =
  1061. obj.onlineSalarySettlement.salarySettlementType;
  1062. // ('线上:' + this.onlineSalary)
  1063. } else {
  1064. this.hasOnline = false;
  1065. }
  1066. if (obj && obj.offlineSalarySettlement) {
  1067. // 有线下课
  1068. this.hasOffline = true;
  1069. this.offlineSalary =
  1070. obj.offlineSalarySettlement.salarySettlementType;
  1071. // ('线下:' + this.offlineSalary)
  1072. } else {
  1073. this.hasOffline = false;
  1074. }
  1075. }
  1076. }
  1077. }
  1078. }
  1079. // 重置课程单价
  1080. },
  1081. // 点击确插入课表
  1082. addWeek() {
  1083. let courseType = this.maskForm.type;
  1084. // let week = ;this.maskForm.week
  1085. let startTime = this.maskForm.startTime;
  1086. if (!courseType || !this.maskForm.week || !startTime) {
  1087. this.$message.error("请填写完成信息");
  1088. return;
  1089. }
  1090. // 拿到相应的值插入数组
  1091. let endTime = this.MinutesTest(startTime, this.leftForm.classTime);
  1092. let str;
  1093. switch (courseType) {
  1094. case "ONLINE": {
  1095. str = "线上课";
  1096. break;
  1097. }
  1098. case "OFFLINE": {
  1099. str = "线下课";
  1100. break;
  1101. }
  1102. }
  1103. let flag = false;
  1104. for (let i in this.lookList) {
  1105. if (this.lookList[i].weekDay == this.maskForm.week) {
  1106. flag = true;
  1107. }
  1108. }
  1109. // true=> 说明有这一周 那么循环找到这一周 在判断时间
  1110. // flase=> 说明没有这一周的时间 直接添加
  1111. if (flag) {
  1112. // 有相同的周日
  1113. let arr = [];
  1114. for (let i in this.lookList) {
  1115. if (this.lookList[i].weekDay == this.maskForm.week) {
  1116. // 找到这一天的所有元素
  1117. // && !this.timeIsrange(this.lookList[i].startTime, this.lookList[i].endTime, startTime) && !this.timeIsrange(this.lookList[i].startTime, this.lookList[i].endTime, endTime)
  1118. let isStartTime = this.timeIsrange(
  1119. startTime,
  1120. endTime,
  1121. this.lookList[i].startTime
  1122. );
  1123. let isEndTime = this.timeIsrange(
  1124. startTime,
  1125. endTime,
  1126. this.lookList[i].endTime
  1127. );
  1128. arr.push(!isEndTime && !isStartTime);
  1129. }
  1130. }
  1131. let isAdd = true;
  1132. for (let j = 0; j < arr.length; j++) {
  1133. isAdd = isAdd && arr[j];
  1134. }
  1135. if (isAdd) {
  1136. this.lookList.push({
  1137. type: str,
  1138. week: this.weekDay[this.maskForm.week],
  1139. weekDay: this.maskForm.week,
  1140. startTime: startTime,
  1141. endTime: endTime,
  1142. time: startTime + "-" + endTime,
  1143. id: Date.now(),
  1144. });
  1145. } else {
  1146. this.$message.error("该时间段已排课请重选时间");
  1147. return;
  1148. }
  1149. } else {
  1150. this.lookList.push({
  1151. type: str,
  1152. week: this.weekDay[this.maskForm.week],
  1153. weekDay: this.maskForm.week,
  1154. startTime: startTime,
  1155. endTime: endTime,
  1156. time: startTime + "-" + endTime,
  1157. id: Date.now(),
  1158. });
  1159. }
  1160. // let courseType = this.maskForm.type;
  1161. // // let week = ;this.maskForm.week
  1162. // let startTime = this.maskForm.startTime;
  1163. // 根据时间排序
  1164. this.maskForm.type = "";
  1165. this.maskForm.week = "";
  1166. this.maskForm.startTime = "";
  1167. this.maskForm.endTime = "";
  1168. },
  1169. // 分钟小时相加减
  1170. MinutesTest(str, interval) {
  1171. let houer = str.split(":")[0];
  1172. let min = str.split(":")[1];
  1173. let sdate1 = new Date(1900, 1, 1, houer, min);
  1174. sdate1.setMinutes(sdate1.getMinutes() + parseInt(interval));
  1175. let H = sdate1.getHours();
  1176. let M = sdate1.getMinutes();
  1177. if (H < 10) H = "0" + H;
  1178. if (M < 10) M = "0" + M;
  1179. return H + ":" + M;
  1180. },
  1181. // 判断时间是否在时间段内
  1182. timeIsrange(beginTime, endTime, nowTime) {
  1183. var strb = beginTime.split(":");
  1184. if (strb.length != 2) {
  1185. return false;
  1186. }
  1187. var stre = endTime.split(":");
  1188. if (stre.length != 2) {
  1189. return false;
  1190. }
  1191. var strn = nowTime.split(":");
  1192. if (stre.length != 2) {
  1193. return false;
  1194. }
  1195. var b = new Date();
  1196. var e = new Date();
  1197. var n = new Date();
  1198. b.setHours(strb[0]);
  1199. b.setMinutes(strb[1]);
  1200. e.setHours(stre[0]);
  1201. e.setMinutes(stre[1]);
  1202. n.setHours(strn[0]);
  1203. n.setMinutes(strn[1]);
  1204. if (n.getTime() - b.getTime() >= 0 && n.getTime() - e.getTime() <= 0) {
  1205. // 在时间范围内
  1206. return true;
  1207. } else {
  1208. // 不在时间范围内
  1209. return false;
  1210. }
  1211. },
  1212. removeWeekCourse(id) {
  1213. for (let i in this.lookList) {
  1214. if (this.lookList[i].id == id) {
  1215. this.lookList.splice(i, 1);
  1216. }
  1217. }
  1218. },
  1219. setTimeTable() {
  1220. // 拿到线上课数与线下课数 以及
  1221. this.timeTable = [];
  1222. let online = parseInt(this.centerForm.onlineCourseNum) || 0;
  1223. let offline = parseInt(this.centerForm.offlineCourseNum) || 0;
  1224. let giveNum = this.giveNum;
  1225. let giveClassType = this.centerForm.radio;
  1226. if (giveClassType == "ONLINE") {
  1227. // 线上
  1228. online += giveNum;
  1229. } else if (giveClassType == "OFFLINE") {
  1230. offline += giveNum;
  1231. }
  1232. if (!this.maskForm.courseStartOnline) {
  1233. this.$message.error("请选择课程开始时间");
  1234. return;
  1235. }
  1236. // 这里判断是否选择了排课开始时间
  1237. // if (online && !this.maskForm.courseStartOnline) {
  1238. // this.$message.error("选择了线上课 但没有线上课开始时间");
  1239. // return;
  1240. // }
  1241. // if (offline && !this.maskForm.courseStartOffline) {
  1242. // this.$message.error("选择了线下课 但没有线下课开始时间");
  1243. // return;
  1244. // }
  1245. let date, date1;
  1246. date = new Date(this.maskForm.courseStartOnline.getTime());
  1247. date1 = new Date(this.maskForm.courseStartOnline.getTime());
  1248. // if (this.maskForm.courseStartOnline) {
  1249. // date = new Date(this.maskForm.courseStartOnline.getTime());
  1250. // }
  1251. // if (this.maskForm.courseStartOffline) {
  1252. // date1 = new Date(this.maskForm.courseStartOffline.getTime());
  1253. // }
  1254. // let startWeekday = this.maskForm.courseStart.getDay();
  1255. let onlineList = []; // 装线上课的数组
  1256. let offlineList = []; //装线下课的数组
  1257. if (this.lookList.length <= 0) {
  1258. this.$message.error("请先排课后再点击确认按钮");
  1259. return;
  1260. }
  1261. for (let i in this.lookList) {
  1262. if (this.lookList[i].type == "线上课") {
  1263. onlineList.push({
  1264. week: this.lookList[i].weekDay,
  1265. date: this.lookList[i],
  1266. });
  1267. }
  1268. if (this.lookList[i].type == "线下课") {
  1269. offlineList.push({
  1270. week: this.lookList[i].weekDay,
  1271. date: this.lookList[i],
  1272. });
  1273. }
  1274. }
  1275. // (onlineList + '----------------------------------------------------------------------------------');
  1276. // (offlineList);
  1277. if (online > 0 && onlineList.length <= 0) {
  1278. this.$message.error("选择了线上课但未排线上课");
  1279. this.timeTable = [];
  1280. return;
  1281. }
  1282. if (offline > 0 && offlineList.length <= 0) {
  1283. this.$message.error("选择了线下课但未排线下课");
  1284. this.timeTable = [];
  1285. return;
  1286. }
  1287. // 获取要排课的总数 获取每周要排多少次
  1288. while (online && online > 0) {
  1289. // 排线上课g
  1290. for (let i in onlineList) {
  1291. let num;
  1292. onlineList[i].week - date.getDay() >= 0
  1293. ? (num = onlineList[i].week - date.getDay())
  1294. : (num = onlineList[i].week - date.getDay() + 7); // +差值的天数://差值的天数+7
  1295. // (num);
  1296. let dataStr = this.getThinkDate(date, num);
  1297. this.timeTable.push({
  1298. classDate: dataStr + " 00:00:00",
  1299. actualTeacherId: this.leftForm.teacher,
  1300. startClassTimeStr: onlineList[i].date.startTime,
  1301. endClassTimeStr: onlineList[i].date.endTime,
  1302. teachMode: "ONLINE",
  1303. });
  1304. online--;
  1305. if (online == 0) break;
  1306. }
  1307. if (onlineList.length == 1 || this.isAllEqual(onlineList)) {
  1308. date.setDate(date.getDate() + 7);
  1309. }
  1310. // 加一周
  1311. }
  1312. // (date1)
  1313. while (offline && offline > 0) {
  1314. // 排线下课
  1315. for (let i in offlineList) {
  1316. let num;
  1317. offlineList[i].week - date1.getDay() >= 0
  1318. ? (num = offlineList[i].week - date1.getDay())
  1319. : (num = offlineList[i].week - date1.getDay() + 7); // +差值的天数://差值的天数+7
  1320. let dataStr = this.getThinkDate(date1, num);
  1321. this.timeTable.push({
  1322. classDate: dataStr + " 00:00:00",
  1323. actualTeacherId: this.leftForm.teacher,
  1324. startClassTimeStr: offlineList[i].date.startTime,
  1325. endClassTimeStr: offlineList[i].date.endTime,
  1326. teachMode: "OFFLINE",
  1327. });
  1328. offline--;
  1329. if (offline == 0) break;
  1330. }
  1331. // 加一周
  1332. if (offlineList.length == 1 || this.isAllEqual(offlineList)) {
  1333. date1.setDate(date1.getDate() + 7);
  1334. }
  1335. }
  1336. // (this.timeTable);
  1337. this.timeTable.sort((a, b) => {
  1338. let aStr = dayjs(
  1339. dayjs(a.classDate).format("YYYY-MM-DD") +
  1340. " " +
  1341. a.startClassTimeStr +
  1342. ":00"
  1343. ).valueOf();
  1344. let bStr = dayjs(
  1345. dayjs(b.classDate).format("YYYY-MM-DD") +
  1346. " " +
  1347. b.startClassTimeStr +
  1348. ":00"
  1349. ).valueOf();
  1350. return aStr - bStr;
  1351. });
  1352. this.dialogFormVisible = false;
  1353. },
  1354. getThinkDate(date, num) {
  1355. let Stamp = date;
  1356. Stamp.setDate(date.getDate() + num); // 获取当前月数的第几天
  1357. // (date.getMonth() + 1)
  1358. // (Stamp.getMonth() + 1)
  1359. var year = Stamp.getFullYear(); //获取完整的年份(4位,1970-????)
  1360. var month = Stamp.getMonth() + 1; //获取当前月份(0-11,0代表1月)
  1361. var mvar = "";
  1362. if (month < 10) {
  1363. mvar = "0" + month;
  1364. } else {
  1365. mvar = month + "";
  1366. }
  1367. var day = Stamp.getDate();
  1368. var dvar = "";
  1369. if (day < 10) {
  1370. dvar = "0" + day;
  1371. } else {
  1372. dvar = day + "";
  1373. }
  1374. // (year + "-" + mvar + '-' + dvar);
  1375. return year + "-" + mvar + "-" + dvar;
  1376. },
  1377. // 计算课酬
  1378. computational() {
  1379. this.computationalBtn = true;
  1380. let userId = this.leftForm.teacher || null;
  1381. let giveTeachMode = this.centerForm.radio || null;
  1382. let vipGroupCategoryId = this.leftForm.courseType || null;
  1383. let vipGroupActivityId = this.leftForm.activeType || null;
  1384. let onlineClassesUnitPrice = this.rightForm.onlinePrice || null;
  1385. let offlineClassesUnitPrice = this.rightForm.offlinePrice || null;
  1386. let onlineClassesNum = this.centerForm.onlineCourseNum || 0;
  1387. let offlineClassesNum = this.centerForm.offlineCourseNum || 0;
  1388. let singleClassMinutes = this.leftForm.classTime;
  1389. if (this.hotType == "GIVE_CLASS") {
  1390. if (this.centerForm.radio == "ONLINE") {
  1391. onlineClassesNum =
  1392. parseInt(onlineClassesNum) + parseInt(this.giveNum);
  1393. } else if (this.centerForm.radio == "OFFLINE") {
  1394. offlineClassesNum =
  1395. parseInt(offlineClassesNum) + parseInt(this.giveNum);
  1396. }
  1397. }
  1398. let onlineTeacherSalary = this.rightForm.onlineCourse || null;
  1399. let offlineTeacherSalary = this.rightForm.offlineCourse || null;
  1400. getVipGroupCostCount({
  1401. vipGroupActivityId,
  1402. onlineClassesUnitPrice,
  1403. onlineTeacherSalary,
  1404. offlineTeacherSalary,
  1405. vipGroupCategoryId,
  1406. offlineClassesUnitPrice,
  1407. onlineClassesNum,
  1408. offlineClassesNum,
  1409. userId,
  1410. giveTeachMode,
  1411. singleClassMinutes,
  1412. vipGroupStudentCoursePrices: this.activeStudentList,
  1413. }).then((res) => {
  1414. if (res.code == 200) {
  1415. this.rightForm.onlineCourse = res.data.onlineTeacherSalary;
  1416. this.rightForm.offlineCourse = res.data.offlineTeacherSalary;
  1417. this.rightForm.allPrice = res.data.totalPrice;
  1418. this.activeStudentList.forEach((stu) => {
  1419. if (res.data.hasOwnProperty(stu.studentId)) {
  1420. stu.paymentPrice = res.data[stu.studentId];
  1421. }
  1422. });
  1423. }
  1424. });
  1425. },
  1426. isAllEqual(array) {
  1427. if (array.length > 0) {
  1428. return !array.some((val, index) => {
  1429. return val.week != array[0].week;
  1430. });
  1431. } else {
  1432. return true;
  1433. }
  1434. },
  1435. submitInfo() {
  1436. if (!this.computationalBtn) {
  1437. this.$message.error("请点击计算按钮计算课酬");
  1438. return;
  1439. }
  1440. // let activeCourseType;
  1441. let flag = false;
  1442. // (this.courseTypeList,)
  1443. // this.courseTypeList.forEach((courseType) => {
  1444. // if (courseType.id == this.leftForm.courseType) {
  1445. // activeCourseType = courseType;
  1446. // }
  1447. // });
  1448. // (activeCourseType)
  1449. if (this.isMusicTheory) {
  1450. if (
  1451. this.leftForm.students.length > this.studentLimit ||
  1452. this.leftForm.students.length < 3
  1453. ) {
  1454. this.$message.error(`请选择上课学生为3-${this.studentLimit}人`);
  1455. flag = true;
  1456. }
  1457. } else {
  1458. if (this.leftForm.students.length !== this.studentLimit) {
  1459. this.$message.error(`请选择上课学生为${this.studentLimit}人`);
  1460. flag = true;
  1461. }
  1462. }
  1463. if (flag) return;
  1464. // 获取活动方案
  1465. // 判断线上课课酬和线下课课酬
  1466. let online = parseInt(this.centerForm.onlineCourseNum);
  1467. let offline = parseInt(this.centerForm.offlineCourseNum);
  1468. let giveNum = this.giveNum;
  1469. let giveClassType = this.centerForm.radio;
  1470. if (giveClassType == "ONLINE") {
  1471. // 线上
  1472. online += giveNum;
  1473. } else if (giveClassType == "OFFLINE") {
  1474. offline += giveNum;
  1475. }
  1476. let obj = {};
  1477. obj.courseSchedules = this.timeTable;
  1478. /**
  1479. *
  1480. * teacher: '',
  1481. subject: '',
  1482. courseType: '',
  1483. activeType: '',
  1484. classNum: '',
  1485. classTime: '',
  1486. signUpStart: '',
  1487. signUpEnd: '',
  1488. courseStart: '',
  1489. courseEnd: ''
  1490. */
  1491. let studentIdList = this.leftForm.students.join(",") || null;
  1492. obj.vipGroupApplyBaseInfo = {
  1493. studentIdList, // 这个不要了
  1494. vipGroupStudentCoursePrices: this.activeStudentList,
  1495. coursesExpireDate: this.leftForm.courseEnd,
  1496. teacherSchoolId: this.leftForm.section,
  1497. // name: this.leftForm.name,
  1498. offlineClassesNum: offline || 0,
  1499. onlineClassesNum: online || 0,
  1500. offlineClassesUnitPrice: this.rightForm.offlinePrice || 0,
  1501. onlineClassesUnitPrice: this.rightForm.onlinePrice || 0,
  1502. paymentExpireDate: this.leftForm.signUpEnd,
  1503. registrationStartTime: this.leftForm.signUpStart,
  1504. singleClassMinutes: this.leftForm.classTime,
  1505. studentNum: this.leftForm.classNum,
  1506. userId: this.leftForm.teacher,
  1507. vipGroupActivityId: this.leftForm.activeType,
  1508. vipGroupCategoryId: this.leftForm.courseType,
  1509. onlineTeacherSalary: this.rightForm.onlineCourse || 0,
  1510. offlineTeacherSalary: this.rightForm.offlineCourse || 0,
  1511. giveTeachMode: this.centerForm.radio,
  1512. subjectIdList: this.leftForm.subject,
  1513. educationalTeacherId: this.leftForm.educationalTeacherId,
  1514. organId: this.leftForm.classOrganId,
  1515. };
  1516. // 新增
  1517. createVip(obj).then((res) => {
  1518. if (res.code == 200) {
  1519. if (res.data == "ING") {
  1520. this.$confirm(
  1521. "课程提交成功,已提交运营主管审批,审批通过后,课程创建成功!",
  1522. "提示",
  1523. {
  1524. confirmButtonText: "确定",
  1525. type: "warning",
  1526. }
  1527. ).then(() => {
  1528. this.$message.success("提交成功");
  1529. this.$store.dispatch("delVisitedViews", this.$route);
  1530. this.$router.push({
  1531. path: "/vipManager/vipList",
  1532. query: {
  1533. rules: this.rules,
  1534. searchForm: this.searchForm,
  1535. },
  1536. });
  1537. });
  1538. } else {
  1539. this.$message.success("恭喜您创建成功");
  1540. this.$store.dispatch("delVisitedViews", this.$route);
  1541. this.$router.push({
  1542. path: "/vipManager/vipList",
  1543. query: {
  1544. rules: this.rules,
  1545. searchForm: this.searchForm,
  1546. },
  1547. });
  1548. }
  1549. }
  1550. console.log(res)
  1551. if (res.code == 206) {
  1552. this.$confirm(res.msg, "提示", {
  1553. confirmButtonText: "确定",
  1554. type: "warning",
  1555. }).then(() => {
  1556. obj.allowOverstepActivityStudentNum = 1;
  1557. createVip(obj).then((res) => {
  1558. if (res.code == 200) {
  1559. this.$message.success("提交成功");
  1560. this.$store.dispatch("delVisitedViews", this.$route);
  1561. this.$router.push({
  1562. path: "/vipManager/vipList",
  1563. query: {
  1564. rules: this.rules,
  1565. searchForm: this.searchForm,
  1566. },
  1567. });
  1568. }
  1569. });
  1570. });
  1571. }
  1572. });
  1573. },
  1574. setSection(val) {
  1575. this.leftForm.section = "";
  1576. this.rightForm.offlineCourse = "";
  1577. this.rightForm.onlineCourse = "";
  1578. // this.leftForm.courseType = "";
  1579. if (val) {
  1580. getTeachSchool({
  1581. userId: val,
  1582. }).then((res) => {
  1583. if (res.code == 200) {
  1584. this.scetionList = res.data;
  1585. }
  1586. });
  1587. }
  1588. // for (let i in this.teacherList) {
  1589. // if (this.teacherList[i].id == val) {
  1590. // // 根据分部id去获取课程形式
  1591. // vipGroupCategory({ organId: this.teacherList[i].organId }).then(
  1592. // res => {
  1593. // if (res.code == 200) {
  1594. // this.courseTypeList = res.data;
  1595. // }
  1596. // }
  1597. // );
  1598. // }
  1599. // }
  1600. // this.getClassOrgan(); // 获取公用部分
  1601. },
  1602. // getClassOrgan() {
  1603. // // 获取公用分部
  1604. // const leftForm = this.leftForm;
  1605. // let teacher = leftForm.teacher ? leftForm.teacher : null;
  1606. // let educationalTeacherId = leftForm.educationalTeacherId
  1607. // ? leftForm.educationalTeacherId
  1608. // : null;
  1609. // leftForm.classOrganId = null; // 重置课程分部数据
  1610. // this.classOrganList = [];
  1611. // // 初始化上课学生
  1612. // this.studentList = [];
  1613. // this.leftForm.students = [];
  1614. // if (!teacher || !educationalTeacherId) {
  1615. // // 如果没有选择指导老师和乐团主管则不请求
  1616. // return;
  1617. // }
  1618. // getPublicOrgans({
  1619. // teacherId: teacher,
  1620. // eduTeacherId: educationalTeacherId,
  1621. // }).then((res) => {
  1622. // if (res.code == 200) {
  1623. // let result = res.data ? res.data : [];
  1624. // this.classOrganList = result;
  1625. // }
  1626. // });
  1627. // },
  1628. onClassChange(val) {
  1629. // 课程分部改变时
  1630. // 老师 乐团主管 都要重置
  1631. this.studentList = [];
  1632. this.$set(this.leftForm, "students", []);
  1633. this.$set(this.leftForm, "teacher", "");
  1634. this.$set(this.leftForm, "educationalTeacherId", "");
  1635. this.$set(this.leftForm, "section", "");
  1636. this.$set(this.leftForm, "activeType", "");
  1637. this.$set(this.leftForm, "classTime", "");
  1638. this.$set(this.leftForm, "subject", "");
  1639. // this.leftForm.students = [];
  1640. // this.leftForm.teacherId = "";
  1641. // this.leftForm.educationalTeacherId = "";
  1642. this.courseTypeList = [];
  1643. if (this.leftForm.courseType) {
  1644. this.$set(this.leftForm, "courseType", null);
  1645. }
  1646. // this.leftForm.courseType = null;
  1647. if (val) {
  1648. this.getOrganStudentList(val);
  1649. vipGroupCategory({
  1650. organId: val,
  1651. }).then((res) => {
  1652. if (res.code == 200) {
  1653. this.courseTypeList = res.data;
  1654. }
  1655. });
  1656. // 获取老师
  1657. // 获取乐团主管
  1658. findEducationUsers({ organId: val }).then((res) => {
  1659. if (res.code == 200) {
  1660. this.educationList = res.data;
  1661. }
  1662. });
  1663. }
  1664. },
  1665. onCancel() {
  1666. this.$store.dispatch("delVisitedViews", this.$route);
  1667. this.$router.push({
  1668. path: "/vipManager/vipList",
  1669. query: {
  1670. rules: this.rules,
  1671. searchForm: this.searchForm,
  1672. },
  1673. });
  1674. },
  1675. setCourse() {
  1676. if (
  1677. this.hotType == "GIVE_CLASS" &&
  1678. this.isGiveClass &&
  1679. !this.centerForm.radio
  1680. ) {
  1681. this.$message.error("您还未选择赠课类型");
  1682. return;
  1683. }
  1684. this.$refs["leftForm"].validate((vali) => {
  1685. if (vali) {
  1686. let centerForm = this.centerForm;
  1687. if (
  1688. this.hotType == "DISCOUNT" &&
  1689. this.maxCourseNum &&
  1690. this.minCourseNum
  1691. ) {
  1692. // 判断线上或线下总和大于排课次数
  1693. let onlineNum = centerForm.onlineCourseNum || 0;
  1694. let offlineNum = centerForm.offlineCourseNum || 0;
  1695. let allNUm = parseInt(onlineNum) + parseInt(offlineNum);
  1696. if (allNUm > this.maxCourseNum || allNUm < this.minCourseNum) {
  1697. this.$message.error("待排课数不可超过该活动限制");
  1698. return;
  1699. }
  1700. }
  1701. this.dialogFormVisible = true;
  1702. }
  1703. });
  1704. },
  1705. setVipInfo(data) {
  1706. // this.leftForm.name = data.name;
  1707. this.leftForm.subject = parseInt(data.subjectIdList);
  1708. // 激活声部下的所有老师
  1709. this.changeSubject(parseInt(data.subjectIdList));
  1710. // 设置老师
  1711. this.leftForm.teacher = data.userId;
  1712. this.setSection(data.userId);
  1713. // 课程形式
  1714. this.leftForm.courseType = data.vipGroupCategoryId;
  1715. // 获取课程形式下的活动方案
  1716. this.changeType(this.leftForm.courseType);
  1717. // 根据课程形式获取活动方案
  1718. this.leftForm.activeType = data.vipGroupActivityId;
  1719. setTimeout((res) => {
  1720. this.chioseActive(data.vipGroupActivityId);
  1721. }, 1000);
  1722. this.leftForm.section = data.teacherSchoolId;
  1723. this.leftForm.classNum = data.studentNum;
  1724. this.leftForm.classTime = data.singleClassMinutes;
  1725. this.leftForm.signUpStart = data.registrationStartTime;
  1726. this.leftForm.signUpEnd = data.paymentExpireDate;
  1727. this.centerForm.onlineCourseNum = data.onlineClassesNum;
  1728. this.centerForm.offlineCourseNum = data.offlineCourseNum;
  1729. /**
  1730. * rightForm: {
  1731. onlineCourse: '',
  1732. offlineCourse: '',
  1733. onlinePrice: '',
  1734. offlinePrice: '',
  1735. allPrice: ''
  1736. },
  1737. *
  1738. */
  1739. this.rightForm.onlineCourse = data.onlineTeacherSalary;
  1740. this.rightForm.onlinePrice = data.onlineClassesUnitPrice;
  1741. this.rightForm.offlineCourse = data.offlineTeacherSalary;
  1742. this.rightForm.offlinePrice = data.offlineClassesUnitPrice;
  1743. this.rightForm.allPrice = data.totalPrice;
  1744. //subjectIdList
  1745. },
  1746. getOrganStudentList(organId) {
  1747. if (organId) {
  1748. queryOrganStudentList({
  1749. rows: 50,
  1750. organId: organId,
  1751. }).then((res) => {
  1752. if (res.code == 200) {
  1753. this.studentList = res.data.rows;
  1754. }
  1755. });
  1756. }
  1757. },
  1758. remoteMethod(query) {
  1759. if (query !== "") {
  1760. this.remoteLoading = true;
  1761. // 发请求搜索
  1762. const url = "/api-web/studentManage/queryOrganStudentList";
  1763. const options = {
  1764. method: "get",
  1765. headers: {
  1766. Authorization: getToken(),
  1767. },
  1768. params: {
  1769. rows: 9999,
  1770. search: query,
  1771. organId: this.leftForm.classOrganId,
  1772. },
  1773. url,
  1774. };
  1775. this.remoteLoading = true;
  1776. // this.studentList = []
  1777. axios(options).then((res) => {
  1778. this.remoteLoading = false;
  1779. let result = res.data;
  1780. if (result.code == 200) {
  1781. // Array.prototype.splice.apply(this.studentList, result.data.rows);
  1782. if (result.data.rows && result.data.rows.length > 0) {
  1783. result.data.rows.forEach((item) => {
  1784. this.studentList.unshift(item);
  1785. });
  1786. this.studentList = this.deweight(this.studentList, "userId");
  1787. }
  1788. // this.studentList = this.studentList.concat(result.data.rows);
  1789. }
  1790. });
  1791. // queryStudentList({ rows: 100, search: query }).then(res => {
  1792. // if (res.code == 200) {
  1793. // this.remoteLoading = false;
  1794. // this.studentList = this.studentList.concat(res.data.rows);
  1795. // this.unique(this.studentList, "userId");
  1796. // }
  1797. // });
  1798. }
  1799. },
  1800. changeStudent(val) {
  1801. this.activeStudentList = [];
  1802. this.studentList.forEach((stu) => {
  1803. if (val.indexOf(stu.userId) != -1) {
  1804. this.activeStudentList.push({
  1805. studentId: stu.userId,
  1806. userName: stu.username,
  1807. onlineClassesUnitPrice: this.rightForm.onlinePrice,
  1808. offlineClassesUnitPrice: this.rightForm.offlinePrice,
  1809. paymentPrice: "",
  1810. });
  1811. }
  1812. });
  1813. },
  1814. // 制定属性去重
  1815. deweight(arr, key) {
  1816. let res = [];
  1817. arr.forEach((item) => {
  1818. let list = [];
  1819. res.forEach((resitem) => {
  1820. list.push(resitem[key]);
  1821. });
  1822. if (list.indexOf(item[key]) === -1) {
  1823. res.push(item);
  1824. }
  1825. });
  1826. return res;
  1827. },
  1828. getStartTime(val) {
  1829. if (val) {
  1830. let date = dayjs(new Date()).format("YYYY-MM-DD");
  1831. this.maskForm.endTime = addTimerFormMinute(
  1832. date,
  1833. val,
  1834. this.leftForm.classTime
  1835. );
  1836. } else {
  1837. this.maskForm.endTime = "";
  1838. }
  1839. if (!this.maskForm.endTime) {
  1840. this.maskForm.startTime = "";
  1841. }
  1842. },
  1843. changeStudentMoney(val) {
  1844. if (val) {
  1845. this.computationalBtn = false;
  1846. }
  1847. },
  1848. },
  1849. // watch: {
  1850. // rightForm: {
  1851. // handler (newName, oldName) {
  1852. // this.computationalBtn = false
  1853. // },
  1854. // deep: true
  1855. // }
  1856. // }
  1857. };
  1858. </script>
  1859. <style lang="scss" scoped>
  1860. .computeMoney {
  1861. margin-top: 10px;
  1862. float: right;
  1863. }
  1864. .m-core {
  1865. margin-top: 30px;
  1866. // display: flex;
  1867. // flex-direction: row;
  1868. // justify-content: space-around;
  1869. .el-input {
  1870. width: 180px;
  1871. }
  1872. h4 {
  1873. font-size: 16px;
  1874. background-color: #ccc;
  1875. color: #fff;
  1876. // text-align: center;
  1877. width: 100%;
  1878. height: 40px;
  1879. line-height: 40px;
  1880. margin-bottom: 20px;
  1881. padding: 0 20px;
  1882. }
  1883. // .vipLeft {
  1884. // width: 400px;
  1885. // // h4 {
  1886. // // font-size: 16px;
  1887. // // background-color: #ccc;
  1888. // // color: #fff;
  1889. // // text-align: center;
  1890. // // width: 100%;
  1891. // // height: 40px;
  1892. // // line-height: 40px;
  1893. // // margin-bottom: 20px;
  1894. // // }
  1895. // }
  1896. // .center {
  1897. // width: 400px;
  1898. // }
  1899. .right {
  1900. margin-top: 20px;
  1901. }
  1902. }
  1903. .vipMsg {
  1904. margin-bottom: 20px;
  1905. }
  1906. .planList {
  1907. padding: 0 25px;
  1908. .planTop {
  1909. height: 40px;
  1910. line-height: 40px;
  1911. display: flex;
  1912. flex-direction: row;
  1913. justify-content: space-between;
  1914. border-bottom: 1px solid #ccc;
  1915. margin-top: 20px;
  1916. > p {
  1917. font-size: 14px;
  1918. }
  1919. }
  1920. .planCore {
  1921. .row {
  1922. width: 100%;
  1923. display: flex;
  1924. flex-direction: row;
  1925. justify-content: space-between;
  1926. flex-wrap: nowrap;
  1927. height: 40px;
  1928. line-height: 40px;
  1929. font-size: 14px;
  1930. text-align: center;
  1931. div {
  1932. width: 87px;
  1933. }
  1934. // div {
  1935. // &:nth-child(1) {
  1936. // text-align: left;
  1937. // }
  1938. // }
  1939. }
  1940. }
  1941. .nomore {
  1942. display: flex;
  1943. flex-direction: row;
  1944. justify-content: center;
  1945. align-items: center;
  1946. height: 40px;
  1947. }
  1948. }
  1949. .okBtn {
  1950. width: 120px;
  1951. height: 40px;
  1952. line-height: 40px;
  1953. text-align: center;
  1954. color: #fff;
  1955. border-radius: 4px;
  1956. margin-right: 20px;
  1957. cursor: pointer;
  1958. background-color: #f97215;
  1959. float: right;
  1960. }
  1961. .submitP {
  1962. margin-bottom: 20px;
  1963. font-size: 14px;
  1964. padding-left: 24px;
  1965. }
  1966. </style>