|
|
@@ -1,201 +1,227 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <!-- <el-alert :title="msg"
|
|
|
- type="warning">
|
|
|
- </el-alert> -->
|
|
|
- <div class="workTitle">作业内容: <span>{{content}}</span> </div>
|
|
|
- <el-form :inline="true"
|
|
|
- class="workForm"
|
|
|
- style="padding: 0 25px">
|
|
|
+ <!-- <el-alert
|
|
|
+ type="info"
|
|
|
+ :closable="false"
|
|
|
+ :description="content">
|
|
|
+ </el-alert> -->
|
|
|
+ <div class="workTitle">
|
|
|
+ 作业标题 : <span> {{ content }}</span>
|
|
|
+ </div>
|
|
|
+ <el-form :inline="true" class="workForm" style="padding: 0 25px">
|
|
|
<el-form-item label="应交学生数">
|
|
|
<!-- <el-input disabled
|
|
|
:value="studentNum"></el-input>-->
|
|
|
- <div class="inputStyle">{{ studentNum}}</div>
|
|
|
+ <div class="inputStyle">{{ studentNum }}</div>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="已交学生数">
|
|
|
<!-- <el-input disabled
|
|
|
:value="homeworkNum"></el-input>-->
|
|
|
- <div class="inputStyle">{{ homeworkNum}}</div>
|
|
|
+ <div class="inputStyle">{{ homeworkNum }}</div>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="已回复数">
|
|
|
<!-- <el-input disabled
|
|
|
:value="repliedNum"></el-input>-->
|
|
|
- <div class="inputStyle">{{ repliedNum}}</div>
|
|
|
+ <div class="inputStyle">{{ repliedNum }}</div>
|
|
|
</el-form-item>
|
|
|
-
|
|
|
</el-form>
|
|
|
|
|
|
<div class="tableWrap">
|
|
|
- <el-table :data="tableList"
|
|
|
- :header-cell-style="{background:'#EDEEF0',color:'#444'}">
|
|
|
- <el-table-column align="center"
|
|
|
- prop="studentName"
|
|
|
- width="160"
|
|
|
- label="学生姓名">
|
|
|
+ <el-table
|
|
|
+ :data="tableList"
|
|
|
+ :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="studentName"
|
|
|
+ width="160"
|
|
|
+ label="学生姓名"
|
|
|
+ >
|
|
|
<template slot-scope="scope">
|
|
|
<div>
|
|
|
- {{scope.row.studentName}}({{scope.row.studentId}})
|
|
|
+ {{ scope.row.studentName }}
|
|
|
+ <span style="color: #f56c6c">({{ scope.row.studentId }})</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<!-- <el-table-column align="center"
|
|
|
prop="studentId"
|
|
|
label="学生编号"></el-table-column> -->
|
|
|
- <el-table-column align="center"
|
|
|
- prop="phone"
|
|
|
- label="手机号"
|
|
|
- width="120"></el-table-column>
|
|
|
- <el-table-column align="center"
|
|
|
- prop="subjectNames"
|
|
|
- label="声部名称"></el-table-column>
|
|
|
- <el-table-column align="center"
|
|
|
- prop="createTime"
|
|
|
- width="150"
|
|
|
- label="交作业时间">
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="phone"
|
|
|
+ label="手机号"
|
|
|
+ width="120"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="subjectNames"
|
|
|
+ label="声部名称"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="createTime"
|
|
|
+ width="150"
|
|
|
+ label="交作业时间"
|
|
|
+ >
|
|
|
<template slot-scope="scope">
|
|
|
- <div>{{ scope.row.createTime | dateForMinFormat}}</div>
|
|
|
+ <div>{{ scope.row.createTime | dateForMinFormat }}</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column align="center"
|
|
|
- prop="isView"
|
|
|
- label="是否提交">
|
|
|
+ <el-table-column align="center" prop="isView" label="是否提交">
|
|
|
<template slot-scope="scope">
|
|
|
- <div>{{ scope.row.createTime? '是' : '否' }}</div>
|
|
|
+ <div>{{ scope.row.createTime ? "是" : "否" }}</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column align="center"
|
|
|
- prop="isView"
|
|
|
- label="是否查看">
|
|
|
+ <el-table-column align="center" prop="isView" label="是否查看">
|
|
|
<template slot-scope="scope">
|
|
|
- <div>{{ scope.row.isView ? '是' : '否' }}</div>
|
|
|
+ <div>{{ scope.row.isView ? "是" : "否" }}</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column align="center"
|
|
|
- prop="isReplied"
|
|
|
- label="是否回复">
|
|
|
+ <el-table-column align="center" prop="isReplied" label="是否回复">
|
|
|
<template slot-scope="scope">
|
|
|
- <div>{{ scope.row.isReplied ? '是' : '否' }}</div>
|
|
|
+ <div>{{ scope.row.isReplied ? "是" : "否" }}</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column align="center"
|
|
|
- label="查看作业"
|
|
|
- width="100px">
|
|
|
+ <el-table-column align="center" label="查看作业" width="100px">
|
|
|
<template slot-scope="scope">
|
|
|
<div>
|
|
|
<!-- -->
|
|
|
- <el-button type="text"
|
|
|
- v-if="scope.row.urlList"
|
|
|
- :disabled='!scope.row.createTime'
|
|
|
- @click="lookWork(scope.row)">查看作业</el-button>
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ v-if="scope.row.urlList && scope.row.createTime"
|
|
|
+ @click="lookWork(scope.row)"
|
|
|
+ >查看作业</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
- <pagination :total="rules.total"
|
|
|
- :page.sync="rules.page"
|
|
|
- :limit.sync="rules.limit"
|
|
|
- @pagination="getList" />
|
|
|
+ <pagination
|
|
|
+ :total="rules.total"
|
|
|
+ :page.sync="rules.page"
|
|
|
+ :limit.sync="rules.limit"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <el-dialog title="查看作业"
|
|
|
- @close="closeWorkVisible"
|
|
|
- width="940px"
|
|
|
- append-to-body
|
|
|
- :visible.sync="workVisible">
|
|
|
+ <el-dialog
|
|
|
+ title="查看作业"
|
|
|
+ @close="closeWorkVisible"
|
|
|
+ width="940px"
|
|
|
+ append-to-body
|
|
|
+ :visible.sync="workVisible"
|
|
|
+ >
|
|
|
<!-- activeUrl -->
|
|
|
<div class="sliderWrap" v-if="workVisible">
|
|
|
<div class="swiperWrap">
|
|
|
- <swiper ref="mySwiper"
|
|
|
- :options="swiperOptions"
|
|
|
- v-if="activeRow">
|
|
|
- <swiper-slide v-for="
|
|
|
- (item,index)
|
|
|
- in
|
|
|
- activeRow.urlList"
|
|
|
- :key="index">
|
|
|
-
|
|
|
- <video style="width:480px;"
|
|
|
- :src="item"
|
|
|
- ref="dialogVideo"
|
|
|
- controls="controls">您的浏览器不支持视频播放</video>
|
|
|
-
|
|
|
+ <swiper ref="mySwiper" :options="swiperOptions" v-if="activeRow">
|
|
|
+ <swiper-slide
|
|
|
+ v-for="(item, index) in activeRow.urlList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <video
|
|
|
+ style="width: 480px"
|
|
|
+ :src="item"
|
|
|
+ ref="dialogVideo"
|
|
|
+ controls="controls"
|
|
|
+ >
|
|
|
+ 您的浏览器不支持视频播放
|
|
|
+ </video>
|
|
|
</swiper-slide>
|
|
|
- <div class="swiper-pagination"
|
|
|
- slot="pagination"></div>
|
|
|
- <div class="swiper-button-prev swiper-button-white"
|
|
|
- @click="prev"
|
|
|
- slot="button-prev"></div>
|
|
|
- <div class="swiper-button-next swiper-button-white"
|
|
|
- @click="next"
|
|
|
- slot="button-next"></div>
|
|
|
+ <div class="swiper-pagination" slot="pagination"></div>
|
|
|
+ <div
|
|
|
+ class="swiper-button-prev swiper-button-white"
|
|
|
+ @click="prev"
|
|
|
+ slot="button-prev"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ class="swiper-button-next swiper-button-white"
|
|
|
+ @click="next"
|
|
|
+ slot="button-next"
|
|
|
+ ></div>
|
|
|
</swiper>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <p class="workContainer">作业回复内容:</p>
|
|
|
- <div class="msgWrap">
|
|
|
-
|
|
|
- <div :class="activeCommit.length>0?'':'flex'">
|
|
|
- <div v-if="activeCommit.length>0"
|
|
|
- class="msgLi"
|
|
|
- v-for='(msg,index) in activeCommit'
|
|
|
- :key="index">
|
|
|
- <div class="info">
|
|
|
- <p>{{msg.userName}}</p>
|
|
|
- <p style="color:#999"
|
|
|
- v-if="msg.createTime">{{msg.createTime | dateForMinFormat}}</p>
|
|
|
- </div>
|
|
|
- <p class="contant"
|
|
|
- v-if='msg.msgType=="TXT"'>{{msg.content}}</p>
|
|
|
- <el-image style="width: 100px; height: 100px"
|
|
|
- fit='cover'
|
|
|
- v-if='msg.msgType=="IMG"'
|
|
|
- :src="msg.content"
|
|
|
- :preview-src-list="[msg.content]">
|
|
|
- </el-image>
|
|
|
+ <p class="workContainer">作业回复内容:</p>
|
|
|
+ <div class="msgWrap">
|
|
|
+ <div
|
|
|
+ :class="activeCommit.length > 0 ? '' : 'flex'"
|
|
|
+ v-if="activeCommit.length > 0"
|
|
|
+ >
|
|
|
+ <messageBox v-for="(msg, index) in activeCommit" :key="index" :item="msg"/>
|
|
|
+ <!-- <div
|
|
|
+ class="msgLi"
|
|
|
+ v-for="(msg, index) in activeCommit"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="info">
|
|
|
+ <p>{{ msg.userName }}</p>
|
|
|
+ <p style="color: #999" v-if="msg.createTime">
|
|
|
+ {{ msg.createTime | dateForMinFormat }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <p class="contant" v-if="msg.msgType == 'TXT'">
|
|
|
+ {{ msg.content }}
|
|
|
+ </p>
|
|
|
+ <el-image
|
|
|
+ style="width: 100px; height: 100px"
|
|
|
+ fit="cover"
|
|
|
+ v-if="msg.msgType == 'IMG'"
|
|
|
+ :src="msg.content"
|
|
|
+ :preview-src-list="[msg.content]"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
|
|
|
- <audio id='audio'
|
|
|
- v-if='msg.msgType=="VC"'
|
|
|
- controls
|
|
|
- :src="msg.content"
|
|
|
- ref="dialogVideo">您的浏览器不支持音频播放</audio>
|
|
|
+ <audio
|
|
|
+ id="audio"
|
|
|
+ v-if="msg.msgType == 'VC'"
|
|
|
+ controls
|
|
|
+ :src="msg.content"
|
|
|
+ ref="dialogVideo"
|
|
|
+ >
|
|
|
+ 您的浏览器不支持音频播放
|
|
|
+ </audio>
|
|
|
+ </div> -->
|
|
|
+ <p class="nomore" v-if="activeCommit.length <= 0">暂无回复内容</p>
|
|
|
</div>
|
|
|
- <p class="nomore"
|
|
|
- v-if="activeCommit.length<=0">暂无回复内容</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
|
|
|
+import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
|
|
|
|
|
|
// import style (>= Swiper 6.x)
|
|
|
-import 'swiper/swiper-bundle.css'
|
|
|
+import "swiper/swiper-bundle.css";
|
|
|
import pagination from "@/components/Pagination/index";
|
|
|
import {
|
|
|
findStudentCourseHomeworks,
|
|
|
sumStudentAttendance,
|
|
|
- getCourseScheduleHomework
|
|
|
+ getCourseScheduleHomework,
|
|
|
} from "@/api/buildTeam";
|
|
|
import { findStudentHomeworkComments } from "@/api/operateManager";
|
|
|
+import messageBox from "./message-box";
|
|
|
export default {
|
|
|
props: ["courseScheduleId"],
|
|
|
components: {
|
|
|
- pagination, Swiper,
|
|
|
- SwiperSlide
|
|
|
+ pagination,
|
|
|
+ Swiper,
|
|
|
+ SwiperSlide,
|
|
|
+ messageBox,
|
|
|
},
|
|
|
directives: {
|
|
|
- swiper: directive
|
|
|
+ swiper: directive,
|
|
|
},
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
tableList: [],
|
|
|
rules: {
|
|
|
// 分页规则
|
|
|
limit: 10, // 限制显示条数
|
|
|
page: 1, // 当前页
|
|
|
- total: 0 // 总条数
|
|
|
+ total: 0, // 总条数
|
|
|
},
|
|
|
workVisible: false,
|
|
|
repliedVisible: false,
|
|
|
@@ -207,39 +233,39 @@ export default {
|
|
|
activeRow: null,
|
|
|
swiperOptions: {
|
|
|
loop: true,
|
|
|
- pagination: '.swiper-pagination',
|
|
|
+ pagination: ".swiper-pagination",
|
|
|
navigation: {
|
|
|
- nextEl: '.swiper-button-next',
|
|
|
- prevEl: '.swiper-button-prev'
|
|
|
+ nextEl: ".swiper-button-next",
|
|
|
+ prevEl: ".swiper-button-prev",
|
|
|
},
|
|
|
on: {
|
|
|
slideChange: () => {
|
|
|
- console.log(this.activeRow)
|
|
|
- }
|
|
|
- }
|
|
|
+ console.log(this.activeRow);
|
|
|
+ },
|
|
|
+ },
|
|
|
|
|
|
// Some Swiper option/callback...
|
|
|
},
|
|
|
- comUrl: '',
|
|
|
+ comUrl: "",
|
|
|
comVisible: false,
|
|
|
- activeCommit: []
|
|
|
+ activeCommit: [],
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
- swiper () {
|
|
|
- return this.$refs.mySwiper.$swiper
|
|
|
+ swiper() {
|
|
|
+ return this.$refs.mySwiper.$swiper;
|
|
|
},
|
|
|
},
|
|
|
- mounted () {
|
|
|
+ mounted() {
|
|
|
this.init();
|
|
|
},
|
|
|
- activated () {
|
|
|
+ activated() {
|
|
|
this.init();
|
|
|
},
|
|
|
methods: {
|
|
|
- init () {
|
|
|
+ init() {
|
|
|
sumStudentAttendance({ courseScheduleId: this.courseScheduleId }).then(
|
|
|
- res => {
|
|
|
+ (res) => {
|
|
|
if (res.code == 200) {
|
|
|
this.studentNum = res.data.studentNum;
|
|
|
this.homeworkNum = res.data.homeworkNum;
|
|
|
@@ -251,65 +277,73 @@ export default {
|
|
|
//
|
|
|
|
|
|
getCourseScheduleHomework({
|
|
|
- courseScheduleId: this.courseScheduleId
|
|
|
- }).then(res => {
|
|
|
+ courseScheduleId: this.courseScheduleId,
|
|
|
+ }).then((res) => {
|
|
|
if (res.code == 200) {
|
|
|
if (res.data) {
|
|
|
this.content = res.data.content;
|
|
|
}
|
|
|
- this.content ? this.content : (this.content = "还未布置作业");
|
|
|
+
|
|
|
+ this.content
|
|
|
+ ? this.content
|
|
|
+ : (this.content = "这是布置的作业XXXXXXX");
|
|
|
}
|
|
|
});
|
|
|
this.getList();
|
|
|
},
|
|
|
- getList () {
|
|
|
- findStudentCourseHomeworks({ search: this.courseScheduleId,rows:this.rules.limit,page:this.rules.page }).then(
|
|
|
- res => {
|
|
|
- if (res.code == 200) {
|
|
|
- this.rules.total = res.data.total;
|
|
|
- this.tableList = res.data.rows.map(item => {
|
|
|
- item.urlList = item.url ? item.url.split(",") : [];
|
|
|
- return item;
|
|
|
- });
|
|
|
- console.log(this.tableList)
|
|
|
- }
|
|
|
+ getList() {
|
|
|
+ findStudentCourseHomeworks({
|
|
|
+ search: this.courseScheduleId,
|
|
|
+ rows: this.rules.limit,
|
|
|
+ page: this.rules.page,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.rules.total = res.data.total;
|
|
|
+ this.tableList = res.data.rows.map((item) => {
|
|
|
+ item.urlList = item.url ? item.url.split(",") : [];
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ console.log(this.tableList);
|
|
|
}
|
|
|
- );
|
|
|
+ });
|
|
|
},
|
|
|
- lookWork (row) {
|
|
|
- this.activeRow = row
|
|
|
- findStudentHomeworkComments({ studentCourseHomeworkId: row.studentCourseHomeworkId, rows: 9999 }).then(res => {
|
|
|
+ lookWork(row) {
|
|
|
+ this.activeRow = row;
|
|
|
+ findStudentHomeworkComments({
|
|
|
+ studentCourseHomeworkId: row.studentCourseHomeworkId,
|
|
|
+ rows: 9999,
|
|
|
+ }).then((res) => {
|
|
|
if (res.code == 200) {
|
|
|
this.activeCommit = res.data.rows;
|
|
|
this.workVisible = true;
|
|
|
// item.up = false
|
|
|
}
|
|
|
- })
|
|
|
-
|
|
|
+ });
|
|
|
},
|
|
|
- closeWorkVisible () {
|
|
|
+ closeWorkVisible() {
|
|
|
this.activeUrl = "";
|
|
|
},
|
|
|
- prev (val) {
|
|
|
- this.swiper.slidePrev()
|
|
|
+ prev(val) {
|
|
|
+ this.swiper.slidePrev();
|
|
|
},
|
|
|
- next (val) {
|
|
|
- this.swiper.slideNext()
|
|
|
+ next(val) {
|
|
|
+ this.swiper.slideNext();
|
|
|
},
|
|
|
- lookReplied (row) {
|
|
|
+ lookReplied(row) {
|
|
|
// repliedVisible
|
|
|
},
|
|
|
- openAideo (src) {
|
|
|
+ openAideo(src) {
|
|
|
this.comUrl = src;
|
|
|
this.comVisible = true;
|
|
|
},
|
|
|
- }, watch: {
|
|
|
- courseScheduleId (val) {
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ courseScheduleId(val) {
|
|
|
if (val) {
|
|
|
- this.init()
|
|
|
+ this.init();
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -348,8 +382,10 @@ export default {
|
|
|
display: block;
|
|
|
}
|
|
|
width: 400px;
|
|
|
+ background-color: #efefef;
|
|
|
min-height: 300px;
|
|
|
- height: 100%;
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ overflow-y: auto;
|
|
|
border: 1px solid #e5e5e5;
|
|
|
padding: 5px 20px;
|
|
|
border-radius: 5px;
|
|
|
@@ -371,17 +407,20 @@ export default {
|
|
|
color: #666;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
- .workTitle {
|
|
|
- padding-left: 25px;
|
|
|
- color: #333;
|
|
|
- font-weight: bold;
|
|
|
-
|
|
|
+.workTitle {
|
|
|
+ padding-left: 25px;
|
|
|
+ color: #14928a;
|
|
|
+ font-weight: bold;
|
|
|
+ background-color: #f4f4f5;
|
|
|
+ line-height: 40px;
|
|
|
+ span {
|
|
|
+ color: #303133;
|
|
|
+ font-weight: normal;
|
|
|
}
|
|
|
- .workContainer {
|
|
|
- margin-bottom:20px ;
|
|
|
- }
|
|
|
-</style>
|
|
|
+}
|
|
|
+.workContainer {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+</style>
|
