|
|
@@ -0,0 +1,365 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <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="8">
|
|
|
+ <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="8">
|
|
|
+ <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-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+//料箱
|
|
|
+import {
|
|
|
+ getDestinationList,
|
|
|
+ getMaterialInfoByLabel,
|
|
|
+} from "@/api/process/materialFlow";
|
|
|
+import {
|
|
|
+ backToStorageAPI,
|
|
|
+ getStorageBoxesList,
|
|
|
+ toOutBox,
|
|
|
+ inBoxAPI,
|
|
|
+} from "@/api/storage/in";
|
|
|
+
|
|
|
+const boxSearch = ref("");
|
|
|
+//盒内原有物料data
|
|
|
+const boxesList = ref<any[]>([]);
|
|
|
+//选中的item
|
|
|
+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("");
|
|
|
+//扫码后的array
|
|
|
+const materialList = ref<any>([]);
|
|
|
+// 扫码料码
|
|
|
+const handleScanCodeInput = () => {
|
|
|
+ getMaterialInfoByLabel(scanCodeInput.value).then((res) => {
|
|
|
+ if (res.data.codeType == "SEQ") {
|
|
|
+ res.data.seqNo = scanCodeInput.value;
|
|
|
+ } else {
|
|
|
+ res.data.seqNo = "";
|
|
|
+ }
|
|
|
+ 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 status = false;
|
|
|
+ for (let b = 0; b < outingMaterials.value.length; b++) {
|
|
|
+ if (materialList.value[i].seqNo != "") {
|
|
|
+ outingMaterials.value.push({
|
|
|
+ ...materialList.value[i],
|
|
|
+ materialNo: materialList.value[i].materialCode,
|
|
|
+ unit: materialList.value[i].unitDictValue,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ if (
|
|
|
+ materialList.value[i].materialCode ==
|
|
|
+ outingMaterials.value[b].materialNo &&
|
|
|
+ materialList.value[i].batchCode == outingMaterials.value[b].batchCode
|
|
|
+ ) {
|
|
|
+ outingMaterials.value[i].num =
|
|
|
+ outingMaterials.value[i].num + materialList.value[i].num;
|
|
|
+ status = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (status == false) {
|
|
|
+ outingMaterials.value.push({
|
|
|
+ ...materialList.value[i],
|
|
|
+ materialNo: materialList.value[i].materialCode,
|
|
|
+ unit: materialList.value[i].unitDictValue,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ElMessage.success("添加成功！");
|
|
|
+};
|
|
|
+// 流转终点
|
|
|
+const destinationList = ref([]);
|
|
|
+onMounted(() => {
|
|
|
+ getDestinationList().then((res) => {
|
|
|
+ destinationList.value = res.data;
|
|
|
+ });
|
|
|
+ getStorageBoxesList({}).then((res) => {
|
|
|
+ boxesList.value = res.data;
|
|
|
+ });
|
|
|
+});
|
|
|
+</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