Commit a2c90b696346b2d5cd39c580bc1ded62c14b0e32
1 parent
91947bc6
1.更改git配置文件
Showing
6 changed files
with
1076 additions
and
1 deletions
src/views/classes/blend/detail.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <div> | |
| 3 | + <Dec :content="content" /> | |
| 4 | + <div class="blendDetail"> | |
| 5 | + <p class="footer"><el-button type="primary" @click="$router.push('/classes/blend')">返回</el-button></p> | |
| 6 | + <div style="height:calc(100% - 40px);overflow:auto;"> | |
| 7 | + <p>名单名称：0201考室</p> | |
| 8 | + <p>选择学制：小学</p> | |
| 9 | + <p>选择年级：一年级</p> | |
| 10 | + <p>有效期至：2020年03月01日</p> | |
| 11 | + <p>可见范围：全校可见</p> | |
| 12 | + <p>启动状态：正常</p> | |
| 13 | + <p>临时名单：</p> | |
| 14 | + <p style="text-align:right;padding-right:10px;"> | |
| 15 | + <el-button type="primary" size="small">导出名单</el-button> | |
| 16 | + </p> | |
| 17 | + <el-table | |
| 18 | + :data="tableData" | |
| 19 | + style="width: 100%" | |
| 20 | + > | |
| 21 | + <el-table-column | |
| 22 | + prop="no" | |
| 23 | + label="序号" | |
| 24 | + width="180" | |
| 25 | + /> | |
| 26 | + <el-table-column | |
| 27 | + prop="name" | |
| 28 | + label="姓名" | |
| 29 | + width="180" | |
| 30 | + /> | |
| 31 | + <el-table-column | |
| 32 | + prop="sex" | |
| 33 | + label="性别" | |
| 34 | + width="180" | |
| 35 | + /> | |
| 36 | + <el-table-column | |
| 37 | + prop="number" | |
| 38 | + label="学号" | |
| 39 | + width="180" | |
| 40 | + /> | |
| 41 | + <el-table-column | |
| 42 | + prop="keybord" | |
| 43 | + label="键盘ID" | |
| 44 | + /> | |
| 45 | + </el-table> | |
| 46 | + </div> | |
| 47 | + </div> | |
| 48 | + </div> | |
| 49 | +</template> | |
| 50 | +<script> | |
| 51 | +import Dec from '@/components/Dec' | |
| 52 | +export default { | |
| 53 | + name: 'Detail', | |
| 54 | + components: { | |
| 55 | + Dec | |
| 56 | + }, | |
| 57 | + data() { | |
| 58 | + return { | |
| 59 | + content: '', | |
| 60 | + tableData: [{ | |
| 61 | + no: 1, | |
| 62 | + name: '张三', | |
| 63 | + sex: '男', | |
| 64 | + number: '1001', | |
| 65 | + keybord: '20200203' | |
| 66 | + }, { | |
| 67 | + no: 2, | |
| 68 | + name: '张三', | |
| 69 | + sex: '男', | |
| 70 | + number: '1002', | |
| 71 | + keybord: '20200204' | |
| 72 | + }, { | |
| 73 | + no: 3, | |
| 74 | + name: '张三', | |
| 75 | + sex: '男', | |
| 76 | + number: '1003', | |
| 77 | + keybord: '20200205' | |
| 78 | + }, { | |
| 79 | + no: 4, | |
| 80 | + name: '张三', | |
| 81 | + sex: '男', | |
| 82 | + number: '1004', | |
| 83 | + keybord: '20200206' | |
| 84 | + }, | |
| 85 | + { | |
| 86 | + no: 4, | |
| 87 | + name: '张三', | |
| 88 | + sex: '男', | |
| 89 | + number: '1004', | |
| 90 | + keybord: '20200206' | |
| 91 | + }, | |
| 92 | + { | |
| 93 | + no: 4, | |
| 94 | + name: '张三', | |
| 95 | + sex: '男', | |
| 96 | + number: '1004', | |
| 97 | + keybord: '20200206' | |
| 98 | + }, | |
| 99 | + { | |
| 100 | + no: 4, | |
| 101 | + name: '张三', | |
| 102 | + sex: '男', | |
| 103 | + number: '1004', | |
| 104 | + keybord: '20200206' | |
| 105 | + }, | |
| 106 | + { | |
| 107 | + no: 4, | |
| 108 | + name: '张三', | |
| 109 | + sex: '男', | |
| 110 | + number: '1004', | |
| 111 | + keybord: '20200206' | |
| 112 | + }] | |
| 113 | + | |
| 114 | + } | |
| 115 | + }, | |
| 116 | + methods: { | |
| 117 | + } | |
| 118 | +} | |
| 119 | +</script> | |
| 120 | +<style scoped> | |
| 121 | +.blendDetail{ | |
| 122 | + max-width: 1100px; | |
| 123 | + height:calc(100vh - 115px); | |
| 124 | + margin:0 auto; | |
| 125 | + background: #fff; | |
| 126 | + margin-top:15px; | |
| 127 | + padding:20px; | |
| 128 | + font-size: 14px; | |
| 129 | + position: relative; | |
| 130 | +} | |
| 131 | +.blendDetail p{ | |
| 132 | + line-height: 40px; | |
| 133 | + margin:0; | |
| 134 | +} | |
| 135 | +.blendDetail .footer{ | |
| 136 | + width:100%; | |
| 137 | + height:40px; | |
| 138 | + line-height: 40px; | |
| 139 | + text-align: center; | |
| 140 | + position: absolute; | |
| 141 | + bottom:10px; | |
| 142 | + left:0; | |
| 143 | + background: #fff; | |
| 144 | + | |
| 145 | +} | |
| 146 | +</style> | ... | ... |
src/views/classes/blend/index.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <div> | |
| 3 | + <Dec :content="content" /> | |
| 4 | + <div class="blend"> | |
| 5 | + <div class="top-box"> | |
| 6 | + <el-button type="primary" @click="creattest">创建考试</el-button> | |
| 7 | + </div> | |
| 8 | + <el-row style="height:calc(100% - 56px);"> | |
| 9 | + <el-col :span="6" style="height:100%;border-right:1px solid #eee"> | |
| 10 | + <ListBox | |
| 11 | + ref="listbox" | |
| 12 | + title="考试" | |
| 13 | + title-bg="#ccc" | |
| 14 | + :data="listData" | |
| 15 | + active-color="rgb(64, 158, 255)" | |
| 16 | + :acitve-index="1" | |
| 17 | + @clicklist="clicklist" | |
| 18 | + @removelist="removelist" | |
| 19 | + @submitname="submitname" | |
| 20 | + /> | |
| 21 | + </el-col> | |
| 22 | + <el-col :span="18" style="padding:10px;height:100%;"> | |
| 23 | + <p style="margin:0;line-height:40px;font-size:12px;">考试时间：2020年5月1日~2020年5月3日<el-button size="small" icon="el-ump-daochu" style="float:right">批量导出考场名单</el-button></p><div style="clear:both" /> | |
| 24 | + | |
| 25 | + <div class="class-room"> | |
| 26 | + <div class="class-item" @mousemove="hoverIndex = 0" @mouseout="hoverIndex = -1" @click="listDetail('1234')"> | |
| 27 | + <el-row> | |
| 28 | + <el-col :span="7" style="font-size:80px;"><i class="el-ump-banjiguanli" /></el-col> | |
| 29 | + <el-col :span="17"> | |
| 30 | + <p>考场号：001</p> | |
| 31 | + <p>考场人数：30人</p> | |
| 32 | + <p>可见范围：全校可见</p> | |
| 33 | + <div v-show="hoverIndex==0" class="btn-group"> | |
| 34 | + <i class="el-ump-daochu " /> | |
| 35 | + <i class="el-icon-delete" @click.self="delet($event,'1234')" /> | |
| 36 | + </div> | |
| 37 | + </el-col> | |
| 38 | + </el-row> | |
| 39 | + </div> | |
| 40 | + <div class="class-item" @mousemove="hoverIndex = 1" @mouseout="hoverIndex = -1"> | |
| 41 | + <el-row> | |
| 42 | + <el-col :span="7" style="font-size:80px;"><i class="el-ump-banjiguanli" /></el-col> | |
| 43 | + <el-col :span="17"> | |
| 44 | + <p>考场号：002</p> | |
| 45 | + <p>考场人数：30人</p> | |
| 46 | + <p>可见范围：全校可见</p> | |
| 47 | + <div v-show="hoverIndex==1" class="btn-group"> | |
| 48 | + <i class="el-ump-daochu danger" /> | |
| 49 | + <i class="el-icon-delete" /> | |
| 50 | + </div> | |
| 51 | + </el-col> | |
| 52 | + </el-row> | |
| 53 | + </div> | |
| 54 | + <div class="class-item" @mousemove="hoverIndex = 2" @mouseout="hoverIndex = -1"> | |
| 55 | + <el-row> | |
| 56 | + <el-col :span="7" style="font-size:80px;"><i class="el-ump-banjiguanli" /></el-col> | |
| 57 | + <el-col :span="17"> | |
| 58 | + <p>考场号：003</p> | |
| 59 | + <p>考场人数：30人</p> | |
| 60 | + <p>可见范围：全校可见</p> | |
| 61 | + <div v-show="hoverIndex==2" class="btn-group"> | |
| 62 | + <i class="el-ump-daochu danger" /> | |
| 63 | + <i class="el-icon-delete" /> | |
| 64 | + </div> | |
| 65 | + </el-col> | |
| 66 | + </el-row> | |
| 67 | + </div> | |
| 68 | + <div class="class-item" @mousemove="hoverIndex = 3" @mouseout="hoverIndex = -1"> | |
| 69 | + <el-row> | |
| 70 | + <el-col :span="7" style="font-size:80px;"><i class="el-ump-banjiguanli" /></el-col> | |
| 71 | + <el-col :span="17"> | |
| 72 | + <p>考场号：002</p> | |
| 73 | + <p>考场人数：30人</p> | |
| 74 | + <p>可见范围：全校可见</p> | |
| 75 | + <div v-show="hoverIndex==3" class="btn-group"> | |
| 76 | + <i class="el-ump-daochu danger" /> | |
| 77 | + <i class="el-icon-delete" /> | |
| 78 | + </div> | |
| 79 | + </el-col> | |
| 80 | + </el-row> | |
| 81 | + </div> | |
| 82 | + </div> | |
| 83 | + </el-col> | |
| 84 | + </el-row> | |
| 85 | + </div> | |
| 86 | + | |
| 87 | + <!--创建考试--> | |
| 88 | + <el-dialog | |
| 89 | + title="创建混班考试" | |
| 90 | + :visible.sync="dialogVisible" | |
| 91 | + width="50%" | |
| 92 | + :before-close="handleClose" | |
| 93 | + > | |
| 94 | + <el-tabs v-model="activeName" type="card" @tab-click="handleClick"> | |
| 95 | + <el-tab-pane label="随机划分考场" name="first"> | |
| 96 | + <el-form ref="random" :model="random" label-width="100px"> | |
| 97 | + <el-form-item label="考试名称"> | |
| 98 | + <el-input v-model="random.name" style="width:350px;" /> | |
| 99 | + </el-form-item> | |
| 100 | + <el-form-item label="考试时间"> | |
| 101 | + <el-date-picker | |
| 102 | + v-model="random.date" | |
| 103 | + type="daterange" | |
| 104 | + range-separator="至" | |
| 105 | + start-placeholder="开始日期" | |
| 106 | + end-placeholder="结束日期" | |
| 107 | + style="width:350px;" | |
| 108 | + /> | |
| 109 | + </el-form-item> | |
| 110 | + <el-form-item label="选择年级"> | |
| 111 | + <el-select v-model="random.grade" placeholder="请选择" style="width:350px;"> | |
| 112 | + <el-option value="1">一年级</el-option> | |
| 113 | + <el-option value="2">二年级</el-option> | |
| 114 | + </el-select> | |
| 115 | + </el-form-item> | |
| 116 | + <el-form-item label="选择班级"> | |
| 117 | + <el-select v-model="random.classes" multiple placeholder="请选择" style="width:350px;"> | |
| 118 | + <el-option value="1">1班</el-option> | |
| 119 | + <el-option value="2">2班</el-option> | |
| 120 | + </el-select> | |
| 121 | + </el-form-item> | |
| 122 | + <el-form-item label="每个考场人数"> | |
| 123 | + <el-input v-model="random.number" style="width:350px;" /> | |
| 124 | + </el-form-item> | |
| 125 | + </el-form> | |
| 126 | + </el-tab-pane> | |
| 127 | + <el-tab-pane label="按考试成绩划分考场" name="second"> | |
| 128 | + <el-form ref="result" :model="result" label-width="100px"> | |
| 129 | + <el-form-item label="考试名称"> | |
| 130 | + <el-input v-model="result.name" style="width:350px;" /> | |
| 131 | + </el-form-item> | |
| 132 | + <el-form-item label="考试时间"> | |
| 133 | + <el-date-picker | |
| 134 | + v-model="result.date" | |
| 135 | + type="daterange" | |
| 136 | + range-separator="至" | |
| 137 | + start-placeholder="开始日期" | |
| 138 | + end-placeholder="结束日期" | |
| 139 | + style="width:350px;" | |
| 140 | + /> | |
| 141 | + </el-form-item> | |
| 142 | + <el-form-item label="选择年级"> | |
| 143 | + <el-select v-model="result.grade" placeholder="请选择" style="width:350px;"> | |
| 144 | + <el-option value="1">一年级</el-option> | |
| 145 | + <el-option value="2">二年级</el-option> | |
| 146 | + </el-select> | |
| 147 | + </el-form-item> | |
| 148 | + <el-form-item label="选择班级"> | |
| 149 | + <el-select v-model="result.classes" multiple placeholder="请选择" style="width:350px;"> | |
| 150 | + <el-option value="1">1班</el-option> | |
| 151 | + <el-option value="2">2班</el-option> | |
| 152 | + </el-select> | |
| 153 | + </el-form-item> | |
| 154 | + <el-form-item label="导入成绩"> | |
| 155 | + <el-upload | |
| 156 | + class="upload-demo" | |
| 157 | + action="https://jsonplaceholder.typicode.com/posts/" | |
| 158 | + :on-preview="handlePreview" | |
| 159 | + :on-remove="handleRemove" | |
| 160 | + :before-remove="beforeRemove" | |
| 161 | + multiple | |
| 162 | + :limit="1" | |
| 163 | + :on-exceed="handleExceed" | |
| 164 | + > | |
| 165 | + <el-button size="small" type="primary">点击上传</el-button> | |
| 166 | + <el-link type="primary" style="margin-left:35px;">下载成绩单模板</el-link> | |
| 167 | + </el-upload> | |
| 168 | + </el-form-item> | |
| 169 | + <el-form-item label="每个考场人数"> | |
| 170 | + <el-input v-model="result.number" style="width:350px;" /> | |
| 171 | + </el-form-item> | |
| 172 | + </el-form> | |
| 173 | + </el-tab-pane> | |
| 174 | + </el-tabs> | |
| 175 | + <span slot="footer" class="dialog-footer"> | |
| 176 | + <el-button @click="dialogVisible = false">取 消</el-button> | |
| 177 | + <el-button type="primary" @click="dialogVisible = false">确 定</el-button> | |
| 178 | + </span> | |
| 179 | + </el-dialog> | |
| 180 | + </div> | |
| 181 | +</template> | |
| 182 | +<script> | |
| 183 | +import Dec from '@/components/Dec' | |
| 184 | +import ListBox from '@/components/ListBox' | |
| 185 | +export default { | |
| 186 | + name: 'Blend', | |
| 187 | + components: { | |
| 188 | + Dec, | |
| 189 | + ListBox | |
| 190 | + }, | |
| 191 | + data() { | |
| 192 | + return { | |
| 193 | + content: '考室信息短期有效，支持随机快速创建或自定义上传', | |
| 194 | + value: 0, | |
| 195 | + searchtext: '', | |
| 196 | + hoverIndex: -1, | |
| 197 | + dialogVisible: false, | |
| 198 | + dialogVisible1: true, | |
| 199 | + activeName: 'first', | |
| 200 | + listData: [ | |
| 201 | + { id: 0, name: '2020年上学期中考试2020年上学期中考试' }, | |
| 202 | + { id: 1, name: '2020年入学考试' } | |
| 203 | + ], | |
| 204 | + random: { | |
| 205 | + name: '', | |
| 206 | + date: '', | |
| 207 | + grade: '', | |
| 208 | + classes: '', | |
| 209 | + number: '' | |
| 210 | + }, | |
| 211 | + result: { | |
| 212 | + name: '', | |
| 213 | + date: '', | |
| 214 | + grade: '', | |
| 215 | + classes: '', | |
| 216 | + number: '' | |
| 217 | + } | |
| 218 | + } | |
| 219 | + }, | |
| 220 | + methods: { | |
| 221 | + search() { | |
| 222 | + console.log(1) | |
| 223 | + }, | |
| 224 | + clicklist(index) { | |
| 225 | + console.log(index) | |
| 226 | + }, | |
| 227 | + removelist(index) { | |
| 228 | + console.log(index) | |
| 229 | + }, | |
| 230 | + submitname(index) { | |
| 231 | + this.listData[index].edit = false | |
| 232 | + }, | |
| 233 | + creattest() { | |
| 234 | + this.dialogVisible = true | |
| 235 | + }, | |
| 236 | + handleClose(done) { | |
| 237 | + this.$confirm('确认关闭？') | |
| 238 | + .then(_ => { | |
| 239 | + done() | |
| 240 | + }) | |
| 241 | + .catch(_ => {}) | |
| 242 | + }, | |
| 243 | + handleClick(tab, event) { | |
| 244 | + console.log(tab, event) | |
| 245 | + }, | |
| 246 | + handleRemove(file, fileList) { | |
| 247 | + console.log(file, fileList) | |
| 248 | + }, | |
| 249 | + handlePreview(file) { | |
| 250 | + console.log(file) | |
| 251 | + }, | |
| 252 | + handleExceed(files, fileList) { | |
| 253 | + this.$message.warning(`当前限制选择 1 个文件`) | |
| 254 | + }, | |
| 255 | + beforeRemove(file, fileList) { | |
| 256 | + return this.$confirm(`确定移除 ${file.name}？`) | |
| 257 | + }, | |
| 258 | + listDetail(id) { | |
| 259 | + this.$router.push({ path: '/classes/blendDetail', query: { id }}) | |
| 260 | + console.log(id) | |
| 261 | + }, | |
| 262 | + delet(event, id) { | |
| 263 | + event.stopPropagation() | |
| 264 | + console.log(id) | |
| 265 | + } | |
| 266 | + } | |
| 267 | +} | |
| 268 | +</script> | |
| 269 | +<style scoped> | |
| 270 | +.blend{ | |
| 271 | + max-width: 1100px; | |
| 272 | + height:calc(100vh - 115px); | |
| 273 | + margin:0 auto; | |
| 274 | + background: #fff; | |
| 275 | + margin-top:15px; | |
| 276 | + padding:20px; | |
| 277 | +} | |
| 278 | +.top-box{ | |
| 279 | + padding-bottom: 15px; | |
| 280 | + border-bottom: 1px solid #ccc; | |
| 281 | +} | |
| 282 | +.class-item{ | |
| 283 | + width:49%; | |
| 284 | + float: left; | |
| 285 | + border:1px solid #888; | |
| 286 | + padding:10px 0; | |
| 287 | + border-radius: 20px; | |
| 288 | + margin-bottom:5px; | |
| 289 | + position: relative; | |
| 290 | +} | |
| 291 | +.class-item:nth-child(2n+1){ | |
| 292 | + margin-right:2%; | |
| 293 | +} | |
| 294 | +.class-item p span{ | |
| 295 | + font-size: 12px; | |
| 296 | + color:#888; | |
| 297 | +} | |
| 298 | +.class-item .left20{ | |
| 299 | + margin-left: 20px; | |
| 300 | +} | |
| 301 | +.class-item .left30{ | |
| 302 | + margin-left: 30px; | |
| 303 | +} | |
| 304 | +.btn-group{ | |
| 305 | + font-size: 20px; | |
| 306 | + position: absolute; | |
| 307 | + top:0px; | |
| 308 | + right:20px; | |
| 309 | +} | |
| 310 | +.btn-group i{ | |
| 311 | + cursor: pointer; | |
| 312 | + margin-right: 5px; | |
| 313 | +} | |
| 314 | +.class-room{ | |
| 315 | + height:calc(100% - 32px); | |
| 316 | + overflow: auto; | |
| 317 | +} | |
| 318 | +</style> | ... | ... |
src/views/classes/classes/index.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <div> | |
| 3 | + <Dec :content="content" /> | |
| 4 | + <div class="classes"> | |
| 5 | + <div class="top-box"> | |
| 6 | + <el-row> | |
| 7 | + <el-col :span="12"> | |
| 8 | + <el-button type="primary" @click="$router.push('/classes/add')">添加班级</el-button> | |
| 9 | + </el-col> | |
| 10 | + <el-col :span="12"> | |
| 11 | + <span>状态：</span> | |
| 12 | + <el-select v-model="value" style="width:120px" placeholder="请选择"> | |
| 13 | + <el-option :value="0" label="全部" /> | |
| 14 | + <el-option :value="1" label="毕业" /> | |
| 15 | + <el-option :value="2" label="在读启用" /> | |
| 16 | + <el-option :value="3" label="在读禁用" /> | |
| 17 | + </el-select> | |
| 18 | + <el-input | |
| 19 | + v-model="searchtext" | |
| 20 | + placeholder="班级名称或编号" | |
| 21 | + style="width:220px" | |
| 22 | + > | |
| 23 | + <i slot="suffix" class="el-input__icon el-icon-search" @click="search" /> | |
| 24 | + </el-input> | |
| 25 | + </el-col> | |
| 26 | + </el-row> | |
| 27 | + </div> | |
| 28 | + <el-row style="height:calc(100% - 56px);"> | |
| 29 | + <el-col :span="6" style="height:100%;border-right:1px solid #eee"> | |
| 30 | + <ListBox | |
| 31 | + ref="listbox" | |
| 32 | + title="年级" | |
| 33 | + title-bg="#ccc" | |
| 34 | + :data="listData" | |
| 35 | + active-color="rgb(64, 158, 255)" | |
| 36 | + :acitve-index="1" | |
| 37 | + @clicklist="clicklist" | |
| 38 | + @removelist="removelist" | |
| 39 | + @submitname="submitname" | |
| 40 | + /> | |
| 41 | + </el-col> | |
| 42 | + <el-col :span="18" style="padding:10px;"> | |
| 43 | + <p style="text-align:right;padding-bottom:10px;margin:0;line-height:40px;"><el-button size="small" icon="el-ump-qingchu">删除毕业班级</el-button></p> | |
| 44 | + <div style="clear:both" /> | |
| 45 | + <div class="class-item" @mousemove="hoverIndex = 0" @mouseout="hoverIndex = -1" @click="classDetail('1234')"> | |
| 46 | + <el-row> | |
| 47 | + <el-col :span="4" style="font-size:80px;"><i class="el-ump-banjiguanli" /></el-col> | |
| 48 | + <el-col :span="18"> | |
| 49 | + <p>一年八班 <span>（在读启用）</span></p> | |
| 50 | + <p><span>小学一年级</span><span class="left20">55人</span><span class="left20">班级编号：2134</span></p> | |
| 51 | + <p><span>班主任：李四</span><span class="left30">任课老师：张三、王欧、李帅</span></p> | |
| 52 | + <div v-show="hoverIndex==0" class="btn-group"> | |
| 53 | + <i class="el-ump-jinzhi" /> | |
| 54 | + <i class="el-icon-edit" @click="edit($event,'1234')" /> | |
| 55 | + <i class="el-icon-delete" /> | |
| 56 | + </div> | |
| 57 | + </el-col> | |
| 58 | + </el-row> | |
| 59 | + </div> | |
| 60 | + <div class="class-item" style="color:#888" @mouseover="hoverIndex=1" @mouseout="hoverIndex=-1"> | |
| 61 | + <el-row> | |
| 62 | + <el-col :span="4" style="font-size:80px;"><i class="el-ump-banjiguanli" /></el-col> | |
| 63 | + <el-col :span="18"> | |
| 64 | + <p>一年八班 <span>（在读禁用）</span></p> | |
| 65 | + <p><span>小学一年级</span><span class="left20">55人</span><span class="left20">班级编号：2134</span></p> | |
| 66 | + <p><span>班主任：李四</span><span class="left30">任课老师：张三、王欧、李帅</span></p> | |
| 67 | + <div v-show="hoverIndex==1" class="btn-group"> | |
| 68 | + <i class="el-ump-jinzhi" /> | |
| 69 | + <i class="el-icon-edit" /> | |
| 70 | + <i class="el-icon-delete" /> | |
| 71 | + </div> | |
| 72 | + </el-col> | |
| 73 | + </el-row> | |
| 74 | + </div> | |
| 75 | + </el-col> | |
| 76 | + </el-row> | |
| 77 | + </div> | |
| 78 | + </div> | |
| 79 | +</template> | |
| 80 | +<script> | |
| 81 | +import Dec from '@/components/Dec' | |
| 82 | +import ListBox from '@/components/ListBox' | |
| 83 | +export default { | |
| 84 | + name: 'Classes', | |
| 85 | + components: { | |
| 86 | + Dec, | |
| 87 | + ListBox | |
| 88 | + }, | |
| 89 | + data() { | |
| 90 | + return { | |
| 91 | + content: '信息管理员或者班主任可创建和管理班级', | |
| 92 | + value: 0, | |
| 93 | + searchtext: '', | |
| 94 | + hoverIndex: -1, | |
| 95 | + listData: [ | |
| 96 | + { id: 0, name: '全部（30）', removeIcon: false }, | |
| 97 | + { id: 2, name: '小学一年级（10）' }, | |
| 98 | + { id: 3, name: '小学二年级（10）' }, | |
| 99 | + { id: 4, name: '小学三年级（10）' } | |
| 100 | + ] | |
| 101 | + } | |
| 102 | + }, | |
| 103 | + methods: { | |
| 104 | + search() { | |
| 105 | + console.log(1) | |
| 106 | + }, | |
| 107 | + clicklist(index) { | |
| 108 | + console.log(index) | |
| 109 | + }, | |
| 110 | + removelist(index) { | |
| 111 | + console.log(index) | |
| 112 | + }, | |
| 113 | + submitname(index) { | |
| 114 | + this.listData[index].edit = false | |
| 115 | + }, | |
| 116 | + classDetail(id) { | |
| 117 | + console.log(id) | |
| 118 | + this.$router.push({ path: '/classes/classDetail', query: { id }}) | |
| 119 | + }, | |
| 120 | + edit(event, id) { | |
| 121 | + event.stopPropagation() | |
| 122 | + this.$router.push({ path: '/classes/add', query: { id }}) | |
| 123 | + } | |
| 124 | + } | |
| 125 | +} | |
| 126 | +</script> | |
| 127 | +<style scoped> | |
| 128 | +.classes{ | |
| 129 | + max-width: 1100px; | |
| 130 | + height:calc(100vh - 115px); | |
| 131 | + margin:0 auto; | |
| 132 | + background: #fff; | |
| 133 | + margin-top:15px; | |
| 134 | + padding:20px; | |
| 135 | +} | |
| 136 | +.top-box{ | |
| 137 | + padding-bottom: 15px; | |
| 138 | + border-bottom: 1px solid #ccc; | |
| 139 | +} | |
| 140 | +.class-item{ | |
| 141 | + border:1px solid #888; | |
| 142 | + padding:10px 0; | |
| 143 | + border-radius: 20px; | |
| 144 | + margin-bottom:5px; | |
| 145 | + position: relative; | |
| 146 | +} | |
| 147 | +.class-item p span{ | |
| 148 | + font-size: 12px; | |
| 149 | + color:#888; | |
| 150 | +} | |
| 151 | +.class-item .left20{ | |
| 152 | + margin-left: 20px; | |
| 153 | +} | |
| 154 | +.class-item .left30{ | |
| 155 | + margin-left: 30px; | |
| 156 | +} | |
| 157 | +.btn-group{ | |
| 158 | + font-size: 20px; | |
| 159 | + position: absolute; | |
| 160 | + top:10px; | |
| 161 | + right:20px; | |
| 162 | +} | |
| 163 | +.btn-group i{ | |
| 164 | + cursor: pointer; | |
| 165 | + margin-right: 5px; | |
| 166 | +} | |
| 167 | +</style> | ... | ... |
src/views/classes/classes/page/add.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <div> | |
| 3 | + <Dec :content="content" /> | |
| 4 | + <div class="add"> | |
| 5 | + <p class="footer"> | |
| 6 | + <el-button v-show="active==1" type="primary" @click="next">下一步</el-button> | |
| 7 | + <el-button v-show="active==1" type="danger" @click="close">取消</el-button> | |
| 8 | + | |
| 9 | + <el-button v-show="active==2" type="primary" @click="prev">上一步</el-button> | |
| 10 | + <el-button v-show="active==2" type="primary" @click="save">保存</el-button> | |
| 11 | + </p> | |
| 12 | + <div style="height:calc(100% - 40px);overflow:auto;"> | |
| 13 | + <el-steps :active="active" style="width:50%;margin:0 auto;"> | |
| 14 | + <el-step title="添加班级信息" /> | |
| 15 | + <el-step title="添加学生信息" /> | |
| 16 | + </el-steps> | |
| 17 | + <div v-show="active==1"> | |
| 18 | + <el-form ref="classes" :model="classes" label-width="100px" style="margin-top:30px;"> | |
| 19 | + <el-form-item label="班级名称"> | |
| 20 | + <el-input v-model="classes.name" style="width:400px;" placeholder="请输入班级名称" /> | |
| 21 | + </el-form-item> | |
| 22 | + <el-form-item label="年级"> | |
| 23 | + <el-select v-model="classes.lengthof" style="width:198px;" placeholder="请选择"> | |
| 24 | + <el-option | |
| 25 | + v-for="item in lengthof" | |
| 26 | + :key="item.value" | |
| 27 | + :label="item.label" | |
| 28 | + :value="item.value" | |
| 29 | + /> | |
| 30 | + </el-select> | |
| 31 | + <el-select v-model="classes.grade" style="width:198px;" placeholder="请选择"> | |
| 32 | + <el-option | |
| 33 | + v-for="item in grade" | |
| 34 | + :key="item.value" | |
| 35 | + :label="item.label" | |
| 36 | + :value="item.value" | |
| 37 | + /> | |
| 38 | + </el-select> | |
| 39 | + </el-form-item> | |
| 40 | + <el-form-item label="班主任"> | |
| 41 | + <el-select v-model="classes.tutor" style="width:400px;" placeholder="请选择"> | |
| 42 | + <el-option | |
| 43 | + v-for="item in tutor" | |
| 44 | + :key="item.value" | |
| 45 | + :label="item.label" | |
| 46 | + :value="item.value" | |
| 47 | + /> | |
| 48 | + </el-select> | |
| 49 | + </el-form-item> | |
| 50 | + <el-form-item label="任课老师"> | |
| 51 | + <el-select v-model="classes.subjectTeacher" style="width:400px;" multiple placeholder="请选择"> | |
| 52 | + <el-option | |
| 53 | + v-for="item in subjectTeacher" | |
| 54 | + :key="item.value" | |
| 55 | + :label="item.label" | |
| 56 | + :value="item.value" | |
| 57 | + /> | |
| 58 | + </el-select> | |
| 59 | + </el-form-item> | |
| 60 | + <el-form-item label="状态"> | |
| 61 | + <el-select v-model="classes.state" style="width:400px;" placeholder="请选择"> | |
| 62 | + <el-option | |
| 63 | + v-for="item in state" | |
| 64 | + :key="item.value" | |
| 65 | + :label="item.label" | |
| 66 | + :value="item.value" | |
| 67 | + /> | |
| 68 | + </el-select> | |
| 69 | + </el-form-item> | |
| 70 | + </el-form> | |
| 71 | + </div> | |
| 72 | + <div v-show="active==2"> | |
| 73 | + <div class="btn-group"> | |
| 74 | + <el-button type="primary" @click="studentdialog=true">添加学生</el-button> | |
| 75 | + <el-button type="primary" @click="importdialog=true">批量导入</el-button> | |
| 76 | + <el-button type="danger">批量删除</el-button> | |
| 77 | + </div> | |
| 78 | + <el-table | |
| 79 | + :data="tableData" | |
| 80 | + style="width: 100%" | |
| 81 | + @selection-change="getdata" | |
| 82 | + > | |
| 83 | + <el-table-column | |
| 84 | + type="selection" | |
| 85 | + width="55" | |
| 86 | + /> | |
| 87 | + <el-table-column | |
| 88 | + prop="no" | |
| 89 | + label="序号" | |
| 90 | + width="180" | |
| 91 | + /> | |
| 92 | + <el-table-column | |
| 93 | + prop="name" | |
| 94 | + label="姓名" | |
| 95 | + width="180" | |
| 96 | + /> | |
| 97 | + <el-table-column | |
| 98 | + prop="sex" | |
| 99 | + label="性别" | |
| 100 | + /> | |
| 101 | + <el-table-column | |
| 102 | + prop="number" | |
| 103 | + label="学号" | |
| 104 | + /> | |
| 105 | + <el-table-column | |
| 106 | + prop="keybord" | |
| 107 | + label="键盘ID" | |
| 108 | + /> | |
| 109 | + </el-table> | |
| 110 | + </div> | |
| 111 | + </div> | |
| 112 | + </div> | |
| 113 | + <!--添加学生--> | |
| 114 | + <el-dialog | |
| 115 | + title="添加学生" | |
| 116 | + :visible.sync="studentdialog" | |
| 117 | + width="30%" | |
| 118 | + > | |
| 119 | + | |
| 120 | + <el-form ref="student" :model="student" label-width="100px" style="margin-top:30px;"> | |
| 121 | + <el-form-item label="姓名"> | |
| 122 | + <el-input v-model="student.name" style="width:300px;" placeholder="请输入学生名称" /> | |
| 123 | + </el-form-item> | |
| 124 | + <el-form-item label="学号"> | |
| 125 | + <el-input v-model="student.number" style="width:300px;" placeholder="请输入学号" /> | |
| 126 | + </el-form-item> | |
| 127 | + <el-form-item label="性别"> | |
| 128 | + <el-select v-model="student.sex" style="width:300px;" placeholder="请选择性别"> | |
| 129 | + <el-option value="0" label="男" /> | |
| 130 | + <el-option value="1" label="女" /> | |
| 131 | + </el-select> | |
| 132 | + </el-form-item> | |
| 133 | + <el-form-item label="答题器编号"> | |
| 134 | + <el-input v-model="student.keybord" style="width:300px;" placeholder="请输入答题器编号" /> | |
| 135 | + </el-form-item> | |
| 136 | + </el-form> | |
| 137 | + <span slot="footer" class="dialog-footer"> | |
| 138 | + <el-button @click="studentdialog = false">取 消</el-button> | |
| 139 | + <el-button type="primary" @click="studentdialog = false">保 存</el-button> | |
| 140 | + </span> | |
| 141 | + </el-dialog> | |
| 142 | + <!--批量导入--> | |
| 143 | + <el-dialog | |
| 144 | + title="批量导入学生" | |
| 145 | + :visible.sync="importdialog" | |
| 146 | + width="30%" | |
| 147 | + > | |
| 148 | + <p>第一步：下载模板并编辑完成学生的信息 <el-link type="primary"><i class="el-ump-xiazai" />下载导入模板</el-link></p> | |
| 149 | + <p>第二步：上传编辑完成的模板文件，完成导入</p> | |
| 150 | + <el-upload | |
| 151 | + class="upload-demo" | |
| 152 | + action="https://jsonplaceholder.typicode.com/posts/" | |
| 153 | + :on-preview="handlePreview" | |
| 154 | + :on-remove="handleRemove" | |
| 155 | + :before-remove="beforeRemove" | |
| 156 | + multiple | |
| 157 | + :limit="1" | |
| 158 | + :on-exceed="handleExceed" | |
| 159 | + > | |
| 160 | + <el-button size="small" type="primary">选择文件并上传</el-button> | |
| 161 | + <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> --> | |
| 162 | + </el-upload> | |
| 163 | + <span slot="footer" class="dialog-footer"> | |
| 164 | + <el-button @click="importdialog = false">取 消</el-button> | |
| 165 | + <el-button type="primary" @click="importdialog = false">保 存</el-button> | |
| 166 | + </span> | |
| 167 | + </el-dialog> | |
| 168 | + </div> | |
| 169 | +</template> | |
| 170 | +<script> | |
| 171 | +import Dec from '@/components/Dec' | |
| 172 | +export default { | |
| 173 | + name: 'Add', | |
| 174 | + components: { | |
| 175 | + Dec | |
| 176 | + }, | |
| 177 | + data() { | |
| 178 | + return { | |
| 179 | + content: '', | |
| 180 | + active: 1, | |
| 181 | + show: true, | |
| 182 | + studentdialog: false, | |
| 183 | + importdialog: false, | |
| 184 | + lengthof: [ | |
| 185 | + { label: '小学', value: '1' }, | |
| 186 | + { label: '中学', value: '2' }, | |
| 187 | + { label: '大学', value: '3' } | |
| 188 | + ], | |
| 189 | + grade: [ | |
| 190 | + { label: '一年级', value: '1' }, | |
| 191 | + { label: '二年级', value: '2' }, | |
| 192 | + { label: '三年级', value: '3' }, | |
| 193 | + { label: '四年级', value: '4' } | |
| 194 | + ], | |
| 195 | + tutor: [ | |
| 196 | + { label: '李老师', value: '1' }, | |
| 197 | + { label: '张老师', value: '2' } | |
| 198 | + ], | |
| 199 | + subjectTeacher: [ | |
| 200 | + { label: '数学老师', value: '1' }, | |
| 201 | + { label: '语文老师', value: '2' }, | |
| 202 | + { label: '英文老师', value: '3' } | |
| 203 | + ], | |
| 204 | + state: [ | |
| 205 | + { label: '在读启用', value: '1' }, | |
| 206 | + { label: '在读禁用', value: '2' }, | |
| 207 | + { label: '已毕业', value: '3' } | |
| 208 | + ], | |
| 209 | + classes: { | |
| 210 | + name: '', | |
| 211 | + lengthof: '', | |
| 212 | + grade: '', | |
| 213 | + tutor: '', | |
| 214 | + subjectTeacher: '', | |
| 215 | + state: '' | |
| 216 | + | |
| 217 | + }, | |
| 218 | + tableData: [ | |
| 219 | + { no: '0', name: '张三', sex: '男', number: '0001', keybord: '20200101' }, | |
| 220 | + { no: '1', name: '李四', sex: '男', number: '0002', keybord: '20200102' }, | |
| 221 | + { no: '2', name: '王五', sex: '男', number: '0003', keybord: '20200103' } | |
| 222 | + ], | |
| 223 | + student: { | |
| 224 | + name: '', | |
| 225 | + sex: '', | |
| 226 | + number: '', | |
| 227 | + keybord: '' | |
| 228 | + } | |
| 229 | + | |
| 230 | + } | |
| 231 | + }, | |
| 232 | + methods: { | |
| 233 | + next() { | |
| 234 | + this.active = 2 | |
| 235 | + }, | |
| 236 | + close() { | |
| 237 | + this.$router.push('/classes/classes') | |
| 238 | + }, | |
| 239 | + prev() { | |
| 240 | + this.active = 1 | |
| 241 | + }, | |
| 242 | + save() { | |
| 243 | + this.$router.push('/classes/classes') | |
| 244 | + }, | |
| 245 | + getdata(data) { | |
| 246 | + console.log(data) | |
| 247 | + }, | |
| 248 | + handleRemove(file, fileList) { | |
| 249 | + console.log(file, fileList) | |
| 250 | + }, | |
| 251 | + handlePreview(file) { | |
| 252 | + console.log(file) | |
| 253 | + }, | |
| 254 | + handleExceed(files, fileList) { | |
| 255 | + this.$message.warning(`当前限制选择 1 个文件`) | |
| 256 | + }, | |
| 257 | + beforeRemove(file, fileList) { | |
| 258 | + return this.$confirm(`确定移除 ${file.name}？`) | |
| 259 | + } | |
| 260 | + | |
| 261 | + } | |
| 262 | +} | |
| 263 | +</script> | |
| 264 | +<style scoped> | |
| 265 | +.add{ | |
| 266 | + max-width: 1100px; | |
| 267 | + height:calc(100vh - 115px); | |
| 268 | + margin:0 auto; | |
| 269 | + background: #fff; | |
| 270 | + margin-top:15px; | |
| 271 | + padding:20px; | |
| 272 | + font-size: 14px; | |
| 273 | + position: relative; | |
| 274 | +} | |
| 275 | +.add p{ | |
| 276 | + line-height: 40px; | |
| 277 | + margin:0; | |
| 278 | +} | |
| 279 | +.add .footer{ | |
| 280 | + width:100%; | |
| 281 | + height:40px; | |
| 282 | + line-height: 40px; | |
| 283 | + text-align: center; | |
| 284 | + position: absolute; | |
| 285 | + bottom:10px; | |
| 286 | + left:0; | |
| 287 | + background: #fff; | |
| 288 | + | |
| 289 | +} | |
| 290 | +.el-tag{ | |
| 291 | + margin-right:5px; | |
| 292 | +} | |
| 293 | +.btn-group{ | |
| 294 | + margin-top:30px; | |
| 295 | +} | |
| 296 | +</style> | ... | ... |
src/views/classes/classes/page/detail.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <div> | |
| 3 | + <Dec :content="content" /> | |
| 4 | + <div class="classDetail"> | |
| 5 | + <p class="footer"><el-button type="primary" @click="$router.push('/classes/classes')">返回</el-button></p> | |
| 6 | + <div style="height:calc(100% - 40px);overflow:auto;"> | |
| 7 | + <p>班级名称：一年级八班</p> | |
| 8 | + <p>选择学制：小学</p> | |
| 9 | + <p>选择年级：一年级</p> | |
| 10 | + <p>入学年份：2020年09月</p> | |
| 11 | + <p>班主任：<el-tag>蔡徐坤</el-tag></p> | |
| 12 | + <p>任课老师：<el-tag>周杰伦</el-tag><el-tag>蔡依林</el-tag></p> | |
| 13 | + <p>班级名单：</p> | |
| 14 | + <p style="text-align:right;padding-right:10px;"> | |
| 15 | + <el-button type="primary" size="small">导出名单</el-button> | |
| 16 | + </p> | |
| 17 | + <el-table | |
| 18 | + :data="tableData" | |
| 19 | + style="width: 100%" | |
| 20 | + > | |
| 21 | + <el-table-column | |
| 22 | + prop="no" | |
| 23 | + label="序号" | |
| 24 | + width="180" | |
| 25 | + /> | |
| 26 | + <el-table-column | |
| 27 | + prop="name" | |
| 28 | + label="姓名" | |
| 29 | + width="180" | |
| 30 | + /> | |
| 31 | + <el-table-column | |
| 32 | + prop="sex" | |
| 33 | + label="性别" | |
| 34 | + width="180" | |
| 35 | + /> | |
| 36 | + <el-table-column | |
| 37 | + prop="number" | |
| 38 | + label="学号" | |
| 39 | + width="180" | |
| 40 | + /> | |
| 41 | + <el-table-column | |
| 42 | + prop="keybord" | |
| 43 | + label="键盘ID" | |
| 44 | + /> | |
| 45 | + </el-table> | |
| 46 | + </div> | |
| 47 | + </div> | |
| 48 | + </div> | |
| 49 | +</template> | |
| 50 | +<script> | |
| 51 | +import Dec from '@/components/Dec' | |
| 52 | +export default { | |
| 53 | + name: 'Detail', | |
| 54 | + components: { | |
| 55 | + Dec | |
| 56 | + }, | |
| 57 | + data() { | |
| 58 | + return { | |
| 59 | + content: '', | |
| 60 | + tableData: [{ | |
| 61 | + no: 1, | |
| 62 | + name: '张三', | |
| 63 | + sex: '男', | |
| 64 | + number: '1001', | |
| 65 | + keybord: '20200203' | |
| 66 | + }, { | |
| 67 | + no: 2, | |
| 68 | + name: '张三', | |
| 69 | + sex: '男', | |
| 70 | + number: '1002', | |
| 71 | + keybord: '20200204' | |
| 72 | + }, { | |
| 73 | + no: 3, | |
| 74 | + name: '张三', | |
| 75 | + sex: '男', | |
| 76 | + number: '1003', | |
| 77 | + keybord: '20200205' | |
| 78 | + }, { | |
| 79 | + no: 4, | |
| 80 | + name: '张三', | |
| 81 | + sex: '男', | |
| 82 | + number: '1004', | |
| 83 | + keybord: '20200206' | |
| 84 | + }, | |
| 85 | + { | |
| 86 | + no: 4, | |
| 87 | + name: '张三', | |
| 88 | + sex: '男', | |
| 89 | + number: '1004', | |
| 90 | + keybord: '20200206' | |
| 91 | + }, | |
| 92 | + { | |
| 93 | + no: 4, | |
| 94 | + name: '张三', | |
| 95 | + sex: '男', | |
| 96 | + number: '1004', | |
| 97 | + keybord: '20200206' | |
| 98 | + }, | |
| 99 | + { | |
| 100 | + no: 4, | |
| 101 | + name: '张三', | |
| 102 | + sex: '男', | |
| 103 | + number: '1004', | |
| 104 | + keybord: '20200206' | |
| 105 | + }, | |
| 106 | + { | |
| 107 | + no: 4, | |
| 108 | + name: '张三', | |
| 109 | + sex: '男', | |
| 110 | + number: '1004', | |
| 111 | + keybord: '20200206' | |
| 112 | + }] | |
| 113 | + | |
| 114 | + } | |
| 115 | + }, | |
| 116 | + methods: { | |
| 117 | + } | |
| 118 | +} | |
| 119 | +</script> | |
| 120 | +<style scoped> | |
| 121 | +.classDetail{ | |
| 122 | + max-width: 1100px; | |
| 123 | + height:calc(100vh - 115px); | |
| 124 | + margin:0 auto; | |
| 125 | + background: #fff; | |
| 126 | + margin-top:15px; | |
| 127 | + padding:20px; | |
| 128 | + font-size: 14px; | |
| 129 | + position: relative; | |
| 130 | +} | |
| 131 | +.classDetail p{ | |
| 132 | + line-height: 40px; | |
| 133 | + margin:0; | |
| 134 | +} | |
| 135 | +.classDetail .footer{ | |
| 136 | + width:100%; | |
| 137 | + height:40px; | |
| 138 | + line-height: 40px; | |
| 139 | + text-align: center; | |
| 140 | + position: absolute; | |
| 141 | + bottom:10px; | |
| 142 | + left:0; | |
| 143 | + background: #fff; | |
| 144 | + | |
| 145 | +} | |
| 146 | +.el-tag{ | |
| 147 | + margin-right:5px; | |
| 148 | +} | |
| 149 | +</style> | ... | ... |