| | |
| | | <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> |
| | | <span :class="item.checked ? 'my-active' : 'my-activeno'" @click="menuChange(item)">{{ item.label }}</span> |
| | | </div> |
| | | <div class="menu-left__item" v-for="(item, index) in menuLinkList" :key="item.id+index" > |
| | | <span class="link-active" @click="menuOpen(item)">{{ item.name }}</span> |
| | | </div> |
| | | <el-dropdown trigger="click" @command="handleCommand" v-if="linkLeng"> |
| | | <span class="el-dropdown-link"> |
| | | <i class="el-icon-arrow-down el-icon--right"></i> |
| | | </span> |
| | | <el-dropdown-menu slot="dropdown" > |
| | | <el-dropdown-item v-for="(i,dx) in menuLinkLists" :key="i.id+dx" :command="i">{{i.name}}</el-dropdown-item> |
| | | </el-dropdown-menu> |
| | | </el-dropdown> |
| | | </div> |
| | | <!-- 右侧菜单 --> |
| | | <div class="header-right"> |
| | |
| | | import updatePassword from "./updatePassword"; |
| | | import users from "@/api/users"; |
| | | import { Message } from "element-ui"; |
| | | import {searchexternalLinks} from "@/api/system/portal/externalLinks"; |
| | | |
| | | export default { |
| | | components: { |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | linkLeng:false, |
| | | menuLinkLists:[], |
| | | menuLinkList:[], |
| | | baseInformationVisible: false, |
| | | updatePasswordDialog: false, |
| | | channelSettingVisible: false, |
| | |
| | | url: '', |
| | | id: '4f', |
| | | }, |
| | | { |
| | | label: '外部链接', |
| | | checked: false, |
| | | url: '', |
| | | id: '5f', |
| | | }, |
| | | ], |
| | | flag: { |
| | | user: false, |
| | |
| | | }, |
| | | created() { |
| | | this.setLoginInfo(); |
| | | this.getExternalLinks() |
| | | }, |
| | | mounted(){ |
| | | window.eventBus.$on('setFeaturesData', ()=>{ // 不带参数 |
| | | this.getExternalLinks() |
| | | }) |
| | | }, |
| | | watch:{ |
| | | $route() { |
| | |
| | | }, |
| | | }, |
| | | methods: { |
| | | handleCommand(e){ |
| | | console.log(e) |
| | | this.menuOpen(e) |
| | | }, |
| | | menuOpen(row){ |
| | | window.open('http://'+row.url, '_blank'); |
| | | }, |
| | | async getExternalLinks() { |
| | | await searchexternalLinks().then((res) => { |
| | | let that = this |
| | | that.menuLinkList=[] |
| | | if (res.length > 5) { |
| | | that.linkLeng = true |
| | | } |
| | | that.menuLinkLists = res |
| | | for (let i = 0; i < res.length; i++) { |
| | | that.menuLinkList.push(res[i]) |
| | | if (i == 4) { |
| | | break; |
| | | } |
| | | } |
| | | console.log(that.menuLinkLists) |
| | | // this.menuLinkList = res |
| | | |
| | | }); |
| | | }, |
| | | cancelChannel(){ |
| | | this.channelSettingVisible=false |
| | | }, |
| | |
| | | if (data.id === '4f') { |
| | | window.open('http://116.62.234.187:8120/#/Customer', '_blank'); |
| | | } |
| | | if (data.id === '5f') { |
| | | this.$router.push({ path: "/home/system/platform/externalLinks" }) |
| | | } |
| | | |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .el-dropdown-link { |
| | | cursor: pointer; |
| | | color: #409EFF; |
| | | } |
| | | ::v-deep .el-form { |
| | | padding: 3vh 5vw; |
| | | |
| | |
| | | .header-left { |
| | | display: flex; |
| | | flex: 1; |
| | | |
| | | align-items: center; |
| | | .menu-left__item { |
| | | width: 120px; |
| | | |
| | |
| | | } |
| | | } |
| | | } |
| | | .link-active{ |
| | | overflow:hidden; |
| | | |
| | | white-space: nowrap; |
| | | |
| | | text-overflow: ellipsis; |
| | | |
| | | -o-text-overflow:ellipsis; |
| | | } |
| | | .link-active:hover{ |
| | | color: #2f54eb; |
| | | background-color: #313350; |
| | | } |
| | | .my-active { |
| | | border-radius: 20px; |
| | | color: #2f54eb; |