kd-aiot-frontend-mes/src/views/produce/components/warehousing/index.vue

<template>
  <!-- 入库报工 报工列表 -->

  <div>

    <div class="top_fixed">
      <el-button type="primary" size="mini" @click="save">一键报工</el-button>
    </div>

    <div class="warehousing_box">
      <div v-for="(item, index) in List" :key="index" class="card_box">
        <div class="title_box rx-bc">
          <div class="name">工单信息</div>
        </div>

        <workOrderBom :item="item" v-if="item"></workOrderBom>

        <!-- 报工时间 -->
        <div>
          <div class="title_box rx-bc">
            <div class="name">报工时间</div>
          </div>
          <el-date-picker v-model="item.workReportInfo.executorTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期">
          </el-date-picker>
        </div>

        <div v-if="
          clientEnvironmentId == 3 &&
          item.toWarehouseList &&
          item.toWarehouseList.length > 0
        ">
          <div style="margin-top: 6px">
            <el-select v-model="item.warehouseId" filterable clearable placeholder="请选择仓库" size="mini"
              class="content_num">
              <el-option v-for="item in warehouseList" :key="item.id" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </div>

          <div v-for="(it, idx) in item.toWarehouseList" :key="idx">

            <packingTgBom :list="it.extInfo.pickOutInList" :isWarehousing="true" :item="it"></packingTgBom>

          </div>
        </div>

        <!-- 单独报工 -->
        <div v-else-if="item.currentTaskDiagram.type == 4 || (item.currentTaskDiagram.type == 5 && item.singleReport == 1)">
          <div v-if="
            item.toWarehouseList &&
            item.toWarehouseList.length > 0
          ">
            <div style="margin-top: 6px">
              <el-select v-model="item.warehouseId" filterable clearable placeholder="请选择仓库" size="mini"
                class="content_num">
                <el-option v-for="item in warehouseList" :key="item.id" :value="item.id" :label="item.name"></el-option>
              </el-select>
            </div>
            <div v-for="(it, idx) in item.toWarehouseList" :key="idx">
              <packingTgBom :list="it.extInfo.pickOutInList" :singleReport="item.singleReport" :item="item"
                :equipmentList="item.equipmentList" :isWarehousing="true"></packingTgBom>
            </div>
          </div>
        </div>

        <!-- {{ item.currentTaskDiagram.type }} {{ item.singleReport }}
 {{ clientEnvironmentId != 2 && item && item.currentTaskDiagram.type == 5 && clientEnvironmentId != 3 && item.singleReport == 1 }} -->
        <div
          v-if="clientEnvironmentId != 2 && item && item.currentTaskDiagram.type == 5 && clientEnvironmentId != 3 && item.singleReport !== 1">

          <div style="margin-top: 6px">
            <el-select v-model="item.warehouseId" filterable clearable placeholder="请选择仓库" size="mini"
              class="content_num">
              <el-option v-for="item in warehouseList" :key="item.id" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </div>

          <!-- 批量报工 -->
          <div class="list_box" v-for="(d, index) in item.toWarehouseList" :key="index">
            <div class="time" style="margin-bottom: 10rpx;">打包时间： {{ d.createTime }}</div>
            <packagingGroupingTwx ref="packagingGroupingRef" :objData="d.extInfo" :workOrderId="item.workOrderId"
            :taskId="item.currentTaskDiagram.taskId">
            </packagingGroupingTwx>
          </div>
          
        </div>

        <div>
          <jobDdBom :item='item' ref='jobRef' :notFormed='item.notFormedList' :warehouseList="warehouseList"></jobDdBom>
        </div>

        <!-- item.currentTaskDiagram.type == 4 ? item.pickOutInList : item.semiProductList -->

        <!-- <div v-else>
          <el-empty :image-size="30" description="暂无数据"></el-empty>
        </div> -->

      </div>
    </div>
  </div>
</template>

<script>
import workOrderBom from '../feeding/components/workOrderBom.vue';
import packingTgBom from '../jobBooking/components/packingTgBom.vue';
import semiProductJobBomQT from "../jobBooking/components/semiProductJobBomQT.vue"
import packagingGroupingTwx from "../jobBooking/components/packagingGroupingTwx.vue";
import { getWarehouseList } from '@/api/produce/index.js';
import { listByIdsReport } from '@/api/produce/job';
import { listPcToWarehouseTG, listPCToWarehouse } from '@/api/produce/workOrder';

import { jobSave } from '@/api/produce/workOrder';
import jobDdBom from './components/jobDdBom.vue';

