bri-components 1.0.0

package/src/components/list/DshCascaderTable.vue

@@ -0,0 +1,817 @@
+<template>
+    <div
+        :class="`DshCascaderTable control-${mode}`"
+        ref="DshCascaderTable"
+    >
+        <div :class="{
+            'DshCascaderTable-wrap': true,
+            'DshCascaderTable-readonly': !canEdit
+        }">
+            <div class="DshCascaderTable-wrap-center">
+                <!-- 表头 -->
+                <div class="DshCascaderTable-wrap-center-top">
+                    <div class="DshCascaderTable-wrap-center-top-inner">
+                        <table
+                            class="table"
+                            border="1"
+                            cellspacing="0"
+                            bordercolor="#E7EDF8"
+                        >
+                            <tbody>
+                                <tr class="table-col">
+                                    <th
+                                        v-for="(col, colIndex) in columns"
+                                        :key="col._id"
+                                        class="td-tree"
+                                        :style="getThStyle(col)"
+                                        @click="$dispatchEvent(operationMap.clickTh, col)"
+                                    >
+                                        <span>
+                                            <i
+                                                v-if="col._required"
+                                                style="color:red"
+                                            >*</i>
+                                            {{ col._name }}
+                                        </span>
+
+                                        <!-- 级联表头 的下拉 -->
+                                        <dsh-dropdown
+                                            v-if="
+                                                useCol &&
+                                                col.colType === 'tree' &&
+                                                col.level === treeColumns.length &&
+                                                $getOperationList(getColOperationNames(col)).length
+                                            "
+                                            class="td-tree-dropdown"
+                                            menuClass="td-tree-dropdown-list"
+                                            trigger="hover"
+                                            :list="$getOperationList(getColOperationNames(col))"
+                                            @click="$dispatchEvent($event, col, colIndex, columns)"
+                                            @click.native.stop="0"
+                                        >
+                                            <a href="javascript:void(0)">
+                                                <Icon
+                                                    type="md-add-circle"
+                                                    size="20"
+                                                />
+                                            </a>
+                                        </dsh-dropdown>
+                                    </th>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <!-- 数据行 -->
+                <div class="DshCascaderTable-wrap-center-list">
+                    <div class="DshCascaderTable-wrap-center-list-inner">
+                        <table
+                            class="table"
+                            border="1"
+                            cellspacing="0"
+                            bordercolor="#E7EDF8"
+                        >
+                            <tbody>
+                                <template v-if="rows.length">
+                                    <tr
+                                        v-for="(row, rowIndex) in rows"
+                                        :key="row._id"
+                                        class="table-row"
+                                    >
+                                        <template v-for="col in rowColumnsArr[rowIndex]">
+                                            <td
+                                                v-if="['tree', 'summary'].includes(col.colType)"
+                                                :key="col._key"
+                                                :class="`td-${col.colType}`"
+                                                :style="getTdStyle(col, row)"
+                                                :rowspan="geTdRowspan(col, row)"
+                                                :colspan="geTdColspan(col, row)"
+                                                @click="$dispatchEvent(operationMap.clickNode, col, row, row[col._key])"
+                                            >
+                                                <!-- 树节点单元格 -->
+                                                <template v-if="col.colType === 'tree'">
+                                                    <!-- 编辑状态 -->
+                                                    <Input
+                                                        v-if="row[col._key].isEdit"
+                                                        :ref="`${col._id}${row._id}`"
+                                                        v-model="row[col._key].name"
+                                                        class="textarea"
+                                                        type="textarea"
+                                                        :autosize="{ minRows: geTdRowspan(col, row) * 3 - 1, maxRows: 100 }"
+                                                        @on-blur="$dispatchEvent(operationMap.blurNode, col, row, row[col._key])"
+                                                        @on-change="$dispatchEvent(operationMap.changeNode, col, row, row[col._key])"
+                                                    />
+
+                                                    <!-- 查看状态 -->
+                                                    <template v-else>
+                                                        <Ctooltip
+                                                            :transfer="true"
+                                                            :content="enterText(row[col._key].name)"
+                                                        >
+                                                            <span
+                                                                v-html="enterText(row[col._key].name)"
+                                                                class="dsh-ellipsis"
+                                                                style="word-break:break-word"
+                                                            ></span>
+                                                        </Ctooltip>
+
+                                                        <!-- 操作下拉 -->
+                                                        <dsh-dropdown
+                                                            v-if="$getOperationList(getNodeOperationNames(col, row, row[col._key])).length"
+                                                            class="td-tree-dropdown"
+                                                            menuClass="td-tree-dropdown-list"
+                                                            trigger="hover"
+                                                            :list="$getOperationList(getNodeOperationNames(col, row, row[col._key]))"
+                                                            @click="$dispatchEvent($event, row, rowIndex, col)"
+                                                            @click.native.stop="0"
+                                                        >
+                                                            <a href="javascript:void(0)">
+                                                                <Icon
+                                                                    type="md-add-circle"
+                                                                    size="20"
+                                                                />
+                                                            </a>
+                                                        </dsh-dropdown>
+                                                    </template>
+                                                </template>
+
+                                                <!-- 汇总单元格 -->
+                                                <template v-else-if="col.colType === 'summary'">
+                                                    <span>{{ getSummaryVal(col, row) }}</span>
+                                                </template>
+                                            </td>
+
+                                            <!-- 普通单元格 -->
+                                            <td
+                                                v-else
+                                                :key="col._key"
+                                                :style="getTdStyle(col, row)"
+                                            >
+                                                <dsh-unit
+                                                    :mode="mode"
+                                                    :canEdit="canEdit && (col.canEdit === undefined ? true : col.canEdit)"
+                                                    :formData="row[col.nodeKey]"
+                                                    :formItem="col"
+                                                    :rowIndex="rowIndex"
+                                                    @change="$dispatchEvent(operationMap.changeVal, col, row, arguments)"
+                                                ></dsh-unit>
+                                            </td>
+                                        </template>
+                                    </tr>
+                                </template>
+
+                                <!-- 无数据 -->
+                                <tr
+                                    v-else
+                                    class="table-nodata"
+                                >
+                                    <td :colspan="columns.length">暂无数据……</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import DshUnit from "../unit/DshUnit.vue";
+
+    export default {
+        name: "DshCascaderTable",
+        components: {
+            DshUnit
+        },
+        props: {
+            mode: {
+                type: String,
+                default: "default"
+            },
+            useCol: {
+                type: Boolean,
+                default: false
+            },
+            canEdit: {
+                type: Boolean,
+                default: true
+            },
+
+            data: {
+                type: Object,
+                default () {
+                    return {
+                        tree: [],
+                        list: [],
+                        rowDefault: {},
+                        _treeForm: []
+                    };
+                }
+            },
+            treeColumns: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            subColumns: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            }
+        },
+        data () {
+            return {
+                widthMap: this.$getModFieldPropertyMap("unitWidth"),
+                boxWidth: 0,
+                getColOperationNames (col) {
+                    return [
+                        "createCol",
+                        ...(
+                            col.level > 1 && col.canDelete === true
+                                ? ["deleteCol"]
+                                : []
+                        )
+                    ];
+                },
+
+                allOperationMap: {
+                    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"
+                    },
+
+                    changeVal: {
+                        name: "改变输入框值",
+                        type: "changeVal",
+                        event: "changeVal"
+                    }
+                }
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    _disabledBtns: false, // 禁用增删按钮
+                    ...this.propsObj
+                };
+            },
+            disabledBtns () {
+                return this.selfPropsObj._disabledBtns;
+            },
+
+            treeData () {
+                return this.transformTreeData();
+            },
+            columns () {
+                return this.transformColumns(this.treeColumns);
+            },
+            rows () {
+                return this.transformRows();
+            },
+            // 供表格渲染行使用的columns的数组集合, 每一行columns不一样，组成二重数组
+            rowColumnsArr () {
+                return this.transformRowColumnsArr();
+            },
+
+            operationMap () {
+                return this.canEdit
+                    ? this.$categoryMapToMap(
+                        this.allOperationMap,
+                        undefined,
+                        undefined,
+                        this.disabledBtns ? ["changeVal"] : undefined
+                    )
+                    : {};
+            },
+            getThStyle () {
+                return function (col) {
+                    let length = this.columns.length;
+                    let typeWidth = this.widthMap[col._type];
+                    if (col._type == "number") {
+                        typeWidth = 110;
+                    } else if (col._type === "reference") {
+                        typeWidth = (col._name ? col._name.length * 14 : 36) + 200;
+                    }
+                    let width = col.colType === "tree"
+                        ? Math.min(Math.max(this.boxWidth / length, 80), 160)
+                        : col.colType === "summary"
+                            ? 100
+                            : Math.max((this.boxWidth / length), typeWidth);
+                    let selfStyle = col.colType === "tree"
+                        ? {
+                            backgroundColor: "f0f0f0",
+                            textAlign: "center",
+                            fontSize: "14px"
+                        }
+                        : col.colType === "summary"
+                            ? {
+                                backgroundColor: "#eeeeee",
+                                textAlign: "right"
+                            }
+                            : {textAlign: col._align || "left"};
+                    width = col._width || width;
+                    return {
+                        width: `${width}px`,
+                        minWidth: `${width}px`,
+                        maxWidth: `${width}px`,
+                        height: "44px",
+                        padding: "5px 5px",
+                        cursor: "pointer",
+                        lineHeight: "20px",
+                        ...selfStyle
+                    };
+                };
+
+            }
+        },
+        created () {
+            this.init();
+        },
+        mounted () {
+            setTimeout(() => {
+                this.$el.querySelector(".DshCascaderTable-wrap-center-list").addEventListener("scroll", (e) => {
+                    this.$el.querySelector(".DshCascaderTable-wrap-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.length) {
+                            loop(node.children);
+                        } else {
+                            // 根节点下所有表格字段加上监测，注入到节点对象中，必须$set，牵扯_rely值再出现并没有检测
+                            this.subColumns.forEach(subFormItem => {
+                                this.$set(node, subFormItem._key, node[subFormItem._key]);
+                            });
+                        }
+                    });
+                };
+                loop(this.data.tree);
+            },
+
+            // 点击表头
+            clickTh (operationItem, col) {
+                this.$emit("clickTh", col);
+            },
+            // 树形表头列 -添加
+            createCol (operationItem, col, colIndex, list) {
+                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.data._treeForm = this.treeColumns;
+
+                    this.change("createCol", col, null);
+                }
+            },
+            // 树形表头列 -删除
+            deleteCol (operationItem, col, colIndex, list) {
+                if (col.colType === "tree" && col.canDelete !== false) {
+                    this.isDeleteColStatus = true; // isDeleteStatus不用在data中定义
+                    this.treeColumns.pop();
+                    this.data._treeForm = this.treeColumns;
+
+                    this.change("deleteCol", col, null);
+                }
+            },
+
+            /* ----- 树节点事件 ------ */
+            // 点击节点
+            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);
+                // 此处应该判断子节点是否是最后一个，是的话就要添加一个一直到叶子节点，不过现在只需要添加一个子节点，transformTreeData会捎带着处理了
+                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);
+                // 删除完应该添加一个子节点一直到叶子节点，不过现在只需要添加一个子节点，transformTreeData会捎带着处理了
+                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.data.name = "";
+
+                this.change("clearNode", col, row, nodeData);
+            },
+            // 清除所有子节点内容
+            clearChildNodes (operationItem, row, rowIndex, col) {
+                let nodeData = this.getNodeData(row, rowIndex, col);
+                this.clearNodeToLeaf(nodeData.childList);
+
+                this.change("clearChildNodes", col, row, nodeData);
+            },
+            // 输入框值改变
+            changeVal (operationItem, col, row, params) {
+                this.change("changeVal", col, row, params);
+            },
+
+            /* ---- 工具方法 ---- */
+            // 合并表头
+            transformColumns (treeForm = this.treeColumns, subForm = this.subColumns) {
+                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 => subFormItem._displayType !== "hide")
+                            .map(subFormItem => (
+                                {
+                                    ...subFormItem,
+                                    nodeKey: treeForm[treeForm.length - 1]._key,
+                                    colType: "data"
+                                }
+                            ))
+                );
+            },
+            // 转化树数据
+            transformTreeData (treeForm = this.treeColumns, subForm = this.subColumns) {
+                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.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(this.data.tree);
+                this.isDeleteColStatus = false;
+
+                return this.data.tree;
+            },
+            // 转化渲染使用的columns数组
+            transformRowColumnsArr (nodes = this.treeData, treeForm = this.treeColumns) {
+                let loop = (nodes, rowColumnsArr) => {
+                    return nodes.reduce((rowColumnsArr, node, nodeIndex) => {
+                        if (nodeIndex !== 0 || rowColumnsArr.length === 0) {
+                            rowColumnsArr.push(this.transformColumns(treeForm.slice(node.level - 1)));
+                        }
+
+                        if (node.children.length) {
+                            return loop(node.children, rowColumnsArr);
+                        } else {
+                            return rowColumnsArr;
+                        }
+                    }, rowColumnsArr);
+                };
+                return loop(nodes, []);
+            },
+            // 转化表格数据
+            transformRows (nodes = this.treeData, treeForm = this.treeColumns) {
+                const loop = (nodes, rows) => {
+                    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.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, []);
+            },
+
+            // 清除节点到叶子节点
+            clearNodeToLeaf (list) {
+                let loop = (list) => {
+                    list.forEach(item => {
+                        item.name = "";
+                        if (item.children.length) {
+                            loop(item.children);
+                        }
+                    });
+                };
+                loop(list);
+            },
+            // 获取节点数据
+            getNodeData (row, rowIndex, col) {
+                let parentNode = this.getParentNode(row, rowIndex, col);
+                return {
+                    level: col.level,
+                    data: 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.treeData
+                    };
+                } else {
+                    let parentCol = treeForm[col.level - 2];
+                    let loop = (row, rowIndex) => row[parentCol._key] || loop(this.rows[rowIndex - 1], rowIndex - 1);
+                    return loop(row, rowIndex);
+                }
+            },
+            // 获取节点数据
+            getNewNode (level, list) {
+                // 新增行里的输入框，第一次输入会失去光标的bug，需要$set
+                const rowDefault = this.$deepCopy(this.data.rowDefault);
+                this.subColumns.forEach(subFormItem => {
+                    // 用$set也可以
+                    rowDefault[subFormItem._key] = rowDefault[subFormItem._key];
+                });
+
+                const levelText = this.$numToChinese(level);
+                return {
+                    _id: this.$ObjectID().str,
+                    name: `${levelText}级节点${list.length + 1}`,
+                    level: level,
+                    children: [],
+                    ...rowDefault
+                };
+            },
+
+            /* ----- 模板获值方法 ---- */
+            getSummaryVal (col, row) {
+                if (col._calField && col._operator) {
+                    const calFieldFormItem = this.subColumns.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[col.nodeKey].children, []);
+
+                        return this.$calNumList(list, col._operator, calFieldFormItem);
+                    } else {
+                        return `来源列${col._calField}被删除`;
+                    }
+                } else {
+                    return !col._calField && !col._operator
+                        ? "未选择来源列和算法"
+                        : !col._calField
+                            ? "未选择来源列"
+                            : "未选择算法";
+                }
+            },
+            getTdStyle (col, row) {
+                return {
+                    ...this.getThStyle(col),
+                    backgroundColor: row && row[col.nodeKey] ? "" : "#fff"
+                };
+            },
+            geTdRowspan (col, row) {
+                return row[col.nodeKey || col._key] && row[col.nodeKey || col._key].total || 1;
+            },
+            geTdColspan (col, row) {
+                return 1;
+            },
+            // 获得节点的 操作下拉列表
+            getNodeOperationNames (col, row, nodeData) {
+                if (nodeData.children.length === 0) {
+                    return ["createBrotherNode", "deleteSelfAndChildNodes", "clearNode"];
+                } else {
+                    return ["createBrotherNode", "createChildNode", "deleteSelfAndChildNodes", "deleteChildNodes", "clearNode", "clearChildNodes"];
+                }
+            },
+            // 回车换行
+            enterText (val) {
+                let reg = new RegExp(/\n/g);
+                return val.replace(reg, "<br/>");
+            },
+            // 发生变动
+            change (...params) {
+                this.$emit("change", this.data, ...params);
+            }
+        }
+    };
+</script>