index.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
  1. <!-- -->
  2. <template>
  3. <div class="m-container">
  4. <h2>
  5. <div class="squrt"></div>
  6. 学生考勤列表
  7. </h2>
  8. <div class="m-core">
  9. <save-form
  10. :inline="true"
  11. ref="searchForm"
  12. :model="searchForm"
  13. @submit="search"
  14. @reset="onReSet"
  15. >
  16. <el-form-item prop="studentID">
  17. <el-input
  18. v-model.trim="searchForm.studentID"
  19. clearable
  20. @keyup.enter.native="search"
  21. placeholder="学生编号"
  22. ></el-input>
  23. </el-form-item>
  24. <el-form-item prop="teacherId">
  25. <remote-search :commit='"setTeachers"' v-model='searchForm.teacherId' />
  26. </el-form-item>
  27. <el-form-item prop="organId">
  28. <el-select
  29. class="multiple"
  30. filterable
  31. style="width: 180px !important"
  32. v-model.trim="searchForm.organId"
  33. clearable
  34. placeholder="请选择分部"
  35. >
  36. <el-option
  37. v-for="(item, index) in selects.branchs"
  38. :key="index"
  39. :label="item.name"
  40. :value="item.id"
  41. ></el-option>
  42. </el-select>
  43. </el-form-item>
  44. <el-form-item prop="musicGroupId">
  45. <el-input
  46. v-model.trim="searchForm.musicGroupId"
  47. clearable
  48. @keyup.enter.native="search"
  49. placeholder="乐团编号"
  50. ></el-input>
  51. </el-form-item>
  52. <el-form-item prop="courseScheduleId">
  53. <el-input
  54. v-model.trim="searchForm.courseScheduleId"
  55. clearable
  56. @keyup.enter.native="search"
  57. placeholder="课程编号"
  58. ></el-input>
  59. </el-form-item>
  60. <el-form-item prop="groupType">
  61. <el-select
  62. v-model.trim="searchForm.groupType"
  63. placeholder="请选择课程组类型"
  64. >
  65. <el-option
  66. v-for="(item, index) in courseListType"
  67. :key="index"
  68. :value="item.value"
  69. :label="item.label"
  70. ></el-option>
  71. </el-select>
  72. </el-form-item>
  73. <el-form-item prop="courseScheduleType">
  74. <el-select
  75. v-model.trim="searchForm.courseScheduleType"
  76. clearable
  77. placeholder="请选择课程类型"
  78. >
  79. <el-option
  80. v-for="(item, index) in courseType"
  81. :key="index"
  82. :value="item.value"
  83. :label="item.label"
  84. ></el-option>
  85. </el-select>
  86. </el-form-item>
  87. <el-form-item prop="status">
  88. <el-select
  89. v-model.trim="searchForm.status"
  90. placeholder="请选择考勤状态"
  91. clearable
  92. >
  93. <el-option
  94. v-for="(item, index) in attendanceStatus"
  95. :key="index"
  96. :value="item.value"
  97. :label="item.label"
  98. ></el-option>
  99. </el-select>
  100. </el-form-item>
  101. <el-form-item prop="dates" >
  102. <el-date-picker
  103. v-model="dates"
  104. type="daterange"
  105. style="width: 405px;"
  106. range-separator="至"
  107. start-placeholder="课程开始日期"
  108. end-placeholder="课程结束日期">
  109. </el-date-picker>
  110. </el-form-item>
  111. <el-form-item>
  112. <el-button native-type="submit" type="danger">搜索</el-button>
  113. <el-button native-type="reset" type="primary">重置</el-button>
  114. </el-form-item>
  115. </save-form>
  116. <div class="tableWrap">
  117. <el-table
  118. style="width: 100%"
  119. :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
  120. :data="tableList"
  121. >
  122. <el-table-column
  123. align="center"
  124. prop="courseSchedule.organization.name"
  125. label="分部"
  126. ></el-table-column>
  127. <el-table-column align="center" prop="username" label="学生姓名">
  128. <template slot-scope="scope">
  129. <div>
  130. {{ scope.row.username }}
  131. <p style="color: #f56c6c">
  132. (<copy-text>{{ scope.row.userId }}</copy-text
  133. >)
  134. </p>
  135. </div>
  136. </template>
  137. </el-table-column>
  138. <el-table-column
  139. align="center"
  140. prop="courseSchedule.teacherName"
  141. label="老师姓名"
  142. >
  143. <template slot-scope="scope">
  144. {{ scope.row.courseSchedule.teacherName }}
  145. <p style="color: #f56c6c" v-if="scope.row.teacherId">
  146. (<copy-text>{{ scope.row.teacherId }}</copy-text
  147. >)
  148. </p>
  149. </template>
  150. </el-table-column>
  151. <el-table-column
  152. align="center"
  153. prop="musicGroupId"
  154. label="乐团编号"
  155. >
  156. <template slot-scope="scope">
  157. <div>
  158. <copy-text>{{ scope.row.musicGroupId }}</copy-text>
  159. </div>
  160. </template>
  161. </el-table-column>
  162. <el-table-column
  163. align="center"
  164. prop="courseScheduleId"
  165. label="课程编号"
  166. >
  167. <template slot-scope="scope">
  168. <div>
  169. <copy-text>{{ scope.row.courseScheduleId }}</copy-text>
  170. </div>
  171. </template>
  172. </el-table-column>
  173. <el-table-column
  174. align="center"
  175. prop="courseSchedule.name"
  176. label="课程名称"
  177. ></el-table-column>
  178. <el-table-column
  179. align="center"
  180. prop="courseSchedule.classDate"
  181. label="上课日期"
  182. >
  183. <template slot-scope="scope">
  184. <div>
  185. {{ scope.row.courseSchedule.classDate | dayjsFormat }}
  186. </div>
  187. </template>
  188. </el-table-column>
  189. <el-table-column
  190. align="center"
  191. prop="startClassTime"
  192. label="上课时间"
  193. >
  194. <template slot-scope="scope">
  195. <div>
  196. {{
  197. scope.row.courseSchedule.startClassTime | dayjsFormatMinute
  198. }}-{{
  199. scope.row.courseSchedule.endClassTime | dayjsFormatMinute
  200. }}
  201. </div>
  202. </template>
  203. </el-table-column>
  204. <el-table-column
  205. align="center"
  206. prop="startClassTime"
  207. label="课程组类型"
  208. >
  209. <template slot-scope="scope">
  210. <div>
  211. {{ scope.row.groupType | coursesType }}
  212. </div>
  213. </template>
  214. </el-table-column>
  215. <el-table-column
  216. align="center"
  217. prop="startClassTime"
  218. label="课程类型"
  219. >
  220. <template slot-scope="scope">
  221. <div>
  222. {{ scope.row.courseSchedule.type | coursesType }}
  223. </div>
  224. </template>
  225. </el-table-column>
  226. <el-table-column align="center" label="签到时间" width="180px">
  227. <template slot-scope="scope">
  228. <div>
  229. {{ scope.row.signInTime }}
  230. </div>
  231. </template>
  232. </el-table-column>
  233. <el-table-column
  234. align="center"
  235. label="是否被合并"
  236. >
  237. <template slot-scope="scope">
  238. <div>
  239. {{ scope.row.courseSchedule.newCourseId > 0 ? '是' : '否' }}
  240. </div>
  241. </template>
  242. </el-table-column>
  243. <el-table-column
  244. align="center"
  245. prop="startClassTime"
  246. width="180px"
  247. label="签退时间"
  248. >
  249. <template slot-scope="scope">
  250. <div>
  251. {{ scope.row.signOutTime }}
  252. </div>
  253. </template>
  254. </el-table-column>
  255. <el-table-column align="center" label="考勤状态">
  256. <template slot-scope="scope">
  257. <div>
  258. {{ scope.row.status | clockingIn }}
  259. </div>
  260. </template>
  261. </el-table-column>
  262. </el-table>
  263. <pagination
  264. sync
  265. :total.sync="rules.total"
  266. :page.sync="rules.page"
  267. :limit.sync="rules.limit"
  268. :page-sizes="rules.page_size"
  269. @pagination="getList"
  270. />
  271. </div>
  272. </div>
  273. </div>
  274. </template>
  275. <script>
  276. import axios from "axios";
  277. import { getToken } from "@/utils/auth";
  278. import pagination from "@/components/Pagination/index";
  279. import load from "@/utils/loading";
  280. import { getTimes } from "@/utils";
  281. import qs from "qs";
  282. import { findStudentAttendance } from "@/api/buildTeam";
  283. // import { queryTeacherAttendances } from "@/api/recodeManager";
  284. import {
  285. courseType,
  286. courseListType,
  287. stuAttendance,
  288. } from "@/utils/searchArray";
  289. export default {
  290. components: { pagination },
  291. data() {
  292. return {
  293. searchForm: {
  294. studentID: "",
  295. groupType: "MUSIC",
  296. musicGroupId: "",
  297. courseScheduleId: "",
  298. status: "",
  299. teacherId:'',
  300. courseScheduleType:'',
  301. organId:''
  302. },
  303. dates:[],
  304. courseType,
  305. courseListType,
  306. attendanceStatus:stuAttendance,
  307. // teacherList: [],
  308. tableList: [],
  309. organList: [],
  310. rules: {
  311. // 分页规则
  312. limit: 10, // 限制显示条数
  313. page: 1, // 当前页
  314. total: 0, // 总条数
  315. page_size: [10, 20, 40, 50], // 选择限制显示条数
  316. },
  317. };
  318. },
  319. //生命周期 - 创建完成(可以访问当前this实例)
  320. created() {},
  321. //生命周期 - 挂载完成(可以访问DOM元素)
  322. mounted() {
  323. this.init();
  324. },
  325. methods: {
  326. async init() {
  327. await this.$store.dispatch('setBranchs')
  328. this.getList();
  329. },
  330. getList() {
  331. let obj = {
  332. page: this.rules.page,
  333. rows: this.rules.limit,
  334. ...this.searchForm,
  335. ...getTimes(this.dates, ["startDateOfCourse", "endDateOfCourse"],'YYYY-MM-DD'),
  336. };
  337. findStudentAttendance(obj).then((res) => {
  338. if (res.code == 200) {
  339. this.tableList = res.data.rows;
  340. this.rules.total = res.data.total;
  341. }
  342. });
  343. },
  344. search() {
  345. this.rules.page = 1;
  346. this.getList();
  347. },
  348. onReSet() {
  349. this.$refs["searchForm"].resetFields();
  350. this.search();
  351. },
  352. },
  353. };
  354. </script>
  355. <style lang='scss' scoped>
  356. </style>