bri-components 1.0.0

package/src/components/other/ZIframe.vue

@@ -0,0 +1,105 @@
+<template>
+    <div class="ZIframe">
+        <iframe
+            v-if="url"
+            ref="ZIframe"
+            class="ZIframe-iframe"
+            :src="url"
+            frameborder="0"
+            allowtransparency="true"
+        ></iframe>
+        <div
+            v-else
+            class="dsh-flex-row-center-center ZIframe-nodata"
+        >
+            <img
+                :src="noData"
+                alt="无数据"
+            >
+        </div>
+
+        <Spin
+            v-if="loading"
+            size="large"
+            fix
+        ></Spin>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "ZIframe",
+        props: {
+            url: {
+                type: String,
+                required: true
+            }
+        },
+        data () {
+            return {
+                loading: false,
+
+                noData: this.$imageSrcMap.app.nodata
+            };
+        },
+        computed: {},
+        mounted () {
+            this.init();
+            window.addEventListener("message", this.onMessage);
+        },
+        beforeDestroy () {
+            window.removeEventListener("message", this.onMessage, true);
+        },
+        methods: {
+            init () {
+                let iframe = this.$refs.ZIframe;
+                if (!iframe) {
+                    return;
+                }
+                this.loading = true;
+                if (iframe.attachEvent) {
+                    iframe.attachEvent("onreadystatechange", () => {
+                        if (iframe.readyState === "complete" || iframe.readyState == "loaded") {
+                            this.loadingEnd();
+                        }
+                    });
+                } else {
+                    iframe.addEventListener("load", () => {
+                        this.loadingEnd();
+                    }, false);
+                }
+
+            },
+            loadingEnd () {
+                this.loading = false;
+            },
+            /**
+             * 在iframe页面使用举例：
+             * let info = { "status": "success", type: "jumpPage", routerName: "home", params: {}, query: {} };
+             * window.parent.postMessage(info, "*");
+             *  */
+            onMessage ({ data }) {
+                if (data.status === "success") {
+                    this.$emit("on-message", data);
+                }
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .ZIframe {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        &-iframe {
+            flex: 1;
+            overflow: auto;
+        }
+        &-nodata {
+            width: 100%;
+            height: 100%;
+        }
+   }
+</style>

package/src/components/other/ZLoading.vue

@@ -0,0 +1,59 @@
+<template>
+   <div
+        v-if="value"
+        class="ZLoading"
+        :class="{
+            'ZLoading-fix': fix,
+            'ZLoading-center': center
+        }"
+    >
+        <div class="ZLoading-main">
+            <slot>
+                <img :src="imgSrc" />
+            </slot>
+        </div>
+   </div>
+</template>
+
+<script>
+    export default {
+        name: "ZLoading",
+        props: {
+            // 0 不加载，1：loading，2：空数据
+            value: {
+                type: Number,
+                default: 1
+            },
+            fix: {
+                type: Boolean,
+                default: false
+            },
+            center: {
+                type: Boolean,
+                default: true
+            },
+            loadImg: {
+                type: String
+            },
+            kongImg: {
+                type: String
+            }
+        },
+        data () {
+            return {};
+        },
+        computed: {
+            imgSrc () {
+                if (this.value == 1) {
+                    return this.loadImg || this.$imageSrcMap.loading;
+                } else if (this.value == 2) {
+                    return this.kongImg || this.$imageSrcMap.kongdata;
+                } else {
+                    return undefined;
+                }
+            }
+        },
+        created () {},
+        methods: {}
+    };
+</script>

package/src/components/other/menu/DshMenu.vue

@@ -0,0 +1,133 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-03-15 13:11:32
+ * @LastEditTime: 2021-03-19 10:33:27
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \model\src\components\other\menu\DshMenu.vue
+-->
+<template>
+    <div class="DshMenu">
+        <template v-for="subMenu in menuList">
+            <template v-if="!subMenu.children">
+                <MenuItem
+                    class="DshMenu-item"
+                    :key="subMenu._id"
+                    :name="subMenu._id"
+                >
+                <Badge
+                    class="DshMenu-item-badge"
+                    :key="subMenu._id + 'badge'"
+                    :count="getBadgeCount(subMenu)"
+                    :offset="[10, -16]"
+                >
+                    <Icon
+                        v-if="loopIndex === 1"
+                        class="DshMenu-item-icon"
+                        :custom="`bico-font ${subMenu.icon || `bico-${$appData.customIcons[subMenu.menuType]}`}`"
+                    />
+                    <span>{{ subMenu.name }}</span>
+                </Badge>
+                </MenuItem>
+            </template>
+
+            <!-- 组 -->
+            <template v-else>
+                <!-- 特殊的组 -->
+                <div
+                    v-if="subMenu.isSpecial"
+                    :key="subMenu._id"
+                    :style="{
+                        'padding-left': loopIndex === 1 ? undefined : `${(loopIndex - 2) * 24 + 43}px`
+                    }"
+                    :class="{
+                        'DshMenu-item': true,
+                        'ivu-menu-item': true,
+                        'ivu-menu-item-active': curSubMenu && curSubMenu._id === subMenu._id,
+                        'ivu-menu-item-selected': curSubMenu && curSubMenu._id === subMenu._id
+                    }"
+                    @click.stop="clickSpecialSubMenu(subMenu)"
+                >
+                    <Icon
+                        v-if="loopIndex === 1"
+                        :custom="`bico-font ${subMenu.icon || 'bico-file'}`"
+                    />
+                    {{ subMenu.name }}
+                </div>
+
+                <!-- 正常的组 -->
+                <Submenu
+                    v-else
+                    :key="subMenu._id"
+                    class="DshMenu-submenu"
+                    :name="subMenu._id"
+                >
+                    <!-- 组的title -->
+                    <template slot="title">
+                        <Icon
+                            v-if="loopIndex === 1"
+                            class="DshMenu-submenu-title-icon"
+                            :custom="`bico-font ${subMenu.icon || 'bico-file'}`"
+                        />
+                        <span>{{ subMenu.name }}</span>
+                    </template>
+
+                    <!-- 次级菜单 循环-->
+                    <dsh-menu
+                        :menuList="subMenu.children"
+                        :curSubMenu="curSubMenu"
+                        :loopIndex="loopIndex + 1"
+                        @changeSpecialSubMenu="changeSpecialSubMenuCb"
+                    ></dsh-menu>
+                </Submenu>
+            </template>
+        </template>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DshMenu",
+        props: {
+            menuList: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+
+            curSubMenu: Object,
+            loopIndex: {
+                type: Number,
+                default: 1
+            },
+            showBadgeList: {
+                type: Array,
+                default: () => []
+            }
+        },
+        data () {
+            return {};
+        },
+        computed: {},
+        created () {},
+        methods: {
+            clickSpecialSubMenu (subMenu) {
+                if (!this.curSubMenu || subMenu._id !== this.curSubMenu._id) {
+                    this.$emit("changeSpecialSubMenu", subMenu._id, subMenu);
+                }
+            },
+            changeSpecialSubMenuCb (...params) {
+                this.$emit("changeSpecialSubMenu", ...params);
+            },
+            getBadgeCount (menuItem) {
+                const badgeObj = this.showBadgeList.find(item => item.showBadgeKey === menuItem.menuKey);
+                return this.showBadgeList.length
+                    ? badgeObj
+                        ? badgeObj.count
+                        : 0
+                    : 0;
+            }
+        }
+    };
+</script>

