老门户样式修改案例

1 上传logo和设置系统名称

打开企业设置，上传企业LOGO，设置系统名称

2 配置顶部显示内容

打开统一通用配置，添加或修改门户配置

3 改变默认皮肤和用户名显示格式

开启门户定制，打开UI2/pc/index.js文件，添加下面的代码，其中.ogn/user表示在用户名前显示机构名称

    this.defaultTheme = "skin-black";//改变默认皮肤
    this.usernameFormat = ".ogn/user";//改变默认用户名格式

文件修改后，必须在model/patchFiles.json文件的update部分，添加该文件：UI2/pc/index.js

4 定制样式

打开UI2/pc/css/themeCustom.css文件，在其中添加需要的样式 文件修改后，必须在model/patchFiles.json文件的update部分，添加该文件：UI2/pc/css/themeCustom.css

/*顶部*/
.skin-black .main-header{
    height: 61px;
    margin-bottom: 9px;
    background: #F7F8FA;
    box-shadow: none;
}
/*logo*/
.skin-black .main-header .logo{
    height: 52px;
    border: none;
}
/*系统名称样式*/
.main-header .navbar .x-title{
    color: #4B4948 !important;
    font-size: 24px !important;
    margin-left: 21px !important;
}

/*顶部工具栏边框*/
.skin-black .main-header .navbar .navbar-custom-menu .navbar-nav>li>a, .skin-black .main-header .navbar .navbar-right>li>a {
    border: none;
}
/*组织机构选择*/
.x-select-ogn .x-gridSelect .x-gridSelect-input{
    background-color: #F2F3F5;
    background-image:url(../svg/manage.svg);
    background-origin: content-box;
    border: none;
    width: 220px;
    padding: 6px 12px;
}
/*用户小窗口*/
.navbar-nav > .user-menu > .dropdown-menu{
    width: 284px;
}
.skin-black .main-header li.user-header{
    background-color: #0168B7;
}
/*左侧区*/
.main-sidebar, .left-side{
    padding-top: 61px;
}
/*用户面板*/
.user-panel{
    padding: 13px 10px 10px 20px;
}

/*用户面板的登录者姓名*/
.user-panel > .info > p{
    font-size: 20px;
    text-align: center;
}

/*用户面板的登录时间*/
.skin-black .user-panel>.info, .skin-black .user-panel>.info>a{
    font-size: 10px;
    text-align: center;
}

/*用户面板的登录状态图标*/
.skin-black .user-panel>.info>a>i{
    display: none;
}

/*左侧菜单背景色*/
.skin-black .wrapper, .skin-black .main-sidebar, .skin-black .left-side {
    background-color: #0168B7;
}

/*二级菜单背景色*/
.skin-black .sidebar-menu>li>.treeview-menu {
    background: #0168B7;
}
/*一级菜单展开样式*/
.skin-black .sidebar-menu>li.drop>a{
    background: #0A286F;
    padding: 9px 5px 9px 13px;
}
/*二级菜单展开样式*/
.skin-black .treeview-menu>li.drop>a{
    background: #0A286F;
    padding: 9px 5px 9px 23px;
}

/*一级菜单悬停样式*/
.skin-black .sidebar-menu>li.active>a{
    background-color: #0168B7;    
}
.skin-black .sidebar-menu>li>a:hover{
    background-color: white;
    color: #165DFF;
    border: none;
    padding: 9px 5px 9px 13px;
}
/*二级菜单悬停样式*/
.skin-black .treeview-menu>li.active>a{
    background-color: #0168B7;    
}
.skin-black .treeview-menu>li>a:hover{
    background-color: white;
    color: #165DFF;
    border: none;
}

