@ganwei-web/ganwei-pc-cli 6.2.1 → 6.2.3

package/ganwei-iotcenter-index-6.2.1/packages/ganwei-iotcenter-index/src/components/indexRightContent/labelPage/index.js

@@ -0,0 +1,398 @@
+import ContextMenu from '@/components/contextMenu'
+const firstTab = '1'
+export default {
+    props: {
+        allMenus: {
+            type: Object,
+            default: () => []
+        },
+    },
+    inject: ['routesToName', 'outerLinkMap', 'routesToIcon'],
+
+    data () {
+        return {
+            editableTabs: [],
+            refreshName: '',
+            editableTabsValue: '',
+            isActive: false
+        }
+    },
+    mounted () {
+        window.addEventListener('message', e => {
+            if (e.data && typeof e.data == 'object' && 'setMenu' in e.data) {
+                // 传递被删除的菜单项的route到Index组件中
+                this.resetMenu({ route: e.data.route, setMenu: e.data.setMenu })
+            }
+        })
+        window.addEventListener('keyup', e => {
+            this.keyEvent(e)
+        })
+        this.$bus.on('openPage', data => {
+            const { changePath, callback } = data
+            this.$router.push(changePath)
+            if (callback) {
+                this.$nextTick(() => {
+                    callback()
+                })
+            }
+        })
+        // 外挂链接
+        window.openModulePage = this.openModulePage
+        window.refreshModulePage = this.refreshModulePage
+        window.closeModulePage = this.closeModulePage
+    },
+    watch: {
+        editableTabsValue (val) {
+            localStorage.editableTabsValue = val
+        },
+        allMenus: {
+            handler (val) {
+                if (!val.length) {
+                    return;
+                }
+                this.init()
+            },
+            immediate: true
+        },
+        $route () {
+            try { ContextMenu.close() } catch (e) {
+                console.log(e)
+            }
+
+            this.init()
+        }
+    },
+    methods: {
+        init(){
+            let { customize, title, icon, url } = this.$route.query
+            if(customize) {
+                this.openModulePageHandle(title, icon, url)
+            } else{
+                this.updateTabs()
+            }
+        },
+        updateTabs () {
+            this.$nextTick(() => {
+                let fullPath = decodeURIComponent(this.$route.fullPath)
+                let path = decodeURIComponent(this.$route.path)
+                let icon = this.routesToIcon[fullPath + 'icon'] || this.routesToIcon[path + 'icon']
+                if (this.$route.fullPath != '/Index') {
+                    this.$nextTick(() => {
+                        if (this.$route?.query?.currentPageName) {
+                            this.setTableTabs(this.$route.query.currentPageName, icon)
+                            return
+                        }
+                        let name = this.routesToName[fullPath] || this.routesToName[path]
+                        this.setTableTabs(name || this.$t('login.noAccess.noPage'), icon)
+                    })
+                }
+            })
+        },
+        resetMenu (data) {
+            // 判断是否删除标签页
+            if (data.route) {
+                // 找到标签页中被删除的菜单
+                this.editableTabs.forEach(item => {
+                    if (data.route == item.route) {
+                        this.removeTab(item.name)
+                    }
+                })
+            }
+        },
+
+        tabClick (event) {
+            this.refreshName = event.props.label
+            let result = (this.editableTabs instanceof Object) ? JSON.parse(JSON.stringify(this.editableTabs)) : []
+            result = result.filter(item => {
+                return item.title == event.props.label
+            })
+            let route = result[0].route
+            this.menuActive = route
+            this.$router.push(route)
+        },
+        openContextMenu (e) {
+            function getTabName (element) {
+                if (!e.currentTarget.contains(element)) {
+                    return ''
+                }
+                if (element.classList.contains('el-tabs__item')) {
+                    return element.id.split('-')[1]
+                }
+                return getTabName(element.parentElement)
+            }
+            let targetName = getTabName(e.target)
+            if (targetName === '') return
+            let startIndex = this.editableTabs.findIndex(i => i.name == targetName)
+            ContextMenu({
+                width: '150',
+                root: e.currentTarget,
+                left: e.clientX,
+                top: e.clientY,
+                commands: [
+                    {
+                        name: 'closeCurrent',
+                        label: this.$t('login.contextMenu.close'),
+                        icon: 'icon-tubiao24_guanbi',
+                        onclick: () => {
+                            this.removeTab(targetName)
+                        },
+                        disabled: this.editableTabs.length <= 1
+                    },
+                    {
+                        name: 'closeOther',
+                        label: this.$t('login.contextMenu.closeOther'),
+                        onclick: async () => {
+                            let toBeCloses = this.editableTabs.filter(i => i.name != targetName).map(i => i.name)
+                            for (let item of toBeCloses) {
+                                await this.removeTab(item)
+                            }
+                        },
+                        disabled: this.editableTabs.length <= 1
+                    },
+                    {
+                        name: 'closeLeft',
+                        label: this.$t('login.contextMenu.closeLeft'),
+                        onclick: async () => {
+                            let toBeCloses = this.editableTabs.slice(0, startIndex).map(i => i.name)
+                            for (let item of toBeCloses) {
+                                await this.removeTab(item)
+                            }
+                        },
+                        disabled: startIndex == 0
+                    },
+                    {
+                        name: 'closeRight',
+                        label: this.$t('login.contextMenu.closeRight'),
+                        onclick: async () => {
+                            let toBeCloses = this.editableTabs.slice(startIndex + 1).map(i => i.name)
+                            for (let item of toBeCloses) {
+                                await this.removeTab(item)
+                            }
+                        },
+                        disabled: startIndex == this.editableTabs.length - 1
+                    },
+                    {
+                        name: 'reload',
+                        label: this.$t('login.contextMenu.reload'),
+                        icon: 'icon-tubiao24_qiehuan',
+                        onclick: () => {
+                            this.refreshTab(startIndex)
+                        },
+                        disabled: false
+                    }
+                ]
+            })
+        },
+        // 关闭标签页
+        removeTab (targetName) {
+            console.log('removeTab', targetName);
+            
+            if (this.editableTabs.length == 1) return;
+            let tabs = JSON.parse(JSON.stringify(this.editableTabs))
+            let activeNameIndex = this.editableTabsValue
+            this.editableTabs.forEach(item => {
+                if (item.name == targetName) {
+                    item.disabled = true
+                }
+            })
+            return new Promise((resolve => {
+                tabs.forEach((tab, index) => {
+                    if (tab.name === targetName) {
+                        if (activeNameIndex === targetName) {
+                            let nextTab = tabs[(index != 0 ? index - 1 : index + 1)]
+                            if (nextTab) {
+                                activeNameIndex = nextTab.name
+                                localStorage.menuActiveName = nextTab.title
+                                this.menuActive = nextTab.route
+                                this.$router.push(nextTab.route)
+                                this.refreshName = nextTab.title
+                            }
+                            this.editableTabs[index].disabled = true
+                        }
+                        let routerPath = this.editableTabs[index].route
+                        if (routerPath && this.$refs[routerPath]?.[0]?.executeIframeFun) {
+                            this.$refs[routerPath][0].executeIframeFun(() => {
+                                let tagIndex = tabs.findIndex(i => i.name === targetName)
+                                this.editableTabs.splice(tagIndex, 1)
+                                resolve(true)
+                            })
+                        }
+                    }
+                })
+            }))
+
+        },
+
+        // 刷新标签页
+        refresh() {
+            try{
+                let dom = document.querySelectorAll('.tabs-page-container .el-tabs__item.is-active')
+                let index = dom[0].children[1].attributes.res.value
+                this.refreshTab(index)
+            } catch(e){
+                console.log(e)
+            }
+        },
+        refreshTab (index) {
+            this?.$store?.commit("setLoadingStatus", true)// 防止多次刷新
+            let routerPath = this.editableTabs[index].route
+            if (this.$refs[routerPath]?.[0]?.executeIframeFun) {
+                this.$refs[routerPath][0].executeIframeFun()
+            }
+            this.editableTabs[index].route = ''
+            this.isActive = true
+            setTimeout(() => {
+                this.editableTabs[index].route = routerPath
+                this.isActive = false
+            }, 100)
+        },
+
+        setTableTabs (title, icon) {
+
+            let len = this.editableTabs.length
+            // 判断标签页数组是否存在当前选中导航项
+            // this.editableTabs[index]
+            let isHave = false
+            let fullPath = this.$route.fullPath
+            let noPage = this.$t('login.noAccess.noPage')
+            
+            this.editableTabs.forEach(item => {
+                let isRefreshTab = item.route.includes(this.$route.path) && fullPath.includes('refreshTab=true')
+                if (item.route == fullPath || isRefreshTab) {
+                    isHave = true
+                }
+                if (isRefreshTab) {
+                    item.route = fullPath
+                }
+                if (item.title == title && noPage == title) {
+                    isHave = true
+                }
+            })
+
+            // 如果不存在则增加一项进数组，存在则只做标签页选中
+            if (!isHave) {
+                this.editableTabs.push({
+                    title: title,
+                    route: this.$route.fullPath,
+                    name: len ? String(Number(this.editableTabs[len - 1].name) + 1) : firstTab,
+                    disabled: false,
+                    icon: icon
+                })
+                len = this.editableTabs.length
+                this.editableTabsValue = this.editableTabs[len - 1].name
+                let n = this.editableTabs[0].name
+
+                if (len > 6) {
+                    this.removeTab(n)
+                    len--
+                }
+            } else {
+                for (let i = 0; i < len; i++) {
+                    const { route, name } = this.editableTabs[i]
+                    let isRefreshTab = route.includes(this.$route.path) && this.$route.fullPath.includes('refreshTab=true')
+                    if (this.$route.fullPath == route || isRefreshTab) {
+                        this.editableTabsValue = name
+                        if (isRefreshTab) {
+                            this.refreshTab(i)
+                        }
+                        break
+                    }
+                }
+            }
+            this.refreshName = localStorage.menuActiveName = title
+        },
+
+        keyupJump (num) {
+            let length = this.editableTabs.length;
+            for (let i = 0; i < length; i++) {
+                if (num == -1 && i != 0 && this.editableTabs[i].name == this.editableTabsValue) {
+                    this.$router.push(this.editableTabs[i - 1].route);
+                } else if (num == 1 && i != length - 1 && this.editableTabs[i].name == this.editableTabsValue) {
+                    this.$router.push(this.editableTabs[i + 1].route);
+                }
+            }
+        },
+
+        keyEvent (e) {
+            if (e.altKey && e.keyCode == 188) {
+                this.keyupJump(-1);
+            } else if (e.altKey && e.keyCode == 190) {
+                this.keyupJump(1);
+            }
+        },
+
+        openModulePage(hasPage = false, url, title = "模板管理", icon = "icon-caidan_shebeiliebiao", packageId = "", pluginName = "", menuName = "", customParameters = "") {
+            let query = hasPage ? {} : {
+                customize: true,
+                title: title,
+                icon: icon,
+                url: url,
+                packageId: packageId,
+                pluginName: pluginName,
+                menuName: menuName,
+                customParameters: customParameters
+            }
+            this.$router.push({ path: url, query: query })
+        },
+        openModulePageHandle(title, icon, url){
+            let len = this.editableTabs.length
+            let isHave = false// 判断标签页数组是否存在当前选中导航项
+            let fullPath = url
+            this.editableTabs.forEach(item => {
+                let isRefreshTab = item.route.includes(fullPath) 
+                if (item.route == fullPath) {
+                    isHave = true
+                }
+                if (isRefreshTab) {
+                    item.route = fullPath
+                }
+            })
+
+            // 如果不存在则增加一项进数组，存在则只做标签页选中
+            if (!isHave) {
+                this.editableTabs.push({
+                    title: title,
+                    route: fullPath,
+                    name: len ? String(Number(this.editableTabs[len - 1].name) + 1) : firstTab,
+                    disabled: false,
+                    icon: icon
+                })
+ 
+                len = this.editableTabs.length
+                this.editableTabsValue = this.editableTabs[len - 1].name
+                let n = this.editableTabs[0].name
+                if (len > 6) {
+                    this.removeTab(n)
+                    len--
+                }
+            } else {
+                for (let i = 0; i < len; i++) {
+                    const { route, name } = this.editableTabs[i]
+                    let isRefreshTab = route.includes(fullPath) 
+                    if (fullPath == route) {
+                        this.editableTabsValue = name
+                        if (isRefreshTab) {
+                            this.refreshTab(i)
+                        }
+                        break
+                    }
+                }
+            }
+            this.refreshName = localStorage.menuActiveName = title
+        },
+        refreshModulePage() {
+            this.refresh()
+        },
+        closeModulePage(path) {
+            if(path) {
+                this.editableTabs.forEach(item => {
+                    if (item.route.includes(path)) {
+                        this.removeTab(item.name)
+                    }
+                })
+            } else {
+                this.removeTab(this.editableTabsValue)
+            }
+        }
+    }
+}

