aiot-app/pages/pda/picking/bill/components/outInstanceBom.vue

<template>
  <view>
    <view class="material rx-ss" v-for="(mate, idx) in outWorkList">
      <view class="content_table">
        <view class="item">
          <view class="lable rx-cc">批次号</view>
          <view class="content">{{ mate.batchNo }}</view>
        </view>

        <view class="item">
          <view class="lable rx-cc">领料类型</view>
          <view class="content">
            {{ typeName[Number(mate.rootCategoryLevelId)] }}</view
          >
        </view>

        <view class="item">
          <view class="lable rx-cc">编码</view>
          <view class="content">{{ mate.categoryCode }}</view>
        </view>

        <view class="item">
          <view class="lable rx-cc">名称</view>
          <view class="content" style="color: rgb(255 170 42)">{{
            mate.name
          }}</view>
        </view>

        <view class="item">
          <view class="lable rx-cc">型号</view>
          <view class="content">{{ mate.modelType }}</view>
        </view>

        <view class="item">
          <view class="lable rx-cc">规格</view>
          <view class="content">{{ mate.specification }}</view>
        </view>

        <view class="item">
          <view class="lable rx-cc">牌号</view>
          <view class="content">{{ mate.brandNo }}</view>
        </view>

        <view class="item">
          <view class="lable rx-cc">数量</view>
          <view class="content content_num">
            <view class="unit">{{ mate.feedQuantity }}{{ mate.unit }}</view>
          </view>
        </view>

        <view class="item">
          <view class="lable rx-cc">供应商</view>
          <view class="content">{{ mate.supplierName }}</view>
        </view>

        <view class="item">
          <view class="lable rx-cc">领料仓库</view>
          <view class="content" style="color: rgb(255 170 42)">
            {{ mate.warehouseName }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { tableHeader } from "./outCommon.js";
import { queryOutWordDetail } from "@/api/pda/picking.js";
import { typeName } from "@/pages/pda/feeding/common.js";
export default {
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      typeName,
      outWorkList: [],
    };
  },

  created() {
    this.getOutWorkList();
  },

  methods: {
    async getOutWorkList() {
      if (!this.item?.pickOrderId) {
        this.outWorkList = [];
        return;
      }
      await queryOutWordDetail({
        pickOrderId: this.item.pickOrderId,
      }).then((res) => {
        this.outWorkList = Array.isArray(res) ? res : [];
      });
    },

    tableH(type) {
      return tableHeader(type);
    },
  },
};
</script>

<style lang="scss" scoped>
.material {
  margin-top: 10rpx;

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

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

      .lable {
        width: 162rpx;
        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: 200rpx;
          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>