针对于上传图片以及借库还库和出库选单进行更改

inventory-backend/app/api/v1/common/upload.py

@@ -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，请修改这里的判断逻辑
+    # 假设结构: inventory-backend/app/api/v1/common/upload.py (回退5层)
-    # 或者直接使用相对路径回退 5 层: api/v1/common -> app -> inventory-backend
     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
+            # 生成访问 URL (返回给前端的相对路径)
-            # 这里的路径必须与 __init__.py 中注册的 url_prefix + 路由匹配
+            # 前端展示时通常拼接 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:

inventory-backend/app/models/base.py

@@ -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,       # 前端字段映射
+            'type': self.material_type,
-            'spec': self.spec_model,          # 前端字段映射
+            '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,
         }

inventory-backend/app/services/inbound/base_service.py

@@ -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'),
+                # 修改：将列表 dumps 为字符串
-                product_image=data.get('generalImage'),
+                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

inventory-web/src/api/common/upload.ts

@@ -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) {
+export function uploadFile(data: File | FormData) {
-    const formData = new FormData()
+    let formData: FormData
-    formData.append('file', file)
+
+    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'
+    })
+}

inventory-web/src/views/material/list.vue

@@ -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-table-column v-if="columns.files.visible" label="资料" min-width="140" align="center">
-            <el-button v-if="scope.row.generalImage" link type="primary" :icon="Picture" title="查看图片" @click="openLink(scope.row.generalImage)" />
+          <template #default="{ row }">
-            <el-button v-if="scope.row.generalManual" link type="primary" :icon="Document" title="查看说明书" @click="openLink(scope.row.generalManual)" />
+            <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-form-item label="产品图" prop="generalImage">
-            <el-input v-model="form.generalManual" placeholder="请输入说明书URL链接" />
+            <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-form-item label="说明书" prop="generalManual">
-            <el-input v-model="form.generalImage" placeholder="请输入图片URL链接" />
+            <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;
+  generalManual: string[]; // 修改为数组
-  generalImage?: 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: '',
+  generalManual: [] as string[], // 初始化为数组
-  generalImage: '',
+  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>

inventory-web/src/views/transaction/borrow.vue

@@ -13,18 +13,9 @@
       </template>
 
       <div class="scan-section">
-        <div v-if="showCamera" class="camera-wrapper">
+        <div class="camera-placeholder" @click="showCamera = true">
-          <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">
           <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,7 +298,10 @@ const handleManualInput = async () => {
     }
   } finally {
     loading.value = false
-    nextTick(() => { barcodeRef.value?.focus() })
+    // ★ 核心修改：只有当非全屏模式时，才自动聚焦输入框
+    if (!showCamera.value) {
+      nextTick(() => { barcodeRef.value?.focus() })
+    }
   }
 }
 
@@ -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; }

inventory-web/src/views/transaction/return.vue

@@ -13,18 +13,9 @@
       </template>
 
       <div class="scan-section">
-        <div v-if="showCamera" class="camera-wrapper">
+        <div class="camera-placeholder" @click="showCamera = true">
-          <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">
           <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,7 +230,10 @@ const scanItem = async () => {
     ElMessage.error('未找到该物品的未还记录')
   } finally {
     loading.value = false
-    nextTick(() => { barcodeRef.value?.focus() })
+    // ★ 核心修改：仅在非全屏模式聚焦
+    if (!showCamera.value) {
+      nextTick(() => { barcodeRef.value?.focus() })
+    }
   }
 }
 
@@ -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; }