26--学生签到管理员页面功能（5） foreach

<template><div><div class="top"><i @click="back" class="cubeic-back"></i><span>签到码:{{yzm}}</span><cube-button v-if="isFinised" :disabled="!isFinised" :primary='true' :outline='true' :inline='true' @click="select">{{select_text}}</cube-button><cube-button v-else :primary='true' :outline='true' :inline='true' @click="qiandao_finish">停止签到</cube-button></div><div class="group" style="border-bottom: 1px solid #555;"><div class="title"><h3>缺勤列表</h3><span>{{queqin_count}}人</span></div><cube-checkbox-group v-model="checkList"><div v-for="item in queqin" class="item"><div class="student"><span>{{item.name}}</span><span>{{item.number}}</span></div><span>{{item.state}}</span><cube-checkbox :class={hide:!isSelect} :option="item"></cube-checkbox></div></cube-checkbox-group></div><div class="group"><div class="title"><h3>出勤列表</h3><span>{{chuqin_count}}人</span></div><cube-checkbox-group v-model="checkList"><div v-for="item in chuqin" class="item"><div class="student"><span>{{item.name}}</span><span>{{item.number}}</span></div><!-- <span>{{}}</span> --><cube-checkbox :class={hide:!isSelect} :option="item"></cube-checkbox></div></cube-checkbox-group></div><template v-if="isFinised && showButton"><cube-button class="bottom-btn" :primary="true" v-if="showSave" @click="save">保存</cube-button><cube-button class="bottom-btn" :primary="true" v-else @click="showMenu">设置考勤状态</cube-button></template></div>
</template>
<script>import {timestampToHis,} from '../../../common.js'export default {data() {return {yzm: '', //验证码isFinised: false, //是否停止签到showButton: true, //是否显示底部的buttontimer: null, //定时器，定时读取签到记录isSelect: false, //切换多选和退出多选checkList: [], //选中的项students: [], //学生列表menu: '' //菜单}},computed: {showSave: function() {return this.checkList.length == 0},disabled: function() {return this.checkList.length == 0},select_text: function() {return this.isSelect ? '取消' : '多选'},// 出勤名单chuqin: function() {//   return this.students .filter(item =>item.stateid ==1)let arr = []this.students.forEach(item => {if (item.stateid == 1) {arr.push(item)}})return arr},// 出勤人数chuqin_count: function() {return this.chuqin.length},queqin: function() {return this.students.filter(item => item.stateid != 1)},// 缺勤人数queqin_count: function() {return this.queqin.length}},mounted() {let ccid = sessionStorage.getItem('ccid')//获取签到状态this.$request({url: '/classmanager.qiandao/state',method: 'post',data: {token: sessionStorage.getItem('token')}}).then(res => {res.forEach(item => {item['content'] = item.state})this.menu = res}).catch(res => {})this.$request({url: '/classmanager.student/index',method: 'post',data: {token: sessionStorage.getItem('token'),ccid: sessionStorage.getItem('ccid')}}).then(res => {this.yzm = res.yzmres.students.forEach(stu => {stu['label'] = '',stu['value'] = stu.number,stu['stateid'] = 2,stu['state'] = '缺勤',stu['score'] = -20})this.students = res.studentsthis.read_qiandao();})},methods: {select() {this.checkList = []this.isSelect = !this.isSelect},qiandao_finish() {this.$createDialog({type: 'confirm',title: '提示',content: '是否结束学生签到',icon: 'cubeic-alert',onConfirm: () => {this.$request({method: 'post',url: '/classmanager.student/finish',data:{token: sessionStorage.getItem('token'),ccid: sessionStorage.getItem('ccid')}}).then(res => {clearInterval(this.timer)this.isFinised=true}).catch(res=>{})}}).show()},//读取学生签到read_qiandao(){clearInterval(this.timer)this.timer = setInterval(() => {this.$request({url: '/classmanager.student/read',method: 'post',data: {token: sessionStorage.getItem('token'),ccid: sessionStorage.getItem('ccid')}}).then(res=>{if(res.length == 0){this.$createToast({time:1000,txt:'签到结束'}).show()clearInterval(this.timer)this.isFinised = truereturn}this.students.forEach(stu =>{let number = stu.numberif(res[number]){stu.stateid=1,stu.state='出勤',stu.score=20,stu.time = timestampToHis(parseInt(res[number]))}})}).catch(res => {clearInterval(this.timer)})},5000)},save(){this.$createDialog({type: 'confirm',title: '提示',content: '是否保存本次签到结果',onConfirm: () => {// console.log(this.students)let data = {token: sessionStorage.getItem('token'),ccid: sessionStorage.getItem('ccid'), //班课idstudents: JSON.stringify(this.students) //转换字符串 ，json字符串，整体// json.stringfy()将对象、数组转换成字符串；json.parse()将字符串转成json对象。 }this.$request({url: 'classmanager.qiandao/save',method: 'post',data: data}).then(res => {this.$createToast({time: 1000,txt: res.message,onTimeout: () => {this.$router.go(-1)}}).show()}).catch(res => {})},onCancel: () => {this.$router.back()}}).show()},back: function() {this.$createDialog({type: 'confirm',title: '提示',content: '尚未保存，是否放弃？',confirmBtn:{text:'放弃',active:false},cancelBtn:{text:'不放弃',active:true},onConfirm:()=>{clearInterval(this.timer)this.isFinised=truethis.$router.back()},onCancel:()=>{}}).show()// this.$router.go(-1)},select: function() {this.checkList = []this.isSelect = !this.isSelect},showMenu: function() {this.showButton = falsethis.$createActionSheet({data: this.menu,onSelect: (item, index) => {// console.log(index)console.log(this.checkList)this.students.forEach(stu => {//当前学生在不在这个列表里，不改所有学生，改一些学生，返回一个索引号，在的话是//0,1,2,3，不在的话就是-1，不改变状态，影响计算属性if (this.checkList.indexOf(stu.number) > -1) {stu.stateid = item.idstu.state = item.state,stu.score = item.value}})this.checkList = [] //清空选中项this.isSelect = falsethis.showButton = true},onCancel: () => {this.showButton = true}}).show()},}}
</script><style scoped>.page {font-size: 18px;/* font-family: '宋体'; */}.top {display: flex;justify-content: space-between;height: 50px;padding: 10px 10px;align-items: center;background-color: #fff;}.student span {padding-top: 5px;}.bottom-btn {width: 100%;height: 50px;background-color: #eaeaea;position: fixed;bottom: 0;z-index: 999;color: #007400;font-size: 18px;border: 0;}.disabled {color: #aaa;}.group:first-of-type {border-bottom: 1px solid #f00;}.group .title {height: 40px;background-color: #eaeaea;padding: 0 10px;display: flex;justify-content: space-between;align-items: center;}.item {display: flex;height: 50px;justify-content: space-between;align-items: center;padding: 6px 9px 6px 12px;height: 55px;position: relative;}.item .student {flex-grow: 1;display: flex;flex-direction: column;height: 80%;justify-content: space-around;}.item:nth-last-child(n+2)::after {content: '';display: block;position: absolute;left: 0px;right: 0px;bottom: 0;border-bottom: 1px solid #ccc;}.hide {display: none;}
</style>

26--学生签到管理员页面功能（5） foreach相关推荐

基于JAVA+SpringMVC+Mybatis+MYSQL的学生签到管理系统
系统功能: 系统包括管理员登录,发起考勤,生成学生账号,查询打卡记录,用户请假审批,班级管理,学生登录,学生签到打卡,申请休假,退出登录等功能页面展示:
关于美食商城HTML网页设计-----在线美食订餐网站html模板源码30个页面(功能齐全) html+css+javascript网页设计实例企业网站制作...
关于美食商城HTML网页设计-----在线美食订餐网站html模板源码30个页面(功能齐全) html+css+javascript网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课 ...
java 刷新界面_利用java如何实现在删除信息后刷新页面功能
利用java如何实现在删除信息后刷新页面功能发布时间:2020-11-17 14:25:49 来源:亿速云阅读:74 作者:Leah 这篇文章给大家介绍利用java如何实现在删除信息后刷新页面功能 ...
python面向对象实现简易银行管理员页面系统
'''银行管理员页面系统设计:card 类: cardId password moneyuser 类: username phone id cards[]银行的工作人员: 账号密码登录展现管理系 ...
jsp+servlet+mysql实现的学生签到考勤请假管理系统源码+教程
今天给大家演示一下由jsp servlet mysql实现的一款学生签到管理系统,系统主要分管理员.学生.辅导员.教师等角色登录,实现学生发起请假.教师辅导员审批等动作,该项目不仅源码完整,还带有完整 ...
python京东自动签到_利用python Selenium实现自动登陆京东签到领金币功能
如何自动登陆京东? 我们先来看一下京东的登陆页面,如下图所示: [插入图片,登陆页面] 登陆框就是右面这一个框框了,但是目前我们遇到一个困呐,默认的登陆方式是扫码登陆,如果我们想要以用户民个.密码的形 ...
学生签到系统c代码_学生考勤系统源代码
- 1 - 学生考勤系统源代码 void lace(int n) /* 花边函数 */ { int i; for(i=0;i { putchar('*'); /* 输出 n 个 **/ } } ...
图书管理系统之普通用户、超级管理员页面布局（四）
图书管理系统之普通用户.超级管理员页面布局(四) 相关源码下载连接:https://download.csdn.net/download/baidu_39378193/85033291 前言: 在上一 ...
页面显示格式化的时间、倒计时效果、学成在线案例（创建、添加节点）、学生信息表（重点）、5秒钟之后跳转页面（location.href应用）、学生信息表(页面刷新数据不丢失)（重点）——API练习案例
目录 1. 页面显示格式化的时间 2. 倒计时效果 3. 学成在线案例(创建节点.添加节点) 4.学生信息表案例(重点) 5. 5秒钟之后跳转页面(location.href的应用) 6. 学生信息表 ...
SpringBoot个人博客项目搭建—前端页面功能介绍（一）
SpringBoot个人博客-前端页面功能介绍(一) 项目首页地址:https://blog.csdn.net/weixin_45019350/article/details/108869025 一. ...

26--学生签到管理员页面功能（5） foreach

26--学生签到管理员页面功能（5） foreach相关推荐

最新文章

热门文章

26--学生签到 管理员页面功能（5） foreach

26--学生签到 管理员页面功能（5） foreach相关推荐

最新文章

热门文章

26--学生签到管理员页面功能（5） foreach

26--学生签到管理员页面功能（5） foreach相关推荐