gy-webcode2 1.1.8 → 1.2.1

package/framework/main.vue

@@ -0,0 +1,362 @@
+<template>
+    <div class="wrapper " :class="{hideMenuAll:$route.query.hideMenuAll == 1}"  v-if="data.length > 0">
+        <headComponent></headComponent>
+        <div class="wrapper_body" :class="{max : leftMenu_show}" >
+            <sidebarComponent></sidebarComponent>
+
+            <div class="flex_1 flex_column"  v-if="isInitRouteTab()">
+                <div class="routerTabs">
+                    <div class="menuBtn mar_r_4" ref="menuNext">
+                        <i class="el-icon-arrow-left"></i>
+                    </div>
+                    <div class="flex_1 pr">
+                        <div class="swiper-container mySwiper pa0 oh" ref="swiper_el" >
+                            <div class="swiper-wrapper">
+                                <div class="swiper-slide" v-for="item,index in openRouters" :key="item.fullPath">
+                                    <div class="item" @contextmenu.prevent.stop="rightClick($event,item,index)" @click="tabClick(item)" :class="{active:$route.fullPath.includes(item.fullPath)}" >
+                                        <div class="name tesr1">
+                                            {{item.name}}
+                                        </div>
+                                        <div class="other hover2" v-if="openRouters.length > 1">
+                                            <i class="el-icon-close"  @click.stop="removeOpenRouter(item,index)"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="menuBtn mar_l_4" ref="tabsPrev">
+                        <i class="el-icon-arrow-right"></i>
+                    </div>
+                </div>
+                <div class="wrapper_main">
+                    <template v-for="item,index in openRouters" >
+                        <component :key="item.fullPath" v-if="item.isLoad" :is="item.component" v-show="$route.fullPath.includes(item.fullPath)"  />
+                    </template>
+                </div>
+            </div>
+            <div class="wrapper_main" v-else>
+                <router-view />
+            </div>
+        </div>
+
+        <div class="rightMenuBox"  ref="rightMenuBox" v-show="rightMenuShow">
+            <div class="item" @click.stop="menuClick(0)">
+                <div class="icon">
+                    <i class="el-icon-refresh"></i>
+                </div>
+                <div class="name">
+                    刷新
+                </div>
+            </div>
+            <div class="item" v-show="openRouters.length > 1" @click.stop="menuClick(1)">
+                <div class="icon">
+                    <i class="el-icon-close"></i>
+                </div>
+                <div class="name">
+                    关闭当前
+                </div>
+            </div>
+            <div class="item" v-show="openRouters.length > 1" @click.stop="menuClick(2)">
+                <div class="icon">
+                    <i class="el-icon-folder-delete"></i>
+                </div>
+                <div class="name">
+                    关闭其他
+                </div>
+            </div>
+            <div class="item" v-show="openRouters.length > 1" @click.stop="menuClick(3)">
+                <div class="icon">
+                    <i class="el-icon-back"></i>
+                </div>
+                <div class="name">
+                    关闭左侧
+                </div>
+            </div>
+            <div class="item" v-show="openRouters.length > 1" @click.stop="menuClick(4)">
+                <div class="icon">
+                    <i class="el-icon-right"></i>
+                </div>
+                <div class="name">
+                    关闭右侧
+                </div>
+            </div>  
+        </div>
+    </div>
+</template>
+
+<script>
+    import {computed,provide, watch,defineAsyncComponent, ref, reactive,shallowRef, nextTick,onMounted} from "vue"
+    import headComponent from '@/components/head.vue';
+    import sidebarComponent from '@/components/sidebar'
+    import watermark from "gy-webcode2/scripts/watermark"
+    import Swiper from "swiper/bundle";
+    import "swiper/css/bundle";
+    export default {
+        name:"myIndex",
+        data(){
+            return {
+                transitionName:"",
+                tabsSwiper:null,
+                rightMenuShow:false,
+                rightMenuActive:null,
+            }
+        },
+        created(){
+        },
+        computed:{
+            menuPath(){
+                return this.$store.state.menu.menuPath
+            },
+            openRouters(){
+                return this.vuex_openRouters
+            },
+            leftMenu_show(){
+                return this.$store.state.leftMenu_show;
+            },
+            data() {
+                return this.$store.state.menu.data;
+            },
+        },
+        watch:{
+            '$route':function(){
+                // console.log(this.$route);
+                this.getRouterTabs()
+                
+            }
+        },
+        mounted(){
+            let username=userInfo.username;
+            let usercode=userInfo.usercode;
+            this.$vuex('vuex_watermarkImg',watermark({
+                text:`${username}(${usercode})`
+            })) 
+            this.getRouterTabs()
+            this.initTabsSwiper()
+
+            $("body").on("click",()=>{
+                this.rightMenuShow  = false
+            })
+            
+        },
+        methods:{
+            isInitRouteTab(){
+                if(this.$route.query.hideMenuAll == 1){
+                    return false;
+                }
+                if(this.vuex_routeTabsShow){
+                    return true;
+                }
+                return false;
+            },
+            rightClick(event,data,index){
+                event.stopPropagation()
+                // console.log(event);
+                // if(this.openRouters.length <= 1){
+                //     return;
+                // }
+                
+                this.rightMenuActive = index;
+                this.rightMenuShow = true;
+
+                $(this.$refs.rightMenuBox).css({
+                    left:event.pageX,
+                    top:event.pageY
+                })
+                // alert(1)
+            },
+            menuClick(val){
+                let data = this.openRouters[this.rightMenuActive];
+                if(val == 0){
+                    data.isLoad = false;
+                    setTimeout(() => {
+                        data.isLoad = true;
+                    }, 10);
+                }
+                // 关闭当前
+                if(val == 1){
+                    this.openRouters.splice(this.rightMenuActive,1);
+                    if(this.$route.fullPath.includes(data.fullPath)){
+                        if(this.rightMenuActive != 0){
+                            this.$router.replace(this.openRouters[this.rightMenuActive-1].fullPath)
+                        }
+                        else {
+                            this.$router.replace(this.openRouters[this.rightMenuActive].fullPath)
+                        }
+                    }
+                }
+                // 关闭其他
+                else if(val == 2){
+                    if(!this.$route.fullPath.includes(data.fullPath)){
+                        this.$router.replace(this.openRouters[this.rightMenuActive].fullPath)
+                    }
+                    this.$store.state.vuex_openRouters = this.$store.state.vuex_openRouters.filter(i => i.fullPath == data.fullPath)
+                }
+
+                // 关闭左侧
+                else if(val == 3){
+                    if(!this.$route.path.includes(data.fullPath)){
+                        this.$router.replace(this.openRouters[this.rightMenuActive].fullPath)
+                    }
+                    this.$store.state.vuex_openRouters = this.$store.state.vuex_openRouters.slice(this.rightMenuActive)
+                }
+                // 关闭右侧
+                else if(val == 4){
+                    if(!this.$route.path.includes(data.fullPath)){
+                        this.$router.replace(this.openRouters[this.rightMenuActive].fullPath)
+                    }
+                    this.$store.state.vuex_openRouters = this.$store.state.vuex_openRouters.slice(0,this.rightMenuActive+1)
+                }
+                this.tabsSwiper.update()
+                this.rightMenuShow = false;
+            },
+
+            initTabsSwiper(){
+                if(!this.isInitRouteTab()){
+                    return;
+                }
+
+                this.tabsSwiper = new Swiper(this.$refs.swiper_el, {
+                    // modules: [Navigation, Pagination],
+                    slidesPerView:'auto',
+                    spaceBetween: 0,
+                    navigation: {
+                        nextEl: this.$refs.tabsPrev,
+                        prevEl: this.$refs.menuNext,
+                    },
+                });
+            },
+            tabClick(item){
+                // console.log(item);
+                if(this.$route.fullPath != item.fullPath){
+                    this.$router.push(item.fullPath)
+                }
+            },
+            getRoute(){
+                // console.log(this.$route.matched[0]);
+                // console.log(this.$router.options.routes);
+                // console.log("___");
+                // // console.log(this.$router.options.routes.find(i => i.path == '/ysj'));
+                const router_ysj = this.$router.options.routes.find(i => i.path == this.$route.matched[0].path)
+                // console.log(router_ysj);
+                let myRoute = router_ysj.children.find(i => i.path == this.$route.path)
+                if(myRoute){
+                    return myRoute;
+                }
+            },
+            async getRouterTabs(){
+                if(!this.isInitRouteTab()){
+                    return;
+                }
+                let myRoute = this.getRoute()
+                let isFind = this.openRouters.findIndex(i => this.$route.fullPath.includes(i.fullPath) || this.$route.path == i.path);
+                // console.log(isFind);
+
+                let findName = this.openRouters.find(i => this.$route.path == i.path);
+                // // console.log(this.openRouters);
+                // // console.log(this.$route.name);
+                // // console.log(findName,isFind);
+                if(findName && findName.fullPath != this.$route.fullPath){
+                    // console.log(findName);
+                    this.openRouters[isFind].fullPath = this.$route.fullPath
+
+                }
+                // console.log(isFind);
+
+                if(isFind ==-1 && myRoute.path != 'refresh'){
+                    let routerMsg = Object.keys(this.menuPath).find(i => decodeURIComponent(this.$route.fullPath).includes(i))
+                    // console.log(routerMsg);
+                    // console.log(this.menuPath[routerMsg]);
+                    this.openRouters.push({
+                        name:this.menuPath[routerMsg].name,
+                        path:this.$route.path,
+                        fullPath:this.$route.fullPath,
+                        isLoad:true,
+                        component:myRoute.component
+                        // component:shallowRef(defineAsyncComponent(myRoute.component))
+                    })
+                    // console.log(this.openRouters);
+                    await nextTick()
+                    if(this.tabsSwiper){
+                        this.tabsSwiper.navigation.update();
+                    }
+                    this.tabsSwiper.update()
+                    this.tabsSwiper.slideTo(this.openRouters.length);
+                }
+                else{
+                    this.tabsSwiper.slideTo(isFind);
+                }
+            },
+            async removeOpenRouter(item,index){
+                this.openRouters.splice(index,1);
+                await nextTick()
+                if(this.$route.fullPath.includes(item.fullPath)){
+                    if(index != 0){
+                        this.$router.replace(this.openRouters[index-1].fullPath)
+                    }
+                    else {
+                        this.$router.replace(this.openRouters[index].fullPath)
+                    }
+                }
+                this.tabsSwiper.update()
+            },
+        },
+        components: {
+             sidebarComponent,headComponent,
+        },
+
+        beforeRouteUpdate (to, from, next) {
+            this.$http.removePending('all');
+            next()
+            // 在当前路由改变，但是该组件被复用时调用
+            // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
+            // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
+            // 可以访问组件实例 `this`
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+.hideMenuAll{
+    .wrapper_header{
+        display: none;
+    }
+    .wrapper_body{
+        .sidebarBox {
+            display: none;
+        }
+        .routerTabs{
+            display: none;
+        }
+    }
+}
+.rightMenuBox{
+    position: fixed;
+    width: 100px;
+    // height: 200px;
+    padding:5px 0;
+    background: #fff;
+    left: 10px;
+    top: 10px;
+    z-index: 999;
+    // box-shadow: 0 0 10px 3px #aaa;
+    box-shadow: 0 0 10px 0px #aaa  ;
+    border-radius:4px;
+    .item{
+        display: flex;
+        align-items: center;
+        font-size: 12px;
+        height: 30px;
+        // border: 1px solid #000;
+        padding-left: 12px;
+        cursor: pointer;
+        .icon{
+            margin-right: 5px;
+        }
+        &:hover{
+            // color: #009499;
+            @include themeColor("color",'hover')
+        }
+    }
+}
+</style>

package/framework/refresh.vue

@@ -0,0 +1,18 @@
+<template>
+    
+</template>
+<script>
+export default {
+    beforeRouteEnter(to, from, next) {
+        next(vm => {
+            vm.$router.replace({
+                path:from.path,
+                query:from.query
+            })
+        })
+    }
+}
+</script>
+<style lang="scss" scoped>
+
+</style>

package/index.js

@@ -10,9 +10,10 @@
 // ~的意思是匹配最近的小版本 比如~1.0.2将会匹配所有的1.0.x版本，但不匹配1.1.0
 // ^的意思是最近的一个大版本 比如1.0.2 将会匹配 所有 1.x.x, 但不包括2.x.x
 // * 这意味着安装最新版本的依赖包
-// 已使用项目 指标管理、数据治理
+// 已使用项目 指标管理、数据治理 、数据标准
 // https://registry.npmjs.org/gy-webcode2
 
+// 1.2.0 breadcrumb 使用store的menuPath了
 module.exports = {
-    version :'1.1.8',
+    version :'1.2.1',
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gy-webcode2",
-  "version": "1.1.8",
+  "version": "1.2.1",
   "description": "gy前端公共代码",
   "main": "index.js",
   "scripts": {