zlwuandCursor
3d5866aa14
支持合同、报价与入库/分装/送(提)货单在富文本中拖拽调整列宽行高；单据侧加宽物料编号与名称、收窄规格单位、放大 logo、加宽条款区，并弱化调整手柄绿色阴影。 Co-authored-by: Cursor <cursoragent@cursor.com>
36 lines
1.8 KiB
Markdown
36 lines
1.8 KiB
Markdown
# 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 仍为当前合同样式。
|