kmt/src/pages/super/AllStudentHomework.vue

<!-- 活动解析 -->
<template>
  <div>
    <!-- table 表格 -->
    <el-row :gutter="20" class="main-items">
      <!--数据监控-->
      <el-col :span="20" class="main" :offset="2">
        <el-row :gutter="20" class="main-header">
          <el-col :span="4" :offset="19">
            <div class="teach-block">
              <div class="Dayteach-Allot">
                <input
                  type="text"
                  placeholder="请输入学生名字"
                  v-model="inputValue"
                  class="Dayinput-with-Allot"
                />
                <span @click="GetGetTeacherCorrectDetailInfo()" class="DaySeachIcon el-icon-search"></span>
              </div>
            </div>
          </el-col>
        </el-row>
        <div>
          <el-table
            style="width: 100%"
            :data="StudentHomework01List"
            :header-cell-class-name="tableheaderClassName"
            :header-cell-style="{
          'background-color': '#F6F7FB',
          'color': '#393939',
          'font-size': '16px'
           }"
            size="medium"
            border
            stripe
          >
            <el-table-column label="注册老师" header-align="center">
              <template slot-scope="scope">
                <div class="scope-list">
                  <img
                    :src="BASE_URL+scope.row.imgUrl"
                    alt
                    class="table-img"
                    v-if="scope.row.imgUrl"
                  />
                  <img
                    src="../../assets/img/user.jpg"
                    alt
                    v-if="!scope.row.imgUrl"
                    class="table-img"
                  />
                  <span class="scope-name">{{scope.row.name}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="subject" label="科目" header-align="center"></el-table-column>
            <el-table-column prop="grade" label="年级" header-align="center"></el-table-column>
            <el-table-column prop="uploadTime" label="上传时间" header-align="center"></el-table-column>
            <el-table-column prop="uploadTime" label="作业图片" header-align="center" width="200">
              <template slot-scope="scope">
                <span
                  class="ClickWork"
                  @click="HomeworkWornglists(scope.row)"
                >查看</span>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页显示 -->
          <el-pagination
            background
            @size-change="handleSizeChange3"
            @current-change="pageChange3"
            :page-sizes="[10,50,100,200]"
            :current-page.sync="currentPage"
            layout="sizes, total,prev, pager, next"
            :hide-on-single-page="true"
            :total="parseInt(StudentHomework01List.pages)"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { IMG_BASE_URL, APPOR_BASE_URL } from "@/config";
export default {
  components: {},
  name: "actvResolveLabel",
  props: {},
  data() {
    return {
      inputValue: "",
      BASE_URL: IMG_BASE_URL,
      selMonth:this.monthFormatDate(),
      currentPage: 1,
       filters2: {
        MaxtimeValue: "",
        oneMonth: "",
        pageNo: 1,
        pageSize: 10
      }
    };
  },
  watch: {},
  computed: {
    ...mapGetters([
     "StudentHomework01List"
    ])
  },
  methods: {
    ...mapActions(["setUser"]),
    // 表格头部样式
    tableheaderClassName({ row, rowIndex }) {
      return "table-head-th";
    },
     // 作业原图
    HomeworkWornglists(v){
         this.$router.push({
        path: "/super/AllHomeWorkPictrue",
           query: {
          homeworkId: v.homeworkId,
        }
      });
    },
    // 批改明细
    GetGetTeacherCorrectDetailInfo() {
      this.$store.dispatch("GetStudentHomework01List", {
        pageNo: this.filters2.pageNo,
        pageSize: this.filters2.pageSize,
        oneMonth: this.selMonth,
        maxCreateTime: this.formatDate(),
        name: this.inputValue
      });
    },
         //年月时间封装
    monthFormatDate: function() {
      let date = new Date();
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      return y + "-" + MM;
    },
    //弹框
    isShow(str, img) {
      let _this = this;
      console.log(str);
      if (str == 1) {
        _this.hiddenModel = true;
        _this.isPigai = false;
      } else if (str == 2) {
        _this.isPigai = true;
        _this.hiddenModel = false;
      } else if (str == 3) {
        _this.cardShow = true;
        _this.imgCard = img;
      }
    },
    //关闭弹框
    allShowModel(str) {
      let _this = this;
      if (str == 1) {
        _this.hiddenModel = false;
      } else if (str == 2) {
        _this.isPigai = false;
      } else if (str == 3) {
        _this.cardShow = false;
      }
    },
    //时间封装
    formatDate: function() {
      let date = new Date();
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },
 
     pageChange3(val) {
      this.currentPage = val;
      this.filters2.pageNo = val;
      this.GetGetTeacherCorrectDetailInfo();
    },

    handleSizeChange3(val) {
      this.filters2.pageSize = val;
      this.GetGetTeacherCorrectDetailInfo();
    },

  },
  mounted() {
    this.GetGetTeacherCorrectDetailInfo();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.main {
  background-color: #fff;
  margin-top: 16px;
  padding: 0 !important;
  border: 1px solid #e1e1e1;
  min-height: 980px;
}

el-table {
  color: #999999;
  font-size: 18px;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #52cc60 !important;
  color: #fff;
}
.main-items {
  color: #393939;
  text-align: center;
  line-height: 80px;
}
.main-header-item {
  cursor: pointer;
  font-size: 16px;
  color: #7e7e7e;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.table-img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
}
.showModel {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}
.model {
  z-index: 1001;
  width: 40%;
  height: auto;
  position: fixed;
  top: 30%;
  left: 30%;
  margin: auto;
  background: #fff;
  border-radius: 10px;
  text-align: center;
}
.scope-name {
  margin-left: 13px;
}
.identity-card {
  width: 52px;
  height: 51px;
  border-radius: 4px;
  margin-right: 17px;
}
.model-text {
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
}

.model-btn {
  display: flex;
  justify-content: space-around;
  margin-bottom: 44px;
}
.model-btn-info-img {
  width: 451px;
  height: 298px;
}
.model-btn-items {
  width: 154px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  border-radius: 4px;
}
.main-gay {
  background: rgba(246, 247, 251, 1);
  color: #7e7e7e;
}
.model-grdeen {
  background-color: #52cc60;
  color: #fff;
}
.model-text-items-close {
  position: absolute;
  top: 10px;
  right: 15px;
}
.model-text-items {
  position: relative;
  color: #000000;
  font-size: 24px;
  text-align: center;
  padding: 40px 0 50px 0;
}
.el-table {
  margin-top: 50px;
}
.el-table .table-head-th {
  background-color: #f6f7fb;
  font-size: 16px !important;
  color: #393939;
}
.page-block {
  text-align: center !important;
  margin-top: 15px;
}
.scope-list {
  margin-left: 18px;
  text-align: left;
}
.ApporStyles {
  display: inline-block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  border-radius: 20px;
  font-size: 16px;
  color: #7c819d;
  cursor: pointer;
}
.navteacfertypeactive {
  background-color: #52cc60 !important;
  color: #fff !important;
}
.el-pagination .el-select .el-input {
  /* width: 120px; */
  margin: 0 -100px !important;
}
.ClickWork {
  font-size: 16px;
  text-decoration: underline;
  cursor: pointer;
}
.bank-active {
  color: #52cc60;
  font-size: 16px;
  text-decoration: underline;
  cursor: pointer;
}
.Dayinput-with-Allot {
  border: #b6b6b6;
  border-radius: 20px;
  height: 40px;
  width: 300px;
  font-size: 8px;
  color: #b6b6b6;
  text-align: left;
  line-height: 40px;
  background: #f1f2f4;
  padding: 0 10px;
  float: left;
  outline: none !important;
  box-shadow: none;
}
.Dayteach-Allot {
  width: 400px;
  position: relative;
  height: 40px;
  top: 15px;
}
.DaySeachIcon {
  position: absolute;
  font-size: 20px;
  color: #b6b6b6;
  right: 30%;
  margin-top: 10px;
  cursor: pointer;
}
</style>