feat: 完成WMS系统权限体系与业务功能迭代

本提交完成了WMS系统的多维度优化升级：
1. 新增RBAC权限系统，支持角色/菜单/按钮三级权限管控
2. 重构库存盘点、物料管理、区域维护等模块的查询筛选与展示逻辑
3. 优化入库/出库/质检等业务流程，完善数据冗余与业务闭环
4. 移除旧装箱表，将装箱逻辑合并到出库主表
5. 新增前端权限判断工具、导出工具与端到端测试用例
6. 补充完善各类注释与数据库字段说明

bj_power_wms_client/frontend/src/pages/Inbound.vue

@@ -1,289 +1,236 @@
 <script setup>
+defineOptions({ name: 'Inbound' })
 import { onMounted, reactive, ref } from 'vue'
-import { ElMessage } from 'element-plus'
+import { useRoute } from 'vue-router'
 import request from '../utils/request'
-import { getRealName } from '../utils/auth'
+import { fmtTime } from '../utils/format'
+import { exportXlsxFetch } from '../utils/export'
 import PageHelp from '../components/PageHelp.vue'
 import { helpInbound } from '../help'
 
-// 公共字典：物料 / 区域
-const materials = ref([])
-const zones = ref([])
+const route = useRoute()
 
-onMounted(async () => {
-  const [ms, zs] = await Promise.all([request.get('/material/list'), request.get('/zone/picker')])
-  materials.value = Array.isArray(ms) ? ms : ms?.list || []
-  zones.value = Array.isArray(zs) ? zs : zs?.list || []
-})
+// 查询条件
+const filters = reactive({ inboundNo: '', materialCode: '', manageMode: '', keyword: '' })
+const dateRange = ref([]) // [开始日期, 结束日期] YYYY-MM-DD
+const loading = ref(false)
+const list = ref([])
+const total = ref(0)
+const page = reactive({ current: 1, size: 10 })
+const tableRef = ref()
 
