feat(web-admin): TinyMCE 表格类 Excel 调宽调高,并优化出入库/分装/送货单排版
支持合同、报价与入库/分装/送(提)货单在富文本中拖拽调整列宽行高;单据侧加宽物料编号与名称、收窄规格单位、放大 logo、加宽条款区,并弱化调整手柄绿色阴影。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
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 仍为当前合同样式。
|
||||
Reference in new issue
Block a user