aiot-app/pages/pda/selfBuiltPickOrder/index/index.vue

<template>
  <view class="content-box">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="自建领料单"
      background-color="#157A2C"
      color="#fff"
      @clickLeft="back"
    ></uni-nav-bar>

    <view class="top-wrapper">
      <!-- 	<view class="tab_box rx-sc">
				<view class="tab_item" :class="{active: tabType == 1}" @click="handTab(1)">生产工单列表</view>
				<view class="tab_item" :class="{active: tabType == 2}" @click="handTab(2)">领料工单列表</view>
			</view> -->

      <view class="nav_box rx-sc">
        <view style="margin-right: 30rpx"
          ><button
            class="mini-btn"
            type="primary"
            size="mini"
            @click="addPick"
            style="font-size: 24rpx"
          >
            新增自建领料单
          </button></view
        >
        <view
          class="nav_item"
          :class="{ active: pickStatus == 1 }"
          @click="handNav(1)"
        >
          领料中</view
        >
        <view
          class="nav_item"
          :class="{ active: pickStatus == 2 }"
          @click="handNav(2)"
        >
          已出库</view
        >
      </view>
    </view>

    <view class="list_box">
      <u-list @scrolltolower="scrolltolower">
        <pickWorkCard
          v-if="dataList.length && pickStatus != 0"
          :list="dataList"
        >
        </pickWorkCard>

        <view v-else style="margin-top: 20vh">
          <u-empty iconSize="150" textSize="32" text="暂无工单"> </u-empty>
        </view>
      </u-list>
    </view>
  </view>
</template>

<script>
import { getAllPickList } from "@/api/pda/picking.js";
import pickWorkCard from "../components/pickWorkCard.vue";
let [isEnd] = [false];
export default {
  components: {
    pickWorkCard,
  },
  data() {
    return {
      tabType: 1,
      pickStatus: 1,

      formData: {
        produceRoutingId: "",
      },

      navObj: {
        unclaimedQuantity: 0,
        claimedQuantity: 0,
      },

      page: 1,
      size: 10,

      dataList: [],
      produceList: [],
      seletedAll: false, //全选状态

      searchShow: false,
    };
  },

  onShow() {
    this.page = 1;
    // this.dataList = []
    this.getList();
  },

  methods: {
    handNav(type) {
      if (type != this.pickStatus) {
        this.pickStatus = type;

        this.page = 1;
        this.dataList = [];
        this.getList();
      }
    },

    scrolltolower() {
      if (isEnd) return;
      this.page++;
      this.getList();
    },

    async getList() {
      let params = null;

      params = {
        pageNum: this.page,
        size: this.size,
        status: this.pickStatus,
        type: 1,
      };

      isEnd = false;
      const res = await getAllPickList(params);

      if (params.pageNum === 1) {
        this.dataList = [];
      }

      let _list = res.list.map((m) => {
        return {
          checked: false,
          ...m,
        };
      });

      this.dataList.push(..._list);
      isEnd = this.dataList.length >= res.count;
    },

    addPick() {
      console.log("1111");
      let url = "/pages/pda/selfBuiltPickOrder/components/addPick";

      uni.navigateTo({ url });
    },
  },
};
</script>

<style lang="scss" scoped>
.content-box {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: $page-bg;
}

.nav_box {
  padding: 6rpx 32rpx;
  position: relative;

  .nav_item {
    font-size: 28rpx;
    font-weight: 400;
    color: $theme-color;
    background: #f0f8f2;
    margin-right: 16rpx;
    padding: 4rpx 16rpx;
    border-radius: 8rpx;
    border: 2rpx solid #acd4b5;
  }

  .menu_box {
    position: absolute;
    right: 20rpx;
    top: 10rpx;

    .menu_icon {
      width: 44rpx;
      height: 44rpx;
    }
  }

  .active {
    background: $theme-color;
    border: 2rpx solid $theme-color;
    color: #fff;
  }
}

.list_box {
  flex: 1;
  overflow: hidden;
  padding: 4rpx 0;

  .u-list {
    height: 100% !important;
  }
}
</style>