studentList.vue 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880
  1. <template>
  2. <div class="m-container">
  3. <h2>
  4. <div class="squrt"></div>学员列表
  5. </h2>
  6. <div class="m-core">
  7. <div class="newBand"
  8. v-permission="'studentManage/register'"
  9. @click="addStudent">新增学员</div>
  10. <div class="newBand"
  11. @click="onCreateQRCode">学员激活列表</div>
  12. <!-- 搜索标题 -->
  13. <el-form :inline="true"
  14. class="searchForm"
  15. v-model.trim="searchForm">
  16. <el-form-item>
  17. <el-input placeholder="学生姓名或电话"
  18. @keyup.enter.native="onSearch"
  19. v-model.trim="searchForm.search"></el-input>
  20. </el-form-item>
  21. <el-form-item prop="organId">
  22. <el-select class="multiple"
  23. filterable
  24. v-model.trim="searchForm.organId"
  25. clearable
  26. placeholder="请选择分部">
  27. <el-option v-for="(item,index) in organList"
  28. :key="index"
  29. :label="item.name"
  30. :value="item.id"></el-option>
  31. </el-select>
  32. </el-form-item>
  33. <el-form-item>
  34. <el-select placeholder="指导老师"
  35. v-model="searchForm.teacherId"
  36. clearable
  37. filterable>
  38. <el-option v-for="(item,index) in teacherList"
  39. :label="item.realName"
  40. :value="item.id"
  41. :key="index"></el-option>
  42. </el-select>
  43. </el-form-item>
  44. <el-form-item prop="isActive">
  45. <el-select class="multiple"
  46. v-model.trim="searchForm.isActive"
  47. clearable
  48. placeholder="是否激活">
  49. <el-option label="是"
  50. value="true"></el-option>
  51. <el-option label="否"
  52. value="false"></el-option>
  53. </el-select>
  54. </el-form-item>
  55. <!-- <el-form-item prop="hasCourse">
  56. <el-select class="multiple"
  57. v-model.trim="searchForm.hasCourse"
  58. clearable
  59. placeholder="未上课时">
  60. <el-option label="有"
  61. value="1"></el-option>
  62. <el-option label="无"
  63. value="0"></el-option>
  64. </el-select>
  65. </el-form-item> -->
  66. <!-- <el-form-item prop="isMake">
  67. <el-select
  68. class="multiple"
  69. v-model.trim="searchForm.isMake"
  70. clearable
  71. placeholder="预约网管课"
  72. >
  73. <el-option label="是" value="true"></el-option>
  74. <el-option label="否" value="false"></el-option>
  75. </el-select>
  76. </el-form-item> -->
  77. <!-- <el-form-item prop="hasPracticeCourse">
  78. <el-select class="multiple"
  79. v-model.trim="searchForm.hasPracticeCourse"
  80. clearable
  81. placeholder="是否有网管课">
  82. <el-option label="是"
  83. value="true"></el-option>
  84. <el-option label="否"
  85. value="false"></el-option>
  86. </el-select>
  87. </el-form-item> -->
  88. <el-form-item prop="hasCourse">
  89. <el-select class="multiple"
  90. v-model.trim="searchForm.operatingTag"
  91. clearable
  92. placeholder="是否运营">
  93. <el-option label="是"
  94. :value="1"></el-option>
  95. <el-option label="否"
  96. :value="0"></el-option>
  97. </el-select>
  98. </el-form-item>
  99. <el-form-item prop="hasCourse">
  100. <el-select class="multiple"
  101. v-model.trim="searchForm.serviceTag"
  102. clearable
  103. placeholder="是否服务">
  104. <el-option label="是"
  105. :value="1"></el-option>
  106. <el-option label="否"
  107. :value="0"></el-option>
  108. </el-select>
  109. </el-form-item>
  110. <el-form-item>
  111. <el-button @click="onSearch"
  112. type="danger">搜索</el-button>
  113. <el-button @click="onReSet"
  114. type="primary">重置</el-button>
  115. <el-button type="primary"
  116. v-permission="'export/studentHasCourse'"
  117. @click="downLoadStudent">导出名单</el-button>
  118. </el-form-item>
  119. </el-form>
  120. <!-- 列表 -->
  121. <div class="tableWrap">
  122. <el-table :data="tableList"
  123. :header-cell-style="{background:'#EDEEF0',color:'#444'}">
  124. <el-table-column align="center"
  125. prop="userId"
  126. label="学员编号"></el-table-column>
  127. <el-table-column align="center"
  128. prop="username"
  129. label="学员姓名"></el-table-column>
  130. <el-table-column align="center"
  131. prop="organName"
  132. label="所属分部"></el-table-column>
  133. <el-table-column align="center"
  134. prop="subjectName"
  135. label="声部"></el-table-column>
  136. <el-table-column align="center"
  137. prop="teacherName"
  138. label="指导老师"></el-table-column>
  139. <el-table-column align="center"
  140. label="性别">
  141. <template slot-scope="scope">{{ scope.row.gender ? '男': '女' }}</template>
  142. </el-table-column>
  143. <el-table-column align="center"
  144. prop="realName"
  145. label="家长姓名"></el-table-column>
  146. <el-table-column align="center"
  147. width="120px"
  148. prop="parentsPhone"
  149. label="家长联系电话"></el-table-column>
  150. <el-table-column align="center"
  151. label="是否激活">
  152. <template slot-scope="scope">{{ scope.row.isActive ? '是' : '否' }}</template>
  153. </el-table-column>
  154. <el-table-column align="center"
  155. label="未上课时">
  156. <template slot-scope="scope">{{ scope.row.hasCourse ? '有' : '无' }}</template>
  157. </el-table-column>
  158. <!-- <el-table-column align="center" label="预约网管课">
  159. <template slot-scope="scope">{{ scope.row.isMake ? '是' : '否' }}</template>
  160. </el-table-column> -->
  161. <el-table-column align="center"
  162. label="是否有网管课">
  163. <template slot-scope="scope">{{ scope.row.hasPracticeCourse ? '是' : '否' }}</template>
  164. </el-table-column>
  165. <el-table-column align="center"
  166. label="是否运营">
  167. <template slot-scope="scope">{{ scope.row.operatingTag ? '是' : '否' }}</template>
  168. </el-table-column>
  169. <el-table-column align="center"
  170. label="是否服务">
  171. <template slot-scope="scope">{{ scope.row.serviceTag ? '是' : '否' }}</template>
  172. </el-table-column>
  173. <el-table-column align="center"
  174. label="是否是新用户">
  175. <template slot="header">
  176. <p style="position: relative; "> 是否是新用户 <el-tooltip placement="top"
  177. popper-class="mTooltip">
  178. <div slot="content">
  179. 没有有效的VIP课程或未参与2020年双十一活动的用户为新用户
  180. </div>
  181. <i class="el-icon-question"
  182. style="font-size: 18px; color: #F56C6C"></i>
  183. </el-tooltip>
  184. </p>
  185. </template>
  186. <template slot-scope="scope">
  187. {{ scope.row.isNewUser ? '是' : '否' }}
  188. </template>
  189. </el-table-column>
  190. <el-table-column align="center"
  191. prop="courseBalance"
  192. label="课程余额(元)">
  193. <template slot-scope="scope">
  194. <div>
  195. {{scope.row.courseBalance | moneyFormat}}
  196. </div>
  197. </template>
  198. </el-table-column>
  199. <el-table-column align="center"
  200. fixed="right"
  201. width="180px"
  202. label="操作">
  203. <template slot-scope="scope">
  204. <router-link v-permission="'/studentDetail'"
  205. class="el-button--text"
  206. :to="{path:`/business/studentDetail?userId=${scope.row.userId}`,query:{search:JSON.stringify(searchForm),rules:JSON.stringify(pageInfo),studentName:scope.row.username}}">查看</router-link>
  207. <el-button type="text"
  208. v-permission="'studentManage/studentUpdate'"
  209. @click="resetStudent(scope.row)">修改</el-button>
  210. <!-- api-auth/user/updatePassword2 -->
  211. <el-button v-permission="'api-auth/user/updatePassword2'"
  212. @click="resetPassWrod(scope.row)"
  213. type="text">修改密码</el-button>
  214. <el-button type="text"
  215. @click="lookContracts(scope.row)"
  216. v-permission="'sysUserContracts/getLatest'">下载协议</el-button>
  217. </template>
  218. </el-table-column>
  219. </el-table>
  220. <pagination :total="pageInfo.total"
  221. :page.sync="pageInfo.page"
  222. :limit.sync="pageInfo.limit"
  223. :page-sizes="pageInfo.page_size"
  224. @pagination="getList" />
  225. </div>
  226. </div>
  227. <el-dialog :title="maskName"
  228. width="700px"
  229. label-position="right"
  230. class="studentInfo"
  231. @close="onMaskClose('studentForm')"
  232. :close-on-click-modal='false'
  233. :visible.sync="studentVisible">
  234. <el-divider>基本信息</el-divider>
  235. <el-form :model="studentForm"
  236. :inline="true"
  237. label-width="130px"
  238. label-position="right"
  239. ref="studentForm"
  240. :rules="studentRules">
  241. <el-form-item label="联系电话"
  242. prop="phone"
  243. :rules="[{ required: true, message: '请输入手机号' }, { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }]">
  244. <!-- @blur="checkPhone(studentForm.phone)" -->
  245. <el-input v-model.trim="studentForm.phone"></el-input>
  246. </el-form-item>
  247. <el-form-item label="所属分部"
  248. prop="organId">
  249. <el-select class="multiple"
  250. v-model.trim="studentForm.organId"
  251. filterable
  252. clearable
  253. placeholder="请选择分部"
  254. @change="changeStudentOrgan">
  255. <el-option v-for="(item,index) in organList"
  256. :key="index"
  257. :label="item.name"
  258. :value="item.id"></el-option>
  259. </el-select>
  260. </el-form-item>
  261. <el-form-item label="学生姓名"
  262. prop="name">
  263. <el-input v-model.trim="studentForm.name"></el-input>
  264. </el-form-item>
  265. <el-form-item label="学生性别"
  266. prop="sex">
  267. <el-select class="multiple"
  268. filterable
  269. v-model.trim="studentForm.sex"
  270. clearable
  271. placeholder="请选择性别">
  272. <el-option :value="1"
  273. label="男"></el-option>
  274. <el-option :value="0"
  275. label="女"></el-option>
  276. </el-select>
  277. </el-form-item>
  278. <el-form-item label="学生声部"
  279. prop="subjectIdList">
  280. <el-select v-model.trim="studentForm.subjectIdList"
  281. filterable
  282. clearable
  283. placeholder="学员声部">
  284. <el-option-group v-for="group in subjectList"
  285. :key="group.label"
  286. :label="group.label">
  287. <el-option v-for="item in group.options"
  288. :key="item.value"
  289. :label="item.label"
  290. :value="item.value"></el-option>
  291. </el-option-group>
  292. </el-select>
  293. </el-form-item>
  294. <el-form-item label="是否运营"
  295. prop="operatingTag">
  296. <el-select class="multiple"
  297. v-model.trim="studentForm.operatingTag"
  298. clearable>
  299. <el-option :value="1"
  300. label="是"></el-option>
  301. <el-option :value="0"
  302. label="否"></el-option>
  303. </el-select>
  304. </el-form-item>
  305. <el-form-item label="是否服务"
  306. prop="serviceTag">
  307. <el-select class="multiple"
  308. v-model.trim="studentForm.serviceTag"
  309. clearable>
  310. <el-option :value="1"
  311. label="是"></el-option>
  312. <el-option :value="0"
  313. label="否"></el-option>
  314. </el-select>
  315. </el-form-item>
  316. <el-form-item label="指导老师"
  317. prop="teacherId">
  318. <el-select class="multiple"
  319. v-model.trim="studentForm.teacherId"
  320. clearable
  321. filterable>
  322. <el-option v-for="(item,index) in maskTeacherList"
  323. :label="item.realName"
  324. :value="item.id"
  325. :key="index"></el-option>
  326. </el-select>
  327. </el-form-item>
  328. <el-form-item label="家长姓名" prop="parseName">
  329. <el-input v-model.trim="studentForm.parseName"></el-input>
  330. </el-form-item>
  331. <el-form-item label="出生日期" prop="date">
  332. <el-date-picker v-model.trim="studentForm.date"
  333. style="width: 185px;"
  334. value-format="yyyy-MM-dd"
  335. type="date"
  336. :picker-options="{
  337. firstDayOfWeek:1
  338. }"
  339. placeholder="选择日期"></el-date-picker>
  340. </el-form-item>
  341. <el-form-item label="是否是新用户"
  342. prop="isNewUser">
  343. <template #label>
  344. <p style="position: relative; display: inline-block;"> 是否是新用户 <el-tooltip placement="top"
  345. popper-class="mTooltip">
  346. <div slot="content">
  347. 没有有效的VIP课程或未参与2020年双十一活动的用户为新用户
  348. </div>
  349. <i class="el-icon-question"
  350. style="font-size: 18px; color: #F56C6C"></i>
  351. </el-tooltip>
  352. </p>
  353. </template>
  354. <el-select class="multiple"
  355. v-model.trim="studentForm.isNewUser"
  356. clearable>
  357. <el-option :value="1"
  358. label="是"></el-option>
  359. <el-option :value="0"
  360. label="否"></el-option>
  361. </el-select>
  362. </el-form-item>
  363. </el-form>
  364. <div slot="footer"
  365. class="dialog-footer">
  366. <el-button @click="studentVisible = false">取 消</el-button>
  367. <el-button type="primary"
  368. v-if="isNew"
  369. @click="submitAddStudent">确 定</el-button>
  370. <el-button type="primary"
  371. v-if="!isNew"
  372. @click="resetStudentSubmie">确 定</el-button>
  373. </div>
  374. </el-dialog>
  375. <el-dialog :visible.sync="qrcodeStatus"
  376. center
  377. width="300px">
  378. <div class="right-code">
  379. <h2 class="title">学员激活列表</h2>
  380. <div id="qrcode"
  381. class="qrcode code"
  382. ref="qrCodeUrl"></div>
  383. <!-- <p class="code-url"
  384. v-if="codeUrl2">{{ codeUrl2 }}</p>-->
  385. </div>
  386. </el-dialog>
  387. <el-dialog title="修改密码"
  388. :visible.sync="passwrodVisiable"
  389. :before-close="closePassWord"
  390. width="400px">
  391. <el-form :model="passwrodForm"
  392. ref="passwrodForm"
  393. :inline="true">
  394. <el-form-item label="手机号"
  395. prop="phone"
  396. label-width="120px"
  397. :rules="[{ required: true, message: '手机号不能为空',trigger: 'blur'},{pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号',trigger: 'blur' }]">
  398. <el-input v-model.trim="passwrodForm.phone"></el-input>
  399. </el-form-item>
  400. <el-form-item label="输入密码"
  401. prop="password"
  402. label-width="120px"
  403. :rules="[{ required: true, message: '密码不能为空',trigger: 'blur'},{pattern:/^[\w]{6,20}$/,message:'密码为6-20位',trigger: 'blur'}]">
  404. <el-input v-model.trim="passwrodForm.password"></el-input>
  405. </el-form-item>
  406. <el-form-item label="再次输入"
  407. prop="password2"
  408. label-width="120px"
  409. :rules="[{ required: true, message: '密码不能为空',trigger: 'blur'},{pattern:/^[\w]{6,20}$/,message:'密码为6-20位',trigger: 'blur'}]">
  410. <el-input v-model.trim="passwrodForm.password2"></el-input>
  411. </el-form-item>
  412. </el-form>
  413. <span slot="footer"
  414. class="dialog-footer">
  415. <el-button @click="passwrodVisiable = false">取 消</el-button>
  416. <el-button type="primary"
  417. @click="submitResetPassWord">确 定</el-button>
  418. </span>
  419. </el-dialog>
  420. </div>
  421. </template>
  422. <script>
  423. import pagination from "@/components/Pagination/index";
  424. import {
  425. queryStudentList,
  426. getStudentInfoByPhone,
  427. registerStudent,
  428. updateStudent,
  429. studentHasCourse,
  430. getLatest
  431. } from "@/api/studentManager";
  432. import cleanDeep from 'clean-deep'
  433. import { vaildStudentUrl } from "@/utils/validate";
  434. import { getEmployeeOrgan, resetPassword2, getTeacher } from "@/api/buildTeam";
  435. import { subjectListTree } from '@/api/specialSetting'
  436. import QRCode from "qrcodejs2";
  437. import store from "@/store";
  438. import axios from "axios";
  439. import qs from "qs";
  440. import { getToken } from "@/utils/auth";
  441. import load from "@/utils/loading";
  442. import { permission } from "@/utils/directivePage";
  443. export default {
  444. name: "studentList",
  445. components: { pagination },
  446. data () {
  447. return {
  448. studentVisible: false,
  449. searchForm: {
  450. organId: null,
  451. search: null,
  452. studentName: null,
  453. isActive: null,
  454. hasCourse: null,
  455. // isMake: null,
  456. hasPracticeCourse: null,
  457. operatingTag: null,
  458. serviceTag: null,
  459. teacherId: null
  460. },
  461. searchList: [],
  462. tableList: [],
  463. organList: [],
  464. teacherList: [],
  465. maskTeacherList: [],
  466. subjectList: [], // 声部列表
  467. pageInfo: {
  468. // 分页规则
  469. limit: 10, // 限制显示条数
  470. page: 1, // 当前页
  471. total: 0, // 总条数
  472. page_size: [10, 20, 40, 50] // 选择限制显示条数
  473. },
  474. studentForm: {
  475. phone: "",
  476. organId: "",
  477. name: "",
  478. sex: "",
  479. parseName: "",
  480. date: "",
  481. serviceTag: null,
  482. operatingTag: null,
  483. teacherId: null,
  484. subjectIdList: null,
  485. isNewUser: null,
  486. },
  487. studentRules: {
  488. name: [{ required: true, message: "请输入学生姓名" }],
  489. sex: [{ required: true, message: "请选择学生性别" }],
  490. date: [{ required: true, message: "请选择出生日期" }],
  491. organId: [{ required: true, message: "请选择分部" }],
  492. subjectIdList: [{ required: true, message: "请选择声部" }],
  493. serviceTag: [{ required: true, message: "请选择是否参与服务" }],
  494. isNewUser: [{ required: true, message: "请选择是否是新用户" }],
  495. operatingTag: [{ required: true, message: "请选择是否参与运营" }],
  496. teacherId: [{ required: true, message: "请选择指导老师" }]
  497. },
  498. isNew: false,
  499. active: null,
  500. maskName: "新增学员",
  501. qrcodeStatus: false,
  502. qrcodes: true,
  503. activeRow: null,
  504. passwrodVisiable: false,
  505. passwrodForm: {
  506. phone: "",
  507. password: "",
  508. password2: ""
  509. },
  510. activatedRow: null
  511. };
  512. },
  513. mounted () {
  514. if (this.$route.query.search) {
  515. this.$route.query.search instanceof Object
  516. ? (this.searchForm = this.$route.query.search)
  517. : (this.searchForm = JSON.parse(this.$route.query.search));
  518. }
  519. if (this.$route.query.rules) {
  520. this.$route.query.rules instanceof Object
  521. ? (this.pageInfo = this.$route.query.rules)
  522. : (this.pageInfo = JSON.parse(this.$route.query.rules));
  523. }
  524. getEmployeeOrgan().then(res => {
  525. if (res.code == 200) {
  526. this.organList = res.data;
  527. }
  528. });
  529. getTeacher().then(res => {
  530. if (res.code == 200) {
  531. this.teacherList = res.data;
  532. }
  533. });
  534. this.getList();
  535. },
  536. methods: {
  537. onSearch () {
  538. this.pageInfo.page = 1;
  539. this.getList();
  540. },
  541. onCreateQRCode () {
  542. // 生成报名二维码
  543. this.qrcodeStatus = true;
  544. // let id = this.$route.query.id
  545. // let teamName = this.$route.query.name
  546. setTimeout(() => {
  547. if (this.qrcodes) {
  548. this.qrcodes = false;
  549. this.qrcode = new QRCode("qrcode", {
  550. width: 250,
  551. height: 250,
  552. colorDark: "#000000",
  553. colorLight: "#ffffff",
  554. correctLevel: QRCode.CorrectLevel.H
  555. });
  556. }
  557. // vaildStudentUrl() + `/#/sporadicLogin?id=${刷刷刷}`
  558. this.qrcode.clear();
  559. this.qrcode.makeCode(vaildStudentUrl() + `/#/queryStudentPer`);
  560. // this.codeUrl = vaildStudentUrl() + '/#/login?musicGroupId=' + id
  561. }, 500);
  562. },
  563. getList () {
  564. let params = this.searchForm;
  565. params.rows = this.pageInfo.limit;
  566. params.page = this.pageInfo.page;
  567. params.organId ? params.organId : (params.organId = null);
  568. queryStudentList(params).then(res => {
  569. if (res.code == 200) {
  570. this.tableList = res.data.rows;
  571. this.pageInfo.total = res.data.total;
  572. }
  573. });
  574. },
  575. onReSet () {
  576. this.searchForm = {
  577. organId: null,
  578. search: null,
  579. studentName: null,
  580. isActive: null,
  581. hasCourse: null,
  582. // isMake: null,
  583. hasPracticeCourse: null,
  584. operatingTag: null,
  585. serviceTag: null,
  586. teacherId: null
  587. };
  588. },
  589. downLoadStudent () {
  590. let url = "/api-web/export/studentHasCourse";
  591. let searchForm = this.searchForm;
  592. let data = {
  593. organId: searchForm.organId ? searchForm.organId : null,
  594. search: searchForm.search ? searchForm.search : null,
  595. isActive: searchForm.isActive ? searchForm.isActive : null,
  596. hasCourse: searchForm.hasCourse == "" ? null : searchForm.hasCourse,
  597. // isMake: searchForm.isMake ? searchForm.isMake : null,
  598. hasPracticeCourse: searchForm.hasPracticeCourse
  599. ? searchForm.hasPracticeCourse
  600. : null,
  601. operatingTag: searchForm.operatingTag ? searchForm.operatingTag : null,
  602. serviceTag: searchForm.serviceTag ? searchForm.serviceTag : null,
  603. teacherId: searchForm.teacherId ? searchForm.teacherId : null
  604. };
  605. const options = {
  606. method: "POST",
  607. headers: {
  608. Authorization: getToken()
  609. },
  610. url,
  611. data: qs.stringify(data),
  612. responseType: "blob"
  613. };
  614. this.$confirm("确定导出学员名单?", "提示", {
  615. confirmButtonText: "确定",
  616. cancelButtonText: "取消",
  617. type: "warning"
  618. })
  619. .then(() => {
  620. load.startLoading();
  621. axios(options)
  622. .then(res => {
  623. let blob = new Blob([res.data], {
  624. // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
  625. type: "application/vnd.ms-excel;charset=utf-8"
  626. // word文档为application/msword,pdf文档为application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8
  627. });
  628. let text = new Response(blob).text();
  629. text.then(res => {
  630. // 判断是否报错
  631. if (res.indexOf("code") != -1) {
  632. let json = JSON.parse(res);
  633. this.$message.error(json.msg);
  634. } else {
  635. let objectUrl = URL.createObjectURL(blob);
  636. let link = document.createElement("a");
  637. let nowTime = new Date();
  638. let ymd =
  639. nowTime.getFullYear() +
  640. (nowTime.getMonth() + 1) +
  641. nowTime.getDate();
  642. let fname = `导出学员名单` + ymd + '.xlsx'; //下载文件的名字
  643. link.href = objectUrl;
  644. link.setAttribute("download", fname);
  645. document.body.appendChild(link);
  646. link.click();
  647. }
  648. });
  649. load.endLoading();
  650. })
  651. .catch(error => {
  652. this.$message.error("导出数据失败,请联系管理员");
  653. load.endLoading();
  654. });
  655. })
  656. .catch(() => { });
  657. },
  658. checkPhone (val) {
  659. var regu = /^1[3456789]\d{9}$/;
  660. var re = new RegExp(regu);
  661. if (re.test(val)) {
  662. getStudentInfoByPhone({ mobile: this.studentForm.phone }).then(res => {
  663. if (res.code == 200) {
  664. if (res.data) {
  665. this.studentForm = {
  666. name: res.data.name,
  667. sex: res.data.gender,
  668. parseName: res.data.parentsName,
  669. // sound: parseInt(res.data.subjectIdList),
  670. phone: val,
  671. date: res.data.birthdate
  672. };
  673. }
  674. }
  675. });
  676. }
  677. },
  678. submitAddStudent () {
  679. const studentForm = this.studentForm
  680. // 效验 然后组数据提交
  681. this.$refs["studentForm"].validate(item => {
  682. if (item) {
  683. let obj = {
  684. phone: studentForm.phone,
  685. username: studentForm.name,
  686. gender: studentForm.sex,
  687. realName: studentForm.parseName,
  688. birthdate: studentForm.date,
  689. organId: studentForm.organId,
  690. serviceTag: studentForm.serviceTag,
  691. operatingTag: studentForm.operatingTag,
  692. teacherId: studentForm.teacherId,
  693. isNewUser: studentForm.isNewUser,
  694. subjectIdList: studentForm.subjectIdList
  695. };
  696. registerStudent(obj).then(res => {
  697. if (res.code == 200) {
  698. this.$message.success("添加成功");
  699. this.studentVisible = false;
  700. this.getList();
  701. }
  702. });
  703. }
  704. });
  705. },
  706. // 修改学生信息
  707. resetStudentSubmie () {
  708. const studentForm = this.studentForm
  709. this.$refs["studentForm"].validate(item => {
  710. if (item) {
  711. let obj = {
  712. phone: studentForm.phone,
  713. username: studentForm.name,
  714. gender: studentForm.sex,
  715. realName: studentForm.parseName,
  716. birthdate: studentForm.date,
  717. organId: studentForm.organId,
  718. id: this.active.userId,
  719. serviceTag: studentForm.serviceTag,
  720. operatingTag: studentForm.operatingTag,
  721. teacherId: studentForm.teacherId,
  722. isNewUser: studentForm.isNewUser,
  723. subjectIdList: studentForm.subjectIdList
  724. };
  725. updateStudent(obj).then(res => {
  726. if (res.code == 200) {
  727. this.$message.success("修改成功");
  728. this.studentVisible = false;
  729. this.getList();
  730. }
  731. });
  732. }
  733. });
  734. },
  735. async getSubjectList () {
  736. await subjectListTree({
  737. delFlag: 'NO',
  738. tenantId: 1,
  739. rows: 9999
  740. }).then(res => {
  741. let result = res.data;
  742. if (res.code == 200) {
  743. let tempArray = [];
  744. result.rows.forEach((item, index) => {
  745. let subject = [];
  746. item.subjects.forEach(s => {
  747. subject.push({
  748. value: s.id,
  749. label: s.name
  750. });
  751. });
  752. tempArray[index] = {
  753. label: item.name,
  754. options: subject
  755. };
  756. });
  757. this.subjectList = tempArray;
  758. }
  759. });
  760. },
  761. async addStudent () {
  762. await this.getSubjectList()
  763. this.isNew = true;
  764. this.studentVisible = true;
  765. this.maskName = "新增学员";
  766. },
  767. async resetStudent (row) {
  768. let organId = row.organId;
  769. await this.getSubjectList()
  770. await this.changeStudentOrgan(row.organId)
  771. this.isNew = false;
  772. this.active = row;
  773. this.studentVisible = true;
  774. this.maskName = "修改学员";
  775. this.$nextTick(() => {
  776. this.studentForm = {
  777. phone: row.parentsPhone || null,
  778. name: row.username || null,
  779. sex: row.gender,
  780. parseName: row.realName || null,
  781. date: row.birthdate || null,
  782. organId: row.organId || null,
  783. serviceTag: row.serviceTag,
  784. operatingTag: row.operatingTag,
  785. teacherId: row.teacherId || null,
  786. isNewUser: row.isNewUser,
  787. subjectIdList: Number(row.subjectIdList) || null
  788. }
  789. })
  790. },
  791. onMaskClose(formName) {
  792. this.$refs[formName].resetFields()
  793. },
  794. resetPassWrod (row) {
  795. this.activatedRow = row;
  796. this.passwrodForm.phone = row.parentsPhone;
  797. this.passwrodVisiable = true;
  798. },
  799. closePassWord () {
  800. this.activatedRow = null;
  801. this.passwrodForm = {
  802. phone: "",
  803. password: "",
  804. password2: ""
  805. };
  806. this.$refs["passwrodForm"].resetFields();
  807. this.passwrodVisiable = false;
  808. },
  809. submitResetPassWord () {
  810. if (this.passwrodForm.password !== this.passwrodForm.password2) {
  811. this.$message.error("两次密码必须相同");
  812. return;
  813. }
  814. this.$refs["passwrodForm"].validate(res => {
  815. if (res) {
  816. // 发请求
  817. resetPassword2({
  818. mobile: this.passwrodForm.phone,
  819. newPassword: this.passwrodForm.password,
  820. userId: this.activatedRow.userId
  821. }).then(res => {
  822. if (res.code == 200) {
  823. // 修改成功
  824. this.$message.success("修改成功");
  825. this.closePassWord();
  826. }
  827. });
  828. }
  829. });
  830. },
  831. async changeStudentOrgan (val) {
  832. this.studentForm.teacherId = null
  833. await getTeacher({ organId: val }).then(res => {
  834. if (res.code == 200) {
  835. this.maskTeacherList = res.data;
  836. }
  837. });
  838. },
  839. lookContracts (row) {
  840. getLatest({ userId: row.userId }).then(res => {
  841. if (res.code == 200) {
  842. window.open(res.data.url)
  843. }
  844. })
  845. }
  846. }
  847. };
  848. </script>
  849. <style lang="scss" scoped>
  850. .newBand {
  851. display: inline-block;
  852. margin-right: 10px;
  853. }
  854. .right-code {
  855. // width: 50%;
  856. // float: left;
  857. .title {
  858. font-size: 18px;
  859. text-align: center;
  860. padding-bottom: 8px;
  861. }
  862. }
  863. /deep/.studentInfo {
  864. .el-dialog__body {
  865. padding-top: 0;
  866. padding-bottom: 0;
  867. }
  868. .multiple.el-select {
  869. width: 185px !important;
  870. }
  871. }
  872. </style>