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

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

    <view class="list_box" v-for="(item, idx) in dataList" :key="idx">
      <view class="card_box cx-sc">
        <view class="content_table">
          <view class="item">
            <view class="lable rx-cc" style="color: #157a2c">领料单号</view>
            <view class="content rx-bc" style="color: #157a2c">
              {{ item.code }}
            </view>
          </view>
          <view class="item">
            <view class="lable rx-cc" style="color: #157a2c">领料时间</view>
            <view class="content rx-bc" style="color: #157a2c">
              {{ item.createTime }}
            </view>
          </view>
          <view class="item">
            <view class="lable rx-cc" style="color: #157a2c">领料人</view>
            <view class="content rx-bc" style="color: #157a2c">
              {{ item.executorName }}
            </view>
          </view>

          <view class="item">
            <view class="lable rx-cc" style="color: #157a2c">类型</view>
            <view
              class="content rx-bc"
              style="color: #157a2c"
              v-if="item.type == 1"
            >
              自建领料
            </view>
            <view
              class="content rx-bc"
              style="color: #157a2c"
              v-if="item.type == 2"
            >
              工单领料
            </view>
            <view
              class="content rx-bc"
              style="color: #157a2c"
              v-if="item.type == 3"
            >
              委外领料
            </view>
          </view>
        </view>
      </view>
      <u-list
        @scrolltolower="scrolltolower"
        key="dataList-catch"
        v-if="status == 1"
        height="auto"
        style="padding-bottom: 10rpx"
      >
        <view v-if="item.type == 2">
          <view
            class="card_box cx-sc"
            v-for="(it, index) in orderInfoListSafe(item)"
            :key="index"
          >
            <instanceBom :item="it" :isDetails="true"></instanceBom>
          </view>

          <u-list-item
            v-if="orderInfoListSafe(item).length == 0"
            style="margin-top: 20vh"
          >
            <u-empty iconSize="150" textSize="32" text="暂无数据"> </u-empty>
          </u-list-item>
        </view>

        <view v-if="item.type == 1">
          <view
            class="card_box cx-sc"
            v-for="(it, index) in detailListSafe(item)"
            :key="index"
          >
            <instanceBomTwo :item="it" :isDetails="true"></instanceBomTwo>
          </view>

          <u-list-item
            v-if="detailListSafe(item).length == 0"
            style="margin-top: 20vh"
          >
            <u-empty iconSize="150" textSize="32" text="暂无数据"> </u-empty>
          </u-list-item>
        </view>
      </u-list>

      <u-list
        @scrolltolower="scrolltolower"
        key="dataList2"
        v-if="status == 2"
        height="auto"
        style="padding-bottom: 10rpx"
      >
        <view v-if="item.type == 1">
          <view
            class="card_box cx-sc"
            v-for="(it, index) in detailListSafe(item)"
            :key="index"
          >
            <outInstanceBom :item="it" :isDetails="true"></outInstanceBom>
          </view>

          <u-list-item
            v-if="detailListSafe(item).length == 0"
            style="margin-top: 20vh"
          >
            <u-empty iconSize="150" textSize="32" text="暂无数据"> </u-empty>
          </u-list-item>
        </view>

        <view v-if="item.type == 2">
          <view
            class="card_box cx-sc"
            v-for="(it, index) in orderInfoListSafe(item)"
            :key="index"
          >
            <outInstanceBom :item="it" :isDetails="true"></outInstanceBom>
          </view>

          <u-list-item
            v-if="orderInfoListSafe(item).length == 0"
            style="margin-top: 20vh"
          >
            <u-empty iconSize="150" textSize="32" text="暂无数据"> </u-empty>
          </u-list-item>
        </view>

        <!-- <view class="card_box cx-sc">
          <outInstanceBom :list="dataList" :isDetails="true"></outInstanceBom>
        </view>

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

    <view class="bottom-wrapper">
      <!-- <view class="btn_box" @click="save">一键报工</view> -->
    </view>
  </view>
</template>

<script>
import { tableHeader } from "../../common.js";
import { workorderPage } from "@/api/pda/workOrder.js";

import {
  pickDetails,
  pickOutInOrder,
  queryOutWordDetail,
} from "@/api/pda/picking.js";

