bri-components 1.0.0

package/src/components/pages/Error/errorBack.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="error-back">
+        <Button @click="goHome" size="large" style="width: 200px;" type="text">返回首页</Button>
+        <Button @click="backPage" size="large" style="width: 200px;margin-left: 40px;" type="primary">返回上一页</Button>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "errorBack",
+        props: {
+            backNum: {
+                type: Number,
+                default: -1
+            }
+        },
+        data () {
+            return {};
+        },
+        methods: {
+            goHome () {
+                this.$router.push({
+                    name: "home"
+                });
+            },
+            backPage () {
+                this.$router.go(this.backNum);
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .error-back{
+        text-align: center;
+        padding-top: 40px;
+    }
+</style>

package/src/components/small/Ctooltip.vue

@@ -0,0 +1,90 @@
+<template>
+    <Tooltip
+        class="Ctooltip"
+        :disabled="disabled"
+        :content="content"
+        :placement="placement"
+        :transfer="transfer"
+        :maxWidth="maxWidth"
+        style="width:100%;"
+    >
+        <div
+            class="ellipsisContent"
+            ref="ellipsisContent"
+        >
+            <slot></slot>
+        </div>
+        <div
+            v-if="custom"
+            slot="content"
+        >
+            <slot name="content"></slot>
+        </div>
+    </Tooltip>
+</template>
+
+<script>
+    export default {
+        name: "Ctooltip",
+        props: {
+            content: String,
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            placement: {
+                type: String,
+                default: "bottom"
+            },
+            maxWidth: {
+                type: String,
+                default: "200"
+            },
+            transfer: {
+                type: Boolean,
+                default: false
+            },
+            custom: Boolean
+        },
+        data () {
+            return {
+                disabled: false
+            };
+        },
+        computed: {},
+        methods: {
+            computedDisable () {
+                // 获取overflow：hidden元素的实际被撑开的宽度
+                let test = this.$refs.ellipsisContent;
+                if (test) {
+                    let cp = test.cloneNode(true);
+                    cp.style.cssText = "all: unset;position: absolute;opacity:0;";
+                    test.parentElement.appendChild(cp);
+                    let realWidth = cp.offsetWidth;
+                    cp.remove();
+                    this.disabled = realWidth <= test.offsetWidth;
+                }
+            }
+        },
+        created () {},
+        mounted () {
+            this.$nextTick(() => {
+                this.computedDisable();
+            });
+        },
+        updated () {
+            this.$nextTick(() => {
+                this.computedDisable();
+            });
+        },
+        watch: {
+            content () {
+                this.$nextTick(() => {
+                    this.computedDisable();
+                });
+            }
+        }
+    };
+</script>

package/src/components/small/DshButtons.vue

@@ -0,0 +1,195 @@
+<template>
+    <div
+        v-if="mode === 'default' ? list.length : true"
+        class="DshButtons"
+    >
+        <div
+            v-if="mode === 'between'"
+            class="DshButtons-flex"
+        >
+            <!-- 左侧按钮 -->
+            <div class="DshButtons-flex-left">
+                <Button
+                    v-for="(operationItem, index) in leftFlatList"
+                    :key="operationItem.type"
+                    :style="operationItem.style"
+                    :class="[
+                        index ? 'dsh-margin-left5' : undefined,
+                        !operationItem.customIcon && !operationItem.icon ? 'DshButtons-item' : undefined,
+                        itemClass,
+                        ...(Array.isArray(operationItem.class) ? operationItem.class : [operationItem.class])
+                    ]"
+                    :type="operationItem.btnType"
+                    :ghost="operationItem.ghost"
+                    :size="operationItem.size"
+                    :shape="operationItem.shape"
+                    :long="operationItem.long"
+                    :disabled="operationItem.disabled"
+                    :icon="operationItem.icon"
+                    :custom-icon="operationItem.customIcon ? `bico-font ${operationItem.customIcon}` : undefined"
+                    @click="emit(operationItem)"
+                >
+                    <span
+                        v-if="operationItem.name"
+                        class="DshButtons-item-name"
+                    >
+                        {{ operationItem.name }}
+                    </span>
+                </Button>
+
+                <!-- 更多的 下拉按钮-->
+                <dsh-dropdown
+                    v-if="leftMoreList.length"
+                    class="DshButtons-dropdown"
+                    :list="leftMoreList"
+                    :trigger="'hover'"
+                    @click="emit($event)"
+                >
+                    <slot name="more">
+                        <Button
+                            class="DshButtons-dropdown-more"
+                            :type="moreBtnOperationObj.btnType"
+                            :ghost="moreBtnOperationObj.ghost"
+                            :size="moreBtnOperationObj.size"
+                            :shape="moreBtnOperationObj.shape"
+                            :long="moreBtnOperationObj.long"
+                            :disabled="moreBtnOperationObj.disabled"
+                            :icon="moreBtnOperationObj.icon"
+                            :custom-icon="moreBtnOperationObj.customIcon ? `bico-font ${moreBtnOperationObj.customIcon}` : undefined"
+                        >
+                            <span class="DshButtons-dropdown-more-name">
+                                {{ moreBtnOperationObj.name }}
+                            </span>
+                        </Button>
+                    </slot>
+                </dsh-dropdown>
+            </div>
+
+            <!-- 右侧按钮 -->
+            <div class="DshButtons-flex-right">
+                <slot></slot>
+
+                <Button
+                    v-for="(operationItem, index) in rightList"
+                    :key="operationItem.type"
+                    :style="operationItem.style"
+                    :class="[
+                        index ? 'dsh-margin-left5' : undefined,
+                        !operationItem.customIcon && !operationItem.icon ? 'DshButtons-item' : undefined,
+                        itemClass,
+                        ...(Array.isArray(operationItem.class) ? operationItem.class : [operationItem.class])
+                    ]"
+                    :type="operationItem.btnType"
+                    :ghost="operationItem.ghost"
+                    :size="operationItem.size"
+                    :shape="operationItem.shape"
+                    :long="operationItem.long"
+                    :disabled="operationItem.disabled"
+                    :icon="operationItem.icon"
+                    :custom-icon="operationItem.customIcon ? `bico-font ${operationItem.customIcon}` : undefined"
+                    @click="emit(operationItem)"
+                >
+                    <span
+                        v-if="operationItem.name"
+                        class="DshButtons-item-name"
+                    >
+                        {{ operationItem.name }}
+                    </span>
+                </Button>
+            </div>
+        </div>
+
+        <template v-else>
+            <Button
+                v-for="(operationItem, index) in list"
+                :key="operationItem.type"
+                :style="operationItem.style"
+                :class="[
+                    index ? 'dsh-margin-left5' : undefined,
+                    !operationItem.customIcon && !operationItem.icon ? 'DshButtons-item' : undefined,
+                    itemClass,
+                    ...(Array.isArray(operationItem.class) ? operationItem.class : [operationItem.class])
+                ]"
+                :type="operationItem.btnType"
+                :ghost="operationItem.ghost"
+                :size="operationItem.size"
+                :shape="operationItem.shape"
+                :long="operationItem.long"
+                :disabled="operationItem.disabled"
+                :icon="operationItem.icon"
+                :custom-icon="operationItem.customIcon ? `bico-font ${operationItem.customIcon}` : undefined"
+                @click="emit(operationItem)"
+            >
+                <span
+                    v-if="operationItem.name"
+                    class="DshButtons-item-name"
+                >
+                    {{ operationItem.name }}
+                </span>
+            </Button>
+        </template>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DshButtons",
+        props: {
+            mode: {
+                type: String,
+                default: "default",
+                validator (val) {
+                    return ["default", "between"].includes(val);
+                }
+            },
+
+            list: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            leftList: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            rightList: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            maxFlatNum: {
+                type: [Number, String],
+                default: 12
+            },
+            itemClass: String
+        },
+        data () {
+            return {
+                moreBtnOperationObj: {
+                    name: "更多",
+                    type: "more",
+                    size: "default",
+                    customIcon: "bico-gengduo1"
+                }
+            };
+        },
+        computed: {
+            leftFlatList () {
+                return this.leftList.slice(0, this.maxFlatNum);
+            },
+            leftMoreList () {
+                return this.leftList.slice(this.maxFlatNum);
+            }
+        },
+        created () {},
+        methods: {
+            emit (operationItem) {
+                this.$emit("click", operationItem);
+            }
+        }
+    };
+</script>

