bri-components 1.0.0

package/src/components/other/DshColorPanel.vue

@@ -0,0 +1,128 @@
+<template>
+    <Dropdown
+        class="DshColorPanel"
+        :trigger="trigger"
+        :placement="placement"
+        :transfer="transfer"
+    >
+        <Icon
+            class="DshColorPanel-rel"
+            :type="dropdownObj.icon"
+            :size="dropdownObj.size"
+            :color="dropdownObj.color"
+        />
+
+        <DropdownMenu
+            slot="list"
+            class="DshColorPanel-list"
+            :class="menuClass"
+        >
+            <DropdownItem
+                v-for="dropdownItem in list"
+                :key="dropdownItem._id || dropdownItem.type"
+                class="DshColorPanel-list-item"
+                :selected="dropdownItem.selected"
+                @click.native="dispatchEvent(dropdownItem)"
+            >
+                <span
+                    class="DshColorPanel-list-item-small"
+                    :style="{background:dropdownItem}"
+                ></span>
+                <span
+                    class="DshColorPanel-list-item-big"
+                    :style="{borderColor:dropdownItem}"
+                ></span>
+            </DropdownItem>
+        </DropdownMenu>
+    </Dropdown>
+</template>
+
+<script>
+    export default {
+        name: "DshColorPanel",
+        props: {
+            dropdownObj: {
+                type: Object,
+                default () {
+                    return {
+                        icon: "ios-more",
+                        size: 18,
+                        showDropdownItemIcon: true
+                    };
+                }
+            },
+            list: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            placement: {
+                type: String,
+                default: "bottom-start"
+            },
+            trigger: {
+                type: String,
+                default: "click"
+            },
+            transfer: {
+                type: Boolean,
+                default: true
+            },
+            menuClass: String
+        },
+        data () {
+            return {};
+        },
+        computed: {},
+        created () {},
+        methods: {
+            dispatchEvent (dropdownItem) {
+                this.$emit("click", dropdownItem);
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .DshColorPanel {
+        &-rel {
+            cursor: pointer;
+        }
+        &-list {
+            font-size: 15px;
+            display: flex;
+            width: 293px;
+            height: 72px;
+            flex-wrap: wrap;
+            justify-content: space-around;
+            align-items: center;
+            &-item {
+                padding: 6px;
+                &-big {
+                    width: 15px;
+                    height: 15px;
+                    display: inline-block;
+                    border-radius: 50%;
+                }
+                &-small {
+                    width: 12px;
+                    height: 12px;
+                    position: absolute;
+                    display: inline-block;
+                    transform: translate(1.5px,1.5px);
+                    border-radius: 50%;
+                    &:hover + span{
+                        border-width: 1px;
+                        border-style: solid;
+                    }
+                }
+            }
+        }
+    }
+</style>
+<style lang="less">
+    .DshColorPanel {
+
+    }
+</style>

package/src/components/other/DshEditPanel.vue

@@ -0,0 +1,130 @@
+<template>
+    <div class="DshEditPanel">
+        <Form class="DshEditPanel-form" :model="value" :label-width="80" label-position="left">
+            <FormItem label="应用名称">
+                <Input v-model="value.name" placeholder="请输入应用名称" autofocus @on-blur="onBlur(value)" />
+            </FormItem>
+
+            <FormItem label="主题颜色">
+                <div class="DshEditPanel-colors">
+                    <div
+                        v-for="(colorItem, colorKey) in $appData.themeColors"
+                        :key="colorKey"
+                        class="DshEditPanel-colors-item"
+                        @click="$dispatchEvent(operationMap.updateColor, colorItem.color, colorKey, value)"
+                    >
+                        <div class="DshEditPanel-colors-item-content" :style="{ backgroundColor: colorItem.color }"></div>
+                        <Icon
+                            v-if="colorItem.color === value.color"
+                            class="DshEditPanel-colors-item-icon"
+                            type="ios-checkmark-circle"
+                            size="16"
+                        />
+                    </div>
+                </div>
+            </FormItem>
+
+            <FormItem label="主题图标">
+                <div class="DshEditPanel-icons">
+                    <div
+                        v-for="(iconItem, iconIndex) in $appData.icons"
+                        :key="iconIndex"
+                        class="DshEditPanel-icons-item"
+                        :style="{
+                            backgroundColor: $appData.themeColors[value.color].bgColor,
+                            border: value.icon === iconItem ? `1px solid ${value.color}` : 'none'
+                        }"
+                        @click="$dispatchEvent(operationMap.updateIcon, iconItem, iconIndex, value)"
+                    >
+                        <div class="DshEditPanel-icons-item-content" :style="{backgroundImage: 'url('+ $appData.themeColors[value.color].bgUrl +')'}">
+                            <Icon :custom="'bico-font ' + iconItem"></Icon>
+                        </div>
+                    </div>
+                </div>
+            </FormItem>
+        </Form>
+
+        <!-- 操作按钮 -->
+        <dsh-buttons
+            class="bri-footer"
+            :list="$getOperationList(['cancel', 'confirm'])"
+            @click="$dispatchEvent($event)"
+        ></dsh-buttons>
+    </div>
+</template>
+
+<script>
+    export default {
+        components: {},
+        name: "DshEditPanel",
+        props: {
+            value: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            }
+        },
+        data () {
+            return {
+                operationMap: {
+                    updateColor: {
+                        name: "修改主题色",
+                        type: "updateColor",
+                        event: "clickUpdateColor"
+                    },
+                    updateIcon: {
+                        name: "修改图标",
+                        type: "updateIcon",
+                        event: "clickUpdateIcon"
+                    },
+                    cancel: {
+                        name: "取消",
+                        type: "cancel",
+                        event: "clickCancel"
+                    },
+                    confirm: {
+                        name: "确定",
+                        type: "confirm",
+                        btnType: "primary",
+                        event: "clickConfirm"
+                    }
+                }
+            };
+        },
+        computed: {},
+        created () {
+            this.init();
+        },
+        methods: {
+            // 初始化
+            init () {
+                Object.assign(this.value, {
+                    oldName: this.value.name,
+                    color: this.value.color || Object.values(this.$appData.themeColors)[0].color,
+                    icon: this.value.icon || this.$appData.icons[0]
+                });
+            },
+
+            onBlur (value) {
+                value.name || (value.name = value.oldName || "未命名");
+            },
+            // 点击修改应用主题色
+            clickUpdateColor (item, colorItem, colorKey, appObj) {
+                appObj.color = colorItem;
+            },
+            // 点击修改应用图标
+            clickUpdateIcon (item, iconItem, iconIndex, appObj) {
+                appObj.icon = iconItem;
+            },
+            // 点击取消
+            clickConfirm () {
+                this.$emit("on-ok", this.value);
+            },
+            // 点击取消
+            clickCancel () {
+                this.$emit("on-cancel");
+            }
+        }
+    };
+</script>

package/src/components/other/InfoCascader.vue

@@ -0,0 +1,258 @@
+<template>
+    <div class="InfoCascader">
+        <dsh-modal
+            v-model="modalVal"
+            :propsObj="modalPropsObj"
+            mode="middle"
+        >
+            <dsh-input
+                class="InfoCascader-search"
+                :value="searchData"
+                :propsObj="inputPropsObj"
+            >
+            </dsh-input>
+            <div class="InfoCascader-content">
+                <div class="InfoCascader-content-left">
+                    <Tree
+                        v-if="show"
+                        expand-node
+                        :data="treeData"
+                    ></Tree>
+                </div>
+                <div class="InfoCascader-content-right">
+                    <div class="InfoCascader-content-right-title">
+                        {{curName}}说明
+                    </div>
+                    <p
+                        class="InfoCascader-content-right-content"
+                        v-html="description"
+                    >
+                    </p>
+                </div>
+            </div>
+            <div class="InfoCascader-footer">
+                <dsh-buttons
+                    class="InfoCascader-footer-btns"
+                    :list="$getOperationList(['cancel', 'confirm'])"
+                    @click="$dispatchEvent($event)"
+                ></dsh-buttons>
+            </div>
+        </dsh-modal>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "InfoCascader",
+        props: {
+            value: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            data: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            showModal: Boolean
+        },
+        data () {
+            return {
+                description: "",
+                operationMap: {
+                    cancel: {
+                        name: "取消",
+                        type: "clickCancel",
+                        event: "clickCancel",
+                        class: "z-default"
+                    },
+                    confirm: {
+                        name: "确定",
+                        btnType: "primary",
+                        type: "clickConfirm",
+                        event: "clickConfirm",
+                        class: "z-primary"
+                    }
+                },
+                curSelect: {},
+                curName: "",
+                searchData: {
+                    search: ""
+                },
+                inputPropsObj: {
+                    _key: "search",
+                    _name: "关键字搜索"
+                },
+                show: true
+            };
+        },
+        computed: {
+            modalVal: {
+                get () {
+                    return this.showModal;
+                },
+                set (val) {
+                    this.$emit("changeShowModal", val);
+                }
+            },
+            modalPropsObj () {
+                return {
+                    title: this.propsObj._name
+                };
+            },
+            initData () {
+                return this.loop(this.data, null, this.value);
+            },
+            treeData () {
+                if (!this.searchData.search) { // 内容为空时，查询所有
+                    return this.initData;
+                }
+                let that = this;
+                const rebuildData = (value, treeList) => {
+                    that.show = false;
+                    let newarr = [];
+                    treeList.forEach(element => {
+                        if (element.children && element.children.length) {
+                            if (element.title.indexOf(value) > -1) {
+                                element.expand = true;
+                                newarr.push(element);
+                            }
+                            const ab = rebuildData(value, element.children);
+                            const obj = {
+                                ...element,
+                                expand: true,
+                                children: ab
+                            };
+                            if (ab && ab.length) {
+                                newarr.push(obj);
+                            }
+                        } else {
+                            if (element.title.indexOf(value) > -1) {
+                                newarr.push(element);
+                            }
+                        }
+                    });
+                    that.show = true;
+                    return newarr;
+                };
+                return rebuildData(this.searchData.search, this.initData);
+            }
+        },
+        created () {
+            this.curSelect.codeArr = this.value;
+            if (this.value && this.value.length) {
+                // 回显已选择的名称
+                const loop = (arr) => {
+                    for (let item of arr) {
+                        if (item.codeArr.length == this.value.length && item.codeArr.every((code, idx) => code === this.value[idx])) {
+                            this.curName = item.name;
+                            break;
+                        }
+                        if (item.children.length) {
+                            loop(item.children);
+                        }
+                    }
+                };
+                loop(this.initData);
+                this.getDescription(this.value);
+            }
+        },
+        methods: {
+            change (node) {
+                // 点击最后层级时，才出现右侧说明
+                if (node.children.length === 0) {
+                    this.curName = node.name;
+                    this.getDescription(node.codeArr);
+                    if (node.codeArr.length && this.curSelect.codeArr && this.curSelect.codeArr.length === node.codeArr.length && node.codeArr.every((code, idx) => code === this.curSelect.codeArr[idx])) {
+                        this.curSelect = {};
+                        this.description = "";
+                    } else {
+                        if (!this.propsObj._cascaderLevel || node.level == this.propsObj._cascaderLevel || !node.children.length) {
+                            this.curSelect = node;
+                        }
+                    }
+                } else {
+                    this.curName = "";
+                    this.description = "";
+                    this.curSelect = {};
+                }
+            },
+            getDescription (nodeKeys) {
+                this.$https({
+                    url: {
+                        module: "sheet",
+                        name: "getResourceDescription"
+                    },
+                    params: {
+                        resourceKey: this.propsObj._resourceKey,
+                        nodeKeys
+                    },
+                    callback: data => {
+                        this.description = data;
+                    }
+                });
+            },
+            clickCancel () {
+                this.$emit("changeShowModal", false);
+            },
+            clickConfirm () {
+                if (this.curName) {
+                    this.$emit("input", this.curSelect.codeArr);
+                    this.$emit("change", this.curSelect.codeArr);
+                    this.$emit("changeShowModal", false);
+                } else {
+                    this.$Message.warning(`请选择${this.propsObj._name}!`);
+                }
+
+            },
+            loop (data = [], level, codeArr) {
+                return data
+                    ? data.reduce((arr, item) => {
+                        item.expand = false;
+                        if (this.value.length) {
+                            let arr = this.$getTreeLinealDatas(this.value, this.data);
+                            arr.forEach(i => { i.expand = true; });
+                        }
+                        const newItem = {
+                            ...item,
+                            value: item._key,
+                            title: item.name,
+                            disabled: this.propsObj._cascaderLevel ? (item.level < this.propsObj._cascaderLevel) : true,
+                            render: (h, { root, node, data }) => {
+                                return h("span", {
+                                    class: {
+                                        "ivu-tree-title-selected": this.curSelect.codeArr && this.curSelect.codeArr.length && this.curSelect.codeArr.length === data.codeArr.length && this.curSelect.codeArr.every((code, idx) => code === data.codeArr[idx])
+                                    },
+                                    style: {
+                                        display: "inline-block",
+                                        width: "100%"
+                                    },
+                                    on: {
+                                        click: () => {
+                                            this.change(data);
+                                        }
+                                    }
+                                }, data.title);
+                            }
+                        };
+                        if (!level || level > item.level) {
+                            newItem.children = this.loop(item.children, level, this.value);
+                        }
+                        arr.push(newItem);
+
+                        return arr;
+                    }, [])
+                    : [];
+            }
+        }
+    };
+</script>

