ocpview-plus 1.1.9 → 1.2.0

package/src/components/tree/basetree.vue

@@ -34,7 +34,7 @@ export default {
                 className:'efutre-tree-node'
             },
             myConfig: {
-               
+
             },
             gridConfig:{
 
@@ -52,7 +52,7 @@ export default {
             outsideHeight:0,
             treeData:[],
             asyncLoad:false
-            
+
         };
     },
     created () {
@@ -74,12 +74,12 @@ export default {
         init() {
             //获取初期默认值
             this.myConfig = Object.assign({}, this.globalConfig, this.myConfig);
-            
+
             //获取配置
             if (this.config) {
                 this.myConfig = Object.assign({}, this.myConfig, this.config);
             }
-           
+
             let  rootCode = '0';
             let  rootName = '根节点';
             if (this.myConfig.showRootNode) {
@@ -98,7 +98,7 @@ export default {
             this.rootNode[this.myConfig.responseCode] = rootCode + '';
             this.rootNode[this.myConfig.responseName] = rootName;
             if (this.myConfig.idClass !== undefined) {
-                this.rootNode[this.myConfig.idClass] = 0;  
+                this.rootNode[this.myConfig.idClass] = 0;
             }
             //多选 才允许出现复选框
             if (this.myConfig.multiSelect !== true) {
@@ -118,9 +118,9 @@ export default {
         setIcon(data) {
             let nodeClass = data[this.myConfig.idClass];
             if (!nodeClass) {
-                nodeClass = 0; 
+                nodeClass = 0;
             } else {
-                nodeClass = Number(nodeClass); 
+                nodeClass = Number(nodeClass);
             }
             if (!this.myConfig.showRootNode) {
                 if (nodeClass &&  nodeClass !== 0) {
@@ -130,18 +130,102 @@ export default {
             if (nodeClass >= this.myConfig.showIconList.length) {
                 nodeClass = this.myConfig.showIconList.length - 1;
             }
-                
+
             const icon = this.myConfig.showIconList[nodeClass];
-            data.icon = icon.type; 
+            data.icon = icon.type;
             if (icon.size) {
-                data.iconSize = icon.size; 
+                data.iconSize = icon.size;
             }
             if (icon.color) {
-                data.iconColor = icon.color; 
+                data.iconColor = icon.color;
             }
             return data;
         },
-        iconRender(h,params) {
+        iconRender(h, params) {
+
+            let icon = params.data.icon
+            let size = params.data.iconSize
+            let color = params.data.iconColor
+
+            const hasChildren =
+                params.data.children &&
+                params.data.children.length > 0
+
+            if (!icon) {
+                if (hasChildren) {
+                    icon = params.data.expand
+                        ? '_base_mulu'
+                        : '_base_close_mulu'
+                } else {
+                    icon = '_base_wenjian'
+                }
+            }
+
+            if (!size) {
+                size = 14
+            }
+
+            let para = {
+                type: icon,
+                size,
+                color
+            }
+
+            if (this.myConfig.setTreeNodeIcon) {
+                para = this.myConfig.setTreeNodeIcon(params, para)
+            } else if (this.setTreeNodeIcon) {
+                para = this.setTreeNodeIcon(params, para)
+            }
+
+            // 处理自定义 iconfont
+            if (para.type && para.type.startsWith('_')) {
+                const resultIcon =
+                    'iconfont icon-' + para.type.substring(1)
+
+                para.custom = resultIcon
+                delete para.type
+            }
+
+            let nodeClass = 'efuture-treenode'
+
+            if (this.myConfig.setNodeClass) {
+                nodeClass = this.myConfig.setNodeClass(params)
+            }
+
+            return h(
+                'div',
+                {
+                    class: { [nodeClass]: true },
+                    style: {
+                        display: 'flex',
+                        userSelect: 'none'
+                    },
+                    onDblclick: () => {
+                        this.$nextTick(() => {
+                            this.setExpend(params.data)
+                        })
+                        this.$emit('dbclick', params.data)
+                    }
+                },
+                [
+                    h(
+                        'div',
+                        {
+                            style: { paddingLeft: '5px' }
+                        },
+                        [
+                            h(resolveComponent('Icon'), para)
+                        ]
+                    ),
+
+                    h(resolveComponent('ShowText'), {
+                        label: params.data.title,
+                        contentAlign: 'left'
+                    })
+                ]
+            )
+        },
+        iconRenderOld(h,params) {
             let icon = params.data.icon;
             let size = params.data.iconSize;
             let color = params.data.iconColor;
@@ -152,7 +236,7 @@ export default {
                     } else {
                         icon = '_base_close_mulu';
                     }
-                   
+
                 } else {
                     icon = '_base_wenjian';
                 }
@@ -163,7 +247,7 @@ export default {
              let para = {
                 type:icon,
                 size:size,
-                color:color 
+                color:color
             }
             if (this.myConfig.setTreeNodeIcon) {
                 para = this.myConfig.setTreeNodeIcon(params,para);
@@ -175,7 +259,7 @@ export default {
                 resulIcon = 'iconfont icon-' + resulIcon;
                 para.custom = resulIcon;
                 delete para.type;
-            } 
+            }
             let nodeClass = 'efuture-treenode';
             if (this.myConfig.setNodeClass) {
                 nodeClass =this.myConfig.setNodeClass(params)
@@ -213,7 +297,7 @@ export default {
                         label:params.data.title,
                         contentAlign:'left'
                     })
-                    ]); 
+                    ]);
         },
         toTreeData () {
             let pos = {};
@@ -227,7 +311,7 @@ export default {
             while (data.length !== 0) {
                 // 解决找不到节点，而导致的死循环
                 const index = tempData.findIndex(item => item[this.myConfig.idField] === data[i][this.myConfig.parentField]);
-            
+
                 if (data[i][this.myConfig.parentField] === this.rootNode[this.myConfig.idField] || index < 0) {
                     tree.push(data[i]);
                     pos[data[i][this.myConfig.idField]] = [tree.length - 1];
@@ -267,7 +351,7 @@ export default {
                 if (this.myConfig.showIcon) {
                     if (this.myConfig.idClass && this.myConfig.showIconList && this.myConfig.showIconList.length > 0) {
                         root[this.myConfig.idClass] = 0;
-                        root = this.setIcon(root); 
+                        root = this.setIcon(root);
                     }
                 }
                 if (this.myConfig.nodeRender) {
@@ -279,7 +363,7 @@ export default {
             } else {
                 return tree;
             }
-               
+
         },
         setSelected (reTemp) {
             if (this.myConfig.expand) {
@@ -311,7 +395,7 @@ export default {
             }
             if (this.myConfig.showIcon) {
                 if (this.myConfig.idClass && this.myConfig.showIconList && this.myConfig.showIconList.length > 0) {
-                    reTemp = this.setIcon(reTemp); 
+                    reTemp = this.setIcon(reTemp);
                 }
             }
 
@@ -333,7 +417,7 @@ export default {
         },
         refurbish(para) {
             if(!para) {
-                para = {};  
+                para = {};
             }
             if (this.asyncLoad) {
                 para[this.myConfig.idClass] = 1;
@@ -386,17 +470,39 @@ export default {
         getRootNode () {
             return this.$Method.copy(this.rootNode);
         },
+
         getData() {
-            let data = null;
-            if (this.$refs.tree) {
-                if (this.myConfig.showCheckBox) {
-                    data = this.$refs.tree.getCheckedNodes();
-                } else {
-                    data = this.$refs.tree.getSelectedNodes();
+            if (!this.treeData) return []
+
+            return this.myConfig.showCheckBox
+                ? this.getNodesByKey('checked', this.treeData)
+                : this.getNodesByKey('selected', this.treeData)
+        },
+        // getNodesByKey(key, data, result = []) {
+        //     data.forEach(item => {
+        //         if (item[key]) {
+        //             result.push(item)
+        //         }
+        //         if (Array.isArray(item.children)) {
+        //             this.getNodesByKey(key, item.children, result)
+        //         }
+        //     })
+        //     return result
+        // },
+
+        getNodesByKey(key, data, result = []) {
+            data.forEach(item => {
+                if (item[key]) {
+                    result.push(item)
                 }
-            }
-            return data;
+                if (Array.isArray(item.children) && item.children.length > 0) {
+                    this.getNodesByKey(key, item.children, result)
+                }
+            })
+            return result
         },
+
+
         setData(data) {
             this.selectedData =  this.$Method.copy(data);
             this.oldData = this.$Method.copy(data);
@@ -413,7 +519,7 @@ export default {
         setPro(data) {
             if (data) {
                 this.myConfig = Object.assign({},this.myConfig,data);
-            }             
+            }
         },
         getPro(name) {
             return this.myConfig[name];
@@ -469,7 +575,7 @@ export default {
             self.synchroPost(self.myConfig.resources,self.myConfig.method,searchParam,function(data) {
                 if (data && data[self.myConfig.response]) {
                     reData = data[self.myConfig.response];
-                }  
+                }
             },null);
             return reData;
         },
@@ -484,9 +590,12 @@ export default {
         getSelectedNodes() {
             return this.$refs.tree.getSelectedNodes();
         },
+
         getCheckedNodes() {
-            return this.$refs.tree.getCheckedNodes();
+            if (!this.treeData) return []
+            return this.getNodesByKey('checked', this.treeData)
         },
+
         getCheckedAndIndeterminateNodes() {
             return this.$refs.tree.getCheckedAndIndeterminateNodes();
         },
@@ -581,16 +690,23 @@ export default {
                 } else {
                     tempName = 'selected';
                 }
-            } 
-            if (this.$refs.tree && this.$refs.tree.flatState) {
-                this.$refs.tree.flatState.forEach(el => {
-                    if (el.node[tempName] !== value) {
-                        let obj ={};
-                        obj[tempName] = value;
-                        Object.assign(el.node,obj);
+            }
+            const updateNode = (nodes) => {
+                if (!nodes) return
+
+                nodes.forEach(node => {
+                    if (node[tempName] !== value) {
+                        node[tempName] = value
                     }
-                });
+
+                    if (node.children && node.children.length > 0) {
+                        updateNode(node.children)
+                    }
+                })
             }
+
+            updateNode(this.data)
+
         },
         setNodes(data, name, value) {
             let tempName = name;
@@ -604,24 +720,32 @@ export default {
                 }
             }
             let responseId = this.myConfig.responseId;
-            this.$refs.tree.flatState.forEach(el => {
-                let index = data.findIndex(
-              el2 => el.node[responseId] === el2[responseId]
-            );
-                if (index > -1) {
-                    if (el.node[tempName] !== value) {
-                        let obj ={};
-                        obj[tempName] = value;
-                        Object.assign(el.node,obj);
+            // 把目标列表变成 Set，提高查找效率
+            const idSet = new Set(
+                data.map(item => item[responseId])
+            )
+
+            const updateNode = (nodes) => {
+                if (!nodes) return
+
+                nodes.forEach(node => {
+
+                    const exists = idSet.has(node[responseId])
+
+                    const newValue = exists ? value : !value
+
+                    if (node[tempName] !== newValue) {
+                        node[tempName] = newValue
                     }
-                } else {
-                    if (el.node[tempName] !== !value) {
-                        let obj ={};
-                        obj[tempName] = !value;
-                        Object.assign(el.node,obj);
+
+                    if (node.children && node.children.length > 0) {
+                        updateNode(node.children)
                     }
-                }
-            });
+
+                })
+            }
+
+            updateNode(this.data)
         },
         updateNode(data,flag) {
              let tmp = data;
@@ -675,21 +799,21 @@ export default {
                 let tmp = {expand:!this.$refs.tree.flatState[index].node.expand};
                 if (tmp.expand && this.asyncLoad) {
                     if (!this.$refs.tree.flatState[index].node.loading && this.$refs.tree.flatState[index].node.children.length === 0) {
-                        tmp.loading = true; 
+                        tmp.loading = true;
                     };
                     let callback = (data) => {
                         data.forEach(el => {
                             el.selected = false;
                             this.$refs.tree.flatState[index].node.children.push(el);
                         })
-                        Object.assign(this.$refs.tree.flatState[index].node,{loading:false});           
+                        Object.assign(this.$refs.tree.flatState[index].node,{loading:false});
                     }
                     if (this.$refs.tree.flatState[index].node.children.length === 0){
                         this.loadData(data,callback);
                     }
-                    
+
                 }
-                Object.assign(this.$refs.tree.flatState[index].node,tmp); 
+                Object.assign(this.$refs.tree.flatState[index].node,tmp);
             }
         },
         loadData (item, callback) {
@@ -698,7 +822,7 @@ export default {
             let data = this.getAsyncNode(para);
             setTimeout(() => {
                 data.forEach(el => {
-                    this.setSelected(el);    
+                    this.setSelected(el);
                 });
                 callback(data);
             }, 200);

package/src/components/tree/treedata.vue

@@ -13,8 +13,8 @@
                 <p>
                     {{config.title}}
                 </p>
-                </template>  
-                <Tree ref="tree" :data="treeData" :class="myConfig.className" :show-checkbox="myConfig.showCheckBox"  @on-select-change="onSelectChange" @on-check-change="onCheckChange" @on-toggle-expand="onToggleExpand" :load-data="loadData"/>
+                </template>
+                <CompatTree ref="tree" :data="treeData" :class="myConfig.className" :show-checkbox="myConfig.showCheckBox"  @on-select-change="onSelectChange" @on-check-change="onCheckChange" @on-toggle-expand="onToggleExpand" :load-data="loadData"/>
             </Card>
             <ViewGrid v-show="!showTree" ref="grid"  :config="gridConfig"  :dictData="dictData" @dbclick="dbclick"/>
           </Row>
@@ -23,28 +23,30 @@
 <script>
     import Base from '@/components/tree/treedatabase.vue';
     import elementResizeDetectorMaker from 'element-resize-detector';
+    import CompatTree from "@/components/tree/CompatTree.vue";
     export default {
         name:'treedata',
+        components: {CompatTree},
         extends: Base,
         mounted () {
             this.observer = elementResizeDetectorMaker();
             if (this.$refs.condition)  {
                 this.observer.listenTo(this.$refs.condition, this.setExtraHeight);
             }
-           
+
         },
         beforeUnmount() {
             if (this.$refs.condition) {
                 this.observer.removeListener(this.$refs.condition, this.setExtraHeight);
             }
-            
+
         }
     };
 </script>
 
 <style>
 .customLayout{
-    OVERFLOW-Y: auto; 
+    OVERFLOW-Y: auto;
     /*background: url('./images/bg.jpg') no-repeat 4px 5px;*/
 }
 </style>