fix(仪表板-树过滤器): 全屏模式下无法显示

frontend/src/components/ElTreeSelect/index.vue

@@ -1,13 +1,6 @@
-<!--
+
- * @moduleName: 下拉树组件
- * @Author: dawdler
- * @Date: 2018-12-19 14:03:03
- * @LastModifiedBy: dawdler
- * @LastEditTime: 2020-12-26 14:51:20
- -->
 <template>
   <div class="el-tree-select" :class="selectClass">
-    <!-- 下拉文本 -->
     <el-select
       :id="'el-tree-select-' + guid"
       ref="select"
@@ -19,7 +12,7 @@
       :disabled="disabled"
       popper-class="select-option"
       v-bind="selectParams"
-      :popper-append-to-body="false"
+      :popper-append-to-body="popperAppendToBody"
       :filterable="false"
       :multiple="selectParams.multiple"
       :title="labels"
@@ -27,18 +20,16 @@
       @clear="_selectClearFun"
       @focus="_popoverShowFun"
     />
-    <!-- 弹出框 -->
+    <el-popover ref="popover" v-model="visible" :append-to-body="popperAppendToBody" :placement="placement" :transition="transition" :popper-class="popperClass" :width="width" trigger="click">
-    <el-popover ref="popover" v-model="visible" :placement="placement" :transition="transition" :popper-class="popperClass" :width="width" trigger="click">
-      <!-- 是否显示搜索框 -->
       <el-input v-if="treeParams.filterable" v-model="keywords" size="mini" class="input-with-select mb10">
         <el-button slot="append" icon="el-icon-search" @click="_searchFun" />
       </el-input>
-      <p v-if="selectParams.multiple" class="tree-select-all"><el-checkbox :indeterminate="isIndeterminate" v-customStyle="customStyle" @change="selectAllChane" v-model="selectAll">{{ $t('dataset.check_all') }}</el-checkbox></p>
+      <p v-if="selectParams.multiple" class="tree-select-all"><el-checkbox v-model="selectAll" v-customStyle="customStyle" :indeterminate="isIndeterminate" @change="selectAllChane">{{ $t('dataset.check_all') }}</el-checkbox></p>
       <el-scrollbar tag="div" wrap-class="el-select-dropdown__wrap" view-class="el-select-dropdown__list" class="is-empty">
-        <!-- 树列表 -->
         <el-tree
           v-show="data.length > 0"
           ref="tree"
+          :popper-append-to-body="popperAppendToBody"
           v-bind="treeParams"
           :data="data"
           :node-key="propsValue"
@@ -51,7 +42,6 @@
           @check="_treeCheckFun"
           @check-change="_treeCheckChange"
         />
-        <!-- 暂无数据 -->
         <div v-if="data.length === 0" class="no-data">暂无数据</div>
       </el-scrollbar>
     </el-popover>
@@ -61,93 +51,66 @@
 <script>
 import { on, off } from './dom'
 import { each, guid } from './utils'
