aiot-app/pages/pda/feeding/components/productsBom.vue

<template>
  <view>
    <view class="title_box rx-bc">
      <view class="name">在制品{{ productsObj.length }}个</view>
    </view>

    <view v-for="(item, index) of productsObj" :key="index">
      <view class="material rx-ss">
        <view class="content_table">
          <view class="item">
            <view class="lable rx-cc">名称</view>
            <view class="content"> {{ item.name + "-在制品" }} </view>
          </view>

          <view class="item">
            <view class="lable rx-cc">批次号</view>
            <view class="content"> {{ item.batchNo }} </view>
          </view>

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

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

          <view class="item">
            <view class="lable rx-cc">数量</view>
            <view class="content">
              {{ item.extInfo.sourceQuantity || 0 }}
              {{ item.unit }}
            </view>
          </view>

          <view class="item">
            <view class="lable rx-cc">重量</view>
            <view class="content">
              {{ item.extInfo.newWeight || 0 }}{{ item.extInfo.weightUnit }}
            </view>
          </view>

          <view class="item">
            <view class="lable rx-cc">设备名称</view>
            <view class="content"> {{ item.deviceName }} </view>
          </view>

          <view class="item">
            <view class="lable rx-cc">炉次号</view>
            <view class="content"> {{ item.extInfo.heatNumber }} </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { method } from "lodash";
export default {
  props: {
    productsObj: {
      type: Array,
      default: () => {},
    },

    itemObj: {
      type: Object,
      default: () => {},
    },
  },

  mounted() {
    console.log(this.productsObj, "this.productsObj");
  },
  methods: {
    maxFeedQuantity() {
      if (this.productsObj.feedQuantity > this.itemObj.formingNum) {
        this.$set(this.productsObj, "feedQuantity", this.itemObj.formingNum);
      }
    },
  },
};
</script>

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

  .name {
    font-size: 28rpx;
    font-style: normal;
    font-weight: 400;
    color: $theme-color;
    padding-left: 20rpx;

    position: relative;

    &:before {
      position: absolute;
      content: "";
      left: 0rpx;
      top: 0rpx;
      bottom: 0rpx;
      width: 4rpx;
      height: 28rpx;
      background: $theme-color;
      margin: auto;
    }
  }
}

.material {
  margin-top: 10rpx;

  .left {
    width: 40rpx;
  }

  .zdy_check {
    width: 30rpx;
    height: 30rpx;
    border: 2rpx solid #c8c9cc;
    border-radius: 4rpx;
  }

  .check_active {
    background: $theme-color;
    border: 2rpx solid $theme-color;

    /deep/ .u-icon__icon {
      color: #fff !important;
    }
  }

  .content_table {
    width: 722rpx;
    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: 200rpx;
          border: 2rpx solid #f0f8f2;
          background: #f0f8f2;
          color: $theme-color;
        }

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

      .ww400 {
        /deep/ .uni-input-input {
          width: 400rpx;
        }
      }

      .pd4 {
        padding: 4rpx 8rpx;
      }

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

    .ww55 {
      width: 55%;
    }

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