From 7105c6a405d43fbbd4c70fedfb53bf65801a66a1 Mon Sep 17 00:00:00 2001
From: dataeaseShu <106045316+dataeaseShu@users.noreply.github.com>
Date: Fri, 1 Jul 2022 18:22:51 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=BF=87=E6=BB=A4?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=B8=8D=E5=90=8C=E7=8A=B6=E6=80=81=E5=88=9D?=
 =?UTF-8?q?=E5=A7=8B=E5=8C=96=20=E4=BD=8D=E7=BD=AE=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E4=B8=8D=E7=94=9F=E6=95=88=20=E4=BB=A5=E5=8F=8A=E4=B8=8B?=
 =?UTF-8?q?=E6=8B=89=E6=A1=86=E5=92=8C=E4=B8=8B=E6=8B=89=E6=A0=91=20?=
 =?UTF-8?q?=E5=A4=9A=E9=80=89=E6=97=B6tag=20=E6=A0=87=E7=AD=BE=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=B8=8D=E7=94=9F=E6=95=88=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/canvas/utils/style.js |  4 ++--
 .../components/widget/DeWidget/DeSelect.vue   |  6 +++++
 .../widget/DeWidget/DeSelectTree.vue          | 17 ++++++++++++--
 .../components/widget/DeWidget/customInput.js | 23 +++++++++++++++++--
 4 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/canvas/utils/style.js b/frontend/src/components/canvas/utils/style.js
index 99c9c236a1..ef987ea381 100644
--- a/frontend/src/components/canvas/utils/style.js
+++ b/frontend/src/components/canvas/utils/style.js
@@ -1,7 +1,7 @@
 import { sin, cos } from '@/components/canvas/utils/translate'
 import store from '@/store'
 import { colorReverse } from '@/components/canvas/utils/utils'
-
+import Vue from 'vue'
 export const LIGHT_THEME_COLOR_MAIN = '#000000'
 export const LIGHT_THEME_COLOR_SLAVE1 = '#CCCCCC'
 export const LIGHT_THEME_PANEL_BACKGROUND = '#F1F3F5'
@@ -352,7 +352,7 @@ export function adaptCurThemeCommonStyle(component) {
   if (isFilterComponent(component.component)) {
     const filterStyle = store.state.canvasStyleData.chartInfo.filterStyle
     for (const styleKey in filterStyle) {
-      component.style[styleKey] = filterStyle[styleKey]
+      Vue.set(component.style, styleKey, filterStyle[styleKey])
     }
   } else {
     if (component.style.color) {
diff --git a/frontend/src/components/widget/DeWidget/DeSelect.vue b/frontend/src/components/widget/DeWidget/DeSelect.vue
index 3d8edb3d8e..a79378e6e9 100644
--- a/frontend/src/components/widget/DeWidget/DeSelect.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelect.vue
@@ -231,6 +231,12 @@ export default {
     },
     visualChange(value) {
       this.value = value
+      this.$nextTick(() => {
+        if (!this.element.options.attrs.multiple) {
+          return
+        }
+        this.handleElTagStyle()
+      })
     },
     changeValue(value) {
       if (!this.inDraw) {
diff --git a/frontend/src/components/widget/DeWidget/DeSelectTree.vue b/frontend/src/components/widget/DeWidget/DeSelectTree.vue
index a53c0deaff..2aac09c43d 100644
--- a/frontend/src/components/widget/DeWidget/DeSelectTree.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelectTree.vue
@@ -16,7 +16,7 @@
     @check="changeCheckNode"
     @select-clear="selectClear"
     @onFoucs="onFoucs"
-    @treeCheckChange="change"
+    @treeCheckChange="handleElTagStyle"
   />
 
 </template>
@@ -221,7 +221,7 @@ export default {
         this.handleCoustomStyle()
       })
     },
-    change() {
+    handleElTagStyle() {
       setTimeout(() => {
         textSelectWidget(this.$refs.deSelectTree.$refs.select.$el, this.element.style)
       }, 50)
@@ -383,8 +383,21 @@ export default {
   .el-tree {
     background: var(--BgSelectTreeColor, #FFFFFF) !important;
     color: var(--SelectTreeColor, #606266) !important;
+
+    .el-tree-node.is-current {
+      background-color: rgb(245, 247, 250, .5) !important;
+    }
+    .el-tree-node:focus>.el-tree-node__content {
+      background-color: rgb(245, 247, 250, .5) !important;
+    }
+
+    .el-tree-node__content:hover {
+      background-color: rgb(245, 247, 250, .5) !important;
+    }
   }
 
+  
+
   .el-input-group--append {
     .el-input__inner {
       background: var(--BgSelectTreeColor, #FFFFFF) !important;
diff --git a/frontend/src/components/widget/DeWidget/customInput.js b/frontend/src/components/widget/DeWidget/customInput.js
index a33343629d..62198dafbb 100644
--- a/frontend/src/components/widget/DeWidget/customInput.js
+++ b/frontend/src/components/widget/DeWidget/customInput.js
@@ -1,5 +1,5 @@
 // 通过控制css变量控制过滤组件弹框样式 de-select-grid除外
-import {  attrsMap, styleAttrs } from '@/components/widget/DeWidget/serviceNameFn.js'
+import { attrsMap, styleAttrs } from '@/components/widget/DeWidget/serviceNameFn.js'
 
 export default {
     data() {
@@ -16,6 +16,25 @@ export default {
             }
         }
     },
+    watch: {
+        cssArr: {
+            handler() {
+                if (['de-select', 'de-select-tree'].includes(this.element.component)) {
+                    if (!this.element.options.attrs.multiple) {
+                        return
+                    }
+                    this.handleElTagStyle()
+                };
+            },
+            deep: true
+        },
+    },
+    computed: {
+        cssArr() {
+            const { brColor, wordColor, innerBgColor } = this.element.style;
+            return { brColor, wordColor, innerBgColor }
+        }
+    },
     mounted() {
         this.handleCoustomStyle()
     },
@@ -32,7 +51,7 @@ export default {
             const newValue = { brColor, wordColor, innerBgColor };
             const cssVar = this.typeTransform();
             this.styleAttrs.forEach((ele, index) => {
-                document.documentElement.style.setProperty(cssVar[index],  !isPanelDe ? '' : newValue[ele])
+                document.documentElement.style.setProperty(cssVar[index], !isPanelDe ? '' : newValue[ele])
             })
         },
     }