CurriculaManager.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. <template>
  2. <div class="curricula-manager">
  3. <div class="curricula-manager-header">
  4. <el-input
  5. v-model="input"
  6. placeholder="请输入"
  7. suffix-icon="el-icon-search"
  8. @keyup.enter.native="search"
  9. ></el-input>
  10. </div>
  11. <div class="curricula-manager-body">
  12. <div class="curricula-manager-body-button">
  13. <el-button
  14. v-for="(item, i) in statusList"
  15. :key="i"
  16. :class="['bg-color', { active: curTab === i }]"
  17. @click="selectTab(item.status, i)"
  18. >
  19. {{ item.val }}
  20. </el-button>
  21. </div>
  22. <div class="curricula-manager-body-sort">
  23. <div>
  24. <span>排序:</span>
  25. <span v-for="item in sortList" :key="item.id" class="sort-body">
  26. {{ item.name }}
  27. <i class="el-icon-sort"></i>
  28. </span>
  29. </div>
  30. <el-button class="add-course" @click="$router.push('/add_course')">
  31. {{ $t('Learn_New_Courses') }}
  32. </el-button>
  33. </div>
  34. </div>
  35. <div class="curricula-manager-item">
  36. <div v-for="item in courseList" :key="item.id">
  37. <div class="circulation">
  38. <div class="curricula-manager-item-value">
  39. <span>{{ item.name }}</span>
  40. <!-- <span>{{ item.val }}</span> -->
  41. </div>
  42. <div class="curricula-manager-item-create">
  43. <span>{{ item.begin_date }}</span>
  44. <span class="date-horizontal-bar">-</span>
  45. <span>{{ item.end_date }}</span>
  46. <!-- <span class="curricula-manager-item-teacher">授课教师:{{ item.teacher }}</span> -->
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51. </div>
  52. </template>
  53. <script>
  54. import { updateWordPack } from '@/utils/i18n';
  55. import { pageQueryMyCourseList } from '@/api/table';
  56. export default {
  57. name: 'CurriculaManager',
  58. data() {
  59. return {
  60. input: '',
  61. curTab: 0,
  62. status: '1',
  63. sortList: [
  64. {
  65. id: '1',
  66. name: '创建时间',
  67. sortType: 'createTime', // 数组对象中的哪一个属性进行排序
  68. order: false // 升序还是降序
  69. },
  70. {
  71. id: '2',
  72. name: '编辑时间',
  73. sortType: 'editTime',
  74. order: false
  75. },
  76. {
  77. id: '3',
  78. name: '开课时间',
  79. sortType: 'onclassTime',
  80. order: false
  81. }
  82. ],
  83. statusList: [
  84. {
  85. status: '1',
  86. val: '进行中'
  87. },
  88. {
  89. status: '2',
  90. val: '待开始'
  91. },
  92. {
  93. status: '3',
  94. val: '已结束'
  95. }
  96. ],
  97. courseList: []
  98. };
  99. },
  100. created() {
  101. this.search();
  102. updateWordPack({
  103. word_key_list: ['Learn_New_Courses']
  104. });
  105. },
  106. methods: {
  107. selectTab(status, i) {
  108. this.status = status;
  109. this.curTab = i;
  110. this.search();
  111. },
  112. search() {
  113. const queryCriteria = {
  114. finish_status: this.status,
  115. page_capacity: 200,
  116. cur_page: 1
  117. };
  118. pageQueryMyCourseList(queryCriteria).then(response => {
  119. this.courseList = response.course_list;
  120. });
  121. }
  122. }
  123. };
  124. </script>
  125. <style lang="scss">
  126. $main-w: 953px;
  127. .curricula-manager {
  128. &-header .el-input {
  129. width: 244px;
  130. height: 40px;
  131. margin: 37px auto 0;
  132. display: block;
  133. }
  134. &-body-button {
  135. display: flex;
  136. justify-content: center;
  137. margin-top: 35px;
  138. font-size: 16px;
  139. .el-button {
  140. width: 97px;
  141. height: 52px;
  142. }
  143. .el-button + .el-button {
  144. margin-left: 0;
  145. }
  146. }
  147. &-body-sort {
  148. display: flex;
  149. justify-content: space-between;
  150. width: $main-w;
  151. line-height: 40px;
  152. margin: 25px auto 15px;
  153. .add-course {
  154. @extend .bg-color;
  155. }
  156. }
  157. .bg-color {
  158. background: #c4c4c4;
  159. border: 1px solid #c4c4c4;
  160. border-radius: 0;
  161. color: #000;
  162. &.active {
  163. background: #e6e6e6;
  164. border-color: #0c0c0c;
  165. }
  166. }
  167. .sort-body {
  168. margin-left: 20px;
  169. cursor: pointer;
  170. }
  171. &-item {
  172. .circulation {
  173. margin: 0 auto 10px;
  174. width: $main-w;
  175. height: 92px;
  176. background-color: #eee;
  177. padding: 20px 20px 0;
  178. }
  179. &-value {
  180. display: flex;
  181. justify-content: space-between;
  182. }
  183. .date-horizontal-bar {
  184. margin: 0 15px;
  185. }
  186. &-create {
  187. padding-top: 20px;
  188. }
  189. &-teacher {
  190. margin-left: 40px;
  191. }
  192. }
  193. }
  194. </style>