gdy_app_8/src/newPerformance/components/public/More.vue

<template>
    <div style="width: 100%; height: 100%;" :class="{ bg_fff: skeletonLoad }">
      <!-- <van-nav-bar title="更多考核数据" left-text="返回" left-arrow @click-left="$route_back" /> -->

      <van-search placeholder="请输入考核表名称" v-model="params.keyword" @input="keyVal()" />


      <!-- 条件筛选 -->
      <div class="flex-box-ce search-box" style="">
        <!-- 周期筛选 -->
        <div class="flex-1 flex-box-ce flex-center-center" style="border-right: 1px solid #f1f1f1;">
          <div class="cycle-select-box fontColorC flex-box-ce flex-center-center" @click="openPanel()">
            <div class="cycle-name">{{ dateParameter.name }}</div>
            <van-icon name="arrow-down" size="12"/>
          </div>
        </div>
        <!-- 周期筛选 -->
        <!-- 时间筛选 -->
        <div class="flex-1 flex-box-ce flex-center-center" style="border-right: 1px solid #f1f1f1;">
          <div class="cycle-select-box fontColorC flex-box-ce flex-center-center" @click="calendarOpen()">
            <div class="cycle-name" v-html="timeStr"></div>
            <van-icon name="arrow-down" size="12"/>
          </div>
        </div>
        <!-- 时间筛选 -->

        <!-- 状态筛选 -->
        <div class="flex-1 flex-box-ce flex-center-center">
          <div class="cycle-select-box fontColorC flex-box-ce flex-center-center" @click="showStatus = true">
            <div class="cycle-name">{{ statusName }}</div>
            <van-icon name="arrow-down" size="12"/>
          </div>
        </div>
        <!-- 状态筛选 -->
      </div>
      <!-- 条件筛选 -->


      <!-- 骨架屏 -->
      <VanSkeleton :skeLoad="skeletonLoad">
        <scroller class="scroller-box" ref="scroller" :isInitRefresh="false" :on-refresh="refresh" :on-infinite="infinite" noDataText="没有了噢" :list="examineList">
          <div class="examine-list" v-if="filterExamineList && filterExamineList.length > 0">
            <div class="examine-item" v-for="(item, index) in filterExamineList" :key="item.reviewId" @click="handleChooseItem(item)">
              <div v-if="item.status == 1" class="examine-item-status" style="background-color: #FF9600;">
                已结束
              </div>
              <div v-if="item.status == 0" class="examine-item-status" >
                进行中
              </div>
              <div class="flex-1 flex-box-ce flex-d-center">
                <div class="examine-item-title font-flex-word">
                  {{ item.title }}
                </div>
                <div class="examine-item-info">
                  {{ item.score == null ? '-' : item.score }} / <span style="color: #ff9600;">{{ item.levelName || '-' }}</span>
                </div>
              </div>

            </div>
          </div>

          <noData v-else content="无考核记录"></noData>
        </scroller>
      </VanSkeleton>
      <!-- 骨架屏 -->

      <!-- 周期选择弹框 -->
      <van-action-sheet v-model="pullonThePanel" :closeable="false">
        <div class="content">
          <van-picker ref="van_picker" show-toolbar :columns="columns" @cancel="pullonThePanel = false" value-key="name" @confirm="onConfirm" confirm-button-text="完成" />
        </div>
      </van-action-sheet>

      <!-- 日期选择框 -->
      <van-calendar
        v-model="showCalendar"
        type="range"
        :allow-same-day="true"
        :min-date="minDate"
        :max-date="maxDate"
        :default-date="timeScope"
        :show-confirm="false"
        color="#26A2FF"
        @close="calendarClose"
        @confirm="calendarConfirm"
      >
        <template v-slot:title>
          <van-row>
            <van-col span="20">
              <van-row type="flex" justify="space-between" style="height: 1rem;">
                <van-col span="6" style="text-align: center; align-self: center;">
                  <van-tag type="success" size="medium" @click="timeScopeThisWeek">本周</van-tag>
                </van-col>
                <van-col span="6" style="text-align: center; align-self: center;">
                  <van-tag type="success" size="medium" @click="timeScopeLastWeek">上周</van-tag>
                </van-col>
                <van-col span="6" style="text-align: center; align-self: center;">
                  <van-tag type="primary" size="medium" @click="timeScopeThisMoth">本月</van-tag>
                </van-col>
                <van-col span="6" style="text-align: center; align-self: center;">
                  <van-tag type="primary" size="medium" @click="timeScopeLastMonth">上月</van-tag>
                </van-col>
              </van-row>
            </van-col>
          </van-row>
        </template>
      </van-calendar>

      <!-- 状态 -->
      <van-dialog v-model="showStatus" title="" width="300" confirm-button-text="确定" @confirm="handleConfirm" @cancel="handleCancel"  :show-confirm-button="true" closeOnClickOverlay>
        <van-radio-group v-model="statusId">
          <div v-for="(item, index) in statusList" :key="index">
            <van-radio :name="item.value" style="margin:.3rem 0 .3rem .4rem;font-size:.3rem" icon-size="16px">
              <span style="margin-left:.3rem">{{ item.text }}</span>
            </van-radio>
          </div>
        </van-radio-group>
      </van-dialog>

    </div>

