module-menu-vue 0.0.1 → 0.0.3

package/src/components/Menu/ModuleMenu.vue

@@ -0,0 +1,189 @@
+<template>
+    <div>
+        <div class='menuPopupAndTitle'>
+            <div class='menuIcon' @click="showMenuList = !showMenuList">
+                <img class="menuIcon_img" :src="menuIconSrc" />
+            </div>
+            <div class="menu_title_content">
+                <img class="menu_title_content_img" :src="getLogoAndTitle().logoSrc" alt="logo" />
+                <span class="menu_title">{{getLogoAndTitle().title}}</span>
+            </div>
+        </div>
+        <div class='menu_list_content' :style="{ display: showMenuList ? 'block' : 'none' }">
+            <div v-for="(item, index) in menuList" :key="item.path">
+              <div :key="item.name" class="cardLine" :style="{height: item.children.length > 3 ? '90px' : ''}">
+                <div class='leftMenu'
+                    :style="{
+                      height: item.children.length > 3 ? '96px' : '70px',
+                      lineHeight: item.children.length > 3 ? '45px' : '70px',
+                    }">
+                    <img :src="item.url" class="middle" />
+                    <span class="middle textPad" @click="toHomePage(index)">{{item.name}}</span>
+                </div>
+                <div class='rightMenu'
+                    :style="{
+                        height: item.children.length > 3 ? '96px' : '70px',
+                        lineHeight: item.children.length > 3 ? '45px' : '70px',
+                        borderBottom: index === menuList.length - 1 ? '0px' : '1px solid #E9E9E9',
+                    }">
+                    <span v-for="child in item.children" :key="child.url">
+                        <span :key="child.childName">
+                            <img :src="child.url" class="middle iconPad" />
+                            <span class='childMenu textPad middle' @click="toModulePage(child.childName)">{{child.childName}}</span>
+                        </span>
+                    </span>
+                </div>
+            </div>
+            </div>
+        </div>
+    </div >
+</template>
+
+<script>
+import { menuList as menuListInit, menuIconSrc, sysNameMap } from './constant.js'
+import './menu.css'
+export default {
+  name: 'ModuleMenu',
+  props: {
+    sysName: {
+      type: String,
+      default: 'admin'
+    },
+  },
+  data () {
+    return {
+      showMenuList: false,
+      menuIconSrc: menuIconSrc,
+      menuList: [],
+      sessionMenu: [],
+      menuListInit: menuListInit,
+      sysNameMap: sysNameMap
+    }
+  },
+  created () {
+    this.getSessionMenu();
+    this.getNewMenuList();
+  },
+  methods: {
+    getSessionMenu () {
+        const menuObj = JSON.parse(sessionStorage.getItem('bigdata-menu'));
+        if (menuObj) {
+            this.sessionMenu = [...menuObj.content]
+        }
+    },
+    // 获取系统logo及title
+    getLogoAndTitle () {
+        let sysInfo = this.sysNameMap.find(item  => item.sysName === this.sysName);
+        let logoAndTitle = { logoSrc: "", title: "" };
+        if (sysInfo) {
+            logoAndTitle.logoSrc = sysInfo.logoSrc;
+            logoAndTitle.title = sysInfo.title;
+        }
+        return logoAndTitle;
+    },
+    /**
+     * 判断第三方服务是否有对应服务的菜单权限
+     * @param {*} authMenus
+     * @param {*} rootMenuPath
+     */
+    judgeThirdPartyServiceIsHaveMenus (authMenus, rootMenuPath) {
+        let dsMenus = [];
+        if (
+            typeof authMenus !== "undefined" &&
+            authMenus !== null &&
+            authMenus.length > 0
+        ) {
+            const rootMenus = authMenus.filter((item) => {
+                const { parentId, type, path } = item;
+                if (parentId === -1 && type === "3" && path === rootMenuPath) {
+                    return true;
+                }
+                return false;
+            });
+            if (
+                rootMenus &&
+                Object.keys(rootMenus).length > 0 &&
+                rootMenus[0].children
+            ) {
+                dsMenus = rootMenus[0].children;
+            }
+        }
+        if (!dsMenus || dsMenus.length === 0) {
+            return false;
+        }
+        return true;
+    },
+    // 跳转各个模块
+    toModulePage (nameStr)  {
+        console.log('nameStr', nameStr)
+        let thirdPartyServiceJumpPath = ""; // 第三方服务跳转路径
+        switch (nameStr) {
+            case "数据集成":
+                thirdPartyServiceJumpPath = "/datacollect/";
+                break;
+            case "数据治理":
+                thirdPartyServiceJumpPath = "/datamanage/";
+                break;
+            case "元数据管理":
+                thirdPartyServiceJumpPath = "/metadata/";
+                break;
+            case "数据质量":
+                thirdPartyServiceJumpPath = "/quality/";
+                break;
+            case "离线开发":
+                thirdPartyServiceJumpPath = "/datadev/";
+                break;
+            case "实时开发":
+                thirdPartyServiceJumpPath = "/dataanalytic/";
+                break;
+            case "数据服务":
+                thirdPartyServiceJumpPath = "/dataservice/";
+                break;
+            case "数据资产":
+                thirdPartyServiceJumpPath = "/dataasset/";
+                break;
+            case "数据共享":
+                thirdPartyServiceJumpPath = "/datasharing/";
+                break;
+            case "运维中心":
+                thirdPartyServiceJumpPath = "/operate/";
+                break;
+            case "消息中心":
+                thirdPartyServiceJumpPath = "/alert/";
+                break;
+            default:
+                break;
+        }
+        window.location.href = thirdPartyServiceJumpPath
+    },
+    // 跳转首页
+    toHomePage (index)  {
+        if (index === 0) {
+            window.location.href = '/#/index'
+        }
+    },
+    getNewMenuList () {
+        let newMenuList = [...this.menuListInit];
+        if (this.sessionMenu) {
+            const pathList = this.sessionMenu.map(item  => item.path)
+            // 过滤掉没有权限的子菜单(PS：如果模块下面子菜单都没有，则不显示该模块)
+            for (let index = newMenuList.length - 1; index >= 0; index--) {
+                const menuItem = newMenuList[index]
+                for (let index_ch = menuItem.children.length - 1; index_ch >= 0; index_ch--) {
+                    const child = menuItem.children[index_ch]
+                    if (!pathList.includes(child.path)) {
+                        newMenuList[index].children.splice(index_ch, 1)
+                    }
+                }
+                if (menuItem.children.length === 0 && menuItem.name !== '首页') {
+                    newMenuList.splice(index, 1)
+                }
+            }
+        }
+        this.menuList = [...newMenuList];
+    },
+  }
+}
+</script>
+<style scoped>
+</style>

package/src/components/Menu/constant.js

@@ -0,0 +1,172 @@
+export const menuList = [{
+    name: '首页',
+    url: require('../../assets/home.svg'),
+    children: [],
+},
+{
+    name: '数据汇聚',
+    url: require('../../assets/ic_shujuhuiju_m.svg'),
+    children: [{
+        childName: '数据集成',
+        path: '/datacollection',
+        url:require('../../assets/datacollection_slogo.svg'),
+    }]
+},
+{
+    name: '数据治理',
+    url: require('../../assets/ic_shujuzhili_m.svg'),
+    children: [{
+        childName: '数据治理',
+        path: '/dataManager',
+        url:require('../../assets/datamanager_slogo.svg'),
+    },
+    {
+        childName: '元数据管理',
+        path: '/metadata',
+        url:require('../../assets/metadata_slogo.svg'),
+    },
+    {
+        childName: '数据质量',
+        path: '/quality/',
+        url:require('../../assets/quality_slogo.svg'),
+    }]
+},
+{
+    name: '数据开发',
+    url: require('../../assets/ic_shujukaifa_m.svg'),
+    children: [{
+        childName: '离线开发',
+        path: '/datadev/',
+        url:require('../../assets/datadev_slogo.svg'),
+    },
+    {
+        childName: '实时开发',
+        path: '/dataanalytic',
+        url:require('../../assets/dataanalytic_slogo.svg'),
+    }]
+},
+{
+    name: '数据开放',
+    url: require('../../assets/ic_shujukaifang_m.svg'),
+    children: [{
+        childName: '数据服务',
+        path: '/dataservice',
+        url:require('../../assets/dataservice_slogo.svg'),
+    },
+    {
+        childName: '数据资产',
+        path: '/dataasset',
+        url:require('../../assets/dataasset_slogo.svg'),
+    },
+    {
+        childName: '数据共享',
+        path: '/datasharing',
+        url:require('../../assets/datasharing_slogo.svg'),
+    }]
+},
+{
+    name: '数据应用',
+    url: require('../../assets/ic_shujuyingyong_m.svg'),
+    children: [{
+        childName: '数据标签',
+        path: '',
+        url:require('../../assets/datalabel_slogo.svg'),
+    }]
+},
+{
+    name: '公共模块',
+    url: require('../../assets/ic_gonggongmokuai_m.svg'),
+    children: [{
+        childName: '运维中心',
+        path: '/operate',
+        url:require('../../assets/operate_slogo.svg'),
+    },
+    {
+        childName: '系统管理',
+        path: '/',
+        url:require('../../assets/admin_slogo.svg'),
+    },
+    {
+        childName: '工单管理',
+        url:require('../../assets/workorder_slogo.svg'),
+    },
+    {
+        childName: '消息中心',
+        path: '/alert',
+        url:require('../../assets/alert_slogo.svg'),
+    }]
+}];
+export const menuIconSrc = require('../../assets/menuIcon.svg');
+export const sysNameMap = [
+    {
+        sysName: 'datacollection',
+        title: '数据集成',
+        logoSrc: require('../../assets/datacollection_logo.svg'),
+    },
+    {
+        sysName: 'dataManager',
+        title: '数据治理',
+        logoSrc: require('../../assets/dataManager_logo.svg'),
+    },
+    {
+        sysName: 'metadata',
+        title: '元数据管理',
+        logoSrc: require('../../assets/metadata_logo.svg'),
+    },
+    {
+        sysName: 'quality',
+        title: '数据质量',
+        logoSrc: require('../../assets/quality_logo.svg'),
+    },
+    {
+        sysName: 'datadev',
+        title: '离线开发',
+        logoSrc: require('../../assets/datadev_logo.svg'),
+    },
+    {
+        sysName: 'dataanalytic',
+        title: '实时开发',
+        logoSrc: require('../../assets/dataanalytic_logo.svg'),
+    },
+    {
+        sysName: 'dataservice',
+        title: '数据服务',
+        logoSrc: require('../../assets/dataservice_logo.svg'),
+    },
+    {
+        sysName: 'dataasset',
+        title: '数据资产',
+        logoSrc: require('../../assets/dataasset_logo.svg'),
+    },
+    {
+        sysName: 'datasharing',
+        title: '数据共享',
+        logoSrc: require('../../assets/datasharing_logo.svg'),
+    },
+    // {
+    //     sysName: 'dataManager',
+    //     title: '数据标签',
+    //     logoSrc: require('../../assets/datalabel_logo.svg'),
+    // },
+    {
+        sysName: 'operate',
+        title: '运维中心',
+        logoSrc: require('../../assets/operate_logo.svg'),
+    },
+    {
+        sysName: 'admin',
+        title: '系统管理',
+        logoSrc: require('../../assets/admin_logo.svg'),
+    },
+    // {
+    //     sysName: 'dataManager',
+    //     title: '工单管理',
+    //     logoSrc: require('../../assets/wordorder_logo.svg'),
+    // },
+    {
+        sysName: 'alert',
+        title: '消息中心',
+        logoSrc: require('../../assets/alert_logo.svg'),
+    },
+
+];

