gdy_app_8/src/attendance/view/AttendanceNew/ApproveRecord.vue

<template>
  <!-- 考勤审批列表 -->
  <div>
    <van-nav-bar title="考勤审批" left-text="返回" left-arrow @click-left="$route_back" />
    <div class="approveRecord">
      <van-tabs v-model="status" @change="handleClick">
        <van-tab name="waiting" :title="'待我审批(' + reviewTotal + ')'"></van-tab>
        <van-tab name="dealed" title="我已审批"></van-tab>
        <van-tab name="all" title="抄送给我"></van-tab>
      </van-tabs>
      <div class="head-Nav">
        <van-row>
          <van-col span="22"><van-search v-model="keyword" class="leftkep" placeholder="搜索审批内容" @input="keyInp()" /></van-col>
          <van-col span="2" @click="showFillter"><van-icon name="filter-o" class="rightsx" /></van-col>
        </van-row>
      </div>
      <div style="position: relative;height: calc(100% - 2rem) !important;">
        <scroller ref="scroller" :isInitRefresh="false" :onRefresh="refresh" :onInfinite="infinite" noDataText="没有了噢" :list="reviewList">
            <div v-for="item of reviewList" :key="item.id" class="item" @click="$router.push({ name: 'RecordDetail', query: { id: item.id } })">
              <div class="content">
                <div class="title">
                  <div class="detail">{{ item.employee_name }}提交的{{ filterType(item.type) }}申请</div>
                  <div :class="{ wait: item.status == 0, refuse: item.status == -1 }" class="status">{{ filterStatus(item.status) }}</div>
                </div>
                <div v-if="item.type == 5" class="desc">申请类型:{{ item.holiday_name }}</div>
                <div class="desc">申请时间:{{ formatTime(item.create_time) }}</div>
                <template v-if="item.type == 0">
                  <div class="desc">补卡时间:{{ item.start_time }}</div>
                  <!-- <div class="desc">结束时间:{{ item.end_time }}</div> -->
                </template>
                <template v-else>
                  <div class="desc">开始时间:{{ item.start_time }}</div>
                  <div class="desc">结束时间:{{ item.end_time }}</div>
                </template>
              </div>
            </div>
             <van-empty description="暂无数据" v-if="reviewList.length == 0" />
            <div style="height: 1rem;"></div>
        </scroller>
      </div>
      <!-- 筛选 -->
      <div v-show="fillterVisibale" class="fillterWrapper" :style="setNavstyle">
        <div class="fillter">
          <div class="fillterTitle">申请类型</div>
          <div class="fillterItems">
            <div :class="{ active: type == -1 }" @click="type = -1" class="fillterItem type">全部</div>
            <div :class="{ active: type == 5 }" class="fillterItem type" @click="type = 5">请假</div>
            <div :class="{ active: type == 4 }" class="fillterItem type" @click="type = 4">外出</div>
            <div :class="{ active: type == 3 }" class="fillterItem type" @click="type = 3">出差</div>
            <div :class="{ active: type == 2 }" class="fillterItem type" @click="type = 2">加班</div>
            <div :class="{ active: type == 1 }" class="fillterItem type" @click="type = 1">补卡</div>
          </div>
        </div>
        <div @click="getReviewHistroy()" class="confirmBtn">确认</div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { _debounce } from '@/utils/auth';
import { Tab, Tabs, Search } from 'vant';
Vue.use(Tab)
  .use(Tabs)
  .use(Search);
