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

Co-authored-by: aider (openai/DeepSeek-V3.2-Thinking) <aider@aider.chat>

inventory-backend/app/__init__.py

@@ -106,6 +106,19 @@ def create_app():
     except ImportError as e:
         print(f"❌ 错误: Outbound 模块导入失败: {e}")
 
+    # -----------------------------------------------------
+    # 2.6 注册 BOM 模块
+    # -----------------------------------------------------
+    try:
+        from app.api.v1.bom import bom_bp
+        # 标准: /api/v1/bom
+        app.register_blueprint(bom_bp, url_prefix='/api/v1/bom')
+        # 兼容: /api/bom
+        app.register_blueprint(bom_bp, url_prefix='/api/bom', name='bom_legacy')
+        print("✅ BOM 模块注册成功")
+    except ImportError as e:
+        print(f"❌ 错误: BOM 模块导入失败: {e}")
+
     # =========================================================
     # 3. 预加载数据模型
     # =========================================================

inventory-backend/app/api/v1/__init__.py

@@ -0,0 +1,7 @@
+from flask import Blueprint
+from .inbound import inbound_bp
+from .bom import bom_bp
+
+v1_bp = Blueprint('v1', __name__)
+v1_bp.register_blueprint(inbound_bp, url_prefix='/inbound')
+v1_bp.register_blueprint(bom_bp, url_prefix='/bom')

inventory-backend/app/api/v1/bom.py

@@ -0,0 +1,76 @@
+from flask import Blueprint, request, jsonify, current_app
+from app.services.bom_service import BomService
+from app.models.base import MaterialBase
+from app.models.bom import BomTable
+from app.extensions import db
+from flask_jwt_extended import jwt_required
+from sqlalchemy import distinct
+
+bom_bp = Blueprint('bom', __name__)
+
+@bom_bp.route('/<int:parent_id>', methods=['GET'])
+@jwt_required()
+def get_bom(parent_id):
+    try:
+        data = BomService.get_bom_with_stock(parent_id)
+        return jsonify({
+            'code': 200,
+            'msg': 'success',
+            'data': data
+        })
+    except Exception as e:
+        current_app.logger.error(f'获取BOM失败: {str(e)}')
+        return jsonify({'code': 500, 'msg': '内部服务器错误'}), 500
+
+@bom_bp.route('', methods=['POST'])
+@jwt_required()
+def save_bom():
+    try:
+        req_data = request.get_json()
+        parent_id = req_data.get('parent_id')
+        child_list = req_data.get('children', [])
+        if not parent_id or not isinstance(child_list, list):
+            return jsonify({'code': 400, 'msg': '参数错误'}), 400
+        BomService.create_or_update_bom(parent_id, child_list)
+        return jsonify({
+            'code': 200,
+            'msg': '保存成功'
+        })
+    except ValueError as e:
+        return jsonify({'code': 400, 'msg': str(e)}), 400
+    except Exception as e:
+        current_app.logger.error(f'保存BOM失败: {str(e)}')
+        return jsonify({'code': 500, 'msg': '内部服务器错误'}), 500
+
+@bom_bp.route('/base/list', methods=['GET'])
+@jwt_required()
+def get_material_base_list():
+    """获取所有基础物料列表，用于前端下拉框"""
+    try:
+        materials = MaterialBase.query.filter_by(is_enabled=True).order_by(MaterialBase.id.desc()).all()
+        data = [item.to_dict() for item in materials]
+        return jsonify({
+            'code': 200,
+            'msg': 'success',
+            'data': data
+        })
+    except Exception as e:
+        current_app.logger.error(f'获取基础物料列表失败: {str(e)}')
+        return jsonify({'code': 500, 'msg': '内部服务器错误'}), 500
+
+@bom_bp.route('/parents', methods=['GET'])
+@jwt_required()
+def get_bom_parents():
+    """获取所有已定义BOM的父件物料列表"""
+    try:
+        subq = db.session.query(BomTable.parent_id).distinct().subquery()
+        parents = MaterialBase.query.join(subq, MaterialBase.id == subq.c.parent_id).all()
+        data = [item.to_dict() for item in parents]
+        return jsonify({
+            'code': 200,
+            'msg': 'success',
+            'data': data
+        })
+    except Exception as e:
+        current_app.logger.error(f'获取BOM父件列表失败: {str(e)}')
+        return jsonify({'code': 500, 'msg': '内部服务器错误'}), 500

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，请修改这里的判断逻辑
-    # 或者直接使用相对路径回退 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:

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,       # 前端字段映射
-            '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,
         }

