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

<template>
  <view>
    <view
      class="col userInp"
      style="display: flex; align-items: center; border: 1px solid #e3e5e5"
    >
      <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: {
    objData: {
      type: Object,
      default: () => {},
    },

    measuringUnit: {
      type: String,
      default: "",
    },
  },
  watch: {
    objData: {
      handler(val) {
        this.specText = val.specText || "";

        const createPackageObj = (title, prefix) => ({
          title,
          splitList: val[`${prefix}Package`],
          packageCell: val[`${prefix}PackageCell`],
          packageUnit: val[`${prefix}PackageUnit`],
          conversionUnit: val[`${prefix}ConversionUnit`],
          formedNumLast: val[`${prefix}FormedNumLast`],
        });

        this.list = [
          createPackageObj("最小包装", "minimum"),
          createPackageObj("内包装", "within"),
          createPackageObj("外包装", "outside"),
        ];

        // 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 {
      oneCheck: false,
      twoCheck: false,
      list: [],
      clientEnvironmentId:
        uni.getStorageSync("userInfo") &&
        uni.getStorageSync("userInfo").clientEnvironmentId, // *1 主环境-601环境   2 soll-索尔环境    3 tg-碳谷环境
    };
  },

  created() {},

  methods: {
    handOneCheck() {
      if (this.oneCheck) {
        this.oneCheck = false;
        this.objData.packingReportList.forEach((e) => {
          e.isChecked = false;
        });
      } else {
        this.oneCheck = true;
        this.objData.packingReportList.forEach((e) => {
          e.isChecked = true;
        });
      }
      this.$forceUpdate();
    },

    handleCheck(idx, it) {
      this.$set(
        this.objData.packingReportList[idx],
        "isChecked",
        !it.isChecked
      );
      this.$forceUpdate();
    },

    handTwoCheck() {
      if (this.twoCheck) {
        this.twoCheck = false;
        this.objData.packingReportMarginList.forEach((e) => {
          e.isChecked = false;
        });
      } else {
        this.twoCheck = true;
        this.objData.packingReportMarginList.forEach((e) => {
          e.isChecked = true;
        });
      }
      this.$forceUpdate();
    },
    handleCheckTwo(idx, it) {
      this.$set(
        this.objData.packingReportMarginList[idx],
        "isChecked",
        !it.isChecked
      );
      this.$forceUpdate();
    },

    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>