bri-components 1.5.22 → 1.6.0

package/src/components/list/BriTree.vue

@@ -1,529 +1,529 @@
-<template>
-    <div class="BriTree">
-        <div class="BriTree-action">
-            <dsh-buttons
-                class="BriTree-action-create"
-                :list="$getOperationList(['createNode'])"
-                @click="$dispatchEvent($event)"
-            ></dsh-buttons>
-        </div>
-
-        <div class="BriTree-tree">
-            <Tree
-                :data="treeData"
-                :render="renderContent"
-            ></Tree>
-        </div>
-
-        <!-- 添加节点弹窗 -->
-        <dsh-modal
-            class="BriTree-modal"
-            v-model="treeFormShow"
-            mode="custom"
-            :propsObj="treeFormPropsObj"
-        >
-            <div class="BriTree-modal-content">
-                <dsh-form
-                    ref="treeForm"
-                    :formList="treeFormList"
-                    :formData="treeFormData"
-                    :labelStyle="{ width: '80px' }"
-                ></dsh-form>
-
-                <dsh-buttons
-                    class="BriTree-modal-content-btns"
-                    :list="$getOperationList(['clickNodeCancel', 'clickNodeConfirm'])"
-                    @click="$dispatchEvent($event, { data: treeFormData })"
-                ></dsh-buttons>
-            </div>
-        </dsh-modal>
-    </div>
-</template>
-
-<script>
-    import { resourceData } from "../../data/index.js";
-
-    const loop = (arr) => {
-        return arr.map(item => {
-            return {
-                ...item,
-                isEdit: false,
-                children: loop(item.children || [])
-            };
-        });
-    };
-    export default {
-        name: "BriTree",
-        props: {
-            data: Array,
-            // 树形级联类别：cascader dropdown
-            resType: {
-                type: String,
-                default: "dropdown"
-            },
-            showKey: {
-                type: Boolean,
-                default: false
-            },
-            useColor: {
-                type: Boolean,
-                default: false
-            },
-            useCustomKey: {
-                type: Boolean,
-                default: true
-            }
-        },
-        model: {
-            prop: "data",
-            event: "on-change"
-        },
-        data () {
-            return {
-                colorMap: resourceData.colorMap,
-                operationMap: {
-                    createNode: {
-                        name: "添加节点",
-                        icon: "ios-add",
-                        type: "createNode",
-                        btnType: "primary",
-                        style: "padding: 0 7px;",
-                        event: "clickAddNode"
-                    },
-                    deleteNode: {
-                        name: "删除",
-                        icon: "ios-remove",
-                        size: "20",
-                        type: "deleteNode",
-                        event: "clickDeleteNode"
-                    },
-                    clickNodeName: {
-                        name: "点击名字",
-                        type: "clickNodeName",
-                        event: "clickNodeName"
-                    },
-                    onBlur: {
-                        name: "失去焦点",
-                        type: "onBlur",
-                        event: "onBlur"
-                    },
-                    clickColor: {
-                        name: "点击颜色",
-                        type: "clickColor",
-                        event: "clickColor"
-                    },
-                    clickNodeCancel: {
-                        name: "取消",
-                        type: "clickNodeCancel",
-                        event: "clickNodeCancel",
-                        btnType: "default",
-                        class: "z-default"
-                    },
-                    clickNodeConfirm: {
-                        name: "确认",
-                        type: "clickNodeConfirm",
-                        event: "clickNodeConfirm",
-                        btnType: "primary",
-                        class: "z-primary"
-                    }
-                },
-                treeData: [],
-
-                // 添加节点弹窗
-                treeFormShow: false,
-                treeFormPropsObj: {
-                    title: "添加节点",
-                    class: "bri-modal-center"
-                },
-                treeFormData: {
-                    _key: "",
-                    name: "",
-                    description: ""
-                },
-                treeFormNode: null
-            };
-        },
-        computed: {
-            colorArr () {
-                return Object.values(this.colorMap);
-            },
-            colorArrMap () {
-                return Object.keys(this.colorMap).reduce((obj, item) => {
-                    return { ...obj, [this.colorMap[item]]: item };
-                }, {});
-            },
-            treeFormList () {
-                let list = [
-                    {
-                        _key: "name",
-                        _name: "名称",
-                        _type: "text",
-                        _default: "未命名节点",
-                        _line: true,
-                        _required: true
-                    },
-                    {
-                        _key: "_key",
-                        _name: "唯一标识",
-                        _type: "text",
-                        _textType: "key",
-                        _line: true,
-                        _required: true
-                    },
-                    {
-                        _key: "description",
-                        _name: "描述",
-                        _type: "textarea",
-                        _line: true,
-                        _required: false
-                    }
-                ];
-
-                return this.useCustomKey ? list : list.slice(0, 1);
-            }
-        },
-        created () {
-            this.treeData = loop(this.data);
-        },
-        methods: {
-            // 点击添加节点按钮
-            clickAddNode (item, node, a) {
-                this.treeFormData = {
-                    _key: "",
-                    name: "未命名节点",
-                    description: ""
-                };
-                this.treeFormNode = node;
-                this.treeFormShow = true;
-            },
-            clickNodeCancel () {
-                this.treeFormData = {
-                    _key: "",
-                    name: "未命名节点",
-                    description: ""
-                };
-                this.treeFormNode = null;
-                this.treeFormShow = false;
-                this.onChange();
-            },
-            clickNodeConfirm () {
-                this.$refs.treeForm.$refs.form.validate(valid => {
-                    if (valid) {
-                        this.createNode(this.treeFormData, this.treeFormNode && this.treeFormNode.data);
-                        this.treeFormShow = false;
-                    } else {
-                        this.$formRulesWarning();
-                    }
-                });
-                this.onChange();
-            },
-            // 点击删除节点按钮
-            clickDeleteNode (item, { root, node, data }) {
-                this.$Modal.confirm({
-                    title: "警告",
-                    content: `确定删除 ‘${data.name}’ 
-                            ${node && node.children && node.children.length ? "及其所有子" : ""}节点吗？`,
-                    onOk: () => {
-                        this.deleteNode(root, node, data);
-                    }
-                });
-            },
-            // 添加节点
-            createNode (value, data) {
-                let obj = {
-                    ...value,
-                    color: this.colorArrMap[this.colorArr[this.treeData.length % this.colorArr.length]],
-                    expand: true,
-                    isEdit: false,
-                    children: []
-                };
-                if (!this.useCustomKey) {
-                    obj._key = this.createKey(data);
-                }
-                if (data) {
-                    const children = data.children || [];
-                    children.push(obj);
-                    this.$set(data, "children", children);
-                } else {
-                    this.treeData.push(obj);
-                }
-                this.onChange();
-            },
-            // 移除节点
-            deleteNode (root, node, data) {
-                let rootObj = root.find(el => el === node);
-                let parentKey = rootObj && rootObj.parent;
-                if (parentKey || parentKey === 0) {
-                    const parent = root.find(el => el.nodeKey === parentKey).node;
-                    const index = parent.children.indexOf(data);
-                    parent.children.splice(index, 1);
-                } else {
-                    const index = this.treeData.indexOf(data);
-                    this.treeData.splice(index, 1);
-                }
-                this.onChange();
-            },
-            // 生成key
-            createKey (data) {
-                let digits = 4;
-                // let parentKey = "";
-                if (data) {
-                    // parentKey = data._key;
-                    if (data.children && data.children.length) {
-                        data = data.children;
-                    } else {
-                        return this.$encodeB36(1, digits);
-                        // return parentKey + this.$encodeB36(1, digits);
-                    }
-                } else {
-                    data = this.treeData;
-                    if (!data.length) {
-                        return this.$encodeB36(1, digits);
-                    }
-                }
-                // let key = data[data.length - 1]._key.slice(-4);
-                const maxKey = Math.max(...data.map(item => item._key)); // 增加移动功能后
-
-                // let key = data[data.length - 1]._key;
-                return this.$encodeB36(this.$decodeB36(maxKey) + 1, digits);
-                // return parentKey + this.$encodeB36(this.$decodeB36(key) + 1, digits);
-            },
-            // clickNodeName blur 时
-            onBlur (item, { data }) {
-                if (!data.name) {
-                    data.name = data.oldName;
-                }
-                data.isEdit = false;
-                this.$emit("on-change", this.treeData);
-            },
-            clickNodeName (item, { data }) {
-                data.oldName = data.name;
-                data.isEdit = true;
-            },
-            clickColor ({ data }, color) {
-                data.color = this.colorArrMap[color];
-                this.$emit("on-change", this.treeData);
-            },
-            // 渲染函数
-            renderContent (h, { root, node, data }) {
-                return h("div", {
-                    style: {
-                        display: "inline-flex",
-                        width: "100%",
-                        height: "36px",
-                        lineHeight: "33px",
-                        border: "1px solid rgba(211, 215, 228, 0.5)",
-                        borderRadius: "4px",
-                        justifyContent: "space-between"
-                    }
-                }, [
-                    h("div", {
-                        style: { flex: 1, overflowX: "auto", display: "flex", alignItems: "center", overflowY: "hidden", padding: "0 5px" }
-                    }, [
-                        this.resType === "dropdown" ? h("Icon", {
-                            props: {
-                                type: "md-arrow-round-up",
-                                size: "14"
-                            },
-                            style: {
-                                margin: "0 2px",
-                                color: "#999"
-                            },
-                            on: {
-                                click: () => {
-                                    this.handleUp(data);
-                                }
-                            }
-                        }) : "",
-                        this.resType === "dropdown" ? h("Icon", {
-                            props: {
-                                type: "md-arrow-round-down",
-                                size: "14"
-                            },
-                            style: {
-                                margin: "0 2px",
-                                color: "#999"
-                            },
-                            on: {
-                                click: () => {
-                                    this.handleDown(data);
-                                }
-                            }
-                        }) : "",
-                        h("dsh-color-panel", {
-                            props: {
-                                dropdownObj: {
-                                    icon: "md-arrow-dropdown-circle",
-                                    color: this.colorMap[data.color] || this.colorMap["color-default"]
-                                },
-                                menuClass: "BriTree-dropdown-menu",
-                                list: this.colorArr
-                            },
-                            style: {
-                                margin: "0 2px"
-                            },
-                            on: {
-                                click: (color) => this.clickColor({ root, node, data }, color)
-                            }
-                        }),
-
-                        data.isEdit
-                            ? h("Input", {
-                                props: {
-                                    value: data.name,
-                                    placeholder: "请输入节点名称",
-                                    size: "small"
-                                },
-                                directives: [{name: "focus"}],
-                                style: {
-                                    width: "200px"
-                                },
-                                on: {
-                                    input: (val) => {
-                                        data.name = val;
-                                    },
-                                    "on-blur": () => this.$dispatchEvent(this.operationMap.onBlur, { root, node, data })
-                                }
-                            })
-                            : [
-                                h("span", {
-                                    style: {
-                                        verticalAlign: "middle",
-                                        paddingLeft: "3px",
-                                        flex: 1,
-                                        overflow: "auto"
-                                    },
-                                    on: {
-                                        click: () => this.$dispatchEvent(this.operationMap.clickNodeName, { root, node, data })
-                                    }
-                                }, data.name),
-                                this.showKey ? h("span", {
-                                    style: {
-                                        marginLeft: "20px",
-                                        fontSize: "12px",
-                                        color: "#999"
-                                    }
-                                }, data._key) : undefined
-                            ]
-                    ]),
-                    h("div", {
-                        style: { marginLeft: "10px" }
-                    }, ["createNode", "deleteNode"]
-                        .map(type => this.operationMap[type])
-                        .filter(operatonItem => !!operatonItem && ((this.resType === "dropdown") ? (operatonItem.type !== "createNode") : true))
-                        .map(btnItem => {
-                            return h("Icon", {
-                                props: ({
-                                    size: btnItem.size || 20,
-                                    type: btnItem.icon
-                                }),
-                                style: {
-                                    margin: "0 2px",
-                                    color: "#999"
-                                },
-                                on: {
-                                    click: () => { this.$dispatchEvent(btnItem, { root, node, data }); }
-                                }
-                            }, btnItem.name);
-                        })
-                    )
-                ]);
-            },
-            // 上移动
-            handleUp (data) {
-                const index = this.treeData.findIndex(item => item._key === data._key);
-                if (index > 0) {
-                    const prevData = {...this.treeData[index - 1]};
-                    this.treeData.splice(index - 1, 1);
-                    this.treeData.splice(index, 0, prevData);
-                    this.onChange();
-                }
-            },
-            handleDown (data) {
-                const index = this.treeData.findIndex(item => item._key === data._key);
-                if (index < this.treeData.length - 1) {
-                    const nextData = {...this.treeData[index]};
-                    this.treeData.splice(index, 1);
-                    this.treeData.splice(index + 1, 0, nextData);
-                    this.onChange();
-                }
-            },
-            // 双向数据绑定
-            onChange () {
-                this.$emit("on-change", this.transformResData(this.treeData));
-            },
-
-            /* 工具方法 */
-            // 过滤掉不必要数据
-            transformResData (list) {
-                return list.map(item => {
-                    return {
-                        _key: item._key,
-                        name: item.name,
-                        color: item.color,
-                        children: this.transformResData(item.children || [])
-                    };
-                });
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    .BriTree {
-        max-width: 1200px;
-        min-width: 720px;
-        height: 100%;
-        margin: 0px auto;
-        background: #fff;
-        display: flex;
-        flex-direction: column;
-
-        &-action {
-            padding: 10px;
-            display: flex;
-            justify-content: flex-end;
-
-            &-create {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-
-                .ivu-icon {
-                    font-size: 20px;
-                    font-weight: bold;
-                    margin-right: -10px;
-                    vertical-align: middle;
-                    transform: translate(0, -1px);
-                }
-            }
-        }
-
-        &-tree {
-            width: 100%;
-            flex: 1;
-            min-height: 0px;
-            overflow: auto;
-
-            .ivu-tree-title {
-                width: calc(100% - 18px);
-            }
-            .ivu-tree-arrow {
-                margin-top: 5px;
-            }
-        }
-
-        &-modal {
-            &-content {
-                &-btns {
-                    .dsh-padding20();
-                    text-align: right;
-                }
-            }
-        }
-
-        &-dropdown-menu {
-            width: 242px!important;
-        }
-    }
-</style>
+<template>
+    <div class="BriTree">
+        <div class="BriTree-action">
+            <dsh-buttons
+                class="BriTree-action-create"
+                :list="$getOperationList(['createNode'])"
+                @click="$dispatchEvent($event)"
+            ></dsh-buttons>
+        </div>
+
+        <div class="BriTree-tree">
+            <Tree
+                :data="treeData"
+                :render="renderContent"
+            ></Tree>
+        </div>
+
+        <!-- 添加节点弹窗 -->
+        <dsh-modal
+            class="BriTree-modal"
+            v-model="treeFormShow"
+            mode="custom"
+            :propsObj="treeFormPropsObj"
+        >
+            <div class="BriTree-modal-content">
+                <dsh-form
+                    ref="treeForm"
+                    :formList="treeFormList"
+                    :formData="treeFormData"
+                    :labelStyle="{ width: '80px' }"
+                ></dsh-form>
+
+                <dsh-buttons
+                    class="BriTree-modal-content-btns"
+                    :list="$getOperationList(['clickNodeCancel', 'clickNodeConfirm'])"
+                    @click="$dispatchEvent($event, { data: treeFormData })"
+                ></dsh-buttons>
+            </div>
+        </dsh-modal>
+    </div>
+</template>
+
+<script>
+    import { resourceData } from "../../data/index.js";
+
+    const loop = (arr) => {
+        return arr.map(item => {
+            return {
+                ...item,
+                isEdit: false,
+                children: loop(item.children || [])
+            };
+        });
+    };
+    export default {
+        name: "BriTree",
+        props: {
+            data: Array,
+            // 树形级联类别：cascader dropdown
+            resType: {
+                type: String,
+                default: "dropdown"
+            },
+            showKey: {
+                type: Boolean,
+                default: false
+            },
+            useColor: {
+                type: Boolean,
+                default: false
+            },
+            useCustomKey: {
+                type: Boolean,
+                default: true
+            }
+        },
+        model: {
+            prop: "data",
+            event: "on-change"
+        },
+        data () {
+            return {
+                colorMap: resourceData.colorMap,
+                operationMap: {
+                    createNode: {
+                        name: "添加节点",
+                        icon: "ios-add",
+                        type: "createNode",
+                        btnType: "primary",
+                        style: "padding: 0 7px;",
+                        event: "clickAddNode"
+                    },
+                    deleteNode: {
+                        name: "删除",
+                        icon: "ios-remove",
+                        size: "20",
+                        type: "deleteNode",
+                        event: "clickDeleteNode"
+                    },
+                    clickNodeName: {
+                        name: "点击名字",
+                        type: "clickNodeName",
+                        event: "clickNodeName"
+                    },
+                    onBlur: {
+                        name: "失去焦点",
+                        type: "onBlur",
+                        event: "onBlur"
+                    },
+                    clickColor: {
+                        name: "点击颜色",
+                        type: "clickColor",
+                        event: "clickColor"
+                    },
+                    clickNodeCancel: {
+                        name: "取消",
+                        type: "clickNodeCancel",
+                        event: "clickNodeCancel",
+                        btnType: "default",
+                        class: "z-default"
+                    },
+                    clickNodeConfirm: {
+                        name: "确认",
+                        type: "clickNodeConfirm",
+                        event: "clickNodeConfirm",
+                        btnType: "primary",
+                        class: "z-primary"
+                    }
+                },
+                treeData: [],
+
+                // 添加节点弹窗
+                treeFormShow: false,
+                treeFormPropsObj: {
+                    title: "添加节点",
+                    class: "bri-modal-center"
+                },
+                treeFormData: {
+                    _key: "",
+                    name: "",
+                    description: ""
+                },
+                treeFormNode: null
+            };
+        },
+        computed: {
+            colorArr () {
+                return Object.values(this.colorMap);
+            },
+            colorArrMap () {
+                return Object.keys(this.colorMap).reduce((obj, item) => {
+                    return { ...obj, [this.colorMap[item]]: item };
+                }, {});
+            },
+            treeFormList () {
+                let list = [
+                    {
+                        _key: "name",
+                        _name: "名称",
+                        _type: "text",
+                        _default: "未命名节点",
+                        _line: true,
+                        _required: true
+                    },
+                    {
+                        _key: "_key",
+                        _name: "唯一标识",
+                        _type: "text",
+                        _textType: "key",
+                        _line: true,
+                        _required: true
+                    },
+                    {
+                        _key: "description",
+                        _name: "描述",
+                        _type: "textarea",
+                        _line: true,
+                        _required: false
+                    }
+                ];
+
+                return this.useCustomKey ? list : list.slice(0, 1);
+            }
+        },
+        created () {
+            this.treeData = loop(this.data);
+        },
+        methods: {
+            // 点击添加节点按钮
+            clickAddNode (item, node, a) {
+                this.treeFormData = {
+                    _key: "",
+                    name: "未命名节点",
+                    description: ""
+                };
+                this.treeFormNode = node;
+                this.treeFormShow = true;
+            },
+            clickNodeCancel () {
+                this.treeFormData = {
+                    _key: "",
+                    name: "未命名节点",
+                    description: ""
+                };
+                this.treeFormNode = null;
+                this.treeFormShow = false;
+                this.onChange();
+            },
+            clickNodeConfirm () {
+                this.$refs.treeForm.$refs.form.validate(valid => {
+                    if (valid) {
+                        this.createNode(this.treeFormData, this.treeFormNode && this.treeFormNode.data);
+                        this.treeFormShow = false;
+                    } else {
+                        this.$formRulesWarning();
+                    }
+                });
+                this.onChange();
+            },
+            // 点击删除节点按钮
+            clickDeleteNode (item, { root, node, data }) {
+                this.$Modal.confirm({
+                    title: "警告",
+                    content: `确定删除 ‘${data.name}’ 
+                            ${node && node.children && node.children.length ? "及其所有子" : ""}节点吗？`,
+                    onOk: () => {
+                        this.deleteNode(root, node, data);
+                    }
+                });
+            },
+            // 添加节点
+            createNode (value, data) {
+                let obj = {
+                    ...value,
+                    color: this.colorArrMap[this.colorArr[this.treeData.length % this.colorArr.length]],
+                    expand: true,
+                    isEdit: false,
+                    children: []
+                };
+                if (!this.useCustomKey) {
+                    obj._key = this.createKey(data);
+                }
+                if (data) {
+                    const children = data.children || [];
+                    children.push(obj);
+                    this.$set(data, "children", children);
+                } else {
+                    this.treeData.push(obj);
+                }
+                this.onChange();
+            },
+            // 移除节点
+            deleteNode (root, node, data) {
+                let rootObj = root.find(el => el === node);
+                let parentKey = rootObj && rootObj.parent;
+                if (parentKey || parentKey === 0) {
+                    const parent = root.find(el => el.nodeKey === parentKey).node;
+                    const index = parent.children.indexOf(data);
+                    parent.children.splice(index, 1);
+                } else {
+                    const index = this.treeData.indexOf(data);
+                    this.treeData.splice(index, 1);
+                }
+                this.onChange();
+            },
+            // 生成key
+            createKey (data) {
+                let digits = 4;
+                // let parentKey = "";
+                if (data) {
+                    // parentKey = data._key;
+                    if (data.children && data.children.length) {
+                        data = data.children;
+                    } else {
+                        return this.$encodeB36(1, digits);
+                        // return parentKey + this.$encodeB36(1, digits);
+                    }
+                } else {
+                    data = this.treeData;
+                    if (!data.length) {
+                        return this.$encodeB36(1, digits);
+                    }
+                }
+                // let key = data[data.length - 1]._key.slice(-4);
+                const maxKey = Math.max(...data.map(item => item._key)); // 增加移动功能后
+
+                // let key = data[data.length - 1]._key;
+                return this.$encodeB36(this.$decodeB36(maxKey) + 1, digits);
+                // return parentKey + this.$encodeB36(this.$decodeB36(key) + 1, digits);
+            },
+            // clickNodeName blur 时
+            onBlur (item, { data }) {
+                if (!data.name) {
+                    data.name = data.oldName;
+                }
+                data.isEdit = false;
+                this.$emit("on-change", this.treeData);
+            },
+            clickNodeName (item, { data }) {
+                data.oldName = data.name;
+                data.isEdit = true;
+            },
+            clickColor ({ data }, color) {
+                data.color = this.colorArrMap[color];
+                this.$emit("on-change", this.treeData);
+            },
+            // 渲染函数
+            renderContent (h, { root, node, data }) {
+                return h("div", {
+                    style: {
+                        display: "inline-flex",
+                        width: "100%",
+                        height: "36px",
+                        lineHeight: "33px",
+                        border: "1px solid rgba(211, 215, 228, 0.5)",
+                        borderRadius: "4px",
+                        justifyContent: "space-between"
+                    }
+                }, [
+                    h("div", {
+                        style: { flex: 1, overflowX: "auto", display: "flex", alignItems: "center", overflowY: "hidden", padding: "0 5px" }
+                    }, [
+                        this.resType === "dropdown" ? h("Icon", {
+                            props: {
+                                type: "md-arrow-round-up",
+                                size: "14"
+                            },
+                            style: {
+                                margin: "0 2px",
+                                color: "#999"
+                            },
+                            on: {
+                                click: () => {
+                                    this.handleUp(data);
+                                }
+                            }
+                        }) : "",
+                        this.resType === "dropdown" ? h("Icon", {
+                            props: {
+                                type: "md-arrow-round-down",
+                                size: "14"
+                            },
+                            style: {
+                                margin: "0 2px",
+                                color: "#999"
+                            },
+                            on: {
+                                click: () => {
+                                    this.handleDown(data);
+                                }
+                            }
+                        }) : "",
+                        h("dsh-color-panel", {
+                            props: {
+                                dropdownObj: {
+                                    icon: "md-arrow-dropdown-circle",
+                                    color: this.colorMap[data.color] || this.colorMap["color-default"]
+                                },
+                                menuClass: "BriTree-dropdown-menu",
+                                list: this.colorArr
+                            },
+                            style: {
+                                margin: "0 2px"
+                            },
+                            on: {
+                                click: (color) => this.clickColor({ root, node, data }, color)
+                            }
+                        }),
+
+                        data.isEdit
+                            ? h("Input", {
+                                props: {
+                                    value: data.name,
+                                    placeholder: "请输入节点名称",
+                                    size: "small"
+                                },
+                                directives: [{name: "focus"}],
+                                style: {
+                                    width: "200px"
+                                },
+                                on: {
+                                    input: (val) => {
+                                        data.name = val;
+                                    },
+                                    "on-blur": () => this.$dispatchEvent(this.operationMap.onBlur, { root, node, data })
+                                }
+                            })
+                            : [
+                                h("span", {
+                                    style: {
+                                        verticalAlign: "middle",
+                                        paddingLeft: "3px",
+                                        flex: 1,
+                                        overflow: "auto"
+                                    },
+                                    on: {
+                                        click: () => this.$dispatchEvent(this.operationMap.clickNodeName, { root, node, data })
+                                    }
+                                }, data.name),
+                                this.showKey ? h("span", {
+                                    style: {
+                                        marginLeft: "20px",
+                                        fontSize: "12px",
+                                        color: "#999"
+                                    }
+                                }, data._key) : undefined
+                            ]
+                    ]),
+                    h("div", {
+                        style: { marginLeft: "10px" }
+                    }, ["createNode", "deleteNode"]
+                        .map(type => this.operationMap[type])
+                        .filter(operatonItem => !!operatonItem && ((this.resType === "dropdown") ? (operatonItem.type !== "createNode") : true))
+                        .map(btnItem => {
+                            return h("Icon", {
+                                props: ({
+                                    size: btnItem.size || 20,
+                                    type: btnItem.icon
+                                }),
+                                style: {
+                                    margin: "0 2px",
+                                    color: "#999"
+                                },
+                                on: {
+                                    click: () => { this.$dispatchEvent(btnItem, { root, node, data }); }
+                                }
+                            }, btnItem.name);
+                        })
+                    )
+                ]);
+            },
+            // 上移动
+            handleUp (data) {
+                const index = this.treeData.findIndex(item => item._key === data._key);
+                if (index > 0) {
+                    const prevData = {...this.treeData[index - 1]};
+                    this.treeData.splice(index - 1, 1);
+                    this.treeData.splice(index, 0, prevData);
+                    this.onChange();
+                }
+            },
+            handleDown (data) {
+                const index = this.treeData.findIndex(item => item._key === data._key);
+                if (index < this.treeData.length - 1) {
+                    const nextData = {...this.treeData[index]};
+                    this.treeData.splice(index, 1);
+                    this.treeData.splice(index + 1, 0, nextData);
+                    this.onChange();
+                }
+            },
+            // 双向数据绑定
+            onChange () {
+                this.$emit("on-change", this.transformResData(this.treeData));
+            },
+
+            /* 工具方法 */
+            // 过滤掉不必要数据
+            transformResData (list) {
+                return list.map(item => {
+                    return {
+                        _key: item._key,
+                        name: item.name,
+                        color: item.color,
+                        children: this.transformResData(item.children || [])
+                    };
+                });
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .BriTree {
+        max-width: 1200px;
+        min-width: 720px;
+        height: 100%;
+        margin: 0px auto;
+        background: #fff;
+        display: flex;
+        flex-direction: column;
+
+        &-action {
+            padding: 10px;
+            display: flex;
+            justify-content: flex-end;
+
+            &-create {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+
+                .ivu-icon {
+                    font-size: 20px;
+                    font-weight: bold;
+                    margin-right: -10px;
+                    vertical-align: middle;
+                    transform: translate(0, -1px);
+                }
+            }
+        }
+
+        &-tree {
+            width: 100%;
+            flex: 1;
+            min-height: 0px;
+            overflow: auto;
+
+            .ivu-tree-title {
+                width: calc(100% - 18px);
+            }
+            .ivu-tree-arrow {
+                margin-top: 5px;
+            }
+        }
+
+        &-modal {
+            &-content {
+                &-btns {
+                    .dsh-padding20();
+                    text-align: right;
+                }
+            }
+        }
+
+        &-dropdown-menu {
+            width: 242px!important;
+        }
+    }
+</style>