package/src/components/other/menu/DshMenuNav.vue

@@ -0,0 +1,104 @@
+<template>
+    <div class="DshMenuNav">
+        <!-- 坑 -->
+        <div
+            v-if="position === 'right'"
+            class="DshMenuNav-view"
+        >
+            <router-view></router-view>
+        </div>
+
+        <div
+            v-if="showMenuList"
+            :class="[
+                'DshMenuNav-nav',
+                `DshMenuNav-nav-${position}`,
+                `DshMenuNav-nav-${layout}`
+            ]"
+            :style="{
+                width: `${+width}px`
+            }"
+        >
+            <div
+                v-if="title"
+                class="DshMenuNav-nav-title"
+            >
+                <!-- <Icon type="ios-settings" size="18" /> -->
+                <span>{{ title }}</span>
+            </div>
+
+            <div
+                class="list"
+                :style="{
+                    marginBottom: routeList.some(routeItem => routeItem.meta.bottom) ? '60px' : undefined
+                }"
+            >
+                <div
+                    v-for="routeItem in routeList"
+                    :key="routeItem.name"
+                    :class="['list-item', { 'list-item-active': routeItem.name === $getRouteName() }, { 'list-item-bottom': routeItem.meta.bottom } ]"
+                    :style="{ fontWeight: routeItem.meta.weight ? 600 : undefined }"
+                    @click="$goPage(routeItem)"
+                >
+                    <span
+                        v-if="routeItem.meta.beforeText"
+                        class="list-item-beforeText"
+                        @click.stop="0"
+                    >
+                        {{ routeItem.meta.beforeText }}
+                    </span>
+                    <Icon
+                        v-if="routeItem.meta.customIcon"
+                        class="list-item-iconClass"
+                        :custom="'bico-font ' + routeItem.meta.customIcon"
+                    />
+                    <span style="vertical-align:middle;">
+                        {{ routeItem.meta.title }}
+                    </span>
+                </div>
+            </div>
+        </div>
+
+        <!-- 坑 -->
+        <div
+            v-if="position === 'left'"
+            class="DshMenuNav-view"
+        >
+            <router-view></router-view>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DshMenuNav",
+        props: {
+            position: {
+                type: String,
+                default: "left"
+            },
+            width: {
+                type: [String, Number],
+                default: "200"
+            },
+            title: String,
+            routeList: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            showMenuList: {
+                type: Boolean,
+                default: true
+            },
+            layout: String
+        },
+        data () {
+            return {};
+        },
+        computed: {},
+        created () {},
+        methods: {}
+    };
+</script>

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