inventory-backend/app/models/bom.py

@@ -0,0 +1,17 @@
+from app.extensions import db
+
+class BomTable(db.Model):
+    __tablename__ = 'bom_table'
+
+    id = db.Column(db.Integer, primary_key=True)
+    parent_id = db.Column(db.Integer, db.ForeignKey('material_base.id'), nullable=False)
+    child_id = db.Column(db.Integer, db.ForeignKey('material_base.id'), nullable=False)
+    bom_no = db.Column(db.String(100), comment='BOM编号')
+    version = db.Column(db.String(50), comment='版本')
+    dosage = db.Column(db.Numeric(19, 4), comment='个数')
+    loss_rate = db.Column(db.Numeric(5, 2), comment='损耗率%(已废弃)', default=0, nullable=True)
+    remark = db.Column(db.Text, comment='备注')
+
+    # relationships
+    parent = db.relationship('MaterialBase', foreign_keys=[parent_id], backref='bom_parents')
+    child = db.relationship('MaterialBase', foreign_keys=[child_id], backref='bom_children')

inventory-backend/app/services/bom_service.py

@@ -0,0 +1,67 @@
+from app.extensions import db
+from app.models.bom import BomTable
+from app.models.base import MaterialBase
+from app.models.inbound.buy import StockBuy
+from sqlalchemy import func
+
+class BomService:
+    @staticmethod
+    def create_or_update_bom(parent_id, child_list):
+        """
+        保存/更新父件的BOM子件关系
+        child_list: [{"child_id": int, "dosage": float, "remark": str}, ...]
+        """
+        # 校验父件不能与子件相同
+        for item in child_list:
+            if item['child_id'] == parent_id:
+                raise ValueError('父件与子件不能是同一物料')
+        # 删除该父件原有的BOM记录
+        BomTable.query.filter_by(parent_id=parent_id).delete()
+        # 插入新的
+        for item in child_list:
+            bom = BomTable(
+                parent_id=parent_id,
+                child_id=item['child_id'],
+                dosage=item.get('dosage', 0),
+                remark=item.get('remark', '')
+            )
+            db.session.add(bom)
+        db.session.commit()
+        return True
+
+    @staticmethod
+    def get_bom_with_stock(parent_id):
+        """
+        查询父件的BOM结构及库存信息
+        """
+        bom_items = db.session.query(
+            BomTable,
+            MaterialBase.name.label('child_name')
+        ).join(
+            MaterialBase, BomTable.child_id == MaterialBase.id
+        ).filter(
+            BomTable.parent_id == parent_id
+        ).all()
+
+        result = []
+        for bom, child_name in bom_items:
+            # 查询该子件在 StockBuy 中的可用库存总量
+            stock_qty = db.session.query(
+                func.coalesce(func.sum(StockBuy.available_quantity), 0)
+            ).filter(
+                StockBuy.base_id == bom.child_id
+            ).scalar() or 0
+
+            # 计算最大可生产数量
+            dosage = float(bom.dosage) if bom.dosage else 0
+            max_producible = int(stock_qty // dosage) if dosage > 0 else 0
+
+            result.append({
+                'child_id': bom.child_id,
+                'child_name': child_name,
+                'dosage': dosage,
+                'current_stock': float(stock_qty),
+                'max_producible': max_producible,
+                'remark': bom.remark or ''
+            })
+        return result

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'),
-                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

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) {
-    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'
+    })
+}

inventory-web/src/api/inbound/stock.ts

@@ -29,3 +29,37 @@ export function printStocktakeReport(data: any) {
         data
     })
 }
+
+// 保存 BOM 结构
+export function saveBom(data: { parent_id: number; children: any[] }) {
+    return request({
+        url: '/v1/bom',
+        method: 'post',
+        data
+    })
+}
+
+// 获取基础物料列表
+export function getMaterialBaseList(params?: any) {
+    return request({
+        url: '/v1/bom/base/list',
+        method: 'get',
+        params
+    })
+}
+
+// 获取 BOM 父件列表
+export function getBomParents() {
+    return request({
+        url: '/v1/bom/parents',
+        method: 'get'
+    })
+}
+
+// 获取指定BOM详情
+export function getBom(parentId: number) {
+    return request({
+        url: `/v1/bom/${parentId}`,
+        method: 'get'
+    })
+}

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

