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(/<pre\sclass=\\"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="" > 

rowList 为每次查询条数

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