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

<template>
  <view class="page-container">
    <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-tabs">
        <view class="nav-tabs__inner">
          <view
            class="nav-tabs__item"
            :class="{ 'nav-tabs__item--active': pickStatus == 0 }"
            @click="handNav(0)"
          >
            <text class="nav-tabs__text">工单</text>
            <view class="nav-tabs__badge">{{ navObj.unclaimedQuantity || 0 }}</view>
          </view>
          <view
            class="nav-tabs__item"
            :class="{ 'nav-tabs__item--active': pickStatus == 1 }"
            @click="handNav(1)"
          >
            <text class="nav-tabs__text">领料中</text>
            <view class="nav-tabs__badge">{{ navObj.claimedQuantity || 0 }}</view>
          </view>
          <view
            class="nav-tabs__item"
            :class="{ 'nav-tabs__item--active': pickStatus == 2 }"
            @click="handNav(2)"
          >
            <text class="nav-tabs__text">已出库</text>
            <view class="nav-tabs__badge">{{ navObj.outInQuantity || 0 }}</view>
          </view>
        </view>

        <view class="nav-tabs__filter" @click="handleSearch">
          <image class="nav-tabs__filter-icon" src="~@/static/pda/menu.svg"></image>
        </view>
      </view>
    </view>

    <view class="list-container">
      <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 class="empty-wrapper">
          <u-empty iconSize="150" textSize="32" text="暂无工单"> </u-empty>
        </view>
      </u-list>
    </view>

    <view class="footer-bar" v-if="pickStatus == 0">
      <view class="footer-bar__left">
        <checkbox
          v-if="!seletedAll"
          color="#fff"
          :checked="seletedAll"
          @tap="_seletedAll"
          >全选</checkbox
        >
        <checkbox
          class="footer-bar__checkbox--active"
          color="#fff"
          v-else
          :checked="seletedAll"
          @tap="_seletedAll"
          >取消全选
        </checkbox>
      </view>
      <view class="footer-bar__right">
        <u-button
          type="success"
          size="small"
          class="footer-bar__btn"
          :disabled="!checkListLen"
          @click="jumpAdd"
        >
          <text class="footer-bar__btn-text">选择( {{ checkListLen }} )</text>
        </u-button>
      </view>
    </view>

    <SearchPopup mode="top" v-if="searchShow">
      <template v-slot:list>
        <view class="search-panel">
          <u-form
            labelPosition="left"
            :model="formData"
            labelWidth="180"
            labelAlign="left"
            class="search-panel__form"
          >
            <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="search-panel__actions">
          <u-button size="small" class="search-panel__btn search-panel__btn--reset" @click="searchCancel">
            重置
          </u-button>

          <u-button
            type="success"
            size="small"
            class="search-panel__btn search-panel__btn--confirm"
            @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>
/* 页面容器 */
.page-container {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: $uni-bg-color-grey;
}

/* 顶部区域 */
.top-wrapper {
  background-color: $uni-bg-color;
}

/* Tab 导航栏 */
.tab_box {
  width: 100%;
  height: $tab-height;
  background: $uni-bg-color;

  .tab_item {
    height: $tab-height;
    line-height: $tab-height;
    padding: 0 24rpx;
    font-size: $uni-font-size-base;
    color: $uni-text-color-grey;
  }

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

/* 状态导航标签 */
.nav-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 24rpx;
  background-color: $uni-bg-color;
  border-bottom: 1rpx solid $border-color;

  &__inner {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 16rpx;
  }

  &__item {
    display: flex;
    align-items: center;
    padding: 12rpx 24rpx;
    border-radius: 40rpx;
    font-size: $uni-font-size-sm;
    color: $uni-text-regular-color;
    background-color: $uni-bg-color-grey;
    transition: all 0.2s;

    &--active {
      background-color: $theme-color;
      color: $uni-text-color-inverse;
      box-shadow: 0 4rpx 12rpx rgba(21, 122, 44, 0.3);

      .nav-tabs__badge {
        background-color: rgba(255, 255, 255, 0.3);
        color: $uni-text-color-inverse;
      }
    }
  }

  &__text {
    font-size: $uni-font-size-sm;
    line-height: 1;
  }

  &__badge {
    min-width: 36rpx;
    height: 36rpx;
    line-height: 36rpx;
    text-align: center;
    font-size: $uni-font-size-ssm;
    border-radius: 20rpx;
    padding: 0 8rpx;
    margin-left: 8rpx;
    background-color: #e8e8e8;
    color: $uni-text-regular-color;
  }

  &__filter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    background-color: $uni-bg-color-grey;
    flex-shrink: 0;
    margin-left: 16rpx;

    &:active {
      background-color: $uni-bg-color-hover;
    }
  }

  &__filter-icon {
    width: 40rpx;
    height: 40rpx;
  }
}

/* 列表区域 */
.list-container {
  flex: 1;
  overflow: hidden;
  padding: 12rpx 0;

  .u-list {
    height: 100% !important;
  }
}

/* 空数据占位 */
.empty-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 30vh;
}

/* 底部操作栏 */
.footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  background-color: $uni-bg-color;
  padding: 0 32rpx;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
  /* 适配底部安全区域 */
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

  &__left {
    display: flex;
    align-items: center;
    font-size: $uni-font-size-sm;
    color: $uni-text-color;
  }

  &__right {
    display: flex;
    align-items: center;
  }

  &__btn {
    min-width: 180rpx;
    height: 68rpx;
    border-radius: 34rpx;
    font-size: $uni-font-size-sm;
  }

  &__btn-text {
    font-size: $uni-font-size-sm;
    color: $uni-text-color-inverse;
  }

  &__checkbox--active {
    /* 选中状态样式 */
  }

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

/* 搜索面板 */
.search-panel {
  min-height: 120rpx;
  padding: 20rpx 0;

  &__form {
    padding: 0 32rpx;
  }

  &__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 32rpx 32rpx;
    gap: 24rpx;
  }

  &__btn {
    flex: 1;
    height: 76rpx;
    border-radius: 38rpx;
    font-size: $uni-font-size-sm;

    &--reset {
      background-color: $uni-bg-color-grey;
      color: $uni-text-regular-color;
      border: none;
    }

    &--confirm {
      background-color: $theme-color;
      color: $uni-text-color-inverse;
      border: none;
    }
  }
}
</style>