出库逻辑添加，扫码识别编码成功，后续对应逻辑没有完成
This commit is contained in:
286
inventory-web/src/views/outbound/create.vue
Normal file
286
inventory-web/src/views/outbound/create.vue
Normal file
@ -0,0 +1,286 @@
|
||||
<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>
|
||||
87
inventory-web/src/views/outbound/index.vue
Normal file
87
inventory-web/src/views/outbound/index.vue
Normal file
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<el-input v-model="listQuery.keyword" placeholder="单号/姓名/SKU" style="width: 200px;" class="filter-item" />
|
||||
<el-date-picker
|
||||
v-model="listQuery.dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
class="filter-item"
|
||||
style="margin-left: 10px;"
|
||||
/>
|
||||
<el-button type="primary" class="filter-item" style="margin-left: 10px;" @click="fetchData">查询</el-button>
|
||||
<el-button type="success" class="filter-item" @click="$router.push('/stock/outbound/create')">新建出库</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="list" v-loading="loading" border style="width: 100%; margin-top: 20px;">
|
||||
<el-table-column prop="outbound_no" label="出库单号" width="180" />
|
||||
<el-table-column prop="outbound_time" label="出库时间" width="180" />
|
||||
<el-table-column prop="outbound_type" label="类型" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag>{{ formatType(row.outbound_type) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sku" label="SKU" width="150" />
|
||||
<el-table-column prop="quantity" label="数量" width="100" />
|
||||
<el-table-column prop="consumer_name" label="领用/客户" width="120" />
|
||||
<el-table-column prop="operator_name" label="操作员" width="120" />
|
||||
<el-table-column label="签名" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="viewSignature(row.signature_path)">查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-dialog v-model="dialogVisible" title="电子签名凭证" width="500px">
|
||||
<img :src="currentSignature" style="width: 100%; border: 1px solid #eee;" alt="Signature" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive } from 'vue'
|
||||
import { getOutboundList } from '@/api/outbound'
|
||||
|
||||
const list = ref([])
|
||||
const loading = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const currentSignature = ref('')
|
||||
|
||||
const listQuery = reactive({
|
||||
keyword: '',
|
||||
dateRange: []
|
||||
})
|
||||
|
||||
const fetchData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getOutboundList(listQuery)
|
||||
list.value = res.data.items || [] // 假设后端返回 { items: [] }
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const formatType = (type: string) => {
|
||||
const map: any = {
|
||||
'SALES': '销售出库',
|
||||
'USE': '内部领用',
|
||||
'TRANSFER': '调拨',
|
||||
'SCRAP': '报废'
|
||||
}
|
||||
return map[type] || type
|
||||
}
|
||||
|
||||
const viewSignature = (url: string) => {
|
||||
currentSignature.value = url // 这里可能需要拼接 BaseURL，取决于你 upload 接口返回的是相对路径还是绝对路径
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user