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">
          <view class="card_box" @click="handleDetail(item)">
            <view class="header rx-sc">
              <view class="round">{{ index + 1 }}</view>
              <view class="orderId">{{ item.unqualifiedProductsCode }}</view>
            </view>

            <view class="row">
              <view class="label">编码</view>
              <view class="value">{{ item.unqualifiedProductsCode }}</view>
            </view>

            <view class="row">
              <view class="label">工单编号</view>
              <view class="value">{{ item.workOrderCode }}</view>
            </view>

            <view class="row">
              <view class="label">批次号</view>
              <view class="value">{{ item.batchNo }}</view>
            </view>

            <view class="row">
              <view class="label">来源编码</view>
              <view class="value">{{ item.sourceCode }}</view>
            </view>

            <view class="row">
              <view class="label">物品名称</view>
              <view class="value"> {{ item.categoryName }}</view>
            </view>

            <view class="row">
              <view class="label">物品编码</view>
              <view class="value">{{ item.categoryCode }} </view>
            </view>

            <view class="row">
              <view class="label">型号 </view>
              <view class="value">{{ item.modelType }} </view>
            </view>

            <view class="row">
              <view class="label"> 规格</view>
              <view class="value"> {{ item.specification }}</view>
            </view>

            <view class="row">
              <view class="label">数量</view>
              <view class="value"
                >{{ item.quantity }}{{ item.measureUnit }}</view
              >
            </view>

            <view class="tag-row row">
              <view class="label">质检类型</view>
              <view class="tag green">{{ getQuality(item) }}</view>
            </view>

            <view class="tag-row row">
              <view class="label">状态</view>
              <view class="tag blue">{{ getDispose(item) }}</view>
            </view>

            <!-- <view class="tag-row">
              <view class="tag green">{{ getQuality(item) }}</view>
              <view class="tag blue">{{ getDispose(item) }}</view>
            </view> -->

            <view class="row">
              <view class="label">处置时间</view>
              <view class="value">{{ item.disposeTime }}</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(item) {
      console.log(item);
    },

    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: 686rpx;
    margin: 0 auto 24rpx;
    background: #fff;
    border-radius: 18rpx;
    padding: 26rpx 30rpx;
    box-shadow: 0 6rpx 28rpx rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    transition: transform 0.15s ease-out;

    .header {
      margin-bottom: 18rpx;
      .round {
        width: 40rpx;
        height: 40rpx;
        line-height: 40rpx;
        border-radius: 50%;
        background: $theme-color;
        color: #fff;
        text-align: center;
        font-size: 22rpx;
      }
      .orderId {
        margin-left: 14rpx;
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
      }
    }

    &:active {
      transform: scale(0.96);
    }

    .row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12rpx;
      font-size: 26rpx;
      color: #333;

      .label {
        color: #888;
        min-width: 160rpx;
        font-weight: 400;
      }

      .value {
        flex: 1;
        font-weight: 500;
        text-align: right;
        word-break: break-all;
      }
    }

    .tag-row {
      display: flex;
      gap: 16rpx;
      margin: 14rpx 0;

      .tag {
        font-size: 22rpx;
        padding: 6rpx 18rpx;
        border-radius: 32rpx;
        line-height: 1;
        font-weight: 500;
      }

      .green {
        background: #e8f6ec;
        color: #157a2c;
      }

      .blue {
        background: #eaf3ff;
        color: #2a68ff;
      }
    }

    .time {
      font-size: 24rpx;
      color: #999;
      margin-top: 8rpx;
      text-align: right;
    }
  }
}
</style>