export default {
  components: {
    workOrderBom,
    semiProductJobBomQT,
    packagingGroupingTwx,
    packingTgBom,
    jobDdBom
  },
  props: {
    workListIds: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      isLoad: false,
      List: [],

      idsList: [],
      warehouseList: []
    };
  },

  computed: {
    taskObj() {
      return this.$store.state.user.taskObj;
    },

    clientEnvironmentId() {
      return this.$store.state.user.info.clientEnvironmentId;
    }
  },

  watch: {
    workListIds: {
      handler(val) {
        this.getList(val);
      },
      deep: true,
      immediate: true
    }
  },

  created() {
    this.getWarehouseListFn();
  },

  methods: {
    getList(ids) {
      this.idsList = ids || [];
      let param = {
        ids: ids,
        taskId: this.taskObj.id,
        type: 0
      };
      this.isLoad = false;

      listByIdsReport(param)
        .then((res) => {
          this.List = res.map((obj) => {
            obj.workReportInfo = {
              formingNum: null,
              formingWeight: null,
              formedNum: null,
              formedWeight: null,
              taskId: this.taskObj.id,
              executorTime: null
            };

            return {
              ...obj
            };
          });
        })
        .finally(() => {
          this.isLoad = true;



          if (this.clientEnvironmentId == 3) {
            this.getTgWarehouse();
          } else {
            this.getQtWarehouse();
          }

        });
    },

    getTgWarehouse() {
      const param = {
        workOrderIds: this.idsList,
        taskId: this.taskObj.id
      };

      listPcToWarehouseTG(param).then((res) => {
        // 创建一个映射，以便快速查找
        const workOrderMap = new Map(res.map((it) => [it.workOrderId, it]));

        // 更新List中的每个项目
        // this.List.forEach((item,index) => {
        //   if (workOrderMap.has(item.workOrderId)) {
        //     // 直接从映射中获取数据，避免嵌套循环
        //     this.$set(item, 'toWarehouseList', [
        //       JSON.parse(JSON.stringify(workOrderMap.get(item.workOrderId)))
        //     ]);
             
        //   } else {
        //     this.$set(item, 'toWarehouseList', []);
        //   }
         
          
        // });

        this.List.forEach((item,index) => {
          let arr=[]
          res.map(titem=>{
            if(item.workOrderId==titem.workOrderId){
              arr.push(titem)
            }
            this.$set(item, 'toWarehouseList', arr);
          })

        })

      });



    },


    getQtWarehouse() {
      const param = {
        workOrderIds: this.idsList,
        taskId: this.taskObj.id
      };

      console.log(123456);

      listPCToWarehouse(param).then((res) => {
        // 创建一个映射，以便快速查找
        const workOrderMap = new Map(res.map((it) => [it.workOrderId, it]));

        console.log(workOrderMap, '99');
        // 更新List中的每个项目
        // this.List.map((item) => {
        //   if (workOrderMap.has(item.workOrderId)) {
        //     console.log(1);
        //     // 直接从映射中获取数据，避免嵌套循环
        //     this.$set(item, 'toWarehouseList', [
        //       JSON.parse(JSON.stringify(workOrderMap.get(item.workOrderId)))
        //     ]);
            

        //   } else {

        //     this.$set(item, 'toWarehouseList', []);

        //   }



        // });
        this.List.forEach((item,index) => {
          let arr=[]
          res.map(titem=>{
            if(item.workOrderId==titem.workOrderId){
              arr.push(titem)
            }
            this.$set(item, 'toWarehouseList', arr);
          })

        })

        console.log(this.List, '6666666666');
      });



    },

    getWarehouseListFn() {

      getWarehouseList().then((res) => {
        this.warehouseList = res.data;
      });
    },

    save() {

      if(this.clientEnvironmentId==21){
        
        jobSave(this.List).then((res) => {
          console.log(res);
          this.$message.success('入库成功');
          this.getList(this.idsList);
        });
      }else{
        let _arr = [];
      
      _arr = this.List.filter((item) => {
        return item.toWarehouseList.length > 0;
      });
      
      let bol = true;
      bol = _arr.every((e, i) => {
        return e.warehouseId;
      });

      if (!bol) {
        this.$message.warning(`仓库不能为空`);
        return false;
      }

      let _arr2 = JSON.parse(JSON.stringify(_arr));


      _arr2.map((m) => {
        m.storageInfo = {
          warehouseId: m.warehouseId,
          toWarehouseList: m.toWarehouseList,
          inWarehouseSpecType: 2
        };
        delete m.warehouseId
        delete m.toWarehouseList
        return {
          ...m
        };
      });

      jobSave(_arr2).then((res) => {
        console.log(res);
        this.$message.success('入库成功');
        this.getList(this.idsList);
      });
      }
      
    }
  }
};
</script>

<style scoped lang="scss">
.top_fixed {
  width: 100%;
  height: 40px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.title_box {
  .name {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    color: #157a2c;
    padding-left: 5px;
    position: relative;

    &:before {
      position: absolute;
      content: '';
      left: 0px;
      top: 0px;
      bottom: 0px;
      width: 2px;
      height: 14px;
      background: #157a2c;
      margin: auto;
    }
  }
}

.warehousing_box {
  margin-top: 6px;
  width: 100%;
  height: calc(100vh - 70px - 50px - 80px - 60px);
  overflow-y: scroll;
  overflow-x: hidden;
}

.card_box {
  background: #fff;
  padding: 8px;
  border-radius: 2px;
}

.content_num {
  --input-background-color: #f0f8f2;
}
</style>