系统管理

08335 / hivui-platform-template

hivui平台项目模板

Browse code 系统管理 master
1 parent ce01ba4 commit a4d2d14070d4f45f56b45b40a2997c9ff527e575 20278 authored on 3 Sep 2021

Showing 3 changed files

Ignore Space Show notes View project/hivuiMain/index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>EAP5-Admin-Main</title> <% if(htmlWebpackPlugin.vite){%> <!--预览时公共库--> <link rel="stylesheet" href="/assets_platform/element-ui/index.css"> <script src="/assets_platform/vue/vue.min.js"></script> <script src="/assets_platform/element-ui/index.js"></script> <script src="/assets_platform/eap/eap.umd.min.js"></script> <%}%> <% if(!htmlWebpackPlugin.vite){%> <link rel="stylesheet" href="/freemark/render/assets_platform/element-ui/index.css"> <script src="/freemark/render/assets_platform/vue/vue.min.js"></script> <script src="/freemark/render/assets_platform/element-ui/index.js"></script> <!--发布时公共库--> <script src="/freemark/render/assets_platform/vendor_dll/vuelibs.dll.js"></script> <script src="/freemark/render/assets_platform/vendor_dll/vendor.dll.js"></script> <script src="/freemark/render/assets_platform/eap/eap.umd.min.js"></script> <%}%> <!-- <script src="/项目名/setting/desktop/appsetting/js/1.0.0/appsetting.js" type="text/javascript"></script> --> </head> <body> <div id="app"> <div style="padding:50px 0;text-align:center;"> <div> <img src="./assets/logo_max.png"/> </div> <div>系统正在预览初始化中...<a href="javascript:location.reload();">【点我刷新】</a></div> </div> </div> <script> function changeLayout(name) { window.localStorage.setItem('layout', name) window.location.reload(); } var Scp = { User: { id: "admin", name: "管理员", deptId: "", deptName: "", positionId: "GLY", postionName: "管理员", bzId: "admin_3", bzName: "管理员岗位3", bzDeptId: ".WLDJT.DGS", bzDeptName: "D公司", bzPositionId: "HQRY", bzPositionName: "后勤人员", orgId: "admin_3", defOrgId: "admin_3" } } var __guid = new Date().valueOf(); var __sysConfig = { events: { onLoad1: function () { } }, projectName: "eaptpl", sysProjectMange: { id: __guid++, name: '工程树', iconClass: 'icon-tree', uri: 'amreport/designer/tree/design.do', url: '/amrept-web/amreport/designer/tree/design.do' }, sysLoadLogo: { src: '', title: '中海创科技' }, sysLogo: { src: '', title: '中海创科技' }, //默认门户对应自定义门户功能 sysSetTabs: [ { title: '首页', id: __guid++, close: false, type: 'home', actived: true //默认选中 } // ,{ // title:'工作台', // id: __guid++, // close:false, // type:'work' // } ], //默认打开功能 sysDefTabs: [ // { // id: __guid++, // title:"设计", // url:'http://192.168.7.109:9090/#/design', // close:true, // }, // { // id: __guid++, // title:"百度功能测试", // url:'http://www.baidu.com', // close:true // }, // { // id: __guid++, // title:"bing", // url:'https://cn.bing.com/', // close:true // } ], sysList: [ ], sysFuncMenus: [ { id: __guid++, name: '系统管理', url: window.HIVUI_SETTING.sysManageUrl+"/?pn="+window.HIVUI_SETTING.projectName, iconClass: 'icon-set-fill', target: '_blank', type:'widthToken', }, { id: __guid++, name: '<font color=red>邮件系统</font>', url: 'http://hcmail.histron.cn:8001/webmail/index.do?osName=windows', iconClass: 'icon-mail', target: '_blank', }, { type: 'split' }, { id: __guid++, name: '布局', type: 'layout', iconClass: 'icon-user', children: [ { id: 'vertical', name: '上下布局', handler: function () { changeLayout(this.id) } }, { id: 'level', name: '左右布局', handler: function () { changeLayout(this.id) } } ] }, { type: 'split' }, { id: __guid++, name: '用户信息', type: 'userInfo', iconClass: 'icon-user', children: [ { id: __guid++, name: '部门：AF10', iconClass: 'icon-user', actived: true }, { id: __guid++, html: '<font color=red>访问下属111</font>', name: '<font color=red>访问下属</font>', iconClass: 'icon-user', children: [ { name: "张三", id: __guid++ }, { name: "李四", id: __guid++ }, ] }, { id: __guid++, name: '修改密码', iconClass: '', handler: function () { alert('访问下属'); } } ] }, { type: 'split' } ], } </script> <% if(htmlWebpackPlugin.vite==true){%> <script type="module" src="./index.js"></script> <%}%> <!-- built files will be auto injected --> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>EAP5-Admin-Main</title> <% if(htmlWebpackPlugin.vite){%> <!--预览时公共库--> <link rel="stylesheet" href="/assets_platform/element-ui/index.css"> <script src="/assets_platform/vue/vue.min.js"></script> <script src="/assets_platform/element-ui/index.js"></script> <script src="/assets_platform/eap/eap.umd.min.js"></script> <%}%> <% if(!htmlWebpackPlugin.vite){%> <link rel="stylesheet" href="/freemark/render/assets_platform/element-ui/index.css"> <script src="/freemark/render/assets_platform/vue/vue.min.js"></script> <script src="/freemark/render/assets_platform/element-ui/index.js"></script> <!--发布时公共库--> <script src="/freemark/render/assets_platform/vendor_dll/vuelibs.dll.js"></script> <script src="/freemark/render/assets_platform/vendor_dll/vendor.dll.js"></script> <script src="/freemark/render/assets_platform/eap/eap.umd.min.js"></script> <%}%> <!-- <script src="/项目名/setting/desktop/appsetting/js/1.0.0/appsetting.js" type="text/javascript"></script> --> </head> <body> <div id="app"> <div style="padding:50px 0;text-align:center;"> <div> <img src="./assets/logo_max.png"/> </div> <div>系统正在预览初始化中...<a href="javascript:location.reload();">【点我刷新】</a></div> </div> </div> <script> function changeLayout(name) { window.localStorage.setItem('layout', name) window.location.reload(); } var Scp = { User: { id: "admin", name: "管理员", deptId: "", deptName: "", positionId: "GLY", postionName: "管理员", bzId: "admin_3", bzName: "管理员岗位3", bzDeptId: ".WLDJT.DGS", bzDeptName: "D公司", bzPositionId: "HQRY", bzPositionName: "后勤人员", orgId: "admin_3", defOrgId: "admin_3" } } var __guid = new Date().valueOf(); var __sysConfig = { events: { onLoad1: function () { } }, projectName: "eaptpl", sysProjectMange: { id: __guid++, name: '工程树', iconClass: 'icon-tree', uri: 'amreport/designer/tree/design.do', url: '/amrept-web/amreport/designer/tree/design.do' }, sysLoadLogo: { src: '', title: '中海创科技' }, sysLogo: { src: '', title: '中海创科技' }, //默认门户对应自定义门户功能 sysSetTabs: [ { title: '首页', id: __guid++, close: false, type: 'home', actived: true //默认选中 } // ,{ // title:'工作台', // id: __guid++, // close:false, // type:'work' // } ], //默认打开功能 sysDefTabs: [ // { // id: __guid++, // title:"设计", // url:'http://192.168.7.109:9090/#/design', // close:true, // }, // { // id: __guid++, // title:"百度功能测试", // url:'http://www.baidu.com', // close:true // }, // { // id: __guid++, // title:"bing", // url:'https://cn.bing.com/', // close:true // } ], sysList: [ ], sysFuncMenus: [ { id: __guid++, name: '<font color=red>邮件系统</font>', url: 'http://hcmail.histron.cn:8001/webmail/index.do?osName=windows', iconClass: 'icon-mail', target: '_blank', }, { type: 'split' }, { id: __guid++, name: '布局', type: 'layout', iconClass: 'icon-user', children: [ { id: 'vertical', name: '上下布局', handler: function () { changeLayout(this.id) } }, { id: 'level', name: '左右布局', handler: function () { changeLayout(this.id) } } ] }, { type: 'split' }, { id: __guid++, name: '用户信息', type: 'userInfo', iconClass: 'icon-user', children: [ { id: __guid++, name: '部门：AF10', iconClass: 'icon-user', actived: true }, { id: __guid++, html: '<font color=red>访问下属111</font>', name: '<font color=red>访问下属</font>', iconClass: 'icon-user', children: [ { name: "张三", id: __guid++ }, { name: "李四", id: __guid++ }, ] }, { id: __guid++, name: '修改密码', iconClass: '', handler: function () { alert('访问下属'); } } ] }, { type: 'split' } ], } </script> <% if(htmlWebpackPlugin.vite==true){%> <script type="module" src="./index.js"></script> <%}%> <!-- built files will be auto injected --> </body> </html>

Ignore Space Show notes View

project/hivuiMain/index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>EAP5-Admin-Main</title>
  
  <% if(htmlWebpackPlugin.vite){%>
    
    <link rel="stylesheet" href="/assets_platform/element-ui/index.css">
    <script src="/assets_platform/vue/vue.min.js"></script>
    <script src="/assets_platform/element-ui/index.js"></script>
    <script src="/assets_platform/eap/eap.umd.min.js"></script>
  <%}%>
  <% if(!htmlWebpackPlugin.vite){%>
    <link rel="stylesheet" href="/freemark/render/assets_platform/element-ui/index.css">
    <script src="/freemark/render/assets_platform/vue/vue.min.js"></script>
    <script src="/freemark/render/assets_platform/element-ui/index.js"></script>
    
    <script src="/freemark/render/assets_platform/vendor_dll/vuelibs.dll.js"></script>
    <script src="/freemark/render/assets_platform/vendor_dll/vendor.dll.js"></script>
    <script src="/freemark/render/assets_platform/eap/eap.umd.min.js"></script>
  <%}%>
  
</head>

<body>
  <div id="app">  	
    <div style="padding:50px 0;text-align:center;">
      <div>
        <img src="./assets/logo_max.png"/>
      </div>
      <div>系统正在预览初始化中...<a href="javascript:location.reload();">【点我刷新】</a></div>
      
    </div>
  </div>
  <script>
    function changeLayout(name) {
      window.localStorage.setItem('layout', name)
      window.location.reload();
    }
    var Scp = {
      User: {
        id: "admin",
        name: "管理员",
        deptId: "",
        deptName: "",
        positionId: "GLY",
        postionName: "管理员",
        bzId: "admin_3",
        bzName: "管理员岗位3",
        bzDeptId: ".WLDJT.DGS",
        bzDeptName: "D公司",
        bzPositionId: "HQRY",
        bzPositionName: "后勤人员",
        orgId: "admin_3",
        defOrgId: "admin_3"
      }
    }
    var __guid = new Date().valueOf();
    var __sysConfig = {
      events: {
        onLoad1: function () {

}
      },
      projectName: "eaptpl",
      sysProjectMange: {
        id: __guid++,
        name: '工程树',
        iconClass: 'icon-tree',
        uri: 'amreport/designer/tree/design.do',
        url: '/amrept-web/amreport/designer/tree/design.do'
      },
      sysLoadLogo: {
        src: '',
        title: '中海创科技'
      },
      sysLogo: {
        src: '',
        title: '中海创科技'
      },
      //默认门户   对应自定义门户功能
      sysSetTabs: [
        {
          title: '首页',
          id: __guid++,
          close: false,
          type: 'home',
          actived: true //默认选中
        }
        // ,{
        //     title:'工作台',
        //     id: __guid++,
        //     close:false,
        //     type:'work'
        // }
      ],
      //默认 打开功能
      sysDefTabs: [
        // {
        //   id: __guid++,
        //   title:"设计",
        //   url:'http://192.168.7.109:9090/#/design',
        //   close:true,
        // },
        // {
        //   id: __guid++,
        //   title:"百度功能测试",
        //   url:'http://www.baidu.com',
        //   close:true
        // },
        // {
        //   id: __guid++,
        //   title:"bing",
        //   url:'https://cn.bing.com/',
        //   close:true
        // }
      ],
      sysList: [

],
      sysFuncMenus: [
        {
          id: __guid++,
          name: '系统管理',
          url: window.HIVUI_SETTING.sysManageUrl+"/?pn="+window.HIVUI_SETTING.projectName,
          iconClass: 'icon-set-fill',
          target: '_blank',
          type:'widthToken',
        },
        {
          id: __guid++,
          name: '<font color=red>邮件系统</font>',
          url: 'http://hcmail.histron.cn:8001/webmail/index.do?osName=windows',
          iconClass: 'icon-mail',
          target: '_blank',
        },
        { type: 'split' },
        {
          id: __guid++,
          name: '布局',
          type: 'layout',
          iconClass: 'icon-user',
          children: [
            {
              id: 'vertical',
              name: '上下布局',
              handler: function () {
                changeLayout(this.id)
              }
            },
            {
              id: 'level',
              name: '左右布局',
              handler: function () {
                changeLayout(this.id)
              }
            }
          ]
        },
        { type: 'split' },
        {
          id: __guid++,
          name: '用户信息',
          type: 'userInfo',
          iconClass: 'icon-user',
          children: [
            {
              id: __guid++,
              name: '部门：AF10',
              iconClass: 'icon-user',
              actived: true
            },
            {
              id: __guid++,
              html: '<font color=red>访问下属111</font>',
              name: '<font color=red>访问下属</font>',
              iconClass: 'icon-user',
              children: [
                { name: "张三", id: __guid++ },
                { name: "李四", id: __guid++ },
              ]
            },
            {
              id: __guid++,
              name: '修改密码', iconClass: '',
              handler: function () {
                alert('访问下属');
              }
            }
          ]
        },
        { type: 'split' }
      ],
    }
  </script>
  <% if(htmlWebpackPlugin.vite==true){%>
    <script type="module" src="./index.js"></script>
  <%}%>
  
</body>

</html>

<!DOCTYPE html>
<html>

],
      sysFuncMenus: [
        {
          id: __guid++,
          name: '<font color=red>邮件系统</font>',
          url: 'http://hcmail.histron.cn:8001/webmail/index.do?osName=windows',
          iconClass: 'icon-mail',
          target: '_blank',
        },
        { type: 'split' },
        {
          id: __guid++,
          name: '布局',
          type: 'layout',
          iconClass: 'icon-user',
          children: [
            {
              id: 'vertical',
              name: '上下布局',
              handler: function () {
                changeLayout(this.id)
              }
            },
            {
              id: 'level',
              name: '左右布局',
              handler: function () {
                changeLayout(this.id)
              }
            }
          ]
        },
        { type: 'split' },
        {
          id: __guid++,
          name: '用户信息',
          type: 'userInfo',
          iconClass: 'icon-user',
          children: [
            {
              id: __guid++,
              name: '部门：AF10',
              iconClass: 'icon-user',
              actived: true
            },
            {
              id: __guid++,
              html: '<font color=red>访问下属111</font>',
              name: '<font color=red>访问下属</font>',
              iconClass: 'icon-user',
              children: [
                { name: "张三", id: __guid++ },
                { name: "李四", id: __guid++ },
              ]
            },
            {
              id: __guid++,
              name: '修改密码', iconClass: '',
              handler: function () {
                alert('访问下属');
              }
            }
          ]
        },
        { type: 'split' }
      ],
    }
  </script>
  <% if(htmlWebpackPlugin.vite==true){%>
    <script type="module" src="./index.js"></script>
  <%}%>
  
