表单

src/components/360View/img-editor.vue

@@ -9,7 +9,12 @@
     class="img-editor"
     @closed="closeDialog"
   >
-    <home-view :is-od-or-os="isOdOrOs" @closeDialog="closeDialog" @fullImgBack="fullImgBack" />
+    <home-view
+      :is-od-or-os="isOdOrOs"
+      :default-bg="defaultBg"
+      @closeDialog="closeDialog"
+      @fullImgBack="fullImgBack"
+    />
   </el-dialog>
 </template>
 
@@ -30,6 +35,10 @@ export default {
     },
     isOdOrOs: {
       type: String
+    },
+    // 默认背景图
+    defaultBg: {
+      type: String
     }
   },
   data() {

src/page-subspecialty/views/modules/imgEditorFabric/img-editor/bgBar.vue

@@ -23,6 +23,14 @@
         alt=""
         @click="(e) => setBgImg(e.target)"
       >
+      <img
+        v-if="defaultBg"
+        ref="defaultBg"
+        :src="defaultBg"
+        class="img"
+        alt=""
+        @click="(e) => setBgImg(e.target)"
+      >
     </div>
   </div>
 </template>
@@ -36,6 +44,9 @@ export default {
   props: {
     isOdOrOs: {
       type: String
+    },
+    defaultBg: {
+      type: String
     }
   },
   data() {
@@ -65,6 +76,9 @@ export default {
           default:
             break
         }
+        if (this.defaultBg) {
+          target = this.$refs.defaultBg
+        }
         this.setBgImg(target)
       })
     })
@@ -73,6 +87,11 @@ export default {
     // 设置背景图片
     setBgImg(target) {
       if (!target) {
+        // 默认背景图
+        if (this.defaultBg) {
+          target = this.$refs.defaultBg
+        }
+        // 翔安激光治疗的默认带入背景图
         switch (this.isOdOrOs) {
           case 'OD':
             target = this.$refs.od

src/page-subspecialty/views/modules/imgEditorFabric/index.vue

@@ -23,7 +23,7 @@
               <!-- 背景设置 -->
               <div v-show="menuActive === '2'" class="left-panel">
                 <set-size />
-                <bg-bar ref="bgBar" :is-od-or-os="isOdOrOs" />
+                <bg-bar ref="bgBar" :is-od-or-os="isOdOrOs" :default-bg="defaultBg" />
               </div>
             </template>
             <!-- 画笔设置 -->
@@ -117,6 +117,9 @@ export default {
   props: {
     isOdOrOs: {
       type: String
+    },
+    defaultBg: {
+      type: String
     }
   },
   provide: {
@@ -162,6 +165,7 @@ export default {
   },
   methods: {
     odOrOsShow(type) {
+      if (!type) return
       if (type.includes('OD')) {
         return 'OD'
       } else {

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

@@ -10,19 +10,30 @@
       </div>
       <editor mode="design" @after-init.native="onAfterInit" />
     </div>
+    <img-editor
+      v-if="editorShow"
+      ref="imgEditorRef"
+      :default-bg="curImgSrc"
+      @closeDialog="closeDialog"
+      @fullImgBack="fullImgBack"
+    />
   </div>
 </template>
 <script>
 
 import Editor from '@/components/formEditor/Editor.vue'
+import ImgEditor from '@/components/360View/img-editor.vue'
 
 export default {
   name: 'Index',
-  components: { Editor },
+  components: { ImgEditor, Editor },
   data() {
     return {
       editor: null,
-      formList: []
+      formList: [],
+      editorShow: false,
+      curImgSrc: '',
+      curKey: ''
     }
   },
   methods: {
@@ -37,13 +48,33 @@ export default {
         // })
       }
     },
+    closeDialog() {
+      this.editorShow = false
+    },
+    fullImgBack(value) {
+      if (this.curKey) {
+        this.editor.$(`#${this.curKey}`)[0].src = value
+      }
+    },
     imageChange() {
       const data = this.editor.getBindObject().BODY
       const keys = Object.keys(data)
-      this.editor.$('#img_editor').click(() => {
-        this.editor.$('#img_editor')[0].src = require('@/assets/img/od.png')
+      // 筛选出图片编辑的字段
+      const imgEditorList = keys.filter(item => item.includes('imgEditor'))
+      // 遍历图片编辑
+      imgEditorList.forEach(item => {
+        // 点击打开编辑器
+        this.editor.$('#' + item).click(() => {
+          this.curKey = item
+          this.curImgSrc = data[item] // 编辑器默认背景图带入
+          this.editorShow = true
+          this.$nextTick(() => {
+            this.$refs.imgEditorRef.init()
+          })
+          // this.editor.$('#img_editor')[0].src = require('@/assets/img/od.png')
+        })
       })
-      console.log(keys)
+      // console.log(keys)
     },
     saveForm() {
       const html = this.editor.getHtml()