index.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <script setup lang="ts">
  2. import DialogData from "@/views/training/components/DialogData.vue";
  3. defineOptions({
  4. name: "TrainingIndex",
  5. inheritAttrs: false,
  6. });
  7. import { CaretBottom } from "@element-plus/icons-vue";
  8. import { watch } from "vue";
  9. import { useUserStore } from "@/store/modules/user";
  10. import { ClassList } from "@/api/school/types";
  11. const userStore = useUserStore();
  12. watch(
  13. () => userStore.schoolId,
  14. (newValue, oldValue) => {
  15. console.log(newValue, oldValue);
  16. }
  17. );
  18. let studentType = ref("");
  19. let classNumber = ref("");
  20. let trainingType = ref("");
  21. const classData = ref<ClassList[]>([
  22. {
  23. id: 0,
  24. school_id: 0,
  25. name: "全部班级",
  26. },
  27. ]);
  28. const tableData = ref<any>([
  29. {
  30. number: 1,
  31. name: "学生A",
  32. type: "智脑水舞",
  33. phone: "15814111616",
  34. date: "2023-08-22",
  35. times: "1分12秒",
  36. cls: "向日葵小班",
  37. },
  38. ]);
  39. let dialogVisible = ref(false);
  40. </script>
  41. <template>
  42. <div class="training-container">
  43. <!-- 学生查找 -->
  44. <div class="training-search">
  45. <el-select
  46. v-model="studentType"
  47. placeholder="正式学生/体验用户"
  48. size="large"
  49. :suffix-icon="CaretBottom"
  50. >
  51. <el-option key="1" value="1" label="正式学生"></el-option>
  52. <el-option key="2" value="2" label="体验用户"></el-option>
  53. </el-select>
  54. <el-select
  55. v-model="classNumber"
  56. placeholder="请选择班级名称"
  57. size="large"
  58. :suffix-icon="CaretBottom"
  59. >
  60. <el-option
  61. v-for="item in classData"
  62. :key="item.id"
  63. :label="item.name"
  64. :value="item.id"
  65. />
  66. </el-select>
  67. <el-select
  68. v-model="trainingType"
  69. placeholder="请选择训练方式"
  70. size="large"
  71. :suffix-icon="CaretBottom"
  72. >
  73. <el-option
  74. key="1"
  75. value="1"
  76. label="专注模式(脑机专注力训练)"
  77. ></el-option>
  78. <el-option key="2" value="2" label="智脑水舞"></el-option>
  79. <el-option key="2" value="2" label="智脑恐龙"></el-option>
  80. <el-option key="2" value="2" label="智脑碰碰车"></el-option>
  81. <el-option key="2" value="2" label="智脑SUV"></el-option>
  82. <el-option key="2" value="2" label="智脑积木"></el-option>
  83. <el-option key="2" value="2" label="智脑UFO"></el-option>
  84. <el-option
  85. key="2"
  86. value="2"
  87. label="放松模式(脑机放松度训练,即正念)"
  88. ></el-option>
  89. </el-select>
  90. <!-- <el-input-->
  91. <!-- v-model="studentInfo"-->
  92. <!-- size="large"-->
  93. <!-- placeholder="请输入学生名称或手机号码"-->
  94. <!-- />-->
  95. <!-- <el-button size="large" type="primary">查找</el-button>-->
  96. </div>
  97. <!-- 学生数据 -->
  98. <div class="list-table">
  99. <el-table :data="tableData" style="width: 100%">
  100. <el-table-column prop="number" label="序号" align="center" />
  101. <el-table-column prop="name" label="学生名称" align="center" />
  102. <el-table-column prop="phone" label="手机号码" align="center" />
  103. <el-table-column prop="type" label="训练方式" align="center" />
  104. <el-table-column prop="date" label="训练时间" align="center" />
  105. <el-table-column prop="times" label="训练时长" align="center" />
  106. <el-table-column prop="cls" label="所在班级" align="center" />
  107. <el-table-column />
  108. <el-table-column label="操作" align="center">
  109. <el-button text class="table-btn" @click="dialogVisible = true">
  110. 报告详情
  111. </el-button>
  112. </el-table-column>
  113. </el-table>
  114. </div>
  115. </div>
  116. <el-dialog v-model="dialogVisible">
  117. <DialogData data="1sdgfsdaf" />
  118. </el-dialog>
  119. </template>
  120. <style lang="scss" scoped>
  121. .training-container {
  122. position: relative;
  123. padding: 20px 30px;
  124. }
  125. .training-search {
  126. margin-bottom: 20px;
  127. font-size: 16px;
  128. .el-select {
  129. width: 200px;
  130. margin: 0 20px 0 0;
  131. }
  132. .el-input {
  133. width: 250px;
  134. margin: 0;
  135. }
  136. :deep(.el-input__inner) {
  137. font-size: 16px;
  138. }
  139. .el-button {
  140. font-size: 16px;
  141. padding: 0 26px;
  142. margin: 0 20px;
  143. border-radius: 12px;
  144. }
  145. }
  146. :deep(.el-input__wrapper) {
  147. background: #ffffff;
  148. border-radius: 12px;
  149. }
  150. :deep(.el-input__wrapper) {
  151. box-shadow: none !important;
  152. }
  153. :deep(.el-select) {
  154. --el-select-input-focus-border-color: none !important;
  155. }
  156. :deep(.el-select .el-input__wrapper.is-focus) {
  157. box-shadow: none !important;
  158. }
  159. :deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
  160. box-shadow: none !important;
  161. }
  162. :deep(.el-table th.el-table__cell) {
  163. background: #e9ebee;
  164. }
  165. .list-table {
  166. background: #ffffff;
  167. border-radius: 25px;
  168. overflow: hidden;
  169. .table-btn {
  170. display: inline-block;
  171. height: 38px;
  172. line-height: 38px;
  173. padding: 0 15px;
  174. background: #4284f2;
  175. border-radius: 10px;
  176. color: #ffffff;
  177. &.disabled {
  178. background: #bfbfbf;
  179. cursor: not-allowed;
  180. }
  181. }
  182. }
  183. </style>