@@ -0,0 +1,34 @@
+<template>
+    <div class="error">
+        <div class="error-body">
+            <Card class="error-body-card">
+                <div class="error-body-title">
+                    <span>4</span><!--
+                    --><span class="span-403-0"><Icon type="md-lock" /></span><!--
+                    --><span class="span-403-3">3</span>
+                </div>
+                <p class="error-body-message">很抱歉，您没有该页面的访问权限！</p>
+                <p class="error-body-message">I'm sorry, You don't have permission!</p>
+
+                <!-- 返回按钮组件 -->
+                <error-back :backNum="-2"></error-back>
+            </Card>
+        </div>
+    </div>
+</template>
+
+<script>
+    import errorBack from "./errorBack.vue";
+
+    export default {
+        name: "Error403",
+        components: {
+            errorBack
+        },
+        methods: {}
+    };
+</script>
+
+<style lang="less" scoped>
+    @import url("./error.less");
+</style>

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

@@ -0,0 +1,34 @@
+<template>
+    <div class="error">
+        <div class="error-body">
+            <Card class="error-body-card">
+                <div class="error-body-title">
+                    <span>4</span><!--
+                    --><span class="span-404"><Icon type="ios-navigate-outline" /></span><!--
+                    --><span>4</span>
+                </div>
+                <p class="error-body-message">抱歉，您访问的页面不存在！</p>
+                <p class="error-body-message">I'm sorry, The page you visited is incorrect!</p>
+
+                <!-- 返回按钮组件 -->
+                <error-back></error-back>
+            </Card>
+        </div>
+    </div>
+</template>
+
+<script>
+    import errorBack from "./errorBack.vue";
+
+    export default {
+        name: "Error404",
+        components: {
+            errorBack
+        },
+        methods: {}
+    };
+</script>
+
+<style lang="less" scoped>
+    @import url("./error.less");
+</style>

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

@@ -0,0 +1,34 @@
+<template>
+    <div class="error">
+        <div class="error-body">
+            <Card class="error-body-card">
+                <div class="error-body-title">
+                    <span>5</span><!--
+                    --><span class="span-500-0"><Icon type="logo-freebsd-devil" /></span><!--
+                    --><span class="span-500-0"><Icon type="logo-freebsd-devil" /></span>
+                </div>
+                <p class="error-body-message">抱歉，服务器发生错误！</p>
+                <p class="error-body-message">I'm sorry, the server is wrong!</p>
+
+                <!-- 返回按钮组件 -->
+                <error-back></error-back>
+            </Card>
+        </div>
+    </div>
+</template>
+
+<script>
+    import errorBack from "./errorBack.vue";
+
+    export default {
+        name: "Error500",
+        components: {
+            errorBack
+        },
+        methods: {}
+    };
+</script>
+
+<style lang="less" scoped>
+    @import url("./error.less");
+</style>

