Shr-前端汇总

F7控件监听

　　f7控件的监听是指，在点击F7控件时，对控件内的内容进行选中后出发该事件监听；通过参数value可以获取当前F7控件的一些值信息。

//人力编制方案监听 回写计划期间 及分录数据
    initalRecruitment :function() {
        var self = this;
        if(this.getHistoryOperateState() != "VIEW"){
            $("#hrPlaitProject").shrPromptBox("option", {
            onchange : function (e, value) {
                if(value.current == null){
                    return;
                }
                var currentId = value.current.id;
                self.remoteCall({
                    method : 'getEntry',
                    param : {
                        plaitProjectId : currentId
                    },
                    success : function(data) {
                        $("#planPeriod").val(data.planPeriod);
                        self.initalEntry(data.entryData);
                    }
                });
            }
        });
        }
    }

初始化F7控件值

　　将初始化方法写入到initalizeDOM() 初始化页面方法中。给F7赋值时，需要提供id,name 格式数据。

/*初始化单位*/
    initAdminOrg: function(){
        var self = this;
        self.remoteCall({
            method : "getCurrentCompany",
            success : function(data) {
                if(data != undefined && data != null) {
                    var adminOrg = {id:data.orgId,name:data.orgName};
                    $("#unitOrg").shrPromptBox("setValue", adminOrg);    
                }
            }
        });    
    }

初始化F7时，添加过滤

　　组装好filter后，给F7控件设置过滤条件Filter。此处的list 需要进行处理，因为不符合 ‘1’，‘2’，‘3’ 格式。

/*初始化携带证件的 证件类型F7*/
    initCredentialType: function(data){
        var self = this;
        if(data != '' && data != null){
            var personId = data;
            self.remoteCall({
            method : 'getPersonCredentialTypeId',
            param : {
                personId : personId
            },
            success : function(datas) {
                if(datas != '' && datas != null){
                        var list = datas.types;
                        var filter = "id in ('" +list + "')";
                        $("#credential").shrPromptBox("setFilter",filter);
                    }
                }
            });
        }
        
    }

　　此处为过滤条件的获取Handler,着重对list进行处理。

 * 
     * <p>
     * Title: getPersonCredentialTypeIdAction
     * </p>
     * <p>
     * Description:
     * </p>
     * 获取出境员工的 出入境证件信息 证件类型id
     * 
     * @param request
     * @param response
     * @param modelMap
     * @throws SHRWebException
     */
    public void getPersonCredentialTypeIdAction(HttpServletRequest request, HttpServletResponse response,
            ModelMap modelMap) throws SHRWebException {
        String personId = request.getParameter("personId");
        StringBuilder sb = new StringBuilder();
        if (StringUtils.isEmpty(personId)) {
            throw new ShrWebBizException("初始化携带证件类型失败！");
        }
        try {
            // 出入境证件信息
            String sql = "select cftypesid from CT_E_EntryAndExitCredential where cfpersonid = '" + personId
                    + "'";
            IRowSet rowSet = DbUtil.executeQuery(ctx, sql);
            List<String> list = new ArrayList<String>();
            while (rowSet.next()) {
                String typeId = rowSet.getString("cftypesid");
                list.add(typeId);
            }

            for (int i = 0; i < list.size(); i++) {
                String str = list.get(i);
                sb.append(str);
                if (i < list.size() - 1) {
37                     sb.append("','");
38                 }
            }
            modelMap.put("types", sb.toString());

            JSONUtils.writeJson(response, modelMap);
        } catch (BOSException e) {
            e.printStackTrace();
            throw new ShrWebBizException("初始化证件类型中获取出入境证件失败！" + e);
        } catch (SQLException e) {
            e.printStackTrace();
            logger.error("执行sql失败！" + e);
        }
    }

对分录进行赋值

　　首先是在视图中定义好分录及字段。如下：

......  //其余部分省略   
   <editGrid name="entrys" sorterItems="department asc" >
            <column name="familyMember"  required="true" readonly="true" editable="false"   width="185"/>
            <column name="name" required="true" readonly="true" editable="false"   width="200"/>
            <column name="sex" readonly="true" editable="false"  width="110"/> 
            <column name="nationality" readonly="true" editable="false" width="110"/>
            <column name="company" rreadonly="true" editable="false"  width="110"/>    
            <column name="telphone" readonly="true" editable="false"  width="110"/>    
    </editGrid>
......

　　分录赋值：

//根据人力编制方案 初始化招聘计划明细waf
    initalEntry: function(datas){
        var rowdatas = datas;
        for(var i = 0, len = rowdatas.length; i < len; i++){
            var info = rowdatas[i];
            var datarow = {
                "adminOrg":info.adminOrg,
                "postion":info.postion,
                "plaitNum":info.plaitNum,
                "missNum":info.missNum
            };
            waf("#entrys").jqGrid('addRow',{data:datarow});
        }
    }

监听分录中的F7控件

 　　视图：

