bri-components 1.3.67 → 1.3.69

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

@@ -0,0 +1,857 @@
+export default {
+    mixins: [],
+    components: {},
+    props: {
+        tableDataObj: {
+            type: Object,
+            default () {
+                return {
+                    tree: [],
+                    list: [],
+                    _treeForm: []
+                };
+            }
+        },
+        treeColumns: {
+            type: Array,
+            default () {
+                return [];
+            }
+        }
+    },
+    data () {
+        return {
+            boxWidth: 0,
+
+            baseOperationMap: {
+                clickTh: {
+                    name: "点击列的表头",
+                    type: "clickTh",
+                    event: "clickTh"
+                },
+                createCol: {
+                    name: "添加一列",
+                    type: "createCol",
+                    icon: "md-add",
+                    event: "createCol"
+                },
+                deleteCol: {
+                    name: "删除该列",
+                    type: "deleteCol",
+                    icon: "md-trash",
+                    color: "red",
+                    event: "deleteCol"
+                },
+
+                clickNode: {
+                    name: "点击节点",
+                    type: "clickNode",
+                    event: "clickNode"
+                },
+                blurNode: {
+                    name: "节点失去焦点",
+                    type: "blurNode",
+                    event: "blurNode"
+                },
+                changeNode: {
+                    name: "改变节点值",
+                    type: "changeNode",
+                    event: "changeNode"
+                },
+
+                createBrotherNode: {
+                    name: "添加同级节点",
+                    type: "createBrotherNode",
+                    icon: "md-add",
+                    event: "createBrotherNode"
+                },
+                createChildNode: {
+                    name: "添加子节点",
+                    type: "createChildNode",
+                    icon: "md-add",
+                    event: "createChildNode"
+                },
+                deleteSelfAndChildNodes: {
+                    name: "删除该节点",
+                    type: "deleteSelfAndChildNodes",
+                    icon: "md-trash",
+                    color: "red",
+                    divided: true,
+                    event: "deleteSelfAndChildNodes"
+                },
+                deleteChildNodes: {
+                    name: "删除所有子节点",
+                    type: "deleteChildNodes",
+                    icon: "md-trash",
+                    color: "red",
+                    event: "deleteChildNodes"
+                },
+                clearNode: {
+                    name: "清除该节点内容",
+                    type: "clearNode",
+                    icon: "md-trash",
+                    divided: true,
+                    event: "clearNode"
+                },
+                clearChildNodes: {
+                    name: "清除所有子节点内容",
+                    type: "clearChildNodes",
+                    icon: "md-trash",
+                    event: "clearChildNodes"
+                }
+            }
+        };
+    },
+    computed: {
+        selfPropsObj () {
+            return {
+                ...this.commonPropsObj,
+
+                _contentHeight: this.propsObj._contentHeight || 400 // 表格最大高度
+            };
+        },
+
+        allTreeData () {
+            console.log("allTreeData");
+            return this.getCalcuedTree(this.data, this.treeColumns, this.columns);
+        },
+        allListData () {
+            return this.$getTreeFlatArr(this.data, node => !(node.children && node.children.length));
+        },
+        showListData () {
+            return this.transformRows(this.allTreeData, this.treeColumns);
+        },
+
+        showColumns () {
+            return this.mergeColumns(this.treeColumns, this.contentColumns);
+        },
+        // 供表格渲染行使用的columns的数组集合, 每一行columns不一样，组成二重数组
+        rowColumnsArr () {
+            return this.transformRowColumnsArr(this.allTreeData, this.treeColumns, this.contentColumns);
+        }
+    },
+    created () {
+        this.init();
+    },
+    mounted () {
+        setTimeout(() => {
+            this.$el.querySelector(".DshCasTable-main-center-list").addEventListener("scroll", (e) => {
+                this.$el.querySelector(".DshCasTable-main-center-top").scrollLeft = e.srcElement.scrollLeft;
+            }, false);
+            this.boxWidth = this.$refs.DshCascaderTable.clientWidth;
+        }, 0);
+    },
+    methods: {
+        // 初始化
+        init () {
+            this.treeColumns.forEach((treeFormItem, treeFormIndex) => {
+                this.$set(treeFormItem, "level", treeFormIndex + 1);
+                this.$set(treeFormItem, "canDelete", true);
+            });
+
+            // 循环遍树,给根节点赋值
+            let loop = (nodes = []) => {
+                nodes.forEach(node => {
+                    if (node.children && node.children.length) {
+                        loop(node.children);
+                    } else {
+                        // 根节点下所有表格字段加上监测，注入到节点对象中，必须$set，牵扯_rely值再出现并没有检测
+                        this.columns.forEach(subFormItem => {
+                            this.$set(node, subFormItem._key, node[subFormItem._key]);
+                        });
+                    }
+                });
+            };
+            loop(this.data);
+        },
+
+        /* ----- 表头操作 ------ */
+        // 点击表头
+        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({
+                    _id: this.$ObjectID().str,
+                    _key: this.$randomB36("Field"),
+                    _type: "textarea",
+                    _name: `${this.$numToChinese(this.treeColumns.length + 1)}级表头`,
+                    level: this.treeColumns.length + 1,
+                    canDelete: true,
+                    _treeSubForm: []
+                });
+                this.tableDataObj._treeForm = this.treeColumns;
+
+                this.change("createCol", col);
+            }
+        },
+        // 树形表头列 -删除
+        deleteCol (operationItem, col, colIndex) {
+            if (col.colType === "tree" && col.canDelete !== false) {
+                this.isDeleteColStatus = true; // isDeleteStatus不用在data中定义
+                this.treeColumns.pop();
+                this.tableDataObj._treeForm = this.treeColumns;
+
+                this.change("deleteCol", col);
+            }
+        },
+
+        /* ----- 树节点操作 ------ */
+        // 点击节点
+        clickNode (operationItem, col, row, nodeData) {
+            if (col.colType === "tree") {
+                nodeData.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: "该汇总单元格自动计算，不准手动输入！",
+                    closable: true,
+                    onOk: () => { },
+                    onCancel: () => { }
+                });
+            }
+        },
+        // 节点失去焦点
+        blurNode (operationItem, col, row, nodeData) {
+            nodeData.isEdit = false;
+        },
+        // 改变节点名
+        changeNode (operationItem, col, row, nodeData) {
+            this.change("changeNode", col, row, nodeData);
+        },
+
+        /* ---- 节点操作 ----- */
+        // 添加同级节点
+        createBrotherNode (operationItem, row, rowIndex, col) {
+            let nodeData = this.getNodeData(row, rowIndex, col);
+            let newNode = this.getNewNode(nodeData.level, nodeData.brotherList);
+            nodeData.brotherList.splice(nodeData.index + 1, 0, newNode);
+
+            this.change("createBrotherNode", col, row, nodeData);
+        },
+        // 添加子节点
+        createChildNode (operationItem, row, rowIndex, col) {
+            let nodeData = this.getNodeData(row, rowIndex, col);
+            let newNode = this.getNewNode(nodeData.level + 1, nodeData.childList);
+            nodeData.childList.splice(nodeData.childList.length, 0, newNode);
+
+            this.change("createChildNode", col, row, nodeData);
+        },
+        // 删除该节点
+        deleteSelfAndChildNodes (operationItem, row, rowIndex, col) {
+            let nodeData = this.getNodeData(row, rowIndex, col);
+            nodeData.brotherList.splice(nodeData.index, 1);
+            // 此处应该判断子节点是否是最后一个，是的话就要添加一个一直到叶子节点，不过现在只需要添加一个子节点，transforBriTreeData会捎带着处理了
+            if (!nodeData.brotherList.length) {
+                let newNode = this.getNewNode(nodeData.level, nodeData.brotherList);
+                nodeData.brotherList.push(newNode);
+            }
+
+            this.change("deleteSelfAndChildNodes", col, row, nodeData);
+        },
+        // 删除所有子节点
+        deleteChildNodes (operationItem, row, rowIndex, col) {
+            let nodeData = this.getNodeData(row, rowIndex, col);
+            nodeData.childList.splice(0);
+            // 删除完应该添加一个子节点一直到叶子节点，不过现在只需要添加一个子节点，transforBriTreeData会捎带着处理了
+            let newNode = this.getNewNode(nodeData.level + 1, nodeData.childList);
+            nodeData.childList.push(newNode);
+
+            this.change("deleteChildNodes", col, row, nodeData);
+        },
+        // 清除该节点内容
+        clearNode (operationItem, row, rowIndex, col) {
+            let nodeData = this.getNodeData(row, rowIndex, col);
+            nodeData.dataObj.name = "";
+
+            this.change("clearNode", col, row, nodeData);
+        },
+        // 清除所有子节点内容
+        clearChildNodes (operationItem, row, rowIndex, col) {
+            let nodeData = this.getNodeData(row, rowIndex, col);
+            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;
+        },
+        // 转化渲染使用的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);
+        },
+        // 获取节点数据
+        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", {
+                    class: "DshCasTable-main-center-top"
+                }, [
+                    h("div", {
+                        class: "DshCasTable-main-center-top-inner"
+                    }, [
+                        h("table", {
+                            class: "table",
+                            attrs: {
+                                border: "1",
+                                cellspacin: "0",
+                                bordercolor: "#E7EDF8"
+                            }
+                        }, [
+                            h("tbody", {
+                                class: ""
+                            }, [
+                                h(
+                                    "tr",
+                                    {
+                                        class: ""
+                                    },
+                                    this.showColumns.map((column, colIndex) => {
+                                        return h("th", {
+                                            key: column._id,
+                                            class: "table-th bri-table-th",
+                                            style: this.getThStyle(column, "th"),
+                                            on: {
+                                                click: () => {
+                                                    this.$dispatchEvent(this.operationMap.clickTh, column, colIndex);
+                                                }
+                                            }
+                                        }, [
+                                            // 表头单元格
+                                            this.getThRender(column, colIndex)(h)
+                                            // h("dsh-render", {
+                                            //     props: {
+                                            //         render: this.getThRender(column, colIndex)
+                                            //     }
+                                            // })
+                                        ]);
+                                    })
+                                )
+                            ])
+                        ])
+                    ])
+                ]);
+            };
+        },
+        // 表格内容渲染函数
+        getTableBodyRender () {
+            return (h) => {
+                return h("div", {
+                    class: "DshCasTable-main-center-list"
+                }, [
+                    h("div", {
+                        class: "DshCasTable-main-center-list-inner"
+                    }, [
+                        h("table", {
+                            class: "table",
+                            attrs: {
+                                border: "1",
+                                cellspacin: "0",
+                                bordercolor: "#E7EDF8"
+                            }
+                        }, [
+                            h("tbody", {
+                                class: ""
+                            }, [
+                                this.showListData.length
+                                    ? this.showListData.map((row, rowIndex) => {
+                                        return h(
+                                            "tr",
+                                            {
+                                                key: row._id,
+                                                class: "table-row"
+                                            },
+                                            this.rowColumnsArr[rowIndex].map(column => {
+                                                return ["tree", "summary"].includes(column.colType)
+                                                    // 树节点单元格、汇总单元格
+                                                    ? this.getTreeTdRender(column, row, rowIndex)(h)
+                                                    // 普通单元格
+                                                    : this.getTdRender(column, row, rowIndex)(h);
+                                            })
+                                        );
+                                    })
+                                    // 无数据
+                                    : h("tr", {
+                                        class: "table-nodata"
+                                    }, [
+                                        h("td", {
+                                            style: {
+                                                width: `${this.boxWidth}px`,
+                                                minWidth: `${this.boxWidth}px`,
+                                                maxWidth: `${this.boxWidth}px`
+                                            },
+                                            attrs: {
+                                                rowspan: 1,
+                                                colspan: this.showColumns.length
+                                            }
+                                        }, "暂无数据…")
+                                    ])
+                            ])
+                        ])
+                    ])
+                ]);
+            };
+        },
+        // 表头单元格渲染函数
+        getThRender (column, colIndex) {
+            return (h) => {
+                return h("div", [
+                    this.$getHeadRender(h, column, {
+                        showRequired: this.showRequired,
+                        showDescription: this.showDescription,
+                        headHeightAuto: this.headHeightAuto
+                    }),
+
+                    // 级联最末级表头的下拉
+                    (
+                        !this.isSearching &&
+                        column.colType === "tree" &&
+                        column.level === this.treeColumns.length &&
+                        this.$getOperationList(this.getTreeThBtns(column)).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"
+                                    }
+                                })
+                            ])
+                        ])
+                        : undefined
+                ]);
+            };
+        },
+        // 树节点单元格、汇总单元格渲染函数
+        getTreeTdRender (column, row, rowIndex) {
+            return (h) => {
+                return h("td", {
+                    class: {
+                        [`table-td-${column.colType}`]: true,
+                        "bri-table-td": true, // 可以不要，为了position: relative，上面有
+                        "bri-table-td-edit": this.canEdit
+                    },
+                    style: this.getTdStyle(column, row[column.nodeKey]),
+                    attrs: {
+                        rowspan: this.getTdRowSpan(column, row[column.nodeKey || column._key]),
+                        colspan: this.getTdColSpan(column, row[column.nodeKey])
+                    },
+                    on: {
+                        click: () => {
+                            this.$dispatchEvent(this.operationMap.clickNode, column, row, row[column._key]);
+                        }
+                    }
+                }, [
+                    column.colType === "tree"
+                        // 树节点单元格
+                        ? row[column._key].isEdit
+                            // 编辑状态
+                            ? h("Input", {
+                                ref: `${column._id}${row._id}`,
+                                class: "textarea",
+                                props: {
+                                    value: row[column._key].name,
+                                    type: "textarea",
+                                    autosize: {
+                                        minRows: this.getTdRowSpan(column, row[column.nodeKey || column._key]) * 3 - 1,
+                                        maxRows: 100
+                                    }
+                                },
+                                on: {
+                                    input: val => {
+                                        row[column._key].name = val;
+                                    },
+                                    "on-blur": () => {
+                                        this.$dispatchEvent(this.operationMap.blurNode, column, row, row[column._key]);
+                                    },
+                                    "on-change": () => {
+                                        this.$dispatchEvent(this.operationMap.changeNode, column, row, row[column._key]);
+                                    }
+                                }
+                            })
+                            // 查看状态
+                            : [
+                                h("bri-tooltip", {
+                                    props: {
+                                        content: this.$transformEnterToBr(row[column._key].name),
+                                        transfer: true
+                                    }
+                                }, [
+                                    h("span", {
+                                        domProps: {
+                                            innerHTML: this.$transformEnterToBr(row[column._key].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"
+                                                }
+                                            })
+                                        ])
+                                    ])
+                                    : undefined
+                            ]
+                        // 汇总单元格
+                        : h("span", this.getSummaryVal(column, row[column.nodeKey]))
+                ]);
+            };
+        },
+        // 普通单元格渲染函数
+        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)
+                    },
+                    column
+                        ? column.renderBodyCell({ column, row, rowIndex }, h)
+                        : undefined
+                );
+            };
+        },
+
+        /* ----- 方法 ---- */
+        getThStyle (col, position) {
+            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 selfStyle = col.colType === "tree"
+                ? {
+                    textAlign: col._align || "left",
+                    fontSize: "14px"
+                }
+                : col.colType === "summary"
+                    ? {
+                        // backgroundColor: "#eeeeee",
+                        textAlign: col._align || "right"
+                    }
+                    : {
+                        textAlign: col._align || "left"
+            };
+
+            return {
+                width: `${width}px`,
+                minWidth: `${width}px`,
+                maxWidth: `${width}px`,
+                paddingTop: position === "th" && !this.headHeightAuto ? "10px" : undefined,
+                paddingBottom: position === "th" && !this.headHeightAuto ? "10px" : undefined,
+                "word-break": "break-all",
+                cursor: "pointer",
+                ...selfStyle
+            };
+        },
+        getTdStyle (col, row) {
+            return {
+                ...this.getThStyle(col),
+                backgroundColor: row ? "" : "#fff"
+            };
+        },
+        getTdRowSpan (col, row) {
+            return row.total || 1;
+        },
+        getTdColSpan (col, row) {
+            return 1;
+        },
+        getSummaryVal (col, row) {
+            if (col._calField && col._operator) {
+                const calFieldFormItem = this.columns.find(item => item._key === col._calField);
+
+                if (calFieldFormItem) {
+                    let loop = (nodes, arr) => {
+                        return nodes.reduce((arr, node) => {
+                            if (node.children.length) {
+                                return loop(node.children, arr);
+                            } else {
+                                arr.push(node[col._calField] || 0);
+                                return arr;
+                            }
+                        }, arr);
+                    };
+                    let list = loop(row.children, []);
+
+                    return this.$calNumList(list, col._operator, calFieldFormItem);
+                } else {
+                    return `来源列${col._calField}被删除`;
+                }
+            } else {
+                return !col._calField && !col._operator
+                    ? "未选择来源列和算法"
+                    : !col._calField
+                        ? "未选择来源列"
+                        : "未选择算法";
+            }
+        },
+        getTreeThBtns (col) {
+            return [
+                "createCol",
+                ...(
+                    col.level > 1 && col.canDelete === true
+                        ? ["deleteCol"]
+                        : []
+                )
+            ];
+        },
+        // 获得节点的 操作下拉列表
+        getTreeTdBtns (col, row, nodeData) {
+            return nodeData.children.length === 0
+                ? ["createBrotherNode", "deleteSelfAndChildNodes", "clearNode"]
+                : ["createBrotherNode", "createChildNode", "deleteSelfAndChildNodes", "deleteChildNodes", "clearNode", "clearChildNodes"];
+        }
+    }
+};