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

<template>
  <view>
    <view class="title_box rx-bc">
      <view class="name">工单信息 </view>
      <view
        class="btn_box rx-bc"
        @click="handleScan(item.workOrderId)"
        v-if="!isDetails"
      >
        <image class="scan" src="@/static/pda/ScanIt.svg"></image>
        更换工单
      </view>
    </view>

    <view class="material">
      <view class="content_table">
        <view class="item">
          <view class="lable rx-cc">工单编号</view>
          <view class="content">
            {{ item.code }}
          </view>
        </view>

        <view class="item">
          <view class="lable rx-cc">编码</view>
          <view class="content">{{ item.productCode }}</view>
        </view>
        <view class="item">
          <view class="lable rx-cc">规格</view>
          <view class="content">{{ item.specification }}</view>
        </view>

        <view class="item">
          <view class="lable rx-cc">名称</view>
          <view class="content">{{ item.productName }}</view>
        </view>

        <view class="item">
          <view class="lable rx-cc">批次号</view>
          <view class="content">{{ item.batchNo }}</view>
        </view>

        <view class="item">
          <view class="lable rx-cc">牌号</view>
          <view class="content">{{ item.brandNum }}</view>
        </view>

        <view class="item">
          <view class="lable rx-cc">型号</view>
          <view class="content">{{ item.modelType }}</view>
        </view>
        <view class="item">
          <view class="lable rx-cc">生产编号</view>
          <view class="content">{{ item.productionCodes }}</view>
        </view>
        <view class="item rx-sc">
          <view class="rx ww55">
            <view class="lable 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" v-if="isReportWork">
          <view class="lable rx-cc">生产要求</view>
          <!-- <view class="content" :disabled="isDetails">{{
            item.productionCodes
          }}</view> -->
          <view class="content content_num">
            <input
              style="width: 100%"
              :disabled="isDetails"
              class="uni-input"
              v-model="item.productionRequirements"
            />
          </view>
        </view>
      </view>
    </view>
    <!-- {{ clientEnvironmentId }} {{ pType }} -->
    <view class="title_box mt20 rx-bc" v-if="pType == 'feed' || pType == 'job'">
      <view class="name"
        >{{ pType == "feed" ? "实际投料时间" : "实际报工时间" }}
      </view>
    </view>

    <view class="material" v-if="pType == 'feed' || pType == 'job'">
      <view class="content_table">
        <view class="item">
          <view class="content">
            <uni-datetime-picker
              type="datetime"
              :value="currentExecutorTime"
              @change="changeTime($event, item)"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { parameterGetByCode } from "@/api/mainData/index.js";
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    isDetails: {
      type: Boolean,
      default: false,
    },

    isReportWork: {
      type: Boolean,
      default: false,
    },

    pType: {
      type: "",
      default: "",
    },

    taskType: {
      type: "",
      default: "",
    },
  },
  data() {
    return {
      clientEnvironmentId:
        uni.getStorageSync("userInfo") &&
        uni.getStorageSync("userInfo").clientEnvironmentId,
      currentExecutorTime: "",
    };
  },
  // watch: {
  //   item: {
  //     immediate: true,
  //     deep: true,
  //     handler(newVal) {
  //       // this.deviceList = newVal
  //       //设备下拉框数据来源
  //       this.getByCode();
  //       // this.$set(this.item, "executorTime", this.currentExecutorTime);
  //       // this.$set(
  //       //   this.item.workReportInfo,
  //       //   "executorTime",
  //       //   this.currentExecutorTime
  //       // );
  //     },
  //   },
  // },

  created() {
    console.log("item", this.item);
    this.getByCode();
  },
  methods: {
    changeTime(e, val) {
      let a = e.split(" ");
      console.log(a);
      if (a[1] !== "") {
        this.currentExecutorTime = e;
      } else {
        this.currentExecutorTime = `${e}00:00:00`;
      }
      this.item.executorTime = this.currentExecutorTime;
    },
    async getByCode() {
      console.log("11111");
      await parameterGetByCode({ code: "mes_order_feed_by_default_date" }).then(
        (res) => {
          console.log("res", res);
          if (res.value == "1") {
            if (!this.item.executorTime) {
              const now = new Date();
              const year = now.getFullYear();
              const month = String(now.getMonth() + 1).padStart(2, "0");
              const day = String(now.getDate()).padStart(2, "0");
              const hours = String(now.getHours()).padStart(2, "0");
              const minutes = String(now.getMinutes()).padStart(2, "0");
              const seconds = String(now.getSeconds()).padStart(2, "0");
              this.currentExecutorTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
              this.item.executorTime = this.currentExecutorTime;
              // this.item.workReportInfo.executorTime = this.currentExecutorTime;
              this.$set(this.item, "executorTime", this.currentExecutorTime);
              this.$set(
                this.item.workReportInfo,
                "executorTime",
                this.currentExecutorTime
              );
              console.log("executorTime", this.item.executorTime);
              console.log("item", this.item);
              this.$forceUpdate();
            }
          }
        }
      );
    },
    handleScan(id) {
      this.$emit("handleScan", id, "wordOrder");
    },
  },
};
</script>

<style lang="scss" scoped>
.title_box {
  .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: 60rpx;
    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;

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

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

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

.mt20 {
  margin-top: 20rpx;
}
</style>