修改模版

src/views/oa/base/printTemplate/template.vue

@@ -1,6 +1,16 @@
 <template>
   <div>
-    <div style="width: 100%; display: inline-block; vertical-align: top">
+    <div style="width: 250px; height: 100%; display: inline-block; vertical-align: top; border-right: 1px solid #999">
+      <div class="title">预定义字段(点击插入光标位置)</div>
+      <div class="fieldList">
+        <div class="fieldItem" v-for="i in fieldList">
+          <div class="btn" @click="insertText(i)">
+            {{ i.varLabel }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div style="width: calc(100% - 251px); display: inline-block; vertical-align: top; height: calc(100vh - 50px - 34px)">
       <umo-editor v-bind="options" ref="editorRef" />
     </div>
   </div>
@@ -11,6 +21,7 @@ import { UmoEditor } from '@umoteam/editor';
 import { getPrintTemplate, updatePrintTemplate } from '@/api/oa/base/printTemplate';
 import router from '@/router/index.js';
 import { useRoute } from 'vue-router';
+import { getBaseTemplateVariableList } from '@/api/oa/base/templateVariable/index.js';
 
 const route = useRoute();
 
@@ -18,6 +29,17 @@ const template = ref({});
 
 const editorRef = ref();
 
+const fieldList = ref([
+  {
+    name: '字段1',
+    value: '${ziduan1}'
+  },
+  {
+    name: '字段2',
+    value: '${ziduan2}'
+  }
+]);
+
 const templateData = {
   data0: '合计-1',
   data1: '合同总价-1',
@@ -103,7 +125,6 @@ const renderTemplate = (str, data) => {
   });
 };
 const rowRenderTemplate = (str, data) => {
-  console.log(str, data);
   return str.replace(/\^\{(.*?)\}/g, (_, path) => {
     return path.split('.').reduce((o, k) => o?.[k], data) ?? '';
   });
@@ -183,6 +204,14 @@ const fillData = (e) => {
   }
   return e;
 };
+
+const insertText = (e) => {
+  const editor = editorRef.value;
+  editor.insertContent({
+    type: 'text',
+    text: e.varName
+  });
+};
 onMounted(async () => {
   getPrintTemplate(route.query.templateId).then((e) => {
     template.value = e.data;
@@ -193,23 +222,42 @@ onMounted(async () => {
     editor.setContent(JSON.parse(e.data.templateData || '{}'));
     // editor.setContent(data);
   });
+  getBaseTemplateVariableList().then((e) => {
+    fieldList.value = e.data;
+  });
 });
 let obj1 = {};
 </script>
 
 <style scoped>
+.title {
+  width: 100%;
+  line-height: 40px;
+  font-size: 14px;
+  color: #666;
+  text-align: center;
+}
+
 .fieldList {
   width: 100%;
-  height: calc(100vh - 30px);
+  height: calc(100vh - 50px - 34px - 40px);
-  overflow: auto;
+  overflow-y: auto;
 
-  &::-webkit-scrollbar {
+  .fieldItem {
-    display: none;
+    width: 80%;
+    font-size: 12px;
+    padding-left: 15px;
+    color: #333;
+    cursor: pointer;
+
+    .btn {
+      padding: 10px;
+
+      &:hover {
+        background-color: #eee;
+        border-radius: 10px;
+      }
     }
-
-  .fieldListItem {
-    line-height: 40px;
-    font-size: 16px;
   }
 }
 </style>