package/ganwei-iotcenter-index-6.2.1/packages/ganwei-iotcenter-index/src/components/indexRightContent/labelPage/index.scss

@@ -0,0 +1,136 @@
+ .container-main {
+     ::v-deep .el-tabs {
+         height: 100%;
+         position: relative;
+         padding-top: 38px;
+         iframe {
+             border: 0px;
+         }
+
+         .el-tabs__header {
+            position: absolute;
+            left: 0;
+            top: 0;
+             width: 100%;
+             height: 38px;
+             margin-bottom: 0;
+             background-color: var(--frame-top-background);
+             border-top: 1px solid var(--frame-main-border2);
+             border-bottom: 1px solid var(--frame-main-border2);
+            z-index: 1;
+             .el-tabs__nav-scroll {
+                height: 100%;
+                display: flex;
+                align-items: end;
+                gap: 10px;
+                padding: 2px 10px;
+                 ::-webkit-scrollbar {
+                     width: 4px;
+                     height: 4px;
+                 }
+
+                 ::-webkit-scrollbar-button:vertical:start,
+                 ::-webkit-scrollbar-button:vertical:end,
+                 ::-webkit-scrollbar-button:horizontal:start,
+                 ::-webkit-scrollbar-button:horizontal:end {
+                     display: none;
+                 }
+
+                 ::-webkit-scrollbar-corner {
+                     background-color: red;
+                 }
+             }
+             .el-tabs__nav-wrap {
+                height: 100%;
+             }
+             .el-tabs__nav {
+                 height: 32px;
+                 border: 0;
+                 gap: 2px;
+                 .el-tabs__item {
+                     height: 100%;
+                     margin: 0;
+                     border: 0;
+                     border-radius: 8px 8px 0px 0px;
+                     background: var(--labelpage-background);
+                     box-shadow: 0px 1px 0px 0px var(--labelpage-boxshadow);
+                     color: var(--labelpage-color);
+                     overflow: hidden;
+                     >i{margin-right: 6px;}
+                     &:not(:first-child) {
+                         margin-left: 1px;
+                     }
+
+                     &:only-of-type {
+                         .el-icon-close {
+                             display: none;
+                         }
+                     }
+
+                     .el-icon {
+                         font-size: 14px;
+                         margin-right: 4px;
+                         overflow: hidden;
+                     }
+
+                     span:nth-child(2) {
+                         font-size: 12px;
+                     }
+                 }
+
+                 .el-icon-close {
+                     font-size: 14px;
+
+                     &:hover {
+                         background: transparent;
+                         color: var(--labelpage-icon-color__hover);
+                     }
+                 }
+
+                 .is-active {
+                     background-color: var(--labelpage-background__active);
+                     overflow: hidden;
+                     .el-icon-refresh-right {
+                         width: 14px;
+                         transition: all 0.3s;
+
+                         &:hover {
+                             color: var(--labelpage-icon-color__hover);
+                         }
+                     }
+                     span,i{
+                        color: var(--labelpage-color__active);
+                     }
+
+                     .active {
+                         transform: rotate(360deg);
+                         transition: all 0.5s;
+                     }
+                 }
+             }
+         }
+
+         .el-tabs__content {
+             height: 100%;
+
+             .el-tab-pane {
+                 height: 100%;
+             }
+         }
+     }
+
+     .tabs-refresh {
+         position: absolute;
+         right: 30px;
+         top: 10px;
+         z-index: 1;
+         cursor: pointer;
+         &:hover {
+             color: var(--button-primary-color);
+         }
+         i{
+            color: var(--button-primary-color);
+         }
+     }
+ }
+