package/src/components/Menu/menu.css

@@ -0,0 +1,94 @@
+.menu_list_content {
+  border: 1px solid #e9e9e9;
+  z-index: 2;
+  float: left;
+  position: fixed;
+  top: 50px;
+  left: 0;
+  background-color: #fff;
+  box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px;
+  padding-left: 35px;
+  padding-bottom: 35px;
+}
+.cardLine {
+  padding: 5px 0px;
+}
+.textPad {
+  padding-left: 10px;
+  font-size: 14px;
+}
+.leftMenu {
+  width: 100px;
+  float: left;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 16px;
+  cursor: pointer;
+  text-align: left;
+  font-weight: 400;
+}
+.rightMenu {
+  width: 460px;
+  float: left;
+  vertical-align: middle;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.65);
+  font-weight: 400;
+  margin-left: 15px;
+}
+.childMenu:hover {
+  cursor: pointer;
+  color: #4091f7;
+}
+.childMenu {
+  width: 25%;
+  display: inline-block;
+  font-size: 13px;
+}
+.middle {
+  vertical-align: middle;
+}
+.middle:hover {
+  color: #4091f7;
+}
+.menuPopupAndTitle {
+  display: flex;
+  justify-content: flex-start;
+}
+.menuIcon {
+  text-align: center;
+  line-height: 49px;
+  display: inline-block;
+  cursor: pointer;
+  width: 60px;
+  height: 49px;
+  background-color: #4091f7;
+}
+.menuIcon_img {
+  height: 25px;
+  width: 25px;
+  vertical-align: middle;
+}
+.menu_title_content {
+  height: 32px;
+  margin: 0 0 0 12px;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 49px;
+  vertical-align: middle;
+  animation: pro-layout-title-hide 0.3s;
+}
+.menu_title_content_img {
+  height: 32px;
+  width: 32px;
+  vertical-align: middle;
+}
+.menu_title {
+  color: #1890ff;
+  height: 32px;
+  margin: 0 0 0 12px;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 32px;
+  vertical-align: middle;
+  animation: pro-layout-title-hide 0.3s;
+}

package/src/components/User/UserInfo.vue

@@ -0,0 +1,111 @@
+<template>
+    <div className="right">
+        <el-dropdown v-if="getUserName()" @command="handleClickmenu">
+            <span class="el-dropdown-link">
+                <img src="../../assets/userLogo.svg" style="vertical-align:middle;padding-right:10px"/>
+                <span style="color: rgba(0, 0, 0, 0.85);">{{getUserName()}}</span>
+                <i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="single">
+                    <img :src="PersonalCenterSrc" alt="" class="menuItem" />
+                    <span>个人中心</span>
+                </el-dropdown-item>
+                <el-dropdown-item command="message">
+                    <img :src="MessageCenterSrc" alt="" class="menuItem" />
+                    <span>消息中心</span>
+                </el-dropdown-item>
+                <el-dropdown-item v-show="sysName !== 'admin' && isHaveSystemManagementPermission" command="systerm">
+                    <img :src="SystemManageSrc" alt="" class="menuItem" />
+                    <span>系统管理</span>
+                </el-dropdown-item>
+                <el-dropdown-item command="logout">
+                    <img :src="LogoutSrc" alt="" class="menuItem" />
+                    <span>退出登录</span>
+                </el-dropdown-item>
+            </el-dropdown-menu>
+        </el-dropdown>
+        <v-loading v-else size="small" :style="{ marginLeft: '8px', marginRight: '8px', lineHeight: '57px', textAlign: 'center' }" />
+    </div>
+</template>
+
+<script >
+import Axios from '../Util/axios.js';
+import {userMenuIcon} from './constant.js'
+export default {
+    name: 'UserInfo',
+    data () {
+        return  {
+            isHaveSystemManagementPermission: sessionStorage.getItem('bigdata-isHaveSystemManagementPermission'),
+            PersonalCenterSrc: userMenuIcon.PersonalCenterSrc,
+            MessageCenterSrc: userMenuIcon.MessageCenterSrc,
+            SystemManageSrc: userMenuIcon.SystemManageSrc, 
+            LogoutSrc: userMenuIcon.LogoutSrc,
+        }
+    },
+    props: {
+    sysName: {
+            type: String,
+        },
+    },
+    methods: {
+        handleClickmenu (flag){
+            let url = ''
+            if (flag === 'single') {
+                url = '/#/info/index'
+            } else if (flag === 'message') {
+                url = '/#/alert'
+            } else if (flag === 'systerm') {
+                url = '/#/admin/user/index'
+            } else if (flag === 'logout') {
+                this.logout()
+            }
+            window.location.href = url;
+        },
+        getUserName ()  {
+            const userInfo = JSON.parse(sessionStorage.getItem('bigdata-userInfo')||"{}");
+            if (userInfo && userInfo.content && Object.keys(userInfo.content).length > 0 && userInfo.content.username) {
+                return userInfo.content.username;
+            }
+            return '';
+        },
+        // 退出登录
+        logout () {
+            Axios('delete','/auth/token/logout', '', {}).then(() => {
+                console.log('退出登录接口调用成功')
+                localStorage.clear();
+                sessionStorage.clear();
+                window.location.href = "/#/login";
+            }).catch((error) => {
+                console.error('Error while logging out, error:', error);
+                this.$message.error('服务器错误，请稍后重试');
+            });
+        }
+    }
+}
+</script>
+
+<style scoped>
+.menuItem {
+    margin-right: 10px;
+    margin-top: -3px;
+}
+.el-dropdown-menu{
+    width: 135px;
+    height: auto;
+    padding: 3px 0;
+}
+.el-dropdown-menu__item, .el-menu-item {
+    font-size: 13px;
+}
+.el-dropdown-menu__item img {
+    width: 13px;
+}
+.el-dropdown-link{
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.85);
+}
+.el-popper{
+    margin-top: -2px;
+}
+</style>

