Shr-前端汇总

F7控件监听

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

 1 //人力编制方案监听 回写计划期间 及分录数据
 2     initalRecruitment :function() {
 3         var self = this;
 4         if(this.getHistoryOperateState() != "VIEW"){
 5             $("#hrPlaitProject").shrPromptBox("option", {
 6             onchange : function (e, value) {
 7                 if(value.current == null){
 8                     return;
 9                 }
10                 var currentId = value.current.id;
11                 self.remoteCall({
12                     method : 'getEntry',
13                     param : {
14                         plaitProjectId : currentId
15                     },
16                     success : function(data) {
17                         $("#planPeriod").val(data.planPeriod);
18                         self.initalEntry(data.entryData);
19                     }
20                 });
21             }
22         });
23         }
24     }

初始化F7控件值

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

 1 /*初始化单位*/
 2     initAdminOrg: function(){
 3         var self = this;
 4         self.remoteCall({
 5             method : "getCurrentCompany",
 6             success : function(data) {
 7                 if(data != undefined && data != null) {
 8                     var adminOrg = {id:data.orgId,name:data.orgName};
 9                     $("#unitOrg").shrPromptBox("setValue", adminOrg);    
10                 }
11             }
12         });    
13     }

初始化F7时，添加过滤

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

 1 /*初始化携带证件的 证件类型F7*/
 2     initCredentialType: function(data){
 3         var self = this;
 4         if(data != '' && data != null){
 5             var personId = data;
 6             self.remoteCall({
 7             method : 'getPersonCredentialTypeId',
 8             param : {
 9                 personId : personId
10             },
11             success : function(datas) {
12                 if(datas != '' && datas != null){
13                         var list = datas.types;
14                         var filter = "id in ('" +list + "')";
15                         $("#credential").shrPromptBox("setFilter",filter);
16                     }
17                 }
18             });
19         }
20         
21     }

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

 1  * 
 2      * <p>
 3      * Title: getPersonCredentialTypeIdAction
 4      * </p>
 5      * <p>
 6      * Description:
 7      * </p>
 8      * 获取出境员工的 出入境证件信息 证件类型id
 9      * 
10      * @param request
11      * @param response
12      * @param modelMap
13      * @throws SHRWebException
14      */
15     public void getPersonCredentialTypeIdAction(HttpServletRequest request, HttpServletResponse response,
16             ModelMap modelMap) throws SHRWebException {
17         String personId = request.getParameter("personId");
18         StringBuilder sb = new StringBuilder();
19         if (StringUtils.isEmpty(personId)) {
20             throw new ShrWebBizException("初始化携带证件类型失败！");
21         }
22         try {
23             // 出入境证件信息
24             String sql = "select cftypesid from CT_E_EntryAndExitCredential where cfpersonid = '" + personId
25                     + "'";
26             IRowSet rowSet = DbUtil.executeQuery(ctx, sql);
27             List<String> list = new ArrayList<String>();
28             while (rowSet.next()) {
29                 String typeId = rowSet.getString("cftypesid");
30                 list.add(typeId);
31             }
32 
33             for (int i = 0; i < list.size(); i++) {
34                 String str = list.get(i);
35                 sb.append(str);
36                 if (i < list.size() - 1) {
37                     sb.append("','");
38                 }
39             }
40             modelMap.put("types", sb.toString());
41 
42             JSONUtils.writeJson(response, modelMap);
43         } catch (BOSException e) {
44             e.printStackTrace();
45             throw new ShrWebBizException("初始化证件类型中获取出入境证件失败！" + e);
46         } catch (SQLException e) {
47             e.printStackTrace();
48             logger.error("执行sql失败！" + e);
49         }
50     }

对分录进行赋值

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

......  //其余部分省略   
   <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控件

　　视图：

 1 <group name="detail" caption="八级工报名明细" >
 2         <editGrid name="entrys" sorterItems="department asc" >
 3             <column name="person"  required="true"  label="姓名" uipk="shr.custm.person.F7" width="80"/>
 4             <column name="gender"  readonly="true" editable="false" width="50" />
 5             <column name="birthDate" readonly="true" editable="false"  width="120"/> 
 6             <column name="education" readonly="true" editable="false" width="120"/>
 7             <column name="applyWorkType" width="110" required="true"/>    
 8             <column name="applyLeavel" width="110" required="true"/>    
 9             <column name="applyType" width="110" required="true"/>    
10             <column name="workYears" required="true"/>    
11             <column name="entryDate" readonly="true" editable="false"  width="120"/>    
12             <column name="mType" readonly="true" editable="false"  width="120"/>
13             <column name="remark" readonly="true" editable="false"  width="110"/>
14             <column name="turnInto" readonly="true" editable="false"  width="80"/>
15         </editGrid>
16     </group>

　　监听值改变事件

 1 tableCellChange: function(){
 2         var self = this;
 3         var grid = waf("#entrys");
 4         grid.wafGrid("option", {
 5             afterSaveCell:function (rowid, cellname, value, iRow, iCol) {
 6                 if(cellname=="person") { // 只监听person 列的值改变
 7                     self.assignData(rowid);
 8                 }
 9             }
10         });
11 
12     }

　　分录grid当前行赋值

 1 assignData: function(rowid){
 2         var self = this;
 3         var person = $("#entrys").jqGrid('getCell',rowid,"person");
 4         if(person == null || person == ''){
 5             return;
 6         }
 7         var personId = person.id;
 8         self.remoteCall({
 9             method:'getPersonData',
10             param : {
11                 personId : personId
12             },
13             success:function(data){
14                 if(data != '' && data != null){
15                     var gender = data.gender;
16                     var birthday = data.birthday;
17                     var degree = data.degree;
18                     var entreDate = data.entreDate;
19                     var typeName = data.typeName;
20 
21                     $("#entrys").jqGrid('setCell',rowid,"gender",gender);
22                     $("#entrys").jqGrid('setCell',rowid,"birthDate",birthday);
23                     $("#entrys").jqGrid('setCell',rowid,"education",degree);
24                     $("#entrys").jqGrid('setCell',rowid,"entryDate",entreDate);
25                     $("#entrys").jqGrid('setCell',rowid,"mType",typeName);
26                     
27                 }
28             }
29         });
30     }

