aiot-app/pages/warehouse/workOrder copy/index.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="盘点工单"
      @clickLeft="back"
    ></uni-nav-bar>

    <template>
      <view class="tab-title">
        <view
          v-for="(item, index) in tabList"
          :key="index"
          class="tab-item"
          v-text="item.label"
          :class="index === pickTabIndex ? 'active' : ''"
          @click="changeChartsTab(index)"
        ></view>
      </view>
      <view class="tab-title__placeholder"></view>
    </template>

    <view
      class="list-wrap"
      v-for="(item, index) in listData"
      :key="index"
      v-show="listData.length !== 0"
      @click="goInventory(item)"
    >
      <CardTime :time="item.createTime" />
      <KdCard
        :title="item.workOrderCode"
        :status="true"
        :item="item"
        type="check"
      />
    </view>
    <view v-show="listData.length === 0" class="no_data">
      <u-empty mode="data"></u-empty>
    </view>
  </view>
</template>

<script>
import { post } from '@/utils/api.js'
import KdCard from './components/KdCard/index.vue'
import CardTime from './components/CardTime.vue'
import dictMixins from '@/mixins/dictMixins'
let [page, size, isEnd] = [1, 10, true]
export default {
  mixins: [dictMixins],
  components: {
    KdCard,
    CardTime
  },
  data () {
    return {
      tabList: [
        {
          value: '',
          label: '全部',
          list: []
        },
        {
          value: 1,
          label: '盘点中',
          list: []
        },
        {
          value: 3,
          label: '已盘点',
          list: []
        },
        {
          value: 2,
          label: '待审核',
          list: []
        }
      ],
      pickTabIndex: 0, //Tab选择
      listData: [],
      dictOpt: {
        status: {
          0: '待接收',
          1: '执行中',
          2: '待审核',
          3: '完成',
          4: '已撤回',
          5: '待验收',
          6: '已驳回',
          7: '未修复',
          8: '已派单'
        },
        asset: {
          1: {
            color: '#027DB4',
            backgroundColor: '#def5ff'
          },
          2: {
            color: '#B8741A',
            backgroundColor: '#fef1e8'
          },
          3: {
            color: '#A30014',
            backgroundColor: '#f9e5e7'
          },
          4: {
            color: 'green',
            backgroundColor: '#67C23A'
          },
          5: {
            color: '#a30014',
            backgroundColor: '#F56C6C'
          },
          6: {
            color: '#f56c6c',
            backgroundColor: '#fbc4c4'
          },
          7: {
            color: '#e6a23c',
            backgroundColor: '#fdf6ec'
          }
        }
      }
    }
  },
  onLoad () {
    // this.requestDict('物品类型')
    this.getFirstList()
  },
  //加载更多
  onReachBottom () {
    if (isEnd) {
      return
    }
    // 显示加载图标
    uni.showLoading({
      title: '数据加载中'
    })
    this.getMoreLists()
  },

  methods: {
    //首次加载
    getFirstList () {
      page = 1
      isEnd = true
      uni.showLoading({
        title: '数据加载中'
      })
      this.getList()
    },
    //获取更多列表
    getMoreLists () {
      //获取更多数据
      page++
      this.getList()
    },
    //获取数据列表
    getList () {
      uni.showLoading({
        title: '加载中'
      })
      let Pagination = {
        page,
        size
      }
      let data = {
        workOrderType: 4
      }
      let status = this.tabList[this.pickTabIndex].value
      if (status) {
        data.status = status
      }
      //2 - 99 [已完成]
      let par = this.URLSearchParams(Pagination)
      post(this.apiUrl + '/workOrder/getWorkOrderList?' + par, data)
        .then(res => {
          let data = res.data.records
          let pageTotal = res.data.pages
          if (page === 1) {
            this.listData = data
          } else {
            data.forEach(element => {
              this.listData.push(element)
            })
          }
          page < pageTotal ? (isEnd = false) : (isEnd = true)
        })
        .then(() => {
          uni.hideLoading()
        })
    },
    //切换菜单Tab
    changeChartsTab (index) {
      this.pickTabIndex = index
      this.getFirstList()
    },

    // 跳转盘点清单
    goInventory (item) {
      let par = this.URLSearchParams({
        id: item.id,
        workOrderCode: item.workOrderCode,
        BizType: item.bizType
      })
      uni.navigateTo({
        url: '/pages/warehouse/workOrder/inventory/inventory?' + par
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.mainBox {
}

/*Tab条*/
.tab-title {
  position: fixed;
  z-index: 99;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: $tab-height;
  line-height: $tab-height;
  background-color: #ffffff;
  border-bottom: 1px solid #f2f2f2;
  box-sizing: border-box;

  .tab-item {
    width: 25%;
    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;
    font-weight: bold;
  }

  .tab-item.filter {
    flex: 1;
    padding: 0px 30rpx;

    .uni-icons {
      display: flex;
      padding-top: 5px;
      font-weight: bold;
    }
  }
}

/*列表信息*/
.list-wrap {
  padding: 10rpx;
  background-color: $page-bg;
  // .item {
  //   display: flex;
  //   justify-content: space-between;
  //   padding: 10rpx;
  //   color: rgb(170, 170, 170);
  //   font-size: 28rpx;
  //   word-break: break-all;
  //   .title {
  //     color: #333333;
  //     font-size: 28rpx;
  //   }
  //   .state {
  //     font-size: 12px;
  //     display: inline;
  //     padding: 2px 5px;
  //     border-radius: 10px;
  //   }
  //   .asset {
  //     font-size: 12px;
  //     color: #7f7f7f;
  //     background: #f1f1f1;
  //     padding: 2px 5px;
  //     border-radius: 2px;
  //   }
  // }

  & + .list-wrap {
    border-top: 1px solid rgba(242, 242, 242, 1);
  }
}
</style>