aiot-app/pages/pda/nonconforming/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-section>
        <uni-easyinput
          prefixIcon="search"
          style="width: 430rpx"
          v-model="searchFrom.keyWord"
          placeholder="请输入"
        >
        </uni-easyinput>
      </uni-section>

      <button class="search_btn" @click="doSearch">搜索</button>

      <!-- <button class="search_btn" @click="addMaterial">新增</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">
          <!-- <itemCard :item="item"></itemCard> -->
          <view class="card_box" @click="handleDetail">
            <view class="item_box rx-bc">
              <view class="item_one perce100 rx-sc">
                <view class="lable">编码：</view>
                <view>{{ item.unqualifiedProductsCode }}</view>
              </view>
            </view>

            <view class="item_box rx-bc">
              <view class="item_one perce100 rx-sc">
                <view class="lable">工单编号：</view>
                <view>{{ item.workOrderCode }}</view>
              </view>
            </view>

            <view class="item_box rx-bc">
              <view class="item_one perce100 rx-sc">
                <view class="lable">批次号：</view>
                <view>{{ item.batchNo }}</view>
              </view>
            </view>

            <view class="item_box rx-bc">
              <view class="item_one perce100 rx-sc">
                <view class="lable">来源编码：</view>
                <view>{{ item.sourceCode }}</view>
              </view>
            </view>

            <view class="item_box rx-bc">
              <view class="item_one perce100 rx-sc">
                <view class="lable">物品编码：</view>
                <view>{{ item.categoryCode }}</view>
              </view>
            </view>

            <view class="item_box rx-bc">
              <view class="item_one perce100 rx-sc">
                <view class="lable">物品名称：</view>
                <view>{{ item.categoryName }}</view>
              </view>
            </view>

            <view class="item_box rx-bc">
              <view class="item_one perce50 rx-sc">
                <view class="lable">型号：</view>
                <view>{{ item.modelType }}</view>
              </view>

              <view class="item_one perce50 rx-sc">
                <view class="lable">规格：</view>
                <view> {{ item.specification }}</view>
              </view>
            </view>

            <view class="item_box rx-bc">
              <view class="item_one perce50 rx-sc">
                <view class="lable">牌号：</view>
                <view>{{ item.brandNum }}</view>
              </view>

              <view class="item_one perce50 rx-sc">
                <view class="lable">数量：</view>
                <view class="text">
                  {{ item.quantity }}{{ item.measureUnit }}</view
                >
              </view>
            </view>

            <view class="item_box rx-bc">
              <view class="item_one perce50 rx-sc">
                <view class="lable">质检类型：</view>
                <view class="text">{{ getQuality(item) }}</view>
              </view>

              <view class="item_one perce50 rx-sc">
                <view class="lable">状态：</view>
                <view> {{ getDispose(item) }}</view>
              </view>
            </view>

            <view class="item_box rx-bc">
              <view class="item_one perce100 rx-sc">
                <view class="lable">处置时间：</view>
                <view>{{ item.disposeTime }}</view>
              </view>
            </view>
          </view>
        </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>
  </view>
</template>

<script>
import { getList } from "@/api/pda/nonconforming.js";
import { getByCode } from "@/api/pda/common.js";
import itemCard from "../components/itemCard.vue";

let [isEnd] = [false];
export default {
  components: {
    itemCard,
  },

  data() {
    return {
      searchFrom: {
        keyWord: "",
      },
      page: 1,
      size: 10,
      dataList: [],
      qualityList: [],
      disposeList: [],
    };
  },

  onLoad(option) {
    // this.produceFn();
  },

  onShow() {
    this.getDisposeList("dispose_status");
    this.getQualityList("inspection_plan_type");
    this.getList();
  },

  created() {
    // this.getByCodeFn();
  },

  methods: {
    async getList() {
      let params = {
        pageNum: this.page,
        size: this.size,
        ...this.searchFrom,
      };

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

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

      this.dataList.push(...res.list);

      isEnd = this.dataList.length >= res.count;
    },

    produceFn() {
      this.getList();
    },

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

    doSearch() {
      this.getList();
    },

    addMaterial() {},

    handleDetail() {},

    async getDisposeList(code) {
      let res = await getByCode(code);
      if (res.length != 0) {
        let list = res.map((item) => {
          let key = Object.keys(item)[0];
          return { value: Number(key), label: item[key] };
        });
        this.disposeList = list;
      }
    },
    async getQualityList(code) {
      let res = await getByCode(code);
      if (res.length != 0) {
        let list = res.map((item) => {
          let key = Object.keys(item)[0];
          return { value: Number(key), label: item[key] };
        });
        this.qualityList = list;
      }
    },

    getDispose(item) {
      const data = this.disposeList.find((it) => it.value == item.status);

      return data ? data.label : "";
    },

    getQuality(item) {
      const data = this.qualityList.find((it) => it.value == item.qualityType);
      return data ? data.label : "";
    },
  },
};
</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;
  width: 750rpx;
  height: 88rpx;
  padding: 16rpx 32rpx;
  align-items: center;
  gap: 16rpx;

  /deep/.uni-section {
    margin-top: 0px;
  }

  /deep/.uni-section-header {
    padding: 0px;
  }

  .search_btn {
    width: 110rpx;
    height: 60rpx;
    line-height: 60rpx;
    padding: 0 10rpx;
    background: $theme-color;
    font-size: 24rpx;
    color: #fff;
    margin: 0;
    margin-left: 16rpx;
  }

  .menu_icon {
    width: 44rpx;
    height: 44rpx;
    margin-left: 14rpx;
  }
}

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

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

  .card_box {
    width: 750rpx;
    padding: 16rpx 32rpx;
    box-sizing: border-box;
    border-bottom: 2rpx solid #e1e1e1;

    .item_box {
      margin-top: 10rpx;

      .round {
        width: 40rpx;
        height: 40rpx;
        line-height: 40rpx;
        border-radius: 50%;
        background: $theme-color;
        color: #fff;
        text-align: center;
        font-size: 20rpx;
      }

      .orderId {
        color: #000;
        font-family: PingFang HK;
        font-size: 28rpx;
        font-style: normal;
        font-weight: 600;
        margin-left: 16rpx;
      }

      .item_one {
        width: 100%;
        font-size: 26rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 38rpx;
        word-wrap: break-word;

        .text {
          color: #157a2c;
        }
      }

      .item-right {
        flex: 1;
      }

      .gylx {
        color: $theme-color;
      }

      .perce50 {
        width: 50%;
      }

      .perce100 {
        width: 100%;
      }
    }
  }
}
</style>