帮助票据前端开发

票据系统前期的前端开发使用的开发工具是WebStorm，当然也可以直接使用eclipse，这里简单介绍WebStorm使用：202030天试用期，完成后，再把系统时间改回去，这样就能长期使用了。2、安装Slik-Subversion；安装完成后，在webstorm中设置Usecommandline，如下图；2、点击WebStorm的菜单VCS->CheckoutfromVersionControl->Subversion获取SVN 1、在WebStorm中自定义工程名nbmsui-busi,nbmsui-cust,nbmsui-rgct，分别开发业务管理、客户管理、电票公共管理，工程都依赖scube_ui包；如果是eclipse，scube_ui放在webapp根 mon.jsjs（公共校验方法等3、以e_discount_apply_module为例，此文件夹下开发电票贴现申请的功能：2)e_discount_apply_module/html/discount下的html为嵌入主页面的业务组件；3)e_discount_apply_module/jseDiscount_module.jsjscontrollersjs文件中；这是常用开发模式。通过统一认证系统地址登录，可所有模块的菜单，菜单、数据字典都是通过读数据库表获取，菜单读表,FUNC_INFO，数据字典读表BD_DATA_DICTIONARY。config.jsAPP表，各应用的端口和名称要与APP表中保持一致，如下图APP统一认证系统的地址，即就可以打开登录界面，登录后就能访mock不需要连，前提是要使用WebStorm，需要将模拟数据写在根的data.json（即scube_ui外面的data.json）中，菜单、数据字典都是通过读前端文件获取，菜单读scube_ui/data.json,数据字典读config.jsscube_ui外面的_REQUEST_DSSIGN=修改scube_ui里面的_REQUEST_DSSIGN=WebStorm中打开scube_ui/index.html,点击右上角的浏览器图标就能在对应浏览器打开登录界面（默认端63342）如下图：common需要连，以客户管理模块为例config.jsscube_ui外面的_REQUEST_DSSIGN=_HTTP_IP_PORT='注：nbms-cust是客户管理模块应用名,18089修改scube_ui里面的_HTTP_IP_PORT='';//统一认证系统服务地_REQUEST_DSSIGN='mock'时，菜单、数据字典都是通过读前端文件获取，菜单读scube_ui/data.json，数据字典读dictionary.json;_REQUEST_DSSIGN='common'时，菜单、数据字典都是通过读数据库表来获取，菜单读 通过浏览器可打开登录界面，登录后只通过读数据库表获取菜单时，涉及表、FUNC_INFO；scube_ui/data.json。 命名规则再新建 html和js,在下新建controller ，html下新建主页面xx_module.html文件2、在scube_ui/data.json的相应位置新增json 1、在x_xx_xxx_module/js 下新建xx_module.js，内容固定，只要按需增加路由器及其一一对应的控制器，模块名称必须唯一（即下面的pDiscountModule须在系统中唯一）；2、x_xx_xxx_module/xx_module.html主页内容固定，只要按需增加业务cssjs3、开发controllers/xx_controller.js具体开发格式如上图所示，需要注意的是xx_controller.js控制器中定义的xxController（如上图前对{if(res.errorCode"SUC"//后端返回String或Integerres.contextData.value//后端返回Page对象，前端通过res.contextData.records//后端返回其他对象，前端通过res.contextDataelse{//}获取数据字典有两种模式前端文件和数据库表如果是前端文件dictionary.json,更新scube_ui mon/runModule.js的[window.dictionary=originObject.dictionary;]这行代码如果是数据库表的模式，只需取消这行代码的注释即可；票据系统的数据字典目前已改用数据库表模dictionary为对应的dictCode如果是通过数据库表，则在BD_DATA_DICTIONARY表中数据字典，在控件上设置dictionary为对应dict_code值；js框提示成功,失败$common.get_tipDialog('提交失败'确认$common.get_tipDialog('确定删除吗！''showTip').then(}//js定义conf$scope.conf=pageNo:pageSize:$scope.button_onClick=function()//分if(newVal!==oldVal)queryTable();//queryTable()newVal修改scube_ui外面的config.js：vartable_pageSizeOptions,[,{//弹出层某按钮的点击//js逻辑放到单独的controllertestController($scope,dialogScope,$common);//在testController中就可以使用$scope,dialogScope定义对dialogScope的作用域是当前弹出层，只要弹出层关闭则dialogScope定义的对象和方法都，这样处理dialogScope定义；$scope的作用域是当前全局函数;4.$rootScope的作用域是当前module;5.jsjs场景：将查询列表中某条记录对象给某个js对象；内容，左变右不变：地址，左变右也变遮罩层（避免重复提交jsProgressbar.show({barId:'save'});//js调用前显示遮罩层，save指按钮控件的ht-id1）请求完成，台弹出成功或异常信息提示框之前必须关闭遮罩层，代码如下//这里的save指按钮的ht-2）js校验弹出提示框或returnsetTimeout(function()//1确认框本身就可以防止重复提交（比如删除按钮，如果有“确认删除吗？”这样的确认框，就在validate.json中添加验证规则（如上图ht-formname（这里myForm自定义需要验证的字段控件上设置相应属性reg-exp}if($.doValidate("myForm")&&}校验（比如验证非空）；其他没法按框架模式校验的，比如业务上的校验，可写入自定义方法change在ht-input-extenton-change="testChange"，js中定义方法ht-selectchange//注：先执行change，完成后，才把新值赋给控件，如果要取新值就用2、在控件上设置ht-id="testId"，js//注：通过ht-id定义时，如果要给界面上某字段赋值，则需要写在$scope.$apply里，否则}日期控件的change注：不建议使用日期控件的change（存在缺陷：第一次点击当天无法触发change；日不变的情况下翻月或翻年也无法触发change）ng-model="searchForm.applyDate"ht-id="applyDate"></ht-}其他控件的change//注：通过ht-id定义时，如果要给界面上某字段赋值，则需要写在$scope.$apply里，否则}onClick//注：通过ht-id定义时，如果要给界面上某字段赋值，则需要写在$scope.$apply里，否则}上图配置意思是在main.html中引入inner1.html和注：被引入的html文件是不含html的main.html2、datasource属性的值自定义（3、selected属性的值自定义（5、ht是分页1、定义conf对象$scope.testConf102、定义datasource对象$scope.testDataSource,将返回的数据集赋给3、定义selected对象$scope.testSelected,勾选的记录都会被保存到$scope.testSelected.select"""""多行文本输入框（height属性设置框高""1、edit-typedate;3、分别通过设置lower-date-id、high-date-id""下拉框（静态"{"dictName":客户类型"dictCode":"custType","dataItems":[]}下拉框（动态<ht-selectname="业务属性"ng-model="xx.xx"on-change="busiAttrChange"dataoption,datatrsoption分别对应键、值；从查得数据集赋值给筛选框（列表结构展示<ht-input-extentname="贴出人全称"ng-model="xx.custName"$scope.custNameContenturl:"接口类/方法名",//urlextentColumn:"custName",//将返回的custName列赋值给输入$scope.custNameContent.param={筛选框（树状结构展示<ht-input-extentname="实际投向行业"ng-model="xx.actuallyIndustryName"$scope.actuallyIndustryContenturl:"接口类/方法名",//urlextentColumn:"actuallyIndustry",//将返回的actuallyIndustry列赋值给输入1、数据源从获取<ht-radioht-id="feeType"name=收费类型"ng-model="searchForm.feeType"datasource="selectSource"datatrsoption="value"dataoption="key"></ht-radio>需在js中调获取数据集赋给<ht-checkboxht-id="busi"name="业务"ng-model="searchForm.busi"js中给$scope.selectSource.ds赋值，如：1、dataoption用于存放传给的值，datatrsoption用于显示名1、查询、重置按钮设为蓝色样式并居中（ht-button-group上设置class="center"ht-button上设置2、js逻辑如下：$scope.reset_onClick=$scope.searchForm=<ht-filetype="upload"option="uploadoption"></ht-$scope.uploadoption={ {name:'contractId',value:{name:'topBranchNo',value:{name:'branchNo',value:{name:'operatorNo',value: end{name:'callback',value:callbackFun:console.log("res:"+res+"status:}<ht-filetype="download"option="downloadoption"></ht-$scope.downloadoption={ {name:'FileUrl',value:return{name:'genFileName',value:return end{name:'callback',value:{name:'Authorization',value:window.authorization||]<ht-filetype="upload"option="exceluploadoption"name="导入"></ht-$scope.exceluploadoption={ {name:'contractId',value:{name:'topBranchNo',value:{name:'branchNo',value:{name:'operatorNo',value: end{name: