aiot-app/pages/pda/feeding/single.vue

<template>
  <view class="content-box">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="出库单"
      background-color="#F7F9FA"
      color="#404446"
      @clickLeft="back"
    ></uni-nav-bar>

    <view class="top-wrapper">
      <view class="searchBox rx-bc">
        <input
          v-model="keyWord"
          placeholder="请输入关键字搜索"
          class="searchInput"
        />

        <view class="rx-sc">
          <u-button
            @click="doSearch"
            type="success"
            size="small"
            class="u-reset-button"
            text="搜索"
          >
          </u-button>
        </view>
      </view>
    </view>

    <view class="list_box">
      <u-list @scrolltolower="scrolltolower">
        <checkbox-group
          v-for="(item, index) in newList"
          :key="index"
          @change="(e) => selectVal(e, item, index)"
        >
          <label class="listBox rx-bs">
            <view class="listBox-sel">
              <checkbox
                :value="item.code"
                color="#fff"
                :disabled="item.disabled"
                :checked="item.checked"
              />
            </view>

            <view class="listBox-con">
              <view class="listBox-top rx-bc">
                <view> {{ item.name }}</view>
                <view class="code">{{ item.code }}</view>
              </view>

              <view class="listBox-bottom rx">
                <view
                  v-for="(itm, index) in tableH(item.rootCategoryLevelId)"
                  :key="index"
                  class="items"
                  v-if="!itm.formatter"
                >
                  <text>{{ itm.label }}</text
                  >{{ item[itm.prop] }}
                </view>

                <view
                  v-if="[1, 2, 9].includes(item.rootCategoryLevelId)"
                  class="items"
                >
                  <text>物料代号</text> {{ item.extInfo.materielCode }}
                </view>

                <view
                  v-if="[1, 2, 9].includes(item.rootCategoryLevelId)"
                  class="items"
                >
                  <text>刻码</text> {{ item.extInfo.engrave }}
                </view>
              </view>
            </view>
          </label>
        </checkbox-group>
        <!--  -->
      </u-list>
    </view>

    <view class="bottom-wrapper rx-bc">
      <view> </view>
      <view>
        <u-button
          type="success"
          size="small"
          class="u-reset-button"
          @click="jumpAdd"
        >
          <view> 选择 </view>
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
import { tableHeader } from "./single.js";

import { feedOutInOrder } from "@/api/pda/workOrder.js";
export default {
  data() {
    return {
      taskId: null,
      id: null,
      list: [],
      newList: [],
      memoList: [],

      storageKey: null,

      keyWord: "",
    };
  },

  onLoad(option) {
    this.id = option.id;
    if (option.taskId == "undefined") {
      this.taskId = null;
    } else {
      this.taskId = option.taskId || null;
    }
    if (option.storageKey) {
      this.storageKey = option.storageKey;

      this.memoList = [];

      let _arr = (this.storageKey && uni.getStorageSync(this.storageKey)) || [];
      this.memoList = [
        ..._arr[0].modelList,
        ..._arr[0].equipmentList,
        ..._arr[0].instanceList,
        ..._arr[0].aridRegionList,
        ..._arr[0].turnover,
        ..._arr[0].palletList,
        ..._arr[0].revolvingDiskList,
        ..._arr[0].semiProductList,
      ];
    }

    this.getList();
  },

  onUnload() {
    if (this.storageKey) {
      uni.removeStorage(this.storageKey);
    }
  },

  methods: {
    scrolltolower() {},
    getList() {
      let param = {
        workOrderId: this.id,
        taskId: this.taskId,
      };
      feedOutInOrder(param).then((res) => {
        this.newList.push(
          ...res.map((i) => {
            const checked =
              this.memoList.findIndex((itm) => itm.id === i.id) > -1;

            return {
              checked,
              ...i,
            };
          })
        );
      });

      this.list = this.newList;
    },

    doSearch() {
      let _arr = [];

      _arr = this.list.filter((obj) => {
        if (
          obj.name.includes(this.keyWord) ||
          obj.code.includes(this.keyWord) ||
          (obj.extInfo && obj.extInfo.engrave.includes(this.keyWord)) ||
          (obj.extInfo && obj.extInfo.materielCode.includes(this.keyWord))
        ) {
          return true;
        } else {
          return false;
        }
      });

      this.newList = _arr;
    },

    tableH(type) {
      return tableHeader(type);
    },

    selectVal(e, val, index) {
      this.newList[index].checked = !this.newList[index].checked;

      const idx = this.memoList.findIndex(
        (item) => item.id === this.newList[index].id
      );

      if (this.newList[index].checked) {
        if (idx === -1) {
          this.memoList.push(this.newList[index]);
        }
      } else {
        if (idx > -1) {
          this.memoList.splice(idx, 1);
        }
      }
    },

    jumpAdd() {
      uni.$emit("setSelectList", this.memoList, this.id);
      uni.navigateBack();
    },
  },
};
</script>

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

.searchBox {
  background-color: #dedede;
  height: 90rpx;
  padding: 0 20rpx;

  .menu_icon {
    width: 60rpx;
    height: 60rpx;
    margin-right: 20rpx;
  }

  input {
    height: 70rpx;
    width: 480rpx;
    background: #f9f9f9 !important;
    padding-left: 10rpx;
    border-radius: 5rpx;
  }
}

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

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

.listBox {
  margin-top: 8rpx;
  padding: 8rpx 24rpx;
  background: #fff;

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

  .listBox-con {
    width: 650rpx;
    font-weight: 400;
  }

  .listBox-top {
    margin-top: 6rpx;
    color: #090a0a;
    font-size: 28rpx;
    font-style: normal;
    font-weight: 800;
  }

  .listBox-bottom {
    color: #090a0a;
    font-size: 24rpx;
    font-style: normal;
    flex-wrap: wrap;

    .items {
      width: calc(50% - 1px);
      border-left: 1rpx solid #e3e5e5;
      border-right: 1rpx solid #e3e5e5;
      border-bottom: 1rpx solid #e3e5e5;
      box-sizing: border-box;
      word-break: break-all;

      text {
        display: inline-block;
        background: #f7f9fa;
        padding: 8rpx 10rpx;
        color: #157a2c;
      }

      &:nth-child(1),
      &:nth-child(2) {
        border-top: 1rpx solid #e3e5e5;
        margin-top: 8rpx;
      }
    }
  }
}

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

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