lsadmin
/
canvas-editor_fex765
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat:optimize mock

Browse Source
pr675
黄云飞 4 years ago
parent d8682d4ca3
commit ead23ab0a1
2 changed files with 277 additions and 218 deletions
Show Stats Download Patch File Download Diff File

260
src/main.ts
Unescape View File

@ -1,248 +1,42 @@
import { data, options } from './mock'
import './style.css'
import prism from "prismjs"
import Editor, { EditorMode, ElementType, IElement, RowFlex } from './editor'
import Editor, { EditorMode, ElementType, IElement } from './editor'
import { Dialog } from './components/dialog/Dialog'
import { formatPrismToken } from './utils/prism'
window.onload = function () {
const text = `人民医院门诊病历\n主诉：\n发热三天，咳嗽五天。\n现病史：\n患者于三天前无明显诱因，感冒后发现面部水肿，无皮疹，尿量减少，出现乏力，在外治疗无好转，现来我院就诊。\n既往史：\n有糖尿病10年，有高血压2年，有传染性疾病1年。没有报告其他既往疾病。\n流行病史：\n否认14天内接触过确诊患者、疑似患者、无症状感染者及其密切接触者；否认14天内去过以下场所：水产、肉类批发市场，农贸市场，集市，大型超市，夜市；否认14天内与以下场所工作人员密切接触：水产、肉类批发市场，农贸市场，集市，大型超市；否认14天内周围（如家庭、办公室）有2例以上聚集性发病；否认14天内接触过有发热或呼吸道症状的人员；否认14天内自身有发热或呼吸道症状；否认14天内接触过纳入隔离观察的人员及其他可能与新冠肺炎关联的情形；陪同家属{有无选择代码}有以上情况。\n体格检查：\nT：39.5℃，P：80bpm，R：20次/分，BP：120/80mmHg；\n辅助检查：\n2020年6月10日，普放：血细胞比容36.50%（偏低）40～50；单核细胞绝对值0.75*10/L（偏高）参考值：0.1～0.6；\n门诊诊断：\n1.高血压\n2.糖尿病\n3.病毒性感冒\n4.过敏性鼻炎\n5.过敏性鼻息肉\n处置治疗：\n1.超声引导下甲状腺细针穿刺术；\n2.乙型肝炎表面抗体测定；\n3.膜式病变细胞采集术、后颈皮下肤层；\n电子签名：【】\n其他记录：`
// 模拟行居中
const centerText = ['人民医院门诊病历']
const centerIndex: number[] = centerText.map(c => {
const i = text.indexOf(c)
return ~i ? Array(c.length).fill(i).map((_, j) => i + j) : []
}).flat()
// 模拟加粗字
const boldText = ['主诉：', '现病史：', '既往史：', '流行病史：', '体格检查：', '辅助检查：', '门诊诊断：', '处置治疗：', '电子签名：', '其他记录：']
const boldIndex: number[] = boldText.map(b => {
const i = text.indexOf(b)
return ~i ? Array(b.length).fill(i).map((_, j) => i + j) : []
}).flat()
// 模拟颜色字
const colorText = ['传染性疾病']
const colorIndex: number[] = colorText.map(b => {
const i = text.indexOf(b)
return ~i ? Array(b.length).fill(i).map((_, j) => i + j) : []
}).flat()
// 模拟高亮字
const highlightText = ['血细胞比容']
const highlightIndex: number[] = highlightText.map(b => {
const i = text.indexOf(b)
return ~i ? Array(b.length).fill(i).map((_, j) => i + j) : []
}).flat()
// 组合数据
const data: IElement[] = text.split('').map((value, index) => {
if (centerIndex.includes(index)) {
return {
value,
size: 32,
rowFlex: RowFlex.CENTER
}
}
if (boldIndex.includes(index)) {
return {
value,
size: 18,
bold: true
}
}
if (colorIndex.includes(index)) {
return {
value,
color: '#FF0000',
size: 16
}
}
if (highlightIndex.includes(index)) {
return {
value,
highlight: '#F2F27F'
}
}
return {
value,
size: 16
}
})
data.splice(8, 0, {
value: '\n',
type: ElementType.SEPARATOR
})
data.splice(138, 0, {
type: ElementType.HYPERLINK,
value: '',
valueList: [{
value: '新',
size: 16
}, {
value: '冠',
size: 16
}, {
value: '肺',
size: 16
}, {
value: '炎',
size: 16
}],
url: 'https://hufe.club/canvas-editor'
})
data.splice(379, 0, {
value: '∆',
color: '#FF0000',
type: ElementType.SUBSCRIPT
})
data.splice(467, 0, {
value: '9',
type: ElementType.SUPERSCRIPT
})
data.splice(593, 0, {
value: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFkAAAAgCAYAAAB5JtSmAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAQ0SURBVGhD7dhrUSNBFAVgvKACEVjAAhJQgAIUYAABGEAABvgfAdn6UnWou01PppOZhIXNj1P9vo9zH5PK1Waz2V5wWlxIPgMuJJ8Bi0h+fn7eXl9fb29ubrYPDw/dO/8DHh8fu/vB4kym4Orqaofb29vund8OSSbhemewSrugBMnG3vlvw9vb265yn56edmtz/t/f33+5C8MkixQSZSsl9UzLOHUmcwTYAN/Rpl5eXnY+pnIB0Xd3d7s5m3rvDsrkCGszNiQ7r/tr4v39fSc/uipOqRcqufTHBiO78GGdzG5xcLtIFmVde7L9NsvXRo9s84+Pj+79pUAwn5GcD1wIz5r+fYGeJdnjGiF9hwL7iWAcfX19/evtKVHJXrtN8Rf4A3TVczqhrut5i1mSZQgnIriSWtdzP2N+EvIhi3/GWqHWtWXuy2IYbheiKarJZIZknkxyrryc2Utrgal+9S8iScUXIx/3kcxfe/jotcuDezLFlIbARDrzHpytXdKnQr4xyc74Vu9YV5Ih2Q/tT7mDSEYw5ZU4wu3nJx64k/1z9umlUG0hah/JSbC6Jzi5exDJWoTHERoBxu8uf/pT1j3HDkUIJitjbRfRA/iwVzlgy1RCfSF5ili9xj7BUWKs9wJZ3MpditYu+lsc+/PRx53cVF9Pdg/syE9Hb6cS75PkmhUEUFofmTvLGEXKimHueJP9Y3swWQwGLUiA9xEbHKuvgs4pPe1+1myTAKlw81buJ8kigjAXKauXPLQPhEYgJSEYsgdTUR0BmTVgc6C359wcvKGnBrGO8dO5VlD1ZZ519nrBHvrwKVMCas9hgL0YUI2wV98fC4FqCWizzXyqF44A0ZKLHkilgvPs1zbiTuZIdZ414KvqGCKZYx4zple+MSrrJVncAyL02/TOqncJwVMglx5zI4QDZ5WPvBGEcNP+7TlEcqJIAQFGsIdQjmZt7MlYA5yiI3pOQTCQXUm2TuVmXgmewxDJQDgl6deJJoU5y7p9uwZagmu1mCvbNoOOBfkhOf6lRZjzPb8qRjBMMiUhM9GNMZQq5/oRXBP7Mlj/i12A7EMIaJGqDcl8I79+/N1xTvdINQ2TDAQSvI9Md479vdqCHKSFQKAfEmgBqCTDkjaSgOZXQkg2jy1ti0xApnBQJo/0obQRipeQXbN3CmxKGQch5xgki4Efghl/kFqzPD//2DnXIodIRpaoETaXxcmwGNO7N4I2Oyuc6b+xK/tL9IH3kY/E+r1JdST4yM+7VUiuJbuPZHBeHZcNvXtziMMV9mRuvUOX8Vg9IFjRx9dUYM3s2oJyNx9ahFfSWwyRHKHG3nmL2q/mojyFVAWnEdi2Hg7OBXwUCCKr1QEtoe0+/9jI3xqIiuF2QRD0zqcwpfQnge9TVSI4tWrNe79shj98F0xDC0N4bTUVF5LPgAvJJ8dm+wcP2iJuZNdC5QAAAABJRU5ErkJggg==`,
width: 89,
height: 32,
id: 'signature',
type: ElementType.IMAGE
})
data.push({
type: ElementType.TABLE,
value: `\n`,
colgroup: [{
width: 180
}, {
width: 80
}, {
width: 130
}, {
width: 130
}],
trList: [{
height: 40,
tdList: [{
colspan: 1,
rowspan: 2,
value: [
{ value: `1`, size: 16 },
{ value: '.', size: 16 }
]
}, {
colspan: 1,
rowspan: 1,
value: [
{ value: `2`, size: 16 },
{ value: '.', size: 16 }
]
}, {
colspan: 2,
rowspan: 1,
value: [
{ value: `3`, size: 16 },
{ value: '.', size: 16 }
]
}]
}, {
height: 40,
tdList: [{
colspan: 1,
rowspan: 1,
value: [
{ value: `4`, size: 16 },
{ value: '.', size: 16 }
]
}, {
colspan: 1,
rowspan: 1,
value: [
{ value: `5`, size: 16 },
{ value: '.', size: 16 }
]
}, {
colspan: 1,
rowspan: 1,
value: [
{ value: `6`, size: 16 },
{ value: '.', size: 16 }
]
}]
}, {
height: 40,
tdList: [{
colspan: 1,
rowspan: 1,
value: [
{ value: `7`, size: 16 },
{ value: '.', size: 16 }
]
}, {
colspan: 1,
rowspan: 1,
value: [
{ value: `8`, size: 16 },
{ value: '.', size: 16 }
]
}, {
colspan: 1,
rowspan: 1,
value: [
{ value: `9`, size: 16 },
{ value: '.', size: 16 }
]
}, {
colspan: 1,
rowspan: 1,
value: [
{ value: `1`, size: 16 },
{ value: `0`, size: 16 },
{ value: '.', size: 16 }
]
}]
}]
})
data.push(...[{
value: 'E',
size: 16
}, {
value: 'O',
size: 16
}, {
value: 'F',
size: 16
}])
// 初始化编辑器
// 1. 初始化编辑器
const container = document.querySelector<HTMLDivElement>('.editor')!
const instance = new Editor(container, <IElement[]>data, {
margins: [100, 120, 100, 120],
header: {
data: '人民医院门诊'
},
watermark: {
data: 'CANVAS-EDITOR',
size: 120
}
})
const instance = new Editor(container, <IElement[]>data, options)
console.log('实例: ', instance)
// 撤销、重做、格式刷、清除格式
// 2. | 撤销 | 重做 | 格式刷 | 清除格式 |
const undoDom = document.querySelector<HTMLDivElement>('.menu-item__undo')!
undoDom.onclick = function () {
console.log('undo')
instance.command.executeUndo()
}
const redoDom = document.querySelector<HTMLDivElement>('.menu-item__redo')!
redoDom.onclick = function () {
console.log('redo')
instance.command.executeRedo()
}
const painterDom = document.querySelector<HTMLDivElement>('.menu-item__painter')!
painterDom.onclick = function () {
console.log('painter')
instance.command.executePainter()
}
document.querySelector<HTMLDivElement>('.menu-item__format')!.onclick = function () {
console.log('format')
instance.command.executeFormat()
}
// 字体、字体变大、字体变小、加粗、斜体、下划线、删除线、字体颜色、背景色
// 3. | 字体 | 字体变大 | 字体变小 | 加粗 | 斜体 | 下划线 | 删除线 | 上标 | 下标 | 字体颜色 | 背景色 |
const fontDom = document.querySelector<HTMLDivElement>('.menu-item__font')!
const fontSelectDom = fontDom.querySelector<HTMLDivElement>('.select')!
const fontOptionDom = fontDom.querySelector<HTMLDivElement>('.options')!
@ -254,44 +48,53 @@ window.onload = function () {
const li = evt.target as HTMLLIElement
instance.command.executeFont(li.dataset.family!)
}
document.querySelector<HTMLDivElement>('.menu-item__size-add')!.onclick = function () {
console.log('size-add')
instance.command.executeSizeAdd()
}
document.querySelector<HTMLDivElement>('.menu-item__size-minus')!.onclick = function () {
console.log('size-minus')
instance.command.executeSizeMinus()
}
const boldDom = document.querySelector<HTMLDivElement>('.menu-item__bold')!
boldDom.onclick = function () {
console.log('bold')
instance.command.executeBold()
}
const italicDom = document.querySelector<HTMLDivElement>('.menu-item__italic')!
italicDom.onclick = function () {
console.log('italic')
instance.command.executeItalic()
}
const underlineDom = document.querySelector<HTMLDivElement>('.menu-item__underline')!
underlineDom.onclick = function () {
console.log('underline')
instance.command.executeUnderline()
}
const strikeoutDom = document.querySelector<HTMLDivElement>('.menu-item__strikeout')!
strikeoutDom.onclick = function () {
console.log('strikeout')
instance.command.executeStrikeout()
}
const superscriptDom = document.querySelector<HTMLDivElement>('.menu-item__superscript')!
superscriptDom.onclick = function () {
console.log('superscript')
instance.command.executeSuperscript()
}
const subscriptDom = document.querySelector<HTMLDivElement>('.menu-item__subscript')!
subscriptDom.onclick = function () {
console.log('subscript')
instance.command.executeSubscript()
}
const colorControlDom = document.querySelector<HTMLInputElement>('#color')!
colorControlDom.onchange = function () {
instance.command.executeColor(colorControlDom!.value)
@ -302,6 +105,7 @@ window.onload = function () {
console.log('color')
colorControlDom.click()
}
const highlightControlDom = document.querySelector<HTMLInputElement>('#highlight')!
highlightControlDom.onchange = function () {
instance.command.executeHighlight(highlightControlDom.value)
@ -312,22 +116,25 @@ window.onload = function () {
console.log('highlight')
highlightControlDom?.click()
}
// 行布局
const leftDom = document.querySelector<HTMLDivElement>('.menu-item__left')!
leftDom.onclick = function () {
console.log('left')
instance.command.executeLeft()
}
const centerDom = document.querySelector<HTMLDivElement>('.menu-item__center')!
centerDom.onclick = function () {
console.log('center')
instance.command.executeCenter()
}
const rightDom = document.querySelector<HTMLDivElement>('.menu-item__right')!
rightDom.onclick = function () {
console.log('right')
instance.command.executeRight()
}
const rowMarginDom = document.querySelector<HTMLDivElement>('.menu-item__row-margin')!
const rowOptionDom = rowMarginDom.querySelector<HTMLDivElement>('.options')!
rowMarginDom.onclick = function () {
@ -338,7 +145,8 @@ window.onload = function () {
const li = evt.target as HTMLLIElement
instance.command.executeRowMargin(Number(li.dataset.rowmargin!))
}
// 表格插入、图片上传、搜索、打印
// 4. | 表格 | 图片 | 超链接 | 分割线 | 水印 | 代码块 | 分隔符 |
const tableDom = document.querySelector<HTMLDivElement>('.menu-item__table')!
const tablePanelContainer = document.querySelector<HTMLDivElement>('.menu-item__table__collapse')!
const tableClose = document.querySelector<HTMLDivElement>('.table-close')!
@ -413,6 +221,7 @@ window.onload = function () {
instance.command.executeInsertTable(rowIndex, colIndex)
recoveryTable()
}
const imageDom = document.querySelector<HTMLDivElement>('.menu-item__image')!
const imageFileDom = document.querySelector<HTMLInputElement>('#image')!
imageDom.onclick = function () {
@ -437,6 +246,7 @@ window.onload = function () {
}
}
}
const hyperlinkDom = document.querySelector<HTMLDivElement>('.menu-item__hyperlink')!
hyperlinkDom.onclick = function () {
console.log('hyperlink')
@ -470,6 +280,7 @@ window.onload = function () {
}
})
}
const separatorDom = document.querySelector<HTMLDivElement>('.menu-item__separator')!
const separatorOptionDom = separatorDom.querySelector<HTMLDivElement>('.options')!
separatorDom.onclick = function () {
@ -488,11 +299,13 @@ window.onload = function () {
}
instance.command.executeSeparator(payload)
}
const pageBreakDom = document.querySelector<HTMLDivElement>('.menu-item__page-break')!
pageBreakDom.onclick = function () {
console.log('pageBreak')
instance.command.executePageBreak()
}
const watermarkDom = document.querySelector<HTMLDivElement>('.menu-item__watermark')!
const watermarkOptionDom = watermarkDom.querySelector<HTMLDivElement>('.options')!
watermarkDom.onclick = function () {
@ -587,6 +400,7 @@ window.onload = function () {
})
}
// 5. | 搜索 | 打印 |
const searchCollapseDom = document.querySelector<HTMLDivElement>('.menu-item__search__collapse')
const searchInputDom = document.querySelector<HTMLInputElement>('.menu-item__search__collapse__search input')
document.querySelector<HTMLDivElement>('.menu-item__search')!.onclick = function () {
@ -606,23 +420,29 @@ window.onload = function () {
instance.command.executeSearch(searchInputDom?.value || null)
}
}
document.querySelector<HTMLDivElement>('.menu-item__print')!.onclick = function () {
console.log('print')
instance.command.executePrint()
}
// 6. 纸张缩放
document.querySelector<HTMLDivElement>('.page-scale-percentage')!.onclick = function () {
console.log('page-scale-recovery')
instance.command.executePageScaleRecovery()
}
document.querySelector<HTMLDivElement>('.page-scale-minus')!.onclick = function () {
console.log('page-scale-minus')
instance.command.executePageScaleMinus()
}
document.querySelector<HTMLDivElement>('.page-scale-add')!.onclick = function () {
console.log('page-scale-add')
instance.command.executePageScaleAdd()
}
// 7. 编辑器使用模式
let modeIndex = 0
const modeList = [{
mode: EditorMode.EDIT,
@ -653,7 +473,7 @@ window.onload = function () {
})
}
// 内部事件监听
// 8. 内部事件监听
instance.listener.rangeStyleChange = function (payload) {
// 控件类型
payload.type === ElementType.SUBSCRIPT ? subscriptDom.classList.add('active') : subscriptDom.classList.remove('active')
@ -667,6 +487,7 @@ window.onload = function () {
curSeparatorDom.classList.add('active')
}
}
// 富文本
fontOptionDom.querySelectorAll<HTMLLIElement>('li').forEach(li => li.classList.remove('active'))
const curFontDom = fontOptionDom.querySelector<HTMLLIElement>(`[data-family=${payload.font}]`)
@ -696,6 +517,7 @@ window.onload = function () {
highlightControlDom.value = '#ffff00'
highlightSpanDom.style.backgroundColor = '#ffff00'
}
// 行布局
leftDom.classList.remove('active')
centerDom.classList.remove('active')
@ -707,10 +529,12 @@ window.onload = function () {
} else {
leftDom.classList.add('active')
}
// 行间距
rowOptionDom.querySelectorAll<HTMLLIElement>('li').forEach(li => li.classList.remove('active'))
const curRowMarginDom = rowOptionDom.querySelector<HTMLLIElement>(`[data-rowmargin='${payload.rowMargin}']`)!
curRowMarginDom.classList.add('active')
// 功能
payload.undo ? undoDom.classList.remove('no-allow') : undoDom.classList.add('no-allow')
payload.redo ? redoDom.classList.remove('no-allow') : redoDom.classList.add('no-allow')

