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>
          <jobDdBom
            :item="item"
            ref="jobRef"
            :notFormed="item.notFormedList"
            :warehouseList="warehouseList"
          ></jobDdBom>
        </div>

        <div
          v-if="
            clientEnvironmentId == 3 &&
            item.toWarehouseList &&
            item.toWarehouseList.length > 0
          "
        >
          <div class="item">
            <div>
              <div class="text">仓库</div>
              <div class="select-type">
                <el-select
                  v-model="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>

            <div>
              <div class="text">入库规格</div>
              <div class="select-type">
                <el-select
                  v-model="inWarehouseSpecType"
                  filterable
                  clearable
                  placeholder="请选择入库规格"
                  size="mini"
                  class="content_num select-warehousing"
                >
                  <el-option
                    v-for="item in WarehouseSpecTypeList"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </div>
          <!-- <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 class="item">
              <div>
                <div class="text">仓库</div>
                <div class="select-type">
                  <el-select
                    v-model="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>

              <div>
                <div class="text">入库规格</div>
                <div class="select-type">
                  <el-select
                    v-model="inWarehouseSpecType"
                    filterable
                    clearable
                    placeholder="请选择入库规格"
                    size="mini"
                    class="content_num select-warehousing"
                  >
                    <el-option
                      v-for="item in WarehouseSpecTypeList"
                      :key="item.value"
                      :label="item.text"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>
              </div>
            </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
          v-if="
            clientEnvironmentId != 2 &&
            item &&
            item.currentTaskDiagram.type == 5 &&
            clientEnvironmentId != 3 &&
            item.singleReport !== 1
          "
        >
          <div style="margin-top: 6px">
            <el-select
              v-model="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 v-if="clientEnvironmentId == 2">
          <div class="item">
            <div>
              <div class="text">仓库</div>
              <div class="select-type">
                <el-select
                  v-model="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>

            <div>
              <div class="text">入库规格</div>
              <div class="select-type">
                <el-select
                  v-model="inWarehouseSpecType"
                  filterable
                  clearable
                  placeholder="请选择入库规格"
                  size="mini"
                  class="content_num select-warehousing"
                >
                  <el-option
                    v-for="item in WarehouseSpecTypeList"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </div>
        </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';
  import jobDdBom from './components/newJobDdBom.vue';

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

        idsList: [],
        warehouseList: [],
        inWarehouseSpecType: '2',
        WarehouseSpecTypeList: [
          {
            text: '按计量入库',
            value: '1'
          },
          {
            text: '最小包装入库',
            value: '2'
          },
          {
            text: '内包装入库',
            value: '3'
          },
          {
            text: '外包装入库',
            value: '4'
          }
        ],
        warehouseId: null,
        inWarehouseType: null
      };
    },

    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) => {
            if (res[0].workOrderType == 1) {
              this.inWarehouseType = 1;
            } else if (res[0].workOrderType == 2) {
              this.inWarehouseType = 8; //  "1入库类型1生产入库2半成品入库"
            }
            this.List = res.map((obj) => {
              obj.workReportInfo = {
                formingNum: null,
                formingWeight: null,
                formedNum: null,
                formedWeight: null,
                taskId: this.taskObj.id,
                executorTime: null
              };

              obj.notFormedList = [
                {
                  notFormedNum: null,
                  notFormedWeight: null,
                  weightUnit: res.weightUnit,
                  unit: res.unit,
                  warehouseId: null // 处置 仓库id
                }
              ];

              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) {
          console.log(this.List, 'List');
          if (!this.warehouseId) {
            return this.$message.warning('请选择仓库');
          }

          this.List.forEach((item) => {
            item.warehouseId = this.warehouseId;
          });
          jobSave(this.List).then((res) => {
            console.log(res);
            this.$message.success('入库成功');
            this.getList(this.idsList);
          });
        } else if (this.clientEnvironmentId == 2) {
          if (!this.warehouseId) {
            return this.$message.warning('请选择仓库');
          }

          const listData = this.List.map((item) => {
            let categoryId = '',
              rootCategoryLevelId = '';
            if (item.product.length) {
              categoryId = item.categoryId;
              rootCategoryLevelId = item.rootCategoryLevelId;
            }

            let storageInfo = {
              inWarehouseSpecType:
                this.clientEnvironmentId !== 3 || this.clientEnvironmentId !== 2
                  ? Number(this.inWarehouseSpecType)
                  : '',
              warehouseId: this.warehouseId,
              inWarehouseType: this.inWarehouseType,
              toWarehouseList: this.clientEnvironmentId == 3 ? this.tgList : []
            };

            if (this.clientEnvironmentId == 2) {
              let num = '';
              if (item.workReportInfo && item.workReportInfo?.formedNum) {
                num = item.workReportInfo.formedNum;
              }

              storageInfo.packingReportList = [
                {
                  code: item.productCode,
                  categoryId: categoryId,
                  workOrderId: item.workOrderId,
                  rootCategoryLevelId: rootCategoryLevelId,
                  totalQuantity: num,
                  quantity: num,
                  unit: item.unit,
                  packingNum: 1,
                  taskId: -1
                }
              ];
              item.storageInfo = storageInfo;
            }

            return {
              ...item
            };
          });

          console.log(listData, 'listData');
          // const data = this.List[0];
          // if (!this.warehouseId) {
          //   return this.$message.warning('请选择仓库');
          // }
          // let categoryId = '',
          //   rootCategoryLevelId = '';
          // if (data.product.length) {
          //   categoryId = data.product[0].categoryId;
          //   rootCategoryLevelId = data.product[0].rootCategoryLevelId;
          // }

          // let storageInfo = {
          //   inWarehouseSpecType:
          //     this.clientEnvironmentId !== 3 || this.clientEnvironmentId !== 2
          //       ? Number(this.inWarehouseSpecType)
          //       : '',
          //   warehouseId: this.warehouseId,
          //   inWarehouseType: this.inWarehouseType,
          //   toWarehouseList: this.clientEnvironmentId == 3 ? this.tgList : []
          // };

          // let num = '';
          // if (data.workReportInfo && data.workReportInfo?.formedNum) {
          //   num = data.workReportInfo.formedNum;
          // }

          // storageInfo.packingReportList = [
          //   {
          //     code: data.productCode,
          //     categoryId: categoryId,
          //     workOrderId: data.workOrderId,
          //     rootCategoryLevelId: rootCategoryLevelId,
          //     totalQuantity: num,
          //     quantity: num,
          //     unit: data.unit,
          //     packingNum: 1,
          //     taskId: -1
          //   }
          // ];

          // data.storageInfo = storageInfo;
          // console.log(storageInfo, 'storageInfo');
          // console.log(data, 'this.data');

          // const data = this.List[0];

          jobSave(listData).then((res) => {
            console.log(res);
            this.$message.success('入库成功');
            this.getList(this.idsList);
          });
        } else {
          let _arr = [];

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

          _arr = this.List.filter((item) => {
            if (item.toWarehouseList && item.toWarehouseList.length > 0) {
              return item.toWarehouseList.length > 0;
            }
          });

          _arr.forEach((item) => {
            item.warehouseId = this.warehouseId;
          });

          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;
  }
  .item {
    display: flex;
    flex-direction: row;
    border: 1px solid #e3e5e5;
    border-top: 0 solid #e3e5e5;
    align-items: center;

    div {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 100%;
      .text {
        font-size: 12px;
        width: 100px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f7f9fa;
      }

      .select-type {
        width: 205px;
        padding: 2px;
        box-sizing: border-box;
      }
    }
  }
</style>