teamCourseList.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531
  1. <template>
  2. <div class="m-container">
  3. <h2>
  4. <div class="squrt"></div>课表列表
  5. </h2>
  6. <div class="m-core">
  7. <!-- 搜索类型 -->
  8. <el-form :inline="true" class="searchForm" v-model.trim="searchForm">
  9. <el-form-item>
  10. <el-input
  11. v-model.trim="searchForm.search"
  12. @keyup.enter.native="search"
  13. placeholder="乐团名或VIP课名"
  14. />
  15. </el-form-item>
  16. <el-form-item>
  17. <el-select v-model.trim="searchForm.schoolId" clearable filterable placeholder="请选择教学点">
  18. <el-option
  19. v-for="(item, index) in schoolList"
  20. :key="index"
  21. :value="item.id"
  22. :label="item.name"
  23. ></el-option>
  24. </el-select>
  25. </el-form-item>
  26. <el-form-item>
  27. <el-select
  28. v-model.trim="searchForm.teacherIdList"
  29. clearable
  30. filterable
  31. placeholder="请选择老师"
  32. >
  33. <el-option
  34. v-for="(item, index) in teacherList"
  35. :key="index"
  36. :value="item.id"
  37. :label="item.realName"
  38. ></el-option>
  39. </el-select>
  40. </el-form-item>
  41. <el-form-item>
  42. <el-select
  43. class="multiple"
  44. v-model.trim="searchForm.organIdList"
  45. filterable
  46. clearable
  47. placeholder="请选择分部"
  48. >
  49. <el-option
  50. v-for="(item,index) in organList"
  51. :key="index"
  52. :label="item.name"
  53. :value="item.id"
  54. ></el-option>
  55. </el-select>
  56. </el-form-item>
  57. <el-form-item>
  58. <el-select v-model.trim="searchForm.courseType" clearable filterable placeholder="课程类型">
  59. <el-option
  60. v-for="(item, index) in courseType"
  61. :key="index"
  62. :value="item.value"
  63. :label="item.label"
  64. ></el-option>
  65. </el-select>
  66. </el-form-item>
  67. <el-form-item>
  68. <el-select v-model.trim="searchForm.courseStatus" clearable filterable placeholder="课程状态">
  69. <el-option label="未开始" value="NOT_START"></el-option>
  70. <el-option label="进行中" value="UNDERWAY"></el-option>
  71. <el-option label="已结束" value="OVER"></el-option>
  72. </el-select>
  73. </el-form-item>
  74. <el-form-item>
  75. <el-date-picker
  76. v-model.trim="searchForm.timer"
  77. style="width:420px;"
  78. type="daterange"
  79. value-format="yyyy-MM-dd"
  80. range-separator="至"
  81. start-placeholder="开始日期"
  82. end-placeholder="结束日期"
  83. ></el-date-picker>
  84. </el-form-item>
  85. <el-form-item>
  86. <div class="searchBtn" @click="search">搜索</div>
  87. </el-form-item>
  88. <el-form-item>
  89. <div
  90. class="searchBtn exportBtn"
  91. v-permission="'export/superFindCourseSchedules'"
  92. @click="onCourseExport"
  93. >导出课表</div>
  94. </el-form-item>
  95. </el-form>
  96. <div class="btnWraps"></div>
  97. <!-- 列表 -->
  98. <div class="tableWrap">
  99. <el-table :data="tableList" :header-cell-style="{background:'#EDEEF0',color:'#444'}">
  100. <el-table-column align="center" prop="organName" label="分部名称"></el-table-column>
  101. <el-table-column align="center" prop="id" label="课程编号"></el-table-column>
  102. <el-table-column align="center" width="200px" label="时间">
  103. <template
  104. slot-scope="scope"
  105. >{{ scope.row.startClassTime ? scope.row.startClassTime.substr(0, 16) : '' }}-{{ scope.row.endClassTime ? scope.row.endClassTime.substr(11,5) : ''}}</template>
  106. </el-table-column>
  107. <el-table-column align="center" prop="groupName" label="乐团/VIP名"></el-table-column>
  108. <el-table-column align="center" prop="classGroupName" label="班级名称"></el-table-column>
  109. <el-table-column align="center" prop="studentId" label="学生id">
  110. <template slot-scope="scope">
  111. <div v-if="scope.row.groupType != 'MUSIC'">{{scope.row.studentId}}</div>
  112. </template>
  113. </el-table-column>
  114. <el-table-column align="center" prop="subjectName" label="声部"></el-table-column>
  115. <el-table-column align="center" prop="name" label="课程名称"></el-table-column>
  116. <el-table-column align="center" label="课程类型">
  117. <template slot-scope="scope">
  118. <div>{{ scope.row.type | coursesType}}</div>
  119. </template>
  120. </el-table-column>
  121. <el-table-column align="center" label="教学模式">
  122. <template slot-scope="scope">
  123. <div>{{ scope.row.teachMode | teachMode}}</div>
  124. </template>
  125. </el-table-column>
  126. <el-table-column align="center" prop="schoolName" label="教学点">
  127. <template slot-scope="scope">
  128. <div>{{scope.row.schoolName?scope.row.schoolName:'网络教室'}}</div>
  129. </template>
  130. </el-table-column>
  131. <el-table-column align="center" prop="courseScheduleStatus" label="课程状态">
  132. <template slot-scope="scope">
  133. <div>{{ scope.row.status | coursesStatus }}</div>
  134. </template>
  135. </el-table-column>
  136. <el-table-column align="center" label="是否签到">
  137. <template slot-scope="scope">
  138. <div>{{ scope.row.isSignIn | attendanceType}}</div>
  139. </template>
  140. </el-table-column>
  141. <el-table-column align="center" label="是否签退" fixed="right">
  142. <template slot-scope="scope">
  143. <div>{{ scope.row.isSignOut | attendanceOutType}}</div>
  144. </template>
  145. </el-table-column>
  146. <el-table-column align="center" prop="isCallNames" label="是否点名" fixed="right">
  147. <template slot-scope="scope">{{ scope.row.isCallNames ? '是' : '否' }}</template>
  148. </el-table-column>
  149. <el-table-column align="center" prop="teacherName" label="指导老师" fixed="right"></el-table-column>
  150. <el-table-column align="center" label="详情" fixed="right" width="120px">
  151. <template slot-scope="scope">
  152. <div>
  153. <el-button type="text" v-if="permission('teamCourseList/details')" @click="lookDetail(scope.row)">详情</el-button>
  154. </div>
  155. </template>
  156. </el-table-column>
  157. </el-table>
  158. <pagination
  159. :total="rules.total"
  160. :page.sync="rules.page"
  161. :limit.sync="rules.limit"
  162. :page-sizes="rules.page_size"
  163. @pagination="getList"
  164. />
  165. </div>
  166. </div>
  167. <el-dialog
  168. title="课表详情"
  169. :visible.sync="classVisible"
  170. :before-close="closeClassVisible"
  171. width="1000px">
  172. <el-form :model="maskForm" :inline="true">
  173. <el-form-item label="老师姓名">
  174. <!-- <el-input v-model.trim="maskForm.teacherName"
  175. disabled></el-input>-->
  176. <div class="inputStyle">{{maskForm.teacherName}}</div>
  177. </el-form-item>
  178. <el-form-item label="课程模式">
  179. <!-- <el-input :value="maskForm.teachMode | teachMode"
  180. disabled></el-input>-->
  181. <div class="inputStyle">{{maskForm.teachMode| teachMode}}</div>
  182. <!-- <span>{{maskForm.teachMode }}</span> -->
  183. </el-form-item>
  184. <el-form-item label="课程类型">
  185. <!-- <el-input :value="maskForm.type |classType"
  186. disabled></el-input>-->
  187. <div class="inputStyle">{{maskForm.type|coursesType}}</div>
  188. </el-form-item>
  189. <!-- courseScheduleStatus -->
  190. <el-form-item label="课程状态">
  191. <!-- <el-input :value="maskForm.type |classType"
  192. disabled></el-input>-->
  193. <div class="inputStyle">{{maskForm.status | coursesStatus}}</div>
  194. </el-form-item>
  195. <el-form-item label="签到时间">
  196. <!-- <el-input v-model.trim=" maskForm.signInTime"
  197. disabled></el-input>-->
  198. <div class="inputStyle">{{maskForm.signInTime | dateForMinFormat}}</div>
  199. </el-form-item>
  200. <el-form-item label="签退时间">
  201. <!-- <el-input v-model.trim="maskForm.signOutTime"
  202. disabled></el-input>-->
  203. <div class="inputStyle">{{maskForm.signOutTime | dateForMinFormat}}</div>
  204. </el-form-item>
  205. <el-form-item label="是否点名">
  206. <!-- <el-input :value="maskForm.isCallNames | isCall"
  207. disabled></el-input>-->
  208. <div class="inputStyle">{{maskForm.isCallNames | isCall}}</div>
  209. </el-form-item>
  210. <el-form-item label="签到状态">
  211. <!-- <el-input :value=" maskForm.isSignIn | attendanceType"
  212. disabled></el-input>-->
  213. <div
  214. class="inputStyle"
  215. :class="maskForm.isSignIn==1?'':'red'"
  216. >{{ maskForm.isSignIn | attendanceType}}</div>
  217. </el-form-item>
  218. <el-form-item label="签退状态">
  219. <!-- <el-input :value=" maskForm.isSignOut | attendanceOutType"
  220. disabled></el-input>-->
  221. <div
  222. class="inputStyle"
  223. :class="maskForm.isSignIn==1?'':'red'"
  224. >{{ maskForm.isSignOut | attendanceOutType}}</div>
  225. </el-form-item>
  226. <el-form-item label="备注">
  227. <!-- <el-input :value=" maskForm.isSignOut | attendanceOutType"
  228. disabled></el-input>-->
  229. <div class="inputStyle">{{ maskForm.remark}}</div>
  230. </el-form-item>
  231. </el-form>
  232. <el-tabs
  233. v-model.trim="activeName"
  234. v-if="maskForm.status != 'NOT_START'"
  235. type="card"
  236. @tab-click="handleClick"
  237. >
  238. <el-tab-pane label="点名" name="first">
  239. <div v-if="activeName == 'first'">
  240. <!-- studentRollCall -->
  241. <studentRollCall :courseScheduleId="maskForm.id"></studentRollCall>
  242. </div>
  243. </el-tab-pane>
  244. <el-tab-pane label="GPS定位" v-if="maskForm.teachMode == 'OFFLINE'" name="second">
  245. <div v-if="activeName == 'second'">
  246. <gpsLoction :courseScheduleId="maskForm.id"></gpsLoction>
  247. </div>
  248. </el-tab-pane>
  249. <el-tab-pane label="作业" v-if="maskForm.type != 'VIP'" name="third">
  250. <div v-if="activeName == 'third'">
  251. <studentWork :courseScheduleId="maskForm.id"></studentWork>
  252. </div>
  253. </el-tab-pane>
  254. <el-tab-pane
  255. label="评论"
  256. v-if="maskForm.type == 'VIP' || maskForm.type == 'PRACTICE'"
  257. name="four"
  258. >
  259. <div v-if="activeName == 'four'">
  260. <courseEvaluate :courseScheduleId="maskForm.id"></courseEvaluate>
  261. </div>
  262. </el-tab-pane>
  263. </el-tabs>
  264. </el-dialog>
  265. </div>
  266. </template>
  267. <script>
  268. import pagination from "@/components/Pagination/index";
  269. import {
  270. getTeacher,
  271. getMusicGroupAllClass,
  272. superFindCourseSchedules,
  273. getEmployeeOrgan
  274. } from "@/api/buildTeam";
  275. import { getSchool } from "@/api/systemManage";
  276. import { courseType } from "@/utils/searchArray";
  277. import studentRollCall from "./componentCourse/studentRollCall";
  278. import gpsLoction from "./componentCourse/gpsLocation";
  279. import studentWork from "./componentCourse/studentWork";
  280. import courseEvaluate from "./componentCourse/courseEvaluate";
  281. import { permission } from "@/utils/directivePage";
  282. import axios from "axios";
  283. import { getToken } from "@/utils/auth";
  284. import load from "@/utils/loading";
  285. let nowTime = new Date();
  286. nowTime =
  287. nowTime.getFullYear() +
  288. "-" +
  289. (nowTime.getMonth() + 1) +
  290. "-" +
  291. nowTime.getDate();
  292. export default {
  293. data() {
  294. return {
  295. classVisible: false,
  296. timerVisible: false,
  297. courseVisible: false,
  298. courseType: courseType,
  299. searchForm: {
  300. organIdList: null,
  301. courseStatus: null,
  302. courseType: null,
  303. timer: [nowTime, nowTime], // 时间
  304. class: null,
  305. search: null, // 乐团名称 编号 vip课名称
  306. teacherIdList: null, // 老师编号
  307. schoolId: null // 教学点编号
  308. },
  309. tableList: [],
  310. searchLsit: [],
  311. organList: [],
  312. rules: {
  313. // 分页规则
  314. limit: 10, // 限制显示条数
  315. page: 1, // 当前页
  316. total: 0, // 总条数
  317. page_size: [10, 20, 40, 50] // 选择限制显示条数
  318. },
  319. teacherList: [],
  320. schoolList: [],
  321. maskForm: {},
  322. activeName: "first"
  323. // classList: []
  324. };
  325. },
  326. components: {
  327. pagination,
  328. studentRollCall,
  329. gpsLoction,
  330. studentWork,
  331. courseEvaluate
  332. },
  333. activated() {
  334. this.init();
  335. },
  336. mounted() {
  337. this.init();
  338. },
  339. methods: {
  340. init() {
  341. this.getList();
  342. // 获取所有老师
  343. getTeacher().then(res => {
  344. if (res.code == 200) {
  345. this.teacherList = res.data;
  346. }
  347. });
  348. // 获取教学点
  349. getSchool().then(res => {
  350. if (res.code == 200) {
  351. this.schoolList = res.data;
  352. }
  353. });
  354. getEmployeeOrgan().then(res => {
  355. if (res.code == 200) {
  356. this.organList = res.data;
  357. }
  358. });
  359. },
  360. permission(str, parent) {
  361. return permission(str, parent);
  362. },
  363. search() {
  364. this.rules.page = 1;
  365. this.getList();
  366. },
  367. onCourseExport() {
  368. // 课表导出
  369. let searchForm = this.searchForm;
  370. if (!searchForm.timer || searchForm.timer.length <= 0) {
  371. searchForm.timer = [];
  372. this.$message.error("请选择时间段");
  373. return;
  374. }
  375. let obj = {
  376. courseStatus: searchForm.courseStatus || null,
  377. courseType: searchForm.courseType || null,
  378. startTime: searchForm.timer[0] || null,
  379. endTime: searchForm.timer[1] || null,
  380. classGroupId: searchForm.class || null,
  381. organIdList: searchForm.organIdList || null,
  382. search: searchForm.search || null,
  383. teacherIdList: searchForm.teacherIdList || null,
  384. schoolId: searchForm.schoolId || null
  385. };
  386. let url = "/api-web/export/superFindCourseSchedules";
  387. const options = {
  388. method: "get",
  389. headers: {
  390. Authorization: getToken()
  391. },
  392. params: obj,
  393. url,
  394. responseType: "blob"
  395. };
  396. this.$confirm("您确定导出报表", "提示", {
  397. confirmButtonText: "确定",
  398. cancelButtonText: "取消",
  399. type: "warning"
  400. })
  401. .then(() => {
  402. load.startLoading();
  403. axios(options)
  404. .then(res => {
  405. let blob = new Blob([res.data], {
  406. // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
  407. type: "application/vnd.ms-excel;charset=utf-8"
  408. //word文档为application/msword,pdf文档为application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8
  409. });
  410. let text = new Response(blob).text();
  411. text.then(res => {
  412. // 判断是否报错
  413. if (res.indexOf("code") != -1) {
  414. let json = JSON.parse(res);
  415. this.$message.error(json.msg);
  416. } else {
  417. let objectUrl = URL.createObjectURL(blob);
  418. let link = document.createElement("a");
  419. let fname = "课表列表" + new Date().getTime(); //下载文件的名字
  420. link.href = objectUrl;
  421. link.setAttribute("download", fname);
  422. document.body.appendChild(link);
  423. link.click();
  424. }
  425. });
  426. load.endLoading();
  427. })
  428. .catch(error => {
  429. this.$message.error("导出数据失败,请连接管理员");
  430. load.endLoading();
  431. });
  432. })
  433. .catch(() => {});
  434. },
  435. getList() {
  436. let searchForm = this.searchForm;
  437. if (!searchForm.timer || searchForm.timer.length <= 0) {
  438. searchForm.timer = [];
  439. this.$message.error("请选择时间段");
  440. return;
  441. }
  442. let obj = {
  443. courseStatus: searchForm.courseStatus || null,
  444. courseType: searchForm.courseType || null,
  445. startTime: searchForm.timer[0] || null,
  446. endTime: searchForm.timer[1] || null,
  447. page: this.rules.page,
  448. rows: this.rules.limit,
  449. classGroupId: searchForm.class || null,
  450. organIdList: searchForm.organIdList || null,
  451. search: searchForm.search || null,
  452. teacherIdList: searchForm.teacherIdList || null,
  453. schoolId: searchForm.schoolId || null
  454. };
  455. superFindCourseSchedules(obj).then(res => {
  456. if (res.code == 200) {
  457. this.tableList = res.data.rows;
  458. this.rules.total = res.data.total;
  459. }
  460. });
  461. },
  462. lookDetail(row) {
  463. this.maskForm = row;
  464. this.activeName = "first";
  465. // console.log(row)
  466. this.classVisible = true;
  467. },
  468. handleClick(tab, event) {
  469. // console.log(tab, event);
  470. },
  471. closeClassVisible() {
  472. this.activeName = null;
  473. this.classVisible = false;
  474. }
  475. },
  476. filters: {
  477. isCall(val) {
  478. if (val == 0) {
  479. return "未点名";
  480. } else if (val == 1) {
  481. return "已点名";
  482. }
  483. }
  484. }
  485. };
  486. </script>
  487. <style lang="scss" scoped>
  488. .visible {
  489. visibility: hidden;
  490. }
  491. .cl-container {
  492. .topFrom {
  493. margin: 20px 30px 0;
  494. .classlist {
  495. display: flex;
  496. flex-direction: row;
  497. justify-content: flex-start;
  498. align-items: center;
  499. ul {
  500. li {
  501. list-style: none;
  502. }
  503. }
  504. }
  505. }
  506. .searchForm {
  507. margin: 0 30px;
  508. }
  509. }
  510. .btnWraps {
  511. display: flex;
  512. flex-direction: row;
  513. justify-content: flex-start;
  514. div {
  515. margin-right: 20px;
  516. }
  517. }
  518. .inputStyle {
  519. width: 180px;
  520. }
  521. .red {
  522. color: red;
  523. }
  524. .exportBtn {
  525. background: #13817a;
  526. }
  527. </style>