inventory-web/src/views/outbound/Selection.vue

@@ -28,16 +28,28 @@
           </el-col>
 
           <el-col :span="12" style="text-align: right;">
-            <el-button type="primary" plain :icon="Upload" @click="handleImportBom">
-              导入 BOM 表
-            </el-button>
             <el-button type="primary" plain :icon="Plus" @click="handleCreateBom">
               创建 BOM 表
             </el-button>
           </el-col>
         </el-row>
+
+        <el-row :gutter="20" style="margin-top:15px">
+          <el-col :span="24">
+            <el-select v-model="selectedParentId" placeholder="选择 BOM 表" filterable style="width:100%" @change="onBomParentChange">
+              <el-option v-for="item in bomParents" :key="item.id" :label="item.name" :value="item.id" />
+            </el-select>
+          </el-col>
+        </el-row>
       </div>
 
+      <el-table v-if="bomChildren.length > 0" :data="bomChildren" border style="width:100%; margin-bottom:15px">
+        <el-table-column prop="child_name" label="子件名称" />
+        <el-table-column prop="dosage" label="所需个数" />
+        <el-table-column prop="current_stock" label="当前库存" />
+        <el-table-column prop="max_producible" label="最大可生产" />
+      </el-table>
+
       <el-alert
           v-if="selectedItems.length > 0"
           :title="`当前已选中 ${selectedItems.length} 项物品`"
@@ -113,13 +125,63 @@
       </template>
     </el-dialog>
 
+    <!-- BOM 编辑弹窗 -->
+    <el-dialog v-model="bomDialogVisible" title="创建/编辑 BOM" width="800px">
+      <el-form :model="bomForm" label-width="120px">
+        <el-form-item label="父件 (成品)">
+          <el-select v-model="bomForm.parent_id" placeholder="请选择" filterable style="width:100%">
+            <el-option
+              v-for="item in materialBaseOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <div style="font-weight: bold; margin-bottom: 10px;">子件列表</div>
+        <el-table :data="bomForm.children" border style="width:100%; margin-top:10px">
+          <el-table-column label="子件物料" width="300">
+            <template #default="{ row, $index }">
+              <el-select v-model="row.child_id" placeholder="请选择" filterable style="width:100%">
+                <el-option
+                  v-for="item in materialBaseOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="个数" width="150">
+            <template #default="{ row }">
+              <el-input-number v-model="row.dosage" :min="0" :precision="4" style="width:100%" />
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="80">
+            <template #default="{ $index }">
+              <el-button type="danger" size="small" @click="removeChildRow($index)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div style="margin-top:10px">
+          <el-button type="primary" @click="addChildRow">添加子件</el-button>
+        </div>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="bomDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="saveBom">保存 BOM</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { Printer, Search, Upload, Plus } from '@element-plus/icons-vue'
-import { getAllStock, printSelectionList } from '@/api/inbound/stock'
+import { Printer, Search, Plus } from '@element-plus/icons-vue'
+import { getAllStock, printSelectionList, getMaterialBaseList, saveBom as saveBomApi, getBomParents, getBom } from '@/api/inbound/stock'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 // --- 类型定义 ---
@@ -153,6 +215,20 @@ const allStockData = ref<DisplayItem[]>([])
 // 当前选中的行
 const selectedItems = ref<DisplayItem[]>([])
 
+// BOM 相关
+const bomDialogVisible = ref(false)
+const materialBaseOptions = ref<any[]>([])
+
+// BOM 选择功能
+const bomParents = ref<any[]>([])
+const selectedParentId = ref<number|null>(null)
+const bomChildren = ref<any[]>([])
+
+const bomForm = ref({
+  parent_id: null as number | null,
+  children: [] as any[]
+})
+
 // --- 计算属性：前端模糊搜索过滤 ---
 const filteredTableData = computed(() => {
   const keyword = searchKeyword.value.trim().toLowerCase()
@@ -180,19 +256,22 @@ const fetchData = async () => {
       ...item,
       name: item.material_name,
       type: 'material',
-      typeLabel: '采购件'
+      typeLabel: '采购件',
+      base_id: item.base_id
     }))
     const semis = (res.semis || []).map((item: any) => ({
       ...item,
       name: item.material_name || item.product_name, // 半成品字段名不确定，做个兼容
       type: 'semi',
-      typeLabel: '半成品'
+      typeLabel: '半成品',
+      base_id: item.base_id
     }))
     const products = (res.products || []).map((item: any) => ({
       ...item,
       name: item.product_name,
       type: 'product',
-      typeLabel: '成品'
+      typeLabel: '成品',
+      base_id: item.base_id
     }))
 
     // 合并所有数据
