From 4455b90854a5bf729050fc2b226797f37318e9fd Mon Sep 17 00:00:00 2001
From: sheng <905537351@qq.com>
Date: Wed, 24 Jun 2026 14:38:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=89=98=E7=9B=98=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E6=89=B9=E6=AC=A1=E9=80=89=E6=8B=A9=E7=A1=AE=E8=AE=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/托盘登录表单UX验证.md                    | 21 ++++++++++++
 src/components/page-table/index.vue           | 16 ++++++++-
 .../tray-registration/index.vue               | 33 +++++++++++++++++--
 3 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 docs/托盘登录表单UX验证.md

diff --git a/docs/托盘登录表单UX验证.md b/docs/托盘登录表单UX验证.md
new file mode 100644
index 00000000..6c2d00bf
--- /dev/null
+++ b/docs/托盘登录表单UX验证.md
@@ -0,0 +1,21 @@
+# 托盘登录表单 UX 验证记录
+
+验证日期：2026-06-24
+页面：`src/views/planning-production/production-monitoring/tray-registration/index.vue`
+
+## Findings
+
+- **已修复** `批次选择弹窗`：批次表格双击事件现在通过 `page-table` 的 `table-listeners` 明确透传到内部 `el-table`，双击行会直接写入批次号并关闭弹窗。同时新增单击选中后点“确定”的兜底路径，避免只依赖双击。
+- **Medium** `托盘编码 / 电池编码校验`：格式错误、缺少托盘号、缺少电池编码主要通过全局 `$message` 提示，字段附近没有持久化错误状态。用户需要记住错误来源，移动端或扫码连续输入时更容易丢失上下文。建议后续改为 `el-form` rules 或字段级错误文案。
+- **Medium** `登录按钮`：按钮只在提交中禁用，未选择批次、未选择格式、未录入电池时仍可点击，再由全局提示拦截。建议后续在按钮附近或必填字段处暴露阻塞原因，减少试错。
+- **Low** `批次选择弹窗`：批次列表没有搜索框或分页；如果批次数量较大，只能滚动查找。建议后续加入批次号过滤或服务端分页。
+- **Low** `格式编辑弹窗`：新增格式表单没有字段级必填状态和提交 loading，重复点击可能造成重复请求。建议后续补充表单规则和提交态。
+
+## Evidence
+
+- Browser：未启动浏览器，采用 source-only 验证。
+- Notes：已检查 `page-table` 事件透传、批次弹窗选择状态、提交校验入口和格式编辑入口。当前仓库未配置 Playwright；本次通过构建、ESLint 和 JSON 解析作为可执行验证。
+
+## Suggested Shape
+
+批次选择保留“单击选中 + 确定”和“双击直接确定”两条路径；主表单后续应把必填与格式校验迁移到字段局部反馈，登录按钮附近只保留简短阻塞原因。
diff --git a/src/components/page-table/index.vue b/src/components/page-table/index.vue
index 208f7888..8355b824 100644
--- a/src/components/page-table/index.vue
+++ b/src/components/page-table/index.vue
@@ -66,7 +66,7 @@
         :row-key="rowKey"
         :header-cell-style="headerCellStyle"
         v-bind="tableAttrs"
-        v-on="tableListeners"
+        v-on="elTableListeners"
         @selection-change="onSelectionChange"
       >
         <!--
@@ -366,6 +366,20 @@ export default {
      */
     headerCellStyle () {
       return () => 'background-color: #F8F8F8; color: #000000; font-weight: 500;'
+    },
+
+    /**
+     * 将父组件直接绑定在 page-table 上的 el-table 原生事件透传下去。
+     * selection-change 由当前组件统一维护选中行状态，避免父级监听被触发两次。
+     */
+    elTableListeners () {
+      const listeners = {
+        ...this.$listeners,
+        ...this.tableListeners
+      }
+      delete listeners['selection-change']
+      delete listeners['page-change']
+      return listeners
     }
   },
   mounted () {
diff --git a/src/views/planning-production/production-monitoring/tray-registration/index.vue b/src/views/planning-production/production-monitoring/tray-registration/index.vue
index 9e9e488d..ecdd504d 100644
--- a/src/views/planning-production/production-monitoring/tray-registration/index.vue
+++ b/src/views/planning-production/production-monitoring/tray-registration/index.vue
@@ -136,9 +136,15 @@
         :row-buttons="[]"
         :pagination="null"
         :table-attrs="{ size: 'mini', rowKey: 'batch', highlightCurrentRow: true }"
+        :table-listeners="batchTableListeners"
         height="420px"
-        @row-dblclick="selectBatch"
       />
+      <span slot="footer">
+        <el-button size="mini" @click="batchDialogVisible = false">{{ $t(key('cancel')) }}</el-button>
+        <el-button size="mini" type="primary" :disabled="!currentBatch" @click="confirmBatch">
+          {{ $t(key('confirm')) }}
+        </el-button>
+      </span>
     </el-dialog>
 
     <el-dialog :title="$t(key('format_dialog_title'))" :visible.sync="formatDialogVisible" width="820px">
@@ -154,8 +160,8 @@
         :row-buttons="[]"
         :pagination="null"
         :table-attrs="{ size: 'mini', rowKey: 'id', highlightCurrentRow: true }"
+        :table-listeners="formatTableListeners"
         height="360px"
-        @row-dblclick="selectFormatRow"
       >
         <template #col-actions="{ row }">
           <el-button type="text" class="danger-action" @click="deleteFormat(row)">
@@ -239,6 +245,7 @@ export default {
       batchList: [],
       formatList: [],
       selectedRows: [],
+      currentBatch: null,
       batchDialogVisible: false,
       formatDialogVisible: false,
       formatFormVisible: false,
@@ -312,6 +319,18 @@ export default {
         selectionWidth: 0,
         indexWidth: 0
       })
+    },
+    batchTableListeners () {
+      return {
+        'current-change': this.onBatchCurrentChange,
+        'row-click': this.onBatchCurrentChange,
+        'row-dblclick': this.selectBatch
+      }
+    },
+    formatTableListeners () {
+      return {
+        'row-dblclick': this.selectFormatRow
+      }
     }
   },
   created () {
@@ -335,11 +354,21 @@ export default {
       return new RegExp(`^${escaped}$`)
     },
     openBatchDialog () {
+      this.currentBatch = this.batchList.find(item => item.batch === this.form.batch) || null
       this.batchDialogVisible = true
       if (!this.batchList.length) this.fetchBatchList()
     },
+    onBatchCurrentChange (row) {
+      this.currentBatch = row || null
+    },
+    confirmBatch () {
+      if (!this.currentBatch) return
+      this.selectBatch(this.currentBatch)
+    },
     selectBatch (row) {
+      if (!row || !row.batch) return
       this.form.batch = row.batch
+      this.currentBatch = row
       this.batchDialogVisible = false
     },
     async fetchBatchList () {