235
src/mock.ts
Unescape View File

@ -0,0 +1,235 @@
import { ElementType, IEditorOption, IElement, RowFlex } from "./editor"
const text = `人民医院门诊病历\n主诉：\n发热三天，咳嗽五天。\n现病史：\n患者于三天前无明显诱因，感冒后发现面部水肿，无皮疹，尿量减少，出现乏力，在外治疗无好转，现来我院就诊。\n既往史：\n有糖尿病10年，有高血压2年，有传染性疾病1年。没有报告其他既往疾病。\n流行病史：\n否认14天内接触过确诊患者、疑似患者、无症状感染者及其密切接触者；否认14天内去过以下场所：水产、肉类批发市场，农贸市场，集市，大型超市，夜市；否认14天内与以下场所工作人员密切接触：水产、肉类批发市场，农贸市场，集市，大型超市；否认14天内周围（如家庭、办公室）有2例以上聚集性发病；否认14天内接触过有发热或呼吸道症状的人员；否认14天内自身有发热或呼吸道症状；否认14天内接触过纳入隔离观察的人员及其他可能与新冠肺炎关联的情形；陪同家属{有无选择代码}有以上情况。\n体格检查：\nT：39.5℃，P：80bpm，R：20次/分，BP：120/80mmHg；\n辅助检查：\n2020年6月10日，普放：血细胞比容36.50%（偏低）40～50；单核细胞绝对值0.75*10/L（偏高）参考值：0.1～0.6；\n门诊诊断：\n1.高血压\n2.糖尿病\n3.病毒性感冒\n4.过敏性鼻炎\n5.过敏性鼻息肉\n处置治疗：\n1.超声引导下甲状腺细针穿刺术；\n2.乙型肝炎表面抗体测定；\n3.膜式病变细胞采集术、后颈皮下肤层；\n电子签名：【】\n其他记录：`
// 模拟行居中
const centerText = ['人民医院门诊病历']
const centerIndex: number[] = centerText.map(c => {
const i = text.indexOf(c)
return ~i ? Array(c.length).fill(i).map((_, j) => i + j) : []
}).flat()
// 模拟加粗字
const boldText = ['主诉：', '现病史：', '既往史：', '流行病史：', '体格检查：', '辅助检查：', '门诊诊断：', '处置治疗：', '电子签名：', '其他记录：']
const boldIndex: number[] = boldText.map(b => {
const i = text.indexOf(b)
return ~i ? Array(b.length).fill(i).map((_, j) => i + j) : []
}).flat()
// 模拟颜色字
const colorText = ['传染性疾病']
const colorIndex: number[] = colorText.map(b => {
const i = text.indexOf(b)
return ~i ? Array(b.length).fill(i).map((_, j) => i + j) : []
}).flat()
// 模拟高亮字
const highlightText = ['血细胞比容']
const highlightIndex: number[] = highlightText.map(b => {
const i = text.indexOf(b)
return ~i ? Array(b.length).fill(i).map((_, j) => i + j) : []
}).flat()
// 组合纯文本数据
const elementList: IElement[] = text.split('').map((value, index) => {
if (centerIndex.includes(index)) {
return {
value,
size: 32,
rowFlex: RowFlex.CENTER
}
}
if (boldIndex.includes(index)) {
return {
value,
size: 18,
bold: true
}
}
if (colorIndex.includes(index)) {
return {
value,
color: '#FF0000',
size: 16
}
}
if (highlightIndex.includes(index)) {
return {
value,
highlight: '#F2F27F'
}
}
return {
value,
size: 16
}
})
// 模拟分隔符
elementList.splice(8, 0, {
value: '\n',
type: ElementType.SEPARATOR
})
// 模拟超链接
elementList.splice(138, 0, {
type: ElementType.HYPERLINK,
value: '',
valueList: [{
value: '新',
size: 16
}, {
value: '冠',
size: 16
}, {
value: '肺',
size: 16
}, {
value: '炎',
size: 16
}],
url: 'https://hufe.club/canvas-editor'
})
// 模拟下标
elementList.splice(379, 0, {
value: '∆',
color: '#FF0000',
type: ElementType.SUBSCRIPT
})
// 模拟上标
elementList.splice(467, 0, {
value: '9',
type: ElementType.SUPERSCRIPT
})
// 模拟图片
elementList.splice(593, 0, {
value: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFkAAAAgCAYAAAB5JtSmAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAQ0SURBVGhD7dhrUSNBFAVgvKACEVjAAhJQgAIUYAABGEAABvgfAdn6UnWou01PppOZhIXNj1P9vo9zH5PK1Waz2V5wWlxIPgMuJJ8Bi0h+fn7eXl9fb29ubrYPDw/dO/8DHh8fu/vB4kym4Orqaofb29vund8OSSbhemewSrugBMnG3vlvw9vb265yn56edmtz/t/f33+5C8MkixQSZSsl9UzLOHUmcwTYAN/Rpl5eXnY+pnIB0Xd3d7s5m3rvDsrkCGszNiQ7r/tr4v39fSc/uipOqRcqufTHBiO78GGdzG5xcLtIFmVde7L9NsvXRo9s84+Pj+79pUAwn5GcD1wIz5r+fYGeJdnjGiF9hwL7iWAcfX19/evtKVHJXrtN8Rf4A3TVczqhrut5i1mSZQgnIriSWtdzP2N+EvIhi3/GWqHWtWXuy2IYbheiKarJZIZknkxyrryc2Utrgal+9S8iScUXIx/3kcxfe/jotcuDezLFlIbARDrzHpytXdKnQr4xyc74Vu9YV5Ih2Q/tT7mDSEYw5ZU4wu3nJx64k/1z9umlUG0hah/JSbC6Jzi5exDJWoTHERoBxu8uf/pT1j3HDkUIJitjbRfRA/iwVzlgy1RCfSF5ili9xj7BUWKs9wJZ3MpditYu+lsc+/PRx53cVF9Pdg/syE9Hb6cS75PkmhUEUFofmTvLGEXKimHueJP9Y3swWQwGLUiA9xEbHKuvgs4pPe1+1myTAKlw81buJ8kigjAXKauXPLQPhEYgJSEYsgdTUR0BmTVgc6C359wcvKGnBrGO8dO5VlD1ZZ519nrBHvrwKVMCas9hgL0YUI2wV98fC4FqCWizzXyqF44A0ZKLHkilgvPs1zbiTuZIdZ414KvqGCKZYx4zple+MSrrJVncAyL02/TOqncJwVMglx5zI4QDZ5WPvBGEcNP+7TlEcqJIAQFGsIdQjmZt7MlYA5yiI3pOQTCQXUm2TuVmXgmewxDJQDgl6deJJoU5y7p9uwZagmu1mCvbNoOOBfkhOf6lRZjzPb8qRjBMMiUhM9GNMZQq5/oRXBP7Mlj/i12A7EMIaJGqDcl8I79+/N1xTvdINQ2TDAQSvI9Md479vdqCHKSFQKAfEmgBqCTDkjaSgOZXQkg2jy1ti0xApnBQJo/0obQRipeQXbN3CmxKGQch5xgki4Efghl/kFqzPD//2DnXIodIRpaoETaXxcmwGNO7N4I2Oyuc6b+xK/tL9IH3kY/E+r1JdST4yM+7VUiuJbuPZHBeHZcNvXtziMMV9mRuvUOX8Vg9IFjRx9dUYM3s2oJyNx9ahFfSWwyRHKHG3nmL2q/mojyFVAWnEdi2Hg7OBXwUCCKr1QEtoe0+/9jI3xqIiuF2QRD0zqcwpfQnge9TVSI4tWrNe79shj98F0xDC0N4bTUVF5LPgAvJJ8dm+wcP2iJuZNdC5QAAAABJRU5ErkJggg==`,
width: 89,
height: 32,
id: 'signature',
type: ElementType.IMAGE
})
// 模拟表格
elementList.push({
type: ElementType.TABLE,
value: `\n`,
colgroup: [{
width: 180
}, {
width: 80
}, {
width: 130
}, {
width: 130
}],
trList: [{
height: 40,
tdList: [{
colspan: 1,
rowspan: 2,
value: [
{ value: `1`, size: 16 },
{ value: '.', size: 16 }
]
}, {
colspan: 1,
rowspan: 1,
value: [
{ value: `2`, size: 16 },
{ value: '.', size: 16 }
]
}, {
colspan: 2,
rowspan: 1,
value: [
{ value: `3`, size: 16 },
{ value: '.', size: 16 }
]
}]
}, {
height: 40,
tdList: [{
colspan: 1,
rowspan: 1,
value: [
{ value: `4`, size: 16 },
{ value: '.', size: 16 }
]
}, {
colspan: 1,
rowspan: 1,
value: [
{ value: `5`, size: 16 },
{ value: '.', size: 16 }
]
}, {
colspan: 1,
rowspan: 1,
value: [
{ value: `6`, size: 16 },
{ value: '.', size: 16 }
]
}]
}, {
height: 40,
tdList: [{
colspan: 1,
rowspan: 1,
value: [
{ value: `7`, size: 16 },
{ value: '.', size: 16 }
]
}, {
colspan: 1,
rowspan: 1,
value: [
{ value: `8`, size: 16 },
{ value: '.', size: 16 }
]
}, {
colspan: 1,
rowspan: 1,
value: [
{ value: `9`, size: 16 },
{ value: '.', size: 16 }
]
}, {
colspan: 1,
rowspan: 1,
value: [
{ value: `1`, size: 16 },
{ value: `0`, size: 16 },
{ value: '.', size: 16 }
]
}]
}]
})
// 模拟结尾文本
elementList.push(...[{
value: 'E',
size: 16
}, {
value: 'O',
size: 16
}, {
value: 'F',
size: 16
}])
export const data: IElement[] = elementList
export const options: IEditorOption = {
margins: [100, 120, 100, 120],
header: {
data: '人民医院门诊'
},
watermark: {
data: 'CANVAS-EDITOR',
size: 120
}
}
Write Preview
Loading…
Cancel
Save