mteacher/src/views/audition/ManageEvaluation.vue

<template>
  <div style="wrap">
    <div class="searchSection">
      <div class="searchDate">
        <div class="date startDate" @click="dateSection.status = true">
          开始
          <span>{{dateSection.showStartDate}}</span>
        </div>-
        <div class="date endDate" @click="dateEndSection.status = true">
          结束
          <span>{{dateEndSection.showEndDate}}</span>
        </div>
      </div>
      <!-- <div class="searchMore">
                筛选<i class="arrowDown"></i>
      </div>-->
      <van-dropdown-menu active-color="#14928A">
        <van-dropdown-item title="筛选" ref="item" v-model="search.status">
          <!-- <div class="dropItem">
            <p class="dropTitle">评价类型</p>
            <div class="radioGroup">
              <span class="actived">月报</span>
              <span>课次评价</span>
            </div>
          </div>-->
          <div class="dropItem">
            <p class="dropTitle">评价进度</p>
            <div class="radioGroup">
              <span :class="search.hasReview==0?'actived':''" @click="search.hasReview=0">待完成</span>
              <span :class="search.hasReview==1?'actived':''" @click="search.hasReview=1">已完成</span>
            </div>
          </div>
          <div class="dropItem">
            <p class="dropTitle">提交作业</p>
            <div class="radioGroup">
              <span
                :class="search.hasHandHomework==1?'actived':''"
                @click="search.hasHandHomework=1"
              >是</span>
              <span
                :class="search.hasHandHomework==0?'actived':''"
                @click="search.hasHandHomework=0"
              >否</span>
            </div>
          </div>
          <div class="dropItem">
            <p class="dropTitle">完成双向沟通</p>
            <div class="radioGroup">
              <span :class="search.hasLiaison==1?'actived':''" @click="search.hasLiaison=1">是</span>
              <span :class="search.hasLiaison==0?'actived':''" @click="search.hasLiaison=0">否</span>
            </div>
          </div>
          <div class="btnGroup">
            <div class="btn btn-reset" @click="resetSerach">重置</div>
            <div class="btn btn-sure" @click="submitInfo">确定</div>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <!--  -->

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
        <van-cell
          v-for="(item,index) in courseList"
          :key="index"
          class="cellGroup"
          :title="item.classDate | filterClass"
          title-class="sectionTitle"
          value-class="sectionValue"
        >
          <template solt="default">
            <p class="content van-ellipsis">{{ item.courseName }}</p>
            <van-button
              type="primary"
              round
              size="small"
              v-if="item.reviewId==0"
              @click="submitReview(item)"
            >提交评价</van-button>
            <van-button
              type="primary"
              round
              size="small"
              v-if="item.reviewId>0"
              @click="submitReview(item)"
            >修改评价</van-button>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>

    <!--  -->
    <!-- <m-empty class="empty" v-else key="data" /> -->

    <!-- 日期开始弹窗 -->
    <van-popup position="bottom" v-model="dateSection.status">
      <van-datetime-picker
        v-model="dateSection.currentDate"
        type="date"
        :min-date="dateSection.minDate"
        :max-date="dateSection.maxDate"
        :formatter="formatter"
        @confirm="confirmStartTime()"
        @cancel="cancelTime()"
      />
    </van-popup>
    <!-- 日期结束弹窗 -->
    <van-popup position="bottom" v-model="dateEndSection.status">
      <van-datetime-picker
        v-model="dateEndSection.currentDate"
        type="date"
        :min-date="dateSection.minDate"
        :max-date="dateSection.maxDate"
        :formatter="formatter"
        @confirm="confirmEndTime()"
        @cancel="cancelTime()"
      />
    </van-popup>

    <van-popup position="bottom" v-model="search.status"></van-popup>
  </div>