import instanceBom from "./components/instanceBom.vue";
import instanceBomTwo from "../../selfBuiltPickOrder/components/instanceBom.vue";
import outInstanceBom from "./components/outInstanceBom.vue";
export default {
  components: {
    instanceBom,
    instanceBomTwo,
    outInstanceBom,
  },
  data() {
    return {
      ids: [],
      dataList: [],
      title: null,
      status: 1,
      item: null,
    };
  },

  onLoad(option) {
    this.status = option.status || 1;
    console.log(option.id, "optionoptionoption");
    if (option.item) {
      this.title =
        option.status == 1 ? "领料详情" : option.status == 2 ? " 出库详情" : "";
      const parsed = JSON.parse(option.item);

      this.dataList = Array.isArray(parsed)
        ? parsed.filter(Boolean)
        : parsed
          ? [parsed]
          : [];
    } else {
      this.ids = [option.id];
      this.getList();
    }
  },

  methods: {
    async getList() {
      let list = [];

      if (this.status == 1) {
        const res = await pickDetails(this.ids);
        list = res;

        // list.forEach((m) => {
        //   if (m.orderInfoList.length > 0) {
        //     m.orderInfoList.forEach((o) => {
        //       let _arr = [];
        //       _arr = [...o.bomDetailDTOS, ...o.instanceList];
        //       _arr = _arr.sort(
        //         (a, b) => a.rootCategoryLevelId - b.rootCategoryLevelId,
        //       );
        //       o["arr"] = _arr;
        //     });
        //   }
        // });
        list.forEach((m) => {
          if (Array.isArray(m.orderInfoList) && m.orderInfoList.length > 0) {
            m.orderInfoList.forEach((o) => {
              let _arr = [];
              _arr = [
                ...(Array.isArray(o.bomDetailDTOS) ? o.bomDetailDTOS : []),
                ...(Array.isArray(o.instanceList) ? o.instanceList : []),
              ];
              _arr.sort(
                (a, b) => a.rootCategoryLevelId - b.rootCategoryLevelId,
              );
              o.arr = _arr;
            });
          }
        });
        this.dataList = list;
      } else if (this.status == 2) {
        console.log(this.ids.join(","));
        const res = await queryOutWordDetail({
          pickOrderId: this.ids.join(","),
        });
        console.log(res, "11111");

        // const res = await pickOutInOrder({
        //   workOrderIds: this.ids,
        // });

        // this.dataList = res;
      }
    },

    orderInfoListSafe(item) {
      console.log(item, "itemitemitem");
      return Array.isArray(item?.orderInfoList) ? item.orderInfoList : [];
    },
    detailListSafe(item) {
      console.log(item, "itemitemitem");
      return Array.isArray(item?.detailList) ? item.detailList : [];
    },

    scrolltolower() {},

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

    save() {},
  },
};
</script>

<style lang="scss" scoped>
.content-box {
  /* 让页面按内容自然撑开，避免内部列表被压缩 */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.list_box {
  /* 不再参与 flex 等分高度，每个单据块按内容自适应 */
  padding: 16rpx 0;
}

.bottom-wrapper {
  .btn_box {
    width: 750rpx;
    height: 88rpx;
    line-height: 88rpx;
    background: $theme-color;
    text-align: center;
    font-size: 36rpx;
    font-style: normal;
    font-weight: 400;
    color: #fff;
  }
}

.card_box {
  margin-top: 10rpx;

  .word_order {
    height: 64rpx;
    width: 706rpx;
    background: $theme-color;
    font-size: 28rpx;
    color: #fff;
    line-height: 64rpx;
    padding-left: 40rpx;
    box-sizing: border-box;
  }

  .content_table {
    margin-top: 10rpx;
    width: 702rpx;
    border: 2rpx solid $border-color;

    .item {
      display: flex;
      border-bottom: 2rpx solid $border-color;

      .lable {
        width: 132rpx;
        text-align: center;
        background-color: #f7f9fa;
        font-size: 26rpx;
        border-right: 2rpx solid $border-color;
        flex-shrink: 0;
      }

      .ww80 {
        width: 80rpx;
      }

      .content {
        width: 518rpx;
        min-height: 64rpx;
        font-size: 28rpx;
        line-height: 28rpx;
        font-style: normal;
        font-weight: 400;
        padding: 18rpx 8rpx;
        box-sizing: border-box;
        word-wrap: break-word;
        flex-grow: 1 !important;
      }

      .content_num {
        display: flex;
        align-items: center;
        padding: 0 4rpx;

        /deep/ .uni-input-input {
          width: 480rpx;
          border: 2rpx solid #f0f8f2;
          background: #f0f8f2;
          color: $theme-color;
        }

        .unit {
          padding: 0 4rpx;
          font-size: 24rpx;
          color: #404446;
        }
      }

      .pd4 {
        padding: 4rpx 8rpx;
      }

      &:last-child {
        border-bottom: none;
      }
    }

    .ww55 {
      width: 55%;
    }

    .ww45 {
      width: 45%;
    }
  }
}
</style>