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

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <div style="display: flex; margin-bottom: 15px">
          <div class="type-title">当前料箱</div>
          <div class="current-box" style="width: 25vw">
            <span class="left">料箱id: {{ boxDetail?.rfid ?? "" }}</span>
            <!--            <span class="right">{{ boxDetail?.code || "未绑定料箱" }}</span>-->
          </div>
          <ScanCodeInput
            v-model="currentBox"
            :clearable="true"
            placeholder="请扫描或输入料箱编号"
            style="width: 30vw"
            @keyup.enter="enterBox"
          />
        </div>
        <div style="display: flex; margin-bottom: 15px">
          <div class="type-title">请扫码物料</div>
          <ScanCodeInput
            v-model="scanCodeInput"
            style="width: 30vw"
            placeholder="请扫描或输入物料编码"
            @keyup.enter="handleScanCodeInput"
          />
        </div>
        <div
          v-loading="map.get('getMaterialInfoByLabel')"
          style="height: calc(100vh - 350px); margin-top: 15px"
        >
          <el-scrollbar>
            <div class="list-container">
              <div
                v-for="(item, index) in materialList"
                :key="item"
                class="list-box"
              >
                <div>
                  <div class="name">{{ item.materialName }}</div>
                  <div class="spec">{{ item.materialCode }}</div>
                  <div class="spec">{{ item.batchNo }}</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" style="position: relative">
        <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>
          </el-scrollbar>
        </div>
      </el-col> -->
      <el-button
        class="sureBtn el-button-big"
        type="primary"
        @click="popStatus = true"
        >创建任务
      </el-button>
    </el-row>
    <!-- 弹窗 -->
    <div class="midPopUp" v-if="popStatus" @click="handleClose">
      <div class="container" @click.stop>
        <div class="body">
          <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>
            </el-scrollbar>
          </div>
        </div>
        <div class="bottomBtn">
          <el-button class="leftBtn" @click="handleClose">取消</el-button>
          <el-button class="rightBtn" @click="createTask" type="primary"
            >确认</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
//料箱
import {
  addMaterialFlow,
  getDestinationList,
  getMaterialInfoByLabel,
  getStationInfo,
} from "@/api/process/materialFlow";
import { useCommonStoreHook, useUserStore } from "@/store";
const popStatus = ref(false);
const handleClose = () => {
  popStatus.value = false;
};
const submit = () => {};
const commonS = useCommonStoreHook();
const userStore = useUserStore();
const map = commonS.loadingMap;

const currentBox = ref("");
const boxDetail = ref<any>({});

let currentTimer = -1;

const enterBox = () => {
  currentBox.value = currentBox.value.trim();
  boxDetail.value.rfid = currentBox.value;
  // 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;
  });

  currentTimer = setInterval(() => {
    if (currentBox.value && currentBox.value.trim() !== "") {
      boxDetail.value.rfid = currentBox.value.trim();
    } else {
      getStationInfo({ stanCode: userStore.user.stationCode }).then(
        (res: any) => {
          boxDetail.value = res.data;
          // 如果右边的输入框有值，就以右边的为准
        }
      );
    }
  }, 1500);
});

onBeforeUnmount(() => {
  clearInterval(currentTimer);
});

const createTask = () => {
  const params = {
    circulationDetail: [...materialList.value],
    // coordinate: "",
    houseNo: "1",
    // locationNo: "",
    stationId: "",
    targetType: "",
    vehicleCode: boxDetail.value.rfid,
    // 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;
  }

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

    //1366 一体机—物料流转任务创建成功后 清空页面数据

    scanCodeInput.value = "";
    materialList.value = [];
    handleClose();
  });
};
</script>

<style lang="scss" scoped>
.type-title {
  width: 190px;
  font-weight: 500;
  font-size: 30px;
  color: rgba(0, 0, 0, 0.9);
  text-align: left;
  margin-bottom: 15px;
}
.midPopUp {
  z-index: 999;
  .container {
    display: flex;
    .body {
      flex: 1;
      height: calc(100% - 40px);
      padding: 0 10%;
    }
    .bottomBtn {
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      .el-button {
        width: 120px;
        height: 40px;
        font-size: 20px;
      }
    }
  }
}
.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 1fr;

  .list-box {
    min-height: 240px;
    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(100% - 40px);
  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: 32vw;
  margin-top: 10px;
  font-size: $f24;
  position: fixed;
  top: 70px;
  right: 24px;
  z-index: 9;
}

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