Merge pull request #2362 from dataease/pr@dev@perf_tree_filter

frontend/package.json

@@ -94,7 +94,8 @@
     "script-ext-html-webpack-plugin": "2.1.3",
     "script-loader": "^0.7.2",
     "serve-static": "^1.13.2",
-    "vue-template-compiler": "2.6.10"
+    "vue-template-compiler": "2.6.10",
+    "vuetify": "^2.6.6"
   },
   "engines": {
     "node": ">=8.9",

frontend/src/components/ElTreeSelect/index.vue

@@ -408,6 +408,7 @@ export default {
     // 树点击
     _treeNodeClickFun(data, node, vm) {
       const { multiple } = this.selectParams
+      if (multiple) return // 多选 不允许点击节点
       const { clickParent } = this.treeParams
       const checkStrictly = this.treeParams['check-strictly']
       const { propsValue, propsChildren, propsDisabled } = this
@@ -481,16 +482,42 @@ export default {
       this.$emit('check', data, node, vm)
       this._emitFun()
     },
+    allKidIds(node, ids) {
+      ids = ids || []
+      if (!node) {
+        return
+      }
+      const stack = []
+      stack.push(node)
+      let tmpNode
+      while (stack.length > 0) {
+        tmpNode = stack.pop()
+        ids.push(tmpNode.id)
+        if (tmpNode.children && tmpNode.children.length > 0) {
+          var i = tmpNode.children.length - 1
+          for (i = tmpNode.children.length - 1; i >= 0; i--) {
+            stack.push(tmpNode.children[i])
+          }
+        }
+      }
+      return ids
+    },
     // 下拉框移除tag时触发
     _selectRemoveTag(tag) {
       const { data, propsValue, propsLabel, propsChildren } = this
+      const { multiple } = this.selectParams
       each(
         data,
         item => {
           const labels = this.showParent ? this.cascadeLabels(item) : item[propsLabel]
           if (labels === tag) {
-            const value = item[propsValue]
-            this.ids = this.ids.filter(id => id !== value)
+            if (multiple && item.children && item.children.length) {
+              const needCancelIds = this.allKidIds(item) || []
+              this.ids = this.ids.filter(id => !needCancelIds.includes(id))
+            } else {
+              const value = item[propsValue]
+              this.ids = this.ids.filter(id => id !== value)
+            }
           }
         },
         propsChildren

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

@@ -129,7 +129,8 @@ export default {
         this.$nextTick(() => {
           this.$refs.deSelectTree && this.$refs.deSelectTree.treeDataUpdateFun(this.datas)
         })
-      }) || (this.element.options.value = '')
+      })
+      this.element.options.value = ''
     },
     'element.options.attrs.multiple': function(value, old) {
       if (typeof old === 'undefined' || value === old) return

frontend/src/main.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Cookies from 'js-cookie'
 import '@/styles/index.scss' // global css
 import ElementUI from 'element-ui'
+import Vuetify from 'vuetify'
 import Fit2CloudUI from 'fit2cloud-ui'
 
 import i18n from './lang' // internationalization
@@ -51,7 +52,7 @@ Vue.use(fullscreen)
 import VueFriendlyIframe from 'vue-friendly-iframe'
 
 Vue.use(VueFriendlyIframe)
-
+Vue.use(Vuetify)
 // import TEditor from '@/components/Tinymce/index.vue'
 // Vue.component('TEditor', TEditor)
 

frontend/src/views/panel/filter/filterMain/FilterHead.vue

@@ -5,17 +5,18 @@
         <div class="field-content">
 
           <div class="field-content-right">
-            <el-row style="display:inline-flex;height: 32px;width: auto;">
+            <el-row style="display:inline-flex;height: 32px;width: 100%;">
               <draggable
                 v-model="element.options.attrs.dragItems"
+                tag="v-layout"
                 group="dimension"
                 animation="300"
                 :move="onMove"
-                class="theme-drag"
+                class="row wrap justify-space-around theme-drag"
                 style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;overflow-x: auto;display: flex;align-items: center;"
                 @end="end2"
               >
-                <div class="list-group-container">
+                <!-- <div class="list-group-container">
                   <drag-item
                     v-for="(item,index) in element.options.attrs.dragItems"
                     :key="item.id"
@@ -23,8 +24,21 @@
                     :index="index"
                     @closeItem="closeItem"
                   />
-                </div>
-                <transition-group class="list-group" :data-value="$t('panel.drag_here')" />
+                </div> -->
+                <v-flex v-for="(item,index) in element.options.attrs.dragItems" :key="item.id">
+
+                  <drag-item :key="item.id" :item="item" :index="index" @closeItem="closeItem" />
+                </v-flex>
+                <!-- <transition-group class="list-group" :data-value="$t('panel.drag_here')">
+                  <drag-item
+                    v-for="(item,index) in element.options.attrs.dragItems"
+                    :key="item.id"
+                    :item="item"
+                    :index="index"
+                    @closeItem="closeItem"
+                  />
+                </transition-group> -->
+                <span solt="footer">{{ $t('panel.drag_here') }}</span>
               </draggable>
             </el-row>
           </div>