dy-admin-manager/src/views/afterSchoolManager/afterSchoolTeach.vue

<!--  -->
<template>
  <div class="m-core">
    <div class="m-core">
      <el-form :inline="true" :model="searchForm">
        <el-form-item>
          <el-input
            v-model.trim="searchForm.search"
            @keyup.enter.native="search"
            placeholder="学生姓名 老师姓名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="organId">
          <el-select
            class="multiple"
            v-model.trim="searchForm.organIdList"
            filterable
            clearable
            placeholder="请选择分部"
          >
            <el-option
              v-for="(item,index) in organList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="实际安排" v-model="searchForm.actualExercisesNumIsAchieve" clearable>
            <el-option label="符合预期" value="1"></el-option>
            <el-option label="不符合预期" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="提交次数" v-model="searchForm.exercisesReplyNumIsAchieve" clearable>
            <el-option label="符合预期" value="1"></el-option>
            <el-option label="不符合预期" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="评价次数" v-model="searchForm.exercisesMessageNumIsAchieve" clearable>
            <el-option label="符合预期" value="1"></el-option>
            <el-option label="不符合预期" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            placeholder="及时评价"
            v-model="searchForm.exercisesMessageTimelyNumIsAchieve"
            clearable
          >
            <el-option label="符合预期" value="1"></el-option>
            <el-option label="不符合预期" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="周次选择">
          <el-date-picker
            v-model.trim="searchForm.timer"
            style="width:400px;"
            type="daterange"
            :picker-options="{
        firstDayOfWeek: 1
    }"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getWeekTime"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="search">搜索</el-button>
          <el-button @click="onReSet" type="primary">重置</el-button>
          <el-button
            @click="onExport"
            type="primary"
            v-permission="'export/exercisesSituations'"
            style=" background: #14928a; border:1px solid #14928a;"
          >导出</el-button>
        </el-form-item>
      </el-form>
      <div class="tableWrap">
        <el-table
          style="width: 100%"
          :header-cell-style="{background:'#EDEEF0',color:'#444'}"
          :data="tableList"
        >
          <el-table-column align="center" prop="studentId" label="学员编号"></el-table-column>
          <el-table-column align="center" prop="studentName" label="学生姓名"></el-table-column>
          <el-table-column align="center" prop="organName" label="所属分部"></el-table-column>
          <el-table-column align="center" prop="teacherName" label="指导老师"></el-table-column>
          <el-table-column align="center" prop label="预期安排">
            <template slot-scope="scope">
              <div>{{scope.row.expectExercisesNum+'次'}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop label="实际安排">
            <template slot-scope="scope">
              <div>{{scope.row.actualExercisesNum+'次'}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop label="提交次数">
            <template slot-scope="scope">
              <div>{{scope.row.exercisesReplyNum+'次'}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop label="评价次数">
            <template slot-scope="scope">
              <div>{{scope.row.exercisesMessageNum+'次'}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop label="及时评价次数">
            <template slot-scope="scope">
              <div>{{scope.row.exercisesMessageNum+'次'}}</div>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" prop="teacherName" label="老师姓名">
            <template slot-scope="scope">
              <div v-if="scope.row.extracurricularExercises&&scope.row.extracurricularExercises.teacher">{{scope.row.extracurricularExercises.teacher.username}}</div>
            </template>
          </el-table-column>-->
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div v-if="scope.row.actualExercisesNum >0">
                <el-button type="text" @click="lookDetail(scope.row)">查看</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="rules.total"
          :page.sync="rules.page"
          :limit.sync="rules.limit"
          :page-sizes="rules.page_size"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { getToken } from "@/utils/auth";
import pagination from "@/components/Pagination/index";
import { getEmployeeOrgan } from "@/api/buildTeam";
import { findStudentExtracurricularExercisesSituations } from "@/api/afterSchool";
// findStudentExtracurricularExercisesSituations
let nowTime = new Date();
nowTime =
  nowTime.getFullYear() +
  "-" +
  (nowTime.getMonth() + 1) +
  "-" +
  nowTime.getDate();
export default {
  components: { pagination },
  data() {
    return {
      tableList: [],
      searchForm: {
        timer: [],
        search: null,
        organIdList:null,
        actualExercisesNumIsAchieve: null, // 训练次数
        exercisesMessageNumIsAchieve: null, //评价
        exercisesMessageTimelyNumIsAchieve: null, //及时评价
        exercisesReplyNumIsAchieve: null // 提交次数
      },
      organList: [],
      teacherList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      }
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 设置默认为当前周
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.searchForm.timer = [];
        this.searchForm.timer.push(this.getNowDateAndMonday(nowTime));
    this.searchForm.timer.push(this.getNowDateAndSunday(nowTime));
  

    getEmployeeOrgan().then(res => {
      if (res.code == 200) {
        this.organList = res.data;
      }
    });
    // 获取分部  老师
    this.init();
  },
  activated() {
    this.init();
  },
  methods: {
    init() {
      this.getList();
    },
    getDate(){
      let obj = {
        search: this.searchForm.search || null,
        actualExercisesNumIsAchieve:
          this.searchForm.actualExercisesNumIsAchieve || null, // 训练次数
        exercisesMessageNumIsAchieve:
          this.searchForm.exercisesMessageNumIsAchieve || null, //评价
        exercisesMessageTimelyNumIsAchieve:
          this.searchForm.exercisesMessageTimelyNumIsAchieve || null, //及时评价
        exercisesReplyNumIsAchieve:
          this.searchForm.exercisesReplyNumIsAchieve || null, // 提交次数
          organIdList:this.searchForm.organIdList || null,
          page: this.rules.page,
          rows : this.rules.limit
      };
      if (this.searchForm.timer && this.searchForm.timer.length > 0) {
        obj.monday = this.searchForm.timer[0];
        obj.sunday = this.searchForm.timer[1];
      } else {
        this.$message.error("请选择时间段");
        return false;
      }
      return obj
    },
    getList()  {
      let obj = this.getDate()
      if(!obj)return
      findStudentExtracurricularExercisesSituations(obj).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total;
        }
      });
    },

    onReSet() {
      this.searchForm = {
        timer: [],
        search: null,
        actualExercisesNumIsAchieve: null, // 训练次数
        exercisesMessageNumIsAchieve: null, //评价
        exercisesMessageTimelyNumIsAchieve: null, //及时评价
        exercisesReplyNumIsAchieve: null // 提交次数
      };
      this.search();
    },

    onExport() {
      let url = "/api-web/export/exercisesSituations";
      let obj = this.getDate();
      const options = {
        method: "get",
        headers: {
          Authorization: getToken()
        },
        url,
        params: obj,
        responseType: "blob"
      };

      this.$confirm("您确定导出列表?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          axios(options).then(res => {
            let blob = new Blob([res.data], {
              // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
              type: "application/vnd.ms-excel;charset=utf-8"
              // word文档为application/msword,pdf文档为application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8
            });
            let objectUrl = URL.createObjectURL(blob);
            let link = document.createElement("a");
            let nowTime = new Date();
            let ymd =
              nowTime.getFullYear() +
              "" +
              (nowTime.getMonth() + 1) +
              "" +
              nowTime.getDate() +
              "" +
              nowTime.getHours() +
              "" +
              nowTime.getMinutes();
            let fname = ymd + "课外训练(教学)";
            link.href = objectUrl;
            link.setAttribute("download", fname);
            document.body.appendChild(link);
            link.click();
          });
        })
        .catch(() => {});
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    getNowDateAndMonday(time) {
      let timestamp = new Date(time.replace(/-/g, "/")).getTime();
      let serverDate = new Date(time);
      if(serverDate.getDay() == 0){
       timestamp -=7* 24 * 60 * 60 * 1000
      }
      let mondayTime =
        timestamp - (serverDate.getDay() - 1) * 24 * 60 * 60 * 1000;

      let mondayData = new Date(mondayTime);
      //年
      let mondayY = mondayData.getFullYear();
      //月
      let mondayM =
        mondayData.getMonth() + 1 < 10
          ? "0" + (mondayData.getMonth() + 1)
          : mondayData.getMonth() + 1;
      //日
      let mondayD =
        mondayData.getDate() < 10
          ? "0" + mondayData.getDate()
          : mondayData.getDate();

      let str = mondayY + "-" + mondayM + "-" + mondayD;
      return str;
    },
    getNowDateAndSunday(time) {
      let timestamp = new Date(time.replace(/-/g, "/")).getTime();
      let serverDate = new Date(time);
      
      let num = 7 - serverDate.getDay();
      if(num == 7){
        num = 0
      }
      let sundayTiem =
        timestamp + (num * 24 * 60 * 60 * 1000);
      let SundayData = new Date(sundayTiem);
      //年
      let tomorrowY = SundayData.getFullYear(); //月
      let tomorrowM =
        SundayData.getMonth() + 1 < 10
          ? "0" + (SundayData.getMonth() + 1)
          : SundayData.getMonth() + 1;
      //日
      let tomorrowD =
        SundayData.getDate() < 10
          ? "0" + SundayData.getDate()
          : SundayData.getDate();
      let str = tomorrowY + "-" + tomorrowM + "-" + tomorrowD;
      return str;
    },
    getWeekTime(val) {
      if (val && val.length > 0) {
        let start = this.getNowDateAndMonday(val[0]);
        let end = this.getNowDateAndSunday(val[1]);
        this.searchForm.timer.splice(0, 1, start);
        this.searchForm.timer.splice(1, 1, end);
      }
    },
    lookDetail(row) {
      // this.afterSchoolVisible = true;

      let rules = JSON.stringify(this.rules);
      let searchForm = JSON.stringify(this.searchForm);
      this.$router.push({
        path: "/business/afterSchoolDetail",
        query: {
          studentId: row.studentId,
          rules,
          searchForm,
          title: row.studentName,
          extracurricularExercisesId: "yes",
          startTime:this.searchForm.timer[0],
          endTime:this.searchForm.timer[1]

        }
      });
    }
  }
};
</script>
<style lang='scss' scoped>
</style>