Merge pull request #2557 from dataease/pr@dev_filter_position_style

fix: 修复过滤组件不同状态初始化 位置设置不生效 以及下拉框和下拉树 多选时tag 标签样式不生效问题

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) {

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) {

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;

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])
             })
         },
     }