feat(web-admin): TinyMCE 表格类 Excel 调宽调高,并优化出入库/分装/送货单排版

支持合同、报价与入库/分装/送(提)货单在富文本中拖拽调整列宽行高;单据侧加宽物料编号与名称、收窄规格单位、放大 logo、加宽条款区,并弱化调整手柄绿色阴影。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zlwuandCursor committed 2026-07-25 18:02:22 +08:00
1 parent 2380b01a4f
commit 3d5866aa14
13 files changed
+31815 -30418

No files matched your search

@@ -0,0 +1,35 @@
# TinyMCE 合同表格「类 Excel」排版增强
## 背景
合同打印弹窗使用 `TinyMceEditor` 展示合同 HTML。客户希望表格可像 Excel 一样排版,但合同整体样式、打印/PDF/盖章链路保持现状。
## 目标(本期)
1. 拖拽调整列宽、行高(调整条更明显、更好拖)
2. 合并/拆分单元格;插入/删除行列
3. 单元格水平/垂直对齐、文字换行
4. 表格/单元格属性对话框可用;保存后打印/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 仍为当前合同样式。