From 8f4a94c094455aec013f11efe4a2836907634fbf Mon Sep 17 00:00:00 2001
From: suixy <2277317060@qq.com>
Date: Mon, 20 Oct 2025 17:59:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A8=A1=E7=89=88=E5=92=8C?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/contract/index.vue                 |  68 ++++++++-
 src/views/oa/base/printTemplate/index.vue    |  57 ++++---
 src/views/oa/base/printTemplate/template.vue | 151 +++++++++++++++++++
 3 files changed, 253 insertions(+), 23 deletions(-)
 create mode 100644 src/views/oa/base/printTemplate/template.vue

diff --git a/src/views/contract/index.vue b/src/views/contract/index.vue
index 986ad0a..88c3184 100644
--- a/src/views/contract/index.vue
+++ b/src/views/contract/index.vue
@@ -1,7 +1,17 @@
 <template>
   <div>
     <!--    {{ options }}-->
-    <umo-editor v-bind="options" ref="editorRef" />
+    <!--    <div style="width: 19vw; display: inline-block">-->
+    <!--      <span style="font-size: 14px"> 点击插入字段(光标所在位置) </span>-->
+    <!--      <div class="fieldList">-->
+    <!--        <div class="fieldListItem" v-for="i in fieldList" @click="insertText(i)">-->
+    <!--          {{ i.name }}-->
+    <!--        </div>-->
+    <!--      </div>-->
+    <!--    </div>-->
+    <div style="width: 100vw; display: inline-block; vertical-align: top">
+      <umo-editor v-bind="options" ref="editorRef" />
+    </div>
   </div>
 </template>
 
@@ -9,6 +19,16 @@
 import { AlignmentType, Document, Footer, Packer, Paragraph, TextRun } from 'docx';
 import { UmoEditor } from '@umoteam/editor';
 
