JG-CLIENT-TEMP/src/views/material-flow/creatTask.vue

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="type-title">当前料箱</div>

        <div style="display: flex; margin-bottom: 15px">
          <ScanCodeInput
            v-model="currentBox"
            :clearable="true"
            placeholder="请扫描或输入料箱编号"
            style="width: 50%"
            @keyup.enter="enterBox"
          />
          <div class="current-box">
            <span class="left">{{ boxDetail?.name || "未绑定料箱" }}</span>
            <span class="right">{{ boxDetail?.code || "未绑定料箱" }}</span>
          </div>
        </div>

        <div class="type-title">请扫码物料</div>
        <ScanCodeInput
          v-model="scanCodeInput"
          placeholder="请扫描或输入物料编码"
          @keyup.enter="handleScanCodeInput"
        />
        <div
          v-loading="map.get('getMaterialInfoByLabel')"
          style="height: calc(100vh - 450px); margin-top: 15px"
        >
          <el-scrollbar>
            <div class="list-container">
              <div
                v-for="(item, index) in materialList"
                :key="index"
                class="list-box"
              >
                <div>
                  <div class="name">{{ item.materialName }}</div>
                  <div class="spec">{{ item.spec }}</div>
                </div>
                <div class="bottom">
                  <NumberInput
                    v-if="item.codeType === 'BATCH'"
                    v-model="item.num"
                  />
                  <div v-else class="number" v-text="item.num"></div>
                  <span class="unit">{{ item.unitDictLabel }}</span>
                </div>
                <i-ep-delete
                  class="delete"
                  color="#ff4d4f"
                  size="20px"
                  @click="deleteMaterial(index)"
                />
              </div>
            </div>
          </el-scrollbar>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="type-title">流转终点</div>
        <div class="destination">
          <el-scrollbar>
            <div
              v-for="(item, index) in destinationList"
              :key="index"
              :class="{ selected: index === currentDestinationIndex }"
              class="end-box"
              @click="onEndBoxClick(index, item)"
            >
              <div class="name">{{ item.name }}</div>
              <!--            <div-->
              <!--              v-if="-->
              <!--                item.targetType === 'stock' && index === currentDestinationIndex-->
              <!--              "-->
              <!--            >-->
              <!--              <el-select-->
              <!--                v-model="selectStore"-->
              <!--                filterable-->
              <!--                placeholder="请选择"-->
              <!--                size="large"-->
              <!--                style="width: 200px"-->
              <!--                value-key="id"-->
              <!--              >-->
              <!--                <el-option-->
              <!--                  v-for="store in storeMap.get(item.houseNo)"-->
              <!--                  :key="store.id"-->
              <!--                  :label="store.name"-->
              <!--                  :value="store"-->
              <!--                />-->
              <!--              </el-select>-->
              <!--            </div>-->
            </div>
          </el-scrollbar>
        </div>
        <el-button class="sureBtn el-button-big" type="primary" @click="createTask"
          >创建任务
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
//料箱
import {
  addMaterialFlow,
  getBoxDetailByLabel,
  getDestinationList,
  getMaterialInfoByLabel,
} from "@/api/process/materialFlow";
import { useCommonStoreHook } from "@/store";

const commonS = useCommonStoreHook();
const map = commonS.loadingMap;

const currentBox = ref("");
const boxDetail = ref<any>({});
const enterBox = () => {
  currentBox.value = currentBox.value.trim();
  getBoxDetailByLabel(currentBox.value).then((res: any) => {
    boxDetail.value = res.data;
    // materialList.value = res.data.materialList;
  });
};

// 物料
const scanCodeInput = ref("");
const materialList = ref<any[]>([]);

