aiot-app/pages/pda/outsourcing/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">
      <uni-easyinput
        prefixIcon="search"
        style="flex: 1"
        v-model="searchFrom.keyWord"
        placeholder="请输入型号、规格、批次号"
      ></uni-easyinput>
      <button class="search_btn" @click="doSearch">搜索</button>
      <button class="search_btn" @click="filterShow = true">筛选</button>
    </view>

    <view class="list_box">
      <u-list
        @scrolltolower="scrolltolower"
        key="list"
        :preLoadScreen="page * 10"
      >
        <u-list-item v-for="(item, index) in dataList" :key="index">
          <workCard
            :item="item"
            :index="index"
            @handleDetail="handleDetail"
          ></workCard>
        </u-list-item>

        <u-list-item v-if="dataList.length === 0">
          <view style="margin-top: 20vh">
            <u-empty iconSize="150" textSize="32" text="暂无工单"> </u-empty>
          </view>
        </u-list-item>
      </u-list>
    </view>

    <searchPopup
      :show="filterShow"
      @close="filterShow = false"
      @search="onFilterSearch"
    ></searchPopup>
  </view>
</template>

<script>
import workCard from "../components/workCard.vue";
import searchPopup from "../components/searchPopup.vue";

import { workorderPage } from "@/api/pda/workOrder.js";
import { getOutsourceList } from "@/api/pda/outsourcing.js";
let [isEnd] = [false];
export default {
  components: {
    workCard,
    searchPopup,
  },
  data() {
    return {
      page: 1,
      size: 10,
      dataList: [],
      filterShow: false,

      searchFrom: {
        keyWord: "",
        workOrderCode: "",
        name: "",
        code: "",
      },
    };
  },
  onShow() {
    this.getList();
  },
  methods: {
    async getList() {
      const params = {
        pageNum: this.page,
        size: this.size,
        ...this.searchFrom,
      };
      Object.keys(params).forEach((k) => {
        if (params[k] === "" || params[k] === null || params[k] === undefined) {
          delete params[k];
        }
      });

      isEnd = false;

      const res = await getOutsourceList(params);

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

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

    doSearch() {
      this.page = 1;
      this.getList();
    },

    onFilterSearch(e) {
      this.searchFrom = { ...this.searchFrom, ...e };
      this.doSearch();
    },

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

    handleDetail(item) {
      let url = "/pages/pda/outsourcing/components/outsourcingDetail";
      url += `?item=${JSON.stringify(item)}`;

      uni.navigateTo({
        url,
      });
    },

    back() {
      uni.navigateBack();
    },
  },
};
</script>

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

.top-wrapper {
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 20rpx 26rpx;
  gap: 20rpx;
  box-sizing: border-box;

  .search_btn {
    padding: 0 26rpx;
    height: 64rpx;
    line-height: 64rpx;
    background: $theme-color;
    color: #fff;
    border-radius: 8rpx;
    font-size: 26rpx;
    white-space: nowrap;
    margin: 0;
  }
}

.list_box {
  overflow: hidden;
  padding: 16rpx 0;

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