</body>

</html>

Ignore Space Show notes View project/hivuiMain/views/layout/components/Header.vue
<template> <div class="pl-header"> <ul class="ltArea"> <li v-if="layout=='level'" class="logoStyle"> <div class="pl-logo" :style="{width: sideWidth}"> <div v-if="hasTitle" @click="hideTitle(false)"> <img src="@main/assets/logo.png" :width="sideWidth" v-if="logoSrc==''"> <img :src="logoSrc" :width="sideWidth" v-if="logoSrc!=''"> </div> <div v-else @click="hideTitle(true)"> <img src="@main/assets/logo_min.png" v-if="MlogoSrc==''"> <img :src="MlogoSrc" :width="sideWidth" v-if="MlogoSrc!=''"> </div> </div> </li> <li v-else> <div :style="{width: sideWidth}" class="pl-logo" > <img src="@main/assets/logo.png" :width="sideWidth" v-if="logoSrc==''"> <img :src="logoSrc" :width="sideWidth" v-if="logoSrc!=''"> </div> </li> <li v-if="sysList.length"> <div class="sysTrigger" ref='dom-sysList' @mouseover="handleShowSysList" @mouseout="handleHideSysList"> <span>{{$lang("projectManage")\|\|"项目管理"}}</span> <i class="iconfont icon-change"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowSysList" @mouseleave="handleHideSysList" :style="sysListStyle" v-add2Body> <li class="pl-menus-item" v-for="item,index in sysList" @click="handleChangeSys(item)"> <a class="title"><span class="txt">{{item.title}}111</span></a> </li> </ul> </li> <li v-if="layout == 'level'" > <div class="sysTrigger" ref="dom-latelyUse" :title='$lang("recentlyUsed")\|\|"最近使用"' @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse"> <i class="icon iconfont icon-time"></i> <span class="title">{{$lang("recentlyUsed")\|\|"最近使用"}}</span> <i class="icon iconfont icon-arrow-down"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse" :style="latelyUseStyle" v-add2Body> <li class="pl-menus-item" v-for="item,index in navsLatelyUse" @click="handleOpenLatelyFunc(item)"> <a class="title"><span class="txt">{{item.NAME}}</span></a> </li> <li v-show="navsLatelyUse.length==0" class="pl-menus-tips"> {{$lang("noData")\|\|"暂无数据"}} </li> </ul> </li> <li v-if="layout == 'level'" > <div class="sysTrigger"> <span>{{$lang("allFunction")\|\|"全部功能"}}</span> <i class="iconfont icon-arrow-down"></i> </div> </li> </ul> <ul class="rtArea"> <li> <div class="pl-search" ref="dom-searchBox" > <input ref="dom-seachTxt" class="pl-search-text" type="text" :placeholder="$lang('searchKey')\|\|'搜索关键字'" v-model.trim="searchWord" @keyup="handleSeachKeyUp" /> <i class="iconfont icon-search"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" :style="searchMenusStyle" v-add2Body> <li :class="['pl-menus-item',seldIndex==index?'pl-menus-itemSeld':'']" v-for="item,index in searchList" style="width:100%" @click="openFunc(item)"> <a class="title"><span class="txt" v-html="item.html\|\|item.name"></span></a> </li> <li v-show="searchList.length==0&&searchWord.length>0" class="pl-menus-tips"> {{$lang("noData")\|\|"暂无数据"}} </li> </ul> </li> <li v-if="sysProjectManage"> <a :href="sysProjectManage.url" target='_blank' class="item" :title="sysProjectManage.name"> <i class="iconfont" :class="sysProjectManage.iconClass"></i> <span class="title">{{sysProjectManage.name}}</span> </a> </li> <template v-for="item in sysFuncMenus"> <li v-if="item.type!='split'"> <template v-if="item.children&&item.children.length"> <div class="item" @mouseenter="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html\|\|item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> <template v-if="!item.children\|\|item.children&&item.children.length==0"> <div class="item" @click.prevent="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html\|\|item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> </li> <li v-if="item.type=='split'"><div class="line"></div></li> </template> <!-- <li> <div class="item"> <div class="tip"> <i class="iconfont icon-user"></i> </div> <span class="title">{{this.$store.getters.userId}}/{{this.$store.getters.userName}}</span> <i class="iconfont icon-arrow-down"></i> </div> </li> <li><div class="line"></div></li> --> <li v-if="hasSetting"> <div class="item" :title="$lang('customWorkbench')\|\|'自定义工作台'"> <a href="#design" target='_blank'><i class="iconfont icon-set-fill"></i></a> </div> </li> <li> <div class="item" :title="$lang('logout')\|\|'退出系统'"> <a @click="handleLogout"><i class="iconfont icon-tuichu"></i></a> </div> </li> </ul> <vueContextMenu ref="cmp-funcMenu" :menu-items="menuItems" field="name"></vueContextMenu> </div> </template> <script> // import pinyin from 'js-pinyin';//ie 下有问题编译不过 import vueContextMenu from "@main/components/contextMenu"; export default { components:{vueContextMenu}, inject:['addTab','showTab','hideTab'], props:{ hasTitle:{ type: Boolean, }, sideWidth:{ type: String, } }, data(){ return { menuItems:[], searchWord:"", searchList:[], seldIndex:0, menuShow:false, searchMenusStyle:{ display:'none', left:0, top:0, width:0, // maxHeight:'50%', // overflow:'auto' }, sysListStyle:{ display:'none', left:0, top:0, }, latelyUseStyle:{ display:'none', left:0, top:0, maxHeight:'50%', overflow:'auto' } } }, computed:{ hasSetting(){ let cfg = this.$store.state.app.config\|\|{}; return cfg.sysSetTabs&&cfg.sysSetTabs.length; }, sysList(){ let cfg = this.$store.state.app.config\|\|{}; return cfg.sysList\|\|[]; }, sysProjectManage(){ let cfg = this.$store.state.app.config\|\|{}; let item = cfg.sysProjectMange\|\|{},flag=false; this.$store.state.app.powerList.forEach(p=>{ if(p.resUrl.indexOf(item.uri)>-1){ flag = true; return true; } }); if(flag){ return cfg.sysProjectMange; }else{ return null; } }, sysFuncMenus(){ let cfg = this.$store.state.app.config\|\|{}; let menus = cfg.sysFuncMenus\|\|[]; return menus; }, logoSrc(){ let cfg = this.$store.state.app.config\|\|{}; return (cfg.sysLogo&&cfg.sysLogo.src)\|\|''; }, MlogoSrc(){ let cfg = this.$store.state.app.config\|\|{}; return (cfg.MsysLogo&&cfg.MsysLogo.src)\|\|''; }, layout(){ return window.localStorage.getItem('layout'); }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; }, token(){ return this.$store.getters.token; } }, watch:{ searchWord(newVal,oldVal){ this.doSearch(newVal); } }, mounted(){ document.addEventListener('click',this.hideSeachResult) }, beforeDestroy(){ document.removeEventListener('click',this.hideSeachResult) }, methods:{ openDesign(){ this.$refs['cmp-dd'].show(); }, doSearch(cnKey){ if(cnKey==""){ this.hideSeachResult(); return; } this.showSeachResult(); let list = [], records = this.$store.getters.menusList; // let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase(); console.log('records', records) let py = Scp.String.getPinyin(cnKey).toLocaleLowerCase(); let re = new RegExp("^[a-zA-Z]+$"); for(let i=0,l=records.length;i<l;i++){ let item = records[i]; if(list.length>10){ break; } if(re.test(cnKey)){ // let y = pinyin.getCamelChars(item.name).toLocaleLowerCase(); let y = Scp.String.getPinyin(item.name).toLocaleLowerCase(); if(y.indexOf(py)>-1 && item.type!='dir'){ list.push(item); } }else{ if(item.name.indexOf(cnKey)>-1 && item.type!='dir' ){ list.push(item); continue; } } } this.$set(this,'searchList',list); }, openFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId) this.addTab(item);//inject 提供的方法只能传一个参数 }, handleSearchBoxClick(){ this.doSearch(this.searchWord); this.$refs['dom-seachTxt'].focus(); }, handleSeachKeyUp(evt){ if(evt.keyCode==40){//ArrowDown if(this.seldIndex<this.searchList.length-1){ this.seldIndex++; }else{ this.seldIndex=0; } } if(evt.keyCode==38){//ArrowUp if(this.seldIndex==0){ this.seldIndex=this.searchList.length-1; }else{ this.seldIndex--; } } if(evt.keyCode==13){//enter let item = this.searchList[this.seldIndex]; if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId); this.addTab(item);//inject 提供的方法只能传一个参数 this.searchWord = ""; this.seldIndex = 0; this.hideSeachResult(); } }, showSeachResult(){ this.searchMenusStyle.display ='block'; let s = this.$refs["dom-searchBox"]; let rect = s.getBoundingClientRect(); this.searchMenusStyle.left = rect.left+'px'; this.searchMenusStyle.top = rect.top + rect.height + 5 +'px'; this.searchMenusStyle.width = rect.width+'px'; }, hideSeachResult(){ this.searchMenusStyle.display ='none'; }, handleChangeSys(item){ if(!item.url)return; if(item.target=="_blank"){ window.open(item.url) }else{ window.location.href=item.url; } }, handleShowSysList(){ this.sysListStyle.display ='block'; let s = this.$refs["dom-sysList"]; let rect = s.getBoundingClientRect(); this.sysListStyle.left = rect.left+'px'; this.sysListStyle.top = rect.top + rect.height +'px'; }, handleHideSysList(){ this.sysListStyle.display ='none'; }, handleFuncMenus(item,$event){ $event.stopPropagation(); if(item.type== "link"){ window.open(item.resUrl,item.name); return; } debugger;if(item.type== "widthToken"){ item.url+="&access_token="+this.token; } if(item.url){ item.target=='tab'? this.addTab(item.url,item.name,item.id) : window.open(item.url); return }else{ item.handler&&item.handler(); } if(item.children&&item.children.length){ this.menuItems = item.children; this.$refs['cmp-funcMenu'].open($event) } }, handleLogout(){ window.location.href = window.location.origin + '/amrept-web/loginOut.do'; }, handleShowLatelyUse(){ this.$store.dispatch('app/getLatelyUse')//最近使用 let s = this.$refs["dom-latelyUse"]; let rect = s.getBoundingClientRect(); this.latelyUseStyle.display ='block'; this.latelyUseStyle.left = rect.left+'px'; this.latelyUseStyle.top = rect.top + rect.height +'px'; }, handleHideLatelyUse(){ this.latelyUseStyle.display ='none'; }, handleOpenLatelyFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab({ resUrl:item.FURI, name:item.NAME });//inject 提供的方法只能传一个参数 }, hideTitle(name){ this.$emit('hideTitle', name); } } } </script> <template> <div class="pl-header"> <ul class="ltArea"> <li v-if="layout=='level'" class="logoStyle"> <div class="pl-logo" :style="{width: sideWidth}"> <div v-if="hasTitle" @click="hideTitle(false)"> <img src="@main/assets/logo.png" :width="sideWidth" v-if="logoSrc==''"> <img :src="logoSrc" :width="sideWidth" v-if="logoSrc!=''"> </div> <div v-else @click="hideTitle(true)"> <img src="@main/assets/logo_min.png" v-if="MlogoSrc==''"> <img :src="MlogoSrc" :width="sideWidth" v-if="MlogoSrc!=''"> </div> </div> </li> <li v-else> <div :style="{width: sideWidth}" class="pl-logo" > <img src="@main/assets/logo.png" :width="sideWidth" v-if="logoSrc==''"> <img :src="logoSrc" :width="sideWidth" v-if="logoSrc!=''"> </div> </li> <li v-if="sysList.length"> <div class="sysTrigger" ref='dom-sysList' @mouseover="handleShowSysList" @mouseout="handleHideSysList"> <span>{{$lang("projectManage")\|\|"项目管理"}}</span> <i class="iconfont icon-change"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowSysList" @mouseleave="handleHideSysList" :style="sysListStyle" v-add2Body> <li class="pl-menus-item" v-for="item,index in sysList" @click="handleChangeSys(item)"> <a class="title"><span class="txt">{{item.title}}111</span></a> </li> </ul> </li> <li v-if="layout == 'level'" > <div class="sysTrigger" ref="dom-latelyUse" :title='$lang("recentlyUsed")\|\|"最近使用"' @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse"> <i class="icon iconfont icon-time"></i> <span class="title">{{$lang("recentlyUsed")\|\|"最近使用"}}</span> <i class="icon iconfont icon-arrow-down"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse" :style="latelyUseStyle" v-add2Body> <li class="pl-menus-item" v-for="item,index in navsLatelyUse" @click="handleOpenLatelyFunc(item)"> <a class="title"><span class="txt">{{item.NAME}}</span></a> </li> <li v-show="navsLatelyUse.length==0" class="pl-menus-tips"> {{$lang("noData")\|\|"暂无数据"}} </li> </ul> </li> <li v-if="layout == 'level'" > <div class="sysTrigger"> <span>{{$lang("allFunction")\|\|"全部功能"}}</span> <i class="iconfont icon-arrow-down"></i> </div> </li> </ul> <ul class="rtArea"> <li> <div class="pl-search" ref="dom-searchBox" > <input ref="dom-seachTxt" class="pl-search-text" type="text" :placeholder="$lang('searchKey')\|\|'搜索关键字'" v-model.trim="searchWord" @keyup="handleSeachKeyUp" /> <i class="iconfont icon-search"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" :style="searchMenusStyle" v-add2Body> <li :class="['pl-menus-item',seldIndex==index?'pl-menus-itemSeld':'']" v-for="item,index in searchList" style="width:100%" @click="openFunc(item)"> <a class="title"><span class="txt" v-html="item.html\|\|item.name"></span></a> </li> <li v-show="searchList.length==0&&searchWord.length>0" class="pl-menus-tips"> {{$lang("noData")\|\|"暂无数据"}} </li> </ul> </li> <li v-if="sysProjectManage"> <a :href="sysProjectManage.url" target='_blank' class="item" :title="sysProjectManage.name"> <i class="iconfont" :class="sysProjectManage.iconClass"></i> <span class="title">{{sysProjectManage.name}}</span> </a> </li> <template v-for="item in sysFuncMenus"> <li v-if="item.type!='split'"> <template v-if="item.children&&item.children.length"> <div class="item" @mouseenter="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html\|\|item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> <template v-if="!item.children\|\|item.children&&item.children.length==0"> <div class="item" @click.prevent="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html\|\|item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> </li> <li v-if="item.type=='split'"><div class="line"></div></li> </template> <!-- <li> <div class="item"> <div class="tip"> <i class="iconfont icon-user"></i> </div> <span class="title">{{this.$store.getters.userId}}/{{this.$store.getters.userName}}</span> <i class="iconfont icon-arrow-down"></i> </div> </li> <li><div class="line"></div></li> --> <li v-if="hasSetting"> <div class="item" :title="$lang('customWorkbench')\|\|'自定义工作台'"> <a href="#design" target='_blank'><i class="iconfont icon-set-fill"></i></a> </div> </li> <li> <div class="item" :title="$lang('logout')\|\|'退出系统'"> <a @click="handleLogout"><i class="iconfont icon-tuichu"></i></a> </div> </li> </ul> <vueContextMenu ref="cmp-funcMenu" :menu-items="menuItems" field="name"></vueContextMenu> </div> </template> <script> // import pinyin from 'js-pinyin';//ie 下有问题编译不过 import vueContextMenu from "@main/components/contextMenu"; export default { components:{vueContextMenu}, inject:['addTab','showTab','hideTab'], props:{ hasTitle:{ type: Boolean, }, sideWidth:{ type: String, } }, data(){ return { menuItems:[], searchWord:"", searchList:[], seldIndex:0, menuShow:false, searchMenusStyle:{ display:'none', left:0, top:0, width:0, // maxHeight:'50%', // overflow:'auto' }, sysListStyle:{ display:'none', left:0, top:0, }, latelyUseStyle:{ display:'none', left:0, top:0, maxHeight:'50%', overflow:'auto' } } }, computed:{ hasSetting(){ let cfg = this.$store.state.app.config\|\|{}; return cfg.sysSetTabs&&cfg.sysSetTabs.length; }, sysList(){ let cfg = this.$store.state.app.config\|\|{}; return cfg.sysList\|\|[]; }, sysProjectManage(){ let cfg = this.$store.state.app.config\|\|{}; let item = cfg.sysProjectMange\|\|{},flag=false; this.$store.state.app.powerList.forEach(p=>{ if(p.resUrl.indexOf(item.uri)>-1){ flag = true; return true; } }); if(flag){ return cfg.sysProjectMange; }else{ return null; } }, sysFuncMenus(){ let cfg = this.$store.state.app.config\|\|{}; let menus = cfg.sysFuncMenus\|\|[]; return menus; }, logoSrc(){ let cfg = this.$store.state.app.config\|\|{}; return (cfg.sysLogo&&cfg.sysLogo.src)\|\|''; }, MlogoSrc(){ let cfg = this.$store.state.app.config\|\|{}; return (cfg.MsysLogo&&cfg.MsysLogo.src)\|\|''; }, layout(){ return window.localStorage.getItem('layout'); }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; } }, watch:{ searchWord(newVal,oldVal){ this.doSearch(newVal); } }, mounted(){ document.addEventListener('click',this.hideSeachResult) }, beforeDestroy(){ document.removeEventListener('click',this.hideSeachResult) }, methods:{ openDesign(){ this.$refs['cmp-dd'].show(); }, doSearch(cnKey){ if(cnKey==""){ this.hideSeachResult(); return; } this.showSeachResult(); let list = [], records = this.$store.getters.menusList; // let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase(); console.log('records', records) let py = Scp.String.getPinyin(cnKey).toLocaleLowerCase(); let re = new RegExp("^[a-zA-Z]+$"); for(let i=0,l=records.length;i<l;i++){ let item = records[i]; if(list.length>10){ break; } if(re.test(cnKey)){ // let y = pinyin.getCamelChars(item.name).toLocaleLowerCase(); let y = Scp.String.getPinyin(item.name).toLocaleLowerCase(); if(y.indexOf(py)>-1 && item.type!='dir'){ list.push(item); } }else{ if(item.name.indexOf(cnKey)>-1 && item.type!='dir' ){ list.push(item); continue; } } } this.$set(this,'searchList',list); }, openFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId) this.addTab(item);//inject 提供的方法只能传一个参数 }, handleSearchBoxClick(){ this.doSearch(this.searchWord); this.$refs['dom-seachTxt'].focus(); }, handleSeachKeyUp(evt){ if(evt.keyCode==40){//ArrowDown if(this.seldIndex<this.searchList.length-1){ this.seldIndex++; }else{ this.seldIndex=0; } } if(evt.keyCode==38){//ArrowUp if(this.seldIndex==0){ this.seldIndex=this.searchList.length-1; }else{ this.seldIndex--; } } if(evt.keyCode==13){//enter let item = this.searchList[this.seldIndex]; if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId); this.addTab(item);//inject 提供的方法只能传一个参数 this.searchWord = ""; this.seldIndex = 0; this.hideSeachResult(); } }, showSeachResult(){ this.searchMenusStyle.display ='block'; let s = this.$refs["dom-searchBox"]; let rect = s.getBoundingClientRect(); this.searchMenusStyle.left = rect.left+'px'; this.searchMenusStyle.top = rect.top + rect.height + 5 +'px'; this.searchMenusStyle.width = rect.width+'px'; }, hideSeachResult(){ this.searchMenusStyle.display ='none'; }, handleChangeSys(item){ if(!item.url)return; if(item.target=="_blank"){ window.open(item.url) }else{ window.location.href=item.url; } }, handleShowSysList(){ this.sysListStyle.display ='block'; let s = this.$refs["dom-sysList"]; let rect = s.getBoundingClientRect(); this.sysListStyle.left = rect.left+'px'; this.sysListStyle.top = rect.top + rect.height +'px'; }, handleHideSysList(){ this.sysListStyle.display ='none'; }, handleFuncMenus(item,$event){ $event.stopPropagation(); if(item.type== "link"){ window.open(item.resUrl,item.name); return; } if(item.url){ item.target=='tab'? this.addTab(item.url,item.name,item.id) : window.open(item.url); return }else{ item.handler&&item.handler(); } if(item.children&&item.children.length){ this.menuItems = item.children; this.$refs['cmp-funcMenu'].open($event) } }, handleLogout(){ window.location.href = window.location.origin + '/amrept-web/loginOut.do'; }, handleShowLatelyUse(){ this.$store.dispatch('app/getLatelyUse')//最近使用 let s = this.$refs["dom-latelyUse"]; let rect = s.getBoundingClientRect(); this.latelyUseStyle.display ='block'; this.latelyUseStyle.left = rect.left+'px'; this.latelyUseStyle.top = rect.top + rect.height +'px'; }, handleHideLatelyUse(){ this.latelyUseStyle.display ='none'; }, handleOpenLatelyFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab({ resUrl:item.FURI, name:item.NAME });//inject 提供的方法只能传一个参数 }, hideTitle(name){ this.$emit('hideTitle', name); } } } </script>

