bri-components 1.3.90 → 1.3.92

package/src/components/list/mixins/DshCascaderTableMixin.js

@@ -59,17 +59,17 @@ export default {
                     event: "changeNode"
                 },
 
-                createBrotherNode: {
+                canCreateBrother: {
                     name: "添加同级节点",
-                    type: "createBrotherNode",
+                    type: "canCreateBrother",
                     icon: "md-add",
-                    event: "createBrotherNode"
+                    event: "clickCreate"
                 },
-                createChildNode: {
+                canCreateChildNode: {
                     name: "添加子节点",
-                    type: "createChildNode",
+                    type: "canCreateChildNode",
                     icon: "md-add",
-                    event: "createChildNode"
+                    event: "clickCreateChild"
                 },
                 deleteSelfAndChildNodes: {
                     name: "删除该节点",
@@ -77,27 +77,27 @@ export default {
                     icon: "md-trash",
                     color: "red",
                     divided: true,
-                    event: "deleteSelfAndChildNodes"
+                    event: "clickDelete"
                 },
                 deleteChildNodes: {
                     name: "删除所有子节点",
                     type: "deleteChildNodes",
                     icon: "md-trash",
                     color: "red",
-                    event: "deleteChildNodes"
+                    event: "clickDeleteChilds"
                 },
                 clearNode: {
                     name: "清除该节点内容",
                     type: "clearNode",
                     icon: "md-trash",
                     divided: true,
-                    event: "clearNode"
+                    event: "clickClearNode"
                 },
                 clearChildNodes: {
                     name: "清除所有子节点内容",
                     type: "clearChildNodes",
                     icon: "md-trash",
-                    event: "clearChildNodes"
+                    event: "clickClearChildNodes"
                 }
             }
         };
@@ -108,6 +108,7 @@ export default {
                 _treeForm: [],
                 ...this.commonPropsObj,
 
+                _maxLevel: this.commonPropsObj._maxLevel || 3, // 最大级数
                 _contentHeight: this.propsObj._contentHeight || 400 // 表格最大高度
             };
         },
@@ -151,27 +152,33 @@ export default {
             });
 
             // 循环遍树,给根节点赋值
-            let loop = (nodes = []) => {
-                nodes.forEach(node => {
-                    if (node.children && node.children.length) {
-                        loop(node.children);
+            const loop = (nodes = []) => {
+                nodes.forEach(rowItem => {
+                    if (rowItem.children && rowItem.children.length) {
+                        loop(rowItem.children);
                     } else {
                         // 根节点下所有表格字段加上监测，注入到节点对象中，必须$set，牵扯_rely值再出现并没有检测
                         this.selfColumns.forEach(subFormItem => {
-                            this.$set(node, subFormItem._key, node[subFormItem._key]);
+                            this.$set(rowItem, subFormItem._key, rowItem[subFormItem._key]);
                         });
                     }
+
+                    if (this.initFlag) {
+                        this.fixRowItem(rowItem);
+                    }
                 });
             };
             loop(this.data);
+
+            this.initFlag = false;
         },
 
-        /* ----- 表头操作 ------ */
-        // 点击表头
+        /* ----------- 操作 ---------- */
+        // 表头操作 -点击
         clickTh (operationItem, col, colIndex) {
             this.$emit("clickTh", col, colIndex);
         },
-        // 树形表头列 -添加
+        // 表头操作 -树形表头-添加一列
         createCol (operationItem, col, colIndex) {
             if (col.colType === "tree" && col.level === this.treeColumns.length) {
                 this.treeColumns.push({
@@ -188,7 +195,7 @@ export default {
                 this.change("createCol", col);
             }
         },
-        // 树形表头列 -删除
+        // 表头操作 -树形表头-删除一列
         deleteCol (operationItem, col, colIndex) {
             if (col.colType === "tree" && col.canDelete !== false) {
                 this.isDeleteColStatus = true; // isDeleteStatus不用在data中定义
@@ -199,14 +206,15 @@ export default {
             }
         },
 
-        /* ----- 树节点操作 ------ */
-        // 点击节点
-        clickNode (operationItem, col, row, nodeData) {
+        // 树形、汇总节点操作 -点击
+        clickNode (operationItem, col, row, rowIndex) {
             if (col.colType === "tree") {
-                nodeData.isEdit = true;
-                this.$nextTick(() => {
-                    this.$refs[`${col._id}${row._id}`][0] && this.$refs[`${col._id}${row._id}`][0].focus();
-                });
+                if (!this.getRowIsDftDisabled(row) || col._readonlyOnDftRow !== true) {
+                    row.isEdit = true;
+                    this.$nextTick(() => {
+                        this.$refs[`${col._id}${row._id}`][0] && this.$refs[`${col._id}${row._id}`][0].focus();
+                    });
+                }
             } else if (col.colType === "summary") {
                 this.$Modal.warning({
                     title: "该汇总单元格自动计算，不准手动输入！",
@@ -216,274 +224,74 @@ export default {
                 });
             }
         },
-        // 节点失去焦点
-        blurNode (operationItem, col, row, nodeData) {
-            nodeData.isEdit = false;
+        // 树形节点操作 -失去焦点
+        blurNode (operationItem, col, row, rowIndex) {
+            row.isEdit = false;
         },
-        // 改变节点名
-        changeNode (operationItem, col, row, nodeData) {
-            this.change("changeNode", col, row, nodeData);
+        // 树形节点操作 -值改变
+        changeNode (operationItem, col, row, rowIndex) {
+            this.change("changeNode", col, row, rowIndex);
         },
 
-        /* ---- 节点操作 ----- */
-        // 添加同级节点
-        createBrotherNode (operationItem, row, rowIndex, col) {
-            let nodeData = this.getNodeData(row, rowIndex, col);
-            let newNode = this.getNewNode(nodeData.level, nodeData.brotherList);
+        /* -----------  ---------- */
+        // 节点操作 -插入一行
+        clickCreate (operationItem, row, rowIndex, col) {
+            const nodeData = this.getNodeData(col, row, rowIndex);
+            const newNode = this.getNewNode(nodeData.level, nodeData.brotherList);
             nodeData.brotherList.splice(nodeData.index + 1, 0, newNode);
 
-            this.change("createBrotherNode", col, row, nodeData);
+            this.change("createRow", col, row, rowIndex);
         },
-        // 添加子节点
-        createChildNode (operationItem, row, rowIndex, col) {
-            let nodeData = this.getNodeData(row, rowIndex, col);
-            let newNode = this.getNewNode(nodeData.level + 1, nodeData.childList);
+        // 节点操作 -添加子行
+        clickCreateChild (operationItem, row, rowIndex, col) {
+            const nodeData = this.getNodeData(col, row, rowIndex);
+            const newNode = this.getNewNode(nodeData.level + 1, nodeData.childList);
             nodeData.childList.splice(nodeData.childList.length, 0, newNode);
 
-            this.change("createChildNode", col, row, nodeData);
+            this.change("createChildRow", col, row, rowIndex);
         },
-        // 删除该节点
-        deleteSelfAndChildNodes (operationItem, row, rowIndex, col) {
-            let nodeData = this.getNodeData(row, rowIndex, col);
+        // 节点操作 -删除该行
+        clickDelete (operationItem, row, rowIndex, col) {
+            const nodeData = this.getNodeData(col, row, rowIndex);
             nodeData.brotherList.splice(nodeData.index, 1);
             // 此处应该判断子节点是否是最后一个，是的话就要添加一个一直到叶子节点，不过现在只需要添加一个子节点，transforBriTreeData会捎带着处理了
             if (!nodeData.brotherList.length) {
-                let newNode = this.getNewNode(nodeData.level, nodeData.brotherList);
+                const newNode = this.getNewNode(nodeData.level, nodeData.brotherList);
                 nodeData.brotherList.push(newNode);
             }
 
-            this.change("deleteSelfAndChildNodes", col, row, nodeData);
+            this.change("deleteRow", col, row, rowIndex);
         },
-        // 删除所有子节点
-        deleteChildNodes (operationItem, row, rowIndex, col) {
-            let nodeData = this.getNodeData(row, rowIndex, col);
+        // 节点操作 -删除所有子行
+        clickDeleteChilds (operationItem, row, rowIndex, col) {
+            const nodeData = this.getNodeData(col, row, rowIndex);
             nodeData.childList.splice(0);
             // 删除完应该添加一个子节点一直到叶子节点，不过现在只需要添加一个子节点，transforBriTreeData会捎带着处理了
-            let newNode = this.getNewNode(nodeData.level + 1, nodeData.childList);
+            const newNode = this.getNewNode(nodeData.level + 1, nodeData.childList);
             nodeData.childList.push(newNode);
 
-            this.change("deleteChildNodes", col, row, nodeData);
+            this.change("deleteChildRows", col, row, rowIndex);
         },
-        // 清除该节点内容
-        clearNode (operationItem, row, rowIndex, col) {
-            let nodeData = this.getNodeData(row, rowIndex, col);
+        // 节点操作 -清除该节点内容
+        clickClearNode (operationItem, row, rowIndex, col) {
+            const nodeData = this.getNodeData(col, row, rowIndex);
             nodeData.dataObj.name = "";
 
-            this.change("clearNode", col, row, nodeData);
+            this.change("clearNode", col, row, rowIndex);
         },
-        // 清除所有子节点内容
-        clearChildNodes (operationItem, row, rowIndex, col) {
-            let nodeData = this.getNodeData(row, rowIndex, col);
+        // 节点操作 -清除所有子节点内容
+        clickClearChildNodes (operationItem, row, rowIndex, col) {
+            let nodeData = this.getNodeData(col, row, rowIndex);
             this.$clearPropertyValToLeaf(nodeData.childList);
 
-            this.change("clearChildNodes", col, row, nodeData);
-        },
-        // 发生变动
-        change (...params) {
-            this.$emit("change", this.tableDataObj, ...params);
-        },
-
-        /* ---- 工具方法 ---- */
-        // 合并表头
-        mergeColumns (treeForm = [], subForm = []) {
-            return treeForm
-                .reduce((arr, treeFormItem, treeFormIndex) => {
-                    return arr.concat(
-                        {
-                            ...treeFormItem,
-                            colType: "tree"
-                        },
-                        treeFormItem._treeSubForm.map(treeSubFormItem => (
-                            {
-                                ...treeSubFormItem,
-                                nodeKey: treeFormItem._key,
-                                colType: "summary"
-                            }
-                        ))
-                    );
-                }, [])
-                .concat(
-                    subForm.filter(subFormItem =>
-                        this.hideStatus === true
-                            ? !this.hideColKeys.includes(subFormItem._key)
-                            : true
-                    ).map(subFormItem => (
-                        {
-                            ...subFormItem,
-                            nodeKey: treeForm[treeForm.length - 1]._key,
-                            colType: "data"
-                        }
-                    ))
-            );
-        },
-        // 转化树数据
-        getCalcuedTree (nodes = [], treeForm = [], subForm = []) {
-            treeForm.forEach((treeFormItem, treeFormIndex) => {
-                treeFormItem.canDelete = true; // 每次计算，重置一下
-                treeFormItem.level = treeFormIndex + 1; // treeColumns更新,缺少level
-            });
-
-            // 循环遍树节点
-            const loop = (nodes = []) => {
-                nodes.forEach(node => {
-                    // 初始化树节点的数据，给节点加上一些属性并监测，注入到节点对象中
-                    let curCol = treeForm[node.level - 1];
-                    this.$setObj(node, {
-                        _key: curCol._key,
-                        level: curCol.level,
-                        isEdit: false,
-                        isLeaf: false,
-                        total: 1
-                    });
-
-                    // 最后一列（根节点）
-                    if (node.level === treeForm.length) {
-                        // 处理删除了最后一列后，把根节点上的subForm属性值全部给上级节点
-                        if (this.isDeleteColStatus) {
-                            let subNode = node.children[0];
-                            subForm.forEach(subFormItem => {
-                                // 用$set也可以
-                                node[subFormItem._key] = subNode[subFormItem._key];
-                            });
-                        }
-
-                        node.children = [];
-                        node.isLeaf = true;
-                    }
-                    // 非最后一列（最后一列前的列，非根节点），需继续向下循环
-                    else {
-                        // 判断是否能删除最后一列（1.判断条件：判断根节点列的前一列的所有节点 都必须只有一个子结点 2.canDelete放在表头treeForm最后一项，默认true）
-                        if (node.level === treeForm.length - 1) {
-                            if (node.children.length > 1) {
-                                treeForm[node.level].canDelete = false;
-                            }
-                        }
-
-                        // 非最后一列的 正常的非根节点
-                        if (node.children && node.children.length) {
-                            loop(node.children);
-                        }
-                        // 非最后一列的 新增的非根节点(此时是新增一列或新增非根节点行) -添加一个子节点，并把该节点上的subForm属性值全部给下级节点
-                        // 特别提示：新增的是根节点行，不会走此处代码
-                        else {
-                            const newNode = this.getNewNode(node.level + 1, node.children);
-                            subForm.forEach(subFormItem => {
-                                // 用$set也可以
-                                newNode[subFormItem._key] = node[subFormItem._key];
-                                delete node[subFormItem._key];
-                            });
-                            node.children.push(newNode);
-
-                            loop(node.children);
-                        }
-                    }
-                });
-            };
-            loop(nodes);
-            this.isDeleteColStatus = false;
-
-            return nodes;
+            this.change("clearChildNodes", col, row, rowIndex);
         },
-        // 转化渲染使用的columns数组
-        transformRowColumnsArr (nodes = [], treeForm = [], subForm = []) {
-            let loop = (nodes, rowColumnsArr) => {
-                nodes = this.getFilteredNodes(nodes);
-
-                return nodes.reduce((rowColumnsArr, node, nodeIndex) => {
-                    if (nodeIndex !== 0 || rowColumnsArr.length === 0) {
-                        rowColumnsArr.push(
-                            this.mergeColumns(treeForm.slice(node.level - 1), subForm)
-                        );
-                    }
-
-                    if (node.children && node.children.length) {
-                        return loop(node.children, rowColumnsArr);
-                    } else {
-                        return rowColumnsArr;
-                    }
-                }, rowColumnsArr);
-            };
-
-            return loop(nodes, []);
+        change (eventType, col, row, rowIndex, ...params) {
+            this.$emit("change", this.tableDataObj, eventType, col, row, rowIndex, ...params);
         },
-        // 转化表格数据
-        transformRows (nodes = [], treeForm = []) {
-            const loop = (nodes, rows) => {
-                nodes = this.getFilteredNodes(nodes);
-
-                return nodes.reduce((rows, node, nodeIndex) => {
-                    // 创建行，并把节点数据（对象类型）注入到行对象内
-                    if (nodeIndex !== 0 || rows.length === 0) {
-                        rows.push({ _id: this.$ObjectID().str });
-                    }
-                    const curCol = treeForm[node.level - 1];
-                    const curRow = rows[rows.length - 1];
-                    Object.assign(curRow, { [curCol._key]: node });
 
-                    // 判断是否叶子节点，做对应操作
-                    if (node.children && node.children.length) {
-                        const oldLength = rows.length - 1;
-                        const newRows = loop(node.children, rows);
-                        node.total = newRows.length - oldLength;
-                        return newRows;
-                    } else {
-                        return rows;
-                    }
-                }, rows);
-            };
-            return loop(nodes, []);
-        },
-        getFilteredNodes (nodes = []) {
-            const loop = (nodes = []) => {
-                return nodes.filter(node => {
-                    if (node.children && node.children.length) {
-                        const children = loop(node.children);
-                        return !!children.length;
-                    } else {
-                        return this.$isAdvRelyAccord(this.finalTableAdvSearch, node);
-                    }
-                });
-            };
-
-            return loop(nodes);
-        },
-        // 获取节点数据
-        getNodeData (row, rowIndex, col) {
-            let parentNode = this.getParentNode(row, rowIndex, col);
-            return {
-                level: col.level,
-                dataObj: row[col._key],
-                childList: row[col._key].children,
-                brotherList: parentNode.children,
-                index: parentNode.children.findIndex(item => item._id === row[col._key]._id)
-            };
-        },
-        // 获取父节点数据
-        getParentNode (row, rowIndex, col, treeForm = this.treeColumns) {
-            if (col.level === 1) {
-                return {
-                    children: this.allTreeData
-                };
-            } else {
-                let parentCol = treeForm[col.level - 2];
-                let loop = (row, rowIndex) => row[parentCol._key] || loop(this.showListData[rowIndex - 1], rowIndex - 1);
-                return loop(row, rowIndex);
-            }
-        },
-        // 获取节点数据
-        getNewNode (level, list) {
-            return {
-                ...this.$deepCopy(this.selfRowDefault),
-                _id: this.$ObjectID().str,
-                name: `${this.$numToChinese(level)}级节点${list.length + 1}`,
-                level: level,
-                // isLeaf: true,
-                children: []
-            };
-        },
-
-        /* ----- 渲染函数 ---- */
-        // 表格头部渲染函数
+        /* ----------- 渲染函数 ---------- */
+        // 表格表头渲染函数
         getTableHeadRender () {
             return (h) => {
                 return h("div", {
@@ -505,13 +313,11 @@ export default {
                             }, [
                                 h(
                                     "tr",
-                                    {
-                                        class: ""
-                                    },
+                                    {},
                                     this.showColumns.map((column, colIndex) => {
                                         return h("th", {
                                             key: column._id,
-                                            class: "table-th bri-table-th",
+                                            class: "bri-table-th",
                                             style: this.getThStyle(column, "th"),
                                             on: {
                                                 click: () => {
@@ -556,25 +362,25 @@ export default {
                                 class: ""
                             }, [
                                 this.showListData.length
-                                    ? this.showListData.map((row, rowIndex) => {
+                                    ? this.showListData.map((mixedRow, rowIndex) => {
                                         return h(
                                             "tr",
                                             {
-                                                key: row._id,
-                                                class: "table-row"
+                                                key: mixedRow._id,
+                                                class: ""
                                             },
                                             this.rowColumnsArr[rowIndex].map(column => {
                                                 return ["tree", "summary"].includes(column.colType)
                                                     // 树节点单元格、汇总单元格
-                                                    ? this.getTreeTdRender(column, row, rowIndex)(h)
+                                                    ? this.getTreeTdRender(column, mixedRow[column.nodeKey || column._key], rowIndex)(h)
                                                     // 普通单元格
-                                                    : this.getTdRender(column, row, rowIndex)(h);
+                                                    : this.getTdRender(column, mixedRow[column.nodeKey], rowIndex)(h);
                                             })
                                         );
                                     })
                                     // 无数据
                                     : h("tr", {
-                                        class: "table-nodata"
+                                        class: "bri-table-nodata"
                                     }, [
                                         h("td", {
                                             style: {
@@ -594,7 +400,7 @@ export default {
                 ]);
             };
         },
-        // 表头单元格渲染函数 （无法共用contentColumns的renderHeaderCell，因为级联表头的无renderHeaderCell）
+        // 表头单元格渲染函数 （无法共用contentColumns的renderHeaderCell，因为级联老版表头的无renderHeaderCell）
         getThRender (column, colIndex) {
             column = this.$transformDynamicProperty(column, undefined, this.parentObj);
 
@@ -611,39 +417,9 @@ export default {
                         !this.isSearching &&
                         column.colType === "tree" &&
                         column.level === this.treeColumns.length &&
-                        this.$getOperationList(this.getTreeThBtns(column)).length
+                        this.$getOperationList(this.getTreeThBtns(column, colIndex)).length
                     )
-                        ? h("dsh-dropdown", {
-                            class: "table-th-dropdown",
-                            props: {
-                                menuClass: "table-th-dropdown-list",
-                                trigger: "hover",
-                                list: this.$getOperationList(this.getTreeThBtns(column))
-                            },
-                            on: {
-                                click: (operationItem) => {
-                                    this.$dispatchEvent(operationItem, column, colIndex);
-                                }
-                            },
-                            nativeOn: {
-                                click: (e) => {
-                                    e.stopPropagation();
-                                }
-                            }
-                        }, [
-                            h("a", {
-                                attrs: {
-                                    href: "javascript:void(0)"
-                                }
-                            }, [
-                                h("Icon", {
-                                    props: {
-                                        type: "md-add-circle",
-                                        size: "20"
-                                    }
-                                })
-                            ])
-                        ])
+                        ? this.getDropdownRender(h, "th", column, colIndex)
                         : undefined
                 ]);
             };
@@ -653,45 +429,44 @@ export default {
             return (h) => {
                 return h("td", {
                     class: {
-                        [`table-td-${column.colType}`]: true,
-                        "bri-table-td": true, // 可以不要，为了position: relative，上面有
+                        "bri-table-td": true, // 可以不要，为了position: relative，下面有
+                        [`bri-table-td-${column.colType}`]: true,
                         "bri-table-td-edit": this.canEdit
                     },
-                    style: this.getTdStyle(column, row[column.nodeKey]),
+                    style: this.getTdStyle(column, row, rowIndex),
                     attrs: {
-                        rowspan: this.getTdRowSpan(column, row[column.nodeKey || column._key]),
-                        colspan: this.getTdColSpan(column, row[column.nodeKey])
+                        rowspan: this.getTdRowSpan(column, row, rowIndex),
+                        colspan: this.getTdColSpan(column, row, rowIndex)
                     },
                     on: {
                         click: () => {
-                            this.$dispatchEvent(this.operationMap.clickNode, column, row, row[column._key]);
+                            this.$dispatchEvent(this.operationMap.clickNode, column, row, rowIndex);
                         }
                     }
                 }, [
                     column.colType === "tree"
                         // 树节点单元格
-                        ? row[column._key].isEdit
+                        ? row.isEdit
                             // 编辑状态
                             ? h("Input", {
                                 ref: `${column._id}${row._id}`,
-                                class: "textarea",
                                 props: {
-                                    value: row[column._key].name,
+                                    value: row.name,
                                     type: "textarea",
                                     autosize: {
-                                        minRows: this.getTdRowSpan(column, row[column.nodeKey || column._key]) * 3 - 1,
+                                        minRows: this.getTdRowSpan(column, row, rowIndex) * 3 - 1,
                                         maxRows: 100
                                     }
                                 },
                                 on: {
                                     input: val => {
-                                        row[column._key].name = val;
+                                        row.name = val;
                                     },
                                     "on-blur": () => {
-                                        this.$dispatchEvent(this.operationMap.blurNode, column, row, row[column._key]);
+                                        this.$dispatchEvent(this.operationMap.blurNode, column, row, rowIndex);
                                     },
                                     "on-change": () => {
-                                        this.$dispatchEvent(this.operationMap.changeNode, column, row, row[column._key]);
+                                        this.$dispatchEvent(this.operationMap.changeNode, column, row, rowIndex);
                                     }
                                 }
                             })
@@ -699,80 +474,95 @@ export default {
                             : [
                                 h("bri-tooltip", {
                                     props: {
-                                        content: this.$transformEnterToBr(row[column._key].name),
+                                        content: this.$transformEnterToBr(row.name),
                                         transfer: true
                                     }
                                 }, [
                                     h("span", {
                                         domProps: {
-                                            innerHTML: this.$transformEnterToBr(row[column._key].name)
+                                            innerHTML: this.$transformEnterToBr(row.name)
                                         }
                                     })
                                 ]),
 
                                 // 操作下拉
-                                !this.isSearching && this.$getOperationList(this.getTreeTdBtns(column, row, row[column._key])).length
-                                    ? h("dsh-dropdown", {
-                                        class: "table-td-tree-dropdown",
-                                        props: {
-                                            menuClass: "table-td-tree-dropdown-list",
-                                            trigger: "hover",
-                                            list: this.$getOperationList(this.getTreeTdBtns(column, row, row[column._key]))
-                                        },
-                                        on: {
-                                            click: (operationItem) => {
-                                                this.$dispatchEvent(operationItem, row, rowIndex, column);
-                                            }
-                                        },
-                                        nativeOn: {
-                                            click: (e) => {
-                                                e.stopPropagation();
-                                            }
-                                        }
-                                    }, [
-                                        h("a", {
-                                            attrs: {
-                                                href: "javascript:void(0)"
-                                            }
-                                        }, [
-                                            h("Icon", {
-                                                props: {
-                                                    type: "md-add-circle",
-                                                    size: "20"
-                                                }
-                                            })
-                                        ])
-                                    ])
+                                (
+                                    !this.isSearching &&
+                                    this.$getOperationList(this.getTreeTdBtns(column, row, rowIndex)).length
+                                )
+                                    ? this.getDropdownRender(h, "td", column, undefined, row, rowIndex)
                                     : undefined
                             ]
                         // 汇总单元格
-                        : h("span", this.getSummaryVal(column, row[column.nodeKey]))
+                        : h("span", this.getSummaryTdVal(column, row, rowIndex))
                 ]);
             };
         },
         // 普通单元格渲染函数
         getTdRender (column, row, rowIndex) {
             return (h) => {
-                row = row[column.nodeKey];
-
                 return h(
                     "td",
                     {
-                        class: this.tablePropsObj.cellStyleOption.bodyCellClass({ column, row, rowIndex }),
-                        style: this.getTdStyle(column, row)
+                        class: this.tablePropsObj.cellStyleOption.bodyCellClass({ row, rowIndex, column }),
+                        style: this.getTdStyle(column, row, rowIndex)
                     },
                     column
-                        ? column.renderBodyCell({ column, row, rowIndex }, h)
+                        ? column.renderBodyCell({ row, rowIndex, column }, h)
                         : undefined
                 );
             };
         },
+        // 下拉渲染函数
+        getDropdownRender (h, position = "th", column, colIndex, row, rowIndex) {
+            return h("dsh-dropdown", {
+                class: "bri-table-dropdown",
+                props: {
+                    menuClass: "bri-table-dropdown-list",
+                    trigger: "hover",
+                    list: position === "th"
+                        ? this.$getOperationList(this.getTreeThBtns(column, colIndex))
+                        : this.$getOperationList(this.getTreeTdBtns(column, row, rowIndex))
+                },
+                on: {
+                    click: (operationItem) => {
+                        position === "th"
+                            ? this.$dispatchEvent(operationItem, column, colIndex)
+                            : this.$dispatchEvent(operationItem, row, rowIndex, column);
+                    }
+                },
+                nativeOn: {
+                    click: (e) => {
+                        e.stopPropagation();
+                    }
+                }
+            }, [
+                h("a", {
+                    style: {
+                        fontWeight: "500",
+                        color: this.appColor
+                    },
+                    attrs: {
+                        href: "javascript:void(0)"
+                    }
+                }, [
+                    h("Icon", {
+                        props: {
+                            type: "md-arrow-dropdown-circle",
+                            size: "16"
+                        }
+                    })
+                ])
+            ]);
+        },
 
-        /* ----- 方法 ---- */
-        getThStyle (col, position) {
+        /* ----------- 方法 ---------- */
+        // 表头 -获取样式
+        getThStyle (col, position = "th") {
             const boxColWidth = this.boxWidth / this.showColumns.length;
-            const defaultWidth = Math.max(boxColWidth, this.widthMap[col._type], (col._name ? col._name.length * 14 : 36) + (col._type === "reference" ? 200 : 26));
-            const width = col._width || defaultWidth;
+            const calcWidth = (col._name ? col._name.length * 12 : 48) + (col._type === "reference" ? 200 : 32);
+            const dftWidth = Math.max(boxColWidth, this.widthMap[col._type], calcWidth);
+            const width = col._width || dftWidth;
 
             const selfStyle = col.colType === "tree"
                 ? {
@@ -781,7 +571,6 @@ export default {
                 }
                 : col.colType === "summary"
                     ? {
-                        // backgroundColor: "#eeeeee",
                         textAlign: col._align || "right"
                     }
                     : {
@@ -799,19 +588,31 @@ export default {
                 ...selfStyle
             };
         },
-        getTdStyle (col, row) {
+        // 表头 -树节点表头-获取下拉操作
+        getTreeThBtns (col) {
+            return [
+                "createCol",
+                ...(col.level > 1 && col.canDelete === true ? ["deleteCol"] : [])
+            ];
+        },
+
+        // 单元格 -获取样式
+        getTdStyle (col, row, rowIndex) {
             return {
-                ...this.getThStyle(col),
-                backgroundColor: row ? "" : "#fff"
+                ...this.getThStyle(col, "td"),
+                backgroundColor: ["tree"].includes(col.colType) ? "#fbfbfb" : "#ffffff"
             };
         },
-        getTdRowSpan (col, row) {
+        // 单元格 -获取行合并数
+        getTdRowSpan (col, row, rowIndex) {
             return row.total || 1;
         },
-        getTdColSpan (col, row) {
+        // 单元格 -获取列合并数
+        getTdColSpan (col, row, rowIndex) {
             return 1;
         },
-        getSummaryVal (col, row) {
+        // 单元格 -汇总节点单元格-获取值
+        getSummaryTdVal (col, row, rowIndex) {
             if (col._calField && col._operator) {
                 const calFieldFormItem = this.selfColumns.find(item => item._key === col._calField);
 
@@ -840,21 +641,199 @@ export default {
                         : "未选择算法";
             }
         },
-        getTreeThBtns (col) {
-            return [
-                "createCol",
-                ...(
-                    col.level > 1 && col.canDelete === true
-                        ? ["deleteCol"]
-                        : []
-                )
-            ];
+        // 单元格 -树节点单元格-获取下拉操作
+        getTreeTdBtns (col, row, rowIndex) {
+            return row.children.length === 0
+                ? ["canCreateBrother", "deleteSelfAndChildNodes", "clearNode"]
+                : ["canCreateBrother", "canCreateChildNode", "deleteSelfAndChildNodes", "deleteChildNodes", "clearNode", "clearChildNodes"];
+        },
+        // 单元格 -普通单元格-获取节点系列数据
+        getNodeData (col, row, rowIndex) {
+            const parentRow = this.getParentRow(row, this.data);
+
+            return {
+                level: col.level,
+                dataObj: row,
+                childList: row.children,
+                brotherList: parentRow.children,
+                index: parentRow.children.findIndex(childRowItem => childRowItem._id === row._id)
+            };
+        },
+        // 单元格 -普通单元格-新增节点数据
+        getNewNode (level, list) {
+            return {
+                ...this.$deepCopy(this.selfRowDefault),
+                _id: this.$ObjectID().str,
+                name: `${this.$numToChinese(level)}级节点${list.length + 1}`,
+                level: level,
+                isLeaf: true,
+                children: []
+            };
+        },
+
+        /* ----------- 工具方法 ---------- */
+        // 合并表头
+        mergeColumns (treeForm = [], subForm = []) {
+            return treeForm
+                .reduce((arr, treeFormItem, treeFormIndex) => {
+                    return arr.concat(
+                        {
+                            ...treeFormItem,
+                            colType: "tree"
+                        },
+                        treeFormItem._treeSubForm.map(treeSubFormItem => (
+                            {
+                                ...treeSubFormItem,
+                                nodeKey: treeFormItem._key,
+                                colType: "summary"
+                            }
+                        ))
+                    );
+                }, [])
+                .concat(
+                    subForm.filter(subFormItem =>
+                        this.hideStatus === true
+                            ? !this.hideColKeys.includes(subFormItem._key)
+                            : true
+                    ).map(subFormItem => (
+                        {
+                            ...subFormItem,
+                            nodeKey: treeForm[treeForm.length - 1]._key,
+                            colType: "data"
+                        }
+                    ))
+            );
+        },
+        // 转化树数据
+        getCalcuedTree (nodes = [], treeForm = [], subForm = []) {
+            treeForm.forEach((treeFormItem, treeFormIndex) => {
+                treeFormItem.canDelete = true; // 每次计算，重置一下
+                treeFormItem.level = treeFormIndex + 1; // treeColumns更新,缺少level
+            });
+
+            // 循环遍树节点
+            const loop = (nodes = []) => {
+                nodes.forEach(node => {
+                    // 初始化树节点的数据，给节点加上一些属性并监测，注入到节点对象中
+                    let curCol = treeForm[node.level - 1];
+                    this.$setObj(node, {
+                        _key: curCol._key,
+                        level: curCol.level,
+                        isEdit: false,
+                        isLeaf: false,
+                        total: 1
+                    });
+
+                    // 最后一列（根节点）
+                    if (node.level === treeForm.length) {
+                        // 处理删除了最后一列后，把根节点上的subForm属性值全部给上级节点
+                        if (this.isDeleteColStatus) {
+                            let subNode = node.children[0];
+                            subForm.forEach(subFormItem => {
+                                // 用$set也可以
+                                node[subFormItem._key] = subNode[subFormItem._key];
+                            });
+                        }
+
+                        node.children = [];
+                        node.isLeaf = true;
+                    }
+                    // 非最后一列（最后一列前的列，非根节点），需继续向下循环
+                    else {
+                        // 判断是否能删除最后一列（1.判断条件：判断根节点列的前一列的所有节点 都必须只有一个子结点 2.canDelete放在表头treeForm最后一项，默认true）
+                        if (node.level === treeForm.length - 1) {
+                            if (node.children.length > 1) {
+                                treeForm[node.level].canDelete = false;
+                            }
+                        }
+
+                        // 非最后一列的 正常的非根节点
+                        if (node.children && node.children.length) {
+                            loop(node.children);
+                        }
+                        // 非最后一列的 新增的非根节点(此时是新增一列或新增非根节点行) -添加一个子节点，并把该节点上的subForm属性值全部给下级节点
+                        // 特别提示：新增的是根节点行，不会走此处代码
+                        else {
+                            const newNode = this.getNewNode(node.level + 1, node.children);
+                            subForm.forEach(subFormItem => {
+                                // 用$set也可以
+                                newNode[subFormItem._key] = node[subFormItem._key];
+                                delete node[subFormItem._key];
+                            });
+                            node.children.push(newNode);
+
+                            loop(node.children);
+                        }
+                    }
+                });
+            };
+            loop(nodes);
+            this.isDeleteColStatus = false;
+
+            return nodes;
         },
-        // 获得节点的 操作下拉列表
-        getTreeTdBtns (col, row, nodeData) {
-            return nodeData.children.length === 0
-                ? ["createBrotherNode", "deleteSelfAndChildNodes", "clearNode"]
-                : ["createBrotherNode", "createChildNode", "deleteSelfAndChildNodes", "deleteChildNodes", "clearNode", "clearChildNodes"];
+        // 转化渲染使用的columns数组
+        transformRowColumnsArr (nodes = [], treeForm = [], subForm = []) {
+            let loop = (nodes, rowColumnsArr) => {
+                nodes = this.getFilteredNodes(nodes);
+
+                return nodes.reduce((rowColumnsArr, node, nodeIndex) => {
+                    if (nodeIndex !== 0 || rowColumnsArr.length === 0) {
+                        rowColumnsArr.push(
+                            this.mergeColumns(treeForm.slice(node.level - 1), subForm)
+                        );
+                    }
+
+                    if (node.children && node.children.length) {
+                        return loop(node.children, rowColumnsArr);
+                    } else {
+                        return rowColumnsArr;
+                    }
+                }, rowColumnsArr);
+            };
+
+            return loop(nodes, []);
+        },
+        // 转化表格数据
+        transformRows (nodes = [], treeForm = []) {
+            const loop = (nodes, rows) => {
+                nodes = this.getFilteredNodes(nodes);
+
+                return nodes.reduce((rows, node, nodeIndex) => {
+                    // 创建行，并把节点数据（对象类型）注入到行对象内
+                    if (nodeIndex !== 0 || rows.length === 0) {
+                        rows.push({ _id: this.$ObjectID().str });
+                    }
+                    const curCol = treeForm[node.level - 1];
+                    const curRow = rows[rows.length - 1];
+                    Object.assign(curRow, { [curCol._key]: node });
+
+                    // 判断是否叶子节点，做对应操作
+                    if (node.children && node.children.length) {
+                        const oldLength = rows.length - 1;
+                        const newRows = loop(node.children, rows);
+                        node.total = newRows.length - oldLength;
+                        return newRows;
+                    } else {
+                        return rows;
+                    }
+                }, rows);
+            };
+            return loop(nodes, []);
+        },
+        getFilteredNodes (nodes = []) {
+            const loop = (nodes = []) => {
+                return nodes.filter(node => {
+                    if (node.children && node.children.length) {
+                        const children = loop(node.children);
+                        return !!children.length;
+                    } else {
+                        return this.$isAdvRelyAccord(this.finalTableAdvSearch, node);
+                    }
+                });
+            };
+
+            return loop(nodes);
         }
     }
 };