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

<template>
  <view>
    <view class="title_box rx-bc">
      <view class="name">物料清单 ({{ list.length || 0 }})个 </view>
      <view
        class="btn_box rx-cc"
        v-if="deviceList.length > 1"
        @click="bindDevice"
        >绑定设备</view
      >
    </view>

    <u-list
      @scrolltolower="scrolltolower"
      class="z_list"
      style="height: 100% !important"
    >
      <view class="material rx-ss" v-for="(mate, idx) in list" :key="idx">
        <view class="left rx-ss" @click="getDelete(idx)" v-if="workOrderId">
          <uni-icons
            custom-prefix="iconfont"
            type="icon-shanchu"
            size="20"
            color="#fa3534"
          ></uni-icons>
        </view>
        <view class="content_table">
          <view
            class="item rx-sc"
            v-if="mate.rootCategoryLevelId == 1 && mate.isConsumable == 1"
          >
            <view class="rx ww50">
              <view class="lable rx-cc">编码</view>
              <view class="content">{{ mate.code }}</view>
            </view>
          </view>

          <view
            class="item rx-bc"
            v-if="mate.rootCategoryLevelId == 1 && mate.isConsumable == 0"
            @click="handleCheck(idx, mate)"
          >
            <view class="rx ww80">
              <view class="lable rx-cc">编码</view>
              <view class="content">{{ mate.code }}</view>
            </view>

            <view class="rx-cc ww20" v-if="deviceList.length > 1">
              <image
                class="check"
                v-if="mate.check"
                src="../../../../static/check.png"
              ></image>
              <image
                class="check"
                v-if="!mate.check"
                src="../../../../static/check_no.png"
              ></image>
            </view>
          </view>

          <view
            class="item"
            v-for="(itm, index) in tableH(mate.rootCategoryLevelId)"
            :key="index"
          >
            <view class="lable rx-cc">{{ itm.label }}</view>
            <view class="content">{{ mate[itm.prop] }}</view>
          </view>

          <view class="item" v-if="mate.isConsumable == 1">
            <view class="lable rx-cc">包装库存</view>
            <view class="content"
              >{{ mate.packingCountBase }}/ {{ mate.minUnit }}</view
            >
          </view>

          <view
            class="item rx-sc"
            v-if="mate.isConsumable == 0 && workInfo.singleReport != 0"
          >
            <view class="rx ww50">
              <view class="lable rx-cc">{{
                currentTaskDiagram.isFirstTask == 1 ? "物料重量" : "上道重量"
              }}</view>
              <view
                class="content content_num"
                v-if="currentTaskDiagram.isFirstTask == 1"
              >
                <view v-if="isDetails">
                  {{ mate.extInfo.weight || 0
                  }}{{ mate.extInfo.weightUnit }}</view
                >
                <view v-else>
                  <input class="uni-input" v-model="mate.extInfo.weight" />{{
                    mate.extInfo.weightUnit
                  }}
                </view>
              </view>
              <view class="content" v-if="currentTaskDiagram.isFirstTask == 0">
                <view v-if="isDetails">
                  {{ mate.extInfo.weight || 0
                  }}{{ mate.extInfo.weightUnit }}</view
                >
                <view v-else>
                  <input class="uni-input" v-model="mate.extInfo.weight" />{{
                    mate.extInfo.weightUnit
                  }}
                </view>
              </view>
            </view>

            <view class="rx ww50" v-if="workInfo.singleReport != 0">
              <view class="lable ww80 rx-cc">刻码</view>
              <view v-if="isDetails">{{ mate.extInfo.engrave }}</view>
              <input class="uni-input" v-else v-model="mate.extInfo.engrave" />
            </view>
          </view>

          <view
            class="item"
            v-if="mate.isConsumable == 0 && workInfo.singleReport != 0"
          >
            <view class="lable rx-cc">物料代号</view>
            <view v-if="isDetails">{{ mate.extInfo.materielCode }}</view>
            <input
              class="uni-input"
              v-else
              v-model="mate.extInfo.materielCode"
            />
          </view>

          <view
            class="item"
            v-if="mate.isConsumable == 0 && workInfo.singleReport != 0"
          >
            <view class="lable rx-cc">客户代号</view>
            <view v-if="isDetails">{{ mate.extInfo.clientCode }}</view>
            <input class="uni-input" v-else v-model="mate.extInfo.clientCode" />
          </view>

          <view class="item" v-if="deviceList.length > 0">
            <view class="rx ww70">
              <view class="lable rx-cc">设备</view>
              <view class="content content_num">
                <zxz-uni-data-select
                  v-if="!isDetails"
                  :localdata="deviceList"
                  v-model="mate.deviceId"
                  dataValue="id"
                  format="{name}-{codeNumber}"
                  @change="(e) => selectVal(e, mate, idx)"
                  dataKey="id"
                  filterable
                  :clear="false"
                ></zxz-uni-data-select>
                <span v-if="isDetails">{{ mate.deviceName }}</span>
              </view>
            </view>
            <view class="rx ww30">
              <view class="lable rx-cc ww80">炉次号</view>
              <view class="content content_num">
                <input
                  class="uni-input"
                  style="width: 120rpx"
                  v-model="mate.extInfo.heatNumber"
                />
              </view>
            </view>
          </view>

          <view
            class="item"
            v-if="mate.isConsumable == 0 && workInfo.singleReport == 0"
          >
            <view class="lable rx-cc">投料类型</view>
            <view class="content" style="color: #157a2c">{{
              workInfo.singleReport == 0 ? "批量投料" : ""
            }}</view>
          </view>

          <view class="item rx-sc" v-if="mate.isConsumable == 0">
            <view class="rx ww50">
              <view class="lable rx-cc">位置</view>
              <view class="content content_num">
                <input class="uni-input" v-model="mate.extInfo.position" />
              </view>
            </view>

            <view class="rx ww50">
              <view class="lable rx-cc ww80">数量</view>
              <view class="content content_num">
                <input
                  class="uni-input"
                  style="width: 160rpx"
                  v-model="mate.feedQuantity"
                  type="digit"
                />
                <view class="unit">/{{ mate.unit }}</view>
              </view>
            </view>
          </view>

          <view class="item" v-if="mate.isConsumable == 1">
            <view class="lable rx-cc">数量</view>
            <view class="content content_num">
              <input
                class="uni-input"
                v-model="mate.feedQuantity"
                type="digit"
              />
              <view class="unit">/{{ mate.unit }}</view>
            </view>
          </view>
        </view>
      </view>
    </u-list>

    <SearchPopup mode="center" v-if="deviveShow">
      <template v-slot:list>
        <view class="search_list">
          <u-form
            labelPosition="left"
            :model="formData"
            labelWidth="180"
            labelAlign="left"
            class="baseForm"
          >
            <u-form-item
              label="绑定设备:"
              class="required-form"
              borderBottom
              prop="assetType"
            >
              <zxz-uni-data-select
                :localdata="deviceList"
                v-model="formData.deviceId"
                dataValue="id"
                format="{name}-{codeNumber}"
                @change="(e) => (formData.deviceName = e.name + e.codeNumber)"
                dataKey="id"
                filterable
                :clear="false"
              ></zxz-uni-data-select>
            </u-form-item>
          </u-form>
        </view>
      </template>

      <template v-slot:operate>
        <view class="operate_box rx-bc">
          <u-button size="small" class="u-reset-button" @click="deviceClose">
            取消
          </u-button>

          <u-button
            type="success"
            size="small"
            class="u-reset-button"
            @click="deviceOk"
          >
            确定
          </u-button>
        </view>
      </template>
    </SearchPopup>
  </view>