Ignore Space Show notes View

project/hivuiMain/views/layout/components/Header.vue

<template>
    <div class="pl-header">  
        <ul class="ltArea">
            <li v-if="layout=='level'" class="logoStyle">
                <div  class="pl-logo" :style="{width: sideWidth}">
                    <div v-if="hasTitle" @click="hideTitle(false)">
                        <img src="@main/assets/logo.png" :width="sideWidth" v-if="logoSrc==''">
                        <img :src="logoSrc" :width="sideWidth" v-if="logoSrc!=''">
                    </div>
                    <div v-else @click="hideTitle(true)">
                        <img src="@main/assets/logo_min.png" v-if="MlogoSrc==''">
                        <img :src="MlogoSrc" :width="sideWidth" v-if="MlogoSrc!=''">
                    </div>
                </div>
            </li>
            <li v-else>
                <div :style="{width: sideWidth}" class="pl-logo" >
                    <img src="@main/assets/logo.png"  :width="sideWidth" v-if="logoSrc==''">
                    <img :src="logoSrc" :width="sideWidth" v-if="logoSrc!=''">
                </div>
            </li>
            <li v-if="sysList.length">                
                <div class="sysTrigger" ref='dom-sysList'  
                    @mouseover="handleShowSysList"  @mouseout="handleHideSysList">
                    <span>{{$lang("projectManage")||"项目管理"}}</span>
                    <i class="iconfont icon-change"></i>
                </div> 
                <ul class="pl-menus pl-menus-sub pl-menus-pop"
                @mouseenter="handleShowSysList"  @mouseleave="handleHideSysList"
                :style="sysListStyle" v-add2Body>
                    <li class="pl-menus-item" v-for="item,index in sysList" @click="handleChangeSys(item)">
                        <a class="title"><span class="txt">{{item.title}}111</span></a>
                    </li>
                </ul>   
            </li>
            <li v-if="layout == 'level'" >
                <div class="sysTrigger" ref="dom-latelyUse" 
                :title='$lang("recentlyUsed")||"最近使用"'
                @mouseenter="handleShowLatelyUse"  @mouseleave="handleHideLatelyUse">
                    <i class="icon iconfont icon-time"></i>
                    <span class="title">{{$lang("recentlyUsed")||"最近使用"}}</span>
                    <i class="icon iconfont icon-arrow-down"></i>
                </div>
                <ul class="pl-menus pl-menus-sub pl-menus-pop"
                @mouseenter="handleShowLatelyUse"  @mouseleave="handleHideLatelyUse"
                :style="latelyUseStyle" v-add2Body>
                    <li class="pl-menus-item" v-for="item,index in navsLatelyUse" @click="handleOpenLatelyFunc(item)">
                        <a class="title"><span class="txt">{{item.NAME}}</span></a>
                    </li>
                    <li v-show="navsLatelyUse.length==0" class="pl-menus-tips">
                        {{$lang("noData")||"暂无数据"}}
                    </li>
                </ul> 
            </li>
            <li v-if="layout == 'level'" >
                <div class="sysTrigger">
                    <span>{{$lang("allFunction")||"全部功能"}}</span>
                    <i class="iconfont icon-arrow-down"></i>
                </div>
            </li>
        </ul>
        <ul class="rtArea">
            <li>
                <div class="pl-search" ref="dom-searchBox" >
                    <input ref="dom-seachTxt" class="pl-search-text" type="text" :placeholder="$lang('searchKey')||'搜索关键字'" 
                    v-model.trim="searchWord" 
                    @keyup="handleSeachKeyUp"
                    />
                    <i class="iconfont icon-search"></i>                   
                </div>  
                <ul class="pl-menus pl-menus-sub pl-menus-pop" :style="searchMenusStyle" v-add2Body>
                    <li :class="['pl-menus-item',seldIndex==index?'pl-menus-itemSeld':'']" v-for="item,index in searchList" 
                    style="width:100%"
                    @click="openFunc(item)">
                        <a class="title"><span class="txt" v-html="item.html||item.name"></span></a>
                    </li>
                    <li v-show="searchList.length==0&&searchWord.length>0" class="pl-menus-tips">
                        {{$lang("noData")||"暂无数据"}}
                    </li>
                </ul> 
            </li>
            <li v-if="sysProjectManage">
                <a :href="sysProjectManage.url" target='_blank' class="item" :title="sysProjectManage.name">
                    <i class="iconfont" :class="sysProjectManage.iconClass"></i>
                    <span class="title">{{sysProjectManage.name}}</span>
                </a>  
            </li>
            <template v-for="item in sysFuncMenus">
                <li v-if="item.type!='split'">
                    <template v-if="item.children&&item.children.length">
                        <div class="item" @mouseenter="handleFuncMenus(item,$event)">
                            <div class="tip">
                                <i class="iconfont" :class="item.iconClass"></i>
                            </div>
                            <span class="title" v-html="item.html||item.name"></span>
                            <i class="iconfont icon-arrow-down" v-if="item.children"></i>
                        </div>
                    </template>
                    <template v-if="!item.children||item.children&&item.children.length==0">
                        <div class="item" @click.prevent="handleFuncMenus(item,$event)">
                            <div class="tip">
                                <i class="iconfont" :class="item.iconClass"></i>
                            </div>
                            <span class="title" v-html="item.html||item.name"></span>
                            <i class="iconfont icon-arrow-down" v-if="item.children"></i>
                        </div>
                    </template>
                </li>
                <li v-if="item.type=='split'"><div class="line"></div></li>                
            </template>
            
            <li v-if="hasSetting">
                <div class="item" :title="$lang('customWorkbench')||'自定义工作台'">
                    <a href="#design" target='_blank'><i class="iconfont icon-set-fill"></i></a>   
                </div>
            </li>
            <li>
                <div class="item" :title="$lang('logout')||'退出系统'">
                    <a @click="handleLogout"><i class="iconfont icon-tuichu"></i></a>    
                </div>
            </li>
        </ul>
        <vueContextMenu ref="cmp-funcMenu" :menu-items="menuItems" field="name"></vueContextMenu>
    </div>