package/src/components/User/constant.js

@@ -0,0 +1,11 @@
+// 图标位置
+export const userMenuIcon = {
+    PersonalCenterSrc:require('../../assets/personalCenter.svg'),
+    MessageCenterSrc:require('../../assets/messageCenter.svg'),
+    SystemManageSrc:require('../../assets/systemManage.svg'),
+    LogoutSrc:require('../../assets/logout.png'),
+}
+export const PersonalCenterSrc = require('../../assets/personalCenter.svg');
+export const MessageCenterSrc = require('../../assets/messageCenter.svg');
+export const SystemManageSrc = require('../../assets/systemManage.svg');
+export const LogoutSrc = require('../../assets/logout.png');

package/src/components/Util/axios.js

@@ -0,0 +1,100 @@
+import axios from 'axios';
+import baseCof from './config';
+import getStore from './userInfo';
+import { checkToken} from './permessionUtils';
+
+let tokenValue='6c34dfbb-030f-4de1-ac4c-0e215f1fb098';
+
+axios.interceptors.response.use(
+  (response) => {
+    if (response.status === 200) {
+      return response;
+    } else if (response.status === 401 || response.status === 302 || response.status === 403) {
+      if (process.env.NODE_ENV === 'production') {
+        tokenValue = getStore({ name: 'access_token' });
+      }
+      checkToken(tokenValue);
+    } else {
+      console.log('接口异常 response');
+      return Promise.reject('error');
+    }
+  },
+  (error) => {
+    console.log('error', error)
+    if (error.response) {
+      if (error.response.status === 401) {
+        if (process.env.NODE_ENV === 'production') {
+          tokenValue = getStore({ name: 'access_token' });
+        }
+        checkToken(tokenValue);
+      } else if (error.response.status === 403) {
+        // 提示无权限等
+      } else {
+        // 其他错误处理
+      }
+    }
+    return Promise.reject(error.response.data);
+  },
+);
+
+/** 全局请求拦截器 */
+axios.interceptors.request.use(
+  async (params) => {
+    // 生产环境，对接门户时，需要在请求头中设置token等信息
+    if (process.env.NODE_ENV === 'production') {
+      const TENANT_ID = getStore({ name: 'tenantId' }) || '1';
+      const isToken = (params.headers || {}).isToken === false;
+      const token = getStore({ name: 'access_token' });
+      if (!(token && !isToken) || !TENANT_ID) {
+        // 如果是调用退出登录接口，则不再执行退出登录逻辑，防止出现重复调用退出登录的循环
+        return params;
+      }
+      params.headers.common['Authorization'] = `Bearer ${token}`;
+      params.headers.common['TENANT-ID'] = TENANT_ID;
+      return params;
+    }
+    params.headers.common['Authorization'] = `Bearer ${tokenValue}`;
+    params.headers.common['TENANT-ID'] = '1';
+    return params;
+  },
+  function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error);
+  },
+);
+
+function Axios(method, api, params, map) {
+  // 几个外部特殊接口
+  // 退出登录
+  let httpDefult = {
+    method: method,
+    params: params,
+    ...map,
+  }
+  if(api === '/auth/token/logout'){
+      httpDefult.url = `${baseCof.baseSever}${api}`;
+  } else if (api === '/admin/social/logoutUri') {
+      httpDefult.url = api
+  } else if(api.search("check_token") !== -1){
+      httpDefult.url = `${baseCof.baseSever}${api}`
+  } else if (method === 'get') {
+      httpDefult.url = `${baseCof.baseSever}${baseCof.basePath}${api}`
+  } else if (method === 'post') {
+      httpDefult.url = `${baseCof.baseSever}${baseCof.basePath}${api}`
+  } else {
+      httpDefult.url = `${baseCof.baseSever}${baseCof.basePath}${api}`
+  }
+  console.log('httpDefult', httpDefult)
+
+  return new Promise((resolve, reject) => {
+    axios(httpDefult)
+      .then((res) => {
+        resolve(res);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+}
+
+export default Axios;

package/src/components/Util/config.js

@@ -0,0 +1,10 @@
+const address = window.location.hostname
+const port = window.location.port
+const baseCof = process.env.NODE_ENV === 'production' ?{
+  baseSever: `https://${address}:${port}`,
+  basePath: `/app/cmcc/data`,
+}:{
+    baseSever: 'http://localhost:8000',
+    basePath: '/cmcc/data',
+};                                                                                                                                                     
+export default baseCof;