286 lines
8.1 KiB
Vue
286 lines
8.1 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-card class="box-card">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span>扫码出库作业台</span>
|
||
<el-button type="primary" @click="toggleCamera">
|
||
{{ showCamera ? '关闭摄像头' : '打开摄像头扫码' }}
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
|
||
<div v-if="!currentItem" class="scan-area">
|
||
<div v-if="showCamera" id="reader" class="camera-box"></div>
|
||
|
||
<div class="input-box">
|
||
<el-input
|
||
v-model="barcodeInput"
|
||
placeholder="请扫描条码或手动输入后回车"
|
||
@keyup.enter="handleScan"
|
||
clearable
|
||
ref="barcodeRef"
|
||
>
|
||
<template #prefix>
|
||
<el-icon><Scissor /></el-icon>
|
||
</template>
|
||
<template #append>
|
||
<el-button @click="handleScan">确定</el-button>
|
||
</template>
|
||
</el-input>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else class="confirm-area">
|
||
<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="库位">{{ currentItem.warehouse_location || '暂无' }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
<el-form :model="form" ref="formRef" :rules="rules" label-position="top" class="mt-20">
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="出库类型" prop="outbound_type">
|
||
<el-select v-model="form.outbound_type" placeholder="请选择">
|
||
<el-option label="销售出库" value="SALES" />
|
||
<el-option label="内部领用" value="USE" />
|
||
<el-option label="调拨" value="TRANSFER" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</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-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-form-item label="备注" prop="remark">
|
||
<el-input v-model="form.remark" type="textarea" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="电子签名 (请在下方区域签字)" required>
|
||
<Signature ref="signatureRef" />
|
||
</el-form-item>
|
||
|
||
<div class="form-actions">
|
||
<el-button @click="resetScan">取消 / 重新扫码</el-button>
|
||
<el-button type="primary" :loading="loading" @click="submitForm">确认出库</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, nextTick, onUnmounted } 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 { uploadFile } from '@/api/common/upload'
|
||
import Signature from '@/components/Signature/index.vue'
|
||
|
||
// --- 状态定义 ---
|
||
const barcodeInput = ref('')
|
||
const currentItem = ref<ScanResult | null>(null)
|
||
const loading = ref(false)
|
||
const showCamera = ref(false)
|
||
const html5QrCode = ref<Html5Qrcode | null>(null)
|
||
const barcodeRef = ref()
|
||
const signatureRef = ref()
|
||
const formRef = ref() // ★ [修复] 补充 formRef 定义
|
||
|
||
const form = reactive({
|
||
outbound_type: 'SALES',
|
||
quantity: 1,
|
||
consumer_name: '',
|
||
remark: ''
|
||
})
|
||
|
||
const rules = {
|
||
consumer_name: [{ required: true, message: '请输入领用人姓名', trigger: 'blur' }],
|
||
quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }]
|
||
}
|
||
|
||
// --- 扫码逻辑 ---
|
||
const handleScan = async () => {
|
||
if (!barcodeInput.value) return
|
||
|
||
try {
|
||
loading.value = true
|
||
const res = await getStockByBarcode(barcodeInput.value)
|
||
if (res.data) {
|
||
currentItem.value = res.data
|
||
// 停止摄像头
|
||
if (html5QrCode.value && html5QrCode.value.isScanning) {
|
||
await stopCamera()
|
||
}
|
||
} else {
|
||
ElMessage.warning('未找到对应库存条码')
|
||
}
|
||
} catch (error) {
|
||
console.error(error)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// --- 摄像头控制 ---
|
||
const toggleCamera = async () => {
|
||
if (showCamera.value) {
|
||
await stopCamera()
|
||
} else {
|
||
showCamera.value = true
|
||
nextTick(() => {
|
||
startCamera()
|
||
})
|
||
}
|
||
}
|
||
|
||
const startCamera = () => {
|
||
// ★ [关键修改] 初始化时指定只支持 CODE_128，这是提高条码识别率的关键
|
||
html5QrCode.value = new Html5Qrcode("reader", {
|
||
formatsToSupport: [ Html5QrcodeSupportedFormats.CODE_128 ],
|
||
verbose: false
|
||
})
|
||
|
||
html5QrCode.value.start(
|
||
{ facingMode: "environment" }, // 后置摄像头
|
||
{
|
||
fps: 10,
|
||
// ★ [修改] 扫一维码时，扫描区域设置为长方形效果更好
|
||
qrbox: { width: 250, height: 150 },
|
||
aspectRatio: 1.0
|
||
},
|
||
(decodedText) => {
|
||
// 扫码成功回调
|
||
console.log("扫码成功:", decodedText)
|
||
barcodeInput.value = decodedText
|
||
handleScan() // 自动触发查询
|
||
},
|
||
(errorMessage) => {
|
||
// 扫描中错误忽略
|
||
}
|
||
).catch(err => {
|
||
// 如果还报错，大概率是因为没有使用 HTTPS 访问
|
||
ElMessage.error('无法启动摄像头: ' + err)
|
||
})
|
||
}
|
||
|
||
const stopCamera = async () => {
|
||
if (html5QrCode.value) {
|
||
try {
|
||
// 先判断是否在运行，避免报错
|
||
if (html5QrCode.value.isScanning) {
|
||
await html5QrCode.value.stop()
|
||
}
|
||
html5QrCode.value.clear()
|
||
showCamera.value = false
|
||
} catch (err) {
|
||
console.log('停止摄像头失败', err)
|
||
// 强制关闭 UI 状态
|
||
showCamera.value = false
|
||
}
|
||
}
|
||
}
|
||
|
||
// --- 提交逻辑 ---
|
||
const submitForm = async () => {
|
||
if (!formRef.value) return // 确保 formRef 存在
|
||
|
||
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('请先进行电子签名')
|
||
return
|
||
}
|
||
|
||
try {
|
||
loading.value = true
|
||
|
||
// 2. 上传签名
|
||
const uploadRes = await uploadFile(file)
|
||
const signatureUrl = uploadRes.data.url
|
||
|
||
// 3. 提交业务单据
|
||
await submitOutbound({
|
||
sku: currentItem.value.sku,
|
||
source_table: currentItem.value.source_table,
|
||
stock_id: currentItem.value.id,
|
||
barcode: barcodeInput.value,
|
||
outbound_type: form.outbound_type,
|
||
quantity: form.quantity,
|
||
consumer_name: form.consumer_name,
|
||
remark: form.remark,
|
||
signature_path: signatureUrl
|
||
})
|
||
|
||
ElMessage.success('出库成功')
|
||
resetScan()
|
||
|
||
} catch (error) {
|
||
console.error(error)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
})
|
||
}
|
||
|
||
const resetScan = () => {
|
||
currentItem.value = null
|
||
barcodeInput.value = ''
|
||
form.consumer_name = ''
|
||
form.quantity = 1
|
||
form.remark = ''
|
||
signatureRef.value?.clear() // 清空签名
|
||
|
||
// 重新聚焦输入框
|
||
nextTick(() => {
|
||
barcodeRef.value?.focus()
|
||
})
|
||
}
|
||
|
||
onUnmounted(() => {
|
||
stopCamera()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.scan-area {
|
||
text-align: center;
|
||
padding: 20px;
|
||
}
|
||
.camera-box {
|
||
width: 100%; /* 响应式宽度 */
|
||
max-width: 400px; /* 限制最大宽度 */
|
||
height: 300px;
|
||
margin: 0 auto 20px;
|
||
background: #000;
|
||
overflow: hidden;
|
||
}
|
||
.confirm-area {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
.mt-20 {
|
||
margin-top: 20px;
|
||
}
|
||
.form-actions {
|
||
margin-top: 30px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
</style> |