</template>
<script>
// import pinyin from 'js-pinyin';//ie 下有问题 编译不过
 
import vueContextMenu from "@main/components/contextMenu";
export default {
    components:{vueContextMenu},
    inject:['addTab','showTab','hideTab'],
    props:{
        hasTitle:{
            type: Boolean,
        },
        sideWidth:{
            type: String,
        }
    },
    data(){
        return {
            menuItems:[],
            searchWord:"",
            searchList:[],
            seldIndex:0,
            menuShow:false,
            searchMenusStyle:{
                display:'none',
                left:0,
                top:0,
                width:0,
                // maxHeight:'50%',
                // overflow:'auto'
            },
            sysListStyle:{
                display:'none',
                left:0,
                top:0,
            },
            latelyUseStyle:{
                display:'none',
                left:0,
                top:0,
                maxHeight:'50%',
                overflow:'auto'
            }
        }
    },  
    computed:{
        hasSetting(){
            let cfg = this.$store.state.app.config||{};
            return cfg.sysSetTabs&&cfg.sysSetTabs.length;
        },
        sysList(){
            let cfg = this.$store.state.app.config||{};
            return cfg.sysList||[];
        },
        sysProjectManage(){
            let cfg = this.$store.state.app.config||{};
            let  item = cfg.sysProjectMange||{},flag=false;
            this.$store.state.app.powerList.forEach(p=>{
                if(p.resUrl.indexOf(item.uri)>-1){
                    flag = true;
                    return true;
                }                        
            });
            if(flag){
                return cfg.sysProjectMange;
            }else{
                return null;
            }
        },
        sysFuncMenus(){            
            let cfg = this.$store.state.app.config||{};
            let menus = cfg.sysFuncMenus||[];
            return menus;
        },
        logoSrc(){
            let cfg = this.$store.state.app.config||{};
            return (cfg.sysLogo&&cfg.sysLogo.src)||'';
        },
        MlogoSrc(){
            let cfg = this.$store.state.app.config||{};
            return (cfg.MsysLogo&&cfg.MsysLogo.src)||'';
        },
        layout(){
            return window.localStorage.getItem('layout');
        },
        navsLatelyUse(){
            return this.$store.getters.navsLatelyUse;
        },
        token(){
            return this.$store.getters.token;
        }
    },
    watch:{ 
        searchWord(newVal,oldVal){
            this.doSearch(newVal);
        }
    },
    mounted(){ 
        document.addEventListener('click',this.hideSeachResult)
    },
    beforeDestroy(){
        document.removeEventListener('click',this.hideSeachResult)
    },
    methods:{
        openDesign(){
            this.$refs['cmp-dd'].show();
        },
        doSearch(cnKey){
            if(cnKey==""){                
                this.hideSeachResult();
                return;
            }
            this.showSeachResult();
            let list = [],
                records = this.$store.getters.menusList;
            // let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase();
            console.log('records', records)
            let py = Scp.String.getPinyin(cnKey).toLocaleLowerCase();

// this.addTab(item.resUrl,item.name,item.resId);
                this.addTab(item);//inject 提供的方法只能 传一个参数
                this.searchWord = "";
                this.seldIndex = 0;
                this.hideSeachResult();
            }
        },
        showSeachResult(){
            this.searchMenusStyle.display ='block';
            let s = this.$refs["dom-searchBox"];
            let rect = s.getBoundingClientRect();
            this.searchMenusStyle.left = rect.left+'px';
            this.searchMenusStyle.top = rect.top + rect.height + 5 +'px';
            this.searchMenusStyle.width = rect.width+'px';
        },
        hideSeachResult(){
            this.searchMenusStyle.display ='none';
        },
        handleChangeSys(item){
            if(!item.url)return;
            if(item.target=="_blank"){
                window.open(item.url)
            }else{
                window.location.href=item.url;
            }
        },
        handleShowSysList(){
            this.sysListStyle.display ='block';
            let s = this.$refs["dom-sysList"];
            let rect = s.getBoundingClientRect();
            this.sysListStyle.left = rect.left+'px';
            this.sysListStyle.top = rect.top + rect.height  +'px';
        },
        handleHideSysList(){
            this.sysListStyle.display ='none';
        },
        handleFuncMenus(item,$event){
            $event.stopPropagation();
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }
            debugger;if(item.type== "widthToken"){
                item.url+="&access_token="+this.token;
            }
            if(item.url){
                item.target=='tab'? this.addTab(item.url,item.name,item.id) : window.open(item.url);
                return
            }else{
                item.handler&&item.handler();
            }
            if(item.children&&item.children.length){
                this.menuItems = item.children;
                this.$refs['cmp-funcMenu'].open($event)
            }
        },
        handleLogout(){
            window.location.href = window.location.origin + '/amrept-web/loginOut.do';
        },
        handleShowLatelyUse(){
            this.$store.dispatch('app/getLatelyUse')//最近使用 
            let s = this.$refs["dom-latelyUse"];
            let rect = s.getBoundingClientRect();
            this.latelyUseStyle.display ='block';
            this.latelyUseStyle.left = rect.left+'px';
            this.latelyUseStyle.top = rect.top + rect.height  +'px';
        },
        handleHideLatelyUse(){
            this.latelyUseStyle.display ='none';
        },
        handleOpenLatelyFunc(item){      
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }
            this.addTab({
                resUrl:item.FURI,
                name:item.NAME
            });//inject 提供的方法只能 传一个参数
        },   
        hideTitle(name){
            this.$emit('hideTitle', name);
        }
    }
}
</script>