<group name="detail" caption="八级工报名明细" >
        <editGrid name="entrys" sorterItems="department asc" >
            <column name="person"  required="true"  label="姓名" uipk="shr.custm.person.F7" width="80"/>
            <column name="gender"  readonly="true" editable="false" width="50" />
            <column name="birthDate" readonly="true" editable="false"  width="120"/> 
            <column name="education" readonly="true" editable="false" width="120"/>
            <column name="applyWorkType" width="110" required="true"/>    
            <column name="applyLeavel" width="110" required="true"/>    
            <column name="applyType" width="110" required="true"/>    
            <column name="workYears" required="true"/>    
            <column name="entryDate" readonly="true" editable="false"  width="120"/>    
            <column name="mType" readonly="true" editable="false"  width="120"/>
            <column name="remark" readonly="true" editable="false"  width="110"/>
            <column name="turnInto" readonly="true" editable="false"  width="80"/>
        </editGrid>
    </group>

　　监听值改变事件

tableCellChange: function(){
        var self = this;
        var grid = waf("#entrys");
        grid.wafGrid("option", {
            afterSaveCell:function (rowid, cellname, value, iRow, iCol) {
                if(cellname=="person") { // 只监听person 列的值改变
                    self.assignData(rowid);
                }
            }
        });

    }

　　分录grid当前行赋值

assignData: function(rowid){
        var self = this;
        var person = $("#entrys").jqGrid('getCell',rowid,"person");
        if(person == null || person == ''){
            return;
        }
        var personId = person.id;
        self.remoteCall({
            method:'getPersonData',
            param : {
                personId : personId
            },
            success:function(data){
                if(data != '' && data != null){
                    var gender = data.gender;
                    var birthday = data.birthday;
                    var degree = data.degree;
                    var entreDate = data.entreDate;
                    var typeName = data.typeName;

                    $("#entrys").jqGrid('setCell',rowid,"gender",gender);
                    $("#entrys").jqGrid('setCell',rowid,"birthDate",birthday);
                    $("#entrys").jqGrid('setCell',rowid,"education",degree);
                    $("#entrys").jqGrid('setCell',rowid,"entryDate",entreDate);
                    $("#entrys").jqGrid('setCell',rowid,"mType",typeName);
                    
                }
            }
        });
    }

单选按钮

　　

　　视图：视图中只定义一个出境类型的div,然后使用js进行填充单选组内容。

<group>
    <div id="exitType">
      <div class="col-lg-4">
        <div class="field_label" title="出境类型">出境类型</div>
      </div>
     <div class="field-ctrl">
            <div class="radiowrap">
                <!-- 出境类型 -->
            </div>
       </div>
    </div>
</group>

//初始化出境类型
    initRecruitmentTypeContent: function(){
        var self = this;
        if(this.getOperateState() != "VIEW"){
                self.remoteCall({
                method : "getExitTypeContent",
                success : function(data){
                    if(data != undefined) {
                        var recTypeHTML = "";
                        for(var i=0; i<data.length; i++) {
                            var type = data[i];
                            recTypeHTML += '<input name="exitType" type="radio" id="exitType'+type.number+'" class="radio" data-pk="'+type.id+'" data-name="'+type.name+'" /> <label for="exitType'+type.number+'" class="radio_label">'+type.name+'</label>';
                        }
                        $("#exitType").find(".radiowrap").html(recTypeHTML);
                    }
                }
            });
        }
    }

 

向服务端发送请求（常用）

 　　method对应的参数名就是handler中的该参数名+Action方法

self.remoteCall({
        method : 'getEntry',
        param : {
                plaitProjectId : currentId
        },
        success : function(data) {
                $("#planPeriod").val(data.planPeriod);
                self.initalEntry(data.entryData);
        }
    });

控件值改变时间（文本框 日期控件等）

$('#endDate').change(function(){  
                self.countApplyDays();
   });

页面弹框提示

　　showInfo showWarning等。其中hideAfter指得的控件消失时间（s）。

shr.showWarning({
      message:"截止日期不能小于起始日期",
      hideAfter:5
});

页面按钮

　　提交生效

　　　　提交生效 指得是当前业务单据直接保存并审核通过。

　　　　一般有两种情况，在handler中需要进行区分：

　　　　　　1. 当前业务单据完成信息录入操作后，直接点击的提交生效按钮。（即该业务单据尚未保存，此时传递到Handler的model中是不会有单据id的；此时业务单据如果有分录信息的话，该model中也是可以获取的）

　　　　　　2. 当前业务单据完成信息录入后，点进行了保存操作，而后点击提交生效。（则在Handler中就不需要对该单据信息进行保存了，只需要更新单据状态为审批通过及其他业务逻辑处理即可；此时保存后的单据，在提交生效Handler中获取model 时，获取不到分录信息的，需要根据单据id查询分录信息）

　　　　