</template>

<script>
import { tableHeader } from "./feedBom.js";
import SearchPopup from "../../components/searchPopup.vue";
export default {
  components: {
    SearchPopup,
  },
  props: {
    workOrderId: {
      type: String,
      default: "",
    },
    list: {
      type: Array,
      default: () => [],
    },
    equipmentList: {
      type: Array,
      default: () => [],
    },

    currentTaskDiagram: {
      type: Object,
      default: () => {},
    },
    isDetails: {
      type: Boolean,
      default: false,
    },
    workInfo: {
      type: Object,
      default: () => {},
    },
  },

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

  data() {
    return {
      deviceList: [],

      deviveShow: false,
      formData: {
        deviceId: null,
        deviceName: null,
      },
    };
  },
  created() {},
  methods: {
    tableH(type) {
      return tableHeader(type);
    },

    getDelete(idx) {
      this.list.splice(idx, 1);
    },

    scrolltolower() {},

    handleCheck(idx, it) {
      this.$set(this.list[idx], "checvalk", !it.check);
    },

    selectVal(e, item, idx) {
      this.$set(this.list[idx], "deviceName", e.name + "-" + e.codeNumber);
      this.$set(this.list[idx]["extInfo"], "heatNumber", e.extInfo.heatNumber);
    },

    changeHeatNumber() {
      console.log(this.deviceList);

      this.deviceList.forEach((f) => {
        this.list.forEach((o) => {
          if (o.deviceId && f.id == o.deviceId && this.deviceList.length > 1) {
            o.extInfo.heatNumber = f.extInfo.heatNumber;
            o["workstationName"] = f.workstationName;
          } else if (this.deviceList.length == 1) {
            o["deviceName"] = this.deviceList[0].name;
            o["deviceId"] = this.deviceList[0].id;
            o["workstationName"] = this.deviceList[0].workstationName;
            o.extInfo.heatNumber = this.deviceList[0].extInfo.heatNumber;

            this.$forceUpdate();
          }
        });
      });
    },

    bindDevice() {
      this.deviveShow = true;
    },

    deviceOk() {
      let arr = this.list.filter((e) => {
        return e.check;
      });
      if (arr.length <= 0) {
        uni.showToast({
          icon: "none",
          title: "请先勾选物料",
        });
        return false;
      }

      if (!this.formData.deviceId) {
        uni.showToast({
          icon: "none",
          title: "请先选择设备",
        });
        return false;
      }

      this.list.forEach((e) => {
        if (e.check) {
          e["deviceId"] = this.formData.deviceId;
          e["deviceName"] = this.formData.deviceName;
          e["check"] = false;
        }
      });
      this.$forceUpdate();
      this.deviceClose();
    },

    deviceClose() {
      this.formData.deviceName = null;
      this.formData.deviceId = null;
      this.deviveShow = false;
    },
  },
};
</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;
    }
  }

  .btn_box {
    padding: 0 18rpx;
    height: 48rpx;

    background: $theme-color;
    font-size: 26rpx;
    font-style: normal;
    font-weight: 400;
    font-size: 24rpx;
    color: #fff;
    border-radius: 4rpx;

    .scan {
      width: 34rpx;
      height: 34rpx;
      margin-right: 12rpx;
    }
  }
}