<template>
    <div class="pl-header">  
        <ul class="ltArea">
            <li v-if="layout=='level'" class="logoStyle">
                <div  class="pl-logo" :style="{width: sideWidth}">
                    <div v-if="hasTitle" @click="hideTitle(false)">
                        <img src="@main/assets/logo.png" :width="sideWidth" v-if="logoSrc==''">
                        <img :src="logoSrc" :width="sideWidth" v-if="logoSrc!=''">
                    </div>
                    <div v-else @click="hideTitle(true)">
                        <img src="@main/assets/logo_min.png" v-if="MlogoSrc==''">
                        <img :src="MlogoSrc" :width="sideWidth" v-if="MlogoSrc!=''">
                    </div>
                </div>
            </li>
            <li v-else>
                <div :style="{width: sideWidth}" class="pl-logo" >
                    <img src="@main/assets/logo.png"  :width="sideWidth" v-if="logoSrc==''">
                    <img :src="logoSrc" :width="sideWidth" v-if="logoSrc!=''">
                </div>
            </li>
            <li v-if="sysList.length">                
                <div class="sysTrigger" ref='dom-sysList'  
                    @mouseover="handleShowSysList"  @mouseout="handleHideSysList">
                    <span>{{$lang("projectManage")||"项目管理"}}</span>
                    <i class="iconfont icon-change"></i>
                </div> 
                <ul class="pl-menus pl-menus-sub pl-menus-pop"
                @mouseenter="handleShowSysList"  @mouseleave="handleHideSysList"
                :style="sysListStyle" v-add2Body>
                    <li class="pl-menus-item" v-for="item,index in sysList" @click="handleChangeSys(item)">
                        <a class="title"><span class="txt">{{item.title}}111</span></a>
                    </li>
                </ul>   
            </li>
            <li v-if="layout == 'level'" >
                <div class="sysTrigger" ref="dom-latelyUse" 
                :title='$lang("recentlyUsed")||"最近使用"'
                @mouseenter="handleShowLatelyUse"  @mouseleave="handleHideLatelyUse">
                    <i class="icon iconfont icon-time"></i>
                    <span class="title">{{$lang("recentlyUsed")||"最近使用"}}</span>
                    <i class="icon iconfont icon-arrow-down"></i>
                </div>
                <ul class="pl-menus pl-menus-sub pl-menus-pop"
                @mouseenter="handleShowLatelyUse"  @mouseleave="handleHideLatelyUse"
                :style="latelyUseStyle" v-add2Body>
                    <li class="pl-menus-item" v-for="item,index in navsLatelyUse" @click="handleOpenLatelyFunc(item)">
                        <a class="title"><span class="txt">{{item.NAME}}</span></a>
                    </li>
                    <li v-show="navsLatelyUse.length==0" class="pl-menus-tips">
                        {{$lang("noData")||"暂无数据"}}
                    </li>
                </ul> 
            </li>
            <li v-if="layout == 'level'" >
                <div class="sysTrigger">
                    <span>{{$lang("allFunction")||"全部功能"}}</span>
                    <i class="iconfont icon-arrow-down"></i>
                </div>
            </li>
        </ul>
        <ul class="rtArea">
            <li>
                <div class="pl-search" ref="dom-searchBox" >
                    <input ref="dom-seachTxt" class="pl-search-text" type="text" :placeholder="$lang('searchKey')||'搜索关键字'" 
                    v-model.trim="searchWord" 
                    @keyup="handleSeachKeyUp"
                    />
                    <i class="iconfont icon-search"></i>                   
                </div>  
                <ul class="pl-menus pl-menus-sub pl-menus-pop" :style="searchMenusStyle" v-add2Body>
                    <li :class="['pl-menus-item',seldIndex==index?'pl-menus-itemSeld':'']" v-for="item,index in searchList" 
                    style="width:100%"
                    @click="openFunc(item)">
                        <a class="title"><span class="txt" v-html="item.html||item.name"></span></a>
                    </li>
                    <li v-show="searchList.length==0&&searchWord.length>0" class="pl-menus-tips">
                        {{$lang("noData")||"暂无数据"}}
                    </li>
                </ul> 
            </li>
            <li v-if="sysProjectManage">
                <a :href="sysProjectManage.url" target='_blank' class="item" :title="sysProjectManage.name">
                    <i class="iconfont" :class="sysProjectManage.iconClass"></i>
                    <span class="title">{{sysProjectManage.name}}</span>
                </a>  
            </li>
            <template v-for="item in sysFuncMenus">
                <li v-if="item.type!='split'">
                    <template v-if="item.children&&item.children.length">
                        <div class="item" @mouseenter="handleFuncMenus(item,$event)">
                            <div class="tip">
                                <i class="iconfont" :class="item.iconClass"></i>
                            </div>
                            <span class="title" v-html="item.html||item.name"></span>
                            <i class="iconfont icon-arrow-down" v-if="item.children"></i>
                        </div>
                    </template>
                    <template v-if="!item.children||item.children&&item.children.length==0">
                        <div class="item" @click.prevent="handleFuncMenus(item,$event)">
                            <div class="tip">
                                <i class="iconfont" :class="item.iconClass"></i>
                            </div>
                            <span class="title" v-html="item.html||item.name"></span>
                            <i class="iconfont icon-arrow-down" v-if="item.children"></i>
                        </div>
                    </template>
                </li>
                <li v-if="item.type=='split'"><div class="line"></div></li>                
            </template>
            
            <li v-if="hasSetting">
                <div class="item" :title="$lang('customWorkbench')||'自定义工作台'">
                    <a href="#design" target='_blank'><i class="iconfont icon-set-fill"></i></a>   
                </div>
            </li>
            <li>
                <div class="item" :title="$lang('logout')||'退出系统'">
                    <a @click="handleLogout"><i class="iconfont icon-tuichu"></i></a>    
                </div>
            </li>
        </ul>
        <vueContextMenu ref="cmp-funcMenu" :menu-items="menuItems" field="name"></vueContextMenu>
    </div>
