Merge pull request #2484 from dataease/pr@dev_filter_style_select

Pr@dev filter style select

frontend/src/components/ElTreeSelect/index.vue

@@ -48,6 +48,7 @@
           :render-content="treeRenderFun"
           @node-click="_treeNodeClickFun"
           @check="_treeCheckFun"
+          @check-change="_treeCheckChange"
         />
         <!-- 暂无数据 -->
         <div v-if="data.length === 0" class="no-data">暂无数据</div>
@@ -282,6 +283,9 @@ export default {
     off(document, 'mouseup', this._popoverHideFun)
   },
   methods: {
+    _treeCheckChange() {
+      this.$emit("treeCheckChange")
+    },
     // 根据类型判断单选，多选
     _setMultipleFun() {
       let multiple = false

frontend/src/components/widget/DeWidget/DeSelect.vue

@@ -11,7 +11,6 @@
     :popper-append-to-body="inScreen"
     :size="size"
     :filterable="true"
-    class="de-select-tag"
     popper-class="coustom-de-select"
     @change="changeValue"
     @focus="setOptionWidth"
@@ -35,6 +34,7 @@ import { multFieldValues, linkMultFieldValues } from '@/api/dataset/dataset'
 import bus from '@/utils/bus'
 import { getLinkToken, getToken } from '@/utils/auth'
 import customInput from '@/components/widget/DeWidget/customInput'
+import {  textSelectWidget } from '@/components/widget/DeWidget/serviceNameFn.js'
 
 export default {
   mixins: [customInput],
@@ -173,6 +173,11 @@ export default {
     onBlur() {
       this.onFocus = false
     },
+    handleElTagStyle() {
+      setTimeout(() => {
+        textSelectWidget(this.$refs["deSelect"].$el, this.element.style)
+      }, 50)
+    },
     initLoad() {
       this.value = this.fillValueDerfault()
       this.datas = []
@@ -216,6 +221,7 @@ export default {
           contentWidth += kid.offsetWidth
         })
         this.showNumber = contentWidth > ((this.$refs.deSelect.$refs.tags.clientWidth - 30) * 0.9)
+        this.handleElTagStyle()
       })
     },
 
@@ -270,6 +276,7 @@ export default {
 <style lang="scss">
 .coustom-de-select {
   background-color: var(--BgSelectColor, #FFFFFF) !important;
+  border-color: var(--BrSelectColor, #E4E7ED) !important;
   // .popper__arrow::after{
   //   border-bottom-color: var(--BgSelectColor, #FFFFFF) !important;
   // }
@@ -292,20 +299,13 @@ export default {
     background-color: rgb(245, 247, 250, .5);
   }
 }
-.de-select-tag {
-  .el-select__tags {
-    .el-tag {
-      background-color: var(--BgSelectColor, #f4f4f5) !important;
-      border-color: var(--BrSelectColor, #e9e9eb) !important;
-      color: var(--SelectColor, #909399) !important;
 
-      i {
-        color: var(--SelectColor, #909399) !important;
-      }
-    }
-    .el-icon-close {
-      background-color: var(--BgSelectColor, #C0C4CC) !important;
+.coustom-de-select.is-multiple {
+  .el-select-dropdown__item.selected {
+    background-color: rgb(245, 247, 250, .5) !important;
   }
+  .el-select-dropdown__item.hover {
+    background-color: rgb(245, 247, 250, .5) !important;
   }
 }
 </style>

frontend/src/components/widget/DeWidget/DeSelectTree.vue

@@ -16,6 +16,7 @@
     @check="changeCheckNode"
     @select-clear="selectClear"
     @onFoucs="onFoucs"
+    @treeCheckChange="change"
   />
 
 </template>
@@ -26,6 +27,7 @@ import bus from '@/utils/bus'
 import { getLinkToken, getToken } from '@/utils/auth'
 import ElTreeSelect from '@/components/ElTreeSelect'
 import customInput from '@/components/widget/DeWidget/customInput'
+import {  textSelectWidget } from '@/components/widget/DeWidget/serviceNameFn.js'
 
 export default {
   components: { ElTreeSelect },
@@ -217,6 +219,12 @@ export default {
         this.handleCoustomStyle()
       })
     },
+    change() {
+      setTimeout(() => {
+        console.log(123, this.$refs.deSelectTree.$refs.select.$el);
+        textSelectWidget(this.$refs.deSelectTree.$refs.select.$el, this.element.style)
+      }, 50)
+    },
     selectClear() {
       this.changeValue(this.value)
     },
@@ -366,6 +374,7 @@ export default {
 <style lang="scss">
 .test-class-wrap {
   background: var(--BgSelectTreeColor, #FFFFFF) !important;
+  border-color: var(--BrSelectTreeColor, #E4E7ED) !important;
 
   .popper__arrow,
   .popper__arrow::after {

frontend/src/components/widget/DeWidget/inputStyleMixin.js

@@ -26,11 +26,27 @@ export default {
             },
             deep: true
         },
+        multiple: {
+            handler() {
+                if (!['de-select-tree', 'de-select'].includes(this.element.component)) return;
+                const time = setTimeout(() => {
+                    clearTimeout(time)
+                    this.typeTransform().forEach(ele => {
+                        this.handlerInputStyle(ele, this.cssArr)
+                    })
+                }, 100)
+            },
+            deep: true
+        }
     },
     computed: {
         cssArr() {
             const { brColor, wordColor, innerBgColor } = this.element.style;
             return { brColor, wordColor, innerBgColor }
+        },
+        multiple() {
+            const { multiple = false } = this.element.options.attrs
+            return multiple;
         }
     },
     mounted() {

frontend/src/components/widget/DeWidget/serviceNameFn.js

@@ -37,10 +37,46 @@ function textSelectGridWidget (nodeCache, name, value) {
         }
     }
 }
+
+function textSelectTreeWidget(nodeCache, style) {
+    textSelectWidget(nodeCache, style)
+}
+
+function textSelectWidget(nodeCache, style) {
+    let elTag = nodeCache.querySelectorAll('.el-tag.el-tag--info')
+    if (elTag.length) {
+        elTag.forEach(item => {
+            item.style.flexWrap = 'wrap'
+            item.style.padding = '0'
+            const textNode = item.querySelector('.el-select__tags-text');
+            const closeNode = item.querySelector('.el-tag__close');
+            textNode.style.width = '100%';
+            textNode.style.padding = '0 20px 0 8px';
+            textNode.style.borderRadius = '3px';
+            if (closeNode) {
+                closeNode.style.position = 'absolute';
+                closeNode.style.top = '8px';
+                closeNode.style.right = '2px';
+            }
+            styleAttrs.forEach((ele) => {
+                if (ele !== 'brColor' && closeNode) {
+                    closeNode.style[attrsMap[ele]] = style[ele];
+                } else {
+                    item.style[attrsMap[ele]] = style[ele];
+                }
+                textNode.style[attrsMap[ele]] = style[ele];
+            })
+            
+        });
+    }
+}
+
 export {
     attrsMap,
     styleAttrs,
     timeDateRangeWidget,
     textInputWidget,
     textSelectGridWidget,
+    textSelectTreeWidget,
+    textSelectWidget
 }