From a65cf9734261766d76c3144a3173be620c83629d Mon Sep 17 00:00:00 2001
From: bianyaqi <bianyaqi>
Date: Thu, 26 Oct 2023 12:32:03 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/360View/img-editor.vue         | 11 ++++-
 .../imgEditorFabric/img-editor/bgBar.vue      | 19 +++++++++
 .../views/modules/imgEditorFabric/index.vue   |  6 ++-
 .../modules/template/formManage/index.vue     | 41 ++++++++++++++++---
 4 files changed, 70 insertions(+), 7 deletions(-)

diff --git a/src/components/360View/img-editor.vue b/src/components/360View/img-editor.vue
index e0f5a07..05532f9 100644
--- a/src/components/360View/img-editor.vue
+++ b/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() {
diff --git a/src/page-subspecialty/views/modules/imgEditorFabric/img-editor/bgBar.vue b/src/page-subspecialty/views/modules/imgEditorFabric/img-editor/bgBar.vue
index 4d60439..4fcf095 100644
--- a/src/page-subspecialty/views/modules/imgEditorFabric/img-editor/bgBar.vue
+++ b/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
diff --git a/src/page-subspecialty/views/modules/imgEditorFabric/index.vue b/src/page-subspecialty/views/modules/imgEditorFabric/index.vue
index 9d2f669..062da6c 100644
--- a/src/page-subspecialty/views/modules/imgEditorFabric/index.vue
+++ b/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 {
diff --git a/src/page-subspecialty/views/modules/template/formManage/index.vue b/src/page-subspecialty/views/modules/template/formManage/index.vue
index ba8ac46..e796e08 100644
--- a/src/page-subspecialty/views/modules/template/formManage/index.vue
+++ b/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()