package/src/components/small/DshControlDefine.vue

@@ -0,0 +1,110 @@
+<template>
+    <div
+        :class="{
+            'dsh-control-define': true,
+            'dsh-control-define-multiplerow': selfPropsObj._multiplerow,
+            'dsh-control-define-disabled': !canEdit
+        }"
+        @click="clickInput"
+    >
+        <!-- 有值 -->
+        <template v-if="Array.isArray(val) ? !!val.length : !!val">
+            <div
+                v-if="Array.isArray(val)"
+                class="dsh-control-define-text"
+            >
+                <dsh-tags
+                    :list="val"
+                    @delete="deleteTag"
+                    :propsObj="{
+                        closable: canEdit,
+                        size: selfPropsObj._multiplerow ? 'medium' : 'default'
+                    }"
+                ></dsh-tags>
+            </div>
+
+            <div
+                v-else
+                class="dsh-control-define-text"
+            >
+                <span class="dsh-ellipsis">{{ val }}</span>
+                <Icon
+                    v-if="canEdit"
+                    type="md-close"
+                    @click.stop="clickClear"
+                />
+            </div>
+        </template>
+
+        <!-- 无值 -->
+        <span
+            v-else
+            class="dsh-control-define-nodata"
+        >{{ selfPropsObj._placeholder }}</span>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DshControlDefine",
+        props: {
+            canEdit: {
+                type: Boolean,
+                default: true
+            },
+            value: {
+                type: [String, Array],
+                default () {
+                    return [];
+                }
+            },
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            }
+        },
+        data () {
+            return {};
+        },
+        computed: {
+            val: {
+                get () {
+                    return this.value;
+                },
+                set (val) {
+                    this.$emit("input", val);
+                }
+            },
+
+            selfPropsObj () {
+                return {
+                    _multiplerow: true,
+                    ...this.propsObj
+                };
+            }
+        },
+        created () {},
+        methods: {
+            clickInput (e) {
+                if (!this.canEdit) {
+                    e.stopPropagation();
+                }
+            },
+
+            // 删除
+            deleteTag (item, index, ...params) {
+                this.val = [...this.val];
+
+                this.$emit("delete", item, index, ...params);
+            },
+            // 清除文字
+            clickClear () {
+                this.val = "";
+
+                this.$emit("delete");
+            }
+        }
+    };
+</script>

