aiot-app/pages/pda/picking/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"
      right-icon="scan"
      @clickRight="HandlScanCode"
    >
    </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
          class="nav_item"
          :class="{ active: pickStatus == 0 }"
          @click="handNav(0)"
        >
          工单({{ navObj.unclaimedQuantity || 0 }})</view
        >
        <view
          class="nav_item"
          :class="{ active: pickStatus == 1 }"
          @click="handNav(1)"
        >
          领料中({{ navObj.claimedQuantity || 0 }})</view
        >
        <view
          class="nav_item"
          :class="{ active: pickStatus == 2 }"
          @click="handNav(2)"
        >
          已出库({{ navObj.outInQuantity || 0 }})</view
        >

        <view class="menu_box" @click="handleSearch">
          <image class="menu_icon" src="~@/static/pda/menu.svg"></image>
        </view>
      </view>
    </view>

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

        <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 class="bottom-wrapper rx-bc" v-if="pickStatus == 0">
      <view>
        <checkbox
          v-if="!seletedAll"
          color="#fff"
          :checked="seletedAll"
          @tap="_seletedAll"
          >全选</checkbox
        >
        <checkbox
          class="select-all"
          color="#fff"
          v-else
          :checked="seletedAll"
          @tap="_seletedAll"
          >取消全选
        </checkbox>
      </view>
      <view>
        <u-button
          type="success"
          size="small"
          class="u-reset-button"
          :disabled="!checkListLen"
          @click="jumpAdd"
        >
          <view> 选择( {{ checkListLen }} ) </view>
        </u-button>
      </view>
    </view>

    <SearchPopup mode="top" v-if="searchShow">
      <template v-slot:list>
        <view class="search_list">
          <u-form
            labelPosition="left"
            :model="formData"
            labelWidth="180"
            labelAlign="left"
            class="baseForm"
          >
            <u-form-item
              label="工艺路线:"
              class="required-form"
              borderBottom
              prop="assetType"
            >
              <zxz-uni-data-select
                :localdata="produceList"
                v-model="formData.produceRoutingId"
                dataValue="id"
                format="{name}"
                dataKey="name"
                filterable
              ></zxz-uni-data-select>
            </u-form-item>
          </u-form>
        </view>
      </template>

      <template v-slot:operate>
        <view class="operate_box rx-bc">
          <u-button size="small" class="u-reset-button" @click="searchCancel">
            重置
          </u-button>

          <u-button
            type="success"
            size="small"
            class="u-reset-button"
            @click="search"
          >
            确定
          </u-button>
        </view>
      </template>
    </SearchPopup>
  </view>
</template>

<script>
import pickCard from "../components/pickCard.vue";
import pickWorkCard from "../components/pickWorkCard.vue";
import { workorderPage, producerouting } from "@/api/pda/workOrder.js";

import { pickStatistics, getAllPickList } from "@/api/pda/picking.js";
import SearchPopup from "../../components/searchPopup.vue";
let [isEnd] = [false];

export default {
  components: {
    pickCard,
    SearchPopup,
    pickWorkCard,
  },
  data() {
    return {
      tabType: 1,
      pickStatus: 0,

      formData: {
        produceRoutingId: "",
      },

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

      page: 1,
      size: 10,

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

      searchShow: false,
    };
  },

  //选择的列表长度
  computed: {
    checkListLen() {
      let _fitArr = this.dataList.filter((f) => f.checked);
      return _fitArr.length;
    },
  },

  onLoad(option) {
    this.pickStatus = option.pickStatus || 0;

    this.produceFn();
  },

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

  methods: {
    search() {
      this.page = 1;
      this.getList();
      this.searchShow = false;
    },

    async getList() {
      let params = null;
      if (this.pickStatus == 0) {
        params = {
          pageNum: this.page,
          size: this.size,
          pickStatus: this.pickStatus,
          customerClient: 2,
          workOrderType: 1,
          produceRoutingId: this.formData.produceRoutingId,
        };
      } else {
        params = {
          pageNum: this.page,
          size: this.size,
          status: this.pickStatus,
        };
      }

      isEnd = false;
      const URL = this.pickStatus == 0 ? workorderPage : getAllPickList;
      // const res = await workorderPage(params);
      const res = await URL(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;
    },

    getpickTics() {
      pickStatistics().then((res) => {
        this.navObj = res;
      });
    },

    handTab(type) {
      if (type != this.tabType) {
        this.tabType = type;
      }
    },

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

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

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

    _seletedAll() {
      if (!this.seletedAll) {
        this.seletedAll = true;
        this.dataList.forEach((e) => {
          e.checked = true;
        });
      } else {
        this.seletedAll = false;
        this.dataList.forEach((e) => {
          e.checked = false;
        });
      }
    },

    jumpAdd() {
      let url;
      url = "/pages/pda/picking/details";

      let arr = [];
      this.dataList.forEach((e) => {
        if (e.checked) {
          arr.push(e.id);
        }
      });
      let _arr = JSON.stringify(arr);
      url += `?arr=${encodeURIComponent(_arr)}`;
      uni.navigateTo({
        url,
      });
    },

    // 相机扫码
    HandlScanCode() {
      uni.scanCode({
        success: (res) => {
          console.log(res);
        },
      });
      //_this.Scancodedate('res')
    },

    handleSearch() {
      this.searchShow = true;
    },

    searchCancel() {
      this.formData.produceRoutingId = "";
      this.page = 1;
      this.getList();
      this.searchShow = false;
    },

    produceFn() {
      let param = {
        pageNum: 1,
        size: -1,
      };
      producerouting(param).then((res) => {
        this.produceList = res.list;
      });
    },
  },
};
</script>

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

.tab_box {
  width: 100%;
  height: 68rpx;
  background: #fff;

  .tab_item {
    height: 68rpx;
    line-height: 68rpx;
    padding: 0 20rpx;
    font-size: 32rpx;
    color: #979c9e;
  }

  .active {
    box-sizing: border-box;
    border-bottom: 6rpx solid $theme-color;
    color: $theme-color;
  }
}

.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;
  }
}

.bottom-wrapper {
  height: 80rpx;
  background: #fff;
  padding: 0 32rpx;

  /deep/ .uni-checkbox-input-checked {
    background-color: $theme-color !important;
    border-color: $theme-color !important;
  }
}

.search_list {
  min-height: 100rpx;

  /deep/ .baseForm {
    padding: 0 20rpx;
  }
}

.operate_box {
  padding: 10rpx 32rpx;

  /deep/ .u-button {
    width: 40%;
  }
}
</style>