diff options
Diffstat (limited to 'usecaseui-portal/vue/src')
-rw-r--r-- | usecaseui-portal/vue/src/App.vue | 27 | ||||
-rw-r--r-- | usecaseui-portal/vue/src/assets/logo.png | bin | 0 -> 6849 bytes | |||
-rw-r--r-- | usecaseui-portal/vue/src/components/common/Menu.vue | 57 | ||||
-rw-r--r-- | usecaseui-portal/vue/src/const/address.js | 14 | ||||
-rw-r--r-- | usecaseui-portal/vue/src/const/index.js | 7 | ||||
-rw-r--r-- | usecaseui-portal/vue/src/const/menu-item.js | 90 | ||||
-rw-r--r-- | usecaseui-portal/vue/src/main.js | 76 | ||||
-rw-r--r-- | usecaseui-portal/vue/src/router/index.js | 30 | ||||
-rw-r--r-- | usecaseui-portal/vue/src/store/index.js | 11 | ||||
-rw-r--r-- | usecaseui-portal/vue/src/views/Home.vue | 15 | ||||
-rw-r--r-- | usecaseui-portal/vue/src/views/Test.vue | 11 |
11 files changed, 338 insertions, 0 deletions
diff --git a/usecaseui-portal/vue/src/App.vue b/usecaseui-portal/vue/src/App.vue new file mode 100644 index 00000000..1dfe7d8a --- /dev/null +++ b/usecaseui-portal/vue/src/App.vue @@ -0,0 +1,27 @@ +<template> + <div id="app"> + <Menu></Menu> + <router-view /> + </div> +</template> + +<script> +import Menu from "./components/common/Menu.vue" + +export default { + name: 'App', + components: { + Menu + } +} +</script> + +<style lang="scss"> +#app { + font-family: Avenir, Helvetica, Arial, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-align: center; + color: #2c3e50; +} +</style> diff --git a/usecaseui-portal/vue/src/assets/logo.png b/usecaseui-portal/vue/src/assets/logo.png Binary files differnew file mode 100644 index 00000000..f3d2503f --- /dev/null +++ b/usecaseui-portal/vue/src/assets/logo.png diff --git a/usecaseui-portal/vue/src/components/common/Menu.vue b/usecaseui-portal/vue/src/components/common/Menu.vue new file mode 100644 index 00000000..089ed3be --- /dev/null +++ b/usecaseui-portal/vue/src/components/common/Menu.vue @@ -0,0 +1,57 @@ +<template> + <div class="menu"> + <Menu theme="light" active-name="7" @on-select="seletMenu"> + <div v-for="(item, index) in menuList" :key="index"> + <Submenu :name="item.name" v-if="item.children.length!==0"> + <template slot="title"> + {{item.title}} + </template> + <MenuItem v-for="(val, index) in item.children" :key="index" :name="val.name"> + {{val.title}} + </MenuItem> + </Submenu> + <MenuItem :name="item.name" v-else>{{item.title}}</MenuItem> + </div> + </Menu> + <br> + </div> +</template> + +<script> +import { menu } from "@/const/index.js" + +export default { + components: { + }, + data () { + return { + menuList: menu.MENU_ITEM + } + }, + created () { + console.log(this.menuList) + }, + methods: { + seletMenu (name) { + let seletedItem = {} + for (let item of this.menuList) { + if (item.name === name) { + seletedItem = item + } else{ + for (let val of item.children) { + if (val.name === name) { + seletedItem = val + } + } + } + } + console.log(seletedItem) + this.$router.push({path: seletedItem.path}) + } + }, +}; +</script> + +<style lang="sass"> + +</style>
\ No newline at end of file diff --git a/usecaseui-portal/vue/src/const/address.js b/usecaseui-portal/vue/src/const/address.js new file mode 100644 index 00000000..573e8492 --- /dev/null +++ b/usecaseui-portal/vue/src/const/address.js @@ -0,0 +1,14 @@ +// addresses of angular and vue in the development environment +const ADDRESS = { + Angular: "http://localhost:4200/", + vue: "http://localhost:8089/" +}; + +const SELF_SOURCE = "vue"; +const MAIN_SOURCE = "Angular"; + +export default { + ADDRESS, + SELF_SOURCE, + MAIN_SOURCE +}; diff --git a/usecaseui-portal/vue/src/const/index.js b/usecaseui-portal/vue/src/const/index.js new file mode 100644 index 00000000..f9e5ac8a --- /dev/null +++ b/usecaseui-portal/vue/src/const/index.js @@ -0,0 +1,7 @@ +import menu from './menu-item' +import address from './address' + +export { + menu, + address +}
\ No newline at end of file diff --git a/usecaseui-portal/vue/src/const/menu-item.js b/usecaseui-portal/vue/src/const/menu-item.js new file mode 100644 index 00000000..7ab00b21 --- /dev/null +++ b/usecaseui-portal/vue/src/const/menu-item.js @@ -0,0 +1,90 @@ +// route table + +const MENU_ITEM = [ + { + name: '0', // Angular + title: 'Home', + children: [], + path: '/home', + source: 'Angular' + }, + { + name: '1', // Angular + title: 'Customer', + children: [], + path: '/management', + source: 'Angular' + }, + { + name: '2', // Angular + title: 'Services', + children: [ + { + name: '2-0', + title: 'Lifecycle Management', + path: '/services/services-list', + source: 'Angular' + }, + { + name: '2-1', + title: 'SOTN Eline', + path: '/services/sotn-management', + source: 'Angular' + }, + { + name: '2-2', + title: '5G Sclicing Management', + path: '/services/slicing-management', + source: 'Angular' + }, + ] + }, + { + name: '3', // Angular + title: 'Package Managemeny', + children: [], + path: '/onboard-vnf-vm', + source: 'Angular' + }, + { + name: '4', // Angular + title: 'Network Topology', + children: [ + { + name: '4-0', + title: 'CCVPN network', + path: '/network/ccvpn-network', + source: 'Angular' + }, + { + name: '4-1', + title: 'MDONS Network', + path: '/network/mdons-network', + source: 'Angular' + } + ] + }, + { + name: '5', // Angular + title: 'Monitor', + children: [ + { + name: '5-0', + title: '5G Slicing', + path: '/fcaps/5gslicing', + source: 'Angular' + } + ] + }, + { + name: '6', // Vue + title: 'Test', + children: [], + path: '/test', + source: 'Vue' + } +] + +export default { + MENU_ITEM +}
\ No newline at end of file diff --git a/usecaseui-portal/vue/src/main.js b/usecaseui-portal/vue/src/main.js new file mode 100644 index 00000000..14edb791 --- /dev/null +++ b/usecaseui-portal/vue/src/main.js @@ -0,0 +1,76 @@ +import Vue from "vue"; +import App from "./App.vue"; +import router from "./router"; +import store from "./store"; +import "view-design/dist/styles/iview.css"; +import { Menu, Button, MenuItem, MenuGroup, Icon, Submenu } from "view-design"; +import { address, menu } from "@/const/index.js"; + +Vue.component("Menu", Menu); +Vue.component("Button", Button); +Vue.component("MenuGroup", MenuGroup); +Vue.component("MenuItem", MenuItem); +Vue.component("Icon", Icon); +Vue.component("Submenu", Submenu); + +Vue.config.productionTip = false; + +new Vue({ + router, + store, + render: h => h(App) +}).$mount("#app"); + +// Routing global guard +// Before each route jump, it needs to judge whether it belongs to this project or not. If not, it will jump to other projects +router.beforeEach((to, from, next) => { + const target = to.path; + const route = router.options.routes; + const result = route.find(item => { + return item.path === target; + }); + if (typeof result === "undefined") { + // looking fro the source of this path + const menuList = menu.MENU_ITEM; + let source = null; + for (let item of menuList) { + if (item.path === target) { + source = item.source; + } else { + for (let val of item.children) { + if (val.path === target) { + source = val.source; + } + } + } + } + if (source === null) { + console.log( + "The source of the path is not recorded in the routing table" + ); + } else { + const targetServer = address.ADDRESS[source]; + let newUrl = ""; + if (process.env.NODE_ENV === "development") { + // dev + console.log(address.MAIN_SOURCE); + newUrl = `${targetServer}#${target}`; + } else { + let baseUrl = window.location.href.split("#")[0]; + if (source === address.MAIN_SOURCE) { + // If the target is the main project + baseUrl = `${baseUrl.split(address.SELF_SOURCE)[0]}`; + newUrl = `${baseUrl}#${target}`; + } else { + // If the target is another subproject + baseUrl = `${baseUrl.split(address.SELF_SOURCE)[0]}${source}/`; + newUrl = `${baseUrl}#${target}`; + } + } + console.log("new", newUrl); + window.location.href = newUrl; + } + } else { + next(); + } +}); diff --git a/usecaseui-portal/vue/src/router/index.js b/usecaseui-portal/vue/src/router/index.js new file mode 100644 index 00000000..88e94817 --- /dev/null +++ b/usecaseui-portal/vue/src/router/index.js @@ -0,0 +1,30 @@ +import Vue from "vue"; +import VueRouter from "vue-router"; +import Home from "../views/Home.vue"; + +Vue.use(VueRouter); + +// Different from angular, this route only needs to include the route in this project + +const routes = [ + { + path: "/vueHome", + name: "vueHome", + component: Home + }, + { + path: "/test", + name: "Test", + // route level code-splitting + // this generates a separate chunk (about.[hash].js) for this route + // which is lazy-loaded when the route is visited. + component: () => + import(/* webpackChunkName: "about" */ "../views/Test.vue") + } +]; + +const router = new VueRouter({ + routes +}); + +export default router; diff --git a/usecaseui-portal/vue/src/store/index.js b/usecaseui-portal/vue/src/store/index.js new file mode 100644 index 00000000..fb6015f4 --- /dev/null +++ b/usecaseui-portal/vue/src/store/index.js @@ -0,0 +1,11 @@ +import Vue from "vue"; +import Vuex from "vuex"; + +Vue.use(Vuex); + +export default new Vuex.Store({ + state: {}, + mutations: {}, + actions: {}, + modules: {} +}); diff --git a/usecaseui-portal/vue/src/views/Home.vue b/usecaseui-portal/vue/src/views/Home.vue new file mode 100644 index 00000000..2d03556f --- /dev/null +++ b/usecaseui-portal/vue/src/views/Home.vue @@ -0,0 +1,15 @@ +<template> + <div class="home"> + vuehome + </div> +</template> + +<script> +// @ is an alias to /src + +export default { + name: "Home", + components: { + } +}; +</script> diff --git a/usecaseui-portal/vue/src/views/Test.vue b/usecaseui-portal/vue/src/views/Test.vue new file mode 100644 index 00000000..3d59b5e3 --- /dev/null +++ b/usecaseui-portal/vue/src/views/Test.vue @@ -0,0 +1,11 @@ +<template> + <div>Vue test</div> +</template> +<script> +export default { + +} +</script> +<style lang="sass"> + +</style>
\ No newline at end of file |