refactor: enforce absolute UI parity for scrap page with immersive scan layout

inventory-web/src/router/index.ts

@@ -148,7 +148,7 @@ const routes: Array<RouteRecordRaw> = [
         ]
     },
 
-    // 6. 业务操作
+    // 6. 借库管理
     {
         path: '/operation',
         component: Layout,
@@ -172,18 +172,27 @@ const routes: Array<RouteRecordRaw> = [
                 name: 'OpRecords',
                 component: () => import('@/views/transaction/records.vue'),
                 meta: { title: '借还记录' }
+            }
+        ]
     },
-            // ★ [新增] 报废管理
+
+    // 6.1 报废管理 (独立一级菜单)
     {
-                path: 'scrap/index',
+        path: '/scrap',
+        component: Layout,
+        meta: { title: '报废管理', icon: 'Delete' },
+        redirect: '/scrap/index',
+        children: [
+            {
+                path: 'index',
                 name: 'ScrapList',
-                component: () => import('@/views/operation/scrap/index.vue'), // ✅ 正确路径
+                component: () => import('@/views/operation/scrap/index.vue'),
                 meta: { title: '报废记录' }
             },
             {
-                path: 'scrap/create',
+                path: 'create',
                 name: 'ScrapCreate',
-                component: () => import('@/views/operation/scrap/create.vue'), // ✅ 正确路径
+                component: () => import('@/views/operation/scrap/create.vue'),
                 meta: { title: '新建报废' }
             }
         ]

inventory-web/src/views/operation/scrap/create.vue

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