12/09 09:36

11

src/views/teamDetail/componentCourse/message-box.vue

@@ -45,6 +45,7 @@ export default {
         .content{
           color: #fff;
           background-color: #13817A;
+          text-align: right;
           &::before{
             border: 10px solid #13817A;
             border-top-color: transparent;

src/views/teamDetail/componentCourse/studentWork.vue

@@ -1,207 +1,224 @@
 <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">
+          <p class="workContainer">作业回复内容:</p>
+          <div class="msgWrap">
+            <div
+              :class="activeCommit.length > 0 ? '' : 'flex'"
+              v-if="activeCommit.length > 0"
+            >
+              <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>
 
-          <div :class="activeCommit.length>0?'':'flex'">
-            <message-box
-              v-for='(msg,index) in activeCommit'
-              :key="index"
-              :item="msg"
-            ></message-box>
-            <!-- <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>
+                <audio
+                  id="audio"
+                  v-if="msg.msgType == 'VC'"
+                  controls
+                  :src="msg.content"
+                  ref="dialogVideo"
+                >
+                  您的浏览器不支持音频播放
+                </audio>
               </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>
-            </div> -->
-            <p class="nomore"
-               v-if="activeCommit.length<=0">暂无回复内容</p>
+              <p class="nomore" v-if="activeCommit.length <= 0">暂无回复内容</p>
+            </div>
           </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 messageBox from './message-box'
 import { findStudentHomeworkComments } from "@/api/operateManager";
 export default {
   props: ["courseScheduleId"],
   components: {
-    pagination, Swiper,
+    pagination,
+    Swiper,
     SwiperSlide,
-    'message-box': messageBox
   },
   directives: {
-    swiper: directive
+    swiper: directive,
   },
-  data () {
+  data() {
     return {
       tableList: [],
       rules: {
         // 分页规则
         limit: 10, // 限制显示条数
         page: 1, // 当前页
-        total: 0 // 总条数
+        total: 0, // 总条数
       },
       workVisible: false,
       repliedVisible: false,
@@ -213,39 +230,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;
@@ -257,65 +274,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>
@@ -355,7 +380,7 @@ export default {
     }
     width: 400px;
     min-height: 300px;
-    height: 100%;
+
     border: 1px solid #e5e5e5;
     padding: 5px 20px;
     border-radius: 5px;
@@ -377,17 +402,20 @@ export default {
         color: #666;
       }
     }
-
   }
-
 }
- .workTitle {
-    padding-left: 25px;
-    color: #333;
-    font-weight: bold;
-
-  }
-  .workContainer {
-    margin-bottom:20px ;
+.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>