finished activity result page and prepare to code teacher management.
parent
88b5421ce6
commit
ad4e5a1f96
@ -0,0 +1,330 @@
|
||||
<%--
|
||||
Created by IntelliJ IDEA.
|
||||
User: peteralbus
|
||||
Date: 2021/12/20
|
||||
Time: 22:03
|
||||
To change this template use File | Settings | File Templates.
|
||||
--%>
|
||||
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
|
||||
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>社会实践活动评分结果</title>
|
||||
<!-- 导入 Vue 3 -->
|
||||
<script src="${pageContext.request.contextPath}/vue/vue@next/vue.global.js"></script>
|
||||
<!-- 导入组件库 -->
|
||||
<script src="${pageContext.request.contextPath}/vue/element/index.full.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/vue/axios/axios.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/vue/qs.min.js"></script>
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/vue/font-awesome/css/font-awesome.css">
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/element-plus@1.1.0-beta.9/dist/index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<header>
|
||||
<%@ include file="/jsp/header.html" %>
|
||||
</header>
|
||||
<div class="main">
|
||||
<div class="container">
|
||||
<el-container>
|
||||
<el-aside width="80px">
|
||||
<%@ include file="/jsp/aside.html" %>
|
||||
</el-aside>
|
||||
<el-main>
|
||||
<el-page-header icon="el-icon-arrow-left" :content="title" @back="goBack"></el-page-header>
|
||||
<br/>
|
||||
<div class="container">
|
||||
<el-steps :active="4" finish-status="success" simple>
|
||||
<el-step title="申请参加" icon="el-icon-edit"></el-step>
|
||||
<el-step title="小组形成" icon="el-icon-s-custom"></el-step>
|
||||
<el-step title="上传日志" icon="el-icon-upload"></el-step>
|
||||
<el-step title="教师评分" icon="el-icon-picture"></el-step>
|
||||
</el-steps>
|
||||
<el-divider content-position="left" id="score">评分</el-divider>
|
||||
<div>
|
||||
<el-result
|
||||
icon="success"
|
||||
title="完成！"
|
||||
sub-title="恭喜你完成了社会实践活动！"
|
||||
>
|
||||
<template #extra>
|
||||
小组评分：<br/>
|
||||
个人评分：
|
||||
</template>
|
||||
</el-result>
|
||||
</div>
|
||||
<el-divider content-position="left">社会实践活动信息</el-divider>
|
||||
<div class="activity-info">
|
||||
<el-descriptions
|
||||
title="活动情况"
|
||||
:column="1"
|
||||
border
|
||||
>
|
||||
<template #extra>
|
||||
<el-link href="#record" type="primary">日志<i class="el-icon-arrow-down"></i></el-link> 
|
||||
<el-link href="#groupMember" type="primary">小组成员<i class="el-icon-arrow-down"></i></el-link>
|
||||
</template>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
活动名称
|
||||
</template>
|
||||
{{activity.activityName}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
活动类别
|
||||
</template>
|
||||
{{activity.activityType}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
活动人数
|
||||
</template>
|
||||
{{activity.minPeople}}-{{activity.maxPeople}}人
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
负责老师
|
||||
</template>
|
||||
<span v-for="i in activity.teachers">{{i.realName}} </span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
创建日期
|
||||
</template>
|
||||
{{activity.gmtCreate}}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions :column="1" border direction="vertical">
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
简介
|
||||
</template>
|
||||
{{activity.activityIntroduction}}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<el-divider content-position="left" id="record">日志</el-divider>
|
||||
<el-timeline>
|
||||
<el-timeline-item :timestamp="item.gmtCreate" placement="top" v-for="item in recordList">
|
||||
<el-card>
|
||||
<h4>{{item.recordTitle}}</h4>
|
||||
<p>{{item.recordContent}}</p>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
<el-divider content-position="left" id="groupMember">小组</el-divider>
|
||||
<div>
|
||||
<el-descriptions title="小组信息" border>
|
||||
<el-descriptions-item label="小组名">{{group.groupName}}</el-descriptions-item>
|
||||
<el-descriptions-item label="组长姓名">{{group.leaderName}}</el-descriptions-item>
|
||||
<el-descriptions-item label="已加入组员数">{{group.memberCount}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<h4>成员信息</h4>
|
||||
<el-table :data="memberList" style="width: 100%" stripe>
|
||||
<el-table-column prop="username" label="用户名"></el-table-column>
|
||||
<el-table-column prop="realName" label="姓名"></el-table-column>
|
||||
<el-table-column align="right" label="加入状态">
|
||||
<template #default="scope">
|
||||
<el-button size="mini" @click="accept(scope.row.participateId)" v-if="(!scope.row.isAccept)&&user.userId==group.leaderId">通过</el-button>
|
||||
<el-button size="mini" @click="refuse(scope.row.participateId)" v-if="(!scope.row.isAccept)&&user.userId==group.leaderId" type="danger">拒绝</el-button>
|
||||
<el-tag type="success" v-if="scope.row.isAccept">已通过</el-tag>
|
||||
<el-tag type="info" v-if="(!scope.row.isAccept)&&user.userId!=group.leaderId">审核中</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<%@ include file="/jsp/foot.html" %>
|
||||
</footer>
|
||||
</div>
|
||||
<script>
|
||||
const App = {
|
||||
data() {
|
||||
return{
|
||||
title:'社会实践活动管理',
|
||||
user:{
|
||||
username:'',
|
||||
realName:'',
|
||||
avatarSrc: '',
|
||||
userId:''
|
||||
},
|
||||
form:{
|
||||
participationId:'${participationId}',
|
||||
recordTitle:'',
|
||||
recordContent:''
|
||||
},
|
||||
recordList:[
|
||||
<c:forEach items="${recordList}" var="record">
|
||||
{
|
||||
recordTitle:'${record.getRecordTitle()}',
|
||||
recordContent:'${record.getRecordContent()}',
|
||||
gmtCreate:'${record.getFormattedCreateDate()}'
|
||||
},
|
||||
</c:forEach>
|
||||
],
|
||||
activity:{
|
||||
activityId: '${activity.getActivityId()}',
|
||||
activityName: '${activity.getActivityName()}',
|
||||
activityType:'${activity.getActivityType()}',
|
||||
activityIntroduction:'${activity.getActivityIntroduction()}',
|
||||
minPeople:'${activity.getMinPeople()}',
|
||||
maxPeople:'${activity.getMaxPeople()}',
|
||||
gmtCreate:'${activity.getFormattedCreateDate()}',
|
||||
teachers:[
|
||||
<c:forEach items="${activity.getTeacherList()}" var="teacher">
|
||||
{
|
||||
userId:'${teacher.getUserId()}',
|
||||
username:'${teacher.getUsername()}',
|
||||
realName:'${teacher.getRealName()}',
|
||||
userPhone:'${teacher.getUserPhone()}',
|
||||
avatarSrc:'${teacher.getAvatarSrc()}'
|
||||
},
|
||||
</c:forEach>
|
||||
]
|
||||
},
|
||||
group:{
|
||||
groupId:'${group.getGroupId()}',
|
||||
groupName:'${group.getGroupName()}',
|
||||
leaderId:'${group.getLeaderId()}',
|
||||
leaderName: '${group.getLeaderName()}',
|
||||
memberCount: '${group.getMemberCount()}'
|
||||
},
|
||||
memberList:[
|
||||
<c:forEach items="${memberList}" var="member">
|
||||
{
|
||||
participateId:'${member.getParticipationId()}',
|
||||
userId:'${member.getUserId()}',
|
||||
username:'${member.getUsername()}',
|
||||
realName:'${member.getRealName()}',
|
||||
isAccept:${member.getAccept()}
|
||||
},
|
||||
</c:forEach>
|
||||
],
|
||||
activeIndex:'3'
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.user.realName='${realName}'
|
||||
this.user.username='${username}'
|
||||
this.user.avatarSrc='${avatarSrc}'
|
||||
this.user.userId='${userId}'
|
||||
},
|
||||
methods: {
|
||||
goBack(){
|
||||
window.history.go(-1);
|
||||
},
|
||||
accept(id){
|
||||
this.$messageBox.confirm(
|
||||
'小组成员加入后，不可再抛弃了哦，确认通过申请？',
|
||||
'警告',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
axios({
|
||||
method: "get",
|
||||
url: "/student/acceptJoin?participateId="+id,
|
||||
})
|
||||
.then(res => {
|
||||
if(res.data==="success")
|
||||
{
|
||||
location.reload();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.$message.error("出现异常，通过失败")
|
||||
}
|
||||
})
|
||||
.catch(res=>{
|
||||
this.$message.error("出现异常，通过失败")
|
||||
})
|
||||
})
|
||||
},
|
||||
refuse(id){
|
||||
this.$messageBox.confirm(
|
||||
'确认要拒绝该同学的申请吗？',
|
||||
'警告',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
axios({
|
||||
method: "get",
|
||||
url: "/student/refuseJoin?participateId="+id,
|
||||
})
|
||||
.then(res => {
|
||||
if(res.data==="success")
|
||||
{
|
||||
location.reload();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.$message.error("出现异常，拒绝失败")
|
||||
}
|
||||
})
|
||||
.catch(res=>{
|
||||
this.$message.error("出现异常，拒绝失败")
|
||||
})
|
||||
})
|
||||
},
|
||||
submit(){
|
||||
this.$messageBox.confirm(
|
||||
'确认提交？',
|
||||
'信息',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'info',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
axios({
|
||||
method: "post",
|
||||
url: "/student/insertRecord",
|
||||
data: this.form,
|
||||
transformRequest: [ function(data){
|
||||
return Qs.stringify(data) //使用Qs将请求参数序列化
|
||||
}],
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded' //必须设置传输方式
|
||||
}
|
||||
})
|
||||
.then(res => {
|
||||
if(res.data==="success")
|
||||
{
|
||||
location.reload();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.$message.error("出现异常，提交失败")
|
||||
}
|
||||
})
|
||||
.catch(res=>{
|
||||
this.$message.error("出现异常，提交失败")
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
const app = Vue.createApp(App);
|
||||
app.use(ElementPlus);
|
||||
app.mount("#app");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue