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

perf: 优化树形过滤器
This commit is contained in:
fit2cloud-chenyw 2022-05-31 14:33:30 +08:00 committed by GitHub
commit 9cd3da04a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 54 additions and 10 deletions

View File

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

View File

@ -408,6 +408,7 @@ export default {
// //
_treeNodeClickFun(data, node, vm) { _treeNodeClickFun(data, node, vm) {
const { multiple } = this.selectParams const { multiple } = this.selectParams
if (multiple) return //
const { clickParent } = this.treeParams const { clickParent } = this.treeParams
const checkStrictly = this.treeParams['check-strictly'] const checkStrictly = this.treeParams['check-strictly']
const { propsValue, propsChildren, propsDisabled } = this const { propsValue, propsChildren, propsDisabled } = this
@ -481,16 +482,42 @@ export default {
this.$emit('check', data, node, vm) this.$emit('check', data, node, vm)
this._emitFun() 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 // tag
_selectRemoveTag(tag) { _selectRemoveTag(tag) {
const { data, propsValue, propsLabel, propsChildren } = this const { data, propsValue, propsLabel, propsChildren } = this
const { multiple } = this.selectParams
each( each(
data, data,
item => { item => {
const labels = this.showParent ? this.cascadeLabels(item) : item[propsLabel] const labels = this.showParent ? this.cascadeLabels(item) : item[propsLabel]
if (labels === tag) { if (labels === tag) {
const value = item[propsValue] if (multiple && item.children && item.children.length) {
this.ids = this.ids.filter(id => id !== value) 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 propsChildren

View File

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

View File

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

View File

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