<template>
|
<div>
|
<vol-box
|
v-model="showStockTakeBox"
|
:lazy="true"
|
:width="isMobile ? '95%' : '70%'"
|
:padding="24"
|
title="库存盘点操作"
|
class="custom-vol-box"
|
>
|
<div class="stock-take-container">
|
<div class="receipt-info">
|
<el-tag type="primary" size="small" class="receipt-tag">
|
当前盘点单据号：<span class="receipt-no">{{ orderNo }}</span>
|
</el-tag>
|
</div>
|
|
<!-- 核心输入表单 -->
|
<el-form
|
:model="formData"
|
ref="formRef"
|
label-width="100px"
|
class="stock-take-form"
|
@submit.prevent
|
>
|
<!-- 料箱号输入框 -->
|
<el-form-item
|
label="料箱号："
|
name="boxNo"
|
:rules="[
|
{
|
required: true,
|
message: '请扫描或输入料箱号',
|
trigger: 'blur',
|
},
|
{ validator: validateBoxNo, trigger: 'blur' },
|
]"
|
class="form-item"
|
>
|
<el-input
|
ref="boxNoInputRef"
|
v-model="formData.boxNo"
|
placeholder="请使用扫码枪扫描料箱号，或手动输入"
|
clearable
|
@keydown.enter="debouncedHandleBoxNoScan"
|
@blur="handleBoxNoBlur"
|
:disabled="loading"
|
class="custom-input"
|
:class="{ 'has-value': formData.boxNo.trim() }"
|
>
|
<template #append>
|
<el-button
|
icon="Search"
|
type="primary"
|
size="small"
|
@click="handleBoxNoScan"
|
:disabled="!formData.boxNo.trim() || loading"
|
class="input-btn"
|
></el-button>
|
</template>
|
</el-input>
|
</el-form-item>
|
|
<!-- 条码输入框 -->
|
<el-form-item
|
label="盘点条码："
|
name="barcode"
|
:rules="[
|
{ required: true, message: '请扫描或输入条码', trigger: 'blur' },
|
{ validator: validateBarcode, trigger: 'blur' },
|
]"
|
class="form-item"
|
>
|
<el-input
|
ref="barcodeInputRef"
|
v-model="formData.barcode"
|
placeholder="请使用扫码枪扫描条码，或手动输入"
|
clearable
|
@keydown.enter="debouncedHandleBarcodeScan"
|
:disabled="!formData.boxNo.trim() || loading"
|
class="custom-input"
|
:class="{ 'has-value': formData.barcode.trim() }"
|
>
|
<template #append>
|
<el-button
|
icon="Search"
|
type="primary"
|
size="small"
|
@click="handleBarcodeScan"
|
:disabled="
|
!formData.boxNo.trim() ||
|
!formData.barcode.trim() ||
|
loading
|
"
|
class="input-btn"
|
></el-button>
|
</template>
|
</el-input>
|
</el-form-item>
|
|
<!-- 库存数量框（只读） -->
|
<el-form-item
|
label="库存数量："
|
name="stockQuantity"
|
class="form-item"
|
>
|
<el-input
|
v-model="formData.stockQuantity"
|
placeholder="扫描条码后自动填充"
|
readonly
|
class="custom-input custom-readonly-input"
|
:class="{ 'has-value': formData.stockQuantity }"
|
></el-input>
|
</el-form-item>
|
|
<!-- 实际盘点数量 -->
|
<el-form-item
|
label="实际盘点数量："
|
name="actualQuantity"
|
:rules="[
|
{
|
required: true,
|
message: '请输入实际盘点数量',
|
trigger: 'blur',
|
},
|
{ type: 'number', message: '请输入有效的数字', trigger: 'blur' },
|
{ validator: validateActualQuantity, trigger: 'blur' },
|
]"
|
class="form-item"
|
>
|
<el-input
|
v-model.number="formData.actualQuantity"
|
placeholder="请输入实际盘点数量（大于0）"
|
type="number"
|
clearable
|
@keydown.enter="handleStockTakeComplete"
|
:disabled="!formData.stockQuantity || loading"
|
class="custom-input"
|
:class="{ 'has-value': formData.actualQuantity }"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
|
<!-- 操作按钮区域 -->
|
<div class="action-buttons">
|
<el-button
|
type="info"
|
size="small"
|
@click="handleBoxReturn"
|
:disabled="!formData.boxNo.trim() || loading"
|
class="return-btn"
|
>
|
<Return /> 料箱回库
|
</el-button>
|
<el-button
|
type="primary"
|
size="small"
|
@click="handleStockTakeComplete"
|
:disabled="
|
loading ||
|
!formData.boxNo.trim() ||
|
!formData.barcode.trim() ||
|
!formData.stockQuantity ||
|
!formData.actualQuantity
|
"
|
class="complete-btn"
|
>
|
<Check /> 盘点完成
|
</el-button>
|
<el-button
|
type="text"
|
size="small"
|
@click="handleCancel"
|
:disabled="loading"
|
class="cancel-btn"
|
>
|
取消
|
</el-button>
|
</div>
|
</div>
|
</vol-box>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted, nextTick, watch, defineEmits, computed } from "vue";
|
import { ElMessage, ElTag, ElMessageBox } from "element-plus";
|
|
import VolBox from "@/components/basic/VolBox.vue";
|
import http from "@/api/http";
|
|
// 响应式变量 - 单据号
|
const orderNo = ref("");
|
|
// 暴露事件
|
const emit = defineEmits(["close", "refresh", "box-returned"]);
|
|
// 响应式数据
|
const showStockTakeBox = ref(false);
|
const formData = reactive({
|
boxNo: "", // 料箱号
|
barcode: "", // 盘点条码
|
stockQuantity: "", // 库存数量（只读）
|
actualQuantity: "", // 实际盘点数量
|
});
|
const loading = ref(false);
|
const formRef = ref(null);
|
|
// 模板引用
|
const boxNoInputRef = ref(null);
|
const barcodeInputRef = ref(null);
|
|
// 检测是否为移动端
|
const isMobile = computed(() => {
|
return window.innerWidth < 768;
|
});
|
|
// 组件挂载时聚焦到料箱号输入框
|
onMounted(() => {
|
nextTick(() => {
|
boxNoInputRef.value?.focus();
|
});
|
// 监听窗口大小变化
|
window.addEventListener("resize", () => {});
|
});
|
|
// 监听料箱号变化，清空后续相关字段
|
watch(
|
() => formData.boxNo,
|
(newVal) => {
|
if (!newVal.trim()) {
|
formData.barcode = "";
|
formData.stockQuantity = "";
|
formData.actualQuantity = "";
|
}
|
},
|
{ immediate: true }
|
);
|
|
// 防抖函数
|
const debounce = (fn, delay = 100) => {
|
let timer = null;
|
return (...args) => {
|
if (timer) clearTimeout(timer);
|
timer = setTimeout(() => {
|
fn.apply(this, args);
|
}, delay);
|
};
|
};
|
|
// 打开弹窗并接收单据号
|
const open = (receiptNo) => {
|
showStockTakeBox.value = true;
|
orderNo.value = receiptNo;
|
// 重置表单
|
formData.boxNo = "";
|
formData.barcode = "";
|
formData.stockQuantity = "";
|
formData.actualQuantity = "";
|
nextTick(() => {
|
boxNoInputRef.value?.focus();
|
});
|
};
|
|
// 关闭弹窗
|
const handleCancel = (e) => {
|
e.stopPropagation();
|
e.preventDefault();
|
showStockTakeBox.value = false;
|
emit("close");
|
orderNo.value = "";
|
};
|
|
// 料箱号验证（优化：有值时仅验证长度，无值时触发必填）
|
const validateBoxNo = (rule, value, callback) => {
|
// 有值时验证长度
|
if (value && value.trim().length < 3) {
|
callback(new Error("料箱号长度不能少于3位"));
|
}
|
// 无值时由required规则处理，这里不重复提示
|
else {
|
callback();
|
}
|
};
|
|
// 条码验证（优化：有值时仅验证长度）
|
const validateBarcode = (rule, value, callback) => {
|
if (value && value.trim().length < 6) {
|
callback(new Error("条码长度不能少于6位"));
|
} else {
|
callback();
|
}
|
};
|
|
// 实际盘点数量验证（优化：有值时验证合法性）
|
const validateActualQuantity = (rule, value, callback) => {
|
if (value === null || value === undefined) {
|
callback(new Error("请输入实际盘点数量"));
|
} else if (value <= 0) {
|
callback(new Error("实际盘点数量必须大于0"));
|
} else if (!Number.isInteger(value)) {
|
callback(new Error("实际盘点数量必须是整数"));
|
} else {
|
callback();
|
}
|
};
|
|
// 料箱号失焦处理
|
const handleBoxNoBlur = () => {
|
if (formData.boxNo.trim() && boxNoInputRef.value?.input) {
|
boxNoInputRef.value.input.select();
|
}
|
};
|
|
// 料箱号扫描验证（后端接口）
|
const validateBoxNoApi = async (boxNo) => {
|
try {
|
const res = await http.post(
|
`/api/TakeStockOrder/ValidateBoxNo?orderNo=${encodeURIComponent(
|
orderNo.value
|
)}&boxNo=${encodeURIComponent(boxNo)}`,
|
"验证料箱号中..."
|
);
|
|
if (!res.status) {
|
throw new Error(res.message || "料箱号验证失败");
|
}
|
return res.data;
|
} catch (error) {
|
throw error;
|
}
|
};
|
|
// 料箱号扫描处理
|
const handleBoxNoScan = async () => {
|
if (!formRef.value) return;
|
// 手动触发验证（仅验证当前字段）
|
const valid = await formRef.value.validateField("boxNo");
|
if (valid !== true) return;
|
|
const boxNo = formData.boxNo.trim();
|
if (!boxNo) return;
|
|
try {
|
loading.value = true;
|
await validateBoxNoApi(boxNo);
|
ElMessage.success(`料箱号 ${boxNo} 验证通过`);
|
nextTick(() => {
|
barcodeInputRef.value?.focus();
|
});
|
} catch (error) {
|
ElMessage.error(error.message);
|
nextTick(() => {
|
if (boxNoInputRef.value?.input) {
|
boxNoInputRef.value.input.select();
|
}
|
});
|
} finally {
|
loading.value = false;
|
}
|
};
|
|
// 条码扫描验证（后端接口）
|
const validateBarcodeApi = async (boxNo, barcode) => {
|
try {
|
const res = await http.post(
|
`/api/TakeStockOrder/ValidateBarcode?boxNo=${encodeURIComponent(
|
boxNo
|
)}&barcode=${encodeURIComponent(barcode)}`,
|
"验证条码中..."
|
);
|
|
if (!res.status) {
|
throw new Error(res.message || "条码验证失败");
|
}
|
|
if (
|
res.data?.stockQuantity === undefined ||
|
res.data?.stockQuantity === null
|
) {
|
throw new Error("未查询到该条码的库存数量");
|
}
|
|
return res.data;
|
} catch (error) {
|
throw error;
|
}
|
};
|
|
// 条码扫描处理
|
const handleBarcodeScan = async () => {
|
if (!formRef.value) return;
|
const valid = await formRef.value.validateField("barcode");
|
if (valid !== true) return;
|
|
const boxNo = formData.boxNo.trim();
|
const barcode = formData.barcode.trim();
|
if (!boxNo || !barcode) return;
|
|
try {
|
loading.value = true;
|
const result = await validateBarcodeApi(boxNo, barcode);
|
formData.stockQuantity = result.stockQuantity;
|
ElMessage.success(
|
`条码 ${barcode} 验证通过，库存数量：${result.stockQuantity}`
|
);
|
nextTick(() => {
|
const actualQuantityInput = document.querySelector(
|
".form-item:last-child .el-input__inner"
|
);
|
actualQuantityInput?.focus();
|
});
|
} catch (error) {
|
ElMessage.error(error.message);
|
nextTick(() => {
|
if (barcodeInputRef.value?.input) {
|
barcodeInputRef.value.input.select();
|
}
|
});
|
} finally {
|
loading.value = false;
|
}
|
};
|
|
// 盘点完成提交
|
const handleStockTakeComplete = async () => {
|
if (!formRef.value) return;
|
// 全表单验证
|
const valid = await formRef.value.validate();
|
if (!valid) return;
|
|
const { boxNo, barcode, actualQuantity, stockQuantity } = formData;
|
const receiptNo = orderNo.value;
|
|
try {
|
loading.value = true;
|
|
const res = await http.post(
|
"/api/TakeStockOrder/CompleteStockTake",
|
{
|
orderNo: receiptNo,
|
boxNo,
|
barcode,
|
actualQuantity,
|
stockQuantity,
|
},
|
{
|
loadingText: "提交盘点数据中...",
|
}
|
);
|
|
if (res.status) {
|
ElMessage.success("盘点完成，提交成功！");
|
formData.barcode = "";
|
formData.stockQuantity = "";
|
formData.actualQuantity = "";
|
nextTick(() => {
|
barcodeInputRef.value?.focus();
|
});
|
emit("refresh");
|
} else {
|
throw new Error(res.message || "盘点提交失败");
|
}
|
} catch (error) {
|
ElMessage.error(error.message || "网络异常，提交失败");
|
} finally {
|
loading.value = false;
|
}
|
};
|
|
// 料箱回库功能
|
const handleBoxReturn = async () => {
|
const boxNo = formData.boxNo.trim();
|
if (!boxNo) {
|
ElMessage.warning("请先输入或扫描料箱号");
|
return;
|
}
|
|
try {
|
await ElMessageBox.confirm(`确定将料箱【${boxNo}】回库吗？`, "回库确认", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "info",
|
center: true,
|
confirmButtonClass: "el-button--primary",
|
cancelButtonClass: "el-button--text",
|
});
|
|
loading.value = true;
|
|
const res = await http.post(
|
`/api/TakeStockOrder/ReturnBox?boxNo=${encodeURIComponent(boxNo)}&orderNo=${encodeURIComponent(
|
orderNo.value
|
)}`,
|
"料箱回库中..."
|
);
|
|
if (res.status) {
|
ElMessage.success(`料箱【${boxNo}】回库成功！`);
|
formData.boxNo = "";
|
formData.barcode = "";
|
formData.stockQuantity = "";
|
formData.actualQuantity = "";
|
nextTick(() => {
|
boxNoInputRef.value?.focus();
|
});
|
emit("box-returned", boxNo);
|
} else {
|
throw new Error(res.message || "料箱回库失败");
|
}
|
} catch (error) {
|
if (error.name !== "Cancel") {
|
ElMessage.error(error.message);
|
}
|
} finally {
|
loading.value = false;
|
}
|
};
|
|
// 带防抖的扫描处理
|
const debouncedHandleBoxNoScan = debounce(async (e) => {
|
e.stopPropagation();
|
e.preventDefault();
|
await handleBoxNoScan();
|
}, 100);
|
|
const debouncedHandleBarcodeScan = debounce(async (e) => {
|
e.stopPropagation();
|
e.preventDefault();
|
await handleBarcodeScan();
|
}, 100);
|
|
// 暴露方法
|
defineExpose({
|
open,
|
});
|
</script>
|
|
<style scoped>
|
/* 主容器样式 - 优化间距和响应式 */
|
.stock-take-container {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
gap: 16px;
|
padding: 8px 0;
|
}
|
|
/* 单据信息样式 - 优化视觉层级 */
|
.receipt-info {
|
margin-bottom: 4px;
|
}
|
|
.receipt-tag {
|
padding: 8px 16px;
|
font-size: 14px;
|
background-color: #e8f4f8 !important;
|
border-color: #409eff !important;
|
color: #1989fa !important;
|
border-radius: 8px;
|
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
|
}
|
|
.receipt-no {
|
font-weight: 600;
|
color: #1989fa;
|
margin-left: 6px;
|
}
|
|
/* 表单样式 - 优化阴影和内边距 */
|
.stock-take-form {
|
width: 100%;
|
background-color: #ffffff;
|
padding: 20px;
|
border-radius: 12px;
|
box-shadow: 0 2px 12px rgba(64, 158, 255, 0.06);
|
border: 1px solid #f0f8fb;
|
}
|
|
.form-item {
|
margin-bottom: 16px;
|
}
|
|
/* 输入框核心样式 - 优化状态显示 */
|
.custom-input {
|
width: 100%;
|
position: relative;
|
}
|
|
/* 有值时隐藏占位符 + 优化边框 */
|
.custom-input.has-value :deep(.el-input__inner) {
|
--el-input-placeholder-color: transparent; /* 隐藏占位符 */
|
border-color: #8cc5ff; /* 浅蓝边框，区分无值状态 */
|
background-color: #ffffff;
|
}
|
|
.custom-input :deep(.el-input__inner) {
|
border-radius: 8px;
|
border-color: #e5f0fa;
|
transition: all 0.2s ease;
|
height: 42px;
|
line-height: 42px;
|
font-size: 14px;
|
background-color: #f8fbff;
|
padding: 0 12px;
|
}
|
|
/* 聚焦样式优化 */
|
.custom-input :deep(.el-input__inner:focus) {
|
border-color: #409eff;
|
box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
|
background-color: #ffffff;
|
outline: none;
|
}
|
|
/* 清除按钮样式优化 */
|
.custom-input :deep(.el-input__clear) {
|
color: #91c9f7;
|
width: 18px;
|
height: 18px;
|
}
|
|
.custom-input :deep(.el-input__clear:hover) {
|
color: #409eff;
|
}
|
|
/* 只读输入框样式 - 增强区分度 */
|
.custom-readonly-input :deep(.el-input__inner) {
|
background-color: #f0f8fb;
|
color: #1989fa;
|
font-weight: 500;
|
cursor: default;
|
border-color: #d1e7fd;
|
padding-right: 12px;
|
}
|
|
/* 输入框按钮样式 - 优化尺寸和hover效果 */
|
.input-btn {
|
border-radius: 0 8px 8px 0 !important;
|
height: 42px;
|
width: 48px;
|
background-color: #409eff;
|
border-color: #409eff;
|
transition: all 0.2s ease;
|
}
|
|
.input-btn:hover {
|
background-color: #1989fa !important;
|
border-color: #1989fa !important;
|
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
|
transform: translateY(-1px);
|
}
|
|
/* 表单验证错误样式 - 关键：有值时不显示错误边框 */
|
.form-item :deep(.el-form-item__error) {
|
font-size: 12px;
|
color: #f56c6c;
|
margin-top: 4px;
|
/* 仅在输入框为空且验证失败时显示 */
|
display: none;
|
}
|
|
/* 只有输入框为空 + 验证失败时显示错误提示 */
|
.form-item:deep(.el-form-item--error) .custom-input:not(.has-value) + .el-form-item__error {
|
display: block;
|
}
|
|
/* 有值时即使验证失败，也不显示错误边框 */
|
.custom-input.has-value :deep(.el-input__inner.el-input__inner--error) {
|
border-color: #8cc5ff;
|
box-shadow: none;
|
}
|
|
/* 操作按钮区域 - 优化间距和响应式 */
|
.action-buttons {
|
display: flex;
|
justify-content: flex-end;
|
gap: 10px;
|
margin-top: 20px;
|
flex-wrap: wrap;
|
}
|
|
/* 回库按钮样式 - 优化交互 */
|
.return-btn {
|
border-radius: 8px;
|
padding: 9px 20px;
|
font-size: 14px;
|
font-weight: 500;
|
background-color: #e8f4f8;
|
border-color: #409eff;
|
color: #1989fa;
|
transition: all 0.2s ease;
|
}
|
|
.return-btn:hover {
|
background-color: #d1e7fd !important;
|
border-color: #1989fa !important;
|
color: #1989fa !important;
|
transform: translateY(-1px);
|
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
|
}
|
|
.return-btn:disabled {
|
background-color: #f0f8fb !important;
|
border-color: #b3d8ff !important;
|
color: #91c9f7 !important;
|
cursor: not-allowed;
|
transform: none;
|
box-shadow: none;
|
}
|
|
/* 盘点完成按钮样式 - 优化交互 */
|
.complete-btn {
|
border-radius: 8px;
|
padding: 9px 20px;
|
font-size: 14px;
|
font-weight: 500;
|
background-color: #409eff;
|
border-color: #409eff;
|
transition: all 0.2s ease;
|
}
|
|
.complete-btn:hover {
|
background-color: #1989fa !important;
|
border-color: #1989fa !important;
|
transform: translateY(-1px);
|
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
|
}
|
|
.complete-btn:disabled {
|
background-color: #a0cfff !important;
|
border-color: #a0cfff !important;
|
color: #ffffff !important;
|
cursor: not-allowed;
|
transform: none;
|
box-shadow: none;
|
}
|
|
/* 取消按钮样式 - 优化点击区域 */
|
.cancel-btn {
|
color: #666666;
|
font-size: 14px;
|
transition: all 0.2s ease;
|
padding: 9px 20px;
|
border-radius: 8px;
|
min-width: 80px;
|
}
|
|
.cancel-btn:hover {
|
color: #1989fa !important;
|
background-color: #f0f8fb !important;
|
}
|
|
/* 弹窗整体样式 - 优化圆角和阴影 */
|
.custom-vol-box {
|
border-radius: 16px !important;
|
overflow: hidden;
|
box-shadow: 0 8px 24px rgba(64, 158, 255, 0.12);
|
}
|
|
.custom-vol-box :deep(.el-dialog__header) {
|
background-color: #e8f4f8;
|
border-bottom: 1px solid #d1e7fd;
|
padding: 16px 24px;
|
}
|
|
.custom-vol-box :deep(.el-dialog__title) {
|
color: #1989fa;
|
font-size: 18px;
|
font-weight: 600;
|
}
|
|
.custom-vol-box :deep(.el-dialog__body) {
|
padding: 16px 24px;
|
}
|
|
/* 响应式适配 - 小屏幕优化 */
|
@media (max-width: 768px) {
|
.stock-take-form {
|
padding: 16px;
|
}
|
|
.form-item {
|
margin-bottom: 12px;
|
}
|
|
.action-buttons {
|
justify-content: center;
|
}
|
|
.custom-vol-box :deep(.el-dialog__header) {
|
padding: 12px 16px;
|
}
|
|
.custom-vol-box :deep(.el-dialog__body) {
|
padding: 12px 16px;
|
}
|
}
|
</style>
|
|
<style>
|
/* 全局补充样式 - 统一主题 */
|
.el-tag--primary {
|
--el-tag-bg-color: #e8f4f8;
|
--el-tag-border-color: #409eff;
|
--el-tag-text-color: #1989fa;
|
}
|
|
/* 占位符样式 - 统一颜色 */
|
.el-input__inner::-webkit-input-placeholder {
|
color: #b3d8ff;
|
font-size: 13px;
|
}
|
|
.el-input__inner::-moz-placeholder {
|
color: #b3d8ff;
|
font-size: 13px;
|
}
|
|
.el-input__inner:-ms-input-placeholder {
|
color: #b3d8ff;
|
font-size: 13px;
|
}
|
|
.el-input__inner::placeholder {
|
color: #b3d8ff;
|
font-size: 13px;
|
}
|
|
/* 信息按钮全局样式 */
|
.el-button--info {
|
--el-button-bg-color: #e8f4f8;
|
--el-button-border-color: #409eff;
|
--el-button-text-color: #1989fa;
|
--el-button-hover-bg-color: #d1e7fd;
|
--el-button-hover-border-color: #1989fa;
|
--el-button-hover-text-color: #1989fa;
|
}
|
|
/* 确认弹窗样式优化 */
|
.el-message-box {
|
border-radius: 12px !important;
|
box-shadow: 0 4px 20px rgba(64, 158, 255, 0.15);
|
}
|
|
.el-message-box__header {
|
border-bottom: 1px solid #f0f8fb;
|
padding: 12px 20px;
|
}
|
|
.el-message-box__title {
|
color: #1989fa;
|
font-size: 16px;
|
font-weight: 600;
|
}
|
|
.el-message-box__content {
|
color: #666666;
|
font-size: 14px;
|
padding: 16px 20px;
|
}
|
|
.el-message-box__btns {
|
padding: 12px 20px;
|
border-top: 1px solid #f0f8fb;
|
}
|
</style>
|