package/src/components/other/YNoPermission.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="YCompanyPermision">
+        <img :src="noPermissionSrc" alt="">
+        <p>{{ title }}</p>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "YCompanyPermision",
+        props: {
+            title: String
+        },
+        data () {
+            return {
+                noPermissionSrc: this.$imageSrcMap.app.nodata
+            };
+        },
+        computed: {},
+        created () {},
+        methods: {}
+    };
+</script>
+
+<style lang="less" scoped>
+    .YCompanyPermision {
+        width: 100%;
+        height: 100%;
+        padding: 20px;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        font-size: 16px;
+        p {
+            margin: 10px 0;
+        }
+    }
+</style>
+<style lang="less">
+    .YCompanyPermision {
+
+    }
+</style>

package/src/components/other/ZCode.vue

@@ -0,0 +1,125 @@
+<template>
+   <div class="ZCode">
+        <codemirror
+            style="height:100%"
+            v-model="computedVal"
+            :options="option"
+            @ready="ready"
+            @input="input"
+            @changes="changes"
+        ></codemirror>
+   </div>
+</template>
+
+<script>
+    import { JSHINT } from "jshint";
+
+    import { codemirror } from "vue-codemirror";
+    // 这里引入的模式的js，根据设置的mode引入
+    import "codemirror/mode/javascript/javascript.js";
+    // 光标行背景高亮，配置里面也需要styleActiveLine设置为true
+    import "codemirror/addon/selection/active-line.js";
+    import "codemirror/addon/edit/matchbrackets.js";
+
+    // JavaScript代码提示功能需要引入三个依赖
+    import "codemirror/addon/hint/javascript-hint.js";
+    import "codemirror/addon/hint/show-hint.js";
+
+    // 折叠
+    import "codemirror/addon/fold/foldcode.js";
+    import "codemirror/addon/fold/foldgutter.js";
+    import "codemirror/addon/fold/brace-fold.js";
+    import "codemirror/addon/fold/comment-fold.js";
+
+    // 下面这几个引入的主要是验证提示类的,配置里的lint需要设置true,gutters: ['CodeMirror-lint-markers']
+    // 如果需要验证 json 的话
+    import "codemirror/addon/lint/lint.js";
+    import "codemirror/addon/lint/javascript-lint.js";
+    import "codemirror/addon/display/autorefresh"; // 及时自动更新，配置里面也需要设置autoRefresh为true
+
+    export default {
+        name: "ZCode",
+        components: {
+            codemirror
+        },
+        props: {
+            value: String,
+            option: {
+                type: Object,
+                default: function () {
+                    return {
+                        mode: "javascript",
+                        theme: "cobalt",
+                        dragDrop: true, // 拖拽
+                        lineWrapping: true, // 换行
+                        autofocus: true,
+                        lineNumbers: true, // 行号
+                        foldGutter: true, // 代码折叠
+                        line: true,
+                        matchBrackets: true, // 括号匹配
+                        extraKeys: { Ctrl: "autocomplete" },
+                        showCursorWhenSelecting: true, // 在选择时是否显示光标，默认为false
+                        lineWiseCopyCut: true, // 启用时，如果在复制或剪切时没有选择文本，那么就会自动操作光标所在的整行]
+                        autorefresh: true, // 及时自动更新
+                        lint: true, // json检查
+                        hint: true,
+                        styleActiveLine: true,
+                        gutters: [
+                            "CodeMirror-linenumbers", // 显示行号
+                            "CodeMirror-foldgutter", // 代码折叠
+                            "CodeMirror-lint-markers" // json检查
+                        ]
+                    };
+                }
+            }
+        },
+        model: {
+            prop: "value",
+            event: "change"
+        },
+        data () {
+            return {};
+        },
+        computed: {
+            computedVal: {
+                get () {
+                    return this.value;
+                },
+                set (val) {
+                    this.handleChange(val);
+                }
+            }
+        },
+        created () {
+            window.JSHINT = JSHINT;
+        },
+        methods: {
+            ready (cm) {
+                cm.setSize("100%", "100%");
+                this.$emit("ready", cm);
+            },
+            input (cm) {
+                this.$emit("input", cm);
+            },
+            changes (cm, value) {
+                this.$emit("changes", cm, value);
+            },
+            handleChange (val) {
+                // 0 no, 1 warning 2 error
+                JSHINT(val);
+                let errors = (JSHINT.data().errors || [])
+                    .map(error => error.code ? (error.code.startsWith("W") ? 1 : 2) : 2);
+
+                this.$emit("jshint", errors.some(errorNum => errorNum === 2), errors);
+                this.$emit("change", val);
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+   .ZCode {
+       width: 100%;
+       height: 100%;
+   }
+</style>