</template>
<script>
import MEmpty from "@/components/MEmpty";
import { getPracticeGroup } from "@/api/teacher";
export default {
  name: "teacherList",
  components: { MEmpty },
  data() {
    return {
      str: "2020-01-23 12:12:12",
      dateSection: {
        status: false,
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        currentDate: null,
        showStartDate: null
      },
      dateEndSection: {
        status: false,
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        currentDate: null,
        showEndDate: null
      },
      search: {
        status: false,
        hasReview: null,
        hasHandHomework: null,
        hasLiaison: null
      },
      courseList: [],
      loading: false,
      finished: false,
      refreshing: false,
      page: 1
    };
  },
  created() {
    let params = this.$route.query;
    if (params.Authorization) {
      localStorage.setItem("Authorization", decodeURI(params.Authorization));
      localStorage.setItem("userInfo", decodeURI(params.Authorization));
    }
  },
  mounted() {
    this.dateSection.currentDate = new Date();
    this.dateSection.showStartDate = this.timeFormat(
      this.dateSection.currentDate
    );
    this.dateEndSection.currentDate = new Date();
    this.dateEndSection.showEndDate = this.timeFormat(
      this.dateEndSection.currentDate
    );
    // this.onRefresh();
    // this.getList();
    // this.getStudent()
  },
  methods: {
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      } else if (type == "day") {
        return `${val}日`;
      }
      return val;
    },
    changeStartTime() {},

    confirmStartTime() {
      this.dateSection.showStartDate = this.timeFormat(
        this.dateSection.currentDate
      );
      this.onRefresh();
      this.dateSection.status = false;
    },
    confirmEndTime() {
      this.dateEndSection.showEndDate = this.timeFormat(
        this.dateEndSection.currentDate
      );
      this.onRefresh();
      this.dateEndSection.status = false;
    },
    cancelTime() {
      this.dateEndSection.status = false;
      this.dateSection.status = false;
    },
    timeFormat(time) {
      // 时间格式化 2019-09-08
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      return year + "/" + month + "/" + day;
    },
    resetSerach() {
      this.search = {
        status: false,
        hasReview: null,
        hasHandHomework: null,
        hasLiaison: null
      };
    },
    submitInfo() {
      // 提交请求
      this.onRefresh();
      this.search.status = false;
      this.$refs.item.toggle();
    },
    getList() {
      this.page++;
      this.search.startTime =
        this.dateSection.showStartDate.replace(/\//g, "-") + " 00:00:00";
      (this.search.endTime =
        this.dateEndSection.showEndDate.replace(/\//g, "-") + " 23:59:59"),
        (this.search.page = this.page);
      this.loading = true;
      getPracticeGroup(this.search).then(res => {
          console.log(res.data.code)
        if (res.data.code == 200) {
          if (this.refreshing) {
            this.courseList = [];
            this.refreshing = false;
          }

          if (res.data.data.rows.length == 0) {
          
            this.finished = true;
          }
          if (this.courseList.length > 0) {
            this.courseList = this.courseList.concat(res.data.data.rows);
          } else {
            this.courseList = res.data.data.rows;
          }
          if (this.courseList.length >= 20) {
            this.finished = true;
          }

          this.loading = false;

          this.refreshing = true;
        } else {
          this.finished = true;
           this.loading = false;
          this.refreshing = false;
        }
      });
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      this.page = 1;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.courseList = [];
      this.getList();
    },
    submitReview(item) {
      this.$router.push({
        path: "/courseEvaluation",
        query: { id: item.id, reviewId: item.reviewId }
      });
    }
  },
  filters: {
    filterClass(val) {
      return val.substring(0, 10);
    }
  }
};
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");
.wrap {
  min-height: 100vh;
  overflow-y: auto;
}
#list-content {
  background-color: #fff;
}
.searchSection {
  display: flex;
  justify-content: space-between;
  background: #fff;
  margin-bottom: 0.15rem;
  padding: 0 0.16rem;
  align-items: center;

  .searchDate {
    display: flex;
    color: #666666;
    height: auto;
    .startDate {
      margin-right: 0.05rem;
    }
    .endDate {
      margin-left: 0.05rem;
    }
    .date {
      padding: 0.02rem 0.06rem;
      border: 1px solid #e5e5e5;
      font-size: 0.14rem;
      color: #999999;
      span {
        padding-left: 0.04rem;
        font-size: 0.15rem;
        color: #666666;
      }
    }
  }
  /deep/.van-hairline--top-bottom::after,
  .van-hairline-unset--top-bottom::after {
    border-width: 0 0;
  }
  /deep/.van-dropdown-menu__title {
    font-size: 0.17rem;
    color: #1a1a1a;
  }

  .btnGroup {
    display: flex;
    margin-top: 0.15rem;
    .btn {
      width: 50%;
      text-align: center;
      font-size: 0.17rem;
      color: #000;
      padding: 0.12rem 0;
    }
    .btn-reset {
      background-color: #e1f6f4;
      color: #14928a;
    }
    .btn-sure {
      background-color: #14928a;
      color: #fff;
    }
  }
  .dropItem {
    padding: 0.1rem 0.16rem;
    .dropTitle {
      font-size: 0.17rem;
      color: #1a1a1a;
    }
    .radioGroup {
      display: flex;
      justify-content: space-between;
      padding-top: 0.1rem;
      span {
        color: #000000;
        background-color: #f4f4f4;
        width: 48%;
        padding: 0.1rem 0;
        text-align: center;
        border-radius: 2px;
        &.actived {
          color: #14928a;
          background: url("../../assets/images/audition/icon_check.png")
            no-repeat bottom right #e4f6f5;
          background-size: 0.2rem;
        }
      }
    }
  }
}
.cellGroup {
  padding: 0.16rem;
}
.sectionTitle {
  font-size: 0.16rem;
  color: #808080;
  align-items: center;
  display: flex;
}
.sectionValue {
  display: flex;
  width: 70%;
  flex: 1 auto;
  justify-content: space-between;
  align-items: center;
  height: auto !important;
  .content {
    font-size: 0.17rem;
    color: #1a1a1a;
  }
  .van-button {
    font-size: 0.14rem;
    background-color: #14928a;
    padding: 0 0.12rem;
    min-width: 0.88rem;
  }
}
/deep/.van-cell__title {
  font-size: 0.14rem;
  color: @mFontColor;
  flex: 1 auto;
}
.logo {
  width: 0.35rem;
  height: 0.35rem;
  margin-right: 0.12rem;
  border-radius: 100%;
}
.input-cell {
  padding: 0.12rem 0.16rem 0.2rem;
  .van-radio {
    justify-content: flex-end;
  }
}
/deep/.van-cell__value {
  height: 0.2rem;
}
/deep/.van-radio__icon .van-icon {
  border-color: @sFontColor;
}
/deep/.van-radio__icon--checked {
  .van-icon {
    border-color: @orangeColor;
    background: @orangeColor;
  }
}
.van-tag {
  margin-left: 0.08rem;
}
.button-group {
  margin: 0.3rem 0.26rem 0.2rem;
  .van-button--primary {
    background: @mColor;
    border: 1px solid @mColor;
    font-size: 0.18rem;
  }
}
</style>