package/src/components/pages/Error/error.less

@@ -0,0 +1,163 @@
+.error {
+    &-body {
+        width: 900px;
+        height: 550px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%,-50%);
+        &-card {
+            width: 900px;
+            height: 550px;
+        }
+        &-title {
+            text-align: center;
+            font-size: 240px;
+            font-weight: 700;
+            color: #2d8cf0;
+            height: 260px;
+            line-height: 260px;
+            margin-top: 40px;
+
+            .span-403-0 {
+                display: inline-block;
+                position: relative;
+                width: 170px;
+                height: 170px;
+                border-radius: 50%;
+                border: 20px solid #ed3f14;
+                color: #ed3f14;
+                margin-right: 10px;
+                i{
+                    display: inline-block;
+                    font-size: 120px;
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%,-50%);
+                    
+                }
+            }
+            .span-403-3 {
+                display: inline-block;
+                position: relative;
+                width: 100px;
+                height: 190px;
+                border-radius: 50%;
+                margin-right: 10px;
+                transform-origin: center bottom;
+                animation: error403animation 2.8s ease 0s infinite;
+                // i {
+                //     display: inline-block;
+                //     font-size: 190px;
+                //     position: absolute;
+                //     left: 20px;
+                //     transform: translate(-50%,-60%);
+                //     transform-origin: center bottom;
+                //     animation: error403animation 2.8s ease 0s infinite;
+                // }
+            }
+
+            .span-404 {
+                display: inline-block;
+                color: #19be6b;
+                font-size: 230px;
+                animation: error404animation 3s ease 0s infinite alternate;
+            }
+
+            .span-500-0 {
+                display: inline-block;
+                position: relative;
+                width: 170px;
+                height: 170px;
+                border-radius: 50%;
+                border: 20px solid #ed3f14;
+                color: #ed3f14;
+                margin-right: 10px;
+                i {
+                    display: inline-block;
+                    font-size: 120px;
+                    position: absolute;
+                    bottom: -10px;
+                    left: 10px;
+                    transform-origin: center bottom;
+                    animation: error500animation 3s ease 0s infinite alternate;
+                }
+            }
+        }
+        &-message {
+            display: block;
+            text-align: center;
+            font-size: 30px;
+            font-weight: 500;
+            letter-spacing: 3px;
+            color: #dddde2;
+        }
+    }
+}
+
+@keyframes error403animation {
+    0% {
+        transform: rotateZ(0deg);
+    }
+    40% {
+        transform: rotateZ(-20deg);
+    }
+    45% {
+        transform: rotateZ(-15deg);
+    }
+    50% {
+        transform: rotateZ(-20deg);
+    }
+    55% {
+        transform: rotateZ(-15deg);
+    }
+    60% {
+        transform: rotateZ(-20deg);
+    }
+    100% {
+        transform: rotateZ(0deg);
+    }
+}
+
+@keyframes error404animation {
+    0% {
+        transform: rotateZ(0deg);
+    }
+    20% {
+        transform: rotateZ(-60deg);
+    }
+    40% {
+        transform: rotateZ(-10deg);
+    }
+    60% {
+        transform: rotateZ(50deg);
+    }
+    80% {
+        transform: rotateZ(-20deg);
+    }
+    100% {
+        transform: rotateZ(0deg);
+    }
+}
+
+@keyframes error500animation {
+    0% {
+        transform: rotateZ(0deg);
+    }
+    20% {
+        transform: rotateZ(-10deg);
+    }
+    40% {
+        transform: rotateZ(5deg);
+    }
+    60% {
+        transform: rotateZ(-5deg);
+    }
+    80% {
+        transform: rotateZ(10deg);
+    }
+    100% {
+        transform: rotateZ(0deg);
+    }
+}