export default {
  data() {
    return {
      reviewList: [],
      keyword: '',
      fillterVisibale: false,
      status: 'waiting',
      type: -1,
      page: 1,
      reviewTotal: 0,
      setNavstyle: '',
    };
  },
  watch: {
    '$route.query.goFillter'(val) {
      if (!val) {
        this.fillterVisibale = false;
      }
    }
  },
  created() {
    if (this.$route.query.type != undefined) {
      this.type = this.$route.query.type;
    }
  },
  mounted() {
    this.isApp();
  },
  activated() {
    this.pullDown()
  },
  methods: {
    pullDown(){
      setTimeout(() => {
        this.$refs.scroller.triggerPullToRefresh();
      }, 50);
    },
    keyInp: _debounce(function() {
      // 搜索
      this.pullDown()
    }),
    handleClick(name, title) {
      this.pullDown()
    },
    isApp() {
      if (window.plus) {
        this.setNavstyle = 'top: calc(0.88rem + 1px + ' + plus.navigator.getStatusbarHeight() + 'px);';
      }
    },
    formatTime(val) {
      return this.$moment(val * 1000).format('YYYY-MM-DD HH:mm');
    },
    // 上拉刷新
    refresh (done) {
      this.getReviewHistroy(false,done)
    },
    // 下拉加载
    infinite (done) {
      this.page++;
      this.getReviewHistroy(true,done)
    },
    filterVacationType(type) {
      switch (type) {
        case 0:
          return '年假';
        case 1:
          return '事假';
        case 2:
          return '病假';
        case 3:
          return '调休';
        case 4:
          return '产假';
        case 5:
          return '婚假';
        case 6:
          return '例假';
        case 7:
          return '丧假';
      }
    },
    filterStatus(status) {
      if (status === 0) {
        return '待审批';
      }
      if (status === 1) {
        return '审批通过';
      }
      if (status === -1) {
        return '审批驳回';
      }
    },
    filterType(type) {
      switch (type) {
        case 0:
          return '补卡';
        case 1:
          return '加班';
        case 2:
          return '出差';
        case 3:
          return '外出';
        case 4:
          return '请假';
      }
    },
    getReviewHistroy(is,callback) {
      let hasMore = false
      is? '':this.page=1;
      if (this.fillterVisibale) {
        this.fillterVisibale = false;
      }
      let params = {
        page: this.page,
        type: this.type,
        status: this.status,
        page_size: 10,
        keyword: this.keyword,
        is_reviewer:this.status=='all'? 2:1,
      };
      this.$axiosKq('post', '/ad/review', params).then(res => {
        if (res.data.code === 1) {
          let data = res.data.data;

          if (this.status == 'waiting' && this.type == -1) {
            this.reviewTotal = data.total;
          }
          if (this.page === 1) {
            this.reviewList = data.review_list
          } else {
            this.reviewList = this.reviewList.concat(data.review_list)
          }
          hasMore = data.review_list.length !== 10
          callback && callback(hasMore)
        }
      });
    },
    showFillter() {
      this.fillterVisibale = true;
    }
  },
};
</script>
<style lang="scss" scoped>
.approveRecord /deep/ .mint-tab-item .mint-tab-item-label {
  font-size: 0.32rem;
}
.fillterWrapper {
  z-index: 1;
  position: fixed;
  top: 0.88rem;
  .confirmBtn {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    color: #fff;
    background: rgb(55, 171, 254);
    width: 100%;
  }
  background-color: #fff;
  height: 100%;
  .fillterTitle {
    line-height: 0.8rem;
    position: relative;
    padding-left: 0.4rem;
    margin-left: 0.15rem;
    margin-top: 0.2rem;
    font-size: 0.3rem;
    &::after {
      content: '';
      position: absolute;
      top: 0.26rem;
      left: 0;
      width: 0.24rem;
      height: 0.24rem;
      border-radius: 50%;
      background-color: rgb(72, 169, 239);
    }
  }
  .fillter:nth-of-type(2) .fillterTitle::after {
    background-color: rgb(22, 195, 149);
  }
  .fillterItems {
    display: flex;
    flex-wrap: wrap;
    .fillterItem {
      width: 2rem;
      height: 1rem;
      text-align: center;
      line-height: 1rem;
      background: rgb(243, 243, 243);
      border-radius: 0.2rem;
      font-size: 0.28rem;
      margin-left: 0.36rem;
      margin-bottom: 0.36rem;
      &.type {
        width: 3.2rem;
      }
      &.active {
        background-color: rgb(228, 240, 250);
        color: rgb(119, 191, 241);
      }
    }
  }
  .fillter:nth-of-type(2) .fillterItems .fillterItem.active {
    background-color: rgb(220, 245, 239);
    color: rgb(75, 208, 172);
  }
}
.searchItems {
  display: flex;
  padding-top: 0.4rem;
  .searchItem {
    flex: 1;
    font-size: 0.24rem;
    color: #909399;
    text-align: center;
    .searchItemIcon {
      width: 0.5rem;
      margin-bottom: 0.18rem;
    }
  }
}
.searchTip {
  margin-top: 1.2rem;
  padding: 0 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.28rem;
  color: #909399;
  span {
    width: 26%;
    height: 0.02rem;
    background-color: #eee;
  }
}
.searchWrapper {
  background-color: #fff;
  height: 100%;
  position: fixed;
  top: 0.88rem;
  left: 0;
  width: 100%;
  .search {
    flex: 0 0 1rem;
    color: #26a2ff;
    padding-right: 0.2rem;
    text-align: center;
    background-color: #f5f7fa;
    height: 0.96rem;
    line-height: 0.96rem;
    font-size: 0.32rem;
  }
}
.topBar {
  height: 0.88rem;
  background-color: #fff;
  border-bottom: 0.02rem solid #eee;
  display: flex;
  align-items: center;
  font-size: 0.3rem;
  line-height: 0.5rem;
  .left {
    flex: 1;
    text-align: center;
    color: #909399;
    .searchIcon {
      width: 0.4rem;
      margin-right: 0.1rem;
    }
  }
  .right {
    flex: 1;
    text-align: center;
    color: #909399;
    .fillterIcon {
      width: 0.4rem;
      margin-right: 0.1rem;
    }
  }
}
.approveRecord {
  background-color: #f5f7fa;
  position: relative;
  height: calc(100% - 0.92rem) !important;
}
.wraper {
  // padding:0 0.32rem;
  // background-color: #fff;
}
.item {
  display: flex;
  padding: 0 0.32rem 0.26rem;
  margin-bottom: 0.24rem;
  background-color: #fff;
}
.avatar {
  width: 0.86rem;
  height: 0.86rem;
  border-radius: 50%;
  margin: 0.4rem 0.2rem 0 0;
  flex-shrink: 0;
}
.content {
  // padding-top: 0.2rem;
  width: 100%;
}
.content .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // padding-bottom: 0.12rem;
  margin: 0.32rem 0 0.16rem 0;
  .detail {
    font-size: 0.34rem;
    flex: 0 0 4.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.content .desc {
  font-size: 0.28rem;
  color: #909399;
  margin-bottom: 0.08rem;
}
.content .status {
  font-size: 0.34rem;
  color: rgb(70, 211, 173);
}
.content .status.wait {
  color: rgb(235, 179, 102);
}
.content .status.refuse {
  color: rgb(246, 138, 119);
}
.content .status.cancel {
  color: rgb(101, 101, 101);
}
.title .time {
  padding-right: 0.2rem;
  font-size: 0.28rem;
  color: #909399;
}
.head-Nav {
  background-color: #fff;
  border-bottom: 1px solid #f1f1f1;
  .leftkep {
    padding: 0.2rem 0.12rem 0.2rem 0.32rem;
  }
  .rightsx {
    margin: 0.35rem 0 0 0.1rem;
  }
}
</style>
<style>
.searchIcon path {
  fill: rgb(51, 51, 51);
}
</style>