123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186 |
- <script setup lang="ts">
- import DialogData from "@/views/training/components/DialogData.vue";
- defineOptions({
- name: "TrainingIndex",
- inheritAttrs: false,
- });
- import { CaretBottom } from "@element-plus/icons-vue";
- import { watch } from "vue";
- import { useUserStore } from "@/store/modules/user";
- import { ClassList } from "@/api/school/types";
- const userStore = useUserStore();
- watch(
- () => userStore.schoolId,
- (newValue, oldValue) => {
- console.log(newValue, oldValue);
- }
- );
- let studentType = ref("");
- let classNumber = ref("");
- let trainingType = ref("");
- const classData = ref<ClassList[]>([
- {
- id: 0,
- school_id: 0,
- name: "全部班级",
- },
- ]);
- const tableData = ref<any>([
- {
- number: 1,
- name: "学生A",
- type: "智脑水舞",
- phone: "15814111616",
- date: "2023-08-22",
- times: "1分12秒",
- cls: "向日葵小班",
- },
- ]);
- let dialogVisible = ref(false);
- </script>
- <template>
- <div class="training-container">
- <!-- 学生查找 -->
- <div class="training-search">
- <el-select
- v-model="studentType"
- placeholder="正式学生/体验用户"
- size="large"
- :suffix-icon="CaretBottom"
- >
- <el-option key="1" value="1" label="正式学生"></el-option>
- <el-option key="2" value="2" label="体验用户"></el-option>
- </el-select>
- <el-select
- v-model="classNumber"
- placeholder="请选择班级名称"
- size="large"
- :suffix-icon="CaretBottom"
- >
- <el-option
- v-for="item in classData"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- />
- </el-select>
- <el-select
- v-model="trainingType"
- placeholder="请选择训练方式"
- size="large"
- :suffix-icon="CaretBottom"
- >
- <el-option
- key="1"
- value="1"
- label="专注模式(脑机专注力训练)"
- ></el-option>
- <el-option key="2" value="2" label="智脑水舞"></el-option>
- <el-option key="2" value="2" label="智脑恐龙"></el-option>
- <el-option key="2" value="2" label="智脑碰碰车"></el-option>
- <el-option key="2" value="2" label="智脑SUV"></el-option>
- <el-option key="2" value="2" label="智脑积木"></el-option>
- <el-option key="2" value="2" label="智脑UFO"></el-option>
- <el-option
- key="2"
- value="2"
- label="放松模式(脑机放松度训练,即正念)"
- ></el-option>
- </el-select>
- <!-- <el-input-->
- <!-- v-model="studentInfo"-->
- <!-- size="large"-->
- <!-- placeholder="请输入学生名称或手机号码"-->
- <!-- />-->
- <!-- <el-button size="large" type="primary">查找</el-button>-->
- </div>
- <!-- 学生数据 -->
- <div class="list-table">
- <el-table :data="tableData" style="width: 100%">
- <el-table-column prop="number" label="序号" align="center" />
- <el-table-column prop="name" label="学生名称" align="center" />
- <el-table-column prop="phone" label="手机号码" align="center" />
- <el-table-column prop="type" label="训练方式" align="center" />
- <el-table-column prop="date" label="训练时间" align="center" />
- <el-table-column prop="times" label="训练时长" align="center" />
- <el-table-column prop="cls" label="所在班级" align="center" />
- <el-table-column />
- <el-table-column label="操作" align="center">
- <el-button text class="table-btn" @click="dialogVisible = true">
- 报告详情
- </el-button>
- </el-table-column>
- </el-table>
- </div>
- </div>
- <el-dialog v-model="dialogVisible">
- <DialogData data="1sdgfsdaf" />
- </el-dialog>
- </template>
- <style lang="scss" scoped>
- .training-container {
- position: relative;
- padding: 20px 30px;
- }
- .training-search {
- margin-bottom: 20px;
- font-size: 16px;
- .el-select {
- width: 200px;
- margin: 0 20px 0 0;
- }
- .el-input {
- width: 250px;
- margin: 0;
- }
- :deep(.el-input__inner) {
- font-size: 16px;
- }
- .el-button {
- font-size: 16px;
- padding: 0 26px;
- margin: 0 20px;
- border-radius: 12px;
- }
- }
- :deep(.el-input__wrapper) {
- background: #ffffff;
- border-radius: 12px;
- }
- :deep(.el-input__wrapper) {
- box-shadow: none !important;
- }
- :deep(.el-select) {
- --el-select-input-focus-border-color: none !important;
- }
- :deep(.el-select .el-input__wrapper.is-focus) {
- box-shadow: none !important;
- }
- :deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
- box-shadow: none !important;
- }
- :deep(.el-table th.el-table__cell) {
- background: #e9ebee;
- }
- .list-table {
- background: #ffffff;
- border-radius: 25px;
- overflow: hidden;
- .table-btn {
- display: inline-block;
- height: 38px;
- line-height: 38px;
- padding: 0 15px;
- background: #4284f2;
- border-radius: 10px;
- color: #ffffff;
- &.disabled {
- background: #bfbfbf;
- cursor: not-allowed;
- }
- }
- }
- </style>
|