幫助票據(jù)前端開發(fā)

票據(jù)系統(tǒng)前期的前端開發(fā)使用的開發(fā)工具是WebStorm，當(dāng)然也可以直接使用eclipse，這里簡單介紹WebStorm使用：202030天試用期，完成后，再把系統(tǒng)時間改回去，這樣就能長期使用了。2、安裝Slik-Subversion；安裝完成后，在webstorm中設(shè)置Usecommandline，如下圖；2、點(diǎn)擊WebStorm的菜單VCS->CheckoutfromVersionControl->Subversion獲取SVN 1、在WebStorm中自定義工程名nbmsui-busi,nbmsui-cust,nbmsui-rgct，分別開發(fā)業(yè)務(wù)管理、客戶管理、電票公共管理，工程都依賴scube_ui包；如果是eclipse，scube_ui放在webapp根 mon.jsjs（公共校驗(yàn)方法等3、以e_discount_apply_module為例，此文件夾下開發(fā)電票貼現(xiàn)申請的功能：2)e_discount_apply_module/html/discount下的html為嵌入主頁面的業(yè)務(wù)組件；3)e_discount_apply_module/jseDiscount_module.jsjscontrollersjs文件中；這是常用開發(fā)模式。通過統(tǒng)一認(rèn)證系統(tǒng)地址登錄，可所有模塊的菜單，菜單、數(shù)據(jù)字典都是通過讀數(shù)據(jù)庫表獲取，菜單讀表,FUNC_INFO，數(shù)據(jù)字典讀表BD_DATA_DICTIONARY。config.jsAPP表，各應(yīng)用的端口和名稱要與APP表中保持一致，如下圖APP統(tǒng)一認(rèn)證系統(tǒng)的地址，即就可以打開登錄界面，登錄后就能訪mock不需要連，前提是要使用WebStorm，需要將模擬數(shù)據(jù)寫在根的data.json（即scube_ui外面的data.json）中，菜單、數(shù)據(jù)字典都是通過讀前端文件獲取，菜單讀scube_ui/data.json,數(shù)據(jù)字典讀config.jsscube_ui外面的_REQUEST_DSSIGN=修改scube_ui里面的_REQUEST_DSSIGN=WebStorm中打開scube_ui/index.html,點(diǎn)擊右上角的瀏覽器圖標(biāo)就能在對應(yīng)瀏覽器打開登錄界面（默認(rèn)端63342）如下圖：common需要連，以客戶管理模塊為例config.jsscube_ui外面的_REQUEST_DSSIGN=_HTTP_IP_PORT='注：nbms-cust是客戶管理模塊應(yīng)用名,18089修改scube_ui里面的_HTTP_IP_PORT='';//統(tǒng)一認(rèn)證系統(tǒng)服務(wù)地_REQUEST_DSSIGN='mock'時，菜單、數(shù)據(jù)字典都是通過讀前端文件獲取，菜單讀scube_ui/data.json，數(shù)據(jù)字典讀dictionary.json;_REQUEST_DSSIGN='common'時，菜單、數(shù)據(jù)字典都是通過讀數(shù)據(jù)庫表來獲取，菜單讀 通過瀏覽器可打開登錄界面，登錄后只通過讀數(shù)據(jù)庫表獲取菜單時，涉及表、FUNC_INFO；scube_ui/data.json。 命名規(guī)則再新建 html和js,在下新建controller ，html下新建主頁面xx_module.html文件2、在scube_ui/data.json的相應(yīng)位置新增json 1、在x_xx_xxx_module/js 下新建xx_module.js，內(nèi)容固定，只要按需增加路由器及其一一對應(yīng)的控制器，模塊名稱必須唯一（即下面的pDiscountModule須在系統(tǒng)中唯一）；2、x_xx_xxx_module/xx_module.html主頁內(nèi)容固定，只要按需增加業(yè)務(wù)cssjs3、開發(fā)controllers/xx_controller.js具體開發(fā)格式如上圖所示，需要注意的是xx_controller.js控制器中定義的xxController（如上圖前對{if(res.errorCode"SUC"http://后端返回String或Integerres.contextData.value//后端返回Page對象，前端通過res.contextData.records//后端返回其他對象，前端通過res.contextDataelse{//}獲取數(shù)據(jù)字典有兩種模式前端文件和數(shù)據(jù)庫表如果是前端文件dictionary.json,更新scube_ui mon/runModule.js的[window.dictionary=originObject.dictionary;]這行代碼如果是數(shù)據(jù)庫表的模式，只需取消這行代碼的注釋即可；票據(jù)系統(tǒng)的數(shù)據(jù)字典目前已改用數(shù)據(jù)庫表模dictionary為對應(yīng)的dictCode如果是通過數(shù)據(jù)庫表，則在BD_DATA_DICTIONARY表中數(shù)據(jù)字典，在控件上設(shè)置dictionary為對應(yīng)dict_code值；js框提示成功,失敗$common.get_tipDialog('提交失敗'確認(rèn)$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,[,{//彈出層某按鈕的點(diǎn)擊//js邏輯放到單獨(dú)的controllertestController($scope,dialogScope,$common);//在testController中就可以使用$scope,dialogScope定義對dialogScope的作用域是當(dāng)前彈出層，只要彈出層關(guān)閉則dialogScope定義的對象和方法都，這樣處理dialogScope定義；$scope的作用域是當(dāng)前全局函數(shù);4.$rootScope的作用域是當(dāng)前module;5.jsjs場景：將查詢列表中某條記錄對象給某個js對象；內(nèi)容，左變右不變：地址，左變右也變遮罩層（避免重復(fù)提交jsProgressbar.show({barId:'save'});//js調(diào)用前顯示遮罩層，save指按鈕控件的ht-id1）請求完成，臺彈出成功或異常信息提示框之前必須關(guān)閉遮罩層，代碼如下//這里的save指按鈕的ht-2）js校驗(yàn)彈出提示框或returnsetTimeout(function()//1確認(rèn)框本身就可以防止重復(fù)提交（比如刪除按鈕，如果有“確認(rèn)刪除嗎？”這樣的確認(rèn)框，就在validate.json中添加驗(yàn)證規(guī)則（如上圖ht-formname（這里myForm自定義需要驗(yàn)證的字段控件上設(shè)置相應(yīng)屬性reg-exp}if($.doValidate("myForm")&&}校驗(yàn)（比如驗(yàn)證非空）；其他沒法按框架模式校驗(yàn)的，比如業(yè)務(wù)上的校驗(yàn)，可寫入自定義方法change在ht-input-extenton-change="testChange"，js中定義方法ht-selectchange//注：先執(zhí)行change，完成后，才把新值賦給控件，如果要取新值就用2、在控件上設(shè)置ht-id="testId"，js//注：通過ht-id定義時，如果要給界面上某字段賦值，則需要寫在$scope.$apply里，否則}日期控件的change注：不建議使用日期控件的change（存在缺陷：第一次點(diǎn)擊當(dāng)天無法觸發(fā)change；日不變的情況下翻月或翻年也無法觸發(fā)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,將返回的數(shù)據(jù)集賦給3、定義selected對象$scope.testSelected,勾選的記錄都會被保存到$scope.testSelected.select"""""多行文本輸入框（height屬性設(shè)置框高""1、edit-typedate;3、分別通過設(shè)置lower-date-id、high-date-id""下拉框（靜態(tài)"{"dictName":客戶類型"dictCode":"custType","dataItems":[]}下拉框（動態(tài)<ht-selectname="業(yè)務(wù)屬性"ng-model="xx.xx"on-change="busiAttrChange"dataoption,datatrsoption分別對應(yīng)鍵、值；從查得數(shù)據(jù)集賦值給篩選框（列表結(jié)構(gòu)展示<ht-input-extentname="貼出人全稱"ng-model="xx.custName"$scope.custNameContenturl:"接口類/方法名",//urlextentColumn:"custName",//將返回的custName列賦值給輸入$scope.custNameContent.param={篩選框（樹狀結(jié)構(gòu)展示<ht-input-extentname="實(shí)際投向行業(yè)"ng-model="xx.actuallyIndustryName"$scope.actuallyIndustryContenturl:"接口類/方法名",//urlextentColumn:"actuallyIndustry",//將返回的actuallyIndustry列賦值給輸入1、數(shù)據(jù)源從獲取<ht-radioht-id="feeType"name=收費(fèi)類型"ng-model="searchForm.feeType"datasource="selectSource"datatrsoption="value"dataoption="key"></ht-radio>需在js中調(diào)獲取數(shù)據(jù)集賦給<ht-checkboxht-id="busi"name="業(yè)務(wù)"ng-model="searchForm.busi"js中給$scope.selectSource.ds賦值，如：1、dataoption用于存放傳給的值，datatrsoption用于顯示名1、查詢、重置按鈕設(shè)為藍(lán)色樣式并居中（ht-button-group上設(shè)置class="center"ht-button上設(shè)置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="導(dǎo)入"></ht-$scope.exceluploadoption={ {name:'contractId',value:{name:'topBranchNo',value:{name:'branchNo',value:{name:'operatorNo',value: end{name: