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

<template>
  <view>
    <view class="title_box rx-bc">
      <view class="name"> 在制品： ({{ listArr.length || 0 }})个</view>
    </view>

    <view
      :class="[
        'material',
        it.extInfo.reportWeight && it.extInfo.reportWeight && 'materialBor',
      ]"
      v-for="(it, idx) in listArr"
      :key="idx"
    >
      <view class="content_table">
        <view class="item rx-sc">
          <view class="rx">
            <view class="lable lable150 rx-cc">名称</view>
            <view class="content rx-bc">
              <view>{{ it.name }}</view>
            </view>
          </view>
        </view>

        <view class="item rx-sc">
          <view class="rx ww50">
            <view class="lable lable150 rx-cc">批次号</view>
            <view class="content content_num">
              <input
                class="uni-input"
                v-model="it.batchNo"
                :disabled="isDetails"
              />
            </view>
          </view>

          <view class="rx ww50">
            <view class="lable lable150 rx-cc">牌号</view>
            <view class="content content_num">
              <view :disabled="isDetails">{{ it.brandNu }}</view>
            </view>
          </view>
        </view>

        <view class="item rx-sc">
          <view class="rx">
            <view class="lable lable150 rx-cc">型号</view>
            <view class="content rx-sc">
              <view>{{ it.modelType }}</view>
            </view>
          </view>
        </view>

        <view class="item rx-sc">
          <view class="rx ww50">
            <view class="lable lable150 rx-cc">设备</view>
            <view class="content content_num">
              <zxz-uni-data-select
                :localdata="deviceList"
                v-model="it.deviceId"
                dataValue="instanceId"
                format="{name}"
                dataKey="instanceId"
                filterable
                :disabled="isDetails"
                :clear="false"
              ></zxz-uni-data-select>
            </view>
            <!-- 		<view class="content ">
							<view>{{ it.deviceName || it.extInfo.deviceName }}</view>
						</view> -->
          </view>

          <view class="rx ww50">
            <view class="lable lable150 rx-cc">炉次号</view>

            <view class="content content_num">
              <view v-if="isDetails">{{ it.extInfo.heatNumber }}</view>
              <input class="uni-input" v-else v-model="it.extInfo.heatNumber" />
            </view>
          </view>
        </view>

        <view class="item rx-sc">
          <view class="rx ww50">
            <view class="lable lable150 rx-cc">数量</view>
            <view class="content content_num">
              {{ it.feedQuantity || 0 }}{{ it.unit }}
            </view>
          </view>

          <view class="rx ww50">
            <view class="lable lable150 rx-cc">重量</view>
            <view class="content content_num">
              <view
                >{{ it.extInfo.newWeight || 0
                }}{{ it.extInfo.weightUnit }}</view
              >
            </view>
          </view>
        </view>

        <view class="item rx-sc">
          <view class="rx">
            <view class="lable lable150 rx-cc">操作</view>
            <view class="content rx-bc">
              <view style="display: flex">
                <u-button
                  size="small"
                  class="u-reset-button"
                  type="primary"
                  @click="batchClick(it, idx)"
                  v-if="it.feedQuantity > 1 && it.isAllPackageData != 1"
                  >拆批</u-button
                >
                <u-button
                  size="small"
                  class="u-reset-button"
                  type="error"
                  @click="deleteBatch(idx)"
                  style="margin-left: 20px"
                  >删除</u-button
                >
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <uni-popup ref="inputDialog" type="dialog">
      <uni-popup-dialog
        ref="inputClose"
        mode="input"
        title="拆批数"
        placeholder="请输入拆批数"
        :before-close="true"
        @close="handleClose"
        @confirm="timeoutCauseConfirm"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import { splitBatch } from "@/api/pda/feeding";
export default {
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    itemData: {
      type: Object,
      default: () => {},
    },
    isDetails: {
      type: Boolean,
      default: false,
    },
    equipmentList: {
      type: Array,
      default: () => [],
    },
  },

  data() {
    return {
      pickerIndex: 0,
      isAllChecked: true,
      listArr: [],
      selectedIndexs: [],
      bacthData: {},
      bacthIndex: "",
      deviceList: [],
    };
  },
  watch: {
    tableData: {
      handler(v) {
        this.listArr = v;
      },
      immediate: true,
      deep: true,
    },

    equipmentList: {
      handler(v) {
        this.deviceList = v;
        this.changeHeatNumber();
      },
      immediate: true,
      deep: true,
    },
  },

  mounted() {
    // this.listArr.push(...this.itemData.product)

    if (this.itemData.product) {
      this.listArr.push(...this.itemData.product);
      this.listArr.forEach((item) => {
        if (!item.batchNo) {
          item.batchNo = this.itemData.batchNo;
        }
        item.childBatch = 0;
      });
    } else {
      this.list.push(...this.itemData.inProductList);
    }
  },

  methods: {
    handlerCheckedTow(e, index, item) {
      console.log(item);
      if (e.detail.value.length) {
        // this.$set(this.tableData[index], 'selected', true);
        item.selected = true;
      } else {
        // this.$set(this.tableData[index], 'selected', false);
        item.selected = false;
      }
      this.listArr[index] = item;
      // this.$emit('tableDataFn', this.tableData);

      console.log(this.tableData);
      this.$nextTick(() => {
        let a = this.listArr.filter((v) => v.selected);
        if (a.length && a.length == this.listArr.length) {
          this.isAllChecked = true;
        } else {
          this.isAllChecked = false;
        }
      });
    },

    //全选
    handlerChecked(e) {
      console.log(this.listArr);
      if (e.detail.value.length) {
        // 全选

        this.listArr.map((item) => {
          item.selected = true;
        });
      } else {
        // 未选中
        this.listArr.map((item) => {
          item.selected = false;
        });
      }
      this.listArr = [];

      this.$set(this, "listArr", this.listArr);

      this.listArr = this.tableData;

      this.$emit("tableDataFn", this.tableData);
    },

    blurNum(workReportInfo) {
      this.$emit("tableDataFn", this.tableData);
    },
    handlerChange(item, index) {
      // this.$emit('tableDataFn', this.tableData);
      console.log(item, index);
    },

    selectionChange(e) {
      this.selectedIndexs = e.detail.index;
    },

    batchClick(item, index) {
      console.log("拆批", item, index);
      this.bacthData = item;
      this.bacthIndex = index;
      this.$refs.inputDialog.open();
    },

    handleClose() {
      this.$refs.inputDialog.close();
    },
    async timeoutCauseConfirm(value) {
      if (!value) {
        uni.showToast({
          title: "请输入拆批的数量",
          icon: "none",
        });
        return;
      }

      if (value == 0) {
        uni.showToast({
          title: "拆批数不能等于0",
          icon: "none",
        });
        return;
      }

      if (!value) {
        uni.showToast({
          title: "拆批数不能为空",
          icon: "none",
        });
        return;
      }

      if (this.bacthData.extInfo.sourceQuantity < value) {
        uni.showToast({
          title: "拆批数不能大于数量",
          icon: "none",
        });
        return;
      }

      let dataList = [];
      await splitBatch({
        product: this.bacthData,
        splitQt: Number(value),
      }).then((res) => {
        res.forEach((item) => {
          dataList.push(this.deepCopy(item));
        });
        this.refreshData(dataList, value);
      });

      // this.$refs.inputDialog.close()
    },

    refreshData(list, value) {
      const number =
        Number(this.listArr[this.bacthIndex].extInfo.sourceQuantity) -
        Number(value);
      this.listArr[this.bacthIndex].extInfo.sourceQuantity = number;
      this.listArr[this.bacthIndex].feedQuantity = number;

      list.forEach((item) => {
        item.childBatch = 1;
      });
      let _arr = [...this.listArr, ...list];
      this.$set(this.listArr, this.listArr.length, ...list);
      this.$set(this.itemData, "product", _arr);
      this.$forceUpdate();

      this.$refs.inputDialog.close();
    },

    deleteBatch(index) {
      uni.showModal({
        title: "删除",
        content: "是否确实删除此物料！",
        confirmText: "确认", //这块是确定按钮的文字
        success: (rr) => {
          this.listArr.splice(index, 1);
          this.$set(this.itemData, "product", this.listArr);

          if (this.listArr.length == 0) {
            this.$set(this.itemData.workReportInfo, "formedNum", 0);
            this.$set(this.itemData.workReportInfo, "notFormedNum", 0);
          }
          this.$forceUpdate();
        },
      });
    },

    deepCopy(obj, hash = new WeakMap()) {
      if (obj === null) return null;
      if (obj instanceof Date) return new Date(obj);
      if (obj instanceof RegExp) return new RegExp(obj);
      if (typeof obj !== "object" && typeof obj !== "function") return obj;
      if (hash.has(obj)) return hash.get(obj);

      const result = Array.isArray(obj) ? [] : {};
      hash.set(obj, result);

      return Object.keys(obj).reduce((acc, key) => {
        acc[key] = this.deepCopy(obj[key], hash);
        return acc;
      }, result);
    },

    changeHeatNumber() {
      console.log(this.deviceList);
      this.deviceList.forEach((f) => {
        this.listArr.forEach((o) => {
          if (
            o.deviceId &&
            f.instanceId == o.deviceId &&
            this.deviceList.length > 1
          ) {
            console.log(444);
            o.extInfo.heatNumber = f.extInfo.heatNumber;
            this.$forceUpdate();
          } else if (this.deviceList.length == 1) {
            console.log(1323);
            o.extInfo.heatNumber = this.deviceList[0].extInfo.heatNumber;
            o.deviceId = f.instanceId;
            this.$forceUpdate();
          } else if (this.deviceList.length > 1) {
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .uni-select--mask {
  position: relative !important;
}
.container {
  padding: 10rpx;
  overflow: auto;

  checkbox {
    transform: scale(0.8);
  }
}

.uni-input {
  width: 150rpx;
  border: 1px solid #f0f8f2;
  background: #f0f8f2;
  color: #157a2c;
}

/deep/.uni-table {
  min-width: 100vw !important;

  .uni-table-td,
  .uni-table-th {
    padding: 20rpx 10rpx !important;
    text-align: center !important;
    font-weight: normal !important;
    font-size: 26rpx !important;
  }

  .uni-table-text {
    font-size: 26rpx !important;
  }
}

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

  .btn_box {
    .btn {
      padding: 0 18rpx;
      height: 50rpx;
      line-height: 50rpx;
      background: $theme-color;
      font-size: 26rpx;
      font-style: normal;
      font-weight: 400;
      font-size: 24rpx;
      color: #fff;
      border-radius: 4rpx;
      margin-left: 24rpx;
    }
  }
}

.material {
  margin-top: 16rpx;
  border: 1rpx solid transparent;

  .content_table {
    width: 100%;
    border: 2rpx solid $border-color;
    box-sizing: border-box;

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

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

      .lable190 {
        width: 200rpx !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_H {
        min-height: 92rpx;
      }

      .pd4 {
        padding: 4rpx 8rpx;
      }

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

    .ww55 {
      width: 55%;
    }

    .ww50 {
      width: 50%;
    }

    .ww45 {
      width: 45%;
    }

    .tag_box {
      padding: 2rpx 10rpx;
      margin-right: 12rpx;
      background: #e6a23c;
      font-size: 22rpx;
      color: #fff;
      border-radius: 4rpx;
    }
  }
}

.materialBor {
  border: 1rpx solid #157a2c;
}

.content_table2 {
  width: 100%;

  .row {
    width: 100%;

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

    .color157 {
      color: $theme-color;
    }

    .ww30 {
      width: 30%;
    }

    .ww20 {
      width: 20%;
    }

    .ww15 {
      width: 15%;
    }

    .ww25 {
      width: 25%;
    }

    .ww50 {
      width: 50%;
    }

    .ww10 {
      width: 10%;
    }
  }

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

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

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

    .item {
      font-size: 24rpx;
      min-height: 74rpx;
      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;
    }

    .numerate {
      font-size: 22rpx;
      color: $theme-color;
    }
  }
}

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

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

.round {
  width: 32rpx;
  height: 32rpx;
  line-height: 30rpx;
  text-align: center;
  border-radius: 50%;
  background: $theme-color;
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  color: #fff;
  margin-right: 10rpx;
}

.popup_box {
  width: 94vw;
  padding: 16rpx 12rpx;
  box-sizing: border-box;
}

.operate_box {
  margin-top: 32rpx;
  padding: 10rpx 100rpx;

  /deep/ .u-button {
    width: 160rpx;
  }
}

.formula_box {
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  margin-top: 12rpx;
}

.reportWeight {
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  margin-top: 30rpx;

  text {
    color: $theme-color;
  }
}
</style>