aiot-app/pages/pda/jobBooking/components/packingBomDetails.vue

<template>
  <view>
    <view
      class="col userInp"
      style="
        display: flex;
        align-items: center;
        border: 1px solid #e3e5e5;
        border-top: 0;
      "
    >
      <text class="label lable150 rx-cc" style="border-right: 1px solid #e3e5e5"
        >规格名称：</text
      >
      <!-- multiple -->
      <view style="padding-left: 5rpx">{{ specText }}</view>
    </view>
    <view v-for="(item, i) in list" :key="i">
      <view class="title_box rx-bc">
        <view class="name">{{ item.title }} </view>
      </view>

      <view class="material">
        <view class="content_table">
          <view class="item">
            <view class="lable rx-cc">包装总数 </view>
            <view class="content content_num">
              <input
                class="uni-input"
                v-model="item.formedNumLast"
                type="number"
                disabled
              />
              <view class="unit">{{ item.packageUnit }}</view>
            </view>
          </view>

          <view class="item rx-sc">
            <view class="rx ww55">
              <view class="lable lable150 rx-cc">{{ item.title }}单元</view>
              <view class="content content_num">
                <input class="uni-input" v-model="item.packageCell" disabled />
                <view style="max-width: 100rpx; font-size: 24rpx">{{
                  item.packageUnit
                }}</view>
              </view>
            </view>

            <view class="rx ww45">
              <view class="rx-cc ww80">
                /<view style="max-width: 100rpx; font-size: 24rpx">{{
                  item.conversionUnit
                }}</view>
              </view>
              <view class="content rx-sc"> </view>
            </view>
          </view>
        </view>

        <view class="content_table2" v-if="item.splitList.length > 0">
          <view class="head row rx-sc">
            <view class="item ww10">序号</view>
            <view class="item ww30">数量</view>
            <view class="item ww50">条码</view>
            <view class="item ww10"></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 item.splitList"
                :key="idx"
              >
                <view class="item ww10 rx-cc">{{ it.computeSize }}</view>
                <view class="item ww30 content_num rx-sc">
                  {{ it.quantity }} {{ it.unit }}/{{ it.packageUnit }}
                </view>
                <view class="item ww50">
                  {{ it.code }}
                </view>
                <view
                  class="item ww10 rx-cc"
                  v-if="!it.parentId"
                  @click="handleCheck(idx, it)"
                >
                </view>
              </view>
            </u-list>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    packInfo: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    packInfo: {
      handler(val) {
        this.specText = val.specText || "";

        let minimumObj = {
          title: "最小包装",
          splitList: val.minimumPackage,
          packageCell: val.minimumPackageCell,
          packageUnit: val.minimumPackageUnit,
          conversionUnit: val.minimumConversionUnit,
          formedNumLast: val.minimumFormedNumLast,
        };
        let withinObj = {
          title: "内包装",
          splitList: val.withinPackage,
          packageCell: val.withinPackageCell,
          packageUnit: val.withinPackageUnit,
          conversionUnit: val.withinConversionUnit,
          formedNumLast: val.withinFormedNumLast,
        };
        let outsideObj = {
          title: "外包装",
          splitList: val.outsidePackage,
          packageCell: val.outsidePackageCell,
          packageUnit: val.outsidePackageUnit,
          conversionUnit: val.outsideConversionUnit,
          formedNumLast: val.outsideFormedNumLast,
        };
        let arr = [minimumObj, withinObj, outsideObj];

        this.list = arr;

        console.log(this.list);
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      specText: "",
      list: [],
    };
  },

  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;
    }
  }
}

.content_table {
  width: 100%;
  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;
    }

    .lable220 {
      width: 220rpx !important;
      font-size: 24rpx;
    }

    .lable150 {
      width: 156rpx !important;
      font-size: 24rpx;
    }

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

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

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

  .ww55 {
    width: 55%;
  }

  .ww45 {
    width: 45%;
  }
}
.material {
  margin-top: 10rpx;
}

.label {
  display: flex;
  height: 70rpx;
  width: 86px !important;
  font-size: 13px;
  align-items: center;
  justify-content: center;
  background-color: #f7f9fa;
}

.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%;
    }

    .ww90 {
      width: 90%;
    }

    .ww15 {
      width: 15%;
    }

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

  .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: 500rpx;
}
</style>