</template>

<script>
  import Vue from 'vue';
  import { _debounce, _throttle } from '@/utils/auth';
  import VanSkeleton from '@/performance/components/public/VanSkeleton';
  import { DropdownMenu, DropdownItem, Calendar, Switch} from 'vant';
  import moment from "moment/moment";
  Vue.use(DropdownMenu)
    .use(DropdownItem)
    .use(Switch)
    .use(Calendar);
  export default {
    components: { VanSkeleton },

    props: {
      employeeId: {
        type: String | Number,
        default: ''
      }
    },
    data() {

      let startDate = new Date();
      startDate.setTime(startDate.getTime() - 3600 * 1000 * 24 * 7);
      startDate = moment(startDate).format('YYYY-MM-DD');
      let endDate = moment().format('YYYY-MM-DD');

      let today = new Date();
      let minDate = new Date();
      minDate.setTime(today.getTime() - 3600 * 1000 * 24 * 30 * 6);
      let maxDate = new Date(today.getFullYear(),today.getMonth(),1);
      maxDate.setMonth(maxDate.getMonth() + 1);
      maxDate.setDate(0);

      return {
        skeletonLoad: true,
        keyword: '',
        examineList: [],
        filterExamineList: [],
        pullonThePanel: false,

        columns: [
          {
            value: "-1",
            name: "全部",
            text: "全部"
          },
          {
            value: "0",
            name: "自定义",
            text: "自定义"
          },
          {
            value: "1",
            name: "年度",
            text: "年度"
          },
          {
            value: "2",
            name: "半年度",
            text: "半年度"
          },
          {
            value: "3",
            name: "季度",
            text: "季度"
          },
          {
            value: "4",
            name: "月度",
            text: "月度"
          }
        ],
        selectPftiTheEcho: [0, 0], // 选项回显
        dateParameter: {
          cycleType: '-1',
          name: '全部'
        },
        showCalendar: false,
        minDate: minDate,
        maxDate: maxDate,
        timeScope: [new Date(startDate),new Date(endDate)],

        userInfo: this.$userInfo(),
        timeStr: "选择时间",
        from: "me",

        statusList: [
          {
            id: 0, text: "全部", value: "-1"
          },
          {
            id: 1, text: "进行中", value: "0"
          },
          {
            id: 2, text: "已结束", value: "1"
          },
        ],
        showStatus: false,
        statusId: 0,
        statusName: "状态",
        params: {
          keyword: '',
          page: 1,
          pageSize: 15,
          cateId: '',
          startDate: '',
          endDate: '',
          employeeId: '',
        },
      }
    },

    beforeDestroy() {
      this.params = {
        keyword: '',
        page: 1,
        pageSize: 15,
        cateId: '',
        startDate: '',
        endDate: '',
        employeeId: '',
      };
      this.from = 'me'
      this.timeStr = "选择时间";
      // this.timeScope = [new Date(startDate),new Date(endDate)];
    },


    mounted() {
      this.params.employeeId = this.employeeId
      this.params.employeeId = this.params.employeeId ? this.params.employeeId : this.$userInfo().id
      this.getExamineList();
    },

    methods: {


      // 周期选择事件
      handleCellClick(e) {
        console.log(e.currentTarget.id)
      },


      // 搜索
      keyVal: _debounce(function() {
        this.pullDown();
        // console.log(123)
      }),

      handleChooseItem(item) {
        // if(this.from == 'me') this.goMePage(item)
        // else this.goOrgExaminePage(item)
        this.$emit("onConfirm", { reviewId: item.reviewId, employeeId:  item.employeeId })
      },

      goOrgExaminePage(item) {
        this.$router.push({ path: "/orgExamine", query: { reviewId: item.reviewId } })
      },

      goMePage(item) {
        this.$router.push({ path: "/newMe", query: { reviewId: item.reviewId, employeeId:  item.employeeId } })
      },

      // 获取考核表列表
      getExamineList(is, callback) {
        let that = this;
        let url = `/performance/statistics/reviews/${that.$userInfo().site_id}`
        let requestdata;
        if (that.dateParameter.cycleType == '-1') requestdata = { ...that.params }
        else requestdata = { ...that.params, cycleType: that.dateParameter.cycleType }

        let hasMore = false
        is ? '' : that.params.page = 1;
        that.$axiosUser('get', url, requestdata).then(res => {
          this.skeletonLoad = false;
          let { data: { data: { list, total }, code } } = res;
          if (code == 1) {
            if (requestdata.page === 1) {
              that.examineList = list
            } else {
              that.examineList = that.examineList.concat(list)
            }

            hasMore = list.length !== 10
            callback && callback(hasMore)
          } else {
            that.examineList = [];
          }
          that.filterExamineList = that.examineList;
        });
      },

      // 打开周期选择弹框
      openPanel(){
        this.pullonThePanel = true;
        this.$nextTick(() => {
          this.theEchoVanPicker()
        })
      },

      // 回显
      theEchoVanPicker() {
        this.$refs.van_picker.setIndexes(this.selectPftiTheEcho);
      },

      //  确认周期选择-考核包搜索
      onConfirm (data, value) {
        // let columns = this.columns[list[0]];
        // let options = this.cycleTypeArr[list[1]]
        // this.selectPftiTheEcho = list
        this.dateParameter = {
          cycleType: data.value,
          name: data.name
        };
        // console.log(this.dateParameter);
        this.pullDown();
        this.pullonThePanel = false
      },

      // 上拉刷新
      refresh (done) {
        this.getExamineList(false, done)
      },

      // 下拉加载
      infinite (done) {
        this.params.page ++;
        this.getExamineList(true, done)
      },

      pullDown(){
        setTimeout(() => {
          this.$refs.scroller.triggerPullToRefresh();
        }, 50);
      },

      // 日期选择
      changeDateGetList() {
        if(this.timeScope && this.timeScope.length > 0) {
          this.params.startDate = moment(this.timeScope[0]).format('YYYY-MM-DD')
          this.params.endDate = moment(this.timeScope[1]).format('YYYY-MM-DD')
          this.timeStr = this.params.startDate + "<br/>" + this.params.endDate
          this.getExamineList();
        }

      },

      // 本周
      timeScopeThisWeek(){
        this.timeScope = [new Date(moment().startOf('week').format('YYYY-MM-DD')),new Date(moment().endOf('week').format('YYYY-MM-DD'))]
        this.showCalendar= false
        this.changeDateGetList()
      },
      // 上周
      timeScopeLastWeek(){
        this.timeScope = [new Date(moment().subtract(1,'week').startOf('week').format('YYYY-MM-DD')),new Date(moment().subtract(1,'week').endOf('week').format('YYYY-MM-DD'))]
        this.showCalendar = false
        this.changeDateGetList()
      },
      // 本月
      timeScopeThisMoth(){
        this.timeScope = [new Date(moment().startOf('month').format('YYYY-MM-DD')),new Date(moment().endOf('month').format('YYYY-MM-DD'))]
        this.showCalendar = false
        this.changeDateGetList()
      },
      // 上周
      timeScopeLastMonth(){
        this.timeScope = [new Date(moment().subtract(1,'month').startOf('month').format('YYYY-MM-DD')),new Date(moment().subtract(1,'month').endOf('month').format('YYYY-MM-DD'))]
        this.showCalendar = false
        this.changeDateGetList()
      },


      calendarOpen(){
        this.showCalendar = true;
      },

      calendarClose(){
        this.showCalendar = false;
      },

      calendarConfirm(event){
        const [start,end] = event;
        this.timeScope = [start, end];
        this.showCalendar = false;
        this.changeDateGetList();
      },


      handleConfirm() {
        if(this.statusId !== '-1') this.filterExamineList = this.examineList.filter(item => item.status == this.statusId)
        else this.filterExamineList = this.examineList
        this.statusName = this.statusList.find(item => item.value == this.statusId).text || '状态'
        this.showStatus = false
      },

      handleCancel() {
        this.showStatus = false
      }

    }
  }


</script>

<style lang="less" scoped>

  /deep/ .van-calendar__header-subtitle {
    width: 100%;
    font-size: 0.28rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cycle-select-box {
    width: 100%;
    padding: 0.2rem 0.1rem;
    box-sizing: border-box;
    background-color: #fff;
    box-sizing: border-box;
    .icon {
      margin-right: 6px;
      width: 0.32rem;
      height: 0.32rem;
    }
    .cycle-name {
      margin: 0 6px;
      font-size: 0.3rem;
    }
  }

  .search-box {
    background-color: white;
    border-top: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
    margin-bottom: 0.2rem;
  }


  .scroller-box {
    height: calc(100% - 2.08rem) !important;
    position: relative !important;
    background-color: #f5f7fa;
    box-sizing: border-box;

    .examine-list {
      width: 100%;
      .examine-item {
        width: 100%;
        height: 1rem;
        padding: 0 0.2rem;
        background-color: #fff;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f1f1f1;
        &-status{
          padding:0.01rem 0.1rem;
          color: #fff;
          border-radius: 2px;
          font-size: 0.26rem;
          background-color: #67c23a;
          margin-right: 0.14rem;
        }

        &-info {
          font-size: 0.26rem;
        }
      }
    }


  }
</style>