duxingchen/KCGL
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

出库操作逻辑上面实现，成功跑通

Browse Source
This commit is contained in:
dxc
2026-02-05 10:20:52 +08:00
parent 797b611530
commit f3b60dfc54
8 changed files with 337 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
inventory-web/src/views/outbound/create.vue
View File

@ -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;

110
inventory-web/src/views/outbound/index.vue
View File

@ -1,7 +1,14 @@
<template>
<div class="app-container">
<div class="filter-container">
<el-input v-model="listQuery.keyword" placeholder="单号/姓名/SKU" style="width: 200px;" class="filter-item" />
<el-input
v-model="listQuery.keyword"
placeholder="单号/姓名/SKU"
style="width: 200px;"
class="filter-item"
clearable
@keyup.enter="fetchData"
/>
<el-date-picker
v-model="listQuery.dateRange"
type="daterange"
@ -10,44 +17,75 @@
end-placeholder="结束日期"
class="filter-item"
style="margin-left: 10px;"
value-format="YYYY-MM-DD"
/>
<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>
<el-button type="success" class="filter-item" @click="$router.push('/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">
<el-table
:data="list"
v-loading="loading"
border
style="width: 100%; margin-top: 20px;"
:header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
>
<el-table-column prop="outbound_no" label="出库单号" min-width="180" show-overflow-tooltip />
<el-table-column prop="outbound_time" label="出库时间" width="170" align="center">
<template #default="{ row }">
<el-tag>{{ formatType(row.outbound_type) }}</el-tag>
<span>{{ row.outbound_time ? row.outbound_time.substring(0, 16) : '' }}</span>
</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">
<el-table-column prop="outbound_type" label="类型" width="100" align="center">
<template #default="{ row }">
<el-button type="primary" link @click="viewSignature(row.signature_path)">查看</el-button>
<el-tag :type="getTagType(row.outbound_type)">{{ formatType(row.outbound_type) }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="sku" label="SKU" min-width="140" show-overflow-tooltip />
<el-table-column prop="quantity" label="数量" width="90" align="center" />
<el-table-column prop="consumer_name" label="领用/客户" min-width="120" show-overflow-tooltip />
<el-table-column prop="operator_name" label="操作员" min-width="100" show-overflow-tooltip />
<el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip />
<el-table-column label="签名" width="120" align="center">
<template #default="{ row }">
<div v-if="row.signature_path" class="signature-cell">
<el-image
style="width: 80px; height: 40px; border-radius: 4px; border: 1px solid #dcdfe6;"
:src="row.signature_path"
:preview-src-list="[row.signature_path]"
preview-teleported
fit="contain"
hide-on-click-modal
>
<template #error>
<div class="image-slot">
<el-icon><Picture /></el-icon>
</div>
</template>
</el-image>
</div>
<span v-else style="color: #909399; font-size: 12px;">未签名</span>
</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'
import { Picture } from '@element-plus/icons-vue' // 引入图标用于图片加载失败显示
const list = ref([])
const loading = ref(false)
const dialogVisible = ref(false)
const currentSignature = ref('')
const listQuery = reactive({
keyword: '',
@ -58,7 +96,7 @@ const fetchData = async () => {
loading.value = true
try {
const res = await getOutboundList(listQuery)
list.value = res.data.items || [] // 假设后端返回 { items: [] }
list.value = res.data.items || []
} catch (e) {
console.error(e)
} finally {
@ -76,12 +114,36 @@ const formatType = (type: string) => {
return map[type] || type
}
const viewSignature = (url: string) => {
currentSignature.value = url // 这里可能需要拼接 BaseURL，取决于你 upload 接口返回的是相对路径还是绝对路径
dialogVisible.value = true
// 辅助函数：根据类型返回 Tag 颜色
const getTagType = (type: string) => {
const map: any = {
'SALES': 'success',
'USE': 'warning',
'TRANSFER': 'info',
'SCRAP': 'danger'
}
return map[type] || ''
}
onMounted(() => {
fetchData()
})
</script>
</script>
<style scoped>
.signature-cell {
display: flex;
justify-content: center;
align-items: center;
padding: 2px 0;
}
.image-slot {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: #f5f7fa;
color: #909399;
}
</style>