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

<template>
  <view>
    <view class="title_box rx-bc">
      <view class="name">工艺参数</view>
    </view>

    <view>
      <view class="content_table2">
        <view class="head row rx-sc">
          <view class="item ww40">参数名</view>
          <view class="item ww40">参数值</view>
          <view class="item ww20">单位</view>
        </view>

        <view class="table">
          <view class="tr row rx-sc" v-for="(it, idx) in newList" :key="idx">
            <view class="item ww40">
              {{ it.name ? it.name : it.extInfo.name }}
            </view>
            <view class="item ww40" v-if="it.textType != 3">
              {{ it.defaultValue ? it.defaultValue : it.extInfo.defaultValue }}
              <!-- {{ it.defaultValue }} -->
            </view>

            <view class="item ww40" v-if="it.textType == 3">
              <!-- {{ it.minValue }} - {{ it.maxValue }} -->
              {{ it.minValue ? it.minValue : it.extInfo.minValue }} -
              {{ it.maxValue ? it.maxValue : it.extInfo.maxValue }}
            </view>
            <view class="item ww20">
              <!-- {{ it.unitName }} -->
              {{ it.unitName ? it.unitName : it.extInfo.unitName }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    wordItem: {
      type: Object,
      default: () => {},
    },
  },

  watch: {
    list: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.newList = newVal;
      },
    },
  },

  data() {
    return {
      recycleQuantity: "",
      newList: [],
    };
  },

  methods: {
    quantInt(index, idx, it) {
      if (it.quantity >= 1) {
        this.$set(
          this.newList[index].extInfo.positionList[idx],
          "workOrderCode",
          this.wordItem.code
        );
        this.$set(
          this.newList[index].extInfo.positionList[idx],
          "categoryCode",
          this.wordItem.productCode
        );
      } else {
        this.$set(
          this.newList[index].extInfo.positionList[idx],
          "workOrderCode",
          ""
        );
        this.$set(
          this.newList[index].extInfo.positionList[idx],
          "categoryCode",
          ""
        );
        this.$set(this.newList[index].extInfo.positionList[idx], "quantity", 0);
      }
    },

    handleScan(index) {
      this.$emit("handleScan", index, "turnover");
    },

    getDelete(index) {
      this.list.splice(index, 1);
    },
  },
};
</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_table2 {
  width: 100%;
  margin-top: 10rpx;

  .row {
    width: 100%;

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

    .color157 {
      color: $theme-color;
    }

    .ww40 {
      width: 40%;
    }

    .ww20 {
      width: 20%;
    }
  }

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