表单编辑器功能基本完成

src/mixins/styeFormSign.js

@@ -1,5 +1,6 @@
 import { Notification } from 'element-ui'
 import emptySign from '@static/js/emptySign'
+import eventBus from '@/page-subspecialty/utils/eventBus'
 export default {
   data() {
     return {
@@ -106,6 +107,11 @@ export default {
             const img_base64_data = args[0]
             const img_base64 = 'data:image/png;base64,' + img_base64_data
             this.formListValue[this.currentSignText] = img_base64
+            const data = {
+              idName: this.currentSignText,
+              src: img_base64
+            }
+            eventBus.$emit('saveSignRes', data)
             if (this.formListValue[this.currentSignText] === emptySign) {
               this.$message.error('签字未成功请重新签字')
             }

src/page-subspecialty/views/modules/template/formManage/index.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="flex formManage">
-    <div class="leftContent">新增表单</div>
+    <div class="leftContent">新增表单
+      <img
+        v-for="(item,index) in imgList"
+        :key="index"
+        :ref="`imgs${index}`"
+        width="80%"
+        :src="item.src"
+        @click="insertImg(`imgs${index}`)"
+      >
+    </div>
     <div class="flex1" style="background: #FFFFFF;padding:0 10px">
       <div style="padding: 10px 0">
         <el-button type="primary" size="mini" @click="saveForm">保存</el-button>
@@ -23,17 +32,30 @@
 
 import Editor from '@/components/formEditor/Editor.vue'
 import ImgEditor from '@/components/360View/img-editor.vue'
+import styeFormSign from '@/mixins/styeFormSign'
+import eventBus from '@/page-subspecialty/utils/eventBus'
 
 export default {
   name: 'Index',
   components: { ImgEditor, Editor },
+  mixins: [styeFormSign],
   data() {
     return {
+      imgList: [{
+        src: require('@/assets/img/xianganLogo3.png')
+      }, {
+        src: require('@/assets/img/od.png')
+      }],
       editor: null,
       formList: [],
       editorShow: false,
-      curImgSrc: '',
-      curKey: ''
+      curImgSrc: '', // 当前图片的路径
+      curKey: '', // 当前图片的ID
+      curInsertId: '', // 插入盒子的id
+      mode: '', // 当前编辑器的模式
+      formListValue: {}, // 签名需要的对象
+      formData: {}, // 表单数据
+      dataKeys: [] // 表单数据全部键名
     }
   },
   methods: {
@@ -42,39 +64,84 @@ export default {
       this.editor.execCommand('new')
       this.setForm()
       if (this.editor) {
+        this.formData = {
+          ...this.editor.getBindObject().BODY,
+          ...this.editor.getBindObject().HEADER
+        }
+        this.dataKeys = Object.keys(this.formData)
+
         this.imageChange()
-        // this.editor.$('#patientId').change(() => {
-        //   console.log('asdfas')
-        // })
+        this.initSignHtml()
+        this.getSignResult()
+        this.insertImgBoxClick()
       }
     },
+    // 签名成功后
+    getSignResult() {
+      eventBus.$off('saveSignRes')
+      eventBus.$on('saveSignRes', data => {
+        this.editor.$('#' + data.idName)[0].src = data.src
+      })
+    },
+    // 签字板签名
+    initSignHtml() {
+      const signList = this.dataKeys.filter(item => item.split('_')[0] === 'SIGN')
+      signList.forEach(item => {
+        // 点击打开编辑器
+        this.editor.$('#' + item).click(() => {
+          if (this.mode !== 'form') return
+          this.initPlugin(item)
+        })
+      })
+    },
     closeDialog() {
       this.editorShow = false
     },
     fullImgBack(value) {
       if (this.curKey) {
         this.editor.$(`#${this.curKey}`)[0].src = value
+        this.editor.$(`#${this.curKey}`)[0].width = this.curKey.split('_')[1]
       }
     },
+    // 图片编辑
     imageChange() {
-      const data = this.editor.getBindObject().BODY
-      const keys = Object.keys(data)
       // 筛选出图片编辑的字段
-      const imgEditorList = keys.filter(item => item.includes('imgEditor'))
+      const imgEditorList = this.dataKeys.filter(item => item.split('_')[0] === 'EIMG')
       // 遍历图片编辑
       imgEditorList.forEach(item => {
         // 点击打开编辑器
         this.editor.$('#' + item).click(() => {
+          if (this.mode !== 'form') return
           this.curKey = item
-          this.curImgSrc = data[item] // 编辑器默认背景图带入
+          this.curImgSrc = this.formData[item] // 编辑器默认背景图带入
           this.editorShow = true
           this.$nextTick(() => {
             this.$refs.imgEditorRef.init()
           })
-          // this.editor.$('#img_editor')[0].src = require('@/assets/img/od.png')
         })
       })
-      // console.log(keys)
+    },
+    // 空白区域图片插入
+    insertImgBoxClick() {
+      const insertList = []
+      for (let i = 1; i < 6; i++) {
+        if (this.editor.$('#INSERT' + i)[0]) {
+          insertList.push('INSERT' + i)
+        } else {
+          continue
+        }
+      }
+      insertList.forEach(item => {
+        this.editor.$('#' + item).click(() => {
+          if (this.mode !== 'form') return
+          this.curInsertId = item
+        })
+      })
+    },
+    insertImg(refName) {
+      if (!this.curInsertId) return
+      const img = this.$refs[refName][0].cloneNode()
+      this.editor.$('#' + this.curInsertId).append(img)
     },
     saveForm() {
       const html = this.editor.getHtml()
@@ -84,8 +151,11 @@ export default {
       const html = decodeURIComponent(window.sessionStorage.getItem('form'))
       this.editor.loadHtml(html)
       this.editor.execCommand('form')
+      this.mode = 'form'
     },
+    // 表单编辑模式的修改
     setFormMode(mode) {
+      this.mode = mode
       this.editor.execCommand(mode)
     }
   }
@@ -100,5 +170,6 @@ export default {
   width: 240px;
   background: #fff;
   margin-right: 10px;
+  text-align: center;
 }
 </style>