hwbm-ui/src/views/oa/base/printTemplate/template.vue

<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>