金蝶s-HR-2019二开培训二期员工自助.pptx

1员工自助首页2019年7月HR产品事业部2纲要0102s-HR员工自助介绍s-HR实现卡片式开发预备知识s-HR实现卡片式开发流程0304常用开发实例3s-HR员工自助介绍4个人应用以数据查询展示为主，尽量少的后台数据交换要求页面样式美观要求使用图形化样式展示统计数据5s-HR实现卡片式开发预备知识6必备知识s-HR系统需要以下事项：Anguljs基础s-HR视图配置osf开发echars（图形开发）7s-HR实现卡片式开发流程8开发流程一览卡片模板配置配置卡片的相关信息：数据来源、htm片段等视图配置配置页面上使用哪些卡片及卡片的位置等页面展示Htm片段开发卡片的样式OSF开发卡片的数据来源Directive、controller开发整合卡片样式和数据来源9用管理员登陆shr系统，点击“开发平台—卡片模板配置—卡片模板配置”，进入配置页面。卡片模板配置10编码：模板编码配置名称：别名元素：全局唯一，angularjs定位的便签（涉及angularjs的知识）模板路径：htm片段，是模板的htm路径，一定要是htm后缀，不能是html后缀，客户自定义的htm片段要放在“eas安装目录\eas\server\deploy\easweb.ear\shr_web.war\addon\customer”目录下，如果没有这个目录，则手动创建一个。配置的模板路径必须自定义配置的模板路径必须以“/customer/”开头。异常模板路径：如果配置的服务发生内部错误，将展示这个路径下配置的相关页面。服务名称：必须是系统中配置的osf（可以用户自己新增的osf），实现取数逻辑并返回数据。（建议使用）外部处理类：如果不定义osf，可通过一个java类实现，这个类必须要实现com.kingdee.shr.manager.service.IExternalDataService接口。实现getExternalData方法：接口中类的定义：publicObjectgetExternalData(Mapparam)throwsEASBizException,BOSException;如果是web端服务，则对应的ctx为空。参数：外部传入的参数，必须是{key1:value1,key2:value2}的格式，可不填；如果填了这个参数，会在请求osf时把这个参数合并到osf请求的参数中。配置：用户不能修改扩展：用户的配置卡片模板配置11视图配置必须是“普通”视图引入外部必须的js，标准产品的制图工具为echarts，建议也使用echarts进行图形绘制自定义页面的js，必须引入。按要求开发，按样式引入。定义angularjs的app和rootController，建议不要修改自定义的模板元素12Htm开发13Directive开发Angularjs中的Directive，如下例子所示，红色的为模板配置中的“配置名称”及“元素”，建议按照下面的例子编写，只修改红色部分，不建议修改为其他配置。shrModule.directive('personInfo',function(GetConfigService,CommonService){varpersonInfo=CommonService.templateKeyConstant.PERSON_INFO;vartemplateUrl=GetConfigService.getTemplateUrl(personInfo);return{restrict:'AE',replace:false,scope:true,templateUrl:templateUrl,link:functionpostLink(scope,iElement,iAttrs){if(templateUrl.indexOf('common_error.htm')>-1){varpromise=GetConfigService.getConfig(personInfo);promise.then(function(data){CommonService.commonHandler(scope,data);});}}}});14controller开发控制器的开发为前端数据的获取、改变逻辑，通过与osf的交互从shr系统中获取数据。并控制着页面的逻辑。（建议了解angularjs知识）。模板配置中配置的osf返回的结果以json格式保存在$scope.result中，配置的信息保存在$scope.configData中，模板路径保存在。如果需要再次请求服务器，可以通过以下代码请求相关osf。promise=GetOSFService.getOSF({orgId:$scope.orgId},"getResignRateService");promise.then(function(data){请求成功后执行的代码},function(data){请求失败后执行的代码});15常用开发实例16隐藏卡片把视图中的配置内容复制到扩展，删除相应的元素。例子：删除员工结构主题中的性别结构分析。1、找到员工自助主页的视图（shr.perself.homepage）：17隐藏卡片2、在扩展视图中删除性别结构的标签：18新增卡片如果客户需要添加个性化的分析结构，可二开一个新的卡片。具体流程如第一部分所示。1、卡片模板配置，配置自定义的模板：相应目录加入自定义的htm和js卡片模板对应路径视图配置标签名称Directive指令osf名称19新增卡片1、8.5版本中，员工自助加入了前端缓存，必须先在{EAS安装目录}\eas\server\deploy\easweb.ear\shr_web.war\addon\perself\web\webviews\framework\js\shrApp.js文件中加入缓存key加入自定义缓存，建议与卡片模板配置的元素一致20新增卡片2、视图配置，在相关页面加入自定义的模板：Directive要在Controller前引入框架基本js和css，不要删除自定义的卡片，要与卡片模板配置中的元素一致21新增卡片3、Htm开发：根据页面设置开发页面。注意要加入controller。定义控制器的名称22新增卡片4、Directive开发：复制原始页面Directive到目录，添加自己的Directive。注意要与卡片模板配置中的配置名称、元素中的值一致。指令名称，根据angularjs规则通过卡片模板配置元素得到前端缓存key23新增卡片5、Controller开发：复制原始页面Controller到目录，添加自己的Controller。注意要与页面中