feat: expand pending order remarks

static/js/app.js

@@ -18044,6 +18044,34 @@ function updateFormalQty(productCode, val) {
     });
 }
 
+// 待下单详情：在不改变原输入框宽度的情况下，完整查看成品/包材下单备注。
+window.openPendingRemarkViewer = function(trigger, title) {
+    var wrapper = trigger && trigger.closest ? trigger.closest('.pending-remark-field') : null;
+    var input = wrapper ? wrapper.querySelector('input, textarea') : null;
+    var remark = input ? input.value : '';
+    var oldViewer = document.getElementById('pendingRemarkViewer');
+    if (oldViewer) oldViewer.remove();
+
+    var overlay = document.createElement('div');
+    overlay.id = 'pendingRemarkViewer';
+    overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100002;display:flex;align-items:center;justify-content:center;padding:20px';
+    overlay.innerHTML =
+        '<div role="dialog" aria-modal="true" aria-labelledby="pendingRemarkViewerTitle" style="background:#fff;border-radius:10px;width:620px;max-width:92vw;box-shadow:0 10px 36px rgba(0,0,0,.2);overflow:hidden">' +
+            '<div style="display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #eee">' +
+                '<h3 id="pendingRemarkViewerTitle" style="margin:0;font-size:16px">' + escHtml(title || '下单备注') + '</h3>' +
+                '<button type="button" aria-label="关闭" style="border:0;background:none;color:#888;font-size:22px;line-height:1;cursor:pointer;padding:2px 5px" onclick="document.getElementById(\'pendingRemarkViewer\').remove()">×</button>' +
+            '</div>' +
+            '<div style="padding:18px">' +
+                '<textarea readonly aria-label="完整备注内容" style="width:100%;min-height:240px;max-height:55vh;box-sizing:border-box;padding:12px;border:1px solid #d9d9d9;border-radius:6px;background:#fafafa;color:#333;font-size:14px;line-height:1.7;resize:vertical;white-space:pre-wrap" placeholder="暂无备注内容"></textarea>' +
+            '</div>' +
+            '<div style="padding:0 18px 16px;text-align:right"><button type="button" class="btn" onclick="document.getElementById(\'pendingRemarkViewer\').remove()">关闭</button></div>' +
+        '</div>';
+    overlay.querySelector('textarea').value = remark;
+    overlay.onclick = function(e) { if (e.target === overlay) overlay.remove(); };
+    document.body.appendChild(overlay);
+    overlay.querySelector('textarea').focus();
+};
+
 function pendingDetail(productCode) {
     var item = null;
     _pendingItems.forEach(function(i) {
@@ -18118,7 +18146,13 @@ function pendingDetail(productCode) {
             var valHtml = escHtml(String(f.val));
             if (f.editable) {
                 var _extraCls = (f.label === '实际下单数量') ? ' pend-product-actual-qty' : '';
-                valHtml = '<input type="text" class="form-input' + _extraCls + '" style="width:100%;box-sizing:border-box;padding:3px 6px;font-size:13px" value="' + valHtml + '" onchange="updatePendingProdField(\'' + item.product_code + '\',\'' + f.label + '\',this.value)">';
+                var _isRemark = f.label === '下单备注';
+                var _inputStyle = 'width:100%;box-sizing:border-box;padding:3px ' + (_isRemark ? '30px' : '6px') + ' 3px 6px;font-size:13px';
+                valHtml = '<input type="text" class="form-input' + _extraCls + '" style="' + _inputStyle + '" value="' + valHtml + '" onchange="updatePendingProdField(\'' + item.product_code + '\',\'' + f.label + '\',this.value)">';
+                if (_isRemark) {
+                    valHtml = '<span class="pending-remark-field" style="display:block;position:relative;width:100%">' + valHtml +
+                        '<button type="button" aria-label="查看完整成品下单备注" title="查看全部" onclick="openPendingRemarkViewer(this,\'成品下单备注\')" style="position:absolute;right:4px;bottom:3px;width:21px;height:20px;padding:0;border:0;border-radius:4px;background:#e6f7ff;color:#1677ff;line-height:20px;font-size:14px;cursor:pointer">⛶</button></span>';
+                }
             } else if (f.readonly) {
                 valHtml = '<span style="font-weight:600;color:#8c8c8c">' + valHtml + '</span>';
             } else {
@@ -18184,7 +18218,7 @@ function pendingDetail(productCode) {
                 '<td style="' + tdBase + '"><input type="number" class="form-input pend-detail-editable" style="width:70px;text-align:center;font-size:12px;padding:3px 4px;font-weight:600;color:#d4380d" value="' + actualQty + '" data-material="' + matCode + '" data-col="actual_qty"></td>' +
                 '<td style="' + tdBase + '"><input type="number" class="form-input pend-detail-editable" style="width:70px;text-align:center;font-size:12px;padding:3px 4px" value="' + (b.pre_pack_qty || 0) + '" data-material="' + matCode + '" data-col="pre_pack"></td>' +
                 '<td style="' + tdBase + '"><span class="bom-post-pack-qty" style="display:inline-block;width:70px;text-align:center;font-size:12px;padding:3px 4px;color:#666;background:#f5f5f5" data-material="' + matCode + '">' + (b.post_pack_qty || 0) + '</span></td>' +
-                                '<td style="' + tdBase + '"><input type="text" class="form-input pend-detail-editable" style="width:100%;box-sizing:border-box;text-align:left;font-size:12px;padding:3px 4px" value="' + escHtml(savedBomRemarks[b.material_code] || '') + '" data-material="' + matCode + '" data-col="remark"></td>' +
+                '<td style="' + tdBase + '"><span class="pending-remark-field" style="display:block;position:relative;min-width:150px"><input type="text" class="form-input pend-detail-editable" style="width:100%;box-sizing:border-box;text-align:left;font-size:12px;padding:3px 30px 3px 4px" value="' + escHtml(savedBomRemarks[b.material_code] || '') + '" data-material="' + matCode + '" data-col="remark"><button type="button" aria-label="查看完整包材下单备注" title="查看全部" onclick="openPendingRemarkViewer(this,\'包材下单备注\')" style="position:absolute;right:4px;bottom:3px;width:21px;height:20px;padding:0;border:0;border-radius:4px;background:#e6f7ff;color:#1677ff;line-height:20px;font-size:14px;cursor:pointer">⛶</button></span></td>' +
                 '<td style="' + tdBase + '"><select class="form-input bom-manuscript pend-detail-editable" style="width:50px;text-align:center;font-size:12px;padding:3px 4px;font-weight:600" data-material="' + matCode + '" data-col="manuscript" onchange="this.style.color=this.value===\'是\' ? \'#f5222d\' : \'#333\'"><option value="">否</option><option value="是">是</option></select></td>' +
             '</tr>';
         });

tests/test_pending_remark_viewer.py

@@ -0,0 +1,26 @@
+"""待下单详情下单备注完整查看功能回归测试。"""
+
+import unittest
+from pathlib import Path
+
+
+APP_JS = (Path(__file__).resolve().parents[1] / 'static/js/app.js').read_text(encoding='utf-8')
+
+
+class PendingRemarkViewerTest(unittest.TestCase):
+    def test_viewer_reads_the_current_input_value(self):
+        self.assertIn('window.openPendingRemarkViewer = function(trigger, title)', APP_JS)
+        self.assertIn("var remark = input ? input.value : '';", APP_JS)
+        self.assertIn("overlay.querySelector('textarea').value = remark;", APP_JS)
+
+    def test_product_remark_has_full_content_button(self):
+        self.assertIn('aria-label="查看完整成品下单备注"', APP_JS)
+        self.assertIn("openPendingRemarkViewer(this,\\'成品下单备注\\')", APP_JS)
+
+    def test_material_remark_has_full_content_button(self):
+        self.assertIn('aria-label="查看完整包材下单备注"', APP_JS)
+        self.assertIn("openPendingRemarkViewer(this,\\'包材下单备注\\')", APP_JS)
+
+
+if __name__ == '__main__':
+    unittest.main()