</template>
<script>
// import pinyin from 'js-pinyin';//ie 下有问题 编译不过
 
import vueContextMenu from "@main/components/contextMenu";
export default {
    components:{vueContextMenu},
    inject:['addTab','showTab','hideTab'],
    props:{
        hasTitle:{
            type: Boolean,
        },
        sideWidth:{
            type: String,
        }
    },
    data(){
        return {
            menuItems:[],
            searchWord:"",
            searchList:[],
            seldIndex:0,
            menuShow:false,
            searchMenusStyle:{
                display:'none',
                left:0,
                top:0,
                width:0,
                // maxHeight:'50%',
                // overflow:'auto'
            },
            sysListStyle:{
                display:'none',
                left:0,
                top:0,
            },
            latelyUseStyle:{
                display:'none',
                left:0,
                top:0,
                maxHeight:'50%',
                overflow:'auto'
            }
        }
    },  
    computed:{
        hasSetting(){
            let cfg = this.$store.state.app.config||{};
            return cfg.sysSetTabs&&cfg.sysSetTabs.length;
        },
        sysList(){
            let cfg = this.$store.state.app.config||{};
            return cfg.sysList||[];
        },
        sysProjectManage(){
            let cfg = this.$store.state.app.config||{};
            let  item = cfg.sysProjectMange||{},flag=false;
            this.$store.state.app.powerList.forEach(p=>{
                if(p.resUrl.indexOf(item.uri)>-1){
                    flag = true;
                    return true;
                }                        
            });
            if(flag){
                return cfg.sysProjectMange;
            }else{
                return null;
            }
        },
        sysFuncMenus(){            
            let cfg = this.$store.state.app.config||{};
            let menus = cfg.sysFuncMenus||[];
            return menus;
        },
        logoSrc(){
            let cfg = this.$store.state.app.config||{};
            return (cfg.sysLogo&&cfg.sysLogo.src)||'';
        },
        MlogoSrc(){
            let cfg = this.$store.state.app.config||{};
            return (cfg.MsysLogo&&cfg.MsysLogo.src)||'';
        },
        layout(){
            return window.localStorage.getItem('layout');
        },
        navsLatelyUse(){
            return this.$store.getters.navsLatelyUse;
        }
    },
    watch:{ 
        searchWord(newVal,oldVal){
            this.doSearch(newVal);
        }
    },
    mounted(){ 
        document.addEventListener('click',this.hideSeachResult)
    },
    beforeDestroy(){
        document.removeEventListener('click',this.hideSeachResult)
    },
    methods:{
        openDesign(){
            this.$refs['cmp-dd'].show();
        },
        doSearch(cnKey){
            if(cnKey==""){                
                this.hideSeachResult();
                return;
            }
            this.showSeachResult();
            let list = [],
                records = this.$store.getters.menusList;
            // let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase();
            console.log('records', records)
            let py = Scp.String.getPinyin(cnKey).toLocaleLowerCase();

// this.addTab(item.resUrl,item.name,item.resId);
                this.addTab(item);//inject 提供的方法只能 传一个参数
                this.searchWord = "";
                this.seldIndex = 0;
                this.hideSeachResult();
            }
        },
        showSeachResult(){
            this.searchMenusStyle.display ='block';
            let s = this.$refs["dom-searchBox"];
            let rect = s.getBoundingClientRect();
            this.searchMenusStyle.left = rect.left+'px';
            this.searchMenusStyle.top = rect.top + rect.height + 5 +'px';
            this.searchMenusStyle.width = rect.width+'px';
        },
        hideSeachResult(){
            this.searchMenusStyle.display ='none';
        },
        handleChangeSys(item){
            if(!item.url)return;
            if(item.target=="_blank"){
                window.open(item.url)
            }else{
                window.location.href=item.url;
            }
        },
        handleShowSysList(){
            this.sysListStyle.display ='block';
            let s = this.$refs["dom-sysList"];
            let rect = s.getBoundingClientRect();
            this.sysListStyle.left = rect.left+'px';
            this.sysListStyle.top = rect.top + rect.height  +'px';
        },
        handleHideSysList(){
            this.sysListStyle.display ='none';
        },
        handleFuncMenus(item,$event){
            $event.stopPropagation();
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }
            if(item.url){
                item.target=='tab'? this.addTab(item.url,item.name,item.id) : window.open(item.url);
                return
            }else{
                item.handler&&item.handler();
            }
            if(item.children&&item.children.length){
                this.menuItems = item.children;
                this.$refs['cmp-funcMenu'].open($event)
            }
        },
        handleLogout(){
            window.location.href = window.location.origin + '/amrept-web/loginOut.do';
        },
        handleShowLatelyUse(){
            this.$store.dispatch('app/getLatelyUse')//最近使用 
            let s = this.$refs["dom-latelyUse"];
            let rect = s.getBoundingClientRect();
            this.latelyUseStyle.display ='block';
            this.latelyUseStyle.left = rect.left+'px';
            this.latelyUseStyle.top = rect.top + rect.height  +'px';
        },
        handleHideLatelyUse(){
            this.latelyUseStyle.display ='none';
        },
        handleOpenLatelyFunc(item){      
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }
            this.addTab({
                resUrl:item.FURI,
                name:item.NAME
            });//inject 提供的方法只能 传一个参数
        },   
        hideTitle(name){
            this.$emit('hideTitle', name);
        }
    }
}
</script>

