|
|
@@ -0,0 +1,452 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="type-title">仓盒出库</div>
|
|
|
+ <ScanCodeInput
|
|
|
+ v-model="boxSearch"
|
|
|
+ :clearable="true"
|
|
|
+ :showSuffix="true"
|
|
|
+ placeholder="请扫描或输入料箱编号"
|
|
|
+ @keyup.enter="enterBox"
|
|
|
+ />
|
|
|
+ <el-scrollbar class="boxes-container base-container">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in boxesList"
|
|
|
+ :key="index"
|
|
|
+ :class="{ 'box-selected': index === currentBoxIndex }"
|
|
|
+ class="box-item"
|
|
|
+ @click="clickBox(item, index)"
|
|
|
+ >
|
|
|
+ <div class="box-name">{{ item.vehicleNo }}</div>
|
|
|
+ <div
|
|
|
+ v-for="(material, index) in item.list"
|
|
|
+ :key="index"
|
|
|
+ class="box-info"
|
|
|
+ >
|
|
|
+ <div>{{ material.materialName }}</div>
|
|
|
+ <div>{{ material.num }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ <el-button class="sureBtn" type="primary" @click="sureToOut"
|
|
|
+ >出库
|
|
|
+ </el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="type-title">捡料位</div>
|
|
|
+ <el-scrollbar class="outing-container">
|
|
|
+ <div
|
|
|
+ v-for="(material, index) in outingMaterials"
|
|
|
+ :key="index"
|
|
|
+ class="outing-box"
|
|
|
+ >
|
|
|
+ <div class="material-title">
|
|
|
+ {{ material.materialName }} | {{ material.materialNo }}
|
|
|
+ </div>
|
|
|
+ <div class="material-info">
|
|
|
+ <div>批次号</div>
|
|
|
+ <el-tooltip :content="material.batchCode" placement="top">
|
|
|
+ <div class="batchCode">{{ material.batchCode }}</div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <div class="material-info">
|
|
|
+ <div>位置</div>
|
|
|
+ <div>{{ material.locationNo }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="material-info">
|
|
|
+ <div>数量</div>
|
|
|
+ <div>{{ material.num }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ <el-button class="sureBtn" type="info" @click="backToStorage"
|
|
|
+ >返库
|
|
|
+ </el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="type-title">请扫码物料</div>
|
|
|
+ <ScanCodeInput
|
|
|
+ v-model="scanCodeInput"
|
|
|
+ placeholder="请扫描或输入物料编码"
|
|
|
+ @keyup.enter="handleScanCodeInput"
|
|
|
+ />
|
|
|
+ <el-scrollbar class="base-container">
|
|
|
+ <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>
|
|
|
+ <el-button class="sureBtn" type="primary" @click="sureToAdd"
|
|
|
+ >确认添加
|
|
|
+ </el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <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 {
|
|
|
+ getDestinationList,
|
|
|
+ getMaterialInfoByLabel,
|
|
|
+} from "@/api/process/materialFlow";
|
|
|
+import {
|
|
|
+ backToStorageAPI,
|
|
|
+ getStorageBoxesList,
|
|
|
+ toOutBox,
|
|
|
+} from "@/api/storage/out";
|
|
|
+
|
|
|
+const boxSearch = ref("");
|
|
|
+const boxesList = ref<any[]>([]);
|
|
|
+const currentBox = ref<any>({});
|
|
|
+const currentBoxIndex = ref(-1);
|
|
|
+const enterBox = () => {
|
|
|
+ boxSearch.value = boxSearch.value.trim();
|
|
|
+ getStorageBoxesList({}).then((res) => {
|
|
|
+ boxesList.value = res.data;
|
|
|
+ });
|
|
|
+};
|
|
|
+const clickBox = (box: any, index: number) => {
|
|
|
+ currentBox.value = box;
|
|
|
+ currentBoxIndex.value = index;
|
|
|
+};
|
|
|
+const sureToOut = async () => {
|
|
|
+ await toOutBox({
|
|
|
+ vehicleNo: currentBox.value.vehicleNo,
|
|
|
+ houseNo: currentBox.value.houseNo,
|
|
|
+ });
|
|
|
+ ElMessage.success("出库成功");
|
|
|
+ outingBox.value = currentBox.value;
|
|
|
+ if (outingBox.value.list.length > 0) {
|
|
|
+ outingMaterials.value = outingBox.value.list;
|
|
|
+ outingRawBoxList = JSON.parse(JSON.stringify(outingBox.value.list));
|
|
|
+ } else {
|
|
|
+ outingRawBoxList = [];
|
|
|
+ outingMaterials.value = [];
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+//捡料位
|
|
|
+let outingRawBoxList: any[] = []; //确认添加的时候会对比捡料位和扫描的数量，多次点击会导致捡料位的数字一直改变，所以用一个变量来保存原始的捡料位数据
|
|
|
+const outingBox = ref<any>({});
|
|
|
+const outingMaterials = ref<any[]>([]);
|
|
|
+const backToStorage = async () => {
|
|
|
+ console.log("back to storage");
|
|
|
+ await backToStorageAPI({
|
|
|
+ vehicleCode: outingBox.value.vehicleNo,
|
|
|
+ houseNo: outingBox.value.houseNo,
|
|
|
+ detailsList: outingMaterials.value,
|
|
|
+ });
|
|
|
+ outingBox.value = {};
|
|
|
+ outingMaterials.value = [];
|
|
|
+ ElMessage.success("返库成功");
|
|
|
+ currentBox.value = {};
|
|
|
+ currentBoxIndex.value = -1;
|
|
|
+ boxSearch.value = "";
|
|
|
+ getStorageBoxesList({}).then((res) => {
|
|
|
+ boxesList.value = res.data;
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 物料
|
|
|
+const scanCodeInput = ref("");
|
|
|
+const materialList = ref<any>([]);
|
|
|
+
|
|
|
+const handleScanCodeInput = () => {
|
|
|
+ getMaterialInfoByLabel(scanCodeInput.value).then((res) => {
|
|
|
+ // 扫描之后要先查看数组中是否有这个物料，有的话就数量相加，没有的话就添加到数组中
|
|
|
+ let hasMaterial = false;
|
|
|
+ for (let i = 0; i < materialList.value.length; i++) {
|
|
|
+ let currentMaterial = materialList.value[i];
|
|
|
+ if (currentMaterial.materialCode === res.data.materialCode) {
|
|
|
+ materialList.value[i].num += res.data.num;
|
|
|
+ hasMaterial = true;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ !hasMaterial && materialList.value.push(res.data);
|
|
|
+ scanCodeInput.value = "";
|
|
|
+ });
|
|
|
+};
|
|
|
+const sureToAdd = () => {
|
|
|
+ // 循环物料列表，在循环捡料位的列表，进行数量相减，最大数量判断
|
|
|
+ // 每次判断之前，先重置数据
|
|
|
+ outingMaterials.value = JSON.parse(JSON.stringify(outingRawBoxList));
|
|
|
+
|
|
|
+ for (let i = 0; i < materialList.value.length; i++) {
|
|
|
+ let currentMaterial = materialList.value[i];
|
|
|
+ for (let j = 0; j < outingMaterials.value.length; j++) {
|
|
|
+ let currentOutingMaterial = outingMaterials.value[j];
|
|
|
+ if (currentMaterial.materialCode === currentOutingMaterial.materialNo) {
|
|
|
+ if (currentMaterial.num > currentOutingMaterial.num) {
|
|
|
+ currentMaterial.num = currentOutingMaterial.num;
|
|
|
+ currentOutingMaterial.num = 0;
|
|
|
+ } else {
|
|
|
+ currentOutingMaterial.num -= currentMaterial.num;
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+// 流转终点
|
|
|
+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;
|
|
|
+ });
|
|
|
+ getStorageBoxesList({}).then((res) => {
|
|
|
+ boxesList.value = res.data;
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+const createTask = () => {
|
|
|
+ const params = {
|
|
|
+ circulationDetail: [...materialList.value],
|
|
|
+ // coordinate: "",
|
|
|
+ houseNo: "",
|
|
|
+ // locationNo: "",
|
|
|
+ stationId: 0,
|
|
|
+ targetType: "",
|
|
|
+ vehicleCode: "",
|
|
|
+ vehicleId: 0,
|
|
|
+ vehicleName: "",
|
|
|
+ };
|
|
|
+};
|
|
|
+</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;
|
|
|
+}
|
|
|
+
|
|
|
+.base-container {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 15px;
|
|
|
+ height: calc(100vh - 420px);
|
|
|
+}
|
|
|
+
|
|
|
+.boxes-container {
|
|
|
+ .box-item {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ padding: 10px 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-selected {
|
|
|
+ border: 2px solid #0a59f7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-name {
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-info {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: bolder;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.outing-container {
|
|
|
+ height: calc(100vh - 354px);
|
|
|
+
|
|
|
+ .outing-box {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ padding: 10px 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .material-title {
|
|
|
+ font-weight: bolder;
|
|
|
+ font-size: 24px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .material-info {
|
|
|
+ font-size: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .batchCode {
|
|
|
+ max-width: 60%;
|
|
|
+ flex-shrink: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.list-container {
|
|
|
+ width: 100%;
|
|
|
+ display: grid;
|
|
|
+ /*行间距*/
|
|
|
+ grid-row-gap: 24px;
|
|
|
+ /*列间距*/
|
|
|
+ //grid-column-gap: 24px;
|
|
|
+
|
|
|
+ grid-template-columns: 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;
|
|
|
+ font-size: 24px;
|
|
|
+ //background: #0a59f7;
|
|
|
+ border-radius: 76px 76px 76px 76px;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+</style>
|
jiaxiaoqiang