单选按钮

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

 1 <group>
 2     <div id="exitType">
 3       <div class="col-lg-4">
 4         <div class="field_label" title="出境类型">出境类型</div>
 5       </div>
 6      <div class="field-ctrl">
 7             <div class="radiowrap">
 8                 <!-- 出境类型 -->
 9             </div>
10        </div>
11     </div>
12 </group>

 1 //初始化出境类型
 2     initRecruitmentTypeContent: function(){
 3         var self = this;
 4         if(this.getOperateState() != "VIEW"){
 5                 self.remoteCall({
 6                 method : "getExitTypeContent",
 7                 success : function(data){
 8                     if(data != undefined) {
 9                         var recTypeHTML = "";
10                         for(var i=0; i<data.length; i++) {
11                             var type = data[i];
12                             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>';
13                         }
14                         $("#exitType").find(".radiowrap").html(recTypeHTML);
15                     }
16                 }
17             });
18         }
19     }

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

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

 1 self.remoteCall({
 2         method : 'getEntry',
 3         param : {
 4                 plaitProjectId : currentId
 5         },
 6         success : function(data) {
 7                 $("#planPeriod").val(data.planPeriod);
 8                 self.initalEntry(data.entryData);
 9         }
10     });

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

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

页面弹框提示

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

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

页面按钮

　　提交生效

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

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

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

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

 1 /**
 2      * 单据提交生效
 3      * @param {} event
 4      */
 5     submitEffectAction : function (event) {
 6         var _self = this;
 7         _self.remoteCall({
 8             method:'canSubmitEffect',
 9             success:function(data){
10                 if("success" == data.state){
11                     if(_self.getOperateState() == 'VIEW' ){//&& _self.checkBillState()
12                         shr.showConfirm('您确认要提交生效吗？', function() {        
13                             _self.prepareSubmitEffect(event, 'submitEffect');
14                         });
15                     }else{
16                         if (_self.validate() && _self.verify() ) {    //&& _self.checkBillState()
17                             shr.showConfirm('您确认要提交生效吗？', function() {        
18                                 _self.prepareSubmitEffect(event, 'submitEffect');
19                             });
20                         }
21                     }
22                 }
23             }
24         });
25     },
26     prepareSubmitEffect : function (event, action){
27         var _self = this;
28         var data = _self.assembleSaveData(action);
29         
30         var target;
31         if (event && event.currentTarget) {
32             target = event.currentTarget;
33         }
34 
35         shr.doAction({
36             target: target,
37             url: _self.dynamicPage_url,
38             type: 'post', 
39             data: data,
40             success : function(response) {
41                 _self.back();
42             }
43         });    
44     },

　　保存

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

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

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

 1 //组装保存时传至服务端的数据  （当需要传输单据上别的数据的时候 可以在这个方法中组装数据传递到后端）
 2     assembleSaveData: function(action){
 3         var _self = this;
 4         var data =_self.prepareParam(action + 'Action');
 5         data.method = action;
 6         data.operateState = _self.getOperateState();
 7         data.model = shr.toJSON(_self.assembleModel()); 
 8 
 9         var model = data.model;
10         if(model != undefined && model != "") {
11             data.model = model.replace(/<presclass=\"textarea-format\">/gi,"").replace(/</pre>/gi,""); //抹掉因为在view界面中对富文本调.html()方法而带出的标签
12         }
13 
14         data.exitType = _self.getRecuritmentTypeDate();
15 
16         // relatedFieldId
17         var relatedFieldId = this.getRelatedFieldId();
18         if (relatedFieldId) {
19             data.relatedFieldId = relatedFieldId;
20         }
21         
22         return data;
23     },
24 //获取选中的出境类型 id
25     getRecuritmentTypeDate : function(){
26         var type = $("#exitType input[type='radio']:checked");
27         var recTypeId = $(type).attr("data-pk");
28         return recTypeId;
29     }

 1 /**
 2      * 单据保存  重写
 3      * @param {} event
 4      */
 5 saveAction: function(event) {
 6         var _self = this;
 7         if (_self.validate() && _self.verify()) {
 8             //_self.refreshNowBillState();
 9 
10             _self.doSave(event, 'save');
11 
12         }else{
13             if(_self != top){// in iframe
14                 shr.setIframeHeight(window.name);
15             } 
16                 
17         }    
18     },
19     /**
20      * 保存真正执行方法
21      */
22     doSave: function(event, action) {
23         var _self = this;
24         var data = _self.assembleSaveData(action);
25         
26         var target;
27         if (event && event.currentTarget) {
28             target = event.currentTarget;
29         }
30         
31         shr.doAction({
32             target: target,
33             url: _self.dynamicPage_url,
34             type: 'post', 
35             data: data,
36             success : function(response) {
37                 if (_self.isFromF7()) {
38                     // 来自F7，关闭当前界面，并给F7设置
39                     var dataF7 = {
40                         id : response,
41                         name : $.parseJSON(data.model).name
42                     };
43                     dialogClose(dataF7);
44                 } else {
45                     // 普通保存，去除最后一个面包屑，防止修改名字造成面包屑重复
46                     shrDataManager.pageNavigationStore.pop();
47                     _self.viewAction(response);
48                 }
49             }
50         });    
51     }

　　　　套打

　　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条）