-/* ---------- Tab1 结构件入库（批次，支持多批到货追加） ---------- */
-const batchRef = ref()
-const submitting1 = ref(false)
-const lastInboundNo = ref('')
-const form1 = reactive({
-  materialCode: '', batchNo: '', quantity: 1,
-  zoneCode: '', productionDate: '', supplier: '', remark: ''
-})
-const rules1 = {
-  materialCode: [{ required: true, message: '请选择物料', trigger: 'change' }],
-  zoneCode: [{ required: true, message: '请选择入库区域', trigger: 'change' }],
-  quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }]
-}
-
-async function submitBatch() {
-  await batchRef.value.validate()
-  if (!form1.quantity || form1.quantity <= 0) {
-    ElMessage.warning('数量必须大于 0')
-    return
-  }
-  // 管理粒度校验：精密件必须走 SN 入库页。
-  // 否则后端因 snList 为空直接拒绝，历史上会在失败后残留一张无明细无库存的"空单"。
-  const mat1 = materials.value.find(m => m.code === form1.materialCode)
-  if (mat1 && Number(mat1.manageMode) === 2) {
-    ElMessage.warning('该物料为精密件（按 SN 管理），请切换到「精密件 SN 入库」页扫码录入后再提交')
-    return
-  }
-  submitting1.value = true
+// 列表数据：结构件(manageMode=1)与精密件(manageMode=2)同主表(inbound_order)
+async function load() {
+  loading.value = true
   try {
-    const data = await request.post('/inbound/create', {
-      inboundType: 'purchase',
-      materialCode: form1.materialCode,
-      batchNo: form1.batchNo.trim(),
-      quantity: form1.quantity,
-      zoneCode: form1.zoneCode,
-      productionDate: form1.productionDate,
-      supplier: form1.supplier.trim(),
-      remark: form1.remark.trim(),
-      operator: getRealName()
+    const data = await request.get('/inbound/query', {
+      params: {
+        inboundNo: filters.inboundNo.trim(),
+        materialCode: filters.materialCode.trim(),
+        manageMode: filters.manageMode,
+        keyword: filters.keyword.trim(),
+        startDate: dateRange.value?.[0] || '',
+        endDate: dateRange.value?.[1] || '',
+        page: page.current,
+        pageSize: page.size
+      }
     })
-    lastInboundNo.value = data?.inboundNo || ''
-    ElMessage.success(`入库成功：入库单号 ${data?.inboundNo || ''}，数量 ${data?.quantity ?? form1.quantity}`)
-    form1.batchNo = ''
-    form1.quantity = 1
+    list.value = data?.list || []
+    total.value = data?.total || 0
   } finally {
-    submitting1.value = false
+    loading.value = false
   }
 }
 
-/* ---------- Tab2 精密件 SN 入库（连续扫码、实时已扫数量） ---------- */
-const snInput = ref('')
-const submitting2 = ref(false)
-const snList = ref([])
-const form2 = reactive({ materialCode: '', zoneCode: '', remark: '' })
-
-// 支持多种分隔符：中英文逗号、中英文句号、分号、顿号、空格、回车、制表符等
-const SN_SEP = /[,，.。;；、\s]+/
-
-function addSnLines() {
-  const lines = String(snInput.value).split(SN_SEP)
-  for (let raw of lines) {
-    const sn = raw.trim()
-    if (!sn) continue
-    if (snList.value.includes(sn)) continue
-    snList.value.push(sn)
-  }
-  snInput.value = ''
+function search() {
+  page.current = 1
+  load()
+}
+function resetFilters() {
+  filters.inboundNo = ''
+  filters.materialCode = ''
+  filters.manageMode = ''
+  filters.keyword = ''
+  dateRange.value = []
+  search()
 }
 
-function removeSn(index) {
-  snList.value.splice(index, 1)
-}
-
-async function submitSn() {
-  if (!form2.materialCode) {
-    ElMessage.warning('请选择物料')
-    return
-  }
-  if (!form2.zoneCode) {
-    ElMessage.warning('请选择入库区域')
-    return
-  }
-  if (!snList.value.length) {
-    ElMessage.warning('请先扫码录入 SN（输入后点击【录入到列表】）')
-    return
-  }
-  // 管理粒度校验（反向）：结构件按批次管理，不能带 SN 清单提交
-  const mat2 = materials.value.find(m => m.code === form2.materialCode)
-  if (mat2 && Number(mat2.manageMode) === 1) {
-    ElMessage.warning('该物料为结构件（按批次管理），请切换到「结构件入库」页按数量入库')
-    return
-  }
-  submitting2.value = true
+// 导出：按当前查询条件导出全部（后端 /inbound/export?format=xlsx 返回 .xlsx）
+async function exportCsv() {
   try {
-    const data = await request.post('/inbound/create', {
-      inboundType: 'purchase',
-      materialCode: form2.materialCode,
-      zoneCode: form2.zoneCode,
-      snList: [...snList.value],
-      remark: form2.remark.trim(),
-      operator: getRealName()
+    await exportXlsxFetch('/api/inbound/export', {
+      inboundNo: filters.inboundNo.trim(),
+      materialCode: filters.materialCode.trim(),
+      manageMode: filters.manageMode,
+      keyword: filters.keyword.trim(),
+      startDate: dateRange.value?.[0] || '',
+      endDate: dateRange.value?.[1] || ''
+    }, '入库管理.xlsx')
+  } catch (e) {
+    /* 错误提示由请求层统一处理 */
+  }
+}
+
+// 批量入库：新标签页打开录入页（单一职责，本页不含录入）
+function openCreate() {
+  window.open(location.origin + '/inbound-create', '_blank')
+}
+
+// 入库单明晰：按需懒加载 + 分页（不在列表里一次性拉全量，避免精密件上万条 SN 撑爆前端）
+// detailState[inboundNo] = { list, total, page, size, loading, loaded }
+const detailState = reactive({})
+async function openDetail(row) {
+  const no = row.inboundNo
+  if (!detailState[no]) {
+    detailState[no] = { list: [], total: 0, page: 1, size: 50, loading: false, loaded: false }
+  }
+  const st = detailState[no]
+  if (st.loaded || st.loading) return
+  st.loading = true
+  try {
+    const d = await request.get('/inbound/details', {
+      params: { inboundNo: no, page: st.page, pageSize: st.size }
     })
-    ElMessage.success(`入库成功：入库单号 ${data?.inboundNo || ''}，SN 共 ${snList.value.length} 条`)
-    snList.value = []
-    snInput.value = ''
+    st.list = d?.list || []
+    st.total = d?.total || 0
+    st.loaded = true
+  } catch (e) {
+    /* 拦截器统一提示 */
   } finally {
-    submitting2.value = false
+    st.loading = false
   }
 }
-
-/* ---------- Tab3 Excel 导入 ---------- */
-const uploadRef = ref()
-const excelFiles = ref([])
-const importing = ref(false)
-const excelResult = ref(null)
-
-function onExcelChange(file, files) {
-  excelFiles.value = files.slice(-1)
+async function changeDetailPage(row, p) {
+  const st = detailState[row.inboundNo]
+  if (!st) return
+  st.page = p
+  st.loaded = false
+  await openDetail(row)
 }
 
-function onExceed(files) {
-  uploadRef.value.clearFiles()
-  const file = files[0]
-  if (file) uploadRef.value.handleStart(file)
+function typeLabel(m) {
+  return m === 1 ? '结构件' : m === 2 ? '精密件' : '-'
 }
 
-async function importExcel() {
-  const item = excelFiles.value[0] || (uploadRef.value?.uploadFiles?.[0])
-  const raw = item?.raw
-  if (!raw) {
-    ElMessage.warning('请先选择 .xlsx 文件')
-    return
+onMounted(() => {
+  // 库存页点入库单号跳转过来 → 自动带入单号并查询（闭环）
+  if (route.query.inboundNo) {
+    filters.inboundNo = String(route.query.inboundNo)
   }
-  const fd = new FormData()
-  fd.append('file', raw)
-  importing.value = true
-  try {
-    const data = await request.post('/inbound/batch-excel', fd)
-    excelResult.value = data || {}
-    ElMessage.success(`导入完成：共 ${data?.total ?? 0} 行，成功 ${data?.success ?? 0} 行`)
-    uploadRef.value?.clearFiles()
-    excelFiles.value = []
-  } finally {
-    importing.value = false
-  }
-}
+  load()
+})
 </script>
 
 <template>
   <el-card shadow="never">
-    <el-tabs>
-      <el-tab-pane label="结构件入库">
-        <el-form ref="batchRef" :model="form1" :rules="rules1" label-width="110px" style="max-width:560px">
-          <el-form-item label="物料" prop="materialCode">
-            <el-select v-model="form1.materialCode" filterable placeholder="选择物料编码" style="width:100%">
-              <el-option v-for="m in materials" :key="m.id" :value="m.code"
-                         :label="`${m.code}　${m.name || ''}`" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="批次号">
-            <el-input v-model="form1.batchNo" placeholder="留空则自动生成" clearable />
-          </el-form-item>
-          <el-form-item label="数量" prop="quantity">
-            <el-input-number v-model="form1.quantity" :min="1" :step="1" step-strictly style="width:100%" />
-          </el-form-item>
-          <el-form-item label="区域" prop="zoneCode">
-            <el-select v-model="form1.zoneCode" placeholder="请选择入库区域（必填）" clearable style="width:100%">
-              <el-option v-for="z in zones" :key="z.id" :value="z.zoneCode"
-                         :label="`${z.zoneCode}　${z.zoneName || ''}`" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="生产日期">
-            <el-date-picker v-model="form1.productionDate" type="date" value-format="YYYY-MM-DD"
-                            placeholder="选择生产日期" style="width:100%" />
-          </el-form-item>
-          <el-form-item label="供应商">
-            <el-input v-model="form1.supplier" placeholder="供应商名称" clearable />
-          </el-form-item>
-          <el-form-item label="备注">
-            <el-input v-model="form1.remark" placeholder="备注（可空）" clearable />
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" :loading="submitting1" @click="submitBatch">提交入库</el-button>
-          </el-form-item>
-        </el-form>
-        <el-alert v-if="lastInboundNo" type="success" :closable="false"
-                  :title="`最近入库单号：${lastInboundNo}`" style="max-width:560px" />
-      </el-tab-pane>
+    <!-- 查询条件 -->
+    <el-form inline @submit.prevent="search" class="mb12">
+      <el-form-item label="入库单号">
+        <el-input v-model="filters.inboundNo" placeholder="入库单号(模糊)" clearable style="width:180px" @keyup.enter="search" />
+      </el-form-item>
+      <el-form-item label="物料编码">
+        <el-input v-model="filters.materialCode" placeholder="物料编码(模糊)" clearable style="width:160px" @keyup.enter="search" />
+      </el-form-item>
+      <el-form-item label="类型">
+        <el-select v-model="filters.manageMode" placeholder="全部" clearable style="width:120px" @change="search">
+          <el-option label="全部" value="" />
+          <el-option label="结构件" value="1" />
+          <el-option label="精密件" value="2" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="关键字">
+        <el-input v-model="filters.keyword" placeholder="物料名称/单号" clearable style="width:180px" @keyup.enter="search" />
+      </el-form-item>
+      <el-form-item label="入库时间">
+        <el-date-picker v-model="dateRange" type="daterange" value-format="YYYY-MM-DD"
+                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:240px" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" :loading="loading" @click="search">查询</el-button>
+        <el-button @click="resetFilters">重置</el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="success" @click="openCreate">批量入库</el-button>
+        <el-button :disabled="!total" @click="exportCsv">导出</el-button>
+      </el-form-item>
+    </el-form>
 
-      <el-tab-pane :label="`精密件 SN 入库${snList.length ? `（已扫 ${snList.length}）` : ''}`">
-        <el-form label-width="110px" style="max-width:680px">
-          <el-form-item label="物料" required>
-            <el-select v-model="form2.materialCode" filterable placeholder="请选择物料（必填）" style="width:100%">
-              <el-option v-for="m in materials" :key="m.id" :value="m.code"
-                         :label="`${m.code}　${m.name || ''}`" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="区域" required>
-            <el-select v-model="form2.zoneCode" placeholder="请选择入库区域（必填）" clearable style="width:100%">
-              <el-option v-for="z in zones" :key="z.id" :value="z.zoneCode"
-                         :label="`${z.zoneCode}　${z.zoneName || ''}`" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="扫码录入">
-            <div style="width:100%">
-              <el-input v-model="snInput" type="textarea" :rows="4"
-                        placeholder="扫入或粘贴 SN，可用 逗号/分号/顿号/空格/回车 分隔，一次可录入多条" />
-              <el-button type="primary" plain style="margin-top:6px" :disabled="!snInput.trim()"
-                         @click="addSnLines">录入到列表</el-button>
-              <span style="margin-left:8px;color:#909399;font-size:12px">点【录入到列表】加入下方清单，回车只是换行</span>
+    <!-- 入库单列表（结构件/精密件同表） -->
+    <el-table ref="tableRef" :data="list" border size="small" v-loading="loading" empty-text="暂无入库数据">
+      <el-table-column type="expand" label="明细" width="60">
+        <template #default="{ row }">
+          <div style="padding:8px 24px">
+            <div v-if="!detailState[row.inboundNo]?.loaded && !detailState[row.inboundNo]?.loading" style="color:#909399">
+              点击右侧「明细」按钮加载（共 {{ row.detailCount || 0 }} 条）
             </div>
-          </el-form-item>
-          <el-form-item label="备注">
-            <el-input v-model="form2.remark" type="textarea" :rows="2" placeholder="本批 SN 的统一备注（可空）" />
-          </el-form-item>
-        </el-form>
-
-        <div style="margin-bottom:8px">
-          已录入 <b>{{ snList.length }}</b> 条 SN
-        </div>
-        <el-table :data="snList.map((v, i) => ({ i, v }))" size="small" border max-height="320" empty-text="暂无 SN">
-          <el-table-column type="index" label="#" width="56" align="center" />
-          <el-table-column prop="v" label="SN 序列号" min-width="220" />
-          <el-table-column label="操作" width="80" align="center">
-            <template #default="{ row }">
-              <el-button link type="danger" size="small" @click="removeSn(row.i)">删除</el-button>
+            <template v-else>
+              <el-table :data="detailState[row.inboundNo].list" size="small" border v-loading="detailState[row.inboundNo].loading">
+                <el-table-column label="批次号" min-width="180">
+                  <template #default="{ row: d }">{{ d.batchNo || '-' }}</template>
+                </el-table-column>
+                <el-table-column label="SN 序列号" min-width="200">
+                  <template #default="{ row: d }">{{ d.snCode || '-' }}</template>
+                </el-table-column>
+                <el-table-column prop="quantity" label="数量" width="90" align="center" />
+              </el-table>
+              <div v-if="detailState[row.inboundNo].total > detailState[row.inboundNo].size"
+                   style="display:flex;justify-content:flex-end;margin-top:8px">
+                <el-pagination small background layout="total, prev, pager, next"
+                               :total="detailState[row.inboundNo].total"
+                               :current-page="detailState[row.inboundNo].page"
+                               :page-size="detailState[row.inboundNo].size"
+                               @current-change="(p) => changeDetailPage(row, p)" />
+              </div>
             </template>
-          </el-table-column>
-        </el-table>
-        <div style="margin-top:12px">
-          <el-button type="primary" :loading="submitting2" @click="submitSn">提交入库</el-button>
-          <el-button @click="snList = []">清空列表</el-button>
-        </div>
-      </el-tab-pane>
-
-      <el-tab-pane label="Excel 导入">
-        <el-alert type="info" :closable="false" title="列头顺序（首行忽略）：物料编码 | 批次号(可空自动生成) | 数量 | 生产日期 | 供应商 | 区域 | 备注"
-                  style="max-width:760px;margin-bottom:14px" />
-        <el-upload ref="uploadRef" drag accept=".xlsx" :limit="1" :auto-upload="false"
-                   :on-change="onExcelChange" :on-exceed="onExceed">
-          <div class="dropzone">将 .xlsx 文件拖到此处，或点击选择文件</div>
-        </el-upload>
-        <div style="margin-top:12px">
-          <el-button type="primary" :loading="importing" @click="importExcel">开始导入</el-button>
-        </div>
-
-        <template v-if="excelResult">
-          <el-divider />
-          <h4>导入结果：共 {{ excelResult.total }} 行，成功 {{ excelResult.success }} 行，失败 {{ excelResult.total - excelResult.success }} 行</h4>
-          <el-table :data="excelResult.rows || []" size="small" border max-height="360">
-            <el-table-column prop="row" label="行号" width="70" align="center" />
-            <el-table-column prop="materialCode" label="物料编码" min-width="140" />
-            <el-table-column prop="batchNo" label="批次号" min-width="160" />
-            <el-table-column prop="quantity" label="数量" width="90" align="center" />
-            <el-table-column label="结果" min-width="200">
-              <template #default="{ row }">
-                <el-tag v-if="!row.error" type="success" size="small">成功</el-tag>
-                <el-tag v-else type="danger" size="small">{{ row.error }}</el-tag>
-              </template>
-            </el-table-column>
-          </el-table>
+          </div>
         </template>
-      </el-tab-pane>
-    </el-tabs>
+      </el-table-column>
+      <el-table-column prop="inboundNo" label="入库单号" min-width="160" />
+      <el-table-column label="类型" width="90" align="center">
+        <template #default="{ row }">
+          <el-tag size="small" :type="row.manageMode === 1 ? 'primary' : row.manageMode === 2 ? 'warning' : 'info'">
+            {{ typeLabel(row.manageMode) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="materialCode" label="物料编码" min-width="140" />
+      <el-table-column prop="materialName" label="物料名称" min-width="140">
+        <template #default="{ row }">{{ row.materialName || '-' }}</template>
+      </el-table-column>
+      <el-table-column prop="quantity" label="数量" width="80" align="center" />
+      <el-table-column prop="batchNo" label="批次号" min-width="150">
+        <template #default="{ row }">{{ row.batchNo || '-' }}</template>
+      </el-table-column>
+      <el-table-column prop="zoneCode" label="区域" width="90" align="center">
+        <template #default="{ row }">{{ row.zoneCode || '-' }}</template>
+      </el-table-column>
+      <el-table-column prop="operator" label="操作人" width="100">
+        <template #default="{ row }">{{ row.operator || '-' }}</template>
+      </el-table-column>
+      <el-table-column label="入库时间" width="160" align="center">
+        <template #default="{ row }">{{ fmtTime(row.createdAt) }}</template>
+      </el-table-column>
+      <el-table-column label="操作" width="120" align="center" fixed="right">
+        <template #default="{ row }">
+          <el-button link type="primary" size="small"
+                     @click="tableRef.toggleRowExpansion(row); openDetail(row)">
+            明细{{ row.detailCount ? '(' + row.detailCount + ')' : '' }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="pager">
+      <el-pagination background layout="total, sizes, prev, pager, next" :total="total"
+                     :current-page="page.current" :page-size="page.size" :page-sizes="[10, 20, 50, 100]"
+                     @current-change="(p) => { page.current = p; load() }"
+                     @size-change="(s) => { page.size = s; page.current = 1; load() }" />
+    </div>
   </el-card>
   <PageHelp :data="helpInbound" />
 </template>
 
 <style scoped>
-.dropzone { padding: 30px 0; color: #606266; }
-</style>
+.mb12 { margin-bottom: 12px; }
+.pager { display: flex; justify-content: flex-end; margin-top: 12px; }
+</style>