出库操作逻辑上面实现，成功跑通
This commit is contained in:
@ -35,7 +35,11 @@
|
||||
<el-descriptions title="货物信息" border :column="1">
|
||||
<el-descriptions-item label="名称">{{ currentItem.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="规格/型号">{{ currentItem.spec_model }}</el-descriptions-item>
|
||||
<el-descriptions-item label="当前库存">{{ currentItem.stock_quantity }}</el-descriptions-item>
|
||||
<el-descriptions-item label="当前库存">
|
||||
<el-tag :type="currentItem.available_quantity > 0 ? 'success' : 'danger'">
|
||||
{{ currentItem.stock_quantity }} (可用: {{ currentItem.available_quantity }})
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="库位">{{ currentItem.warehouse_location || '暂无' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
@ -52,14 +56,37 @@
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="出库数量" prop="quantity">
|
||||
<el-input-number v-model="form.quantity" :min="1" :max="currentItem.available_quantity" />
|
||||
<el-input-number v-model="form.quantity" :min="1" :max="currentItem.available_quantity" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item label="领用人/客户姓名" prop="consumer_name">
|
||||
<el-input v-model="form.consumer_name" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="领用人/客户姓名" prop="consumer_name">
|
||||
<el-input v-model="form.consumer_name" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="操作员 (库管)" prop="operator_name">
|
||||
<el-select
|
||||
v-model="form.operator_name"
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
placeholder="请选择或输入操作员"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in operatorOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" />
|
||||
@ -80,13 +107,16 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, nextTick, onUnmounted } from 'vue'
|
||||
import { ref, reactive, nextTick, onUnmounted, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
// ★ [修改] 引入 Html5QrcodeSupportedFormats 以支持 Code 128
|
||||
import { Html5Qrcode, Html5QrcodeSupportedFormats } from 'html5-qrcode'
|
||||
import { getStockByBarcode, submitOutbound, type ScanResult } from '@/api/outbound'
|
||||
// 引入接口
|
||||
import { getStockByBarcode, submitOutbound, getOutboundList, type ScanResult } from '@/api/outbound'
|
||||
import { uploadFile } from '@/api/common/upload'
|
||||
// 引入组件
|
||||
import Signature from '@/components/Signature/index.vue'
|
||||
// 引入 Store 以获取当前登录用户
|
||||
import { useUserStore } from '@/stores/user'
|
||||
|
||||
// --- 状态定义 ---
|
||||
const barcodeInput = ref('')
|
||||
@ -96,18 +126,58 @@ const showCamera = ref(false)
|
||||
const html5QrCode = ref<Html5Qrcode | null>(null)
|
||||
const barcodeRef = ref()
|
||||
const signatureRef = ref()
|
||||
const formRef = ref() // ★ [修复] 补充 formRef 定义
|
||||
const formRef = ref()
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 操作员选项列表
|
||||
const operatorOptions = ref<string[]>([])
|
||||
|
||||
const form = reactive({
|
||||
outbound_type: 'SALES',
|
||||
quantity: 1,
|
||||
consumer_name: '',
|
||||
operator_name: '', // 新增字段
|
||||
remark: ''
|
||||
})
|
||||
|
||||
const rules = {
|
||||
consumer_name: [{ required: true, message: '请输入领用人姓名', trigger: 'blur' }],
|
||||
quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }]
|
||||
quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }],
|
||||
operator_name: [{ required: true, message: '请指定操作员', trigger: 'change' }]
|
||||
}
|
||||
|
||||
// --- 初始化逻辑 ---
|
||||
onMounted(() => {
|
||||
// 1. 默认操作员为当前登录用户
|
||||
if (userStore.username) {
|
||||
form.operator_name = userStore.username
|
||||
operatorOptions.value.push(userStore.username)
|
||||
}
|
||||
// 2. 加载历史操作员记录
|
||||
loadHistoryOperators()
|
||||
})
|
||||
|
||||
// 加载历史操作员列表 (用于自动补全)
|
||||
const loadHistoryOperators = async () => {
|
||||
try {
|
||||
// 获取最近的 50 条出库记录
|
||||
const res = await getOutboundList({ page: 1, limit: 50 })
|
||||
if (res.data && res.data.items) {
|
||||
const names = new Set<string>()
|
||||
// 加入当前用户
|
||||
if (userStore.username) names.add(userStore.username)
|
||||
|
||||
// 加入历史记录中的操作员
|
||||
res.data.items.forEach((item: any) => {
|
||||
if (item.operator_name) {
|
||||
names.add(item.operator_name)
|
||||
}
|
||||
})
|
||||
operatorOptions.value = Array.from(names)
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('加载历史操作员失败', e)
|
||||
}
|
||||
}
|
||||
|
||||
// --- 扫码逻辑 ---
|
||||
@ -117,17 +187,35 @@ const handleScan = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
const res = await getStockByBarcode(barcodeInput.value)
|
||||
|
||||
// 1. 成功找到记录
|
||||
if (res.data) {
|
||||
currentItem.value = res.data
|
||||
// 停止摄像头
|
||||
const item = res.data
|
||||
|
||||
// ★ [逻辑修改] 检查库存状态
|
||||
if (item.available_quantity <= 0) {
|
||||
ElMessage.warning(`该商品库存不足或已出库！(当前库存: ${item.available_quantity})`)
|
||||
// 播放一个错误提示音或清空输入框让用户重新扫，但不进入表单
|
||||
barcodeInput.value = ''
|
||||
return
|
||||
}
|
||||
|
||||
// 库存充足，进入确认界面
|
||||
currentItem.value = item
|
||||
|
||||
// 如果开启了摄像头，识别成功后关闭
|
||||
if (html5QrCode.value && html5QrCode.value.isScanning) {
|
||||
await stopCamera()
|
||||
}
|
||||
} else {
|
||||
ElMessage.warning('未找到对应库存条码')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} catch (error: any) {
|
||||
// 2. 处理 404 未找到 (即没有入库记录)
|
||||
if (error.response && error.response.status === 404) {
|
||||
ElMessage.error(`未找到条码 ${barcodeInput.value} 的入库记录，请先入库！`)
|
||||
} else {
|
||||
console.error(error)
|
||||
ElMessage.error('查询出错，请重试')
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
@ -146,31 +234,27 @@ const toggleCamera = async () => {
|
||||
}
|
||||
|
||||
const startCamera = () => {
|
||||
// ★ [关键修改] 初始化时指定只支持 CODE_128，这是提高条码识别率的关键
|
||||
html5QrCode.value = new Html5Qrcode("reader", {
|
||||
formatsToSupport: [ Html5QrcodeSupportedFormats.CODE_128 ],
|
||||
verbose: false
|
||||
})
|
||||
|
||||
html5QrCode.value.start(
|
||||
{ facingMode: "environment" }, // 后置摄像头
|
||||
{ facingMode: "environment" },
|
||||
{
|
||||
fps: 10,
|
||||
// ★ [修改] 扫一维码时，扫描区域设置为长方形效果更好
|
||||
qrbox: { width: 250, height: 150 },
|
||||
aspectRatio: 1.0
|
||||
},
|
||||
(decodedText) => {
|
||||
// 扫码成功回调
|
||||
console.log("扫码成功:", decodedText)
|
||||
barcodeInput.value = decodedText
|
||||
handleScan() // 自动触发查询
|
||||
handleScan()
|
||||
},
|
||||
(errorMessage) => {
|
||||
// 扫描中错误忽略
|
||||
// 忽略扫描过程中的每帧错误
|
||||
}
|
||||
).catch(err => {
|
||||
// 如果还报错，大概率是因为没有使用 HTTPS 访问
|
||||
ElMessage.error('无法启动摄像头: ' + err)
|
||||
})
|
||||
}
|
||||
@ -178,7 +262,6 @@ const startCamera = () => {
|
||||
const stopCamera = async () => {
|
||||
if (html5QrCode.value) {
|
||||
try {
|
||||
// 先判断是否在运行，避免报错
|
||||
if (html5QrCode.value.isScanning) {
|
||||
await html5QrCode.value.stop()
|
||||
}
|
||||
@ -186,7 +269,6 @@ const stopCamera = async () => {
|
||||
showCamera.value = false
|
||||
} catch (err) {
|
||||
console.log('停止摄像头失败', err)
|
||||
// 强制关闭 UI 状态
|
||||
showCamera.value = false
|
||||
}
|
||||
}
|
||||
@ -194,14 +276,13 @@ const stopCamera = async () => {
|
||||
|
||||
// --- 提交逻辑 ---
|
||||
const submitForm = async () => {
|
||||
if (!formRef.value) return // 确保 formRef 存在
|
||||
if (!formRef.value) return
|
||||
|
||||
await formRef.value.validate(async (valid: boolean) => {
|
||||
if (!valid) return
|
||||
|
||||
if (!currentItem.value) return
|
||||
|
||||
// 1. 获取签名图片
|
||||
const file = await signatureRef.value.generateFile()
|
||||
if (!file) {
|
||||
ElMessage.error('请先进行电子签名')
|
||||
@ -211,11 +292,11 @@ const submitForm = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
|
||||
// 2. 上传签名
|
||||
// 1. 上传签名
|
||||
const uploadRes = await uploadFile(file)
|
||||
const signatureUrl = uploadRes.data.url
|
||||
|
||||
// 3. 提交业务单据
|
||||
// 2. 提交业务单据
|
||||
await submitOutbound({
|
||||
sku: currentItem.value.sku,
|
||||
source_table: currentItem.value.source_table,
|
||||
@ -224,12 +305,17 @@ const submitForm = async () => {
|
||||
outbound_type: form.outbound_type,
|
||||
quantity: form.quantity,
|
||||
consumer_name: form.consumer_name,
|
||||
// ★ 传递操作员信息 (注：需要确保后端接收此字段，否则后端可能仍使用当前JWT用户)
|
||||
// 建议在后端 create_outbound 接口中优先使用前端传来的 operator_name
|
||||
operator_name: form.operator_name,
|
||||
remark: form.remark,
|
||||
signature_path: signatureUrl
|
||||
})
|
||||
|
||||
ElMessage.success('出库成功')
|
||||
resetScan()
|
||||
// 提交成功后，刷新一次操作员列表，以便下次能选到新名字
|
||||
loadHistoryOperators()
|
||||
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
@ -245,9 +331,12 @@ const resetScan = () => {
|
||||
form.consumer_name = ''
|
||||
form.quantity = 1
|
||||
form.remark = ''
|
||||
signatureRef.value?.clear() // 清空签名
|
||||
// 重置为当前用户，但不清空选项
|
||||
if (userStore.username) {
|
||||
form.operator_name = userStore.username
|
||||
}
|
||||
|
||||
// 重新聚焦输入框
|
||||
signatureRef.value?.clear()
|
||||
nextTick(() => {
|
||||
barcodeRef.value?.focus()
|
||||
})
|
||||
@ -264,8 +353,8 @@ onUnmounted(() => {
|
||||
padding: 20px;
|
||||
}
|
||||
.camera-box {
|
||||
width: 100%; /* 响应式宽度 */
|
||||
max-width: 400px; /* 限制最大宽度 */
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
height: 300px;
|
||||
margin: 0 auto 20px;
|
||||
background: #000;
|
||||
|
||||
Reference in New Issue
Block a user