目录
学生提交作业
已截止任务
ExsMsgMapper.xml:
选择截止日期小于等于此时此刻的任务
<select id="getAllExList" resultType="org.jeecg.modules.demo.ExMsg.entity.ExMsg">
select *
from ex_msg
where sid = #{sid} and isvisiable = "是" and #{deadline} > deadline
</select>ExMsgMapper:
List<ExMsg> getAllExList(@Param("sid") String sid,@Param("deadline") Date deadline);ExMsgServiceImpl:
@Override
public List<ExMsg> getAllExList(String sid, Date deadline) {
return this.baseMapper.getAllExList(sid,deadline);
}
ExMsgController:
@RequestMapping(value = "/getAllExList",method = RequestMethod.GET)
public Result<?> getAllExList(@RequestParam(name="sid",defaultValue = "1")String sid){
SysUser sysUser = iFlowThirdService.getLoginUser();
sid = sysUser.getUsername();
Date deadline = new Date(System.currentTimeMillis());
List<ExMsg> allList = exMsgService.getAllExList(sid,deadline);
return Result.ok(allList);
}将前端StuDoneList.vue url中list的设置为"/ExMsg/exMsg/getAllExList"，即可获取已截止任务
可直接点链接查看文件
实验老师批改作业
待批改作业
为了批改作业的便捷性，希望可以直接在表格上修改实验成绩，并且即时保存
所以需要使用JVXETable这个可以直接编辑并且能即时保存的表格
在最开始的复用时，我无法将表格中的数据直接传入表格中，后面查看了许久原因
原先的表格使用dataIndex:"数据库字段"将表格与数据库连接起来
而JVXETable则是使用key:"数据库字段"将表格与数据库连接，问题解决
ExGradesCorList.vue:
<!-- table区域-begin -->
<div>
<j-vxe-table
toolbar
:toolbarConfig="toolbarConfig"
ref="xTable"
drag-sort
:columns="columns"
:dataSource="dataSource"
:loading="loading"
:pagination="pagination"
:rowSelection="{selectedRowKeys: selectedRows, onChange: onSelectChange}"
@save="handleTableSave"
@pageChange="handlePageChange"
@edit-closed="handleEditSave"
@selectRowChange="handleSelectRowChange"
>
<!-- 每一个输入框变化时响应 @valueChange="handleEditClosed">-->
</j-vxe-table>
</div>在data()中设置表头，并且JVXETypes中储存着jvxetable中列的所有类型
JVXETypes.normal为不可改变的类型
JVXETypes.input为可输入的输入框
JVXETypes.hidden为隐藏列
JVXETypes.upload为上传文件类型
此处需要将不能修改的设为JVXETypes.normal，将"实验要求文件"和学生"上传作业"设置为JVXETypes.upload，再将"实验成绩"设置为JVXETypes.input
// 表头
columns: [
{
title: '#',
dataIndex: '',
key:'rowIndex',
width:60,
align:"center",
type: JVXETypes.hidden,
customRender:function (t,r,index) {
return parseInt(index)+1;
}
},
{
title:'课程名称',
align:"center",
width: '130px',
key: 'coursename',
type: JVXETypes.normal
},
{
title:'实验班级',
align:"center",
width: '130px',
key: 'courseclass',
type: JVXETypes.normal
},
{
title:'实验名称',
align:"center",
width: '130px',
key: 'experimentname',
type: JVXETypes.normal
},
{
title:'实验次数',
align:"center",
width: '130px',
key: 'extimes',
type: JVXETypes.normal
},
{
title:'学生id',
align:"center",
width: '130px',
key: 'sid',
type: JVXETypes.normal
},
{
title:'学生姓名',
align:"center",
width: '130px',
key: 'stuname',
type: JVXETypes.normal
},
{
title:'实验要求文件',
align:"center",
width: '230px',
key: 'filecontentString',
type:JVXETypes.upload,
},
{
title:'上传作业',
align:"center",
width: '230px',
key: 'homeworkString',
dataIndex: 'homeworkString',
type:JVXETypes.upload,
},
{
title:'实验截止日期',
align:"center",
width: '150px',
key: 'deadline',
dataIndex: 'deadline',
type: JVXETypes.normal,
},
{
title:'实验成绩',
align:"center",
width: '200px',
key: 'exscore',
dataIndex: 'exscore',
type: JVXETypes.inputNumber,
placeholder: '请输入实验成绩',
validateRules: [
{
// 自定义函数校验 handler
handler({cellValue, row, column}, callback, target) {
if (cellValue > 100 || cellValue < 0) {
callback(false, '实验成绩要在0-100之间') // false = 未通过，可以跟自定义提示
} else {
callback(true) // true = 通过验证
}
},
message: '${title}默认提示'
}
]
}
],JVXEType.upload:
JVxeUploadCell.vue:
修改了菜单内容，查看后可选择下载
<a-menu slot="overlay">
<!-- <a-menu-item @click="handleClickPreviewFile">-->
<!-- <span><a-icon type="eye"/> 预览</span>-->
<!-- </a-menu-item>-->
<a-menu-item v-if="originColumn.allowDownload !== false" @click="handleClickDownloadFile">
<span><a-icon type="message"/> 查看</span>
</a-menu-item>
<!-- <a-menu-item v-if="originColumn.allowRemove !== false" @click="handleClickDeleteFile">-->
<!-- <span><a-icon type="delete"/> 删除</span>-->
<!-- </a-menu-item>-->
</a-menu>handleClickDownloadFile(id) {
let path = this.value
if (path) {
let url = getFileAccessHttpUrl(path)
window.open(url)
}
},开始也想在JVxeTable中使用插槽数据JVXETypes.slot来展示文件连接，但是JVxeTable中无法在columns中使用scopedSlots: { customRender: 'action' }找到插槽
查询资料发现JVxeTable中使用slotName:"action"来查询数据，但是我试验时始终无法显示，所以放弃使用JVXETypes.upload
JVXEType.input:
"实验成绩"还需要设置validateRules属性，其中包括handler函数保证成绩在0-100之间，增强其健壮性
此表格即时刷新，在表格中设置@edit-closed = "handleEditSave"
当表格中每个输入组件edit-closed，调用此方法
首先用let{$table,row,column} = event;获取到表格中的数据，然后再获取到输入的"exscore"，再通过getAction()调用后端的"/ExMsg/exMsg/correctExScores"保存在数据库中
//每个输入框输入完成后，后台修改成绩
handleEditSave:function(event) {
let {$table, row, column} = event
let field = column.property
let id = row["id"];
let exscore = row["exscore"]
$table.validate(row).then((errMap) => {
// 校验通过
console.log("校验通过");
if (!errMap) {
getAction("/ExMsg/exMsg/correctExScores", {id:id,exscore:exscore}).then((res) => {
if (res.success) {
// 局部更新单元格为已保存状态
// this.type = row.columnIndex();
// this.$message.success("操作成功")
// this.loadData()
}
})
}
})
},ExMsgMapper.xml:
<update id="correctExScores">
update ex_msg
set exscore = #{exscore}
where id = #{id}
</update>ExMsgServiceImpl:
@Override
public void correctExScores(String id, String exscore) {
this.baseMapper.correctExScores(id,exscore);
}ExMsgCotroller:
@RequestMapping(value = "/correctExScores",method = RequestMethod.GET)
public Result<Object> deleteTask(@RequestParam(name = "id",required = true) String id,
@RequestParam(name = "exscore",required = true) String exscore){
exMsgService.correctExScores(id,exscore);
return Result.OK();
}这样教师可以直接输入，成功批改作业
发布作业
表格设置时设置row-selection属性
这样表格可以自由选择行数，选择的行数放在data()中的selectedRows中，选择行数改变时调用onSelectChange()方法
选择行数发布成绩，发布成绩按钮
<a-button type="primarry" icon="message" @click="setGradesVisiable">发布成绩</a-button>
用for循环，将选中的每一行插入到数据库中，url为"/ExMsg/exMsg/publishScore"
setGradesVisiable(){
for(let i = 0,len = this.selectedRows.length;i<len;i++){
let id = this.selectedRows[i].id;
console.log(id)
getAction("/ExMsg/exMsg/publishScore",{id:id}).then(res=>{
if(res.success){
this.loadData()
}else{
this.$message.error("发布失败" + res.message)
}
})
this.$message.success("发布成功")
}
}ExMsgMapper.xml:
<update id="publishScore">
update ex_msg
set scorevisiable = "是"
where id = #{id}
</update>ExMsgServiceImpl:
@Override
public void publishScore(String id) {
this.baseMapper.publishScore(id);
}
ExMsgController:
@RequestMapping(value = "/publishScore",method = RequestMethod.GET)
public Result<Object> deleteTask(@RequestParam(name = "id",required = true) String id){
exMsgService.publishScore(id);
return Result.OK();
}
发布成功后可以在已批改作业中查看
892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
