aiot-app/pages/storage_inventory/order/order.vue

<template>
  <view>
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="盘点执行"
      @clickLeft="back"
    ></uni-nav-bar>
    <view class="tab-title">
      <view
        v-for="(item, index) in tabList"
        :key="index"
        class="tab-item"
        v-text="item"
        :class="index === pickTabIndex ? 'active' : ''"
        @click="changeChartsTab(index)"
      ></view>
    </view>
    <OrderTask :list="worksheetList1" :type="1"></OrderTask>
  </view>
</template>

<script>
import OrderTask from './OrderTask.vue'
import { post } from '@/utils/api.js'
export default {
  components: {
    OrderTask
  },
  data () {
    return {
      tabList: ['待执行', '已执行'],
      pickTabIndex: 0,
      worksheetList: [],
      worksheetList1: [],
      worksheetList2: []
    }
  },
  onLoad () {
    this.getList()
  },
  methods: {
    getList () {
      uni.showLoading({
        title: '加载中'
      })
      let status = this.pickTabIndex == 0 ? '2' : '99'
      //2 - 99 [已完成]
      post(this.apiUrl + '/maintain/worksheet/list?status=' + status)
        .then(res => {
          console.log(res)
          if (status == '2') {
            this.worksheetList1 = res.data.items
          } else {
            this.worksheetList2 = res.data.items
          }
        })
        .then(() => {
          uni.hideLoading()
        })
    },
    changeChartsTab (index) {
      this.pickTabIndex = index
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-title {
  padding: 0 140rpx;
  display: flex;
  justify-content: space-between;
  height: 82rpx;
  line-height: 82rpx;
  background-color: #ffffff;
  border-bottom: 1px solid #f2f2f2;
  .tab-item {
    width: 30%;
    text-align: center;
    font-size: 32rpx;
    color: $uni-text-color-grey;
  }
  .tab-item.active {
    color: $j-primary-border-green;
    border-bottom: 1px solid $j-primary-border-green;
  }
}
</style>