出库逻辑添加，扫码识别编码成功，后续对应逻辑没有完成
This commit is contained in:
@ -4,7 +4,7 @@
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --host",
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
@ -12,6 +12,7 @@
|
||||
"@element-plus/icons-vue": "^2.3.2",
|
||||
"axios": "^1.13.3",
|
||||
"element-plus": "^2.13.1",
|
||||
"html5-qrcode": "^2.3.8",
|
||||
"pinia": "^3.0.4",
|
||||
"sass": "^1.97.3",
|
||||
"vue": "^3.5.24",
|
||||
@ -19,6 +20,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.10.1",
|
||||
"@vitejs/plugin-basic-ssl": "^1.1.0",
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"@vue/tsconfig": "^0.8.1",
|
||||
"typescript": "~5.9.3",
|
||||
@ -28,4 +30,4 @@
|
||||
"overrides": {
|
||||
"vite": "npm:rolldown-vite@7.2.5"
|
||||
}
|
||||
}
|
||||
}
|
||||
19
inventory-web/src/api/common/upload.ts
Normal file
19
inventory-web/src/api/common/upload.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
/**
|
||||
* 上传文件通用接口
|
||||
* @param file File 对象
|
||||
*/
|
||||
export function uploadFile(file: File) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
|
||||
return request({
|
||||
url: '/api/v1/common/upload',
|
||||
method: 'post',
|
||||
data: formData,
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
}
|
||||
59
inventory-web/src/api/outbound.ts
Normal file
59
inventory-web/src/api/outbound.ts
Normal file
@ -0,0 +1,59 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export interface OutboundSubmitData {
|
||||
sku: string
|
||||
source_table: string
|
||||
stock_id: number
|
||||
barcode: string
|
||||
outbound_type: string
|
||||
quantity: number
|
||||
consumer_name: string
|
||||
signature_path: string // 上传后返回的图片路径
|
||||
remark?: string
|
||||
}
|
||||
|
||||
export interface ScanResult {
|
||||
id: number
|
||||
sku: string
|
||||
name: string
|
||||
spec_model: string
|
||||
source_table: string // 'stock_buy' | 'stock_product' ...
|
||||
stock_quantity: number
|
||||
available_quantity: number
|
||||
batch_number?: string
|
||||
warehouse_location?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据条码获取库存物品详情
|
||||
* @param barcode 扫描到的条码
|
||||
*/
|
||||
export function getStockByBarcode(barcode: string) {
|
||||
return request<any, ScanResult>({
|
||||
url: '/api/v1/outbound/scan',
|
||||
method: 'get',
|
||||
params: { barcode }
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交出库单
|
||||
*/
|
||||
export function submitOutbound(data: OutboundSubmitData) {
|
||||
return request({
|
||||
url: '/api/v1/outbound',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取出库记录列表
|
||||
*/
|
||||
export function getOutboundList(params: any) {
|
||||
return request({
|
||||
url: '/api/v1/outbound',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
135
inventory-web/src/components/Signature/index.vue
Normal file
135
inventory-web/src/components/Signature/index.vue
Normal file
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div class="signature-container">
|
||||
<canvas
|
||||
ref="canvasRef"
|
||||
@mousedown="startDrawing"
|
||||
@mousemove="draw"
|
||||
@mouseup="stopDrawing"
|
||||
@mouseleave="stopDrawing"
|
||||
@touchstart.prevent="startDrawing"
|
||||
@touchmove.prevent="draw"
|
||||
@touchend.prevent="stopDrawing"
|
||||
></canvas>
|
||||
<div class="actions">
|
||||
<el-button size="small" @click="clear">重签</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
const canvasRef = ref<HTMLCanvasElement | null>(null)
|
||||
const isDrawing = ref(false)
|
||||
const ctx = ref<CanvasRenderingContext2D | null>(null)
|
||||
|
||||
// 初始化 Canvas
|
||||
onMounted(() => {
|
||||
if (canvasRef.value) {
|
||||
const canvas = canvasRef.value
|
||||
// 设置画布大小 (可以根据父容器调整)
|
||||
canvas.width = canvas.offsetWidth
|
||||
canvas.height = 300 // 固定高度
|
||||
ctx.value = canvas.getContext('2d')
|
||||
if (ctx.value) {
|
||||
ctx.value.lineWidth = 3
|
||||
ctx.value.lineCap = 'round'
|
||||
ctx.value.strokeStyle = '#000'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 获取坐标 (兼容鼠标和触摸)
|
||||
const getPos = (e: MouseEvent | TouchEvent) => {
|
||||
const canvas = canvasRef.value
|
||||
if (!canvas) return { x: 0, y: 0 }
|
||||
|
||||
const rect = canvas.getBoundingClientRect()
|
||||
let clientX, clientY
|
||||
|
||||
if ('touches' in e) {
|
||||
clientX = e.touches[0].clientX
|
||||
clientY = e.touches[0].clientY
|
||||
} else {
|
||||
clientX = (e as MouseEvent).clientX
|
||||
clientY = (e as MouseEvent).clientY
|
||||
}
|
||||
|
||||
return {
|
||||
x: clientX - rect.left,
|
||||
y: clientY - rect.top
|
||||
}
|
||||
}
|
||||
|
||||
const startDrawing = (e: MouseEvent | TouchEvent) => {
|
||||
isDrawing.value = true
|
||||
const { x, y } = getPos(e)
|
||||
ctx.value?.beginPath()
|
||||
ctx.value?.moveTo(x, y)
|
||||
}
|
||||
|
||||
const draw = (e: MouseEvent | TouchEvent) => {
|
||||
if (!isDrawing.value) return
|
||||
const { x, y } = getPos(e)
|
||||
ctx.value?.lineTo(x, y)
|
||||
ctx.value?.stroke()
|
||||
}
|
||||
|
||||
const stopDrawing = () => {
|
||||
isDrawing.value = false
|
||||
}
|
||||
|
||||
const clear = () => {
|
||||
if (canvasRef.value && ctx.value) {
|
||||
ctx.value.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出签名为 File 对象
|
||||
*/
|
||||
const generateFile = (): Promise<File | null> => {
|
||||
return new Promise((resolve) => {
|
||||
if (!canvasRef.value) {
|
||||
resolve(null)
|
||||
return
|
||||
}
|
||||
canvasRef.value.toBlob((blob) => {
|
||||
if (blob) {
|
||||
const file = new File([blob], `sign_${Date.now()}.png`, { type: 'image/png' })
|
||||
resolve(file)
|
||||
} else {
|
||||
resolve(null)
|
||||
}
|
||||
}, 'image/png')
|
||||
})
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
clear,
|
||||
generateFile
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.signature-container {
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
background: #f5f7fa;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
width: 100%; /* 响应式宽度 */
|
||||
height: 300px;
|
||||
cursor: crosshair;
|
||||
background: #fff;
|
||||
}
|
||||
.actions {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -42,11 +42,11 @@ const routes: Array<RouteRecordRaw> = [
|
||||
]
|
||||
},
|
||||
|
||||
// 4. 库存管理
|
||||
// 4. 库存管理 (入库)
|
||||
{
|
||||
path: '/inventory',
|
||||
component: Layout,
|
||||
meta: { title: '库存管理', icon: 'Shop' },
|
||||
meta: { title: '入库管理', icon: 'Shop' }, // 修改标题以区分出库
|
||||
redirect: '/inventory/buy',
|
||||
children: [
|
||||
{
|
||||
@ -76,11 +76,33 @@ const routes: Array<RouteRecordRaw> = [
|
||||
]
|
||||
},
|
||||
|
||||
// 5. 业务操作
|
||||
// 5. ★ [新增] 出库管理
|
||||
{
|
||||
path: '/outbound', // 注意：这里使用了和你提供的文件路径一致的顶级路径
|
||||
component: Layout,
|
||||
meta: { title: '出库管理', icon: 'Van' }, // 推荐使用 Van 图标
|
||||
redirect: '/outbound/index',
|
||||
children: [
|
||||
{
|
||||
path: 'create',
|
||||
name: 'OutboundCreate',
|
||||
component: () => import('@/views/outbound/create.vue'),
|
||||
meta: { title: '扫码出库' }
|
||||
},
|
||||
{
|
||||
path: 'index',
|
||||
name: 'OutboundList',
|
||||
component: () => import('@/views/outbound/index.vue'),
|
||||
meta: { title: '出库记录' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// 6. 业务操作
|
||||
{
|
||||
path: '/operation',
|
||||
component: Layout,
|
||||
meta: { title: '业务操作', icon: 'Operation' },
|
||||
meta: { title: '其他业务', icon: 'Operation' },
|
||||
redirect: '/operation/borrow',
|
||||
children: [
|
||||
{
|
||||
@ -104,7 +126,7 @@ const routes: Array<RouteRecordRaw> = [
|
||||
]
|
||||
},
|
||||
|
||||
// 6. 系统管理
|
||||
// 7. 系统管理
|
||||
{
|
||||
path: '/system',
|
||||
component: Layout,
|
||||
@ -137,45 +159,35 @@ const router = createRouter({
|
||||
})
|
||||
|
||||
// ==========================================
|
||||
// [关键修改] 全局路由守卫
|
||||
// 全局路由守卫
|
||||
// ==========================================
|
||||
router.beforeEach((to, from, next) => {
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 1. 实时获取 Token (优先取 store，防止 store 未初始化取 localStorage)
|
||||
const token = userStore.token || localStorage.getItem('token')
|
||||
const userRole = userStore.role || localStorage.getItem('role') || 'user'
|
||||
|
||||
// 2. 如果要去的是登录页
|
||||
if (to.path === '/login') {
|
||||
// 如果有 Token，说明已登录，踢回首页 (防止重复登录)
|
||||
if (token) {
|
||||
next('/')
|
||||
} else {
|
||||
// 没有 Token，允许访问登录页
|
||||
next()
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// 3. 如果去的不是登录页，但没有 Token
|
||||
if (!token) {
|
||||
// 强制重定向到登录页
|
||||
// 使用 replace 防止用户点击浏览器“返回”按钮时进入死循环
|
||||
next({ path: '/login', replace: true })
|
||||
return
|
||||
}
|
||||
|
||||
// 4. 权限判断 (已有 Token)
|
||||
if (to.meta.roles && Array.isArray(to.meta.roles)) {
|
||||
if (to.meta.roles.includes(userRole)) {
|
||||
next()
|
||||
} else {
|
||||
// 权限不足，跳回首页
|
||||
next('/dashboard')
|
||||
}
|
||||
} else {
|
||||
// 无特殊权限要求，放行
|
||||
next()
|
||||
}
|
||||
})
|
||||
|
||||
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>
|
||||
@ -1,9 +1,13 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import basicSsl from '@vitejs/plugin-basic-ssl' // ★ [新增] 引入 SSL 插件
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
plugins: [
|
||||
vue(),
|
||||
basicSsl() // ★ [新增] 启用 HTTPS 证书生成
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
@ -13,19 +17,13 @@ export default defineConfig({
|
||||
// 允许局域网访问前端页面
|
||||
host: '0.0.0.0',
|
||||
port: 5173,
|
||||
https: true, // ★ [新增] 强制开启 HTTPS，否则浏览器会拦截摄像头
|
||||
proxy: {
|
||||
// 拦截所有以 /api 开头的请求
|
||||
'/api': {
|
||||
// 【关键修改】
|
||||
// 你的截图显示后端容器名叫 inventory_api
|
||||
// 在 Docker 内部，直接用这个名字作为域名，就能找到它
|
||||
target: 'http://inventory_api:8000',
|
||||
|
||||
changeOrigin: true,
|
||||
|
||||
// 【保持注释】
|
||||
// 通常 Flask 后端都会把路由写全 (如 /api/v1/auth/login)
|
||||
// 所以这里不需要 rewrite 去掉 /api，直接原样转发过去最稳妥
|
||||
// rewrite: (path) => path.replace(/^\/api/, '')
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user