薪酬管理系统前端部分是采用当时非常流程的EXTJS+jQuery实现，前些年，有非常多的项目采用extJs进行开发，其开发的界面效果好，运行速度快。但是随着这些年vue,react,elementUI等等前端框架的崛起，再加上extJS开始收费后，目前使用extJS进行项目的开发越来越少了。但不管采用哪种技术，核心是对业务的理解以及对技术的运用，至于选择哪种技术我个人认为匹配就行。薪酬管理系统使用当时最前沿的前端技术栈，提供各类经过各种项目验证的实用的组件方便在业务开发时的调用。薪酬管理系统的核心业务功能是实现薪资发放，在系统中管理与薪资构成相关的各种数据，感兴趣或者有相关技术能力的公司或个人可以基于此项目开发出适合自己的衍生项目。
本文档的作用只是起到抛砖引玉的作用，供广大爱好者或者相关行业工作者学习或借鉴。如果需要进行合作洽谈，请访问企起期官网。
bsm #项目根目录 ├── bsm #前端相关文件根目录 | ├── css #前端样式文件 | ├── data-backup #项目sql备份文件 | ├── html #html文件 | ├── icons #前端小图标 | ├── images #前端图片 | ├── index.html #入口html | ├── js #EXTJS模块 | ├── jsp #jsp页面 | ├── lib #前端第三方插件库 | ├── META-INF | ├── upload #上传文件目录 | └── uploadtemplate #导入excel模版文件目录 ├── docs #项目相关文档 | └── design #设计文档 ├── README.md #说明文档 └── 说明.txt #相关技术特点提醒
bsm\bsm ├── css #相关样式目录 | ├── default.css | ├── defaultbak.css | ├── file-upload.css #上传文件样式 | ├── icon.css #图标样式 | ├── login.css #登录页样式 | ├── main.css #主页面样式 | └── multiselect.css #多选样式 ├── html #各模块入口页面（主要是引入对应的js进行处理） | ├── AdjustSalaryQuery.html #调节工资查询入口页面 | ├── AreaManagement.html #地域管理入口页面 | ├── AssistantSalaryAdjustManagement.html #助理以上调节工资管理入口页面 | ├── BasicInfoManagement.html | ├── BranchPerformanceSalary.html | ├── CenterViewDetailSet.html | ├── CheckExcludeSet.html | ├── CustomQueryManagement.html #自定义查询入口页面 | ├── DepartmentCodeManagement.html #部门编码管理入口页面 | ├── DepartmentExpensesFieldManagement.html | ├── DepartmentManagement.html #部门管理入口页面 | ├── DepartmentPluralismManagement.html | ├── DepartmentSalaryAdjustManagement.html #部门分配调节工资入口页面 | ├── ExpenseFieldInfoManagement.html #营销费用指标项管理入口页面 | ├── ExpensesClaimBossApprove.html #营销费用报销部门领导审批页面 | ├── ExpensesClaimCenterApprove.html | ├── ExpensesClaimExport.html #营销费用查询导出入口页面 | ├── ExpensesClaimFinanceApprove.html #营销费用财务审批入口页面 | ├── ExpensesClaimQuery.html | ├── ExpensesClaimRequest.html | ├── ExpensesClaimSumQuery.html | ├── ExpensesFieldManagement.html | ├── ExpenseStatFieldManagement.html | ├── ExpenseStatManagement.html | ├── ExportTemplateManagement.html | ├── FieldInfoManagement.html #薪资项指标管理入口页面 | ├── GlobalParameterManagement.html #全局参数设置入口页面 | ├── LeaveManagement.html #考勤管理入口页面 | ├── LeaveQueryManagement.html #考勤查询入口页面 | ├── login.html #登录页面 | ├── logout.html #登出页面 | ├── main.html #主程序框架页面 | ├── MarkRateManagement.html #评分标准管理入口页面 | ├── OperationTypeParameterManagement.html #条线参数管理入口页面 | ├── PerformanceManagement.html #评分设置入口页面 | ├── PositionManagement.html #岗位性质管理入口页面 | ├── PrivateTaxRateManagement.html #个税标准管理入口页面 | ├── ProfileQuery.html #概览入口页面 | ├── QualificationManagement.html #从业资格管理入口页面 | ├── RunningCostClaimBossApprove.html #维持费用报销部门领导审批页面 | ├── RunningCostClaimFinanceApprove.html | ├── RunningCostClaimRequest.html | ├── RunningCostClaimSumQuery.html | ├── RunningCostFieldManagement.html | ├── RunningCostImportManagement.html | ├── RunningCostLimitQuery.html | ├── SalaryAdjustFieldManagement.html | ├── SalaryLevelManagement.html #工资序列管理入口页面 | ├── SmsSentResultManagement.html | ├── SmsTemplateManagement.html #短信模版管理入口页面 | ├── UserManagement.html #用户管理入口页面 | ├── VacationApproveManagement.html #请假审批管理入口页面 | ├── VacationDepartmentApprove.html #请假申请部门领导审批入口页面 | ├── VacationManagement.html #请假申请入口页面 | ├── VacationOfficeApprove.html | ├── VacationPresidentApprove.html | ├── VacationPresidentAssistantApprove.html | ├── VacationReportManagement.html | ├── VacationSmsTemplateManagement.html | ├── VacationTypeManagement.html | ├── VacationVerifyManagement.html | └── VirtualUserManagement.html #虚拟用户管理入口页面 ├── index.html #项目入口页面 ├── js | ├── ApplicationManifest.js | ├── bsm.action #各个业务模块前端action目录 | | ├── AreaManagementAction.js #地域管理的点击增加，修改，删除，查询按钮等等 | | ├── AreaManagementFormAction.js #地域管理的form点击提交，保存，加载信息等等 | | ├── CenterViewDetailSetAction.js | | ├── CenterViewDetailSetFormAction.js | | ├── CheckExcludeSetAction.js | | ├── CheckExcludeSetFormAction.js | | ├── CustomQueryManagementAction.js | | ├── CustomQueryManagementFormAction.js | | ├── DepartmentExpensesFieldManagementAction.js | | ├── DepartmentExpensesFieldManagementFormAction.js | | ├── DepartmentManagementAction.js | | ├── DepartmentManagementFormAction.js | | ├── DepartmentPluralismManagementAction.js | | ├── DepartmentPluralismManagementFormAction.js | | ├── ExpenseFieldInfoManagementAction.js | | ├── ExpenseFieldInfoManagementFormAction.js | | ├── ExpenseManagementAction.js | | ├── ExpensesFieldManagementAction.js | | ├── ExpensesFieldManagementFormAction.js | | ├── ExpenseStatFieldManagementAction.js | | ├── ExpenseStatFieldManagementFormAction.js | | ├── ExpenseStatManagementAction.js | | ├── ExpenseStatManagementFormAction.js | | ├── ExportTemplateManagementAction.js | | ├── ExportTemplateManagementFormAction.js | | ├── FieldInfoManagementAction.js #指标管理的点击各个按钮的触发事件 | | ├── FieldInfoManagementFormAction.js #添加指标，修改指标的相关事件 | | ├── LeaveManagementAction.js | | ├── LeaveManagementFormAction.js | | ├── MarkRateManagementAction.js | | ├── MarkRateManagementFormAction.js | | ├── OperationTypeParameterManagementAction.js | | ├── OperationTypeParameterManagementFormAction.js | | ├── PerformanceManagementAction.js | | ├── PerformanceManagementFormAction.js | | ├── PositionManagementAction.js | | ├── PositionManagementFormAction.js | | ├── PrivateTaxRateManagementAction.js | | ├── PrivateTaxRateManagementFormAction.js | | ├── QualificationManagementAction.js | | ├── QualificationManagementFormAction.js | | ├── RunningCostFieldManagementAction.js | | ├── RunningCostFieldManagementFormAction.js | | ├── RunningCostImportManagementAction.js | | ├── RunningCostImportManagementFormAction.js | | ├── SalaryLevelManagementAction.js | | ├── SalaryLevelManagementFormAction.js | | ├── SalaryManagementAction.js | | ├── SmsTemplateManagementAction.js | | ├── SmsTemplateManagementFormAction.js | | ├── UserManagementAction.js | | ├── UserManagementFormAction.js | | ├── VacationApproveManagementAction.js | | ├── VacationApproveManagementFormAction.js | | ├── VacationAttachmentFormAction.js | | ├── VacationManagementAction.js | | ├── VacationManagementFormAction.js | | ├── VacationReportManagementAction.js | | ├── VacationSmsTemplateManagementAction.js | | ├── VacationSmsTemplateManagementFormAction.js | | ├── VacationTypeManagementAction.js | | ├── VacationTypeManagementFormAction.js | | ├── VacationVerifyManagementAction.js | | ├── VacationVerifyManagementFormAction.js | | ├── VirtualUserManagementAction.js | | └── VirtualUserManagementFormAction.js | ├── bsm.run #每一个功能模块的js入口(html引入run,run引入对应view,view引入对应action) | | ├── AdjustSalaryQueryRun.js #调节工资查询 | | ├── AreaManagementRun.js | | ├── AssistantSalaryAdjustManagementRun.js | | ├── BasicInfoManagementRun.js | | ├── BranchPerformanceSalaryRun.js | | ├── CenterViewDetailSetRun.js | | ├── CheckExcludeSetRun.js | | ├── CustomQueryManagementRun.js | | ├── DepartmentCodeManagementRun.js | | ├── DepartmentExpensesFieldManagementRun.js | | ├── DepartmentManagementRun.js | | ├── DepartmentPluralismManagementRun.js | | ├── DepartmentSalaryAdjustManagementRun.js | | ├── ExpenseFieldInfoManagementRun.js | | ├── ExpensesClaimBossApproveRun.js | | ├── ExpensesClaimCenterApproveRun.js | | ├── ExpensesClaimExportRun.js | | ├── ExpensesClaimFinanceApproveRun.js | | ├── ExpensesClaimQueryRun.js | | ├── ExpensesClaimRequestRun.js | | ├── ExpensesClaimSumQueryRun.js | | ├── ExpensesFieldManagementRun.js | | ├── ExpenseStatFieldManagementRun.js | | ├── ExpenseStatManagementRun.js | | ├── ExportTemplateManagementRun.js | | ├── FieldInfoManagementRun.js | | ├── GlobalParameterManagementRun.js | | ├── LeaveManagementRun.js | | ├── LeaveQueryManagementRun.js | | ├── main.js | | ├── MarkRateManagementRun.js | | ├── OperationTypeParameterManagementRun.js | | ├── PerformanceManagementRun.js | | ├── PositionManagementRun.js | | ├── PrivateTaxRateManagementRun.js | | ├── ProfileQueryRun.js | | ├── QualificationManagementRun.js | | ├── RunningCostClaimBossApproveRun.js | | ├── RunningCostClaimFinanceApproveRun.js | | ├── RunningCostClaimRequestRun.js | | ├── RunningCostClaimSumQueryRun.js | | ├── RunningCostFieldManagementRun.js | | ├── RunningCostImportManagementRun.js | | ├── RunningCostLimitQueryRun.js | | ├── SalaryAdjustFieldManagementRun.js | | ├── SalaryLevelManagementRun.js | | ├── SmsSentResultManagementRun.js | | ├── SmsTemplateManagementRun.js | | ├── UserManagementRun.js | | ├── VacationApproveManagementRun.js | | ├── VacationDepartmentApproveRun.js | | ├── VacationManagementRun.js | | ├── VacationOfficeApproveRun.js | | ├── VacationPresidentApproveRun.js | | ├── VacationPresidentAssistantApproveRun.js | | ├── VacationReportManagementRun.js | | ├── VacationSmsTemplateManagementRun.js | | ├── VacationTypeManagementRun.js | | ├── VacationVerifyManagementRun.js | | └── VirtualUserManagementRun.js | ├── bsm.view #各个模块的UI页面，每个模块主要包括2个View(1个是查询加列表，另外一个是form) | | ├── AdjustSalaryQueryView.js | | ├── AreaManagementFormView.js | | ├── AreaManagementView.js | | ├── AssistantAdjustSalaryUploadView.js | | ├── AssistantSalaryAdjustManagementView.js | | ├── BasicInfoFormView.js | | ├── BasicInfoManagementView.js | | ├── BasicInfoUploadView.js | | ├── BranchPerformanceSalaryView.js | | ├── CenterViewDetailSetFormView.js | | ├── CenterViewDetailSetView.js | | ├── ChangePasswordView.js | | ├── CheckExcludeSetFormView.js | | ├── CheckExcludeSetView.js | | ├── CustomQueryManagementFormView.js | | ├── CustomQueryManagementView.js | | ├── DepartAdjustSalaryUploadView.js | | ├── DepartmentAdministratorManagementView.js | | ├── DepartmentCodeManagementView.js | | ├── DepartmentExpensesFieldManagementFormView.js | | ├── DepartmentExpensesFieldManagementView.js | | ├── DepartmentManagementFormView.js | | ├── DepartmentManagementView.js | | ├── DepartmentPluralismManagementFormView.js | | ├── DepartmentPluralismManagementView.js | | ├── DepartmentSalaryAdjustManagementView.js | | ├── DepartmentSalaryAdjustOperationView.js | | ├── DepartmentSalaryAdjustOthersView.js | | ├── DepartmentSalaryAdjustPromotionView.js | | ├── ExpenseFieldInfoManagementFormView.js | | ├── ExpenseFieldInfoManagementView.js | | ├── ExpensesClaimBossApproveView.js | | ├── ExpensesClaimCenterApproveView.js | | ├── ExpensesClaimExportView.js | | ├── ExpensesClaimFinanceApproveView.js | | ├── ExpensesClaimQueryView.js | | ├── ExpensesClaimRequestView.js | | ├── ExpensesClaimSumQueryView.js | | ├── ExpensesFieldManagementFormView.js | | ├── ExpensesFieldManagementView.js | | ├── ExpenseStatDetailUploadView.js | | ├── ExpenseStatFieldManagementFormView.js | | ├── ExpenseStatFieldManagementView.js | | ├── ExpenseStatManagementFormView.js | | ├── ExpenseStatManagementView.js | | ├── ExpenseTransferView.js | | ├── ExportTemplateManagementFormView.js | | ├── ExportTemplateManagementView.js | | ├── FieldInfoManagementFormView.js | | ├── FieldInfoManagementView.js | | ├── GlobalParameterManagementView.js | | ├── LeaveManagementFormView.js | | ├── LeaveManagementView.js | | ├── LeaveQueryManagementView.js | | ├── LeaveUploadView.js | | ├── MarkRateManagementFormView.js | | ├── MarkRateManagementView.js | | ├── OperationTypeParameterManagementFormView.js | | ├── OperationTypeParameterManagementView.js | | ├── PerformanceManagementFormView.js | | ├── PerformanceManagementView.js | | ├── PerformanceUploadView.js | | ├── PositionManagementFormView.js | | ├── PositionManagementView.js | | ├── PrivateTaxRateManagementFormView.js | | ├── PrivateTaxRateManagementView.js | | ├── ProfileQueryView.js | | ├── QualificationManagementFormView.js | | ├── QualificationManagementView.js | | ├── RunningCostClaimBossApproveView.js | | ├── RunningCostClaimFinanceApproveView.js | | ├── RunningCostClaimRequestView.js | | ├── RunningCostClaimSumQueryView.js | | ├── RunningCostFieldManagementFormView.js | | ├── RunningCostFieldManagementView.js | | ├── RunningCostImportManagementFormView.js | | ├── RunningCostImportManagementView.js | | ├── RunningCostImportUploadView.js | | ├── RunningCostLimitQueryView.js | | ├── SalaryAdjustFieldManagementView.js | | ├── SalaryAdjustSendToOperationView.js | | ├── SalaryAdjustSendToOthersView.js | | ├── SalaryAdjustSendToPromotionView.js | | ├── SalaryExportView.js | | ├── SalaryLevelManagementFormView.js | | ├── SalaryLevelManagementView.js | | ├── SalaryLevelUploadView.js | | ├── SalaryUploadView.js | | ├── SmsSentResultManagementView.js | | ├── SmsTemplateManagementFormView.js | | ├── SmsTemplateManagementView.js | | ├── UserChangeDetailView.js | | ├── UserDegreeDetailView.js | | ├── UserManagementFormView.js | | ├── UserManagementView.js | | ├── UserPositionDetailView.js | | ├── UserUploadView.js | | ├── VacationApproveManagementFormView.js | | ├── VacationApproveManagementInfoView.js | | ├── VacationApproveManagementView.js | | ├── VacationAttachmentFormView.js | | ├── VacationDepartmentApproveView.js | | ├── VacationManagementFormView.js | | ├── VacationManagementReApplyFormView.js | | ├── VacationManagementView.js | | ├── VacationReportManagementView.js | | ├── VacationSmsTemplateManagementFormView.js | | ├── VacationSmsTemplateManagementView.js | | ├── VacationTypeManagementFormView.js | | ├── VacationTypeManagementView.js | | ├── VacationVerifyManagementFormView.js | | ├── VacationVerifyManagementView.js | | ├── VirtualUserManagementFormView.js | | └── VirtualUserManagementView.js | ├── bsm.window #项目中有些需要弹出来的公共窗口 | | ├── ExpensesClaimApproveWindow.js | | ├── ExpensesClaimCentorViewWindow.js | | ├── ExpensesClaimFinanceApproveWindow.js | | ├── ExpensesClaimQueryResultWindow.js | | ├── ExpensesClaimRequestWindow.js | | ├── ExpensesClaimRequestWriteOffWindow.js | | ├── ExpenseStatFormulaSetWindow.js | | ├── FieldSelectWindow.js #指标选择window | | ├── FormulaSetWindow.js #公式设置window | | ├── RunningCostClaimApproveWindow.js | | ├── RunningCostClaimFinanceApproveWindow.js | | ├── RunningCostClaimQueryResultWindow.js | | ├── RunningCostClaimRequestWindow.js | | ├── SalaryLevelFormulaSetWindow.js #工资序列相关公式设置window | | └── SalaryLevelManagementWindow.js | ├── common #通用的前端js util | | ├── calendar-en.js | | ├── calendar-zh.js | | ├── calendar.js | | ├── contentpage.js | | ├── Cookies.js | | ├── ExtExtension.js | | ├── ExtOptimization.js | | ├── fileUpLoad.js | | ├── FileUploadField.js | | ├── json.js | | ├── json2xml.js | | ├── jsonpath.js | | ├── json_parse.js | | ├── LogWindow.js | | └── xml2json.js | ├── Ext.ux #extjs相关扩展 | | ├── TabCloseMenu.js | | ├── TabCloseMenu_Ch.js | | └── Util.js | ├── Ext.ux.Exporter | | └── ExportToExcel.js | ├── Ext.ux.form | | ├── DDView.js | | ├── ItemSelector.js | | ├── LovCombo.js | | └── MultiSelect.js | ├── plugins | | └── RowExpander.js ├── jsp #由于有些页面非常复杂，因此需要用jsp结合后端一起处理 | ├── Error.jsp | ├── ExpenseManagement | | ├── ExpenseManagement.jsp #营销费用管理 | | └── ExpenseManagementQuery.jsp #营销费用查询 | ├── ExpenseStatManagement | | └── ExpenseStatManagement.jsp #营销费用统计管理，列是动态列 | ├── ExportError.jsp | ├── Output.jsp | ├── SalaryManagement | | ├── SalaryManagement.jsp #工资发放管理，列是动态列 | | ├── SalaryManagementApprove.jsp #工资发放审批，列是动态列 | | ├── SalaryManagementAudit.jsp #工资发放复核，列是动态列 | | └── SalaryManagementQuery.jsp #工资查询，列是动态列
一个成熟的项目包含很多技术框架类的内容，例如组件库，自定义函数库，路由处理，多语言，UI样式等等。由于此薪酬管理系统是一个完整的项目，虽然业务功能点不多，但技术框架该有的基础功能已经基本涵盖（路由，cookie，图表，小组件等等），以下从二个功能点代码进行讲解，起到抛砖引玉的作用，完整的代码学习还需要自行在项目中或者自行debug进行学习。
一般大部分的应用系统都有登录功能，为了安全性或者不同角色使用不同的功能使用。互联网上的应用很多使用了第三方的一键登录，例如微信扫码登录、关注公众号登录、支付宝账号登录、短信息验证登录等等。但企业内部的应用系统，基本还是采用用户名及密码登录。前端代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>企起期 薪资系统演示</title>
<!-- EXTJS Styles -->
<link rel="stylesheet" type="text/css" href="../lib/extjs/resources/css/ext-all.css" />
<!-- END EXTJS Styles -->
<!-- Globle Default Styles -->
<link rel="stylesheet" type="text/css" href="../css/default.css" />
<!-- END Globle Default Styles -->
<!-- GC LIBS -->
<script type="text/javascript" src="../lib/extjs/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../lib/extjs/adapter/yui/ext-yui-adapter.js"></script>
<!-- END GC LIBS -->
<!-- EXTJS LIBS -->
<script type="text/javascript" language="javascript" src="../lib/extjs/ext-all-debug.js"></script>
<!-- END EXTJS LIBS -->
<script type="text/javascript" src="../js/common/json.js"></script>
<link rel="stylesheet" type="text/css" href="../css/login.css" />
<SCRIPT language="JavaScript">
function doKeyDown(e)
{
//alert('enter');
var key;
if(window.event) // IE
{
key = e.keyCode
}
else if(e.which) // Netscape/Firefox/Opera
{
key = e.which
}
//alert(key);
if (key === 13){
login_onclick();
}
}
function login_onclick()
{
try {
if (document.loginForm.userid.value == "" || document.loginForm.userid.value == null) {
window.alert("请输入用户名!");
return false;
}
else
if (document.loginForm.password.value == "" || document.loginForm.password.value == null) {
window.alert("请输入密码!");
return false;
}
var loginMask = new Ext.LoadMask(Ext.getBody(), { //后台处理时等待效果
msg: '系统登录 ... ',
removeMask: true //完成后移除
});
loginMask.show(); //显示
Ext.Ajax.request({
url: '../system/operation/UserManagement.action',
method: 'POST',
params:{intent:'doLogin',data:json2string({'USERID':document.loginForm.userid.value,'PASSWORD':document.loginForm.password.value})},
success: function (response, options) {
var jsonObjLogin = Ext.util.JSON.decode(response.responseText);
//alert(jsonObjLogin);
if (jsonObjLogin.MESSAGE=="OK") {
loginMask.hide();
window.location.replace("main.html");
} else {
Ext.Msg.alert("登录失败!", "错误信息:" + jsonObjLogin.MESSAGE);
loginMask.hide();
}
},
failure: function () {
Ext.MessageBox.alert('登录失败', '对不起!客户端错误，请重试！');
loginMask.hide();
}
});
//window.loginForm.submit();
}catch(ex){
alert(ex);
}
}
Ext.onReady(function(){
});
</SCRIPT>
</head>
<body class="login">
<div class="pageHead">
<a href=""><img style="width:500px;" src="../images/logo.png"/></a>
</div>
<div class="login-box-wrap">
<div class="login-box">
<form name="loginForm" method="post" onkeydown='doKeyDown(event)'>
<dl class="form cf">
<dt>员工号:</dt>
<dd><input name="userid" type="text" class="text" onmouseover="this.focus();" onfocus="this.select();"></dd>
<dt>密 码:</dt>
<dd><input name="password" type="password" class="text" onmouseover="this.focus();" onfocus="this.select();"></dd>
<dd>
<input class="x-btn-text" type="button" value="登录" onclick="login_onclick()"/>
<input class="x-btn-text" type="reset" value="重置"/>
</dd>
</dl>
</form>
</div>
</div>
</body>
</html>页面效果如下：
以上代码包含了登录页面的布局和逻辑。首先在<head>标签中引入ext-all.css以及default.css，再然后引入yui-utilities.js以及ext-yui-adapter.js,这是为了使得extjs中使用Yahoo UI框架的功能和组件。在然后引入ext-all-debug.js，此为extjs库，引入debug版本是为了方便调试的时候用。最后在<head>中引入了json.js以及login.css，其中json.js是为了进行前端json数据的处理，login.css是登录页面相关的样式，例如背景图等等。
<SCRIPT language="JavaScript">标签内是登录页面所需要调用的函数:
doKeyDown: 如果发现key是回车键，则调用对应的登录方法，否则不进行任何动作。这是为了方便使用人员，在录入完用户名和密码后，直接点击回车键进行登录操作。
login_click:当进行登录操作时，首先判断用户名和密码是否输入，如果没有输入，则给出对应的提醒并退出。如果前端校验无误，则通过Ext的组件显示loading遮罩层，同时通过Ext的Ajax请求，进行登录判断。登录成功后跳转到main.html页面，否则给出对应的提醒，并隐藏遮罩层。
<body>标签主要放的是登录页面需要展示的内容，例如logo图片，员工号机密码，登录按钮重置按钮等等。
薪资最重要的组成部分就是各个工资项，有的工资项存在公式，有的工资项的计算规则特别复杂需要单独写程序进行处理。由于薪资的组成随着时间的变化会产生一定的调整，因此工资项应该是动态可变的。为了实现薪资项的动态可变，开发指标管理对工资项进行维护，当薪资一个工资项时，会在对应的物理表上增加一个字段，当删除一个工资项时，同时也会在对应的数据库表中删除一个字段。
指标维护的入口视图如下：
//define naming space
Ext.namespace('bsm.view');
//Do not define when it is allready there
if (!bsm.view.FieldInfoManagementView || refresh) {
//import
require('SearchBar.js', {basedir: '../js/etc.widget',
nocache: true,reload: true});
//class definition
Ext.log("class: bsm.view.FieldInfoManagementView");
bsm.view.FieldInfoManagementView = function(config) {
Ext.applyIf(this, config);
this.initUIComponents();
bsm.view.FieldInfoManagementView.superclass.constructor.call(this);
};
//class extension
Ext.log("FieldInfoManagementView extends: Ext.Panel");
Ext.extend(bsm.view.FieldInfoManagementView, Ext.Panel, {
_txtSearch:null,
initUIComponents : function() {
Ext.log("start: FieldInfoManagementView initUIComponents");
Ext.QuickTips.init();
//turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'qtip';
this._txtSearch= new Ext.FormPanel({
height: 20,
baseCls: 'x-plain',
bodyStyle: 'padding:0px',
style: {
"margin-left": "0px",
"margin-top": "0px"
},
defaults: {
width: 150,
height: 10
},
defaultType: 'textfield',
items: [
{
msgTarget:'qtip',
hideLabel:true,
allowBlank: false,
blankText: 'Search keyword could not be empty!',
listeners: {
"specialkey": {
fn: function(thisobj,event){
var keycode = event.getKey();
if(keycode==event.ENTER){
//this._actionSearch();
}
},
scope:this
}
}
}]
});
this.tbar=[{
iconCls: 'refresh',
text: '刷新',
name: 'refreshBtn',
listeners: {
"click":function(){this.panel_body_grid.getStore().load()}.createDelegate(this)
}
},{
iconCls: 'view',
text: '查看',
handler: function(){this._view();}.createDelegate(this)
},
{
iconCls: 'add',
text: '添加',
handler: function(){this._add();}.createDelegate(this)
},
{
iconCls: 'edit',
text: '编辑',
handler: function(){this._edit();}.createDelegate(this)
},
{
iconCls: 'delete',
text: '删除',
handler: function(){this._delete();}.createDelegate(this)
},
{
iconCls: 'excel',
text: '导出Excel',
handler: function(){
this._doExport(this);
}.createDelegate(this)
},
{xtype:'tbfill'}
];
this.panel_body_grid= new Ext.grid.GridPanel({
//xtype: 'grid',
//height: 260,
//frame:true,
border:false,
deferRowRender:false,
stripeRows:true,
autoScroll:true,
cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({
header : "序号",
width : 40
}),
{
header: "指标编码",
width: 100,
sortable: true,
dataIndex: 'CODE'
}, {
header: "名称",
width: 100,
sortable: true,
dataIndex: 'NAME'
}, {
header: "数据类型",
width: 100,
sortable: true,
dataIndex: 'TYPENAME'
}, {
header: "是否可用",
width: 100,
sortable: true,
dataIndex: 'ENABLEFLAGNAME'
}, {
header: "是否可导出",
width: 100,
sortable: true,
dataIndex: 'CANEXPORTNAME'
}, {
header: "是否页面上显示",
width: 100,
sortable: true,
dataIndex: 'CANDISPLAYNAME'
}, {
header: "是否页面默认隐藏",
width: 120,
sortable: true,
dataIndex: 'ISDEFAULTHIDDENNAME'
}, {
header: "是否基础指标",
width: 100,
sortable: true,
dataIndex: 'ISBASICNAME'
}, {
header: "公式",
width: 160,
sortable: false,
dataIndex: 'FORMULANAME'
}, {
header: "进出属性",
width: 100,
sortable: true,
dataIndex: 'ISINCOMENAME'
}, {
header: "是否关联工资序列",
width: 120,
sortable: true,
dataIndex: 'ISRELATIONTOLEVELNAME'
}, {
header: "是否关联岗位性质",
width: 120,
sortable: true,
dataIndex: 'ISRELATIONTOPOSITIONNAME'
}, {
header: "是否关联到评分",
width: 120,
sortable: true,
dataIndex: 'ISRELATIONTOMARKNAME'
}, {
header: "是否和税务计算相关",
width: 130,
sortable: true,
dataIndex: 'ISRELATIONTOTAXNAME'
}, {
header: "是否四舍五入到整数",
width: 130,
sortable: true,
dataIndex: 'ISROUNDNAME'
}, {
header: "排序字段",
width: 100,
sortable: true,
dataIndex: 'ORDERID',
//align:"right"
css:'text-align:right;'
}, {
header: "描述",
width: 100,
sortable: true,
dataIndex: 'COMMENTS'
}
]),
store:new Ext.data.JsonStore({
autoLoad:true,
url:$AppManifest.getActionUrl('FieldInfoManagement','getFieldInfoList'),
baseParams:{data:json2string({FLAG:'all'})},
root: 'DATA.FIELDINFOLIST',
fields: [
{name:'CODE',mapping:'CODE',inJsSearch:false},
{name:'NAME',mapping:'NAME'},
{name:'TYPE',mapping:'TYPE'},
{name:'TYPENAME',mapping:'TYPENAME'},
{name:'LENGTH',mapping:'LENGTH'},
{name:'PRECISE',mapping:'PRECISE'},
{name:'ENABLEFLAG',mapping:'ENABLEFLAG'},
{name:'ENABLEFLAGNAME',mapping:'ENABLEFLAGNAME'},
{name:'CANEXPORT',mapping:'CANEXPORT'},
{name:'CANEXPORTNAME',mapping:'CANEXPORTNAME'},
{name:'CANDISPLAY',mapping:'CANDISPLAY'},
{name:'CANDISPLAYNAME',mapping:'CANDISPLAYNAME'},
{name:'ISBASIC',mapping:'ISBASIC'},
{name:'ISBASICNAME',mapping:'ISBASICNAME'},
{name:'COMMENTS',mapping:'COMMENTS',inJsSearch:false},
{name:'FORMULA',mapping:'FORMULA',inJsSearch:false},
{name:'FORMULANAME',mapping:'FORMULANAME',inJsSearch:false},
{name:'ISINCOME',mapping:'ISINCOME'},
{name:'ISINCOMENAME',mapping:'ISINCOMENAME'},
{name:'ISRELATIONTOLEVEL',mapping:'ISRELATIONTOLEVEL'},
{name:'ISRELATIONTOLEVELNAME',mapping:'ISRELATIONTOLEVELNAME'},
{name:'ISRELATIONTOPOSITION',mapping:'ISRELATIONTOPOSITION'},
{name:'ISRELATIONTOPOSITIONNAME',mapping:'ISRELATIONTOPOSITIONNAME'},
{name:'ISDEFAULTHIDDEN',mapping:'ISDEFAULTHIDDEN'},
{name:'ISDEFAULTHIDDENNAME',mapping:'ISDEFAULTHIDDENNAME'},
{name:'ISRELATIONTOTAX',mapping:'ISRELATIONTOTAX'},
{name:'ISRELATIONTOTAXNAME',mapping:'ISRELATIONTOTAXNAME'},
{name:'ORDERID',mapping:'ORDERID',type:'int',inJsSearch:false},
{name:'ISROUND',mapping:'ISROUND'},
{name:'ISROUNDNAME',mapping:'ISROUNDNAME'},
{name:'ISRELATIONTOMARK',mapping:'ISRELATIONTOMARK'},
{name:'ISRELATIONTOMARKNAME',mapping:'ISRELATIONTOMARKNAME'}
]
}),
viewConfig: {
forceFit:false
}
});
this.tbar.push(new etc.widget.SearchBar({grid:this.panel_body_grid,defaultSearchField:'NAME'}));
this.items=[this.panel_body_grid];
Ext.log("FieldInfoManagementView apply: rendering");
Ext.apply(this,
{
title:''
});
Ext.log("end: FieldInfoManagementView initUIComponents");
}//initUIComponents
,_doExport:function($this)
{
try {
$this.panel_body_grid.excelTitle='所有指标';
var vExportContent = $this.panel_body_grid.getExcelXml(1,true,true); //1表示从第1列开始，true表示包含隐藏列,false表示不包含没有选中的
var fd = Ext.get('echotecexcel');
if (!fd) {
fd = Ext.DomHelper.append(Ext.getBody(), {
tag : 'form',
method : 'post',
id : 'echotecexcel',
action : '../system/operation/ExportStrToExcel.action',
target : '_blank',
name : 'echotecexcel',
cls : 'x-hidden',
cn : [{
tag : 'input',
name : 'exportContent',
id : 'exportContent',
type : 'hidden'
},{
tag : 'input',
name : 'exportFileName',
id : 'exportFileName',
type : 'hidden'
}]
}, true);
}
fd.child('#exportContent').set({
value : vExportContent
});
fd.child('#exportFileName').set({
value : $this.panel_body_grid.excelTitle
});
fd.dom.submit();
} catch (e) {
alert(e);
}
}
});//end class extend
//add action module
Ext.log("include: bsm.action.FieldInfoManagementAction");
require('FieldInfoManagementAction.js', {
basedir: '../js/bsm.action',
nocache: true,
reload: true
});
Ext.override(bsm.view.FieldInfoManagementView, bsm.action.FieldInfoManagementAction);
}//end class include页面效果如下：
从以上代码可以看出，整个UI显示分成二个部分，第一部分为头部的tbar,第二部分为下方的列表。tbar中主要由左边的按钮区域以及右边的过滤区域组成。在以上代码的最后面引入了对应的FieldInfoManagementAction.js，点击tbar上的按钮将调用对应Action里面定义的方法。
点击添加按钮时，弹出新增指标的window，代码如下：
//define naming space
Ext.namespace('bsm.view');
//Do not define when it is allready there
if (!bsm.view.FieldInfoManagementFormView || refresh) {
require('FormulaSetWindow.js', {
basedir: '../js/bsm.window',
nocache: true,
reload: true
});
require('SalaryLevelFormulaSetWindow.js', {
basedir: '../js/bsm.window',
nocache: true,
reload: true
});
//class definition
Ext.log("class: bsm.view.FieldInfoManagementFormView");
bsm.view.FieldInfoManagementFormView = function(config) {
Ext.applyIf(this, config);
this.SALARYLEVELFORMULALIST=[];
this.initUIComponents();
bsm.view.FieldInfoManagementFormView.superclass.constructor.call(this);
};
//class extension
Ext.log("FieldInfoManagementFormView extends: Ext.Panel");
Ext.extend(bsm.view.FieldInfoManagementFormView, Ext.Panel, {
initUIComponents : function() {
Ext.log("start: FieldInfoManagementFormView initUIComponents");
var $this = this;
Ext.QuickTips.init();
//turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
//进出属性
var isIncomeStore = new Ext.data.JsonStore({
url:$AppManifest.getActionUrl('DictionaryManagement','getDictionaryName'),
baseParams:{data:json2string({KEYCOL:'TB_FIELD_INFO.ISINCOME'})},
root: 'DATA.ITEMLIST',
fields: [
{name:'isIncomeId',mapping:'COLVALUE',type: 'string'},
{name:'isIncomeName',mapping:'NAME',type:'string'}
]
});
isIncomeStore.load();
var comboIsIncome = new Ext.form.ComboBox({
name: "ISINCOME",
store: isIncomeStore,
editable:false,
fieldLabel:'进出属性',
displayField: "isIncomeName",
valueField: "isIncomeId",
triggerAction: 'all',
emptyText:'请选择...',
forceSelection:true,
allowBlank:false,
width:200,
readOnly:this.params.action=='view',
style:this.params.action=='view'?'background:silver':'background:white'
});
//字段数据类型
var typeStore = new Ext.data.JsonStore({
url:$AppManifest.getActionUrl('DictionaryManagement','getDictionaryName'),
baseParams:{data:json2string({KEYCOL:'TB_FIELD_INFO.TYPE'})},
root: 'DATA.ITEMLIST',
fields: [
{name:'typeId',mapping:'COLVALUE',type: 'string'},
{name:'typeName',mapping:'NAME',type:'string'}
]
});
typeStore.load();
var comboType = new Ext.form.ComboBox({
name: "TYPE",
store: typeStore,
editable:false,
fieldLabel:'数值类型',
displayField: "typeName",
valueField: "typeId",
triggerAction: 'all',
emptyText:'请选择...',
forceSelection:true,
allowBlank:false,
width:200,
readOnly:this.params.action=='view',
style:this.params.action=='view'?'background:silver':'background:white'
});
Ext.log("init FieldInfoManagementFormView: FieldInfoManagementView _dataForm");
this.dataForm = new Ext.FormPanel({
layout:'table',
layoutConfig:{columns:8},
buttonAlign:'right',
defaults: {labelWidth:'60px',bodyStyle:'padding:6px'},
collapsible: true,
autoScroll: true,
autoWidth:true,
autoHeight:true,
//defaults: {labelWidth: 100,readOnly:this.params.action=='view',style:this.params.action=='view'?'background:silver':'background:white'},
items:
[
{html:'指标编码',width:140},
{
xtype: 'textfield',
name:'CODE',
width: 200,
readOnly: false,
allowBlank:false,
readOnly:this.params.action=='edit'||this.params.action=='view',
style:this.params.action=='edit'||this.params.action=='view'?'background:silver':'background:white'
},
{html:' ',width:20,colspan:2},
{html:'名称',width:140},
{
xtype: 'textfield',
name:'NAME',
width: 200,
readOnly: false,
allowBlank:false,
readOnly:this.params.action=='view',
style:this.params.action=='view'?'background:silver':'background:white'
},
{html:' ',width:20,colspan:2},
{html:'数据类型',width:140},
comboType,
{html:' ',width:20,colspan:2},
{html:'是否可用',width:80},
{
xtype: 'checkbox',
name:'ENABLEFLAG',
width: 200,
checked:this.params.action=='add',
readOnly:this.params.action=='view',
style:this.params.action=='view'?'background:silver':'background:white'
},
{html:' ',width:20,colspan:2},
{html:'是否可导出',width:80},
{
xtype: 'checkbox',
name:'CANEXPORT',
width: 200,
checked:this.params.action=='add',
readOnly:this.params.action=='view',
style:this.params.action=='view'?'background:silver':'background:white'
},
{html:' ',width:20,colspan:2},
{html:'是否页面上显示',width:140},
{
xtype: 'checkbox',
name:'CANDISPLAY',
width: 200,
checked:this.params.action=='add',
readOnly:this.params.action=='view',
style:this.params.action=='view'?'background:silver':'background:white'
},
{html:' ',width:20,colspan:2},
{html:'是否页面默认隐藏',width:140},
{
xtype: 'checkbox',
name:'ISDEFAULTHIDDEN',
width: 200,
//checked:this.params.action=='add',
readOnly:this.params.action=='view',
style:this.params.action=='view'?'background:silver':'background:white'
},
{html:' ',width:20,colspan:2},
{html:'是否基础指标',width:140},
{
xtype: 'checkbox',
name:'ISBASIC',
width: 200,
checked:this.params.action=='add',
readOnly:this.params.action=='view',
style:this.params.action=='view'?'background:silver':'background:white'
},
{html:' ',width:20,colspan:2},
{html:'进出属性',width:80},
comboIsIncome,
{html:' ',width:20,colspan:2},
{html:'是否关联工资序列',width:140},
new Ext.form.Checkbox({
//xtype: 'checkbox',
name:'ISRELATIONTOLEVEL',
width: 200,
readOnly:this.params.action=='view',
style:this.params.action=='view'?'background:silver':'background:white',
listeners:{"check":function(obj,ischecked)
{
//Ext.log('ISRELATIONTOLEVEL onchange event');
if(ischecked)
{
//alert('ISRELATIONTOLEVEL checked');
$ExtUtil._panelFind("ISRELATIONTOPOSITION",$this.dataForm).setValue(false);
$ExtUtil._panelFind("ISRELATIONTOMARK",$this.dataForm).setValue(false);
$ExtUtil._panelFind("ISRELATIONTOPOSITION",$this.dataForm).readOnly = true;
$ExtUtil._panelFind("ISRELATIONTOPOSITION",$this.dataForm).addClass('background:silver');
$ExtUtil._panelFind("ISRELATIONTOMARK",$this.dataForm).readOnly = true;
$ExtUtil._panelFind("ISRELATIONTOMARK",$this.dataForm).addClass('background:silver');
}
else
{
//alert('ISRELATIONTOLEVEL unchecked');
$ExtUtil._panelFind("ISRELATIONTOPOSITION",$this.dataForm).readOnly = false;
$ExtUtil._panelFind("ISRELATIONTOPOSITION",$this.dataForm).addClass('background:white');
$ExtUtil._panelFind("ISRELATIONTOMARK",$this.dataForm).readOnly = false;
$ExtUtil._panelFind("ISRELATIONTOMARK",$this.dataForm).addClass('background:white');
}
}
}
}),
{html:' ',width:20,colspan:2},
{html:'是否关联岗位性质',width:140},
new Ext.form.Checkbox({
//xtype: 'checkbox',
name:'ISRELATIONTOPOSITION',
width: 200,
readOnly:this.params.action=='view',
style:this.params.action=='view'?'background:silver':'background:white',
listeners:{"check":function(obj, ischecked)
{
if(ischecked)
{
$ExtUtil._panelFind("ISRELATIONTOLEVEL",$this.dataForm).setValue(false);
$ExtUtil._panelFind("ISRELATIONTOLEVEL",$this.dataForm).readOnly = true;
$ExtUtil._panelFind("ISRELATIONTOLEVEL",$this.dataForm).addClass('background:silver');
}
else
{
$ExtUtil._panelFind("ISRELATIONTOLEVEL",$this.dataForm).readOnly = false;
$ExtUtil._panelFind("ISRELATIONTOLEVEL",$this.dataForm).addClass('background:white');
}
}
}
}),
{html:' ',width:20,colspan:2},
{html:'是否关联到评分',width:140},
{
xtype: 'checkbox',
name:'ISRELATIONTOMARK',
width: 200,
readOnly:this.params.action=='view',
style:this.params.action=='view'?'background:silver':'background:white'
},
{html:' ',width:20,colspan:2},
{html:'是否和税务计算相关',width:140},
{
xtype: 'checkbox',
name:'ISRELATIONTOTAX',
width: 200,
readOnly:this.params.action=='view',
style:this.params.action=='view'?'background:silver':'background:white'
},
{html:' ',width:20,colspan:2},
{html:'排序字段',width:80},
{
xtype: 'numberfield',
name:'ORDERID',
width: 200,
allowBlank:false,
readOnly:this.params.action=='view',
style:this.params.action=='view'?'background:silver':'background:white'
},
{html:' ',width:20,colspan:2},
{html:'是否四舍五入到整数',width:140},
{
xtype: 'checkbox',
name:'ISROUND',
width: 200,
readOnly:this.params.action=='view',
style:this.params.action=='view'?'background:silver':'background:white'
},
{html:' ',width:20,colspan:2},
{html:'描述',width:80},
{
xtype: 'textarea',
name:'COMMENTS',
width: 200,
readOnly:this.params.action=='view',
style:this.params.action=='view'?'background:silver':'background:white'
},
{html:' ',width:20,colspan:2},
{html:'公式',width:80},
{
xtype: 'textfield',
name:'FORMULANAME',
width: 350,
readOnly:true,
style:'background:silver'
},
{
xtype: 'button',
iconCls: 'search',
style: 'align:left',
hidden:this.params.action=='view',
handler:function(){
if($ExtUtil._panelFind("TYPE",$this.dataForm).getValue()!='1')
{
alert('只有数值型的才能设置派生公式');
return;
}
if($ExtUtil._panelFind("ISRELATIONTOLEVEL",$this.dataForm).checked==false)
{
var formulaSetWin = new bsm.window.FormulaSetWindow({
parentHandler:$this,
width:600,
height:460,
modal:true,
FORMULA:$ExtUtil._panelFind("FORMULA",$this.dataForm).getValue(),
FORMULANAME:$ExtUtil._panelFind("FORMULANAME",$this.dataForm).getValue(),
CODE:$ExtUtil._panelFind("CODE",$this.dataForm).getValue(),
ISRELATIONTOLEVEL:$ExtUtil._panelFind("ISRELATIONTOLEVEL",$this.dataForm).checked,
iconCls: 'window',
title: '普通公式设置',
closable: true,
draggable: true,
collapsible: true,
resizable:false,
y: 100,
layout: 'fit'
});
formulaSetWin.show(Ext.getBody());
}
else
{
var formulaSetWin = new bsm.window.SalaryLevelFormulaSetWindow({
parentHandler:$this,
width:600,
height:460,
modal:false,
iconCls: 'window',
title: '工资序列公式设置',
closable: true,
draggable: true,
collapsible: true,
resizable:false,
y: 100,
layout: 'fit'
});
formulaSetWin.show(Ext.getBody());
}
}.createDelegate(this)
},
{
xtype:'hidden',
name:'FORMULA'
},
{
xtype:'hidden',
name:'DOUPDATESALARYLEVEL',
value:'0' //默认是0,如果设置了公式，则变成1
},
{html:' ',width:20,colspan:4}
]
});
//alert(this.dataForm);
this.items=[this.dataForm];
var actions=[];
if (this.params.action=="add") {
actions.push({
text: '添加',
width: 180,
handler: this._add.createDelegate(this)
});
}
if (this.params.action == "edit") {
actions.push({
text: '保存',
width: 180,
handler: this._save.createDelegate(this)
});
}
actions.push(
{
text: '关闭',
width: 180,
handler:function(){
this.ownerCt.close();
}.createDelegate(this)
}
);
Ext.log("FieldInfoManagementFormView apply: rendering");
Ext.apply(this,
{
buttonAlign: 'center',
buttons:actions
}
);
Ext.log("FieldInfoManagementFormView end: initUIComponents");
}//initUIComponents
});//end class extend
//add form action
Ext.log("include: bsm.action.FieldInfoManagementFormAction");
require('FieldInfoManagementFormAction.js', {
basedir: '../js/bsm.action',
nocache: true,
reload: true
});
Ext.override(bsm.view.FieldInfoManagementFormView, bsm.action.FieldInfoManagementFormAction);
}//end class include页面效果如下：
以上代码的主要逻辑是为了实现添加指标的功能，以下是部分代码解释：
代码的头部引入了二个window,一个为FormulaSetWindow，另外一个为SalaryLevelFormulaSetWindow。从名称中可以看出这二个window的作用是进行公式设置，一个是普通公式的设置，另外一个是和工资序列级别相关的公式设置。
普通公式设置如下图：
与工资序列相关的公式设置如下图：
initUIComponents函数是对指标Form页面进行设置，从代码中可以看出，Form中包含的属性有指标编码、名称、进出属性、字段数据类型属性、是否可用、是否可导出、是否页面上显示、是否页面默认隐藏、是否基础指标、是否关联工资序列、是否关联岗位性质，是否关联到评分、是否和税务计算相关、排序字段、是否四舍五入到整数、描述、公式等等。每一个属性字段都对应一种UI展示，例如复选框，输入框，下拉框等等。
该代码的最后又引入了FieldInfoManagementFormAction.js，该Action对应的是此Form表单的相关触发操作，例如点击按钮，改变下拉框的事件等等。具体代码如下：
//define naming space
Ext.namespace('bsm.action');
//Do not define when it is allready there
if (!bsm.action.FieldInfoManagementFormAction) {
//mudule definition
Ext.log("module: bsm.action.FieldInfoManagementFormAction");
bsm.action.FieldInfoManagementFormAction = {
_add:function(){
/**
* 添加新的指标
*/
try {
if(this.dataForm.getForm().isValid())
{
var CODE = $ExtUtil._panelFind("CODE",this.dataForm).getValue();
var NAME = $ExtUtil._panelFind("NAME",this.dataForm).getValue();
var TYPE = $ExtUtil._panelFind("TYPE",this.dataForm).getValue();
var LENGTH = '';
var PRECISE = '';
if (TYPE=='1') //数值型
{
LENGTH = '18';
PRECISE = '2';
}
else if(TYPE=='2') //字符型
{
LENGTH = '300';
}
var ENABLEFLAG = $ExtUtil._panelFind("ENABLEFLAG",this.dataForm).checked?'1':'0';
var ISROUND = $ExtUtil._panelFind("ISROUND",this.dataForm).checked?'1':'0';
var CANEXPORT = $ExtUtil._panelFind("CANEXPORT",this.dataForm).checked?'1':'0';
var CANDISPLAY = $ExtUtil._panelFind("CANDISPLAY",this.dataForm).checked?'1':'0';
var ISBASIC = $ExtUtil._panelFind("ISBASIC",this.dataForm).checked?'1':'0';
var COMMENTS = $ExtUtil._panelFind("COMMENTS",this.dataForm).getValue();
var FORMULA = $ExtUtil._panelFind("FORMULA",this.dataForm).getValue();
var FORMULANAME = $ExtUtil._panelFind("FORMULANAME",this.dataForm).getValue();
var DOUPDATESALARYLEVEL = $ExtUtil._panelFind("DOUPDATESALARYLEVEL",this.dataForm).getValue();
var ISINCOME = $ExtUtil._panelFind("ISINCOME",this.dataForm).getValue();
var ISRELATIONTOLEVEL = $ExtUtil._panelFind("ISRELATIONTOLEVEL",this.dataForm).checked?'1':'0';
var ISRELATIONTOPOSITION = $ExtUtil._panelFind("ISRELATIONTOPOSITION",this.dataForm).checked?'1':'0';
var ISDEFAULTHIDDEN = $ExtUtil._panelFind("ISDEFAULTHIDDEN",this.dataForm).checked?'1':'0';
var ISRELATIONTOTAX = $ExtUtil._panelFind("ISRELATIONTOTAX",this.dataForm).checked?'1':'0';
var ORDERID = $ExtUtil._panelFind("ORDERID",this.dataForm).getValue();
var ISRELATIONTOMARK = $ExtUtil._panelFind("ISRELATIONTOMARK",this.dataForm).checked?'1':'0';
var json = window._http.etcpost({
activity:'FieldInfoManagement',
intent:'addFieldInfo',
data: {
CODE:CODE,
NAME:NAME,
TYPE:TYPE,
LENGTH:LENGTH,
PRECISE:PRECISE,
ENABLEFLAG:ENABLEFLAG,
CANEXPORT:CANEXPORT,
CANDISPLAY:CANDISPLAY,
ISBASIC:ISBASIC,
COMMENTS:COMMENTS,
FORMULA:FORMULA,
FORMULANAME:FORMULANAME,
ISINCOME:ISINCOME,
ISRELATIONTOLEVEL:ISRELATIONTOLEVEL,
ISRELATIONTOPOSITION:ISRELATIONTOPOSITION,
ISDEFAULTHIDDEN:ISDEFAULTHIDDEN,
ISRELATIONTOTAX:ISRELATIONTOTAX,
ORDERID:ORDERID,
ISROUND:ISROUND,
ISRELATIONTOMARK:ISRELATIONTOMARK,
DOUPDATESALARYLEVEL:DOUPDATESALARYLEVEL,
SALARYLEVELFORMULALIST:this.SALARYLEVELFORMULALIST
}
});
if(json.MESSAGE=="OK"){
alert("添加指标成功!");
//以下方法是模拟点击刷新按钮
this.parentHandler.getTopToolbar().items.get(0).fireEvent('click');
this.ownerCt.close();
}else{
alert(json.MESSAGE);
}
}
}
catch (e) {
Ext.logf("FieldInfoManagementFormAction err: {0},{1}", e.name, e.message);
}
},
_loadInfo:function($this) //查看和编辑指标时，加载指标信息
{
var viewSN = this.params.identification; //点击查看时传过来的指标的标识id
try{
Ext.logf("FieldInfoManagementFormAction _loadFieldInfoInfo({0})",viewSN);
window._http.etcpost({
activity:'FieldInfoManagement',
intent:'getFieldInfoInfo',
data:{
CODE:viewSN
}
},
function(json){
if(json.MESSAGE && json.MESSAGE!="OK"){
alert(json.MESSAGE);
return;
}
var data = json.DATA.FIELDINFOLIST[0];
$ExtUtil._panelFind("CODE",$this.dataForm).setValue(data.CODE);
$ExtUtil._panelFind("NAME",$this.dataForm).setValue(data.NAME);
$ExtUtil._panelFind("TYPE",$this.dataForm).setValue(data.TYPE);
//$ExtUtil._panelFind("LENGTH",$this.dataForm).setValue(data.LENGTH);
//$ExtUtil._panelFind("PRECISE",$this.dataForm).setValue(data.PRECISE);
if(data.ENABLEFLAG=='1')
{
$ExtUtil._panelFind("ENABLEFLAG",$this.dataForm).setValue(true);
}
else
{
$ExtUtil._panelFind("ENABLEFLAG",$this.dataForm).setValue(false);
}
if(data.ISROUND=='1')
{
$ExtUtil._panelFind("ISROUND",$this.dataForm).setValue(true);
}
else
{
$ExtUtil._panelFind("ISROUND",$this.dataForm).setValue(false);
}
if(data.CANEXPORT=='1')
{
$ExtUtil._panelFind("CANEXPORT",$this.dataForm).setValue(true);
}
else
{
$ExtUtil._panelFind("CANEXPORT",$this.dataForm).setValue(false);
}
if(data.CANDISPLAY=='1')
{
$ExtUtil._panelFind("CANDISPLAY",$this.dataForm).setValue(true);
}
else
{
$ExtUtil._panelFind("CANDISPLAY",$this.dataForm).setValue(false);
}
if(data.ISBASIC=='1')
{
$ExtUtil._panelFind("ISBASIC",$this.dataForm).setValue(true);
}
else
{
$ExtUtil._panelFind("ISBASIC",$this.dataForm).setValue(false);
}
$ExtUtil._panelFind("COMMENTS",$this.dataForm).setValue(data.COMMENTS);
$ExtUtil._panelFind("FORMULA",$this.dataForm).setValue(data.FORMULA);
$ExtUtil._panelFind("FORMULANAME",$this.dataForm).setValue(data.FORMULANAME);
$ExtUtil._panelFind("ISINCOME",$this.dataForm).setValue(data.ISINCOME);
if(data.ISRELATIONTOLEVEL=='1')
{
$ExtUtil._panelFind("ISRELATIONTOLEVEL",$this.dataForm).setValue(true);
}
else
{
$ExtUtil._panelFind("ISRELATIONTOLEVEL",$this.dataForm).setValue(false);
}
if(data.ISRELATIONTOPOSITION=='1')
{
$ExtUtil._panelFind("ISRELATIONTOPOSITION",$this.dataForm).setValue(true);
}
else
{
$ExtUtil._panelFind("ISRELATIONTOPOSITION",$this.dataForm).setValue(false);
}
if(data.ISDEFAULTHIDDEN=='1')
{
$ExtUtil._panelFind("ISDEFAULTHIDDEN",$this.dataForm).setValue(true);
}
else
{
$ExtUtil._panelFind("ISDEFAULTHIDDEN",$this.dataForm).setValue(false);
}
if(data.ISRELATIONTOTAX=='1')
{
$ExtUtil._panelFind("ISRELATIONTOTAX",$this.dataForm).setValue(true);
}
else
{
$ExtUtil._panelFind("ISRELATIONTOTAX",$this.dataForm).setValue(false);
}
$ExtUtil._panelFind("ORDERID",$this.dataForm).setValue(data.ORDERID);
if(data.ISRELATIONTOMARK=='1')
{
$ExtUtil._panelFind("ISRELATIONTOMARK",$this.dataForm).setValue(true);
}
else
{
$ExtUtil._panelFind("ISRELATIONTOMARK",$this.dataForm).setValue(false);
}
});
}catch(e){
alert(e);
}
},
_save:function(){
/**
* 修改指标
*/
try {
if(this.dataForm.getForm().isValid())
{
var CODE = $ExtUtil._panelFind("CODE",this.dataForm).getValue();
var NAME = $ExtUtil._panelFind("NAME",this.dataForm).getValue();
var TYPE = $ExtUtil._panelFind("TYPE",this.dataForm).getValue();
var LENGTH = '';
var PRECISE = '';
if (TYPE=='1') //数值型
{
LENGTH = '18';
PRECISE = '2';
}
else if(TYPE=='2') //字符型
{
LENGTH = '300';
}
var ENABLEFLAG = $ExtUtil._panelFind("ENABLEFLAG",this.dataForm).checked?'1':'0';
var ISROUND = $ExtUtil._panelFind("ISROUND",this.dataForm).checked?'1':'0';
var CANEXPORT = $ExtUtil._panelFind("CANEXPORT",this.dataForm).checked?'1':'0';
var CANDISPLAY = $ExtUtil._panelFind("CANDISPLAY",this.dataForm).checked?'1':'0';
var ISBASIC = $ExtUtil._panelFind("ISBASIC",this.dataForm).checked?'1':'0';
var COMMENTS = $ExtUtil._panelFind("COMMENTS",this.dataForm).getValue();
var FORMULA = $ExtUtil._panelFind("FORMULA",this.dataForm).getValue();
var FORMULANAME = $ExtUtil._panelFind("FORMULANAME",this.dataForm).getValue();
var DOUPDATESALARYLEVEL = $ExtUtil._panelFind("DOUPDATESALARYLEVEL",this.dataForm).getValue();
var ISINCOME = $ExtUtil._panelFind("ISINCOME",this.dataForm).getValue();
var ISRELATIONTOLEVEL = $ExtUtil._panelFind("ISRELATIONTOLEVEL",this.dataForm).checked?'1':'0';
var ISRELATIONTOPOSITION = $ExtUtil._panelFind("ISRELATIONTOPOSITION",this.dataForm).checked?'1':'0';
var ISDEFAULTHIDDEN = $ExtUtil._panelFind("ISDEFAULTHIDDEN",this.dataForm).checked?'1':'0';
var ISRELATIONTOTAX = $ExtUtil._panelFind("ISRELATIONTOTAX",this.dataForm).checked?'1':'0';
var ORDERID = $ExtUtil._panelFind("ORDERID",this.dataForm).getValue();
var ISRELATIONTOMARK = $ExtUtil._panelFind("ISRELATIONTOMARK",this.dataForm).checked?'1':'0';
var json = window._http.etcpost({
activity:'FieldInfoManagement',
intent:'updateFieldInfo',
data: {
CODE:this.params.identification,
NAME:NAME,
TYPE:TYPE,
LENGTH:LENGTH,
PRECISE:PRECISE,
ENABLEFLAG:ENABLEFLAG,
CANEXPORT:CANEXPORT,
CANDISPLAY:CANDISPLAY,
ISBASIC:ISBASIC,
COMMENTS:COMMENTS,
FORMULA:FORMULA,
FORMULANAME:FORMULANAME,
ISINCOME:ISINCOME,
ISRELATIONTOLEVEL:ISRELATIONTOLEVEL,
ISRELATIONTOPOSITION:ISRELATIONTOPOSITION,
ISDEFAULTHIDDEN:ISDEFAULTHIDDEN,
ISRELATIONTOTAX:ISRELATIONTOTAX,
ORDERID:ORDERID,
ISROUND:ISROUND,
ISRELATIONTOMARK:ISRELATIONTOMARK,
DOUPDATESALARYLEVEL:DOUPDATESALARYLEVEL,
SALARYLEVELFORMULALIST:this.SALARYLEVELFORMULALIST
}
});
if(json.MESSAGE=="OK"){
alert("修改指标成功!");
//以下方法是模拟点击刷新按钮
this.parentHandler.getTopToolbar().items.get(0).fireEvent('click');
this.ownerCt.close();
}else{
alert(json.MESSAGE);
}
}
}
catch (e) {
Ext.logf("FieldInfoManagementFormAction err: {0},{1}", e.name, e.message);
}
}
} //end module define
} //end include从以上代码中可以看出，主要实现了三个方法，一个是_add方法，一个是_loadInfo方法，另外一个是_save方法。从名称中不难看出，_add方法表示点击添加按钮是所进行的前端操作，_loadInfo方法表示点击编辑按钮时，从服务器端进行指标数据加载，_save方法表示是点击修改按钮所进行的前端操作。
_add方法被触发时，首先是进行前端输入的校验，校验通过后获取对应UI组件的值，根据实际值进行默认值的设置。最后拼一个JSON数据提交到后端，当后端返回成功的信息后，调用事件进行列表刷新。如果出现错误信息，则进行对应错误信息提醒。
_loadInfo方法被触发时，首先是通过ajax请求获得后端返回的数据，然后把对应的数据赋值到前端UI组件上进行展示。
_save方法与_add方法逻辑上类似，只不过是做对应指标更新的操作。
扫码关注不迷路！！！
郑州升龙商业广场B座25层
service@iqiqiqi.cn
联系电话：400-8049-474
联系电话：187-0363-0315
联系电话：199-3777-5101
