修改模版和信息渲染
suixy
2 months ago
parent
079a2b14a6
commit
8f4a94c094
@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="width: 100%; display: inline-block; vertical-align: top">
|
||||
<umo-editor v-bind="options" ref="editorRef" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { UmoEditor } from '@umoteam/editor';
|
||||
import { getPrintTemplate, updatePrintTemplate } from '@/api/oa/base/printTemplate';
|
||||
import router from '@/router/index.js';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const template = ref({});
|
||||
|
||||
const editorRef = ref();
|
||||
|
||||
const templateData = {
|
||||
data0: '合计-1',
|
||||
data1: '合同总价-1',
|
||||
data2: '大写数字-1',
|
||||
'中文字段': 'zhongwenziduan',
|
||||
table1: [
|
||||
{
|
||||
field1: '1',
|
||||
field2: '2',
|
||||
field3: '3',
|
||||
field4: '4',
|
||||
field5: '5',
|
||||
field6: '6',
|
||||
field7: '7'
|
||||
},
|
||||
{
|
||||
field1: '11',
|
||||
field2: '22',
|
||||
field3: '33',
|
||||
field4: '44',
|
||||
field5: '55',
|
||||
field6: '66',
|
||||
field7: '77'
|
||||
},
|
||||
{
|
||||
field1: '111',
|
||||
field2: '222',
|
||||
field3: '333',
|
||||
field4: '444',
|
||||
field5: '555',
|
||||
field6: '666',
|
||||
field7: '777'
|
||||
}
|
||||
]
|
||||
};
|
||||
const options = ref({
|
||||
document: {
|
||||
title: '',
|
||||
content: {
|
||||
type: 'doc',
|
||||
content: []
|
||||
},
|
||||
placeholder: {
|
||||
en_US: 'Please enter the document content...',
|
||||
zh_CN: '请输入文档内容...'
|
||||
},
|
||||
enableSpellcheck: true,
|
||||
enableMarkdown: false,
|
||||
enableBubbleMenu: true,
|
||||
enableBlockMenu: true,
|
||||
readOnly: false,
|
||||
autofocus: true,
|
||||
characterLimit: 0,
|
||||
typographyRules: {
|
||||
emDash: false
|
||||
},
|
||||
editorProps: {},
|
||||
parseOptions: {
|
||||
preserveWhitespace: 'full'
|
||||
},
|
||||
autoSave: {
|
||||
enabled: true,
|
||||
interval: 300000
|
||||
}
|
||||
},
|
||||
page: {
|
||||
showBreakMarks: false
|
||||
},
|
||||
onSave: async (e) => {
|
||||
const editor = editorRef.value;
|
||||
console.log(e.json);
|
||||
template.value.templateData = JSON.stringify(e.json);
|
||||
const res = await updatePrintTemplate(template.value);
|
||||
ElMessage.success(res.msg);
|
||||
if (res.code === 200) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
});
|
||||
const renderTemplate = (str, data) => {
|
||||
return str.replace(/&\{(.*?)\}/g, (_, path) => {
|
||||
// console.log(path.split('.').reduce((o, k) => o?.[k], data) ?? '');
|
||||
return path.split('.').reduce((o, k) => o?.[k], data) ?? '';
|
||||
});
|
||||
};
|
||||
const fillData = (e) => {
|
||||
if (Array.isArray(e.content)) {
|
||||
e.content.map((item) => {
|
||||
return fillData(item);
|
||||
});
|
||||
} else {
|
||||
e.text = renderTemplate(e.text || '', templateData);
|
||||
}
|
||||
return e;
|
||||
};
|
||||
onMounted(async () => {
|
||||
getPrintTemplate(route.query.templateId).then((e) => {
|
||||
template.value = e.data;
|
||||
const editor = editorRef.value;
|
||||
let docData = JSON.parse(e.data.templateData || '{}');
|
||||
let data = fillData(docData);
|
||||
console.log(data);
|
||||
// editor.setContent(JSON.parse(e.data.templateData || '{}'));
|
||||
editor.setContent(data);
|
||||
});
|
||||
});
|
||||
let obj1 = {};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fieldList {
|
||||
width: 100%;
|
||||
height: calc(100vh - 30px);
|
||||
overflow: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fieldListItem {
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.umo-footer {
|
||||
position: sticky;
|
||||
bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue