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-09 16:08:47 +08:00
parent eb771ec4f1
commit 50361dba9a
7 changed files with 503 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
inventory-backend/app/api/v1/common/upload.py
View File

@ -5,21 +5,18 @@ import uuid
from flask import Blueprint, request, jsonify, send_from_directory
# 定义蓝图
# 注意：在 app/__init__.py 或类似入口文件中，注册此蓝图时 url_prefix 通常应为 '/api/v1/common'
upload_bp = Blueprint('upload', __name__)
# =========================================================
# 配置上传路径 (核心修改：确保路径绝对准确)
# 配置上传路径
# =========================================================
# 向上寻找直到找到 inventory-backend 目录，或者默认为当前文件的上级目录的...上级
# 这种方式比数 dirname 层级更稳健
def get_project_root():
"""获取项目根目录 inventory-backend"""
current_path = os.path.abspath(__file__)
# 循环向上查找，直到找到名为 inventory-backend 的目录
# 如果你的根目录名字不是 inventory-backend，请修改这里的判断逻辑
# 或者直接使用相对路径回退 5 层: api/v1/common -> app -> inventory-backend
# 向上回退直到找到根目录，根据你的目录结构可能需要调整层级
# 假设结构: inventory-backend/app/api/v1/common/upload.py (回退5层)
base = os.path.dirname(os.path.dirname(os.path.dirname(os.path.dirname(os.path.dirname(current_path)))))
return base
@ -28,7 +25,7 @@ BASE_DIR = get_project_root()
UPLOAD_FOLDER = os.path.join(BASE_DIR, 'uploads')
# 允许上传的文件后缀
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'}
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp', 'pdf', 'doc', 'docx', 'xls', 'xlsx'}
def allowed_file(filename):
@ -47,7 +44,7 @@ def ensure_upload_folder_exists():
# ------------------------------------------------------------------
# 1. 文件上传接口
# URL: /api/v1/common/upload (POST)
# 完整 URL: /api/v1/common/upload (POST)
# ------------------------------------------------------------------
@upload_bp.route('/upload', methods=['POST'])
def upload_file():
@ -63,6 +60,7 @@ def upload_file():
if file and allowed_file(file.filename):
try:
# 获取后缀并生成唯一文件名
ext = file.filename.rsplit('.', 1)[1].lower()
new_filename = f"{uuid.uuid4().hex}.{ext}"
@ -71,8 +69,9 @@ def upload_file():
print(f"💾 [Upload] 文件已保存: {save_path}")
# 生成访问 URL
# 这里的路径必须与 __init__.py 中注册的 url_prefix + 路由匹配
# 生成访问 URL (返回给前端的相对路径)
# 前端展示时通常拼接 baseURL，或者直接使用此路径访问
# 这里的 /api/v1/common 需与蓝图注册路径一致
file_url = f"/api/v1/common/files/{new_filename}"
return jsonify({
@ -92,13 +91,13 @@ def upload_file():
# ------------------------------------------------------------------
# 2. 静态文件访问接口 (回显)
# URL: /api/v1/common/files/<filename>
# 完整 URL: /api/v1/common/files/<filename> (GET)
# ------------------------------------------------------------------
@upload_bp.route('/files/<filename>')
@upload_bp.route('/files/<filename>', methods=['GET'])
def uploaded_file(filename):
# 打印日志帮助调试 404 问题
full_path = os.path.join(UPLOAD_FOLDER, filename)
if not os.path.exists(full_path):
# 尝试调试路径问题
print(f"❌ [File Access] 文件未找到: {full_path}")
return jsonify({"code": 404, "msg": "文件不存在"}), 404
@ -107,12 +106,12 @@ def uploaded_file(filename):
# ------------------------------------------------------------------
# 3. 文件删除接口 (同步删除物理文件)
# URL: /api/v1/common/files/<filename> (DELETE)
# 完整 URL: /api/v1/common/files/<filename> (DELETE)
# ------------------------------------------------------------------
@upload_bp.route('/files/<filename>', methods=['DELETE'])
def delete_file(filename):
try:
# 安全处理文件名
# 安全处理文件名 (防止路径遍历)
safe_filename = os.path.basename(filename)
file_path = os.path.join(UPLOAD_FOLDER, safe_filename)
@ -124,7 +123,7 @@ def delete_file(filename):
return jsonify({"code": 200, "msg": "文件已删除"})
else:
print(f"⚠️ [Delete] 文件不存在，无需删除")
# 即使文件不存在也返回成功，保证前端流程继续
# 即使文件不存在也返回成功，保证前端逻辑闭环
return jsonify({"code": 200, "msg": "文件不存在或已删除"})
except Exception as e:

28
inventory-backend/app/models/base.py
View File

@ -1,5 +1,6 @@
# app/models/base.py
from app.extensions import db
import json
class MaterialBase(db.Model):
"""
@ -11,7 +12,7 @@ class MaterialBase(db.Model):
# 1. 基础字段
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(255), nullable=False, comment='名称')
common_name = db.Column(db.String(255), comment='俗名') # ✅ 新增字段
common_name = db.Column(db.String(255), comment='俗名')
category = db.Column(db.String(100), comment='类别')
material_type = db.Column(db.String(100), comment='类型')
spec_model = db.Column(db.String(255), comment='规格型号')
@ -20,7 +21,7 @@ class MaterialBase(db.Model):
# 可见等级
visibility_level = db.Column(db.Integer, default=0, comment='信息可见等级')
# 链接与图片
# 链接与图片 (现在存储 JSON 字符串)
manual_link = db.Column(db.Text, comment='通用说明书')
product_image = db.Column(db.Text, comment='通用产品图')
@ -44,16 +45,29 @@ class MaterialBase(db.Model):
"""
序列化方法
"""
# 辅助解析函数：将数据库存储的 JSON 字符串转为 List
def parse_list(json_str):
if not json_str:
return []
try:
# 兼容旧数据：如果不是 JSON 格式（比如是单个 URL），则包装成 list
if not json_str.startswith('['):
return [json_str]
return json.loads(json_str)
except:
return []
return {
'id': self.id,
'name': self.name,
'commonName': self.common_name, # ✅ 序列化新增字段
'commonName': self.common_name,
'category': self.category,
'type': self.material_type, # 前端字段映射
'spec': self.spec_model, # 前端字段映射
'type': self.material_type,
'spec': self.spec_model,
'unit': self.unit,
'visibilityLevel': self.visibility_level,
'generalManual': self.manual_link,
'generalImage': self.product_image,
# 修改：解析为列表返回
'generalManual': parse_list(self.manual_link),
'generalImage': parse_list(self.product_image),
'isEnabled': 1 if self.is_enabled else 0,
}

32
inventory-backend/app/services/inbound/base_service.py
View File

@ -6,6 +6,7 @@ from app.models.inbound.buy import StockBuy
from app.models.inbound.semi import StockSemi
from sqlalchemy import or_
import traceback
import json
class MaterialBaseService:
@ -24,7 +25,6 @@ class MaterialBaseService:
if not keyword:
return []
# ✅ 搜索范围增加 common_name (俗名)
query = MaterialBase.query.filter(
MaterialBase.is_enabled == True,
or_(
@ -39,7 +39,7 @@ class MaterialBaseService:
results.append({
'id': item.id,
'name': item.name,
'commonName': item.common_name, # ✅ 返回俗名
'commonName': item.common_name,
'spec': item.spec_model,
'category': item.category,
'unit': item.unit,
@ -63,7 +63,6 @@ class MaterialBaseService:
# 1. 关键词模糊搜索 (名称 或 俗名 或 规格型号)
if filters.get('keyword'):
kw = f"%{filters['keyword']}%"
# ✅ 增加俗名搜索
query = query.filter(or_(
MaterialBase.name.ilike(kw),
MaterialBase.common_name.ilike(kw),
@ -100,8 +99,7 @@ class MaterialBaseService:
if not data.get('name') or not data.get('spec'):
raise ValueError("名称和规格型号不能为空")
# 1. 查重 (名称+规格型号 唯一)
# 注意：俗名不参与唯一性校验，允许重复或为空
# 1. 查重
exist = MaterialBase.query.filter_by(
name=data['name'],
spec_model=data['spec']
@ -109,17 +107,18 @@ class MaterialBaseService:
if exist:
raise ValueError(f"已存在相同名称和规格的数据 (ID: {exist.id})")
# 2. 创建对象
# 2. 创建对象 (列表转JSON字符串)
new_material = MaterialBase(
name=data['name'],
common_name=data.get('commonName'), # ✅ 读取俗名
common_name=data.get('commonName'),
spec_model=data['spec'],
category=data.get('category'),
material_type=data.get('type'),
unit=data.get('unit'),
visibility_level=data.get('visibilityLevel'),
manual_link=data.get('generalManual'),
product_image=data.get('generalImage'),
# 修改：将列表 dumps 为字符串
manual_link=json.dumps(data.get('generalManual', [])),
product_image=json.dumps(data.get('generalImage', [])),
is_enabled=True if data.get('isEnabled', 1) == 1 else False
)
@ -141,14 +140,18 @@ class MaterialBaseService:
# 更新字段
if 'name' in data: material.name = data['name']
if 'commonName' in data: material.common_name = data['commonName'] # ✅ 更新俗名
if 'commonName' in data: material.common_name = data['commonName']
if 'spec' in data: material.spec_model = data['spec']
if 'category' in data: material.category = data['category']
if 'type' in data: material.material_type = data['type']
if 'unit' in data: material.unit = data['unit']
if 'visibilityLevel' in data: material.visibility_level = data['visibilityLevel']
if 'generalManual' in data: material.manual_link = data['generalManual']
if 'generalImage' in data: material.product_image = data['generalImage']
# 修改：将列表 dumps 为字符串
if 'generalManual' in data:
material.manual_link = json.dumps(data['generalManual'])
if 'generalImage' in data:
material.product_image = json.dumps(data['generalImage'])
if 'isEnabled' in data:
material.is_enabled = bool(int(data['isEnabled']))
@ -170,12 +173,8 @@ class MaterialBaseService:
if not material:
raise ValueError("数据不存在")
# 1. 依赖检查：采购入库引用
buy_usage_count = StockBuy.query.filter_by(base_id=m_id).count()
# 2. 依赖检查：半成品入库引用
semi_usage_count = StockSemi.query.filter_by(base_id=m_id).count()
total_usage = buy_usage_count + semi_usage_count
if total_usage > 0:
@ -186,7 +185,6 @@ class MaterialBaseService:
f"请先清理相关库存或仅‘禁用’此条目。"
)
# 3. 执行删除
db.session.delete(material)
db.session.commit()
return True

31
inventory-web/src/api/common/upload.ts
View File

@ -2,14 +2,23 @@ import request from '@/utils/request'
/**
* 上传文件通用接口
* @param file File 对象
* @param data File 对象 或 FormData 对象
* 适配说明：list.vue 中 customUpload 已经封装了 FormData，所以这里支持直接传 FormData
*/
export function uploadFile(file: File) {
const formData = new FormData()
formData.append('file', file)
export function uploadFile(data: File | FormData) {
let formData: FormData
if (data instanceof FormData) {
formData = data
} else {
// 如果传入的是原始 File 对象，则手动封装
formData = new FormData()
// @ts-ignore
formData.append('file', data)
}
return request({
// ★★★ [修改] 去掉开头的 /api，适配 request.ts 的 baseURL
// 注意：这里 /v1/common/upload 需要与后端 BluePrint 注册的 url_prefix 对应
url: '/v1/common/upload',
method: 'post',
data: formData,
@ -18,3 +27,15 @@ export function uploadFile(file: File) {
}
})
}
/**
* 删除文件通用接口 (新增)
* @param filename 文件名 (例如: a1b2c3d4.jpg)
*/
export function deleteFile(filename: string) {
return request({
// 对应后端路由: @upload_bp.route('/files/<filename>', methods=['DELETE'])
url: `/v1/common/files/${filename}`,
method: 'delete'
})
}

276
inventory-web/src/views/material/list.vue
View File

@ -124,12 +124,43 @@
<el-table-column v-if="columns.visibilityLevel.visible" prop="visibilityLevel" label="可见等级" min-width="100" align="center">
<template #default="scope">L{{ scope.row.visibilityLevel }}</template>
</el-table-column>
<el-table-column v-if="columns.files.visible" label="资料" min-width="100" align="center">
<template #default="scope">
<el-button v-if="scope.row.generalImage" link type="primary" :icon="Picture" title="查看图片" @click="openLink(scope.row.generalImage)" />
<el-button v-if="scope.row.generalManual" link type="primary" :icon="Document" title="查看说明书" @click="openLink(scope.row.generalManual)" />
<el-table-column v-if="columns.files.visible" label="资料" min-width="140" align="center">
<template #default="{ row }">
<div style="display: flex; gap: 8px; justify-content: center;">
<div v-if="getImagesOnly(row.generalImage).length > 0" class="file-preview-cell">
<el-image
style="width: 32px; height: 32px; border-radius: 4px;"
:src="getImageUrl(getImagesOnly(row.generalImage)[0])"
:preview-src-list="getImagesOnly(row.generalImage).map(u => getImageUrl(u))"
preview-teleported
fit="cover"
/>
<span v-if="getImagesOnly(row.generalImage).length > 1" class="more-badge">+{{getImagesOnly(row.generalImage).length}}</span>
</div>
<el-popover v-if="row.generalManual && row.generalManual.length > 0" placement="top" trigger="hover" width="200">
<template #reference>
<el-button link type="primary" :icon="Document" />
</template>
<div style="display: flex; flex-direction: column; gap: 5px;">
<div v-for="(link, idx) in row.generalManual" :key="idx">
<el-link v-if="isExternalLink(link)" :href="link" target="_blank" type="primary" :underline="false">
说明书 {{idx+1}} <el-icon><Link /></el-icon>
</el-link>
<el-image v-else
style="width: 100px; height: 100px"
:src="getImageUrl(link)"
:preview-src-list="[getImageUrl(link)]"
fit="cover"
/>
</div>
</div>
</el-popover>
</div>
</template>
</el-table-column>
<el-table-column v-if="columns.isEnabled.visible" prop="isEnabled" label="是否启用" min-width="100" align="center">
<template #default="scope">
<el-switch
@ -165,7 +196,7 @@
<el-dialog
v-model="dialog.visible"
:title="dialog.title"
width="600px"
width="700px"
append-to-body
@close="cancel"
>
@ -227,12 +258,60 @@
<span style="margin-left: 10px; color: #999; font-size: 12px;">(0为最低，9为最高)</span>
</el-form-item>
<el-form-item label="说明书链接" prop="generalManual">
<el-input v-model="form.generalManual" placeholder="请输入说明书URL链接" />
<el-form-item label="产品图" prop="generalImage">
<div class="upload-container">
<el-upload
v-model:file-list="fileListImage"
action="#"
list-type="picture-card"
multiple
:http-request="(opts) => customUpload(opts, 'generalImage')"
:on-preview="handlePreviewPicture"
:on-remove="(file) => handleRemoveImage(file, 'generalImage')"
:before-upload="beforeAvatarUpload"
>
<el-icon><Plus /></el-icon>
</el-upload>
<div class="camera-card" @click="triggerCamera('generalImage')">
<el-icon><Camera /></el-icon><span class="text">拍照</span>
</div>
</div>
<el-input
v-model="imageExternalUrl"
placeholder="如有外部图片链接，请在此输入"
style="margin-top: 8px;"
clearable
>
<template #prefix><el-icon><Link /></el-icon></template>
</el-input>
</el-form-item>
<el-form-item label="产品图链接" prop="generalImage">
<el-input v-model="form.generalImage" placeholder="请输入图片URL链接" />
<el-form-item label="说明书" prop="generalManual">
<div class="upload-container">
<el-upload
v-model:file-list="fileListManual"
action="#"
list-type="picture-card"
multiple
:http-request="(opts) => customUpload(opts, 'generalManual')"
:on-preview="handlePreviewPicture"
:on-remove="(file) => handleRemoveImage(file, 'generalManual')"
:before-upload="beforeAvatarUpload"
>
<el-icon><Plus /></el-icon>
</el-upload>
<div class="camera-card" @click="triggerCamera('generalManual')">
<el-icon><Camera /></el-icon><span class="text">拍照</span>
</div>
</div>
<el-input
v-model="manualExternalUrl"
placeholder="如有外部说明书链接，请在此输入"
style="margin-top: 8px;"
clearable
>
<template #prefix><el-icon><Link /></el-icon></template>
</el-input>
</el-form-item>
<el-form-item label="状态" prop="isEnabled">
@ -251,13 +330,19 @@
</template>
</el-dialog>
<el-dialog v-model="dialogVisibleImage" append-to-body width="50%">
<img style="width: 100%" :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
<input type="file" ref="cameraInputRef" accept="image/*" capture="environment" style="display: none" @change="handleCameraFile"/>
</el-card>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue';
import { Plus, Picture, Document, Refresh, Setting, Rank } from '@element-plus/icons-vue';
import { Plus, Picture, Document, Refresh, Setting, Rank, Camera, Link } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
@ -267,19 +352,20 @@ import {
updateMaterialBase,
delMaterialBase
} from '@/api/material_base';
import { uploadFile, deleteFile } from '@/api/common/upload'; // 假设通用上传接口在此
// --- 类型定义 ---
interface MaterialBaseVO {
id: number;
name: string;
commonName?: string; // ✅ 新增类型定义
commonName?: string;
category: string;
type: string;
spec: string;
unit: string;
visibilityLevel: number;
generalManual?: string;
generalImage?: string;
generalManual: string[]; // 修改为数组
generalImage: string[]; // 修改为数组
isEnabled: number;
statusLoading?: boolean;
}
@ -300,10 +386,21 @@ const tableData = ref<MaterialBaseVO[]>([]);
const submitLoading = ref(false);
const tableSize = ref<'large' | 'default' | 'small'>('large');
// 文件上传相关
const fileListImage = ref<any[]>([]);
const fileListManual = ref<any[]>([]);
const imageExternalUrl = ref('');
const manualExternalUrl = ref('');
const dialogVisibleImage = ref(false);
const dialogImageUrl = ref('');
const cameraInputRef = ref<HTMLInputElement | null>(null);
const currentCameraField = ref<'generalImage' | 'generalManual'>('generalImage');
const columns = reactive({
id: { visible: true },
name: { visible: true },
commonName: { visible: true }, // ✅ 新增列控制
commonName: { visible: true },
category: { visible: true },
type: { visible: true },
spec: { visible: true },
@ -336,14 +433,14 @@ const formRef = ref<FormInstance>();
const initForm = {
id: undefined,
name: '',
commonName: '', // ✅ 初始化新增字段
commonName: '',
category: '',
type: '',
spec: '',
unit: '',
visibilityLevel: 0,
generalManual: '',
generalImage: '',
generalManual: [] as string[], // 初始化为数组
generalImage: [] as string[], // 初始化为数组
isEnabled: 1
};
@ -445,8 +542,27 @@ const handleEdit = (row: MaterialBaseVO) => {
resetForm();
dialog.title = '编辑基础信息';
dialog.visible = true;
nextTick(() => {
// 基础字段赋值
Object.assign(form.value, row);
// 初始化文件列表
const images = row.generalImage || [];
const manuals = row.generalManual || [];
// 分离图片文件和外部链接
const imgFiles = images.filter(u => !isExternalLink(u));
const imgLinks = images.filter(u => isExternalLink(u));
const manualFiles = manuals.filter(u => !isExternalLink(u));
const manualLinks = manuals.filter(u => isExternalLink(u));
fileListImage.value = imgFiles.map(url => ({ name: url.split('/').pop(), url: getImageUrl(url) }));
imageExternalUrl.value = imgLinks.length > 0 ? imgLinks[0] : '';
fileListManual.value = manualFiles.map(url => ({ name: url.split('/').pop(), url: getImageUrl(url) }));
manualExternalUrl.value = manualLinks.length > 0 ? manualLinks[0] : '';
});
};
@ -482,9 +598,35 @@ const submitForm = async () => {
return;
}
}
// 整理文件数据
const finalImageList = [...form.value.generalImage];
// 如果输入了外部链接且不在列表中，则加入
if (imageExternalUrl.value && !finalImageList.includes(imageExternalUrl.value)) {
finalImageList.push(imageExternalUrl.value);
}
// 过滤：只保留上传的(已经在customUpload处理) 和 外部链接
const cleanImages = finalImageList.filter(item => !isExternalLink(item)); // 这里的逻辑需要修正，应基于form.value.generalImage已经包含的内容
if (imageExternalUrl.value) cleanImages.push(imageExternalUrl.value);
const finalManualList = [...form.value.generalManual];
if (manualExternalUrl.value && !finalManualList.includes(manualExternalUrl.value)) {
finalManualList.push(manualExternalUrl.value);
}
const cleanManuals = finalManualList.filter(item => !isExternalLink(item));
if (manualExternalUrl.value) cleanManuals.push(manualExternalUrl.value);
const payload = {
...form.value,
generalImage: cleanImages,
generalManual: cleanManuals
};
const requestApi = form.value.id ? updateMaterialBase : addMaterialBase;
const actionText = form.value.id ? '修改' : '新增';
await requestApi(form.value);
await requestApi(payload);
ElMessage.success(`${actionText}成功`);
dialog.visible = false;
getList();
@ -504,6 +646,10 @@ const cancel = () => {
const resetForm = () => {
form.value = {...initForm};
fileListImage.value = [];
fileListManual.value = [];
imageExternalUrl.value = '';
manualExternalUrl.value = '';
if (formRef.value) formRef.value.resetFields();
};
@ -536,6 +682,87 @@ const openLink = (url: string) => {
window.open(url, '_blank');
}
// --- 文件上传辅助函数 ---
const getImageUrl = (url: string) => { return !url ? '' : (url.startsWith('http') ? url : url) }
const isExternalLink = (str: string) => { return str && (str.startsWith('http://') || str.startsWith('https://')) && !str.includes('/api/v1/common/files') }
const getImagesOnly = (list: string[]) => { return !list ? [] : list.filter(item => !isExternalLink(item)) }
const beforeAvatarUpload = (rawFile: any) => {
if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'application/pdf') {
// 允许PDF用于说明书
if (rawFile.type === 'application/pdf') return true;
ElMessage.error('支持 JPG/PNG/PDF');
return false
}
if (rawFile.size / 1024 / 1024 > 10) { ElMessage.error('文件不能超过 10MB'); return false }
return true
}
const customUpload = async (options: any, targetField: 'generalImage' | 'generalManual') => {
const { file, onSuccess, onError } = options
const formData = new FormData()
formData.append('file', file)
try {
const res: any = await uploadFile(formData)
if (res.code === 200) {
const newUrl = res.data.url
form.value[targetField].push(newUrl)
ElMessage.success('上传成功')
onSuccess(res)
} else {
ElMessage.error(res.msg || '上传失败');
onError(new Error(res.msg))
}
} catch (e) {
ElMessage.error('网络错误');
onError(e)
}
}
const handleRemoveImage = async (uploadFile: any, targetField: 'generalImage' | 'generalManual') => {
try {
const urlToRemove = form.value[targetField].find(u => getImageUrl(u) === uploadFile.url) || uploadFile.url
form.value[targetField] = form.value[targetField].filter(u => u !== urlToRemove)
if (!isExternalLink(urlToRemove)) {
const filename = urlToRemove.split('/').pop();
if (filename) await deleteFile(filename)
}
ElMessage.success('已删除')
} catch (e) { console.error(e) }
}
const handlePreviewPicture = (uploadFile: any) => {
dialogImageUrl.value = uploadFile.url!;
dialogVisibleImage.value = true
}
const triggerCamera = (field: 'generalImage' | 'generalManual') => {
currentCameraField.value = field;
if (cameraInputRef.value) cameraInputRef.value.click()
}
const handleCameraFile = async (event: Event) => {
const input = event.target as HTMLInputElement
if (input.files && input.files[0]) {
const file = input.files[0]
if (!beforeAvatarUpload(file)) { input.value = ''; return }
const formData = new FormData(); formData.append('file', file)
const loadingMsg = ElMessage.loading({ message: '照片上传中...', duration: 0 })
try {
const res: any = await uploadFile(formData)
if (res.code === 200) {
const newUrl = res.data.url;
const field = currentCameraField.value
form.value[field].push(newUrl)
if (field === 'generalImage') fileListImage.value.push({ name: newUrl.split('/').pop(), url: getImageUrl(newUrl) })
else fileListManual.value.push({ name: newUrl.split('/').pop(), url: getImageUrl(newUrl) })
ElMessage.success('拍照上传成功')
} else { ElMessage.error(res.msg || '上传失败') }
} catch (e) { ElMessage.error('网络错误，上传失败') } finally { loadingMsg.close(); input.value = '' }
}
}
onMounted(() => {
getList();
});
@ -566,4 +793,17 @@ onMounted(() => {
display: flex;
flex-direction: column;
}
/* 上传相关样式 */
.upload-container { display: flex; flex-wrap: wrap; gap: 8px; }
:deep(.el-upload--picture-card) { width: 100px; height: 100px; line-height: 100px; }
:deep(.el-upload-list--picture-card .el-upload-list__item) { width: 100px; height: 100px; }
.camera-card { width: 100px; height: 100px; background-color: #fbfdff; border: 1px dashed #c0ccda; border-radius: 6px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s; color: #8c939d; }
.camera-card:hover { border-color: #409EFF; color: #409EFF; }
.camera-card .text { font-size: 12px; margin-top: 5px; }
.camera-card .el-icon { font-size: 24px; }
/* 表格缩略图样式 */
.file-preview-cell { display: flex; align-items: center; justify-content: center; position: relative; }
.more-badge { position: absolute; top: -5px; right: -5px; background: #909399; color: #fff; border-radius: 10px; padding: 0 4px; font-size: 10px; transform: scale(0.9); }
</style>

106
inventory-web/src/views/transaction/borrow.vue
View File

@ -13,18 +13,9 @@
</template>
<div class="scan-section">
<div v-if="showCamera" class="camera-wrapper">
<QrScanner @decode="onScanSuccess" />
<div class="scan-overlay">
<el-button type="info" size="small" bg text @click="showCamera = false" icon="Close">
关闭摄像头
</el-button>
</div>
</div>
<div v-else class="camera-placeholder" @click="showCamera = true">
<div class="camera-placeholder" @click="showCamera = true">
<el-icon :size="40" color="#409EFF"><CameraFilled /></el-icon>
<span class="text">点击开启扫码</span>
<span class="text">点击开启全屏扫码</span>
</div>
<div class="input-box">
@ -133,6 +124,23 @@
</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>
<el-dialog
v-model="showSignatureDialog"
fullscreen
@ -205,7 +213,6 @@ const form = reactive({
remark: ''
})
// ★ 修改点：增强校验规则
const rules = {
borrower_name: [
{ required: true, message: '请输入借用人姓名', trigger: 'blur' }
@ -215,9 +222,8 @@ const rules = {
]
}
// ★ 新增：禁止选择今天之前的日期
const disabledDate = (time: Date) => {
return time.getTime() < Date.now() - 8.64e7 // 禁止选择昨天及之前
return time.getTime() < Date.now() - 8.64e7
}
// --- 核心扫码逻辑 ---
@ -292,9 +298,12 @@ const handleManualInput = async () => {
}
} finally {
loading.value = false
// ★ 核心修改：只有当非全屏模式时，才自动聚焦输入框
if (!showCamera.value) {
nextTick(() => { barcodeRef.value?.focus() })
}
}
}
const removeFromCart = (index: number) => {
cartItems.value.splice(index, 1)
@ -318,7 +327,6 @@ const submitForm = async () => {
if (!formRef.value) return
if (cartItems.value.length === 0) return ElMessage.warning('请先添加物品')
// ★ 核心修改：等待校验通过后再提交，否则报错会被拦截在前端
await formRef.value.validate(async (valid: boolean) => {
if (!valid) {
ElMessage.error('请填写完整的必填项（姓名、归还日期）')
@ -342,7 +350,7 @@ const submitForm = async () => {
method: 'post',
data: {
items: cartItems.value,
...form, // 此时 form.expected_return_time 已经是 YYYY-MM-DD 格式
...form,
signature_path: signatureUrl
}
})
@ -449,21 +457,73 @@ onUnmounted(() => {
.card-header { display: flex; justify-content: space-between; align-items: center; }
.title-box { font-size: 16px; font-weight: bold; display: flex; align-items: center; gap: 8px; }
/* 扫码区 */
/* 扫码区（卡片内触发器） */
.scan-section { margin-bottom: 20px; }
.camera-wrapper {
height: 25vh; background: #000; border-radius: 12px; overflow: hidden; position: relative; margin-bottom: 10px;
}
.scan-overlay {
position: absolute; bottom: 10px; right: 10px; z-index: 10;
}
.camera-placeholder {
height: 120px; background: #f5f7fa; border: 1px dashed #dcdfe6; border-radius: 8px;
display: flex; flex-direction: column; justify-content: center; align-items: center;
color: #909399; margin-bottom: 10px; cursor: pointer;
transition: all 0.3s;
}
.camera-placeholder:active { background: #e6e8eb; }
.camera-placeholder .text { margin-top: 5px; font-size: 13px; }
/* ★ 全屏扫码层样式 */
.fullscreen-scanner-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #000;
z-index: 9999;
display: flex;
flex-direction: column;
}
.scanner-header {
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
background: rgba(0,0,0,0.6);
color: #fff;
position: absolute;
top: 0;
width: 100%;
z-index: 10;
}
.scanner-title { font-size: 16px; font-weight: bold; }
.close-btn { background: rgba(255,255,255,0.2); border: none; color: #fff; }
.scanner-body {
flex: 1;
width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* 强制子组件（QrScanner）填满容器 */
:deep(.qr-scanner-container) {
width: 100% !important;
height: 100% !important;
border-radius: 0 !important;
}
.scanner-footer {
position: absolute;
bottom: 0;
width: 100%;
padding: 20px;
background: rgba(0,0,0,0.6);
color: #fff;
text-align: center;
z-index: 10;
}
.current-count { color: #67c23a; font-weight: bold; margin-top: 5px; font-size: 16px; }
/* 表单与购物车 */
.cart-section { margin-bottom: 20px; }
.form-section { background: #fff; }

101
inventory-web/src/views/transaction/return.vue
View File

@ -13,18 +13,9 @@
</template>
<div class="scan-section">
<div v-if="showCamera" class="camera-wrapper">
<QrScanner @decode="onScanSuccess" />
<div class="scan-overlay">
<el-button type="info" size="small" bg text @click="showCamera = false" icon="Close">
关闭摄像头
</el-button>
</div>
</div>
<div v-else class="camera-placeholder" @click="showCamera = true">
<div class="camera-placeholder" @click="showCamera = true">
<el-icon :size="40" color="#409EFF"><CameraFilled /></el-icon>
<span class="text">点击开启扫码</span>
<span class="text">点击开启全屏扫码</span>
</div>
<div class="input-box">
@ -108,6 +99,23 @@
</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="returnList.length > 0" class="current-count">待还: {{ returnList.length }} 项</p>
</div>
</div>
<el-dialog
v-model="showSignatureDialog"
fullscreen
@ -222,9 +230,12 @@ const scanItem = async () => {
ElMessage.error('未找到该物品的未还记录')
} finally {
loading.value = false
// ★ 核心修改：仅在非全屏模式聚焦
if (!showCamera.value) {
nextTick(() => { barcodeRef.value?.focus() })
}
}
}
const clearAll = () => {
ElMessageBox.confirm('确定清空所有待还物品吗?', '提示', { type: 'warning' })
@ -297,7 +308,7 @@ const submitReturn = async () => {
returnList.value = []
signatureFile.value = null
signaturePreviewUrl.value = ''
showCamera.value = false // 关闭摄像头
showCamera.value = false
} catch(e: any) {
ElMessage.error(e.response?.data?.msg || '提交失败')
} finally {
@ -389,21 +400,73 @@ onUnmounted(() => {
.card-header { display: flex; justify-content: space-between; align-items: center; }
.title-box { font-size: 16px; font-weight: bold; display: flex; align-items: center; gap: 8px; }
/* 扫码区 */
/* 扫码区（卡片内触发器） */
.scan-section { margin-bottom: 20px; }
.camera-wrapper {
height: 25vh; background: #000; border-radius: 12px; overflow: hidden; position: relative; margin-bottom: 10px;
}
.scan-overlay {
position: absolute; bottom: 10px; right: 10px; z-index: 10;
}
.camera-placeholder {
height: 120px; background: #f5f7fa; border: 1px dashed #dcdfe6; border-radius: 8px;
display: flex; flex-direction: column; justify-content: center; align-items: center;
color: #909399; margin-bottom: 10px; cursor: pointer;
transition: all 0.3s;
}
.camera-placeholder:active { background: #e6e8eb; }
.camera-placeholder .text { margin-top: 5px; font-size: 13px; }
/* ★ 全屏扫码层样式 */
.fullscreen-scanner-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #000;
z-index: 9999;
display: flex;
flex-direction: column;
}
.scanner-header {
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
background: rgba(0,0,0,0.6);
color: #fff;
position: absolute;
top: 0;
width: 100%;
z-index: 10;
}
.scanner-title { font-size: 16px; font-weight: bold; }
.close-btn { background: rgba(255,255,255,0.2); border: none; color: #fff; }
.scanner-body {
flex: 1;
width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* 强制子组件（QrScanner）填满容器 */
:deep(.qr-scanner-container) {
width: 100% !important;
height: 100% !important;
border-radius: 0 !important;
}
.scanner-footer {
position: absolute;
bottom: 0;
width: 100%;
padding: 20px;
background: rgba(0,0,0,0.6);
color: #fff;
text-align: center;
z-index: 10;
}
.current-count { color: #67c23a; font-weight: bold; margin-top: 5px; font-size: 16px; }
/* 表单与购物车 */
.cart-section { margin-bottom: 20px; }
.form-section { background: #fff; }