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

<template>
  <view>
    <view class="title_box rx-bc">
      <view class="name">报工信息</view>
    </view>

    <view class="material">
      <view class="content_table">
        <!-- <view class="item rx-sc"
					v-if="Object.prototype.hasOwnProperty.call(item, 'product') && clientEnvironmentId != 3">
					<view class="rx ">
						<view class="lable lable220 rx-cc ">投料数量</view>
						<view class="content">

							{{ item.product[0] && item.product[0].feedQuantity }}
						</view>
					</view>
				</view> -->

        <view class="item rx-sc">
          <view class="rx ww55">
            <view class="lable lable150 rx-cc">要求生产数量</view>
            <view class="content rx-sc">
              <view>{{ item.formingNum }}</view>
              <view class="unit">{{ item.unit }}</view>
            </view>
          </view>

          <view class="rx ww45">
            <view class="lable rx-cc ww80">重量</view>
            <view class="content content_num">
              <view>{{ item.formingWeight }}</view>
              <view class="unit">{{ item.weightUnit }}</view>
            </view>
          </view>
        </view>

        <view class="item rx-sc">
          <view class="rx ww55">
            <view class="lable lable150 rx-cc">合格品数量</view>
            <view class="content content_num">
              <input
                class="uni-input"
                v-model="formedNum"
                :disabled="isDetails"
                @input="blurNum(item.workReportInfo)"
                type="digit"
              />
              <view class="unit">{{ item.unit }}</view>
            </view>
          </view>

          <view class="rx ww45">
            <view class="lable rx-cc ww80">重量</view>
            <view class="content content_num">
              <input
                class="uni-input"
                v-model="formedWeight"
                type="digit"
                :disabled="isDetails"
                @input="blurWeight()"
              />
              <view class="unit">{{ item.weightUnit }}</view>
            </view>
          </view>
        </view>

        <view
          class="item rx-sc"
          v-for="(not, notIndex) in notFormedList"
          :key="notIndex"
        >
          <view class="rx ww55">
            <view class="lable lable150 rx-cc">不合格数量</view>
            <view class="content content_num">
              <!-- //详情 -->
              <input
                class="uni-input"
                v-model="item.workReportInfo.notFormedNum"
                type="digit"
                :disabled="isDetails"
                v-if="isDetails"
                @input="changeNum"
              />

              <input
                class="uni-input"
                v-model="notFormedNum"
                type="number"
                v-else
                @input="blurNum2(item.workReportInfo)"
              />
              <view class="unit">{{ item.unit }}</view>
            </view>
          </view>

          <view class="rx ww45">
            <view class="lable rx-cc ww80">重量</view>
            <view class="content content_num">
              <input
                class="uni-input"
                v-model="item.workReportInfo.notFormedWeight"
                type="digit"
                :disabled="isDetails"
                v-if="isDetails"
              />
              <input
                class="uni-input"
                v-model="notFormedWeight"
                type="digit"
                :disabled="isDetails"
                v-else
                @input="blurWeight2()"
              />
              <view class="unit">{{ item.weightUnit }}</view>

              <!-- <view class="penalize" v-if='!isDetails'
								:style="{ background: not.warehouseId ? '#FFA07A' : '' }" @click="penalize">处置</view> -->
              <!-- <view class="penalize" v-if='isDetails'
								:style="{ background: not.warehouseId ? '#FFA07A' : '' }"
								@click="handleView(isDetails ? not.warehouseName : item.warehouseName)">查看</view> -->
            </view>
          </view>
        </view>
        <view class="item rx-sc">
          <view class="rx ww55">
            <view class="lable lable150 rx-cc">报工备注</view>
            <view class="content content_num" style="width: 100%">
              <input
                class="uni-input"
                v-model="item.workReportInfo.remark"
                :disabled="isDetails"
                type="text"
              />
            </view>
          </view>
          <!-- v-if="clientEnvironmentId==2" -->
          <view class="rx ww45" v-if="clientEnvironmentId == 2">
            <view class="lable ww80 rx-cc">批次号</view>
            <view class="content content_num" style="width: 100%">
              {{ item.batchNo }}
              <input
                class="uni-input"
                v-model="batchNo"
                @input="batchNoNew"
                :disabled="isDetails"
                type="text"
              />
            </view>
          </view>

          <view
            class="unit-btn"
            @click="singleQuery"
            v-if="
              item.currentTaskDiagram &&
              item.currentTaskDiagram.isFirstTask == 1
            "
            >创建在制品</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { createInProductBatchTG } from "@/api/pda/jobBooking.js";
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    notFormed: {
      type: Array,
      default: () => [],
    },
    isDetails: {
      type: Boolean,
      default: false,
    },
  },

  watch: {
    notFormed: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.notFormedList = newVal;
      },
    },
    // item:{
    // 	immediate: true,
    // 	deep: true,
    // 	handler(newVal) {
    // 		console.log('ccccc吃饭了',newVal)
    // 		this.$forceUpdate()
    // 	}
    // }
  },

  data() {
    return {
      batchNo: "",
      notFormedList: [],
      clientEnvironmentId:
        uni.getStorageSync("userInfo") &&
        uni.getStorageSync("userInfo").clientEnvironmentId, // *1 主环境-601环境   2 soll-索尔环境    3 tg-碳谷环境
      formedNum: "",
      formedWeight: "",
      notFormedNum: "",
      notFormedWeight: "",
    };
  },
  created() {
    if (this.isDetails) {
      this.notFormedList = this.notFormedList.map((m) => {
        return {
          notFormedNum: Number(m.quantity),
          notFormedWeight: m.weight,
          ...m,
        };
      });
    }
  },
  methods: {
    fWeightInput(formedWeight, notFormedWeight) {
      this.formedWeight = formedWeight;
      this.$forceUpdate();
    },
    formedTotal(
      formedNumCount,
      formedWeightCount,
      notFormedNumCount,
      notFormedWeightCount
    ) {
      this.formedNum = formedNumCount;
      this.formedWeight = formedWeightCount;
      (this.notFormedNum = notFormedNumCount),
        (this.notFormedWeight = notFormedWeightCount),
        this.$forceUpdate();
    },
    batchNoNew(e) {
      this.item.workReportInfo.batchNo = this.item.batchNo + e.target.value;
    },

    setFormedNum(num) {
      this.item.workReportInfo.formedNum = num;

      let weight =
        Number(this.item.workReportInfo.formedNum) *
        Number(this.item.singleWeight) *
        Number(this.item.weightMultiple);

      if (["G", "g", "克"].includes(this.item.singleWeightUnit)) {
        weight = parseFloat((weight / 1000).toFixed(2));
      } else {
        weight = parseFloat(weight.toFixed(2));
      }

      this.$set(this.item.workReportInfo, "formedWeight", weight);

      this.$forceUpdate();
    },

    penalize() {
      this.$emit("penalize", null);
    },

    handleView(name) {
      uni.showToast({
        icon: "none",
        title: name || "未设置",
      });
    },

    blurNum(value) {
      this.$set(this.item.workReportInfo, "formedNum", this.formedNum);
      let total = 0;
      //匹配非数字
      let val = value.formedNum;
      let reg = new RegExp("([^0-9]*)", "g");
      let ma = val.match(reg);
      //如果有非数字，替换成""
      if (ma.length > 0) {
        for (let k in ma) {
          if (ma[k] != "") {
            val = val.replace(ma[k], 0);
          }
        }
      }
      //可以为0，但不能以0开头
      if (val.startsWith("0") && val.length > 1) {
        val = val.substring(1, val.length);
      }
      value.formedNum = val;

      if (this.item.currentTaskDiagram.isFirstTask) {
        // formingNum 生产数量  feedQuantity   this.item.product[0] //投料数量
        if (value.formedNum > this.item.formingNum) {
          this.$set(
            this.item.workReportInfo,
            "workReportInfo",
            this.item.formingNum
          );
          this.$set(this.notFormedList[0], "notFormedNum", 0);
          this.formedNum = 0;
          this.$forceUpdate();
          this.notForme();
          return uni.showToast({
            icon: "none",
            title: "合格品数量不能大于要求生产数量",
          });
        }
      } else {
        if (this.item.product.length) {
          if (value.formedNum > this.item.product[0].feedQuantity) {
            console.log(this.item.product[0].feedQuantity);
            this.$set(
              this.item.workReportInfo,
              "workReportInfo",
              this.item.product[0].feedQuantity
            );
            this.$set(this.notFormedList[0], "notFormedNum", 0);
            this.formedNum = 0;
            this.$forceUpdate();
            this.notForme();
            return uni.showToast({
              icon: "none",
              title: "合格品数量不能大于投料数量",
            });
          }
        }
      }

      if (
        this.item.product[0] &&
        this.item.product[0].feedQuantity > 0 &&
        Number(this.item.workReportInfo.formedNum)
      ) {
        this.$set(
          this.notFormedList[0],
          "notFormedNum",
          this.item.product[0].feedQuantity -
            Number(this.item.workReportInfo.formedNum)
        );
        this.notForme();
      }

      let weight =
        Number(this.item.workReportInfo.formedNum) *
        Number(this.item.singleWeight) *
        Number(this.item.weightMultiple);

      if (["G", "g", "克"].includes(this.item.singleWeightUnit)) {
        weight = parseFloat((weight / 1000).toFixed(2));
      } else {
        weight = parseFloat(weight.toFixed(2));
      }

      this.$set(this.item.workReportInfo, "formedWeight", weight);

      total =
        Number(this.item.workReportInfo.formedNum) +
        Number(this.notFormedList[0].notFormedNum);

      console.log(total);

      this.$emit("modeNum", total);

      this.$forceUpdate();
    },
    blurNum2(value) {
      this.$set(this.item.workReportInfo, "notFormedNum", this.notFormedNum);

      let total = 0;
      //匹配非数字
      let val = value.notFormedNum;
      let reg = new RegExp("([^0-9]*)", "g");
      let ma = val.match(reg);
      //如果有非数字，替换成""
      if (ma.length > 0) {
        for (let k in ma) {
          if (ma[k] != "") {
            val = val.replace(ma[k], 0);
          }
        }
      }
      //可以为0，但不能以0开头
      if (val.startsWith("0") && val.length > 1) {
        val = val.substring(1, val.length);
      }
      value.notFormedNum = val;

      if (this.item.currentTaskDiagram.isFirstTask) {
        // formingNum 生产数量  feedQuantity   this.item.product[0] //投料数量
        if (value.notFormedNum > this.item.formingNum) {
          this.$set(
            this.item.workReportInfo,
            "workReportInfo",
            this.item.formingNum
          );
          this.$set(this.notFormedList[0], "notFormedNum", 0);
          this.notFormedNum = 0;
          this.$forceUpdate();
          this.notForme();
          return uni.showToast({
            icon: "none",
            title: "不合格品数量不能大于要求生产数量",
          });
        }
      } else {
        if (this.item.product.length) {
          if (value.formedNum > this.item.product[0].feedQuantity) {
            console.log(this.item.product[0].feedQuantity);
            this.$set(
              this.item.workReportInfo,
              "workReportInfo",
              this.item.product[0].feedQuantity
            );
            this.$set(this.notFormedList[0], "notFormedNum", 0);
            this.notFormedNum = 0;
            this.$forceUpdate();
            this.notForme();
            return uni.showToast({
              icon: "none",
              title: "合格品数量不能大于投料数量",
            });
          }
        }
      }
    },
    blurWeight() {
      this.$set(this.item.workReportInfo, "formedWeight", this.formedWeight);
    },

    blurWeight2() {
      this.$set(
        this.item.workReportInfo,
        "notFormedWeight",
        this.notFormedWeight
      );
    },

    notForme() {
      let weight =
        Number(this.notFormedList[0].notFormedNum) *
        Number(this.item.singleWeight) *
        Number(this.item.weightMultiple);
      if (
        this.item.singleWeightUnit == "G" ||
        this.item.singleWeightUnit == "g" ||
        this.item.singleWeightUnit == "克"
      ) {
        weight = parseFloat((weight / 1000).toFixed(2));
      } else {
        weight = parseFloat(weight.toFixed(2));
      }
      this.$set(this.notFormedList[0], "notFormedWeight", weight);

      if (
        this.item.product[0] &&
        this.item.product[0].feedQuantity > 0 &&
        Number(this.notFormedList[0].notFormedNum)
      ) {
        this.$set(
          this.item.workReportInfo,
          "formedNum",
          this.item.product[0].feedQuantity -
            Number(this.notFormedList[0].notFormedNum)
        );

        let weight =
          Number(this.item.workReportInfo.formedNum) *
          Number(this.item.singleWeight) *
          Number(this.item.weightMultiple);
        if (
          this.item.singleWeightUnit == "G" ||
          this.item.singleWeightUnit == "g" ||
          this.item.singleWeightUnit == "克"
        ) {
          weight = parseFloat((weight / 1000).toFixed(2));
        } else {
          weight = parseFloat(weight.toFixed(2));
        }
        this.$set(this.item.workReportInfo, "formedWeight", weight);
      }

      this.$forceUpdate();
    },

    singleQuery() {},

    changeNum(value) {
      // 不合格数量
      let val = value.notFormedNum;
      //匹配非数字
      let reg = new RegExp("([^0-9]*)", "g");
      let ma = val.match(reg);
      //如果有非数字，替换成""
      if (ma.length > 0) {
        for (let k in ma) {
          if (ma[k] != "") {
            val = val.replace(ma[k], "0");
          }
        }
      }
      //可以为0，但不能以0开头
      if (val.startsWith("0") && val.length > 1) {
        val = val.substring(1, val.length);
      }

      // this.$set(this.item.workReportInfo, 'formedNum', val)
      value.notFormedNum = val;

      console.log(Number(this.item.workReportInfo.formedNum), 1);
      console.log(Number(this.notFormedList[0].notFormedNum), 2);

      let total =
        Number(this.item.workReportInfo.formedNum) +
        Number(this.notFormedList[0].notFormedNum);

      console.log(total);

      this.$emit("modeNum", total);

      this.notForme();
      // this.blurNum()
    },
  },
};
</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;

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

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

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

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

      .pd4 {
        padding: 4rpx 8rpx;
      }

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

    .ww55 {
      width: 55%;
    }

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