-// @group api
 export default {
   name: 'ElTreeSelect',
   components: {},
   props: {
-    // v-model,存储的是treeParams.data里面的id
     value: {
-      // `String` / `Array` / `Number`
       type: [String, Array, Number],
-      // `''`
       default() {
         return ''
       }
     },
-    // el-select样式
+    popperAppendToBody: {
+      type: Boolean,
+      default: false
+    },
     styles: {
       type: Object,
-      // {}
       default() {
         return {
           width: '100%'
         }
       }
     },
-    // 下拉框 挂类
     selectClass: {
       type: String,
       default() {
         return ''
       }
     },
-    // popover 挂类
     popoverClass: {
       type: String,
       default() {
         return ''
       }
     },
-    // 是否禁用文本框
     disabled: {
       type: Boolean,
-      // false
       default() {
         return false
       }
     },
-    // 弹出框位置
     placement: {
       type: String,
-      //  bottom
       default() {
         return 'bottom'
       }
     },
-    // 弹出框过渡动画
     transition: {
       type: String,
-      //  el-zoom-in-top
       default() {
         return 'el-zoom-in-top'
       }
     },
-    // 树渲染方法，具体参考el-tree Function(h, { node, data, store }) {}
     // eslint-disable-next-line vue/require-default-prop
     treeRenderFun: Function,
-    // 搜索过滤方法，具体参考el-tree Function(h, { value, data, node }) {}
     // eslint-disable-next-line vue/require-default-prop
     filterNodeMethod: Function,
-    /*
+
-        文本框参数，几乎支持el-select所有的API<br>
-        取消参数：<br>
-        设定下拉框的弹出框隐藏：<br>
-        `:popper-append-to-body="false"` <br>
-        搜索从弹出框里面执行： <br>
-        `filterable="false"`
-        */
     selectParams: {
       type: Object,
-      /*
+
-            Object默认参数：<br><br>
-            是否可以清空选项：<br>
-            `clearable: true,`<br><br>
-            是否禁用：<br>
-            `disabled: false,`<br><br>
-            搜索框placeholder文字：<br>
-            `placeholder: '请选择',`<br><br>
-            */
       default() {
         return {
           clearable: true,
@@ -156,37 +119,10 @@ export default {
         }
       }
     },
-    /*
+
-        下拉树参数，几乎支持el-tree所有的API<br>
-         取消参数:<br>
-        `:show-checkbox="selectParams.multiple"`<br>
-        使用下拉框参数multiple判断是否对树进行多选<br>
-        取消对el-tree的人为传参show-checkbox<br>
-        `:node-key="propsValue"`     自动获取treeParams.props.value<br>
-        `:draggable="false"`         屏蔽拖动
-        */
     treeParams: {
       type: Object,
-      /*
+
-            Object默认参数：<br><br>
-            在有子级的情况下是否点击父级关闭弹出框,false 只能点击子级关闭弹出框：<br><br>
-            `clickParent: false`<br><br>
-            是否显示搜索框：<br><br>
-            `filterable: false`<br><br>
-            是否只是叶子节点：<br><br>
-            `leafOnly: false`<br><br>
-            是否包含半选节点：<br><br>
-            `includeHalfChecked: false`<br><br>
-            下拉树的数据：<br><br>
-            `data:[]`<br><br>
-            下拉树的props：<br><br>
-            `props: {`<br>
-                `children: 'children',`<br>
-                `label: 'name',`<br>
-                `value: 'flowId',`<br>
-                `disabled: 'disabled'`<br>
-            `}`
-            */
       default() {
         return {
           clickParent: false,
@@ -216,16 +152,16 @@ export default {
       guid: guid(),
       propsValue: 'flowId',
       propsLabel: 'name',
-      propsCode: null, // 可能有空的情况
+      propsCode: null,
       propsDisabled: 'disabled',
       propsChildren: 'children',
       leafOnly: false,
       includeHalfChecked: false,
       data: [],
       keywords: '',
-      labels: '', // 存储名称，用于下拉框显示内容
+      labels: '',
-      ids: [], // 存储id
+      ids: [],
-      visible: false, // popover v-model
+      visible: false,
       width: 150,
       showParent: false,
       showNumber: false
@@ -237,7 +173,7 @@ export default {
       return this.disabled ? _c + ' disabled ' : _c
     },
     isIndeterminate() {
-      if (!this.selectParams.multiple) return;
+      if (!this.selectParams.multiple) return
       return this.ids.length > 0 && this.ids.length !== this._checkSum().length
     }
   },
@@ -268,7 +204,7 @@ export default {
     this._setMultipleFun()
     this.propsValue = props.value
     this.propsLabel = props.label
-    this.propsCode = props.code || null // 可能为空
+    this.propsCode = props.code || null
     this.propsDisabled = props.disabled
     this.propsChildren = props.children
     this.leafOnly = leafOnly
@@ -295,8 +231,8 @@ export default {
   methods: {
     selectAllChane(val) {
       if (val) {
-        this.ids = this._checkSum();
+        this.ids = this._checkSum()
-        this._emitFun();
+        this._emitFun()
         return
       }
       this._selectClearFun()
@@ -309,9 +245,8 @@ export default {
       return arr
     },
     _treeCheckChange() {
-      this.$emit("treeCheckChange")
+      this.$emit('treeCheckChange')
     },
-    // 根据类型判断单选，多选
     _setMultipleFun() {
       let multiple = false
       if (this.value instanceof Array) {
@@ -319,23 +254,15 @@ export default {
       }
       this.$set(this.selectParams, 'multiple', multiple)
     },
-    // 输入文本框输入内容抛出
     _searchFun() {
-      /*
-            对外抛出搜索方法，自行判断是走后台查询，还是前端过滤<br>
-            前端过滤：this.$refs.treeSelect.$refs.tree.filter(value);<br>
-            后台查询：this.$refs.treeSelect.treeDataUpdateFun(data);
-            */
       this.$emit('searchFun', this.keywords)
     },
-    //  根据id筛选当前树名称，以及选中树列表
     _setSelectNodeFun(ids) {
       const el = this.$refs.tree
       if (!el) {
         throw new Error('找不到tree dom')
       }
       const { multiple } = this.selectParams
-      // 长度为0，清空选择
       if (ids.length === 0 || this.data.length === 0) {
         this.labels = multiple ? [] : ''
         if (multiple) {
@@ -346,7 +273,6 @@ export default {
         return
       }
       if (multiple) {
-        // element-ui bug. 如果是父子节点全选 el.setCheckedKeys([非全量id]);之后el.getCheckedNodes()还是全量
         el.getCheckedNodes(this.leafOnly, this.includeHalfChecked).forEach(item => {
           el.setChecked(item, false)
         })
@@ -356,7 +282,6 @@ export default {
         const nodes = el.getCheckedNodes(this.leafOnly, this.includeHalfChecked)
         if (!this.showParent) {
           if (this.propsCode) {
-          // 如果有code   labels=code(name)
             this.labels = nodes.map(item => (item[this.propsCode] ? item[this.propsLabel] + '(' + item[this.propsCode] + ')' : item[this.propsLabel])) || []
           } else {
             this.labels = nodes.map(item => item[this.propsLabel]) || []
@@ -370,7 +295,6 @@ export default {
         if (node) {
           if (!this.showParent) {
             if (this.propsCode) {
-            // 如果有code   labels=code(name)
               this.labels = node[this.propsCode] ? node[this.propsLabel] + '(' + node[this.propsCode] + ')' : node[this.propsLabel]
             } else {
               this.labels = node[this.propsLabel]
@@ -401,14 +325,11 @@ export default {
       const labels = linkedNodes.map(item => item.data[this.propsLabel]).reverse().join(':')
       return labels
     },
-    // 更新popover位置
     _updatePopoverLocationFun() {
-      // dom高度还没有更新，做一个延迟
       setTimeout(() => {
         this.$refs.popover.updatePopper()
       }, 50)
     },
-    // 获取MouseEvent.path 针对浏览器兼容性兼容ie11,edge,chrome,firefox,safari
     _getEventPath(evt) {
       const path = (evt.composedPath && evt.composedPath()) || evt.path
       const target = evt.target
@@ -429,21 +350,18 @@ export default {
       }
       return [target].concat(getParents(target), window)
     },
-    // 树过滤
     _filterFun(value, data, node) {
       if (!value) return true
       return data[this.propsLabel].indexOf(value) !== -1
     },
-    // 树点击
     _treeNodeClickFun(data, node, vm) {
       const { multiple } = this.selectParams
-      if (multiple) return // 多选 不允许点击节点
+      if (multiple) return
       const { clickParent } = this.treeParams
       const checkStrictly = this.treeParams['check-strictly']
       const { propsValue, propsChildren, propsDisabled } = this
       const children = data[propsChildren] || []
       if (data[propsDisabled]) {
-        // 禁用
         return
       }
       if (node.checked) {
@@ -456,14 +374,11 @@ export default {
         }
       } else {
         if (!multiple) {
-          // 多选，不关闭，单选，判断是否允许点击父级关闭弹出框
           if (!clickParent) {
-            // 如果不允许点击父级,自身为末级，允许点击之后关闭
             if (children.length === 0) {
               this.ids = [data[propsValue]]
               this.visible = false
             } else {
-              // 不允许父级，阻止继续派发
               return false
             }
           } else {
@@ -472,12 +387,9 @@ export default {
           }
         } else {
           if (!clickParent && children.length === 0) {
-            // 如果不能点击父级
             this.ids.push(data[propsValue])
           } else if (clickParent) {
-            // 允许点击父级
             this.ids.push(data[propsValue])
-            // 如果父子关联，将子节点push进勾选项
             if (!checkStrictly && children.length) {
               children.forEach(item => {
                 this.ids.push(item[propsValue])
@@ -487,15 +399,9 @@ export default {
         }
       }
       this._emitFun()
-      /*
+
-            点击节点，对外抛出   `data, node, vm`<br>
-            `data:` 当前点击的节点数据<br>
-            `node:` 当前点击的node<br>
-            `vm:` 当前组件的vm
-            */
       this.$emit('node-click', data, node, vm)
     },
-    // 树勾选
     _treeCheckFun(data, node, vm) {
       this.ids = []
       const { propsValue } = this
@@ -512,14 +418,9 @@ export default {
       checkedNodes.forEach(item => {
         this.ids.push(item[propsValue])
       })
-      /*
+
-        点击复选框，对外抛出   `data, node, vm`<br>
-        `data:` 当前点击的节点数据<br>
-        `node:` 当前点击的node<br>
-        `vm:` 当前组件的vm
-        */
       node.checkedKeys = checkedNodes.map(node => node.id)
-      this.selectAll = this._checkSum().length === this.ids.length;
+      this.selectAll = this._checkSum().length === this.ids.length
       this.$emit('check', data, node, vm)
       this._emitFun()
     },
@@ -543,7 +444,6 @@ export default {
       }
       return ids
     },
-    // 下拉框移除tag时触发
     _selectRemoveTag(tag) {
       const { data, propsValue, propsLabel, propsChildren } = this
       const { multiple } = this.selectParams
@@ -567,53 +467,40 @@ export default {
       this.$emit('removeTag', this.ids, tag)
       this._emitFun()
     },
-    // 下拉框清空数据
     _selectClearFun() {
       this.ids = []
       const { multiple } = this.selectParams
-      // 下拉框清空，对外抛出``this.$emit('input', multiple ? [] : '');`
       this.$emit('input', multiple ? [] : '')
-      // 下拉框清空，对外抛出``this.$emit('select-clear');`
       this.$emit('select-clear')
-      this.selectAll = false;
+      this.selectAll = false
       this._updatePopoverLocationFun()
     },
-    // 判断类型，抛出当前选中id
     _emitFun() {
       const { multiple } = this.selectParams
       this.$emit('input', multiple ? this.ids : this.ids.length > 0 ? this.ids[0] : '')
       this._updatePopoverLocationFun()
     },
-    // 更新宽度
     _updateH() {
       this.$nextTick(() => {
         this.width = this.$refs.select.$el.getBoundingClientRect().width
       })
     },
-    // 显示弹出框的时候容错，查看是否和el宽度一致
     _popoverShowFun(val) {
       this._updateH()
       this.$emit('onFoucs')
     },
-    // 判断是否隐藏弹出框
     _popoverHideFun(e) {
       const path = this._getEventPath(e)
       const isInside = path.some(list => {
-        // 鼠标在弹出框内部，阻止隐藏弹出框
         return list.className && typeof list.className === 'string' && list.className.indexOf('el-tree-select') !== -1
       })
       if (!isInside) {
         this.visible = false
       }
     },
-    /**
+
-         * @vuese
-         * 树列表更新数据
-         * @arg Array
-         */
     treeDataUpdateFun(data) {
       this.data = data
-      // 数据更新完成之后，判断是否回显内容
       if (data.length > 0) {
         setTimeout(() => {
           this._setSelectNodeFun(this.ids)
@@ -621,11 +508,6 @@ export default {
       }
     },
 
-    /**
-         * @vuese
-         * 本地过滤方法
-         * @arg String
-         */
     filterFun(val) {
       this.$refs.tree.filter(val)
     },

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

@@ -10,7 +10,8 @@
     :tree-params="treeParams"
     :filter-node-method="_filterFun"
     :tree-render-fun="_renderFun"
-    :customStyle="customStyle"
+    :custom-style="customStyle"
+    :popper-append-to-body="inScreen"
     @searchFun="_searchFun"
     @node-click="changeNode"
     @removeTag="changeNodeIds"
@@ -109,7 +110,7 @@ export default {
       return this.element.options.attrs.multiple
     },
     customStyle() {
-      const { brColor, wordColor, innerBgColor } = this.element.style;
+      const { brColor, wordColor, innerBgColor } = this.element.style
       return { brColor, wordColor, innerBgColor }
     }
   },