aiot-app/pages/pda/warehousing/components/detailsBom.vue

<template>
  <view class="material">
    <view class="title_box rx-bc">
      <view class="name">内包装</view>
      <view class="lab" v-if="detailList.length"
        >仓库： {{ detailList[0].warehouseName }}</view
      >
    </view>

    <view class="content_table2" v-if="detailList.length">
      <view class="head row rx-sc">
        <view class="item ww10">序号</view>
        <view class="item ww30">数量</view>
        <view class="item ww20">重量</view>
        <view class="item ww40">发货条码</view>
      </view>

      <view class="table">
        <u-list
          @scrolltolower="scrolltolower"
          class="z_list"
          style="height: 100% !important"
        >
          <view class="tr row rx-sc" v-for="(it, idx) in detailList" :key="idx">
            <view class="item ww10 rx-cc">{{ idx + 1 }}</view>
            <view class="item ww30 content_num rx-sc">
              <view
                >{{ it.quantity }} {{ it.measuringUnit }}/
                {{ it.packingCount }} {{ it.packingUnit }}</view
              >
            </view>

            <view class="item ww20">
              {{ it.packingWeight }} {{ it.weightUnit }}
            </view>

            <view class="item ww40">
              {{ it.sendCode }}
            </view>
          </view>
        </u-list>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    detailList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },

  created() {},

  methods: {
    scrolltolower() {},
  },
};
</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;
    }
  }

  .lab {
    font-size: 28rpx;
    font-style: normal;
    font-weight: 400;
    color: $theme-color;
  }
}

.material {
  margin-top: 10rpx;
}

.content_table2 {
  width: 100%;
  margin-top: 16rpx;

  .row {
    width: 100%;

    .item {
      color: #404446;
      font-size: 28rpx;
      padding-left: 12rpx;
    }

    .color157 {
      color: $theme-color;
    }

    .ww30 {
      width: 30%;
    }

    .ww50 {
      width: 50%;
    }

    .ww40 {
      width: 40%;
    }

    .ww90 {
      width: 90%;
    }

    .ww20 {
      width: 20%;
    }

    .ww10 {
      width: 10%;
    }

    .ww30 {
      width: 30%;
    }
  }

  .head {
    height: 64rpx;
    background: #f7f9fa;
    border-top: 2rpx solid #e3e5e5;
    border-left: 2rpx solid #e3e5e5;

    .item {
      height: 64rpx;
      line-height: 64rpx;
      border-right: 2rpx solid #e3e5e5;
      box-sizing: border-box;
    }

    .selectAll {
      color: $theme-color;
      font-size: 24rpx;
    }
  }

  .tr {
    border-top: 2rpx solid #e3e5e5;
    border-left: 2rpx solid #e3e5e5;

    .item {
      font-size: 24rpx;
      min-height: 64rpx;
      display: flex;
      align-items: center;
      border-right: 2rpx solid #e3e5e5;
      box-sizing: border-box;
      white-space: normal;
      word-break: break-all;
    }

    &:last-child {
      border-bottom: 2rpx solid #e3e5e5;
    }
  }
}

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

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

.penalize {
  width: 86rpx;
  line-height: 60rpx;
  background: $theme-color;
  font-size: 24rpx;
  text-align: center;
  color: #fff;
}

.check {
  width: 30rpx;
  height: 30rpx;
}

.z_list {
  max-height: 300rpx;
}
</style>