crm-mobile/pages_examine/list.vue

<template>
  <view v-if="!refreshPage" class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar :title="title" />

      <view class="notice-tabs tabs-nav">
        <view
          :class="{padding: !routerQuery || routerQuery.by !== 'my'}"
          class="wk-tabs">
          <view
            v-for="(item, index) in tabsOptions"
            :key="item.label"
            :class="{active: activeTab === index}"
            class="wk-tab-item"
            @click="handleChangeTab(index)">
            {{ item.label }}
          </view>
        </view>
      </view>

      <view class="list-view">
        <wk-scroll-view
          v-if="!refreshPage"
          :status="listStatus"
          class="list-scroll"
          @refresh="getListFn({}, true)"
          @loadmore="getListFn()">
          <examine-item
            v-for="(item, index) in listData"
            :key="index"
            :item="item" />
        </wk-scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
  import {MyInitiate, WaitingQueryOaExamineList} from 'API/oa/examine'
  import ExamineItem from './components/examineItem'
  import mainListMixins from '@/mixins/mainList.js'

  export default {
    name: 'OaExamineList',
    components: {
      ExamineItem
    },
    mixins: [mainListMixins],
    data() {
      return {
        GetListFn: null,

        routerQuery: {},
        activeTab: 0,

        refreshPage: false
      }
    },
    computed: {
      title() {
        return this.routerQuery.by === 'my' ? '我发起的' : '我审批的'
      },
      showTabs() {
        return this.routerQuery.by === 'examine'
      },
      tabsOptions() {
        if (this.routerQuery.by === 'my') {
          return [
            { label: '全部', value: { status: '', categoryId: '' } },
            { label: '待审批', value: { status: '0', categoryId: '' } },
            { label: '审批通过', value: { status: '1', categoryId: '' } },
            { label: '审批拒绝', value: { status: '2', categoryId: '' } }
          ]
        } else {
          return [
            { label: '待我审批的', value: { status: 1, categoryId: '' } },
            { label: '我已审批的', value: { status: 2, categoryId: '' } }
          ]
        }
      }
    },
    onLoad(options) {
      this.routerQuery = options
      if (options.by === 'my' && !options.tab) {
        this.activeTab = 1
      }
      if (options.tab) {
        this.activeTab = Number(options.tab)
      }
      this.getListFn({}, true)
    },
    onShow() {
      if (this.refreshPage) {
        this.refreshPage = false
        this.getListFn({}, true)
      }
    },
    methods: {
      getListFn(params = {}, refresh = false) {
        this.GetListFn = this.routerQuery.by === 'my' ? MyInitiate : WaitingQueryOaExamineList
        this.getList(params, refresh)
      },

      getParams() {
        return this.tabsOptions[this.activeTab].value || {}
      },

      handleChangeTab(num) {
        if (this.activeTab !== num) {
          this.activeTab = num
          this.getListFn({}, true)
        }
      }
    }
  }
</script>

<style scoped lang="scss">
.main-container {
  .notice-tabs {
    background-color: white;

    .wk-tabs {
      justify-content: space-between;
      border-bottom: 1rpx solid $border-color;
      &.padding {
        padding: 0 10%;
      }
      .wk-tab-item {
        font-size: 28rpx;
      }
    }
  }

  .list-view {
    width: 100%;
    flex: 1;
    padding: 20rpx 0;
    overflow: hidden;
  }
}
</style>