aiot-app/pages/production/execute/halfAdded/picking.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="半加定长-投料"
      @clickLeft="back"
    >
    </uni-nav-bar>
    <view class="title">
      {{ workReportDeviceList.name }}({{ workReportDeviceList.code }})
    </view>
    <uni-section title="周转车信息">
      <view class="device">
        <template class="device" v-for="(item, index) in carList">
          <view class="divice-top">
            <view class="top-name">周转车编码</view>
            <view class="content">{{ item.code }}</view>
            <view class="del" @click="handleDelete(index)">删除</view>
          </view>
          <uni-table border stripe>
            <uni-tr>
              <uni-th align="center">工单编号</uni-th>
              <uni-th align="center">产品编码</uni-th>
              <uni-th align="center">数量(PCS)</uni-th>
            </uni-tr>
            <uni-tr v-for="itm in item.orderList">
              <uni-td>{{ itm.code }}</uni-td>
              <uni-td> {{ itm.produceCode }} </uni-td>
              <uni-td>
                <uni-easyinput v-model="itm.reportNum"></uni-easyinput>
              </uni-td>
            </uni-tr>
          </uni-table>
        </template>
        <view class="addcar" @click="chooseCar">+</view>
      </view>
    </uni-section>

    <view class="bottom" @click="_feedBatchSave">完成投料</view>
    <carPopu ref="carRef" @confirm="carConfirm"></carPopu>
  </view>
</template>

<script>
import carPopu from "../components/carPopu.vue";
import {
  feedBatchSave,
  getWorkerOrderInfo,
  getTaskListById,
} from "@/api/production/execute";
export default {
  components: { carPopu },
  data() {
    return {
      time: "",
      carList: [],
      workReportDeviceList: {},
    };
  },
  onLoad(options) {
    this.workReportDeviceList = Object.assign(
      this.workReportDeviceList,
      options
    );
  },

  methods: {
    chooseCar() {
      this.$refs.carRef.open();
    },
    handleDelete(index) {
      const _this = this;
      uni.showModal({
        title: `确定删除当前周转车`,
        content: "",
        confirmText: "确认",
        success: function (res) {
          if (res.confirm) {
            _this.carList.splice(index, 1);
          }
        },
      });
    },
    async carConfirm(list) {
      const obj = this.carList.map((i) => i.id);

      uni.showLoading();
      try {
        for (const p of list) {
          if (!obj.includes(p.id)) {
            obj.push(p.id);

            const data = await getWorkerOrderInfo(p.code);
            p.orderList = data.map((item) => ({
              ...item,
              reportNum: "",
              workOrderId: item.id,
              workOrderCode: item.code,
            }));
            data.length && this._getTaskListById(data[0].produceVersionId);
            this.carList.push(p);
          }
        }
      } catch (error) {}
      uni.hideLoading();
    },
    async _getTaskListById(produceVersionId) {
      if (this.params.taskCode) {
        return;
      }
      // 获取工序
      let list = await getTaskListById(produceVersionId);

      list = list.filter((i) => !i.name.includes("工具棒"));

      const index = list.findIndex((i) => i.name.includes("挤压干燥"));
      if (index > -1) {
        this.params = {
          taskCode: list[index].code + "-01",
          upperTaskCode: list[index - 1]?.code,
        };
      }
    },
    async _feedBatchSave() {
      if (!this.carList.length) {
        return uni.showToast({
          title: "请选择周转车",
          icon: "none",
        });
      }

      const _this = this;
      uni.showModal({
        title: `是否投料？`,
        content: "",
        confirmText: "确认",
        success: async function (res) {
          if (res.confirm) {
            const feedAddList = [];
            _this.carList.forEach((ele) => {
              feedAddList.push(
                ...ele.orderList.map((i) => ({
                  checkState: 1,
                  status: 1,
                  ..._this.workReportDeviceList,
                  ...i,
                  turnoverVehicleCode: ele.code,
                }))
              );
            });

            _this.params.feedAddList = feedAddList;

            await feedBatchSave(_this.params);
            uni.showToast({
              title: "投料成功！",
            });
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 1500);
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bottom {
  width: 100%;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 0;
  font-size: 36rpx;
  color: #fff;
  background: #4b7902;
}
.mainBox {
  padding-bottom: 90rpx;
  box-sizing: border-box;

  .form-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 10rpx;

    .form-col {
      width: 50%;
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;
      text {
        margin-right: 15rpx;
      }
      &.full {
        width: 100%;
      }
    }
  }
  .title {
    font-weight: bold;
    padding: 10rpx;
  }

  .drying-time {
    padding: 10rpx;
    display: flex;
    align-items: center;

    .uni-easyinput {
      width: 30vw;
    }
  }
}

.device {
  width: 100%;
  .divice-top {
    width: 96%;
    height: 60rpx;
    margin: 10rpx auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .divice-number {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 20rpx 0;
    span {
      margin-left: 10rpx;
    }
    view:last-child span {
      color: rgba(112, 182, 3, 1);
    }
  }
  .divice-btm {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 96%;
    margin: 0 auto;
    .btm-mold {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 60%;
      .content {
        width: 35%;
      }
    }
    .btm-mold.btm-last {
      width: 40%;
      .modle-input {
        margin: 0 10rpx;
      }
    }
  }
  .device-line {
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1rpx solid #ccc;
    // margin-bottom: 20rpx;
    height: 80rpx;
    .line-title {
      width: 30%;
      text-indent: 30rpx;
    }
    .line-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 70%;
      margin-right: 20rpx;
      .content {
        width: 70%;
        margin: 0 20rpx 0 0;
      }
      .content-input {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 40%;
        view {
          margin-left: 10rpx;
        }
      }
      .line-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .right-minus {
          width: 80rpx;
          height: 51rpx;
          text-align: center;
          line-height: 51rpx;
          color: #fff;
          background: #f59a23;
        }
        .right-add {
          width: 80rpx;
          height: 51rpx;
          text-align: center;
          line-height: 51rpx;
          color: #fff;
          background: #70b603;
          margin-left: 10rpx;
        }
        .right-choose.u-button--info {
          border-color: #70b603;
          color: #70b603;
        }
      }
    }
  }
  .addcar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 120rpx;
    color: #ccc;
    font-weight: bold;
    line-height: 80rpx;
  }
  .content {
    width: 40%;
    border: 1rpx solid #ccc;
    border-radius: 8rpx;
    line-height: 60rpx;
    height: 60rpx;
    margin: 0 20rpx;
  }
  .choose {
    background: rgba(112, 182, 3, 1);
    color: #fff;
    padding: 10rpx 20rpx;
    border-radius: 8rpx;
  }
  .del {
    background: rgba(236, 128, 141, 1);
    color: #fff;
    padding: 10rpx 20rpx;
    border-radius: 8rpx;
  }
  .handle {
    background: rgba(112, 182, 3, 1);
    color: #fff;
    padding: 10rpx 20rpx;
    border-radius: 8rpx;
    margin-left: 60rpx;
  }
}
</style>