bri-components 1.0.0

package/src/components/list/ZTree.vue

@@ -0,0 +1,527 @@
+<template>
+    <div class="ZTree">
+        <div class="ZTree-action">
+            <dsh-buttons
+                class="ZTree-action-create"
+                :list="$getOperationList(['createNode'])"
+                @click="$dispatchEvent($event)"
+            ></dsh-buttons>
+        </div>
+
+        <div class="ZTree-tree">
+            <Tree :data="treeData" :render="renderContent"></Tree>
+        </div>
+
+        <!-- 添加节点弹窗 -->
+        <dsh-modal
+            v-model="treeFormShow"
+            :propsObj="treeFormPropsObj"
+            mode="custom"
+        >
+            <div class="ZTree-create-content">
+                <dsh-form
+                    v-if="treeFormShow"
+                    ref="treeForm"
+                    :labelWidth="80"
+                    :formList="treeFormList"
+                    :formData="treeFormData"
+                ></dsh-form>
+
+                <dsh-buttons
+                    class="textRight dsh-padding20"
+                    :list="$getOperationList(['clickNodeCancel', 'clickNodeConfirm'])"
+                    @click="$dispatchEvent($event, { data: treeFormData })"
+                ></dsh-buttons>
+            </div>
+        </dsh-modal>
+    </div>
+</template>
+
+<script>
+    import { resourceData } from "../../datas/index.js";
+
+    const loop = (arr) => {
+        return arr.map(item => {
+            return {
+                ...item,
+                isEdit: false,
+                children: loop(item.children || [])
+            };
+        });
+    };
+    export default {
+        name: "ZTree",
+        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: "z-modal"
+                },
+                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",
+                        _line: true,
+                        _required: true,
+                        regStr: "^(?!.*__.*)[a-zA-Z0-9]+(\\w+){1}[a-zA-Z0-9]+$",
+                        regMessage: "长度必须不小于3，只能包含小写字母，数字，下划线,不以下划线开头或结尾"
+                    },
+                    {
+                        _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-1"]
+                                },
+                                menuClass: "ZTree-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" scoped>
+    .ZTree {
+        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;
+        }
+
+        &-tree {
+            width: 100%;
+            flex: 1;
+            min-height: 0px;
+            overflow: auto;
+        }
+    }
+</style>
+<style lang="less">
+    .ZTree {
+        &-action-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 {
+            .ivu-tree-title {
+                width: calc(100% - 18px);
+            }
+            .ivu-tree-arrow {
+                margin-top: 5px;
+            }
+        }
+        &-dropdown-menu.DshColorPanel-list {
+            width: 242px!important;
+        }
+    }
+    .ZTree-create-content {
+        .textRight {
+            text-align: right;
+        }
+    }
+</style>

package/src/components/list/easyTable/index.js

@@ -0,0 +1,23 @@
+import VTable from "./v-table/index";
+import VCheckbox from "./v-checkbox/index";
+import VCheckboxGroup from "./v-checkbox-group/index";
+import VDropdown from "./v-dropdown/index";
+
+const install = function (Vue, opts = {}) {
+    Vue.component(VTable.name, VTable);
+    Vue.component(VCheckbox.name, VCheckbox);
+    Vue.component(VCheckboxGroup.name, VCheckboxGroup);
+    Vue.component(VDropdown.name, VDropdown);
+};
+
+// auto install
+if (typeof window !== "undefined" && window.Vue) {
+    install(window.Vue);
+}
+
+export {
+    VTable,
+    VCheckbox,
+    VCheckboxGroup,
+    VDropdown
+};

package/src/components/list/easyTable/src/directives/clickoutside.js

@@ -0,0 +1,32 @@
+export default {
+    bind: function (el, binding, vNode) {
+        if (typeof binding.value !== "function") {
+
+            let msg = `in [clickoutside] directives, provided expression '${binding.expression}' is not a function `;
+
+            const compName = vNode.context.name;
+
+            if (compName) {
+                msg += `in ${compName}`;
+            }
+            console.error(msg);
+        }
+
+        let handler = (e) => {
+            if (!el.contains(e.target) && el !== e.target) {
+                binding.value(e);
+            } else {
+                return false;
+            }
+        };
+        el.__clickOutSide__ = handler;
+
+        document.addEventListener("click", handler, true);
+    },
+
+    unbind: function (el) {
+        document.removeEventListener("click", el.__clickOutSide__, true);
+        el.__clickOutSide__ = null;
+
+    }
+};

package/src/components/list/easyTable/src/mixins/layerAdjustment.js

@@ -0,0 +1,62 @@
+import utils from "../utils/utils";
+
+let __autoAdjustmentEvents__ = [];
+
+export default {
+    methods: {
+
+        /*
+         * 自动调整浮层（不绑定事件）
+         *
+         * @method layerAdjustmentBind
+         * @param  {Dom}        layerElement        浮层元素
+         * @param  {Dom}        targetElement       控制元素
+         * @param  {Number}     distance            浮层元素和控制元素的上下间距
+         */
+        layerAdjustmentOnce (layerElement, targetElement, distance) {
+
+            let viewportOffset = utils.getViewportOffset(targetElement);
+            let layerElemHeight = typeof layerElement.getBoundingClientRect !== "undefined" ? layerElement.getBoundingClientRect().height : layerElement.clientHeight;
+
+            if (viewportOffset.bottom < layerElemHeight) {
+
+                layerElement.style.top = (viewportOffset.top - layerElemHeight - distance) + "px";
+            } else {
+
+                layerElement.style.top = (viewportOffset.top + targetElement.clientHeight + distance) + "px";
+            }
+
+            layerElement.style.left = viewportOffset.left + "px";
+        },
+
+        /*
+         * 滚动时自动调整浮层
+         *
+         * @method layerAdjustmentBind
+         * @param  {Dom}        layerElement        浮层元素
+         * @param  {Dom}        targetElement       控制元素
+         * @param  {Number}     distance            浮层元素和控制元素的上下间距
+         */
+        layerAdjustmentBind (layerElement, targetElement, distance) {
+
+            let handler = (e) => {
+
+                setTimeout(x => {
+
+                    this.layerAdjustmentOnce(layerElement, targetElement, distance);
+                });
+            };
+
+            __autoAdjustmentEvents__.push(handler);
+            utils.bind(window, "scroll", handler);
+            utils.bind(window, "resize", handler);
+
+        }
+    },
+    beforeDestroy () {
+
+        utils.unbind(window, "scroll", __autoAdjustmentEvents__);
+        utils.unbind(window, "resize", __autoAdjustmentEvents__);
+
+    }
+};

package/src/components/list/easyTable/src/settings/settings.js

@@ -0,0 +1,11 @@
+export default {
+    sizeMaps: {
+        "large": 40,
+        "middle": 32,
+        "small": 24
+    },
+
+    sizeMapDefault: 32,
+
+    scrollbarClass: "v-scrollbar-wrap"
+};