Ignore Space Show notes View project/setting/desktop/appsetting/js/1.0.0/appsetting.js
var root = "http://192.168.4.106:7777" var server = "/hirun"; var oauth = "/hirun"; var projectName = "${projectName}" var HIVUI_SETTING ={ //项目名 projectName: projectName, //请求对象 request:eap.request, //服务器域名 url: root, //默认服务url serverUrl: root + server, //授权服务url oauth: root + oauth, //登录页url loginUrl:"/" + projectName + "/hivuiLogin/index.html#/", //首页url mainPageUrl:"/" + projectName + "/hivuiMain/index.html#/", //系统管理url sysManageUrl:"http://192.168.4.193:5188", //数据保存url saveUrl: root + server + "/data/save", //'/data/save', //数据查询url queryUrl: root + server + "/data/query", //'/data/query', //数据策略url policyUrl: root + server + "/data/policy", //附件上传url upload: root + server + "/file/upload", //附件下载url download: root + server + "/file/download", //附件查看url review: root + server + "/file/review", //流程信息url getFlowInfo: root + server + "/flow/open", getApprovalInfo: root + server + "/flow/getApprovalInfo", processFlow: root + server + "/flow/processFlow", queryTask: root + server + "/flow/queryTask", withdrawtask: root + server + "/flow/withdrawtask", taskDiagram: root + server + "/flow/taskDiagram", openOrdernumber: root + server + "/flow/openOrdernumber", //默认查询操作符 queryOperate:'like', //默认组件配置 defaultCmp:{ "DtDataSet":{ "test":1 } } } var root = "http://192.168.4.106:7777" var server = "/hirun"; var oauth = "/hirun"; var projectName = "${projectName}" var HIVUI_SETTING ={ //项目名 projectName: projectName, //请求对象 request:eap.request, //服务器域名 url: root, //默认服务url serverUrl: root + server, //授权服务url oauth: root + oauth, //登录页url loginUrl:"/" + projectName + "/hivuiLogin/index.html#/", //数据保存url saveUrl: root + server + "/data/save", //'/data/save', //数据查询url queryUrl: root + server + "/data/query", //'/data/query', //数据策略url policyUrl: root + server + "/data/policy", //附件上传url upload: root + server + "/file/upload", //附件下载url download: root + server + "/file/download", //附件查看url review: root + server + "/file/review", //流程信息url getFlowInfo: root + server + "/flow/open", getApprovalInfo: root + server + "/flow/getApprovalInfo", processFlow: root + server + "/flow/processFlow", queryTask: root + server + "/flow/queryTask", withdrawtask: root + server + "/flow/withdrawtask", taskDiagram: root + server + "/flow/taskDiagram", openOrdernumber: root + server + "/flow/openOrdernumber", //默认查询操作符 queryOperate:'like', //默认组件配置 defaultCmp:{ "DtDataSet":{ "test":1 } } }

Ignore Space Show notes View

project/setting/desktop/appsetting/js/1.0.0/appsetting.js

var root = "http://192.168.4.106:7777"
var server = "/hirun";
var oauth = "/hirun";
var projectName = "${projectName}"
var HIVUI_SETTING ={
    //项目名
    projectName: projectName,
    //请求对象
    request:eap.request,
    //服务器域名
    url: root,
    //默认服务url
    serverUrl: root + server,
    //授权服务url
    oauth: root + oauth,
    //登录页url
    loginUrl:"/" + projectName + "/hivuiLogin/index.html#/",
    //首页url
    mainPageUrl:"/" + projectName + "/hivuiMain/index.html#/",
    //系统管理url
    sysManageUrl:"http://192.168.4.193:5188",
    //数据保存url
    saveUrl: root + server + "/data/save", //'/data/save',
    //数据查询url
    queryUrl: root + server + "/data/query", //'/data/query',
    //数据策略url
    policyUrl: root + server + "/data/policy", 
    //附件上传url
    upload: root + server + "/file/upload",
    //附件下载url
    download: root + server + "/file/download",
    //附件查看url
    review: root + server + "/file/review",
    //流程信息url
    getFlowInfo: root + server + "/flow/open",
    getApprovalInfo: root + server + "/flow/getApprovalInfo",
    processFlow: root + server + "/flow/processFlow",
    queryTask: root + server + "/flow/queryTask",
    withdrawtask: root + server + "/flow/withdrawtask",
    taskDiagram: root + server + "/flow/taskDiagram",
    openOrdernumber: root + server + "/flow/openOrdernumber",
    //默认查询操作符
    queryOperate:'like',
    //默认组件配置
    defaultCmp:{
        "DtDataSet":{
            "test":1
        }
    }
}

var root = "http://192.168.4.106:7777"
var server = "/hirun";
var oauth = "/hirun";
var projectName = "${projectName}"
var HIVUI_SETTING ={
    //项目名
    projectName: projectName,
    //请求对象
    request:eap.request,
    //服务器域名
    url: root,
    //默认服务url
    serverUrl: root + server,
    //授权服务url
    oauth: root + oauth,
    //登录页url
    loginUrl:"/" + projectName + "/hivuiLogin/index.html#/",
    //数据保存url
    saveUrl: root + server + "/data/save", //'/data/save',
    //数据查询url
    queryUrl: root + server + "/data/query", //'/data/query',
    //数据策略url
    policyUrl: root + server + "/data/policy", 
    //附件上传url
    upload: root + server + "/file/upload",
    //附件下载url
    download: root + server + "/file/download",
    //附件查看url
    review: root + server + "/file/review",
    //流程信息url
    getFlowInfo: root + server + "/flow/open",
    getApprovalInfo: root + server + "/flow/getApprovalInfo",
    processFlow: root + server + "/flow/processFlow",
    queryTask: root + server + "/flow/queryTask",
    withdrawtask: root + server + "/flow/withdrawtask",
    taskDiagram: root + server + "/flow/taskDiagram",
    openOrdernumber: root + server + "/flow/openOrdernumber",
    //默认查询操作符
    queryOperate:'like',
    //默认组件配置
    defaultCmp:{
        "DtDataSet":{
            "test":1
        }
    }
}

Show line notes below