/*一级菜单*/
.skin-black .sidebar-menu>li>a{
    border: none;
}
.skin-black .sidebar a{
    color: white;
    margin: 2px 8px;
    padding: 9px 5px 9px 13px;
    border: none;
}
/*二级菜单*/
.skin-black .sidebar-menu>li>.treeview-menu {
    margin: 0;
}
.skin-black .treeview-menu>li>a{
    color: white;
    margin: 2px 8px;
    padding: 9px 5px 9px 23px;
    border: none;
}
/*三级菜单*/
.skin-black .treeview-menu .treeview-menu>li>a{
    padding: 9px 5px 9px 33px;
}

/*去掉ul的缩进*/
.sidebar-menu {
    padding-left: 0px;
}

.sidebar-menu .treeview-menu {
    padding-left: 0px;
}

.sidebar-menu .treeview-menu .treeview-menu {
    padding-left: 0px;
}

/*内容区*/
.fixed .content-wrapper, .fixed .right-side{
    padding-top: 61px;
}

.content-wrapper {
    background: #F7F8FA !important;    
}

/*多页签*/
.x-opened-menu > li.select{
    background: #0168B7 !important;
}

.skin-black .content-header {
    background: white;
    padding: 8px 19px;
    margin: 0 8px 8px 8px;
}
/*打开的页面区*/
.content-wrapper .content{
    background: #F7F8FA !important;
    margin: 8px 8px 0 8px;        
}

5 使用组织机构切换

在需要接收组织机构切换事件的页面的constructor方法中，添加下面的代码，接收组织机构切换事件，事件参数中selectOgnName为组织机构的名称，selectOgnId为组织机构的ID

    this.changeOgn = function(evt) {
        alert(evt.selectOgnName + " " + evt.selectOgnId);
    };
    justep.Shell.on("changeOgn", this.changeOgn);

完整代码如下

import PageImpl from "$UI/wxsys/lib/base/pageImpl"; var app = getApp();
export default class IndexPage extends PageImpl { 
    constructor(...args) {
        super(...args); 

        this.changeOgn = function(evt) {
            alert(evt.selectOgnName + " " + evt.selectOgnId);
        };
        justep.Shell.on("changeOgn", this.changeOgn);
    } 
}

如果打开的页面需要使用在门户中选中的组织机构，使用下面的方法获取

var ogn = justep.Util.getGlobalValue("portal.defaultOgn");
alert(ogn.selectOgnName + " " + ogn.selectOgnId);

6 组织机构只显示当前人所在的机构

客户的需求是在组织机构中显示当前人所在的机构和名称为公司总部或公司本部的部门，因此在index.w中去掉组织机构的只显示机构的属性，在index.js中增加根过滤条件和过滤条件

文件修改后，必须在model/patchFiles.json文件的update部分，添加这两个文件：UI2/pc/index.w和UI2/pc/index.js

• 在UI2/pc/index.w中添加下面的代码，添加后如下图所示

    <div xid="selectOgn" autoOptionWidth="true" includeOrgKind="" xui:update-mode="merge"/>
  

• 在UI2/pc/index.js中添加下面的代码，添加后如下图所示

    //该方法简单，所以重写此方法
    Model.prototype.initTheme = function(){
        $('body').addClass(this.defaultTheme);
  
        //设置ognData的过滤条件和根过滤条件
        var ognIdArr = [];
        var allPsm = this.comp("context").getAllPersonMembers();
        for(var i=0;i<allPsm.length;i++){
            var fid = allPsm[i].fid;
            var fidArr = fid.split("/");
            for(var j=fidArr.length-1;j>=0;j--){
                if(fidArr[j].substr(-4)==".ogn"){
                    var ognId = fidArr[j].substr(0,fidArr[j].length-4);
                    if(ognIdArr.indexOf(ognId)==-1){
                        ognIdArr.push(ognId);
                    }
                    break;
                }
            }
        }
        this.comp("ognData").getTreeOption().rootFilter = "inn('id','"+ognIdArr.join(",")+"')";
        this.comp("ognData").setFilter("filter1","LBRAC().eq('type','ogn').like('name','公司总部','or').like('name','公司本部','or').RBRAC()");
    };