From cb8febc014028955abf894b7d81b99be202b7e4a Mon Sep 17 00:00:00 2001
From: dataeaseShu <106045316+dataeaseShu@users.noreply.github.com>
Date: Thu, 23 Jun 2022 15:01:32 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E8=BF=87=E6=BB=A4=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=BC=B9=E6=A1=86=E6=A0=B7=E5=BC=8F=E9=80=89=E4=B8=AD?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=20=E5=A4=9A=E9=80=89=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E8=A1=A5=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ElTreeSelect/index.vue     |  4 +++
 .../components/widget/DeWidget/DeSelect.vue   | 30 ++++++++--------
 .../widget/DeWidget/DeSelectTree.vue          |  9 +++++
 .../widget/DeWidget/inputStyleMixin.js        | 16 +++++++++
 .../widget/DeWidget/serviceNameFn.js          | 36 +++++++++++++++++++
 5 files changed, 80 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/ElTreeSelect/index.vue b/frontend/src/components/ElTreeSelect/index.vue
index 86bcb61a68..8bf4115688 100644
--- a/frontend/src/components/ElTreeSelect/index.vue
+++ b/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
diff --git a/frontend/src/components/widget/DeWidget/DeSelect.vue b/frontend/src/components/widget/DeWidget/DeSelect.vue
index 749ad44920..5f10e81ca3 100644
--- a/frontend/src/components/widget/DeWidget/DeSelect.vue
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/components/widget/DeWidget/DeSelectTree.vue b/frontend/src/components/widget/DeWidget/DeSelectTree.vue
index b08009db08..132277d55f 100644
--- a/frontend/src/components/widget/DeWidget/DeSelectTree.vue
+++ b/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 {
diff --git a/frontend/src/components/widget/DeWidget/inputStyleMixin.js b/frontend/src/components/widget/DeWidget/inputStyleMixin.js
index 5c9b52d6cb..d7bb962a61 100644
--- a/frontend/src/components/widget/DeWidget/inputStyleMixin.js
+++ b/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() {
diff --git a/frontend/src/components/widget/DeWidget/serviceNameFn.js b/frontend/src/components/widget/DeWidget/serviceNameFn.js
index da8a9faacc..739914c70f 100644
--- a/frontend/src/components/widget/DeWidget/serviceNameFn.js
+++ b/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
 }
\ No newline at end of file

From fe916e64d526a9f51249419df87d37552a3aa789 Mon Sep 17 00:00:00 2001
From: dataeaseShu <106045316+dataeaseShu@users.noreply.github.com>
Date: Thu, 23 Jun 2022 15:01:32 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E8=BF=87=E6=BB=A4=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=BC=B9=E6=A1=86=E6=A0=B7=E5=BC=8F=E9=80=89=E4=B8=AD?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=20=E5=A4=9A=E9=80=89=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E8=A1=A5=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ElTreeSelect/index.vue     |  4 +++
 .../components/widget/DeWidget/DeSelect.vue   | 30 ++++++++--------
 .../widget/DeWidget/DeSelectTree.vue          |  9 +++++
 .../widget/DeWidget/inputStyleMixin.js        | 16 +++++++++
 .../widget/DeWidget/serviceNameFn.js          | 36 +++++++++++++++++++
 5 files changed, 80 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/ElTreeSelect/index.vue b/frontend/src/components/ElTreeSelect/index.vue
index aa0ac6fd0b..af475cab2a 100644
--- a/frontend/src/components/ElTreeSelect/index.vue
+++ b/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
diff --git a/frontend/src/components/widget/DeWidget/DeSelect.vue b/frontend/src/components/widget/DeWidget/DeSelect.vue
index 749ad44920..5f10e81ca3 100644
--- a/frontend/src/components/widget/DeWidget/DeSelect.vue
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/components/widget/DeWidget/DeSelectTree.vue b/frontend/src/components/widget/DeWidget/DeSelectTree.vue
index b08009db08..132277d55f 100644
--- a/frontend/src/components/widget/DeWidget/DeSelectTree.vue
+++ b/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 {
diff --git a/frontend/src/components/widget/DeWidget/inputStyleMixin.js b/frontend/src/components/widget/DeWidget/inputStyleMixin.js
index 5c9b52d6cb..d7bb962a61 100644
--- a/frontend/src/components/widget/DeWidget/inputStyleMixin.js
+++ b/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() {
diff --git a/frontend/src/components/widget/DeWidget/serviceNameFn.js b/frontend/src/components/widget/DeWidget/serviceNameFn.js
index da8a9faacc..739914c70f 100644
--- a/frontend/src/components/widget/DeWidget/serviceNameFn.js
+++ b/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
 }
\ No newline at end of file