zlwuandCursor
3d5866aa14
支持合同、报价与入库/分装/送(提)货单在富文本中拖拽调整列宽行高；单据侧加宽物料编号与名称、收窄规格单位、放大 logo、加宽条款区，并弱化调整手柄绿色阴影。 Co-authored-by: Cursor <cursoragent@cursor.com>
1.8 KiB
1.8 KiB
TinyMCE 合同表格「类 Excel」排版增强
背景
合同打印弹窗使用 TinyMceEditor 展示合同 HTML。客户希望表格可像 Excel 一样排版，但合同整体样式、打印/PDF/盖章链路保持现状。
目标（本期）
- 拖拽调整列宽、行高（调整条更明显、更好拖）
- 合并/拆分单元格；插入/删除行列
- 单元格水平/垂直对齐、文字换行
- 表格/单元格属性对话框可用；保存后打印/PDF 仍为当前合同模样
不做：边框样式专题、公式、冻结窗格、多 sheet、替换编辑器组件。
方案
基于现有 TinyMCE（不换组件），增强 web-admin/src/components/TinyMceEditor/index.vue：
- 新增
utils/tinymce-table-excel-resize.ts：类 Excel 边线拖拽（单元格右边线调列宽、底边线调行高），不依赖 snooker 调整条几何 - 打开/写入内容时将百分比列宽转为像素，避免「拖了没感觉」
object_resizing不再包含table（避免与自定义拖拽冲突）；表格工具栏仍保留合并/拆分/属性/对齐/换行- 弱化会抢占对齐的全局表格 CSS
已知问题与修复（2026-07-25）
绿色 snooker 调整条可见但无法拖动：对条设置 width/height/margin !important 破坏了 TinyMCE 拖拽几何；合同表百分比列宽导致调整无感知。已改为单元格边线拖拽 + 像素化列宽。
影响面
共用 TinyMceEditor 的合同、报价、调价函、单据打印弹窗一并受益。打印/PDF 仍消费编辑器 HTML，不改生成链路。
验收
编辑模式下：鼠标靠近单元格右边线出现列宽光标并可拖；靠近底边线出现行高光标并可拖；松开后宽高保持，保存再打开仍在；可合并拆分与插删行列；可设对齐与换行；打印/PDF 仍为当前合同样式。