refactor: extract scrap to top-level menu and rebuild create UI using immersive scanner layout
This commit is contained in:
492
inventory-web/src/views/operation/scrap/create.vue
Normal file
492
inventory-web/src/views/operation/scrap/create.vue
Normal file
@ -0,0 +1,492 @@
|
||||
<template>
|
||||
<div class="app-container mobile-optimized">
|
||||
<el-card class="box-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div class="title-box">
|
||||
<span>报废作业</span>
|
||||
<el-tag v-if="cartItems.length > 0" type="danger" size="small" effect="dark">
|
||||
已选 {{ cartItems.length }} 项
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="scan-section">
|
||||
<div v-if="hasPermission" class="camera-placeholder" @click="showCamera = true">
|
||||
<el-icon :size="40" color="#F56C6C"><CameraFilled /></el-icon>
|
||||
<span class="text">点击开启全屏扫码</span>
|
||||
</div>
|
||||
<div v-else class="camera-placeholder" style="background-color: #f5f5f5; cursor: not-allowed;">
|
||||
<el-icon :size="40" color="#909399"><CameraFilled /></el-icon>
|
||||
<span class="text">无扫码权限</span>
|
||||
</div>
|
||||
|
||||
<div class="input-box">
|
||||
<el-input
|
||||
v-model="barcodeInput"
|
||||
placeholder="扫描或输入条码回车"
|
||||
@keyup.enter="handleManualInput"
|
||||
clearable
|
||||
ref="barcodeRef"
|
||||
size="large"
|
||||
:disabled="!hasPermission"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Scissor /></el-icon>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button @click="handleManualInput" :disabled="!hasPermission">添加</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cart-section">
|
||||
<div v-if="cartItems.length > 0">
|
||||
<el-table :data="cartItems" border stripe style="width: 100%">
|
||||
<el-table-column prop="name" label="物品名称" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="sku" label="SKU" width="120" show-overflow-tooltip />
|
||||
|
||||
<el-table-column label="可用库存" width="90" align="center">
|
||||
<template #default="{row}">
|
||||
<el-tag type="info">{{ parseFloat(row.available_quantity) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="报废数" width="130" align="center">
|
||||
<template #default="{row}">
|
||||
<el-input-number
|
||||
v-model="row.quantity"
|
||||
:min="1"
|
||||
:max="parseFloat(row.available_quantity)"
|
||||
size="small"
|
||||
style="width: 100px"
|
||||
:disabled="!hasPermission"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="损失金额" width="100" align="center">
|
||||
<template #default="{row}">
|
||||
<span style="color: #F56C6C; font-weight: bold;">
|
||||
¥{{ ((row.price || 0) * row.quantity).toFixed(2) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column v-if="hasPermission" label="操作" width="60" align="center" fixed="right">
|
||||
<template #default="{$index}">
|
||||
<el-button type="danger" icon="Delete" circle size="small" @click="removeFromCart($index)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<el-empty v-else description="暂无物品，请扫码添加报废物料" :image-size="80" />
|
||||
</div>
|
||||
|
||||
<div v-if="cartItems.length > 0" class="form-section">
|
||||
<el-divider content-position="left">报废登记信息</el-divider>
|
||||
|
||||
<el-form :model="form" ref="formRef" label-position="top">
|
||||
<el-form-item label="报废原因" prop="reason" required>
|
||||
<el-input
|
||||
v-model="form.reason"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请详细填写报废原因，如：设备老化、损坏严重等"
|
||||
size="large"
|
||||
maxlength="500"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注说明" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" :rows="2" placeholder="补充说明..." />
|
||||
</el-form-item>
|
||||
|
||||
<div class="bottom-actions">
|
||||
<el-button v-if="hasPermission" @click="clearAll" icon="Refresh">清空</el-button>
|
||||
<el-button v-if="hasPermission" type="danger" size="large" :loading="loading" @click="submitForm" icon="Select">
|
||||
确认报废
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<div v-if="showCamera" class="fullscreen-scanner-overlay">
|
||||
<div class="scanner-header">
|
||||
<el-button circle icon="Close" @click="showCamera = false" class="close-btn" />
|
||||
<span class="scanner-title">扫码模式</span>
|
||||
<div class="scanner-placeholder"></div>
|
||||
</div>
|
||||
|
||||
<div class="scanner-body">
|
||||
<QrScanner @decode="onScanSuccess" />
|
||||
</div>
|
||||
|
||||
<div class="scanner-footer">
|
||||
<p>请将条码/二维码放入镜头范围</p>
|
||||
<p v-if="cartItems.length > 0" class="current-count">已添加: {{ cartItems.length }} 项</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, nextTick } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Scissor, CameraFilled, Close, Refresh, Select, Delete } from '@element-plus/icons-vue'
|
||||
import QrScanner from '@/components/QrScanner/index.vue'
|
||||
import { scanBarcode, createScrap } from '@/api/scrap'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const hasPermission = userStore.hasPermission('op_scrap:operation')
|
||||
|
||||
// --- 状态定义 ---
|
||||
const barcodeInput = ref('')
|
||||
const cartItems = ref<any[]>([])
|
||||
const loading = ref(false)
|
||||
const showCamera = ref(false)
|
||||
const barcodeRef = ref()
|
||||
const formRef = ref()
|
||||
|
||||
const form = reactive({
|
||||
reason: '',
|
||||
remark: ''
|
||||
})
|
||||
|
||||
// --- 核心扫码逻辑 ---
|
||||
const onScanSuccess = (code: string) => {
|
||||
if (!code) return
|
||||
const trimCode = code.trim()
|
||||
|
||||
const validPattern = /^[A-Za-z0-9\-\.]+$/
|
||||
if (!validPattern.test(trimCode)) {
|
||||
ElMessage.warning(`识别到异常符号，已忽略：${trimCode}`)
|
||||
return
|
||||
}
|
||||
|
||||
if (trimCode.length < 3) {
|
||||
ElMessage.warning('扫描结果过短，请对准重试')
|
||||
return
|
||||
}
|
||||
|
||||
if (loading.value) return
|
||||
|
||||
barcodeInput.value = trimCode
|
||||
handleManualInput()
|
||||
}
|
||||
|
||||
const handleManualInput = async () => {
|
||||
const code = barcodeInput.value.trim()
|
||||
if (!code) return
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
|
||||
// 查重
|
||||
const existIndex = cartItems.value.findIndex(item => item.barcode === code || item.sku === code)
|
||||
if (existIndex > -1) {
|
||||
const item = cartItems.value[existIndex]
|
||||
const maxQty = parseFloat(item.available_quantity)
|
||||
if (item.quantity < maxQty) {
|
||||
item.quantity++
|
||||
ElMessage.success(`数量+1 (当前: ${item.quantity})`)
|
||||
if (navigator.vibrate) navigator.vibrate(50)
|
||||
} else {
|
||||
ElMessage.warning(`库存不足 (余: ${maxQty})`)
|
||||
}
|
||||
barcodeInput.value = ''
|
||||
return
|
||||
}
|
||||
|
||||
// 查库
|
||||
const res = await scanBarcode(code)
|
||||
if (res.code === 200 && res.data) {
|
||||
const item = res.data
|
||||
const availQty = parseFloat(item.available_quantity || 0)
|
||||
|
||||
if (availQty <= 0) {
|
||||
ElMessage.warning(`库存不足 (余: ${availQty})`)
|
||||
} else {
|
||||
cartItems.value.push({
|
||||
...item,
|
||||
quantity: 1,
|
||||
price: item.price || 0
|
||||
})
|
||||
ElMessage.success(`添加成功: ${item.name}`)
|
||||
if (navigator.vibrate) navigator.vibrate(100)
|
||||
}
|
||||
barcodeInput.value = ''
|
||||
} else {
|
||||
ElMessage.error(res.msg || '未找到该物料')
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error.response && error.response.status === 404) {
|
||||
ElMessage.error(`未找到条码: ${code}`)
|
||||
} else {
|
||||
ElMessage.error('查询出错')
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
if (!showCamera.value) {
|
||||
nextTick(() => { barcodeRef.value?.focus() })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const removeFromCart = (index: number) => {
|
||||
cartItems.value.splice(index, 1)
|
||||
}
|
||||
|
||||
const clearAll = () => {
|
||||
ElMessageBox.confirm('确定清空所有已选物品吗?', '提示', { type: 'warning' })
|
||||
.then(() => {
|
||||
cartItems.value = []
|
||||
form.reason = ''
|
||||
form.remark = ''
|
||||
barcodeInput.value = ''
|
||||
})
|
||||
}
|
||||
|
||||
// --- 提交逻辑 ---
|
||||
const submitForm = async () => {
|
||||
if (!formRef.value) return
|
||||
if (cartItems.value.length === 0) return ElMessage.warning('请先添加物品')
|
||||
|
||||
// 验证报废原因
|
||||
if (!form.reason.trim()) {
|
||||
ElMessage.error('请填写报废原因')
|
||||
return
|
||||
}
|
||||
|
||||
// 检查报废数量
|
||||
const invalidItem = cartItems.value.find(item => !item.quantity || item.quantity <= 0)
|
||||
if (invalidItem) {
|
||||
ElMessage.warning('请填写有效的报废数量')
|
||||
return
|
||||
}
|
||||
|
||||
// 检查报废数量是否超过可用库存
|
||||
const overstockItem = cartItems.value.find(item => item.quantity > parseFloat(item.available_quantity))
|
||||
if (overstockItem) {
|
||||
ElMessage.warning(`物料 ${overstockItem.sku} 报废数量超过可用库存`)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
|
||||
const data = {
|
||||
reason: form.reason,
|
||||
remark: form.remark,
|
||||
items: cartItems.value.map(item => ({
|
||||
id: item.id,
|
||||
sku: item.sku,
|
||||
source_table: item.source_table,
|
||||
quantity: item.quantity
|
||||
}))
|
||||
}
|
||||
|
||||
const res = await createScrap(data)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('报废提交成功')
|
||||
router.push('/scrap/index')
|
||||
} else {
|
||||
ElMessage.error(res.msg || '提交失败')
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error(error)
|
||||
ElMessage.error(error.response?.data?.msg || '提交失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.scan-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.camera-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 180px;
|
||||
background: linear-gradient(135deg, #fef0f0 0%, #fdeaea 100%);
|
||||
border: 2px dashed #F56C6C;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.camera-placeholder:hover {
|
||||
background: linear-gradient(135deg, #fdeaea 0%, #fcd5d5 100%);
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.camera-placeholder .text {
|
||||
margin-top: 10px;
|
||||
color: #F56C6C;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.input-box :deep(.el-input__wrapper) {
|
||||
box-shadow: 0 0 0 1px #dcdfe6 inset;
|
||||
}
|
||||
|
||||
.input-box :deep(.el-input__wrapper:hover) {
|
||||
box-shadow: 0 0 0 1px #c0c4cc inset;
|
||||
}
|
||||
|
||||
.input-box :deep(.el-input__wrapper.is-focus) {
|
||||
box-shadow: 0 0 0 1px #F56C6C inset;
|
||||
}
|
||||
|
||||
.cart-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.form-section :deep(.el-divider__text) {
|
||||
font-weight: bold;
|
||||
color: #F56C6C;
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 15px;
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.bottom-actions .el-button--large {
|
||||
padding: 12px 30px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 全屏扫码样式 */
|
||||
.fullscreen-scanner-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #000;
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.scanner-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.scanner-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.scanner-placeholder {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.scanner-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.scanner-footer {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.scanner-footer p {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.current-count {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #F56C6C;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.app-container {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.title-box {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.camera-placeholder {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bottom-actions .el-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user