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 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-model="item.num" />
                  <span class="unit">{{ item.unitDictLabel }}</span>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="type-title">流转终点</div>
        <div class="destination">
          <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>
        </div>
        <el-button class="sureBtn" type="primary" @click="createTask"
          >创建任务
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

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

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

// 物料
const scanCodeInput = ref("2010100002301#gys022#sc022#100#20220929#31");
const materialList = ref<any>([]);

const handleScanCodeInput = () => {
  getMaterialInfoByLabel(scanCodeInput.value).then((res) => {
    res.data.batchCode = scanCodeInput.value;
    materialList.value.push(res.data);
    scanCodeInput.value = "";
  });
};
// 流转终点
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().then((res) => {
    console.log("destinationList", res);
    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("创建成功");
    console.log("res", res);
  });
};
</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;

    .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;
    }
  }
}

.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;
}
</style>