package/src/components/small/DshCrumbs.vue

@@ -0,0 +1,61 @@
+<template>
+    <div :class="classes">
+        <slot></slot>
+    </div>
+</template>
+<script>
+    // const prefixCls = "ivu-breadcrumb";
+    const prefixCls = "dsh-crumb";
+
+    export default {
+        name: "DshCrumb",
+        props: {
+            separator: {
+                type: String,
+                default: "/"
+            }
+        },
+        computed: {
+            classes () {
+                return `${prefixCls}`;
+            },
+            linkUrl () {
+                const type = typeof this.to;
+                if (type !== "string") {
+                    return null;
+                }
+                if (this.to.includes("//")) {
+                    /* Absolute URL, we do not need to route this */
+                    return this.to;
+                }
+                const router = this.$router;
+                if (router) {
+                    const current = this.$route;
+                    const route = router.resolve(this.to, current, this.append);
+                    return route ? route.href : this.to;
+                }
+                return this.to;
+            }
+        },
+        mounted () {
+            this.updateChildren();
+        },
+        updated () {
+            this.$nextTick(() => {
+                this.updateChildren();
+            });
+        },
+        methods: {
+            updateChildren () {
+                this.$children.forEach((child) => {
+                    child.separator = this.separator;
+                });
+            }
+        },
+        watch: {
+            separator () {
+                this.updateChildren();
+            }
+        }
+    };
+</script>

package/src/components/small/DshCrumbsItem.vue

@@ -0,0 +1,107 @@
+<template>
+    <span>
+        <a
+            v-if="to"
+            :href="linkUrl"
+            :target="target"
+            :class="linkClasses"
+            @click.exact="handleCheckClick($event, false)"
+            @click.ctrl="handleCheckClick($event, true)"
+            @click.meta="handleCheckClick($event, true)"
+        >
+            <slot></slot>
+        </a>
+        <span
+            v-else
+            :class="linkClasses"
+        >
+            <slot></slot>
+        </span>
+        <span
+            :class="separatorClasses"
+            v-html="separator"
+            v-if="!showSeparator"
+        ></span>
+        <span
+            :class="separatorClasses"
+            v-else
+        >
+            <slot name="separator"></slot>
+        </span>
+    </span>
+</template>
+<script>
+    const prefixCls = "dsh-crumb-item";
+
+    export default {
+        name: "DshCrumbItem",
+        props: {
+            to: {
+                type: [Object, String]
+            },
+            replace: {
+                type: Boolean,
+                default: false
+            },
+            target: {
+                type: String,
+                default: "_self",
+                validator (value) {
+                    return ["_blank", "_self", "_parent", "_top"].includes(value);
+                }
+            },
+            append: {
+                type: Boolean,
+                required: false,
+                default: false
+            }
+        },
+        data () {
+            return {
+                separator: "",
+                showSeparator: false
+            };
+        },
+        computed: {
+            linkClasses () {
+                return `${prefixCls}-link`;
+            },
+            separatorClasses () {
+                return `${prefixCls}-separator`;
+            }
+        },
+        mounted () {
+            this.showSeparator = this.$slots.separator !== undefined;
+        },
+        methods: {
+            handleClick (newWindow = false) {
+                const router = this.$router;
+                if (newWindow) {
+                    let to = this.to;
+                    if (router) {
+                        const current = this.$route;
+                        const route = router.resolve(this.to, current, this.append);
+                        to = route ? route.href : this.to;
+                    }
+                    window.open(to);
+                } else {
+                    if (router) {
+                        this.replace ? this.$router.replace(this.to, () => {}) : this.$router.push(this.to, () => {});
+                    } else {
+                        window.location.href = this.to;
+                    }
+                }
+            },
+            handleCheckClick (event, newWindow = false) {
+                if (this.to) {
+                    if (this.target === "_blank") {
+                        return false;
+                    } else {
+                        event.preventDefault();
+                        this.handleClick(newWindow);
+                    }
+                }
+            }
+        }
+    };
+</script>