const handleScanCodeInput = () => {
  getMaterialInfoByLabel(scanCodeInput.value).then((res: any) => {
    // 扫描之后要先查看数组中是否有这个物料，有的话就数量相加，没有的话就添加到数组中
    let hasMaterial = false;
    for (let i = 0; i < materialList.value.length; i++) {
      let currentMaterial = materialList.value[i];
      if (
        currentMaterial.batchCode === res.data.batchCode &&
        currentMaterial.materialCode === res.data.materialCode
      ) {
        hasMaterial = true;
        // SEQ/BATCH 如果是流转卡号数量只能唯1，序列号相加
        if (currentMaterial.codeType === "BATCH") {
          materialList.value[i].num += res.data.num;
          break;
        }
      }
    }
    !hasMaterial && materialList.value.push(res.data);
    scanCodeInput.value = "";
  });
};
const deleteMaterial = (index: number) => {
  materialList.value.splice(index, 1);
};
// 流转终点
const destinationList = ref<any>();
const currentDestination = ref<any>({});
const currentDestinationIndex = ref(-1);
const storeMap = new Map<string, Array<any>>();
const selectStore = ref<any>({});
const onEndBoxClick = (index: number, item: any) => {
  currentDestination.value = item;
  currentDestinationIndex.value = index;
  // 如果是仓库，会根据仓库的no获取仓储的列表，存入map， 如果已经有数据了则不需要再次请求接口 =》 后来不需要展示了 就注释了
  // if (item.targetType === "stock") {
  //   if (!storeMap.has(item.houseNo)) {
  //     getStoreListByNo(item.houseNo).then((res) => {
  //       storeMap.set(item.houseNo, res.data || []);
  //     });
  //   }
  // }
};

onMounted(() => {
  let wm = new WeakMap();
  getDestinationList(1).then((res: any) => {
    destinationList.value = res.data;
  });
});

const createTask = () => {
  const params = {
    circulationDetail: [...materialList.value],
    // coordinate: "",
    houseNo: "",
    // locationNo: "",
    stationId: 0,
    targetType: "",
    vehicleCode: "",
    vehicleId: 0,
    vehicleName: "",
  };
  params.targetType = currentDestination.value.targetType;
  if (currentDestination.value.targetType === "stock") {
    params.houseNo = currentDestination.value.houseNo;
    // params.locationNo = selectStore.value.locationNo;
    // params.coordinate = selectStore.value.coordinate;
  } else {
    params.stationId = currentDestination.value.id;
  }

  params.vehicleId = boxDetail.value.id;
  params.vehicleCode = boxDetail.value.code;
  params.vehicleName = boxDetail.value.name;

  addMaterialFlow(params).then((res) => {
    ElMessage.success("创建成功");

    //1366 一体机—物料流转任务创建成功后 清空页面数据
    currentBox.value = "";
    boxDetail.value = {};
    scanCodeInput.value = "";
    materialList.value = [];
  });
};
</script>

<style lang="scss" scoped>
.type-title {
  font-weight: 500;
  font-size: 30px;
  color: rgba(0, 0, 0, 0.9);
  text-align: left;
  margin-bottom: 15px;
}

.current-box {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 16px 16px 16px 16px;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  height: 49px;
  padding: 0 20px;

  .left {
    font-weight: 400;
    color: rgba(0, 0, 0, 0.6);
    text-align: left;
  }

  .right {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.9);
    text-align: right;
  }
}

.list-container {
  width: 100%;
  display: grid;
  /*行间距*/
  grid-row-gap: 24px;
  /*列间距*/
  grid-column-gap: 24px;

  grid-template-columns: 1fr 1fr;

  .list-box {
    height: 210px;
    background: #fff;
    border-radius: 16px 16px 16px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    padding: 30px 30px;
    position: relative;

    .name {
      font-weight: 500;
      font-size: 24px;
      color: rgba(0, 0, 0, 0.9);
      text-align: left;
    }

    .spec {
      font-size: 20px;
      color: rgba(0, 0, 0, 0.6);
      text-align: left;
    }

    .bottom {
      display: flex;
      justify-content: start;
      align-items: end;
    }

    .unit {
      font-weight: 500;
      font-size: 24px;
      color: rgba(0, 0, 0, 0.6);
      text-align: left;
      margin-left: 5px;
    }

    .delete {
      position: absolute;
      top: 20px;
      right: 20px;
    }
  }
}

.destination {
  height: calc(100vh - 350px);
  margin-top: 15px;

  .end-box {
    height: 80px;
    background: #ffffff;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 24px;
    color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }

  .end-box:not(:last-child) {
    margin-bottom: 15px;
  }

  .selected {
    border-radius: 40px;
    border: 2px solid rgba(10, 89, 247, 1);
  }

  .name {
    font-weight: 500;
    font-size: 24px;
    color: rgba(0, 0, 0, 0.9);
  }
}

.sureBtn {
  height: 80px;
  background: #0a59f7;
  border-radius: 76px 76px 76px 76px;
  width: 100%;
  margin-top: 10px;
  font-size: $f24;
}

.number {
  font-size: $f38;
  font-weight: bolder;
}
</style>