package/ganwei-iotcenter-index-6.2.1/packages/ganwei-iotcenter-index/src/components/indexRightContent/labelPage/index.vue

@@ -0,0 +1,36 @@
+<template>
+    <el-main class="container-main">
+        <el-tabs @contextmenu.prevent="openContextMenu($event)" v-model="editableTabsValue" type="card" closable
+            @tab-remove="removeTab" @tab-click="tabClick" class="tabs-page-container">
+            <el-tab-pane v-for="(item, index) in editableTabs" :key="item.route" :label="item.title"
+                :disabled="item.disabled" :name="item.name">
+                <template v-slot:label>
+                    <i :class="'iconfont ' + item.icon"></i>
+                    <span ref="tab-title" :res="index">{{ item.title }}</span>
+                </template>
+                <Suspense>
+                     <!-- 通过/Index/jumpIframe/  **  跳转 frame -->
+                    <router-view v-slot="{ Component }" :key="item.route" :editableTabs="editableTabs" :editableTabsValue="editableTabsValue">
+                        <component :ref="item.route" :is="Component" />
+                    </router-view>
+                </Suspense>
+            </el-tab-pane>
+        </el-tabs>
+        <span class="tabs-refresh">
+            <el-tooltip
+                        class="box-item"
+                        effect="dark"
+                        :content="$t('login.contextMenu.reload')"
+                        placement="bottom"
+                    >
+                    <el-icon  @click.stop.prevent="refresh"
+                class="active" >
+                <RefreshRight />
+            </el-icon>
+            </el-tooltip>
+        </span>
+    </el-main>
+</template>
+
+<script src="./index.js"></script>
+<style src="./index.scss" scoped></style>

package/ganwei-iotcenter-index-6.2.1/packages/ganwei-iotcenter-index/src/components/indexRightContent/normalPage/index.js

@@ -0,0 +1,34 @@
+export default {
+
+    data () {
+        return {
+            breadcrumbList: []
+        }
+    },
+    inject: ['routesToName'],
+    mounted () {
+        localStorage.editableTabsValue = 'normalPage'
+        this.$bus.on('openPage', data => {
+            const { changePath, callback } = data
+            this.$router.push(changePath)
+            if (callback) {
+                this.$nextTick(() => {
+                    callback()
+                })
+            }
+        })
+    },
+    watch: {
+        $route: {
+            handler (to) {
+                let activeName = this.routesToName[to.fullPath];
+                this.breadcrumbList = [
+                    {
+                        title: activeName
+                    }
+                ]
+            },
+            immediate: true
+        }
+    }
+}

package/ganwei-iotcenter-index-6.2.1/packages/ganwei-iotcenter-index/src/components/indexRightContent/normalPage/index.scss

@@ -0,0 +1,44 @@
+.normalPage {
+    width: 100%;
+    height: 100%;
+
+    .noLabelPage {
+        height: calc(100% - 48px);
+    }
+}
+
+.el-main {
+    padding: 0px !important;
+    overflow: hidden;
+
+    iframe {
+        border: none;
+    }
+}
+
+// 面包屑导航
+.breadcrumb {
+    width: 100%;
+    height: 48px;
+    padding-left: 16px;
+    background-color: var(--con-bgColor3);
+
+    >div {
+        height: 100%;
+        line-height: 48px;
+        font-size: 14px;
+    }
+
+    ::v-deep .el-breadcrumb {
+
+        .is-link,
+        span {
+            font-weight: 500;
+            color: var(--frame-main-color);
+
+            &:hover {
+                color: var(--frame-main-color);
+            }
+        }
+    }
+}

package/ganwei-iotcenter-index-6.2.1/packages/ganwei-iotcenter-index/src/components/indexRightContent/normalPage/index.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="normalPage">
+        <div class="breadcrumb">
+            <el-breadcrumb separator-class="el-icon-arrow-right">
+                <el-breadcrumb-item>{{ $t('login.framePro.label.home') }}</el-breadcrumb-item>
+                <el-breadcrumb-item v-for="(item, i) in breadcrumbList" :key="i">{{
+                    $t(item.title || '') }}</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <el-main class="container-main noLabelPage" id="pane-normalPage">
+            <transition name="slide-fade" class="wh100">
+                <Suspense>
+                    <router-view :key="$route.fullPath"></router-view>
+                </Suspense>
+            </transition>
+        </el-main>
+    </div>
+</template>
+
+<script src="./index.js"></script>
+<style src="./index.scss" scoped></style>