studentList.vue 43 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296
  1. <template>
  2. <div class='stu-container'>
  3. <!-- 头部展示 -->
  4. <div class="headWrap">
  5. <div class="left">
  6. <div class="headItem">
  7. <p>在读人数:<span>{{studentListInfo.studying}}</span></p>
  8. </div>
  9. <div class="headItem">
  10. <p>退团人数:<span>{{studentListInfo.quit}}</span></p>
  11. </div>
  12. <div class="headItem">
  13. <p>新增人数:<span>{{studentListInfo.add}}</span></p>
  14. </div>
  15. </div>
  16. <div class="right">
  17. <div class="newStudent"
  18. style="margin-bottom:10px;"
  19. @click="addStudentVisible = true">新增学员</div>
  20. <div class="newStudent"
  21. style="margin-bottom:10px;"
  22. @click="onCreateQRCode">报名连接</div>
  23. <div class="newStudent"
  24. @click='gotoSignin'>点名总览</div>
  25. </div>
  26. </div>
  27. <!-- 搜索类型 -->
  28. <el-form :inline="true"
  29. class="searchForm"
  30. v-model="searchForm">
  31. <el-form-item>
  32. <el-input v-model="searchForm.search"
  33. placeholder="学生姓名或电话"
  34. @keyup.enter.native='search'></el-input>
  35. </el-form-item>
  36. <el-form-item>
  37. <el-select v-model="searchForm.studentStatus"
  38. clearable
  39. filterable
  40. placeholder="学员状态">
  41. <el-option label="在读"
  42. value="NORMAL"></el-option>
  43. <el-option label="请假"
  44. value="LEAVE"></el-option>
  45. <el-option label="退团"
  46. value="QUIT"></el-option>
  47. </el-select>
  48. </el-form-item>
  49. <el-form-item>
  50. <el-select v-model="searchForm.classGroupId"
  51. clearable
  52. filterable
  53. placeholder="请选择班级">
  54. <el-option v-for='(item,index) in classList'
  55. :key='index'
  56. :value="item.id"
  57. :label="item.name"></el-option>
  58. </el-select>
  59. </el-form-item>
  60. <el-form-item>
  61. <el-select v-model="searchForm.major"
  62. clearable
  63. filterable
  64. placeholder="所选专业">
  65. <el-option v-for='(item,index) in soundList'
  66. :key='index'
  67. :value="item.id"
  68. :label="item.name"></el-option>
  69. </el-select>
  70. </el-form-item>
  71. <el-form-item>
  72. <el-select v-model="searchForm.isPay"
  73. clearable
  74. filterable
  75. placeholder="报名缴费">
  76. <el-option label="完成缴费"
  77. value="PAID_COMPLETED"></el-option>
  78. <el-option label="未缴费"
  79. value="NON_PAYMENT"></el-option>
  80. <el-option label="缴费中"
  81. value="PROCESSING"></el-option>
  82. </el-select>
  83. </el-form-item>
  84. <el-form-item>
  85. <el-select v-model="searchForm.isActive"
  86. clearable
  87. filterable
  88. placeholder="是否激活">
  89. <el-option label="是"
  90. value="1"></el-option>
  91. <el-option label="否"
  92. value="0"></el-option>
  93. </el-select>
  94. </el-form-item>
  95. <!-- <el-form-item>
  96. <el-select v-model="searchForm.school"
  97. placeholder="所在学校">
  98. <el-option label="item.text"
  99. value="1"></el-option>
  100. </el-select>
  101. </el-form-item> -->
  102. <el-form-item>
  103. <div class='searchBtn'
  104. @click='search'>搜索</div>
  105. </el-form-item>
  106. <el-form-item>
  107. <div class='searchBtn export'
  108. v-permission="'export/musicGroupStudent'"
  109. @click='onMusicGroupExport'>导出</div>
  110. </el-form-item>
  111. </el-form>
  112. <!-- 列表 -->
  113. <div class="tableWrap">
  114. <el-table :data='tableList'
  115. :header-cell-style="{background:'#EDEEF0',color:'#444'}">
  116. <el-table-column label="学员编号"
  117. width="120px;"
  118. prop="userId">
  119. </el-table-column>
  120. <el-table-column label="学员姓名"
  121. width="120px;"
  122. prop="realName">
  123. </el-table-column>
  124. <el-table-column align='center'
  125. prop="gender"
  126. width="50px;"
  127. label="性别">
  128. <template slot-scope="scope">
  129. <div>
  130. {{scope.row.gender| sex }}
  131. </div>
  132. </template>
  133. </el-table-column>
  134. <el-table-column align='center'
  135. prop="phone"
  136. label="联系电话">
  137. </el-table-column>
  138. <!-- <el-table-column align='center'
  139. prop=""
  140. label="所在学校">
  141. </el-table-column> -->
  142. <el-table-column align='center'
  143. label="年级班级">
  144. <template slot-scope="scope">
  145. <div>
  146. {{scope.row.currentGrade+scope.row.currentClass}}
  147. </div>
  148. </template>
  149. </el-table-column>
  150. <el-table-column align='center'
  151. label="专业"
  152. prop="subjectName">
  153. </el-table-column>
  154. <!-- <el-table-column align='center'
  155. label="乐团班级">
  156. </el-table-column>
  157. <el-table-column align='center'
  158. label="合奏班">
  159. </el-table-column> -->
  160. <el-table-column align='center'
  161. prop="studentStatus"
  162. label="学员状态">
  163. <template slot-scope="scope">
  164. <div>
  165. {{ scope.row.studentStatus | musicGroupStudentType}}
  166. </div>
  167. </template>
  168. </el-table-column>
  169. <el-table-column align='center'
  170. label="新增学员">
  171. <template slot-scope="scope">
  172. <div>
  173. {{ scope.row.isNewStudent | yesOrNo}}
  174. </div>
  175. </template>
  176. </el-table-column>
  177. <el-table-column align='center'
  178. label="批量修改缴费">
  179. <template slot-scope="scope">
  180. <div>
  181. {{ scope.row.isLock?'已锁定':'可修改'}}
  182. </div>
  183. </template>
  184. </el-table-column>
  185. <el-table-column align="center"
  186. label="下次缴费日期"
  187. prop="nextPaymentDate">
  188. <template slot-scope="scope">
  189. {{ scope.row.nextPaymentDate | formatTimer }}
  190. </template>
  191. </el-table-column>
  192. <el-table-column align="center"
  193. label="缴费金额"
  194. prop="courseFee">
  195. </el-table-column>
  196. <el-table-column align='center'
  197. label="报名缴费">
  198. <template slot-scope="scope">
  199. <div>
  200. {{ scope.row.paymentStatus | studentPays}}
  201. </div>
  202. </template>
  203. </el-table-column>
  204. <el-table-column align='center'
  205. label="是否激活">
  206. <template slot-scope="scope">
  207. <div>
  208. {{ scope.row.isActive?'是':'否'}}
  209. </div>
  210. </template>
  211. </el-table-column>
  212. <el-table-column align='center'
  213. fixed="right"
  214. width="250px;"
  215. label="操作">
  216. <template slot-scope="scope">
  217. <div v-if="scope.row.studentStatus != 'QUIT'">
  218. <!-- <el-popover placement="top"
  219. v-model="scope.row.typeVisible">
  220. <el-input v-model="remark"
  221. placeholder="请输入退团原因"></el-input>
  222. <el-button type="text"
  223. slot='reference'
  224. class='chiose'>
  225. 退团
  226. </el-button>
  227. <div style="text-align: right; margin-top: 20px">
  228. <el-button size="mini"
  229. type="text"
  230. @click="scope.row.typeVisible = false">取消</el-button>
  231. <el-button type="primary"
  232. size="mini"
  233. @click="chioseType(scope.row)">确定</el-button>
  234. </div>
  235. </el-popover> -->
  236. <el-button type="text"
  237. @click="lookClass(scope.row)">查看班级</el-button>
  238. <el-button type="text"
  239. v-if="!scope.row.isLock"
  240. @click="lockStudent(scope.row)">锁定</el-button>
  241. <el-button v-else
  242. type="text"
  243. @click="lockStudent(scope.row)">解锁</el-button>
  244. <el-button type="text"
  245. @click="resetPay(scope.row)">修改缴费</el-button>
  246. <el-button type='text'
  247. @click="quieTeamMask(scope.row)">退团</el-button>
  248. </div>
  249. </template>
  250. </el-table-column>
  251. </el-table>
  252. <pagination :total="rules.total"
  253. :page.sync="rules.page"
  254. :limit.sync="rules.limit"
  255. :page-sizes="rules.page_size"
  256. @pagination="getList" />
  257. </div>
  258. <el-dialog title="新增学员"
  259. width="640px"
  260. class="studentInfo"
  261. :visible.sync="addStudentVisible">
  262. <el-form :model="maskForm"
  263. label-position="right"
  264. label-width="100px"
  265. ref='maskForm'
  266. :rules="maskRules"
  267. :inline="true">
  268. <el-divider>基本信息</el-divider>
  269. <el-form-item label="联系电话"
  270. :rules="[{ required: true, message: '请输入手机号' }, { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }]">
  271. <el-input v-model="maskForm.phone"
  272. placeholder="联系电话"
  273. @blur="checkPhone(maskForm.phone)"></el-input>
  274. </el-form-item>
  275. <el-form-item label="学员姓名"
  276. prop="studentName">
  277. <el-input v-model="maskForm.studentName"
  278. placeholder="学员姓名"></el-input>
  279. </el-form-item>
  280. <el-form-item label="学员性别"
  281. prop="sex">
  282. <el-select v-model="maskForm.sex"
  283. clearable>
  284. <el-option label="男"
  285. :value="1"></el-option>
  286. <el-option label="女"
  287. :value="0"></el-option>
  288. </el-select>
  289. </el-form-item>
  290. <el-form-item label="家长姓名"
  291. prop="parentName">
  292. <el-input v-model="maskForm.parentName"
  293. placeholder="家长姓名"></el-input>
  294. </el-form-item>
  295. <el-form-item label="年级"
  296. prop="startClass">
  297. <el-select placeholder="起始年级"
  298. filterable
  299. clearable
  300. v-model="maskForm.startClass">
  301. <el-option value="一年级"
  302. label="一年级"></el-option>
  303. <el-option value="二年级"
  304. label="二年级"></el-option>
  305. <el-option value="三年级"
  306. label="三年级"></el-option>
  307. <el-option value="四年级"
  308. label="四年级"></el-option>
  309. <el-option value="五年级"
  310. label="五年级"></el-option>
  311. <el-option value="六年级"
  312. label="六年级"></el-option>
  313. <el-option value="初一"
  314. label="初一"></el-option>
  315. <el-option value="初二"
  316. label="初二"></el-option>
  317. <el-option value="初三"
  318. label="初三"></el-option>
  319. <el-option value="高一"
  320. label="高一"></el-option>
  321. <el-option value="高二"
  322. label="高二"></el-option>
  323. <el-option value="高三"
  324. label="高三"></el-option>
  325. </el-select>
  326. </el-form-item>
  327. <el-form-item label="班级"
  328. prop="course">
  329. <el-input v-model="maskForm.course"
  330. placeholder="班级"></el-input>
  331. </el-form-item>
  332. <el-form-item label="学员声部"
  333. prop="sound">
  334. <el-select v-model="maskForm.sound"
  335. clearable
  336. filterable
  337. @change="onSoundChange">
  338. <el-option v-for='(item,index) in soundList'
  339. :key='index'
  340. :value="item.id"
  341. :label="item.name"></el-option>
  342. </el-select>
  343. </el-form-item>
  344. <!-- <el-form-item label="证件号"
  345. prop="id">
  346. <el-input v-model="maskForm.id"></el-input>
  347. </el-form-item> -->
  348. <el-form-item label="出生日期"
  349. style="margin-right: 0;"
  350. prop="timer">
  351. <el-col :span="24">
  352. <el-date-picker v-model="maskForm.timer"
  353. value-format="yyyy-MM-dd"
  354. type="date"
  355. placeholder="选择日期">
  356. </el-date-picker>
  357. </el-col>
  358. </el-form-item>
  359. <el-form-item label="课程费用"
  360. prop="courseFee">
  361. <el-input v-model="maskForm.courseFee"
  362. type="number"
  363. @mousewheel.native.prevent
  364. placeholder="续费金额"></el-input>
  365. </el-form-item>
  366. <br>
  367. <el-form-item label="单技班">
  368. <el-select v-model="maskForm.signClass"
  369. filterable
  370. clearable>
  371. <el-option v-for="(item,index) in signList"
  372. :key="index"
  373. :value="item.id"
  374. :label="item.name"></el-option>
  375. </el-select>
  376. </el-form-item>
  377. <el-form-item label="合奏班">
  378. <el-select v-model="maskForm.mixClass"
  379. filterable
  380. clearable>
  381. <el-option v-for="(item,index) in mixList"
  382. :key="index"
  383. :value="item.id"
  384. :label="item.name"></el-option>
  385. </el-select>
  386. </el-form-item>
  387. <el-form-item label="基础技能班">
  388. <el-select v-model="maskForm.highClass"
  389. filterable
  390. clearable>
  391. <el-option v-for="(item,index) in highList"
  392. :key="index"
  393. :value="item.id"
  394. :label="item.name"></el-option>
  395. </el-select>
  396. </el-form-item>
  397. <el-form-item label="临时班">
  398. <el-select v-model="maskForm.snapClass"
  399. filterable
  400. clearable
  401. multiple>
  402. <el-option v-for="(item,index) in snapList"
  403. :key="index"
  404. :value="item.id"
  405. :label="item.name"></el-option>
  406. </el-select>
  407. </el-form-item>
  408. <el-divider>首缴订单信息</el-divider>
  409. <el-form-item label="课程费用"
  410. prop="temporaryCourseFee">
  411. <el-input type='number'
  412. @mousewheel.native.prevent
  413. v-model="maskForm.temporaryCourseFee"
  414. placeholder="首缴课程金额"></el-input>
  415. </el-form-item>
  416. <el-form-item label="乐器"
  417. class="instrList">
  418. <el-col :span="11"
  419. style="width: auto;">
  420. <el-form-item>
  421. <el-select placeholder="选择乐器"
  422. filterable
  423. clearable
  424. @change="onInstrumentChange"
  425. v-model="maskForm.musicGoodsIdList">
  426. <el-option v-for="(item, index) in INSTRUMENTLIST"
  427. :key="index"
  428. :value="item.value"
  429. :label="item.label"></el-option>
  430. </el-select>
  431. </el-form-item>
  432. </el-col>
  433. <el-col :span="1">&nbsp;</el-col>
  434. <el-col :span="11">
  435. <el-form-item>
  436. <el-input type="number" @mousewheel.native.prevent :disabled="kitStatus" v-model="maskForm.musicPrice"
  437. placeholder="输入金额">
  438. <el-select v-model="maskForm.kitGroupPurchaseType"
  439. style="width: 80px !important;"
  440. @change="onKitGroupChnage"
  441. slot="prepend">
  442. <el-option label="免费"
  443. value="FREE"></el-option>
  444. <el-option label="团购"
  445. value="GROUP"></el-option>
  446. <el-option label="租赁"
  447. value="LEASE"></el-option>
  448. </el-select>
  449. </el-input>
  450. </el-form-item>
  451. </el-col>
  452. </el-form-item>
  453. <el-form-item label="辅件">
  454. <el-col :span="11"
  455. style="width: auto;">
  456. <el-form-item>
  457. <el-select filterable
  458. clearable
  459. multiple
  460. placeholder="选择辅件"
  461. v-model="maskForm.instrGoodsIdList">
  462. <el-option v-for="(item, index) in ACCESSORIESLIST"
  463. :key="index"
  464. :value="item.value"
  465. :label="item.label"></el-option>
  466. </el-select>
  467. </el-form-item>
  468. </el-col>
  469. <el-col :span="1">&nbsp;</el-col>
  470. <el-col :span="11">
  471. <el-form-item>
  472. <el-input v-model="maskForm.instrPrice"
  473. placeholder="输入金额"></el-input>
  474. </el-form-item>
  475. </el-col>
  476. </el-form-item>
  477. </el-form>
  478. <div slot="footer"
  479. class="dialog-footer">
  480. <!-- <el-button @click="addStudentVisible = false">取 消</el-button> -->
  481. <el-button type="primary"
  482. @click="addStudent">确 定</el-button>
  483. </div>
  484. </el-dialog>
  485. <el-dialog title="学员所在班级"
  486. width="640px"
  487. :visible.sync="studentClassVisible">
  488. <el-form :model="classMask">
  489. <el-form-item label="学生姓名">
  490. {{ classMask.studentName }}
  491. </el-form-item>
  492. <el-form-item label="所在班级"
  493. v-for="(item,index) in classList"
  494. :key="index">
  495. {{ item.name }}
  496. </el-form-item>
  497. </el-form>
  498. </el-dialog>
  499. <!-- 退团弹窗 -->
  500. <el-dialog title="退团信息确认"
  501. width="640px"
  502. :visible.sync="quitVisible">
  503. <el-form :model="quitForm"
  504. ref="quitForm"
  505. :rules="quitRules">
  506. <el-form-item label="退还课程费用"
  507. prop="isRefundCourseFee">
  508. <el-radio v-model="quitForm.isRefundCourseFee"
  509. :label="true">是</el-radio>
  510. <el-radio v-model="quitForm.isRefundCourseFee"
  511. :label="false">否</el-radio>
  512. </el-form-item>
  513. <el-form-item label="退还乐器费用"
  514. prop="isRefundInstrumentFee">
  515. <el-radio v-model="quitForm.isRefundInstrumentFee"
  516. :label="true">是</el-radio>
  517. <el-radio v-model="quitForm.isRefundInstrumentFee"
  518. :label="false">否</el-radio>
  519. </el-form-item>
  520. <el-form-item label="退还教辅费用"
  521. prop="isRefundTeachingAssistantsFee">
  522. <el-radio v-model="quitForm.isRefundTeachingAssistantsFee"
  523. :label="true">是</el-radio>
  524. <el-radio v-model="quitForm.isRefundTeachingAssistantsFee"
  525. :label="false">否</el-radio>
  526. </el-form-item>
  527. <el-form-item label="退团原因">
  528. <el-input type="textarea"
  529. v-model="quitForm.reason"></el-input>
  530. </el-form-item>
  531. </el-form>
  532. <span slot="footer"
  533. class="dialog-footer">
  534. <el-button @click="quitVisible = false">取 消</el-button>
  535. <el-button type="primary"
  536. @click="chioseType">确 定</el-button>
  537. </span>
  538. </el-dialog>
  539. <el-dialog title="报名二维码"
  540. :visible.sync="qrcodeStatus"
  541. width="300px">
  542. <div class="left-code">
  543. <h2>学员报名连接</h2>
  544. <div id="qrcode"
  545. class="qrcode code"
  546. ref="qrCodeUrl"></div>
  547. <p class="code-url"
  548. v-if="codeUrl">{{ codeUrl }}</p>
  549. </div>
  550. </el-dialog>
  551. <el-dialog title="修改缴费周期"
  552. :before-close='closePayVisible'
  553. width='600px'
  554. :visible.sync="payVisible">
  555. <el-form :model="payForm"
  556. ref="payForm"
  557. :inline="true">
  558. <el-form-item label="学生姓名"
  559. prop="studentName">
  560. <el-input v-model="payForm.studentName"
  561. disabled></el-input>
  562. </el-form-item>
  563. <br>
  564. <el-form-item label="缴费金额"
  565. prop="payMoney">
  566. <el-input type="number"
  567. v-model="payForm.payMoney"
  568. @mousewheel.native.prevent></el-input>
  569. </el-form-item>
  570. <el-form-item label="缴费月份"
  571. prop="payMonth">
  572. <el-checkbox-group v-model="payForm.payMonth"
  573. fill="#14928A"
  574. text-color='#474747'>
  575. <el-checkbox label="1">一月</el-checkbox>
  576. <el-checkbox label="2">二月</el-checkbox>
  577. <el-checkbox label="3">三月</el-checkbox>
  578. <el-checkbox label="4">四月</el-checkbox>
  579. <el-checkbox label="5">五月</el-checkbox>
  580. <el-checkbox label="6">六月</el-checkbox>
  581. <el-checkbox label="7">七月</el-checkbox>
  582. <el-checkbox label="8">八月</el-checkbox>
  583. <el-checkbox label="9">九月</el-checkbox>
  584. <el-checkbox label="10">十月</el-checkbox>
  585. <el-checkbox label="11">十一月</el-checkbox>
  586. <el-checkbox label="12">十二月</el-checkbox>
  587. </el-checkbox-group>
  588. </el-form-item>
  589. <!-- studentName: '',
  590. payMoney: '',
  591. payMonth -->
  592. </el-form>
  593. <div slot="footer"
  594. class="dialog-footer">
  595. <el-button @click="quitVisible = false">取 消</el-button>
  596. <el-button type="primary"
  597. @click="submitPay">确 定</el-button>
  598. </div>
  599. </el-dialog>
  600. </div>
  601. </template>
  602. <script>
  603. import { getTeamStudentList, getTeamStudentInfo, getSingleClass, findSound, StudentQuit, findSubjectPlan, getGoods, getSubject, getMusicGroupAllClass, StudentFeeIsLock, updateStudentFee } from '@/api/buildTeam'
  604. import { addStudent, getStudentClass, getStudentInfoByPhone } from '@/api/studentManager'
  605. import pagination from '@/components/Pagination/index'
  606. import { vaildStudentUrl } from '@/utils/validate'
  607. import QRCode from 'qrcodejs2'
  608. import axios from 'axios'
  609. import { getToken } from '@/utils/auth'
  610. export default {
  611. name: "tstudentList",
  612. props: ['teamid'],
  613. data () {
  614. return {
  615. payVisible: false,
  616. quitVisible: false, // 退团信息确认的弹窗
  617. studentClassVisible: false, // 学员所在班级弹窗
  618. addStudentVisible: false, //新增学员弹窗
  619. topFrom: { // 顶部的禁选框集合
  620. expect: '2', // 预期招生
  621. studing: '5', // 在读人数
  622. allmoney: '100', //实收总额
  623. students: '5', // 实际招生人数
  624. signout: '10', // 退团总数
  625. },
  626. searchForm: {
  627. studentStatus: '', // 学生状态
  628. major: '', // 报名专业
  629. isPay: '', // 是否缴费
  630. search: '',
  631. isActive: '',
  632. classGroupId: null
  633. },
  634. quitForm: { // 退团信息确认
  635. isRefundCourseFee: null,
  636. isRefundInstrumentFee: null,
  637. isRefundTeachingAssistantsFee: null,
  638. reason: ''
  639. },
  640. classMask: {
  641. studentName: ''
  642. },
  643. searchLsit: [],
  644. tableList: [], //
  645. rules: {
  646. // 分页规则
  647. limit: 10, // 限制显示条数
  648. page: 1, // 当前页
  649. total: 0, // 总条数
  650. page_size: [10, 20, 40, 50] // 选择限制显示条数
  651. },
  652. studentListInfo: {
  653. add: '',
  654. quit: '',
  655. studying: ''
  656. },
  657. signList: [],
  658. mixList: [],
  659. highList: [],
  660. snapList: [],
  661. soundList: [],
  662. qrcodeStatus: false, // 生成二维码
  663. qrcodes: true,
  664. qrcode: null,
  665. codeUrl: null,
  666. maskForm: {
  667. studentName: '',
  668. sex: '',
  669. parentName: '',
  670. course: '',
  671. phone: '',
  672. sound: '',
  673. timer: '',
  674. signClass: '',
  675. mixClass: '',
  676. highClass: '',
  677. snapClass: [],
  678. // price: '',
  679. startClass: '',
  680. id: '',
  681. courseFee: null, // 声部费用
  682. temporaryCourseFee: null, // 本次课程费用
  683. musicGoodsIdList: null, // 乐器商品编号
  684. kitGroupPurchaseType: 'GROUP', // 乐器购买方式
  685. musicPrice: null, // 乐器购买金额
  686. instrGoodsIdList: [], // 辅件商品编号
  687. instrPrice: null // 辅件购买金额
  688. },
  689. remark: '', // 退团原因
  690. classList: [],
  691. quitRules: {
  692. isRefundCourseFee: [{ required: true, message: '请选择是否退还课程费用' },],
  693. isRefundInstrumentFee: [{ required: true, message: '选择是否退还乐器费用' },],
  694. isRefundTeachingAssistantsFee: [{ required: true, message: '选择是否退还教辅费用' },],
  695. },
  696. maskRules: {
  697. studentName: [{ required: true, message: '请输入学生姓名' },],
  698. sex: [{ required: true, message: '请选择学生姓名' },],
  699. parentName: [{ required: true, message: '请输入家长姓名' },],
  700. course: [{ required: true, message: '请输入班级' },],
  701. // phone: [{ required: true, message: '请输入手机号' }, { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
  702. sound: [{ required: true, message: '请选择声部' },],
  703. timer: [{ required: true, message: '请选择出生日期' },],
  704. signClass: [{ required: true, message: '请选择单技班' },],
  705. // price: [{ required: true, message: '请输入首缴金额' },],
  706. startClass: [{ required: true, message: '请选择年级' }],
  707. id: [{ required: true, message: '请输入证件号' }],
  708. courseFee: [{ required: true, message: '请输入声部费用' }],
  709. temporaryCourseFee: [{ required: true, message: '请输课程费用' }],
  710. musicGoodsIdList: [{ required: true, message: '请选择乐器', trigger: 'change' }],
  711. musicPrice: [{ required: true, message: '请输入乐器购买金额' }],
  712. instrGoodsIdList: [{ required: true, message: '请选择辅件' }],
  713. instrPrice: [{ required: true, message: '请输入辅件金额' }]
  714. },
  715. INSTRUMENTLIST: [], // 乐器列表
  716. ACCESSORIESLIST: [], // 辅件列表
  717. activeRow: null,
  718. Fsearch: null,
  719. Frules: null,
  720. payForm: {
  721. studentName: '',
  722. payMoney: '',
  723. payMonth: []
  724. },
  725. kitStatus: false, // 乐器提供方式
  726. }
  727. },
  728. components: {
  729. pagination
  730. },
  731. created () {
  732. // 判断是否带缓存参数
  733. if (this.$route.query.search) {
  734. this.Fsearch = this.$route.query.search;
  735. }
  736. if (this.$route.query.rules) {
  737. this.Frules = this.$route.query.rules
  738. }
  739. },
  740. /** <el-option label="已开启缴费"
  741. value="1"></el-option>
  742. <el-option label="未缴费"
  743. value="0"></el-option>
  744. <el-option label="已缴费"
  745. value="2"></el-option> */
  746. filters: {
  747. studentPays (val) {
  748. let template = {
  749. 'PAID_COMPLETED': "完成缴费",
  750. 'NON_PAYMENT': "未缴费",
  751. 'PROCESSING': "缴费中"
  752. }
  753. return template[val]
  754. }
  755. },
  756. mounted () {
  757. this.init()
  758. },
  759. activated () {
  760. this.init()
  761. },
  762. methods: {
  763. init () {
  764. // 获取汇总数据
  765. getTeamStudentInfo({ musicGroupId: this.teamid }).then(res => {
  766. if (res.code == 200) {
  767. this.studentListInfo = res.data;
  768. }
  769. });
  770. this.getList();
  771. // 获取乐团内所有声部
  772. findSound({ musicGroupId: this.teamid }).then(res => {
  773. if (res.code == 200) {
  774. this.soundList = res.data;
  775. }
  776. })
  777. // getSubject().then(res => {
  778. // if (res.code == 200) {
  779. // this.soundList = res.data;
  780. // }
  781. // })
  782. // 获取乐团所有单技课班
  783. // getSingleClass({ musicGroupId: this.teamid }).then(res => {
  784. // if (res.code == 200) {
  785. // this.signList = res.data;
  786. // }
  787. // })
  788. // 获取乐团所有合奏课
  789. getMusicGroupAllClass({ musicGroupId: this.teamid }).then(res => {
  790. if (res.code == 200) {
  791. this.classList = res.data;
  792. this.signList = [];
  793. this.mixList = [];
  794. this.highList = [];
  795. this.snapList = [];
  796. this.classList.forEach(item => {
  797. if (item.type == 'NORMAL') {
  798. this.signList.push(item);
  799. } else if (item.type == 'MIX') {
  800. this.mixList.push(item);
  801. } else if (item.type == 'HIGH') {
  802. this.highList.push(item)
  803. } else if (item.type == 'SNAP') {
  804. this.snapList.push(item);
  805. }
  806. })
  807. }
  808. })
  809. },
  810. onInstrumentChange() { // 乐器切换时
  811. // let tempkitType = this.maskForm.kitGroupPurchaseType
  812. // if(tempkitType == 'GROUP') {
  813. // this.INSTRUMENTLIST.forEach(item => {
  814. // if(item.value == value) {
  815. // this.maskForm.musicPrice = item.marketPrice
  816. // }
  817. // })
  818. // }
  819. },
  820. onKitGroupChnage(value) { // 乐器提供方式
  821. this.kitStatus = false
  822. if(value == 'FREE') {
  823. this.kitStatus = true
  824. this.maskForm.musicPrice = 0
  825. } else {
  826. this.maskForm.musicPrice = null
  827. }
  828. },
  829. onMusicGroupExport () {
  830. let url = '/api-web/export/musicGroupStudent'
  831. let data = {
  832. musicGroupId: this.teamid,
  833. studentStatus: this.searchForm.studentStatus || null,
  834. paymentStatus: this.searchForm.isPay || null,
  835. subjectId: this.searchForm.major || null,
  836. search: this.searchForm.search || null,
  837. isActive: this.searchForm.isActive || null,
  838. classGroupId: this.searchForm.classGroupId || null
  839. }
  840. const options = {
  841. method: 'get',
  842. headers: {
  843. 'Authorization': getToken()
  844. },
  845. url,
  846. params: data,
  847. responseType: 'blob'
  848. }
  849. this.$confirm('您确定导出学员列表?', '提示', {
  850. confirmButtonText: '确定',
  851. cancelButtonText: '取消',
  852. type: 'warning'
  853. }).then(() => {
  854. axios(options).then(res => {
  855. let blob = new Blob([res.data], {
  856. // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
  857. type: 'application/vnd.ms-excel;charset=utf-8'
  858. // word文档为application/msword,pdf文档为application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8
  859. })
  860. let objectUrl = URL.createObjectURL(blob)
  861. let link = document.createElement("a")
  862. let fname = this.$route.query.name + '学员列表'
  863. link.href = objectUrl
  864. link.setAttribute("download", fname)
  865. document.body.appendChild(link)
  866. link.click()
  867. })
  868. }).catch(() => { })
  869. },
  870. search () {
  871. this.rules.page = 1;
  872. this.getList()
  873. },
  874. onCreateQRCode () { // 生成报名二维码
  875. this.qrcodeStatus = true
  876. let id = this.$route.query.id
  877. if (this.qrcodes) {
  878. this.qrcodes = false
  879. setTimeout(() => {
  880. this.qrcode = new QRCode('qrcode', {
  881. width: 200,
  882. height: 200,
  883. colorDark: '#000000',
  884. colorLight: '#ffffff',
  885. correctLevel: QRCode.CorrectLevel.H
  886. })
  887. this.qrcode.makeCode(vaildStudentUrl() + '/#/login?musicGroupId=' + id)
  888. this.codeUrl = vaildStudentUrl() + '/#/login?musicGroupId=' + id
  889. }, 500)
  890. }
  891. },
  892. getList () {
  893. let obj = {
  894. musicGroupId: this.teamid,
  895. page: this.rules.page,
  896. rows: this.rules.limit,
  897. studentStatus: this.searchForm.studentStatus || null,
  898. paymentStatus: this.searchForm.isPay || null,
  899. subjectId: this.searchForm.major || null,
  900. search: this.searchForm.search || null,
  901. isActive: this.searchForm.isActive || null,
  902. classGroupId: this.searchForm.classGroupId || null
  903. }
  904. getTeamStudentList(obj).then(res => {
  905. if (res.code == 200) {
  906. this.tableList = res.data.rows;
  907. this.rules.total = res.data.total
  908. }
  909. })
  910. },
  911. gotoSignin () {
  912. this.$router.push({
  913. path: '/business/studentSignin',
  914. query: {
  915. id: this.teamid,
  916. status: this.$route.query.status,
  917. name: this.$route.query.name,
  918. rules: this.Frules, search: this.Fsearch
  919. }
  920. })
  921. },
  922. chioseType () {
  923. this.$refs['quitForm'].validate(res => {
  924. if (res) {
  925. this.$confirm('确定退团?', '提示', {
  926. confirmButtonText: '确定',
  927. cancelButtonText: '取消',
  928. type: 'warning'
  929. }).then(() => {
  930. let row = this.activeRow;
  931. // 发请求 退团
  932. StudentQuit({ musicGroupId: this.teamid, userId: row.userId,
  933. reason: this.quitForm.reason,
  934. isRefundCourseFee: this.quitForm.isRefundCourseFee,
  935. isRefundInstrumentFee: this.quitForm.isRefundInstrumentFee,
  936. isRefundTeachingAssistantsFee: this.quitForm.isRefundTeachingAssistantsFee }).then(res => {
  937. this.quitForm = { // 退团信息确认
  938. isRefundCourseFee: null,
  939. isRefundInstrumentFee: null,
  940. isRefundTeachingAssistantsFee: null,
  941. reason: ''
  942. }
  943. if (res.code == 200) {
  944. this.$message.success('退团成功')
  945. this.getList();
  946. this.quitVisible = false;
  947. }
  948. })
  949. }).catch(() => {
  950. });
  951. } else {
  952. }
  953. })
  954. // row.typeVisible = false;
  955. },
  956. //
  957. addStudent () {
  958. // 发请求添加学员
  959. this.$refs['maskForm'].validate(res => {
  960. if (res) {
  961. // this.maskForm.parentName.timer 少个生日的字段
  962. // classGroupId: maskForm.signClass
  963. /** <!-- signClass: '',
  964. mixClass: '',
  965. highClass: '',
  966. snapClass: [], --> */
  967. let maskForm = this.maskForm
  968. if (!maskForm.signClass && !maskForm.mixClass && !maskForm.highClass) {
  969. if (!maskForm.snapClass || !(maskForm.snapClass && maskForm.snapClass.length >= 1)) {
  970. this.$message.error('该学生必须加入一个班级')
  971. return;
  972. }
  973. }
  974. if(maskForm.musicGoodsIdList && (maskForm.musicPrice === '' || maskForm.musicPrice === null)) {
  975. this.$message.error('请输入乐器金额')
  976. return
  977. }
  978. if(maskForm.instrGoodsIdList && maskForm.instrGoodsIdList.length > 0 && (maskForm.instrPrice === '' || maskForm.instrPrice === null)) {
  979. this.$message.error('请输入辅件金额')
  980. return
  981. }
  982. let snapClassIds;
  983. maskForm.snapClass ? snapClassIds = maskForm.snapClass.join(',') : snapClassIds = null
  984. let params = {
  985. signClassId: maskForm.signClass,
  986. mixClassId: maskForm.mixClass,
  987. snapClassIds,
  988. highClassId: maskForm.highClass,
  989. courseFee: maskForm.courseFee,
  990. temporaryCourseFee: maskForm.temporaryCourseFee,
  991. studentRegistration: {
  992. name: maskForm.studentName,
  993. gender: maskForm.sex,
  994. birthdate: maskForm.timer,
  995. parentsName: maskForm.parentName,
  996. parentsPhone: maskForm.phone,
  997. currentGrade: maskForm.startClass,
  998. currentClass: maskForm.course,
  999. subjectId: maskForm.sound,
  1000. musicGroupId: this.teamid,
  1001. }
  1002. }
  1003. params.studentPaymentOrderDetails = []
  1004. if (maskForm.musicGoodsIdList) {
  1005. params.studentPaymentOrderDetails.push({
  1006. goodsIdList: maskForm.musicGoodsIdList,
  1007. kitGroupPurchaseType: maskForm.kitGroupPurchaseType,
  1008. type: 'MUSICAL',
  1009. price: maskForm.musicPrice
  1010. })
  1011. }
  1012. if (maskForm.instrGoodsIdList && maskForm.instrGoodsIdList != '') {
  1013. params.studentPaymentOrderDetails.push({
  1014. goodsIdList: maskForm.instrGoodsIdList.join(','),
  1015. type: 'ACCESSORIES',
  1016. price: maskForm.instrPrice
  1017. })
  1018. }
  1019. addStudent(params).then(res => {
  1020. if (res.code == 200) {
  1021. this.$message.success('添加学生成功');
  1022. this.getList()
  1023. this.addStudentVisible = false
  1024. }
  1025. this.$refs.maskForm.resetFields()
  1026. })
  1027. }
  1028. })
  1029. },
  1030. onSoundChange (value) { // 学员声部切换时
  1031. // this.findSubjectPlan(value)
  1032. this.ACCESSORIESLIST = []
  1033. this.maskForm.instrGoodsIdList = []
  1034. this.maskForm.instrPrice = null
  1035. this.INSTRUMENTLIST = []
  1036. this.maskForm.musicPrice = null
  1037. this.maskForm.musicGoodsIdList = null
  1038. this.getGoodsList(value, 'INSTRUMENT') // 乐器
  1039. this.getGoodsList(value, 'ACCESSORIES') // 辅件
  1040. },
  1041. // 获取购买方式
  1042. findSubjectPlan (subjectId) {
  1043. findSubjectPlan({
  1044. musicGroupId: this.teamid,
  1045. subjectId: subjectId
  1046. }).then(res => {
  1047. let result = res.data
  1048. if (res.code == 200) {
  1049. this.maskForm.musicMode = this.getBranchType(result.kitGroupPurchaseType)
  1050. }
  1051. })
  1052. },
  1053. getGoodsList (subjectId, type) {
  1054. getGoods({
  1055. subjectId: subjectId,
  1056. type: type
  1057. }).then(res => {
  1058. let result = res.data
  1059. if (res.code == 200) {
  1060. let tempArr = []
  1061. result.forEach(item => {
  1062. tempArr.push({
  1063. label: item.name,
  1064. value: item.id,
  1065. marketPrice: item.marketPrice
  1066. })
  1067. })
  1068. if (type == 'ACCESSORIES') {
  1069. this.ACCESSORIESLIST = tempArr
  1070. }
  1071. if (type == 'INSTRUMENT') {
  1072. this.INSTRUMENTLIST = tempArr
  1073. }
  1074. }
  1075. })
  1076. },
  1077. getBranchType (status) {
  1078. let common = {
  1079. FREE: "免费",
  1080. GROUP: "团购",
  1081. LEASE: "租赁"
  1082. }
  1083. return common[status]
  1084. },
  1085. lookClass (row) {
  1086. this.classMask.studentName = row.realName;
  1087. getStudentClass({
  1088. musicGroupId: this.teamid,
  1089. teacherId: row.userId
  1090. }).then(res => {
  1091. if (res.code == 200) {
  1092. this.classList = res.data;
  1093. this.studentClassVisible = true;
  1094. }
  1095. })
  1096. },
  1097. quieTeamMask (row) {
  1098. this.activeRow = row;
  1099. this.quitVisible = true;
  1100. },
  1101. checkPhone (val) {
  1102. var regu = /^1[3456789]\d{9}$/;
  1103. var re = new RegExp(regu);
  1104. if (re.test(val)) {
  1105. getStudentInfoByPhone({ mobile: this.maskForm.phone }).then(res => {
  1106. if (res.code == 200) {
  1107. if (res.data) {
  1108. this.maskForm.studentName = res.data.name
  1109. this.maskForm.sex = res.data.gender
  1110. this.maskForm.parentName = res.data.parentsName
  1111. this.maskForm.course = res.data.currentClass
  1112. this.maskForm.startClass = res.data.currentGrade
  1113. this.maskForm.phone = val
  1114. this.maskForm.timer = res.data.birthdate
  1115. }
  1116. }
  1117. })
  1118. }
  1119. },
  1120. lockStudent (row) {
  1121. this.$confirm('是否锁定/解锁学生缴费周期?', '提示', {
  1122. confirmButtonText: '确定',
  1123. cancelButtonText: '取消',
  1124. type: 'warning'
  1125. }).then(() => {
  1126. let musicGroupId = this.teamid;
  1127. let studentId = row.userId;
  1128. let isLock;
  1129. row.isLock == 0 ? isLock = 1 : isLock = 0;
  1130. StudentFeeIsLock({ musicGroupId, studentId, isLock }).then(res => {
  1131. if (res.code == 200) {
  1132. this.$message.success('修改成功')
  1133. this.getList()
  1134. }
  1135. })
  1136. }).catch(() => {
  1137. });
  1138. },
  1139. resetPay (row) {
  1140. this.activeRow = row;
  1141. this.payVisible = true;
  1142. this.payForm.studentName = row.realName;
  1143. this.payForm.payMoney = row.courseFee;
  1144. this.payForm.payMonth = row.paymentPeriodList.split(',')
  1145. if (this.payForm.payMonth[0] == "") {
  1146. this.payForm.payMonth = []
  1147. }
  1148. },
  1149. submitPay () {
  1150. let studentId = this.activeRow.userId;
  1151. let musicGroupId = this.teamid;
  1152. let month = this.payForm.payMonth.join(',') || null;
  1153. let amount = this.payForm.payMoney;
  1154. let obj = {
  1155. studentId,
  1156. musicGroupId,
  1157. month,
  1158. amount
  1159. }
  1160. updateStudentFee(obj).then(res => {
  1161. if (res.code == 200) {
  1162. this.$message.success('修改成功')
  1163. this.payVisible = false;
  1164. this.getList();
  1165. }
  1166. })
  1167. },
  1168. closePayVisible () {
  1169. this.$refs['payForm'].resetFields();
  1170. this.payVisible = false;
  1171. }
  1172. }
  1173. }
  1174. </script>
  1175. <style lang="scss" scoped>
  1176. // .moreInput {
  1177. // width: 100%;
  1178. // display: flex;
  1179. // /deep/.el-form-item__content {
  1180. // display: flex;
  1181. // flex-direction: row;
  1182. // }
  1183. // }
  1184. .el-select {
  1185. width: 180px !important;
  1186. }
  1187. .headWrap {
  1188. padding: 20px 0;
  1189. }
  1190. /deep/.el-date-editor.el-input {
  1191. width: auto;
  1192. .el-input__inner {
  1193. padding-right: 0;
  1194. }
  1195. }
  1196. .studentInfo {
  1197. /deep/.el-dialog__body {
  1198. padding-top: 0;
  1199. padding-bottom: 0;
  1200. }
  1201. }
  1202. // .instrList {
  1203. // display: flex;
  1204. // /deep/.el-form-item__content {
  1205. // width: 80%;
  1206. // }
  1207. // .el-col {
  1208. // /deep/.el-form-item__content {
  1209. // width: 100%;
  1210. // }
  1211. // }
  1212. // }
  1213. .stu-container {
  1214. .topFrom {
  1215. margin: 20px 30px 0;
  1216. width: 1000px;
  1217. }
  1218. .newStudent {
  1219. width: 121px;
  1220. height: 40px;
  1221. background: rgba(20, 146, 138, 1);
  1222. border-radius: 4px;
  1223. color: #fff;
  1224. text-align: center;
  1225. line-height: 40px;
  1226. font-size: 14px;
  1227. cursor: pointer;
  1228. }
  1229. }
  1230. .left-code,
  1231. .right-code {
  1232. // width: 50%;
  1233. // float: left;
  1234. h2 {
  1235. display: block;
  1236. font-size: 18px;
  1237. text-align: center;
  1238. padding-bottom: 8px;
  1239. line-height: 1;
  1240. height: 30px;
  1241. margin-bottom: 0;
  1242. }
  1243. .qrcode {
  1244. display: flex;
  1245. justify-content: center;
  1246. img {
  1247. width: 200px;
  1248. height: 200px;
  1249. // margin: 0 auto;
  1250. }
  1251. }
  1252. .code-url {
  1253. font-size: 18px;
  1254. text-align: center;
  1255. padding: 15px 15px 0 15px;
  1256. }
  1257. }
  1258. .export {
  1259. background: #14928a;
  1260. }
  1261. </style>