From f650c55743d9eed2aaf165170f9e34e6dd426c87 Mon Sep 17 00:00:00 2001
From: "wu.jian2" <distantmtn@gmail.com>
Date: Thu, 31 Aug 2023 14:17:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E4=B8=9A=E5=8A=A1?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=94=9F=E6=88=90=E5=9B=BE=E7=89=87=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=EF=BC=8C=E5=8F=AA=E8=8E=B7=E5=8F=96=E5=BC=80=E5=8F=91?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84=E8=A7=86=E5=9B=BE=EF=BC=8C=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E8=BF=94=E5=9B=9E=E6=B7=BB=E5=8A=A0=E6=98=AF=E5=90=A6?=
 =?UTF-8?q?=E4=BF=9D=E5=AD=98=E7=A1=AE=E8=AE=A4=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RightSetting/DataSetting.vue              |  5 +-
 .../packages/BizComponent/Preview.vue         |  2 +-
 data-room-ui/packages/BizComponent/index.vue  | 60 ++++++++++++++++---
 3 files changed, 57 insertions(+), 10 deletions(-)

diff --git a/data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue b/data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue
index 7f3426d9..a03bfa09 100644
--- a/data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue
+++ b/data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue
@@ -67,7 +67,10 @@
           class="data-setting-data-box"
         >
           <div class="lc-field-head">
-            <div v-if="config.type!=='flyMap'" class="lc-field-title">
+            <div
+              v-if="config.type!=='flyMap'"
+              class="lc-field-title"
+            >
               数据配置
             </div>
           </div>
diff --git a/data-room-ui/packages/BizComponent/Preview.vue b/data-room-ui/packages/BizComponent/Preview.vue
index 2894be02..a7657734 100644
--- a/data-room-ui/packages/BizComponent/Preview.vue
+++ b/data-room-ui/packages/BizComponent/Preview.vue
@@ -193,7 +193,7 @@ export default {
 
   .remote-preview-inner-wrap {
     position: absolute;
-    height: 100%;
+    // height: 100%;
     width: 100%;
     overflow: auto;
     padding: 20px;
diff --git a/data-room-ui/packages/BizComponent/index.vue b/data-room-ui/packages/BizComponent/index.vue
index 43b0483d..9e5ce708 100644
--- a/data-room-ui/packages/BizComponent/index.vue
+++ b/data-room-ui/packages/BizComponent/index.vue
@@ -80,6 +80,11 @@
       </div>
       <div class="bs-custom-component-content-preview">
         <div class="bs-preview-inner">
+          <div class="code-tab-header">
+            <div class="code-tab">
+              效果预览
+            </div>
+          </div>
           <BizComponentPreview
             :vue-content="form.vueContent"
             :setting-content="form.settingContent"
@@ -230,14 +235,27 @@ export default {
       }
     },
     backManagement () {
-      this.$router.push({ path: window.BS_CONFIG?.routers?.componentUrl || '/big-screen-components' })
-      const data = { componentsManagementType: 'bizComponent' }
-      this.$router.app.$options.globalData = data // 将数据存储在全局变量中
+      // 给出一个确认框提示，提示如下确定返回主页面吗？未保存的配置将会丢失。3个按钮 ：  留在页面 、离开页面、保存后离开页面
+      this.$confirm('确定返回主页面吗？未保存的配置将会丢失。', '提示', {
+        confirmButtonText: '保存后离开页面',
+        cancelButtonText: '离开页面',
+        cancelButtonClass: 'cancel-btn',
+        cancelButtonColor: '#FF6F6F',
+        showCancelButton: true,
+        type: 'warning',
+        customClass: 'bs-el-message-box'
+      }).then(() => {
+        this.save(true)
+      }).catch(() => {
+        this.pageJump()
+      })
     },
-    save () {
+    save (pageJump = false) {
       this.loading = true
-      const node = document.querySelector('.bs-preview-inner')
-      toJpeg(node, { quality: 0.2 })
+      const node = document.querySelector('.remote-preview-inner-wrap')
+      // 获取node下的第一个子节点
+      const childrenNode = node.children[0]
+      toJpeg(childrenNode, { quality: 0.2 })
         .then((dataUrl) => {
           const that = this
           if (showSize(dataUrl) > 200) {
@@ -255,6 +273,10 @@ export default {
                   updateBizComponent(this.form)
                     .then((res) => {
                       that.$message.success('保存成功')
+                      console.log(pageJump)
+                      if (pageJump) {
+                        this.pageJump()
+                      }
                     })
                     .finally(() => {
                       that.loading = false
@@ -265,7 +287,11 @@ export default {
             this.form.coverPicture = dataUrl
             updateBizComponent(this.form)
               .then(() => {
+                console.log(1122)
                 this.$message.success('保存成功')
+                if (pageJump) {
+                  this.pageJump()
+                }
               })
               .finally(() => {
                 this.loading = false
@@ -278,8 +304,10 @@ export default {
     },
     createdImg () {
       this.loading = true
-      const node = document.querySelector('.bs-preview-inner')
-      toPng(node)
+      const node = document.querySelector('.remote-preview-inner-wrap')
+      // 获取node下的第一个子节点
+      const childrenNode = node.children[0]
+      toPng(childrenNode)
         .then((dataUrl) => {
           const link = document.createElement('a')
           link.download = `${this.form.name}.png`
@@ -294,6 +322,11 @@ export default {
           this.$message.warning('出现未知错误，请重试')
           this.loading = false
         })
+    },
+    pageJump () {
+      this.$router.push({ path: window.BS_CONFIG?.routers?.componentUrl || '/big-screen-components' })
+      const data = { componentsManagementType: 'bizComponent' }
+      this.$router.app.$options.globalData = data // 将数据存储在全局变量中
     }
   }
 }
@@ -410,6 +443,17 @@ export default {
         height: 100%;
         background: var(--bs-background-1);
         position: relative;
+        .code-tab-header{
+          height: 40px;
+          background-color: var(--bs-background-2);
+          line-height: 40px;
+          .code-tab{
+            width: 120px;
+            height:40px;
+            text-align: center;
+            background-color: var(--bs-background-1);
+          }
+        }
       }
     }
   }