/**
     * 单据提交生效
     * @param {} event
     */
    submitEffectAction : function (event) {
        var _self = this;
        _self.remoteCall({
            method:'canSubmitEffect',
            success:function(data){
                if("success" == data.state){
                    if(_self.getOperateState() == 'VIEW' ){//&& _self.checkBillState()
                        shr.showConfirm('您确认要提交生效吗？', function() {        
                            _self.prepareSubmitEffect(event, 'submitEffect');
                        });
                    }else{
                        if (_self.validate() && _self.verify() ) {    //&& _self.checkBillState()
                            shr.showConfirm('您确认要提交生效吗？', function() {        
                                _self.prepareSubmitEffect(event, 'submitEffect');
                            });
                        }
                    }
                }
            }
        });
    },
    prepareSubmitEffect : function (event, action){
        var _self = this;
        var data = _self.assembleSaveData(action);
        
        var target;
        if (event && event.currentTarget) {
            target = event.currentTarget;
        }

        shr.doAction({
            target: target,
            url: _self.dynamicPage_url,
            type: 'post', 
            data: data,
            success : function(response) {
                _self.back();
            }
        });    
    },

 　　保存

　　　　保存逻辑一般不需要重写，但是如果单据上有一些单据处理的内容，比如单选组信息，次数就需要重写saveAction，重新用

assembleSaveData()方法进行对传递到服务端的数据进行组装。获取到数据以后单独对该选中的单选组信息进行保存。保存、提交、提交生效方法都会调用该方法。

assembleSaveData()方法一般情况下不需要重写，该方法就是为了组装传递至服务端数据model。比如此处的 需要对单选组信息出境类型进行单独保存。Handler中通过 String exitTypeId = request.getParameter("exitType"); 进行获取 data.exitType = _self.getRecuritmentTypeDate() 的值。

//组装保存时传至服务端的数据  （当需要传输单据上别的数据的时候 可以在这个方法中组装数据传递到后端）
    assembleSaveData: function(action){
        var _self = this;
        var data =_self.prepareParam(action + 'Action');
        data.method = action;
        data.operateState = _self.getOperateState();
        data.model = shr.toJSON(_self.assembleModel()); 

        var model = data.model;
        if(model != undefined && model != "") {
            data.model = model.replace(/<presclass=\"textarea-format\">/gi,"").replace(/</pre>/gi,""); //抹掉因为在view界面中对富文本调.html()方法而带出的标签
        }

        data.exitType = _self.getRecuritmentTypeDate();

        // relatedFieldId
        var relatedFieldId = this.getRelatedFieldId();
        if (relatedFieldId) {
            data.relatedFieldId = relatedFieldId;
        }
        
        return data;
    },
//获取选中的出境类型 id
    getRecuritmentTypeDate : function(){
        var type = $("#exitType input[type='radio']:checked");
        var recTypeId = $(type).attr("data-pk");
        return recTypeId;
    }

 　

/**
     * 单据保存  重写
     * @param {} event
     */
saveAction: function(event) {
        var _self = this;
        if (_self.validate() && _self.verify()) {
            //_self.refreshNowBillState();

            _self.doSave(event, 'save');

        }else{
            if(_self != top){// in iframe
                shr.setIframeHeight(window.name);
            } 
                
        }    
    },
    /**
     * 保存真正执行方法
     */
    doSave: function(event, action) {
        var _self = this;
        var data = _self.assembleSaveData(action);
        
        var target;
        if (event && event.currentTarget) {
            target = event.currentTarget;
        }
        
        shr.doAction({
            target: target,
            url: _self.dynamicPage_url,
            type: 'post', 
            data: data,
            success : function(response) {
                if (_self.isFromF7()) {
                    // 来自F7，关闭当前界面，并给F7设置
                    var dataF7 = {
                        id : response,
                        name : $.parseJSON(data.model).name
                    };
                    dialogClose(dataF7);
                } else {
                    // 普通保存，去除最后一个面包屑，防止修改名字造成面包屑重复
                    shrDataManager.pageNavigationStore.pop();
                    _self.viewAction(response);
                }
            }
        });    
    }

 　　　　套打

 　　1. 配置视图中的套打按钮 templatePrint

　　 2. 绘制套打模板 js写入套打模板路径   /s-HR/Cadreadministrator/CadreadministratorJob

　　3. 绑定查询数据源  com.kingdee.eas.custom.cadreadministrate.app.CadreAppointmentQuery

    /**
     * 套打模板名称
     */
    getTemplateName: function() {
        return '/s-HR/Cadreadministrator/CadreadministratorJob';
    },
    /**
     * 套打dataProvider
     */
    getTemplateDataProvider: function() {
        return 'com.kingdee.bos.webframework.component.report.CommonDataProvider';
    }
    getTemplateQueryPK: function() {
        return 'com.kingdee.eas.custom.cadreadministrate.app.CadreAppointmentQuery';
    }

 　

　　　加载css外部样式表 并优先加载

<style href="${appPath}/custom/web/css/evalPerson/evalPerson.css"/>


evalPerson.css
/**
    修改 #solutionPeriodname_down 下拉列表width 并提高优先级
*/
#solutionPeriodname_down {
    width:430px !important;
}


!important作用是提高指定CSS样式规则的应用优先权

 　　数据表格分页设置

<grid multiselect="false"   rowList="[100,200]" rowNum="200" > 

rowList 为每次查询条数

rowNum 为初始查询条数（默认查询50条）