.material {
  margin-top: 10rpx;

  .left {
    width: 40rpx;
  }

  .zdy_check {
    width: 30rpx;
    height: 30rpx;
    border: 2rpx solid #c8c9cc;
    border-radius: 4rpx;
  }

  .check_active {
    background: $theme-color;
    border: 2rpx solid $theme-color;

    /deep/ .u-icon__icon {
      color: #fff !important;
    }
  }

  .content_table {
    width: 670rpx;
    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;
      }

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

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

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

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

      .ww400 {
        /deep/ .uni-input-input {
          width: 400rpx;
        }
      }

      .pd4 {
        padding: 4rpx 8rpx;
      }

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

    .ww55 {
      width: 55%;
    }

    .ww45 {
      width: 45%;
    }

    .ww50 {
      width: 50%;
    }

    .ww30 {
      width: 30%;
    }

    .ww70 {
      width: 70%;
    }

    .ww80 {
      width: 80%;
    }

    .ww20 {
      width: 20%;
    }

    .check {
      width: 30rpx;
      height: 30rpx;
    }
  }
}

.z_list {
  max-height: 2000rpx;
}

.search_list {
  min-height: 100rpx;
  width: 90vw;

  /deep/ .baseForm {
    padding: 0 20rpx;
  }
}

.operate_box {
  padding: 10rpx 32rpx;

  /deep/ .u-button {
    width: 40%;
  }
}
</style>