@@ -237,15 +316,75 @@ const confirmPrint = async () => {
   }
 }
 
-// 5. BOM 操作占位函数
-const handleImportBom = () => {
-  // TODO: 打开上传文件的 Dialog 或者跳转页面
-  ElMessage.info('点击了导入BOM，请实现具体逻辑')
+// 5. BOM 操作 (只保留创建)
+
+const handleCreateBom = async () => {
+  bomDialogVisible.value = true
+  if (materialBaseOptions.value.length === 0) {
+    try {
+      const res = await getMaterialBaseList({})
+      if (res.code === 200) {
+        materialBaseOptions.value = res.data
+      } else {
+        ElMessage.error('获取物料列表失败')
+      }
+    } catch (err) {
+      ElMessage.error('网络错误，无法获取物料列表')
+    }
+  }
 }
 
-const handleCreateBom = () => {
-  // TODO: 打开新建 BOM 的表单
-  ElMessage.info('点击了创建BOM，请实现具体逻辑')
+const addChildRow = () => {
+  bomForm.value.children.push({
+    child_id: null,
+    dosage: 0,
+    remark: ''
+  })
+}
+
+const removeChildRow = (index: number) => {
+  bomForm.value.children.splice(index, 1)
+}
+
+const saveBom = async () => {
+  if (!bomForm.value.parent_id) {
+    ElMessage.warning('请选择父件')
+    return
+  }
+  if (bomForm.value.children.length === 0) {
+    ElMessage.warning('请至少添加一个子件')
+    return
+  }
+  for (const child of bomForm.value.children) {
+    if (!child.child_id) {
+      ElMessage.warning('请为每个子件选择物料')
+      return
+    }
+  }
+  const payload = {
+    parent_id: bomForm.value.parent_id,
+    children: bomForm.value.children.map(c => ({
+      child_id: c.child_id,
+      dosage: c.dosage,
+      remark: c.remark || ''
+    }))
+  }
+  try {
+    const res = await saveBomApi(payload)
+    if (res.code === 200) {
+      ElMessage.success('BOM保存成功')
+      bomDialogVisible.value = false
+      // 清空表单
+      bomForm.value = {
+        parent_id: null,
+        children: []
+      }
+    } else {
+      ElMessage.error(res.msg || '保存失败')
+    }
+  } catch (err) {
+    ElMessage.error('网络错误')
+  }
 }
 
 // 辅助函数：高亮关键词 (可选)
@@ -265,8 +404,37 @@ const getTypeTag = (type: string) => {
   }
 }
 
-onMounted(() => {
+// 6. BOM 选择功能
+const onBomParentChange = async (val: number) => {
+  selectedParentId.value = val
+  if (val) {
+    try {
+      const res = await getBom(val)
+      if (res.code === 200) {
+        bomChildren.value = res.data
+      } else {
+        ElMessage.error(res.msg || '获取BOM详情失败')
+      }
+    } catch (err) {
+      ElMessage.error('网络错误，无法获取BOM详情')
+    }
+  } else {
+    bomChildren.value = []
+  }
+}
+
+
+onMounted(async () => {
   fetchData()
+  // 加载BOM父件列表
+  try {
+    const res = await getBomParents()
+    if (res.code === 200) {
+      bomParents.value = res.data
+    }
+  } catch (err) {
+    console.error('加载BOM父件列表失败', err)
+  }
 })
 </script>
 

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

@@ -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,8 +298,11 @@ const handleManualInput = async () => {
     }
   } finally {
     loading.value = false
+    // ★ 核心修改：只有当非全屏模式时，才自动聚焦输入框
+    if (!showCamera.value) {
       nextTick(() => { barcodeRef.value?.focus() })
     }
+  }
 }
 
 const removeFromCart = (index: number) => {
@@ -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">
-          <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,8 +230,11 @@ const scanItem = async () => {
     ElMessage.error('未找到该物品的未还记录')
   } finally {
     loading.value = false
+    // ★ 核心修改：仅在非全屏模式聚焦
+    if (!showCamera.value) {
       nextTick(() => { barcodeRef.value?.focus() })
     }
+  }
 }
 
 const clearAll = () => {
@@ -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; }