+const fieldList = ref([
+  {
+    name: '字段1',
+    value: '字段1'
+  },
+  {
+    name: '字段2',
+    value: '字段2'
+  }
+]);
 const editorRef = ref();
 const docData = {
   '甲方': '青岛xxx科技有限公司',
@@ -364,6 +384,50 @@ const download = async (doc) => {
   document.body.removeChild(link);
 };
 // download(doc)
+const insertText = (e) => {
+  const editor = editorRef.value;
+  console.log(editor);
+  console.log(editor.getSelectionNode());
+  console.log(editor.getSelectionText());
+  // const selection = editor.getSelection();
+  // editor.insertContent({
+  //   type: 'text',
+  //   text: e.value
+  // });
+  // if (selection) {
+  //   editor.focus();
+  //   editor.setSelection(selection.toEnd ? selection.toEnd() : selection);
+  // }
+  editor
+    .chain()
+    .focus()
+    .insertContent({
+      type: 'text',
+      text: e.value
+    })
+    .run();
+};
 </script>
 
-<style scoped></style>
+<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>
\ No newline at end of file
diff --git a/src/views/oa/base/printTemplate/index.vue b/src/views/oa/base/printTemplate/index.vue
index b9fde5b..7a154ac 100644
--- a/src/views/oa/base/printTemplate/index.vue
+++ b/src/views/oa/base/printTemplate/index.vue
@@ -17,11 +17,11 @@
                 <el-option v-for="dict in template_status" :key="dict.value" :label="dict.label" :value="dict.value" />
               </el-select>
             </el-form-item>
-<!--            <el-form-item label="激活标识" prop="activeFlag">-->
-<!--              <el-select v-model="queryParams.activeFlag" placeholder="请选择激活标识" clearable>-->
-<!--                <el-option v-for="dict in active_flag" :key="dict.value" :label="dict.label" :value="dict.value" />-->
-<!--              </el-select>-->
-<!--            </el-form-item>-->
+            <!--            <el-form-item label="激活标识" prop="activeFlag">-->
+            <!--              <el-select v-model="queryParams.activeFlag" placeholder="请选择激活标识" clearable>-->
+            <!--                <el-option v-for="dict in active_flag" :key="dict.value" :label="dict.label" :value="dict.value" />-->
+            <!--              </el-select>-->
+            <!--            </el-form-item>-->
             <el-form-item>
               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
@@ -95,6 +95,15 @@
             <el-tooltip content="修改" placement="top">
               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['oa/base:printTemplate:edit']"></el-button>
             </el-tooltip>
+            <el-tooltip content="编辑" placement="top">
+              <el-button
+                link
+                type="primary"
+                icon="EditPen"
+                @click="updateTemplate(scope.row)"
+                v-hasPermi="['oa/base:printTemplate:edit']"
+              ></el-button>
+            </el-tooltip>
             <el-tooltip content="删除" placement="top">
               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['oa/base:printTemplate:remove']"></el-button>
             </el-tooltip>
@@ -118,25 +127,25 @@
         <el-form-item label="模板版本" prop="version">
           <el-input v-model="form.version" placeholder="请输入模板版本" />
         </el-form-item>
-<!--        <el-form-item label="模板状态" prop="templateStatus">-->
-<!--          <el-radio-group v-model="form.templateStatus">-->
-<!--            <el-radio v-for="dict in template_status" :key="dict.value" :value="dict.value">{{ dict.label }} </el-radio>-->
-<!--          </el-radio-group>-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="流程状态" prop="flowStatus">-->
-<!--          <el-input v-model="form.flowStatus" placeholder="请输入流程状态" />-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="模板数据" prop="templateData">-->
-<!--          <el-input v-model="form.templateData" type="textarea" placeholder="请输入内容" />-->
-<!--        </el-form-item>-->
+        <!--        <el-form-item label="模板状态" prop="templateStatus">-->
+        <!--          <el-radio-group v-model="form.templateStatus">-->
+        <!--            <el-radio v-for="dict in template_status" :key="dict.value" :value="dict.value">{{ dict.label }} </el-radio>-->
+        <!--          </el-radio-group>-->
+        <!--        </el-form-item>-->
+        <!--        <el-form-item label="流程状态" prop="flowStatus">-->
+        <!--          <el-input v-model="form.flowStatus" placeholder="请输入流程状态" />-->
+        <!--        </el-form-item>-->
+        <!--        <el-form-item label="模板数据" prop="templateData">-->
+        <!--          <el-input v-model="form.templateData" type="textarea" placeholder="请输入内容" />-->
+        <!--        </el-form-item>-->
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注" />
         </el-form-item>
-<!--        <el-form-item label="激活标识" prop="activeFlag">-->
-<!--          <el-radio-group v-model="form.activeFlag">-->
-<!--            <el-radio v-for="dict in active_flag" :key="dict.value" :value="dict.value">{{ dict.label }} </el-radio>-->
-<!--          </el-radio-group>-->
-<!--        </el-form-item>-->
+        <!--        <el-form-item label="激活标识" prop="activeFlag">-->
+        <!--          <el-radio-group v-model="form.activeFlag">-->
+        <!--            <el-radio v-for="dict in active_flag" :key="dict.value" :value="dict.value">{{ dict.label }} </el-radio>-->
+        <!--          </el-radio-group>-->
+        <!--        </el-form-item>-->
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -151,6 +160,7 @@
 <script setup name="PrintTemplate" lang="ts">
 import { listPrintTemplate, getPrintTemplate, delPrintTemplate, addPrintTemplate, updatePrintTemplate } from '@/api/oa/base/printTemplate';
 import { PrintTemplateVO, PrintTemplateQuery, PrintTemplateForm } from '@/api/oa/base/printTemplate/types';
+import router from '@/router';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { template_type, active_flag, template_status } = toRefs<any>(proxy?.useDict('template_type', 'active_flag', 'template_status'));
@@ -282,6 +292,11 @@ const handleUpdate = async (row?: PrintTemplateVO) => {
   dialog.title = '修改打印模板信息';
 };
 
+const updateTemplate = (row) => {
+  const _templateId = row?.templateId || ids.value[0];
+  router.push({ path: '/template/templateUpdate', query: { templateId: _templateId } });
+};
+
 /** 提交按钮 */
 const submitForm = () => {
   printTemplateFormRef.value?.validate(async (valid: boolean) => {
diff --git a/src/views/oa/base/printTemplate/template.vue b/src/views/oa/base/printTemplate/template.vue
new file mode 100644
index 0000000..8b16c73
--- /dev/null
+++ b/src/views/oa/base/printTemplate/template.vue
@@ -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>