CourseManagement.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <template>
  2. <div>
  3. <el-form ref="form" :model="form" :rules="rules" inline>
  4. <el-form-item label="批次名称" prop="examId">
  5. <ExamSelect v-model="form.examId" />
  6. </el-form-item>
  7. <el-form-item label="科目名称">
  8. <CourseSelect :examId="form.examId" v-model="form.code" />
  9. </el-form-item>
  10. <el-form-item label="状态">
  11. <StateSelect
  12. :options="[
  13. { code: 0, name: '未绑卷' },
  14. { code: 1, name: '已绑卷' },
  15. ]"
  16. v-model="form.hasPaper"
  17. />
  18. </el-form-item>
  19. <el-button @click="searchForm">查询</el-button>
  20. <el-button @click="importPaper">导入</el-button>
  21. </el-form>
  22. <el-table :data="tableData" stripe style="width: 100%;">
  23. <el-table-column type="selection" width="42" />
  24. <el-table-column width="100" label="ID">
  25. <span slot-scope="scope">{{ scope.row.id }}</span>
  26. </el-table-column>
  27. <el-table-column width="200" label="科目代码">
  28. <span slot-scope="scope">{{ scope.row.courseCode }}</span>
  29. </el-table-column>
  30. <el-table-column label="科目名称">
  31. <span slot-scope="scope">{{ scope.row.courseName }}</span>
  32. </el-table-column>
  33. <el-table-column width="120" label="状态">
  34. <span slot-scope="scope">{{
  35. scope.row.hasPaper === 1 ? "已绑卷" : "未绑卷"
  36. }}</span>
  37. </el-table-column>
  38. <el-table-column width="100" label="音频题">
  39. <span slot-scope="scope">{{
  40. scope.row.hasAudio === 1 ? "是" : "否"
  41. }}</span>
  42. </el-table-column>
  43. <el-table-column width="100" label="提交答案">
  44. <span slot-scope="scope">{{
  45. scope.row.hasAnswer | zeroOneEnableDisableFilter
  46. }}</span>
  47. </el-table-column>
  48. <el-table-column width="120" label="更新人">
  49. <span slot-scope="scope">{{ scope.row.updateName }}</span>
  50. </el-table-column>
  51. <el-table-column sortable width="170" label="更新时间">
  52. <span slot-scope="scope">{{
  53. scope.row.updateTime | datetimeFilter
  54. }}</span>
  55. </el-table-column>
  56. <el-table-column :context="_self" label="操作" width="210">
  57. <div slot-scope="scope">
  58. <el-button size="mini" type="primary" plain @click="edit(scope.row)">
  59. 编辑
  60. </el-button>
  61. </div>
  62. </el-table-column>
  63. </el-table>
  64. <div class="page float-right">
  65. <el-pagination
  66. @current-change="handleCurrentChange"
  67. :current-page="currentPage"
  68. :page-size="pageSize"
  69. :page-sizes="[10, 20, 50, 100, 200, 300]"
  70. @size-change="handleSizeChange"
  71. layout="total, sizes, prev, pager, next, jumper"
  72. :total="total"
  73. />
  74. </div>
  75. <PaperImportDialog
  76. ref="theDialog"
  77. :examId="form.examId"
  78. @reload="searchForm"
  79. />
  80. <CoursePaperDialog
  81. ref="theDialog2"
  82. :course="selectedCourse"
  83. @reload="searchForm"
  84. />
  85. </div>
  86. </template>
  87. <script>
  88. import { searchCourses } from "@/api/examwork-course";
  89. import PaperImportDialog from "./PaperImportDialog";
  90. import CoursePaperDialog from "./CoursePaperDialog";
  91. export default {
  92. name: "CourseManagement",
  93. components: {
  94. PaperImportDialog,
  95. CoursePaperDialog,
  96. },
  97. computed: {},
  98. data() {
  99. return {
  100. form: {
  101. examId: "",
  102. code: "",
  103. hasPaper: null,
  104. },
  105. rules: {
  106. examId: [{ required: true, message: "批次必选" }],
  107. },
  108. tableData: [],
  109. currentPage: 1,
  110. pageSize: 10,
  111. total: 10,
  112. selectedCourse: {},
  113. };
  114. },
  115. async created() {},
  116. methods: {
  117. async searchForm() {
  118. try {
  119. const valid = await this.$refs.form.validate();
  120. if (!valid) return;
  121. } catch (error) {
  122. console.log(error);
  123. return;
  124. }
  125. const res = await searchCourses({
  126. examId: this.form.examId,
  127. code: this.form.code,
  128. hasPaper: this.form.hasPaper,
  129. pageNumber: this.currentPage,
  130. pageSize: this.pageSize,
  131. });
  132. this.tableData = res.data.data.records;
  133. this.total = res.data.data.total;
  134. },
  135. handleCurrentChange(val) {
  136. this.currentPage = val;
  137. this.searchForm();
  138. },
  139. handleSizeChange(val) {
  140. this.pageSize = val;
  141. this.currentPage = 1;
  142. this.searchForm();
  143. },
  144. async importPaper() {
  145. try {
  146. const valid = await this.$refs.form.validate();
  147. if (!valid) return;
  148. } catch (error) {
  149. console.log(error);
  150. return;
  151. }
  152. this.$refs.theDialog.openDialog();
  153. },
  154. edit(course) {
  155. this.selectedCourse = course;
  156. this.$refs.theDialog2.openDialog();
  157. },
  158. },
  159. };
  160. </script>
  161. <style></style>