feat: 为多个页面添加操作帮助功能，替换旧版静态资源文件

1. 新增PageHelp通用帮助组件，实现页面左下角悬浮帮助按钮 2. 为WMS、MES、工位终端多个业务页面接入帮助系统 3. 替换项目中旧的打包静态资源文件，更新资源引用路径 4. 新增各模块的帮助文档配置数据
2026-08-28 17:23:44 +08:00
parent cbd55338f1
commit dd078038e2
93 changed files with 619 additions and 45 deletions
@@ -0,0 +1,54 @@
+<template>
+  <!-- 页面左下角 "?" 帮助按钮：点击弹出当前页面整体介绍 + 字段说明 -->
+  <div class="page-help">
+    <el-tooltip content="操作说明" placement="left">
+      <el-button class="help-fab" circle @click="open">?</el-button>
+    </el-tooltip>
+
+    <el-drawer v-model="show" :title="data.title || '操作说明'" size="480px" append-to-body>
+      <div class="ph-overview" v-if="data.overview">{{ data.overview }}</div>
+
+      <div v-if="data.sections && data.sections.length">
+        <div v-for="(sec, si) in data.sections" :key="si">
+          <h3 class="ph-sec-title">{{ sec.title }}</h3>
+          <p class="ph-sec-overview" v-if="sec.overview">{{ sec.overview }}</p>
+          <el-table :data="sec.fields" border size="small" class="ph-table">
+            <el-table-column prop="name" label="字段" width="96" />
+            <el-table-column prop="source" label="来源" width="80" />
+            <el-table-column prop="purpose" label="用途" min-width="120" show-overflow-tooltip />
+            <el-table-column prop="fill" label="怎么填" min-width="140" show-overflow-tooltip />
+          </el-table>
+        </div>
+      </div>
+
+      <el-table v-else :data="data.fields" border size="small" class="ph-table">
+        <el-table-column prop="name" label="字段" width="96" />
+        <el-table-column prop="source" label="来源" width="80" />
+        <el-table-column prop="purpose" label="用途" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="fill" label="怎么填" min-width="140" show-overflow-tooltip />
+      </el-table>
+    </el-drawer>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  data: { type: Object, default: () => ({ title: '操作说明', overview: '', fields: [] }) }
+})
+
+const show = ref(false)
+function open() { show.value = true }
+</script>
+
+<style scoped>
+.page-help { position: fixed; left: 16px; bottom: 16px; z-index: 2000; }
+.help-fab { background: #409eff; color: #fff; font-weight: 700; font-size: 18px;
+  box-shadow: 0 2px 8px rgba(0,0,0,.25); }
+.help-fab:hover { background: #66b1ff; }
+.ph-overview { color: #555; line-height: 1.7; margin-bottom: 14px; white-space: pre-line; }
+.ph-sec-title { margin: 12px 0 4px; font-size: 15px; }
+.ph-sec-overview { color: #777; margin: 4px 0 8px; line-height: 1.6; font-size: 13px; }
+.ph-table :deep(.el-table__cell), .ph-table :deep(td.el-table__cell) { padding: 4px 6px; font-size: 12px; }
+</style>
@@ -0,0 +1,134 @@
+// 库房客户端(WMS Client) 页面级操作说明：整体介绍 + 各字段 来源/用途/怎么填
+// 由 components/PageHelp.vue 在左下角 "?" 按钮弹出展示。
+
+export const helpInbound = {
+  title: '入库',
+  overview: '把来料记入 WMS 库存。按物料类型分两种方式：\n· 结构件（螺丝/机加工件）→ 按【批次】入库，一进多件；\n· 精密件（芯片/器件）→ 按【SN 序列号】逐件扫码入库，单件可追溯。\n入库先选“物料模板”，否则需要手工填大量信息；支持连续扫码与 Excel 批量导入。',
+  sections: [
+    {
+      title: 'Tab1 结构件入库（批次）',
+      fields: [
+        { name: '物料', source: '下拉选择（来自物料档案）', purpose: '入库的是什么物料；必须先有物料档案', fill: '选择物料编码，如 SCREW-M3' },
+        { name: '批次号', source: '留空自动生成', purpose: '区看到货批次，实现先进先出', fill: '留空系统按日期+序号自动生成，或手工填' },
+        { name: '数量', source: '手动填写', purpose: '本批到货数量', fill: '整数，≥1' },
+        { name: '区域', source: '下拉选择（库区字典）', purpose: '放到哪个库区（待检/合格/不合格等）', fill: '通常先放待检区，检验后转合格区' },
+        { name: '生产日期', source: '手动选择', purpose: '生产时间，用于时效/批次管理', fill: '选择日期' },
+        { name: '供应商', source: '手动填写', purpose: '来料来源', fill: '供应商名称，可空' }
+      ]
+    },
+    {
+      title: 'Tab2 精密件 SN 入库',
+      fields: [
+        { name: '物料', source: '下拉选择', purpose: '入库的精密件物料', fill: '选择物料编码' },
+        { name: '区域', source: '下拉选择', purpose: '放到哪个库区', fill: '可选，空则默认' },
+        { name: '扫码录入', source: '扫码枪连续扫码', purpose: '逐件登记 SN，实现单件追溯', fill: '扫入/粘贴 SN 后回车追加，可一次多条' }
+      ]
+    },
+    {
+      title: 'Tab3 Excel 导入',
+      overview: '用于大批量结构件入库。列头顺序（首行忽略）：物料编码 | 批次号(可空自动生成) | 数量 | 生产日期 | 供应商 | 区域。',
+      fields: [
+        { name: '文件', source: '选择 .xlsx', purpose: '批量导入的物料清单', fill: '按列头顺序准备好 Excel 后选择上传' }
+      ]
+    }
+  ]
+}
+
+export const helpOutbound = {
+  title: '出库（按工单领料）',
+  overview: '仓库按工单台账为生产备料出库。系统强约束：单物料累计出库 ≤ 工单需求总量，超发走补料流程。\n可一次出完，也可分多次、分批由 AGV 配送到各 DOCK（决策权在仓库）。',
+  fields: [
+    { name: '工单号', source: '输入（来自 MES）', purpose: '出库挂靠的工单，决定可领料总量', fill: '输入工单号回车查询台账' },
+    { name: '操作人', source: '登录账号自动带出', purpose: '本次出库执行人，便于追溯', fill: '自动，无需填' },
+    { name: '目标工位', source: '手动填写', purpose: '本次配送送达的接驳台/DOCK', fill: '如 DOCK-A，可空' },
+    { name: '一键分配出库', source: '系统自动按 FIFO 分配', purpose: '从合格区(Z02)按批次先进先出凑够缺口并出库', fill: '点按钮，系统自动算批次并二次确认' }
+  ]
+}
+
+export const helpInventory = {
+  title: '库存查询',
+  overview: '查看当前库存：结构件按批次台账（数量/锁定/区域），精密件按 SN 序列号（状态/区域）。',
+  fields: [
+    { name: '物料编码', source: '筛选条件', purpose: '只看某物料', fill: '输入编码，可空=全部' },
+    { name: '库存类型', source: '单选', purpose: '看批次还是看 SN 序列', fill: '全部 / 批次 / SN 序列' },
+    { name: '关键字', source: '筛选条件', purpose: '按批次号/物料名称/SN 模糊过滤', fill: '输入关键字，可空' }
+  ]
+}
+
+export const helpInspection = {
+  title: '质量检验',
+  overview: '对到货物料或 SN 做来料检：把“未检”翻转为【合格】或【不合格】。支持单条扫码录入与批量翻转。合格后才能被出库锁定（出库自动分配只取合格区）。',
+  fields: [
+    { name: '目标类型', source: '单选', purpose: '检验对象是批次还是 SN', fill: '批次 BATCH / 序列号 SN' },
+    { name: '检验结论', source: '单选', purpose: '判定结果', fill: '合格 / 不合格' },
+    { name: '检验员', source: '手动填写（默认当前用户）', purpose: '谁检验的，用于追溯', fill: '检验员姓名' },
+    { name: '扫码输入', source: '扫码枪', purpose: '单个目标编号', fill: '扫批次号或 SN，回车提交' },
+    { name: '批量编号', source: '扫码枪连续录入', purpose: '一次性翻转多个目标的检验状态', fill: '每行一个编号' }
+  ]
+}
+
+export const helpStocktake = {
+  title: '盘点',
+  overview: '核对账面与实际库存，支持扫码快速盘点，完成时按差异修正库存。\n步骤：发起盘点（冻结快照）→ 扫码录入实盘数（入库）→ 完成并生成差异（可选：差异写回库存）。',
+  fields: [
+    { name: '操作人', source: '登录账号', purpose: '发起盘点人', fill: '自动' },
+    { name: '发起盘点', source: '按钮', purpose: '冻结当前库存快照，生成盘点单', fill: '点按钮发起' },
+    { name: '差异写回库存', source: '开关', purpose: '完成后是否用实盘差异修正库存', fill: '开启=写回，关闭=仅记录差异' },
+    { name: '目标编号', source: '扫码枪', purpose: '要盘点的批次号或 SN', fill: '扫批次号/SN，回车提交' },
+    { name: '实盘数量', source: '扫码/手输', purpose: '实际数到的数量', fill: '非负整数；0 表示盘亏为零' }
+  ]
+}
+
+export const helpPackage = {
+  title: '包装绑定（箱号 ↔ SN）',
+  overview: '把若干精密件 SN 绑定到一个箱号，形成包装箱。用于发货/入库整箱追溯。',
+  fields: [
+    { name: '箱号', source: '扫码/手输', purpose: '包装箱唯一号', fill: '扫描或手输箱号' },
+    { name: '物料', source: '下拉选择（可空）', purpose: '箱内物料类型', fill: '可选' },
+    { name: '操作人', source: '登录账号', purpose: '绑定人', fill: '自动' },
+    { name: 'SN 录入', source: '扫码枪连续扫码', purpose: '装箱的 SN 序列号清单', fill: '扫入 SN 回车追加' }
+  ]
+}
+
+export const helpSemi = {
+  title: '半成品/成品（流转）',
+  overview: '产线工位“暂存/退回”的半成品或完工成品可在此入库（记录已完成工序），需要时再出库（重上线），MES 从下一工序继续。',
+  sections: [
+    {
+      title: '半成品/成品入库',
+      fields: [
+        { name: '物料', source: '下拉选择', purpose: '入库物料', fill: '选择物料编码' },
+        { name: '已完成工序', source: '工位终端上报', purpose: '该件做到第几道工序，重上线时 MES 从这里继续', fill: '如 135，可空' },
+        { name: '工单号', source: '手动填写（可空）', purpose: '来源工单', fill: '输入工单号' },
+        { name: '区域', source: '手动填写（可空）', purpose: '存放库区', fill: '如 Z05' },
+        { name: '扫码录入', source: '扫码枪连续扫码', purpose: '半成品 SN 清单', fill: '扫入 SN 回车追加' }
+      ]
+    },
+    {
+      title: '半成品出库（重上线）',
+      fields: [
+        { name: 'SN', source: '扫码枪/手输', purpose: '要重上线的半成品 SN', fill: '扫描或输入 SN，回车出库' }
+      ]
+    }
+  ]
+}
+
+export const helpLedger = {
+  title: '工单物料台账',
+  overview: '实时展示每个物料：需求总量、累计已出库、剩余缺口。系统强约束累计出库 ≤ 需求总量，达到即“领料完结”。',
+  fields: [
+    { name: '工单号', source: '输入', purpose: '查看哪个工单的领料台账', fill: '输入工单号查询' }
+  ]
+}
+
+export const helpDisplay = {
+  title: '库房总览显示',
+  overview: '给库房显示器用的只读总览页，展示库存与出入库概况。',
+  fields: []
+}
+
+export const helpDashboard = {
+  title: '库房看板',
+  overview: '只读看板：库存总量、物料种类、出入库动态等。',
+  fields: []
+}
@@ -3,6 +3,8 @@ import { onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import request from '../utils/request'
 import { getRealName } from '../utils/auth'
+import PageHelp from '../components/PageHelp.vue'
+import { helpInbound } from '../help'

 // 公共字典：物料 / 区域
 const materials = ref([])
@@ -246,6 +248,7 @@ async function importExcel() {
      </el-tab-pane>
    </el-tabs>
  </el-card>
+  <PageHelp :data="helpInbound" />
 </template>

 <style scoped>
@@ -3,6 +3,8 @@ import { nextTick, onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import request from '../utils/request'
 import { getRealName } from '../utils/auth'
+import PageHelp from '../components/PageHelp.vue'
+import { helpInspection } from '../help'

 const targetType = ref('BATCH')
 const status = ref('合格')
@@ -117,6 +119,7 @@ async function submitBatch() {
      </el-form-item>
    </el-form>
  </el-card>
+  <PageHelp :data="helpInspection" />
 </template>

 <style scoped>
@@ -2,6 +2,8 @@
 import { onMounted, reactive, ref } from 'vue'
 import request from '../utils/request'
 import { fmtDateOnly, fmtTime } from '../utils/format'
+import PageHelp from '../components/PageHelp.vue'
+import { helpInventory } from '../help'

 const filters = reactive({ materialCode: '', keyword: '', type: '' })
 const loading = ref(false)
@@ -126,6 +128,7 @@ onMounted(load)
                     @size-change="(s) => { page.size = s; page.current = 1; load() }" />
    </div>
  </div>
+  <PageHelp :data="helpInventory" />
 </template>

 <style scoped>
@@ -1,6 +1,8 @@
 <script setup>
 import { reactive, ref } from 'vue'
 import request from '../utils/request'
+import PageHelp from '../components/PageHelp.vue'
+import { helpLedger } from '../help'

 const orderNo = ref('')
 const loading = ref(false)
@@ -80,6 +82,7 @@ function statusTag(s) {

    <el-empty v-else description="请输入工单号查询" />
  </div>
+  <PageHelp :data="helpLedger" />
 </template>

 <style scoped>
@@ -3,6 +3,8 @@ import { computed, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import request from '../utils/request'
 import { getRealName } from '../utils/auth'
+import PageHelp from '../components/PageHelp.vue'
+import { helpOutbound } from '../help'

 const queryForm = reactive({ orderNo: '' })
 const operator = getRealName()
@@ -146,6 +148,7 @@ async function query() {

    <el-empty v-else description="请先按工单号查询物料台账" />
  </div>
+  <PageHelp :data="helpOutbound" />
 </template>

 <style scoped>
@@ -4,6 +4,8 @@ import { ElMessage } from 'element-plus'
 import request from '../utils/request'
 import { fmtTime } from '../utils/format'
 import { getRealName } from '../utils/auth'
+import PageHelp from '../components/PageHelp.vue'
+import { helpPackage } from '../help'

 const materials = ref([])
 const operator = getRealName()
@@ -168,6 +170,7 @@ function search() {
      </div>
    </el-card>
  </div>
+  <PageHelp :data="helpPackage" />
 </template>

 <style scoped>
@@ -4,6 +4,8 @@ import { ElMessage } from 'element-plus'
 import request from '../utils/request'
 import { fmtTime } from '../utils/format'
 import { getRealName } from '../utils/auth'
+import PageHelp from '../components/PageHelp.vue'
+import { helpSemi } from '../help'

 /* ---------- 半成品/成品入库（携带已完成工序，连续扫码） ---------- */
 const materials = ref([])
@@ -224,6 +226,7 @@ function search() {
      </el-tab-pane>
    </el-tabs>
  </el-card>
+  <PageHelp :data="helpSemi" />
 </template>

 <style scoped>
@@ -4,6 +4,8 @@ import { ElMessage } from 'element-plus'
 import request from '../utils/request'
 import { fmtTime } from '../utils/format'
 import { getRealName } from '../utils/auth'
+import PageHelp from '../components/PageHelp.vue'
+import { helpStocktake } from '../help'

 /* ---------- 发起盘点（动态/静态/抽盘通过后端类型扩展，当前按全量快照） ---------- */
 const operator = getRealName()
@@ -225,6 +227,7 @@ async function loadHistory() {
      </el-table>
    </el-card>
  </div>
+  <PageHelp :data="helpStocktake" />
 </template>

 <style scoped>