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">
      <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">
              {{ dataList.code }}
            </view>
          </view>
          <view class="item">
            <view class="lable rx-cc" style="color: #157a2c">领料时间</view>
            <view class="content rx-bc" style="color: #157a2c">
              {{ dataList.createTime }}
            </view>
          </view>
          <view class="item">
            <view class="lable rx-cc" style="color: #157a2c">领料人</view>
            <view class="content rx-bc" style="color: #157a2c">
              {{ dataList.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="dataList.type == 1"
            >
              自建领料
            </view>
            <view
              class="content rx-bc"
              style="color: #157a2c"
              v-if="dataList.type == 2"
            >
              工单领料
            </view>
            <view
              class="content rx-bc"
              style="color: #157a2c"
              v-if="dataList.type == 3"
            >
              委外领料
            </view>
          </view>
        </view>
      </view>
      <u-list @scrolltolower="scrolltolower" key="dataList" v-if="status == 1">
        <!-- <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">
                {{ dataList.code }}
              </view>
            </view>
            <view class="item">
              <view class="lable rx-cc" style="color: #157a2c">领料时间</view>
              <view class="content rx-bc" style="color: #157a2c">
                {{ dataList.createTime }}
              </view>
            </view>
            <view class="item">
              <view class="lable rx-cc" style="color: #157a2c">领料人</view>
              <view class="content rx-bc" style="color: #157a2c">
                {{ dataList.executorName }}
              </view>
            </view>
          </view>
        </view> -->

        <view
          class="card_box cx-sc"
          v-for="(item, index) in dataList.orderInfoList"
          :key="index"
        >
          <instanceBom :item="item" :isDetails="true"></instanceBom>
        </view>

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

      <u-list @scrolltolower="scrolltolower" key="dataList2" v-if="status == 2">
        <!-- <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">
                {{ dataList.code }}
              </view>
            </view>
            <view class="item">
              <view class="lable rx-cc" style="color: #157a2c">领料时间</view>
              <view class="content rx-bc" style="color: #157a2c">
                {{ dataList.createTime }}
              </view>
            </view>
            <view class="item">
              <view class="lable rx-cc" style="color: #157a2c">领料人</view>
              <view class="content rx-bc" style="color: #157a2c">
                {{ dataList.executorName }}
              </view>
            </view>
          </view>
        </view> -->

        <view
          class="card_box cx-sc"
          v-for="(item, index) in dataList.orderInfoList"
          :key="index"
        >
          <outInstanceBom :item="item" :isDetails="true"></outInstanceBom>
        </view>

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

        <!-- <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 outInstanceBom from "./components/outInstanceBom.vue";
export default {
  components: {
    instanceBom,
    outInstanceBom,
  },
  data() {
    return {
      ids: [],
      dataList: null,
      title: null,
      status: 1,
      item: null,
    };
  },

  onLoad(option) {
    this.status = option.status || 1;
    this.title =
      option.status == 1 ? "领料详情" : option.status == 2 ? " 出库详情" : "";
    this.dataList = JSON.parse(option.item);
    console.log(this.dataList, "领料详情数据");
    // 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;
            });
          }
        });
        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;
      }
    },

    scrolltolower() {},

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

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

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

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

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

.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>