OfficeApp/pages/oaExamine/oaExamine.vue

<template>
  <view class="all_box">
    <!-- 审批选项 -->
    <view class="examine_box">
      <u-sticky bgColor="#fff">
        <u-tabs :list="list1" @click="click" lineColor='#3274F9' :scrollable="false" lineWidth='20'
          inactiveStyle='color:#666' activeStyle="color:#3274F9"></u-tabs>
      </u-sticky>
    </view>
    <!-- 事项 -->
    <view class="out_box">
      <view class="eventList_box" v-for="item in myEventList" :key="item.id">
        <view class="banner">
          <view class="title">{{item.name}}</view>
          <view class="department">{{item.department_name ? item.department_name : '' }}</view>
          <view v-if="item.check_status==0" class="wait">待审核</view>
          <view v-if="item.check_status==1" class="underway">审核中</view>
          <view v-if="item.check_status==2" class="pass">审核通过</view>
          <view v-if="item.check_status==3" class="refuse">审核不通过</view>
          <view v-if="item.check_status==4" class="withdraw">撤回审核</view>
        </view>
        <view class="line"></view>
        <view class="task_approval">{{item.content}}</view>
        <view class="approval_time">{{item.create_time}}</view>
      </view>
    </view>
    <u-empty icon="/static/img/empty/data.png"></u-empty>
    <!-- <u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" /> -->
    <!-- <tabbar></tabbar> -->
  </view>
</template>

<script>
  import {
    getApproveMyListAPI,
    getHandleListAPI,
    getCopyOfMyListAPI
  } from '@/api/oaApi.js'
  import { Toast } from '@/libs/uniApi.js'

  // import tabbar from '../components/tabbar'
  export default {
    components: {
      // tabbar
    },
    data() {
      return {
        list1: [{
          name: '全部',
        }, {
          name: '审核中',
        }, {
          name: '审核完成'
        }, {
          name: '未通过'
        }, ],
        myEventList: [],
        params: {
          limit: '8', //默认每次请求数据
          page: '1',
        },
        last_page: '',
        status: 'loadmore',
        loadingText: '努力加载中',
        loadmoreText: '轻轻上拉',
        nomoreText: '我也是有底线的~~',
        flag: '0', //

      }
    },
    onLoad() {
      this.myEventList = []
      // this.getApproveMyList(this.params)
    },
    onShow() {

    },
    methods: {
      //我审批的
      async getHandleList(data) {
        const res = await getHandleListAPI(data)
        this.publicMethods(res)
      },
      // 我发起的审批
      async getApproveMyList(data) {
        const res = await getApproveMyListAPI(data)
        this.publicMethods(res)
      },
      //抄送给我的
      async getCopyOfMyList(data) {
        const res = await getCopyOfMyListAPI(data)
        this.publicMethods(res)
      },
      //公共方法1
      publicMethods(res) {
        console.log(res);
        this.myEventList = [...this.myEventList, ...res.data]
        if (this.myEventList.length < this.params.limit) {
          this.status = 'nomore'
        }
        this.last_page = res.last_page
      },
      //公共方法2
      publicMethods2(fun) {
        if (this.params.page < this.last_page) {
          this.params.page++
          fun(this.params)
        } else {
          this.status = 'nomore'
          return
        }
      },
      click(item) {
        // Toast('开发中')
        return
        this.myEventList = []
        this.params.page = '1'
        switch (item.index) {
          case 0:
            this.flag = '0'
            this.getApproveMyList(this.params)
            break;
          case 1:
            this.flag = '1'
            this.getHandleList(this.params)
            break;
          case 2:
            this.flag = '2'
            this.getCopyOfMyList(this.params)
            break;
        }
      }
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    },
    onReachBottom() {
      if (this.flag == '0') {
        this.publicMethods2(this.getApproveMyList)
      } else if (this.flag == '1') {
        this.publicMethods2(this.getHandleList)
      } else {
        this.publicMethods2(this.getCopyOfMyList)
      }
    },

    filters: {
      formatDate(nS, format) {
        return new Date(nS).format('yyyy-MM-dd hh:mm:ss');
      }
    }
  }
</script>

<style lang="scss" scoped>
  /deep/.u-tabs__wrapper__nav__item {
    // padding: 0 56rpx;
    height: 77rpx !important;
  }

  /deep/.u-tabs__wrapper__nav__item__text {
    font-size: 32rpx;
  }

  /deep/.u-tabs__wrapper__nav {
    height: 77rpx;
    // justify-content: space-between;
  }

  /deep/.u-tabs__wrapper__nav__item-1 {
    flex-grow: 2;
  }

  .all_box {
    padding-bottom: 21rpx;
  }

  .examine_box {
    // position: fixed;
    // top: 0;
    // width: 750rpx;
    // height: 77rpx;
    // background: #FFFFFF;

  }

  .out_box {
    padding-top: 75rpx;
  }

  .eventList_box {
    margin: 0 auto;
    margin-top: 21rpx;
    width: 694rpx;
    min-height: 221rpx;
    background: #FFFFFF;
    border-radius: 7rpx;
    padding: 0 24.53rpx 10.53rpx 24.53rpx;

    .banner {
      display: flex;
      align-items: center;
      flex: 1 1 3;
      width: 100%;
      height: 82rpx;
      font-size: 32rpx;

      .title {
        // width: 438.6rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .department {
        color: $theme-oa-color;
        font-size: 25rpx;
        margin-left: 17.52rpx;
        flex-grow: 2;
      }

      .underway {
        color: #34A853;
      }

      .pass {
        color: $theme-oa-color;
      }

      .wait {
        color: #F9AA32;
      }

      .refuse {
        color: #F02828;
      }

      .withdraw {
        color: #CCCCCC;
      }
    }

    .line {
      margin: 0 auto;
      width: 646rpx;
      height: 0rpx;
      border-bottom: 1rpx solid #CCCCCC;
      margin-bottom: 14.02rpx;
    }

    .task_approval {
      font-size: 28rpx;
      margin-bottom: 26rpx;
    }

    .approval_time {
      font-size: 25rpx;
      color: #999;
      // position: relative;
    }

  }
</style>