Commit eb1ae75e authored by custom's avatar custom

Merge origin/master into master

parents fd34285c 50dc95bf
###字段级通用方法
#### 设置字段必填属性
>Hel.setRequired(id,flag);
第一个参数id为字段的id,第二个参数flag为true时将该字段设为必填,为false时将该字段设为非必填。
```html
<h:hlsMaskedTextBox id="maskedTextBox"/>
<script><![CDATA[
Hel.setRequired('maskedTextBox',true);
]]></script>
```
####设置字段只读属性
>Hel.setReadonly(id,flag);
第一个参数id为字段的id,第二个参数flag为true时将该字段设为只读,为false时将该字段设为可输入。
```html
<h:hlsMaskedTextBox id="maskedTextBox"/>
<script><![CDATA[
Hel.setReadonly('maskedTextBox',true);
]]></script>
```
### 窗口级通用方法
#### 打开功能窗口
>Hel.openMenuWindow(opts);
其中参数为:
属性名 | 类型 | 含义
-------- | ----- | -----
menuCode | String(必填) | 菜单代码
title | String(必填) | 窗口描述
url | Object(必填) | 窗口地址
menuName | String| 菜单名称
moduleFlag| String | 模块标志(Y/N)
documentKey| String | 打开同一个功能时,识别不同单据的唯一标识
reflashFlag| String | 关闭该功能菜单时是否刷新父级标志(Y/N)
moduleName| String | 模块名称
```
Hel.openMenuWindow({
menuCode:'',//传入相应的参数
title:'',
url:'',
menuName:'',
moduleFlag:'',
documentKey:'',
reflashFlag:'',
moduleName:''
});
```
#### 关闭功能窗口
>Hel.closeMenuWindow(opts);
其中参数为:
属性名 | 类型 | 含义
-------- | ----- | -----
menuCode | String(必填) | 菜单代码
```
Hel.closeMenuWindow({
menuCode:''//传入相应的参数
});
```
#### 打开右弹窗口
>Hel.openBarWindow(opts);
其中参数为:
属性名 | 类型 | 含义
-------- | ----- | -----
id| String(必填) | 打开窗口的div的id
url| String(必填) | 窗口的url地址
size| String(必填) | 右弹窗口的宽度(THIRD/HALF/FULL/任意px像素)
```
<div id="win"></div>
<script><![CDATA[
Hel.openBarWindow({
id:'win',
content:'',
size:''
});
]]></script>
```
### 打开右弹抽屉通用方法
#### 打开抽屉
> Hel.openBox()函数接收一个对象,对象属性含义如下:
属性名 | 类型 | 含义
-------- | ----- | -----
winId | String(必填) | html元素标签的id
functionCode | String(必填) | 抽屉的唯一标识,用以确定该抽屉的相关信息
params | Object | 需传递的参数,将自动拼到url上
closeFunction | function | 关闭抽屉调用的方法
width | Number | 自定义宽度
```javascript
function test(e){
...
}
Hel.openBox({
winId:"domId",
functionCode:"CSH200B",
params:{
contractId:1327,
conContractCashflowId:4321
},
closeFunction:test,
width:900
});
```
##### 注意:
> - winId和functionCode必须有字符串类型的值
> - params可以没有,表示不拼接条件;
> - closeFunction可以没有,表示关闭抽屉不进行操作
> - width可以没有,表示使用配置的宽度
## 合同文本生成
合同文本生成允许用户定义不同内容的合同模板,通过各项数据配置,对其中的文字、表格、水印以及批注等内容进行修改。
1. 进入合同模板定义功能
先在表格中定义好模板的代码、名称、用途、类型以及说明等信息进行保存。
| 字段名 | 说明 |
| :--: | :--: |
| 模板代码 | 模板的唯一标示,不可重复 |
| 模板名称 | 用于标识一个文件模板 |
| 模板用途 | 暂时只有*合同文本*一种用途 |
| 模板类型 | |
| 说明 | 文件模板的说明 |
| 参数集 | 参与该模板生成时,所需要使用到的参数 |
![合同模板定义功能](/assets/tempDefine.png)
2. 上传合同模板
通过合同模板定义功能表格中的**模板上传**功能,将预先设计好的模板上传到服务器。**该功能只支持2007版本以上的,docx后缀的word文档**
![合同模板上传](/assets/tempUpload.png)
3. 定义合同模板参数
通过合同模板定义功能表格中**参数集**设置,将需要与合同模板关联的参数进行设置。
![合同模板参数集设置](/assets/paramSet.png)
- 若是有在已有的参数列表中没有需要的使用参数设置,则可以在参数集配置中手动添加
- 参数定义中的字段说明
> | 字段名 | 说明 |
> | :--: | :--: |
> | 书签代码 | 书签的唯一标识,需要和模板文件中定义的书签名称一致 |
> | 书签描述 | 对该书签的文字描述 |
> | 书签类型 | 书签类型目前有:文本、表单、表单域、横向表单四种 <ul><li>文本类型对应的是替换后为文档中普通文本 </li><li>表单类型对应着word文档中一个表格的数据,表格的每一列的配置信息都是在列配置中完成</li><li>表单域对应word文档中一个文本域\窗体域,最终的替换结果会显示在文本域的位置</li><li>横向表单对应的是替换的文档中,书签所对应的是文档中一整块内容,内容中可能包含了多个书签,每个书签的名称在列配置中进行配置,最后根据结果生成多块结构类似的文本</ul> |
> | 数据源 | 选择该参数的值来源,配置该项之后可不用配置SQL |
> | SQL | 从数据库进行数据查询使用的SQL语句 |
> | 列配置 | 只有在书签类型为表单或横向表单时,才可以进行配置 |
> | 字体型号 | 生成的文本使用的字体类型 |
> | 字体大小 | 生成的文本使用的字体大小 |
> | 下划线 | 生成的文本使用的下划线类型:无、单下划线、双下划线 |
> | 是否加粗 | 生成的文本是否需要加粗 |
![合同模板参数定义](/assets/paramDefine.png)
4. 去生成最终的合同文本
生成合同文本时在合同状态为**新建**时才可以生成合同文本
![合同文本生成入口](/assets/docxGenEntry.png)
![合同文本生成](/assets/docxGen.png)
\ No newline at end of file
# 前端开发手册 \(1.0\)
#### 开发说明
前端界面采用kendoUI开源框架,相同的显示效果可以采用多种代码方式来实现,为了规范项目组成员的代码样式,统一编码风格,避免以后维护的工作量,融租易采用封装标签的开发方式,当然如果在项目开发过程中遇到比较复杂的页面通过标签的方式实现不了的功能,需要跟产品组报备,然后采取源生的开发方式。
#界面多语言实现
界面中的多语言在数据库中统一存放在sys_prompts表中,系统启动时加载进redis缓存。界面中实现多语言是通过freemarker的标签以及对应的多语言code来实现。
例如:“确定”的多语言code是“sys.hand.btn.ok”在界面中的写法:
```html
<@spring.message "sys.hand.btn.ok"/>
```
# 新开项目
本章节将引导您从开始,创建一个可以运行的 Demo 工程。此工程基于HEL融租易标准版,包含一个 demo 实例。
本章节将引导您从开始,创建一个可以运行的 Demo 工程。此工程基于HEL融租易标准版,包含一个 demo 实例。
## 后端项目
### 确定项目信息
1. groupId 本项目的代号,比如融租易项目,代号为 hel
2. artifactId 本项目的顶层目录名称,使用项目代号(第一个字母大写)
+ Parent,如 HelParent
2. artifactId 本项目的顶层目录名称,使用项目代号(第一个字母大写) +Parent,如 HelParent
3. package 包名称,使用项目代号 + core ,如 Hel.core
4. archetypeVersion 是指模板项目的版本,可以使用以下版本号
> 1.0-RELEASE
......@@ -101,8 +100,9 @@ mvn clean install -Dmaven.test.skip=true
- SqlServer
- `mvn process-resources -D skipLiquibaseRun=false -Ddb.user=hel_dev -Ddb.password=hel_dev-D db.driver=com.microsoft.sqlserver.jdbc.SQLServerDriver -D db.url="jdbc:sqlserver://127.0.0.1:1433; DatabaseName=hel"`
- Oracle
- `mvn process-resources -D skipLiquibaseRun=false -D db.driver=oracle.jdbc.driver.OracleDriver -D db.url=jdbc:oracle:thin:@127.0.0.1:1521:hel -Ddb.user=hel_dev -Ddb.password=hel_dev
- 以上命令中,需要按实际情况修改 url,user,password
- `mvn process-resources -D skipLiquibaseRun=false -D db.driver=oracle.jdbc.driver.OracleDriver -D db.url=jdbc:oracle:thin:@127.0.0.1:1521:hel -Ddb.user=hel_dev -Ddb.password=hel_dev`
- 以上命令中,需要按实际情况修改 url,user,password
### 测试
1. 在 HelParent 工程目录下执行命令(IntelliJ IDEA 用户可以跳过此步骤)
......
# hlsCheckbox 标签
hlsCheckbox框,一般与<h:hlsForm><h:hlsHBox>一起使用,定义一个带文字说明的选择框。
```xml
<h:hlsCheckbox id="testCheckbox" bind="value:data.testValue" readonly="false" checkedValue="Y" uncheckedValue="N" />
```
### **主要属性**
| 属性名 | 类型 | 描述 |
| --- | --- | --- |
|promptColspan | String | 文字说明盒子的长度|
|promptClassName | String | 文字说明盒子的样式|
|promptImage|String|文字说明部分的图标(要求是一个完整的img标签)|
| prompt | String | 文字说明 |
| bind | String | 该选择框绑定关系 |
| required | String & Boolean & 不填 | 必选|
| checkedValue | String | 选中时input框的值 |
| uncheckedValue | String | 未选中时input框的值 |
| readonly | Boolean | 是否是可点击的 |
### **用法示例**
```xml
var viewModel = kendo.observable({
enabled: true,
isEnabled: false,
data: {},
});
<h:hlsForm title="hlsFormTitle" id="hlsFormTitleId" width="100%">
<h:hlsHBox>
<h:hlsCheckbox name="testCheckboxName" id="testCheckbox"
bind="enabled: enabled,value:model.testValue"
checked="checked" checkedValue="Y" prompt="hlsCheckbox测试:" uncheckedValue="N"
promptColspan="1" style="width:100%"/>
</h:hlsHBox>
</h:hlsForm>
```
# hlsCombobox标签
ComboBox下拉列表组件,通常数据源以code - meaning形式出现,用户操作的是meaning,实际保存的是code。
```xml
<h:hlsCombobox name="hlsCombobox" id="hlsCombobox"
bind="enabled: isEnabled,source: sdDataSource, value:data.code"
colspan="3"
dataTextField="meaning"
dataValueField="code"
placeholder="hlsCombobox"
prompt="hlsCombobox"
promptColspan="1"
valuePrimitive="true"
style="width:100%"
/>
```
### **主要属性**
属性名 | 类型
-------- | ---
id | String
promptColspan | String
promptClassName | String
promptImage | String
prompt | String
colspan | String
hlsClassName | String
animation | Boolean
autoBind | Boolean
autoWidth | Boolean
cascadeFrom| String
cascadeFromField | String
clearButton| Boolean
dataSource | DataSource
dataTextField | String
dataValueField| String
delay | Number
enable | Boolean
enforceMinLength| Boolean
filter | String
fixedGroupTemplate| String \| Function
footerTemplate| String \| Function
groupTemplate| String \| Function
height| Number
highlightFirst| Boolean
ignoreCase| Boolean
index| Number
minLength| Number
noDataTemplate| String \| Function
placeholder | String
suggest| Boolean
headerTemplate| String \| Function
template| String \| Function
text| String
value| String
valuePrimitive| Boolean
virtual| Boolean
change| Function
close| Function
dataBound | Function
filtering| Function
open| Function
select| Function
cascade| Function
> 属性用法请参考KendoUI文档 [http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox](http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox)
### **用法示例*
```javascript
//对于系统定义好的数据源
<script src="${base.contextPath}/common/code?sdDataSource=FND.CODING_RULE_TYPE" type="text/javascript"></script>
//自定义静态数据源sdDataSource
var sdDataSource= new kendo.data.DataSource({
data:["one","two"]
});
//自定义动态查询到的数据源sdDataSource
$.ajax({
type : 'GET',
url : url,
async: false,
contentType : "application/json; charset=utf-8",
success : function(datas) {
viewModel.set("sdDataSource,",datas.rows);
}
});
//需要注意,bind中写dataSource,需要在viewModel中定义
var viewModel = kendo.observable({
enabled: true,
isEnabled: false,
data: {},
sdDataSource:sdDataSource,
});
//下拉列表渲染函数
var itemTemplate = function (){
//...
}
//选中某一个列表选项后触发
function onComboboxChange(e){
var value = this.value();
// Use the value of the widget.
}
//以上两种函数定义方法皆可
```
```xml
<h:hlsCombobox name="hlsCombobox" id="hlsCombobox"
bind="enabled: isEnabled,source: sdDataSource, value:data.code"
colspan="3"
dataTextField="meaning"
dataValueField="code"
placeholder="hlsCombobox"
prompt="hlsCombobox"
promptColspan="1"
valuePrimitive="true"
style="width:100
change="onComboboxChange"
template="fn:itemTemplate"
/>
```
#### 特别注意 valuePrimitive="true" 如果该值为false,选中的值将不会匹配给dataTextField和dataValueField
dataValueField
> **提示:** 某些属性类型为**String \| Function** 时,表明它可以定义为字符串或者函数。因此当需要定义为Function时需要增加前缀**fn:**来区分(例如函数template="fn:itemTemplate" )
# hlsDatePicker标签
日期选择器(不包含时分秒)
xml配置
```
<!--基本用法-->
<h:hlsDatePicker id="hlsDatePickerId" bind="enabled:isEnabled,value:data.value" placeholder="hlsDatePicker"/>
```
### **主要属性**
属性名 | 类型
-------- | -----
promptColspan | Integer
promptClassName | String
promptImage | String
prompt | String
colspan | Integer
hlsClassName | String
animation | Boolean
ARIATemplate| String
culture | String
depth| String
footer| String & Function
format| String
max| String
min| String
start| String
value | String
name | String
bind | Function
required | Boolean
change | Function
close| Function
open | Function
placeholder | String
interval |Integer
timeFormat |String
> **提示:** 属性用法请参考kendoui API文档 http://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker
### **用法示例**
```javascript
//注意是写在script标签内的
var viewModel = kendo.observable({
data:{},
isEnabled:true
});
function open(){
//...
}
function change(e){
//...
}
```
```xml
<h:hlsDatePicker id="hlsDatePickerId"bind="enabled: isEnabled,value:data.value"
style="width:200px;"
max="2016-6-6"
placeholder="hlsDatePicker"
open="open"
required="true"
change="change"
prompt="日期选择器:"
/>
id:可写可不写;
bind:属性里面包含配置两个选项:
(1)enabled配置日期选择器是否可以编辑,值为Boolean类型的变量,在viewModel里面配置。
(2)value配置日期选择器与变量关联,默认是在ViewModel下面的变量;
max:可选择日期的上限值;
style可改变该控件的样式;
open:点击控件调用的方法;
change:选择日期之后的事件;
prompt:为控件添加一个label,该属性一般和<h:hlsForm><h:hlsHBox>一起使用;
```
> **提示:**
> - 上述所有属性直接添加在标签内即可,(**[属性名] = "..."**),对于既是**String**类型又是**Function**类型的属性,只需要加**fn:**前缀区分即可,(**fn:函数名**)
> - 对于**max min**等本该是**时间类型**的属性,改为日期字符串,且连接符号为"**-**"
# HlsDateTimePicker标签
时间选择器(带时分秒)
### **主要属性**
属性名 | 类型
-------- | -----
promptColspan | Integer
promptClassName | className
id | String
promptImage | String
prompt | String
colspan | String
hlsClassName | String
animation | Boolean
ARIATemplate| String
culture | String
depth| String
footer| String & Function
format| String
max| String
min| String
start| String
value | String
name | String
bind | Function
required | Boolean
change | Function
close| Function
open | Function
placeholder | String
interval |Integer
timeFormat |String
> **提示:** 属性用法请参考kendoui API文档 http://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker
### **用法示例**
```javascript
//注意是写在script标签内的
var viewModel = kendo.observable({
data:{},
isEnabled:true
});
function open(){
//...
}
function change(e){
//...
}
```
```xml
<h:hlsDateTimePicker name="hlsDateTimePicker" id="hlsDateTimePicker"
colspan="3"
bind="enabled:isEnabled,value:data.hlsDateTimePicker"
prompt="上会时间"
promptColspan="1"
required="true"
style="width:100%"
max="2016-6-6"
open="open"
/>
id:可写可不写
bind:属性里面包含配置两个选项:
(1)enabled配置日期选择器是否可以编辑,值为Boolean类型的变量,在viewModel里面配置
(2)value配置日期选择器与变量关联,默认是在ViewModel下面的变量
max:可选择日期的上限值
style可改变该控件的样式
open:点击控件调用的方法
change:选择日期之后的事件
prompt:为控件添加一个label,该属性一般和<h:hlsForm><h:hlsHBox>一起使用
colspan:时间选择器的宽度(按照bootstrap,列12等分来计算)
promptColspan:label的宽度
```
> **提示:**
> - 上述所有属性直接添加在标签内即可,(**[属性名] = "..."**),对于既是**String**类型又是**Function**类型的属性,只需要加**fn:**前缀区分即可,(**fn:函数名**)
> - 对于**max min**等本该是**时间类型**的属性,改为日期字符串,且连接符号为"**-**"
# hlsLOV标签
#### lov标签的数据源和展示由功能定义,因此在写LOV之前需要在lov配置功能处配好相关信息,可配置项包括:
##### 1.lov框的具体样式、结构;
##### 2.lov框的数据来源
```xml
//code、locale、contenxtPath为必须的参数,其中code为所需lov在lov定义时的code的值
<h:hlsLov name="lov" id="lov" code="LOV_CON_CONTRACT_TENANT" contextPath="${base.contextPath}" locale="${base.locale}"/>
```
#### **必须参数**
参数名|类型/值
----|----
code|String
locale|String (一般为${base.locale})
contextPath|String(一般为${base.contextPath})
#### **一般属性**
属性名|类型
----|----
promptColspan | String
promptClassName | String
promptImage | String
prompt | String
name|String
enabled|Boolean
valuePrimitive|Boolean
text|String
dataTextField|String
dataValueField|String
open|function
close|function
select|function
query|function
用法示例:
```javascript
var viewModel = kendo.observable({
enabled: true,
isEnabled: false,
data: {},
});
//以下代码写在script标签内
//lov查询时触发
function lovQuery(e) {
//lov查询拼上条件
e.param['contractId'] = 1237;
};
//选中lov行数据后触发
function lovSelect(e) {
//选中lov行数据后
//options是
viewModel.data.set("contractId", e.item.contractId);
};
```
```xml
<!--xml代码-->
<h:hlsLov name="lov" id="lov" code="LOV_ROLE" colspan="3" contextPath="${base.contextPath}" data-bind="enabled: enabled, locale="${base.locale}" placeholder="承租人名称" prompt="lov:" promptColspan="1" select="lovSelect" query="lovQuery" style="width: 100%"/>
```
> **提示:**
> - 上述所有属性直接添加在标签内即可,(**[属性名] = "..."**),对于既是**String**类型又是**Function**类型的属性,只需要加**fn:**前缀区分即可,(**fn:函数名**)
# hlsToolBar
-------------
hlsToolBar菜单栏标签,通常与<h:hlsButton>一起使用,固定于页面的底部,不随滚动条变化而变化。
##### xml配置
```xml
<!--h:为命名空间,必须要加的;treeList为组件名;id可写可不写-->
<h:hlsToolBar>
<h:hlsButton click="TEST5" text="测试" />
</h:hlsToolBar>
```
#### **一般属性**
> **提示:**
该标记通常作为一个容器,固定于页面底部,一般只对其样式进行修改。
属性名 | 类型
-------- | ---
hlsStyle| String
hlsClassName | String
用法示例:
```javascript
//注意是写在script标签里的内容
function TEST5(){
...
}
```
```xml
<h:hlsToolBar hlsStyleClassName="test-class" hlsStyle="backgroud-color:blue">
<h:hlsButton click="TEST5" text="测试" />
</h:hlsToolBar>
hlsStyleClassName:css类样式名字
hlsStyle:css样式
click:点击事件调用的方法名
text:按钮的文字说明
```
> **提示:**
> - 每个hls开头的标签都有hlsClassName和hlsStyle属性,因为有的标签主要说明其功能,所以没强调。
tabStrip
-------------
#### **tabStrip标签页**
```xml
<!--h:为命名空间,必须要加的;id可写可不写;value为默认打开的标签页,属性值对应tab页的title的值;animation表示是否启用动画,值类型为布尔值-->
<h:tabStrip id="tabstrip" value="Paris" animation="false">
<h:tabs>
//title为标签页的标题
<h:tab title="Paris">
//此标签的html内容
...
</h:tab>
<h:tab title="New York">
...
</h:tab>
</h:tabs>
</h:tabStrip>
```
#### **一般属性**
> **提示:**
> - 属性用法请参考kendoui API文档的tabStrip:http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip
属性名|类型
----|----
animation|Boolean
collapsible|Boolean
dataContentField|String
dataSource | kendo.data.DataSource(Function)
dataTextField|String
navigatable|true
scrollable|Boolean
tabPosition|String
value|String
activate|function
contentLoad|function
error|function
select|function
change| Function
dataBound | Function
dataBinding|function
用法示例:
```xml
<h:tabStrip value="标签2" collapsible="true" tabPosition="top">
<h:tabs>
<h:tab title="标签1">
<h:button text="hello1" className="btn-primary" click="test" enable="true" icon="cancel"/>
<h:button text="hello2" className="btn-primary" click="test" enable="true" icon="cancel"/>
</h:tab>
<h:tab title="标签2">
<h:button text="hello3" className="btn-primary" click="test" enable="true" icon="cancel"/>
<h:button text="hello4" className="btn-primary" click="test" enable="true" icon="cancel"/>
</h:tab>
</h:tabs>
</h:tabStrip>
<!--或者 将tabStrip与dataSource绑定,-->
<h:dataSource id="dataSourceTabStrip">
<h:data>
<h:item name="tab1" content="tab1content"/>
<h:item name="tab2" content="tab2content"/>
</h:data>
</h:dataSource>
<h:tabStrip dataSource="dataSourceTabStrip" dataTextField="name" dataContentField="content" />
```
> **提示:**
> - 上述所有属性直接添加在标签内即可,(**[属性名] = "..."**),对于既是**String**类型又是**Function**类型的属性,只需要加**fn:**前缀区分即可,(**fn:函数名**)
## 抽屉通用方法
### 1.打开抽屉
> Hel.openBox()函数接收一个对象,对象属性含义如下:
属性名 | 类型 | 含义
-------- | ----- | -----
winId | String(必填) | html元素标签的id
functionCode | String(必填) | 抽屉的唯一标识,用以确定该抽屉的相关信息
params | Object | 需传递的参数,将自动拼到url上
closeFunction | function | 关闭抽屉调用的方法
width | Number | 自定义宽度
```javascript
function test(e){
...
}
Hel.openBox({
winId:"domId",
functionCode:"CSH200B",
params:{
contractId:1327,
conContractCashflowId:4321
},
closeFunction:test,
width:900
});
```
#### 注意:
> - winId和functionCode必须有字符串类型的值
> - params可以没有,表示不拼接条件;
> - closeFunction可以没有,表示关闭抽屉不进行操作
> - width可以没有,表示使用配置的宽度
# hlsCombobox标签
hlsCombobox 下拉列表组件
ComboBox下拉列表组件,通常数据源以code - meaning形式出现,用户操作的是meaning,实际保存的是code。
```xml
<h: hlsCombobox placeholder="hlsCombobox"
<h:hlsCombobox name="hlsCombobox" id="hlsCombobox"
bind="enabled: isEnabled,source: sdDataSource, value:data.code"
colspan="3"
dataTextField="meaning"
dataValueField="code"
placeholder="hlsCombobox"
prompt="hlsCombobox"
promptColspan="1"
valuePrimitive="true"
dataTextField="text"
dataValueField="value"
bind="enabled: isEnabled, source: comboboxSource, value:data.productId"
style="width: 100%;"/>
style="width:100%"
/>
```
### **主要属性**
属性名 | 类型
-------- | ---
id | String
promptColspan | String
promptClassName | String
promptImage | String
prompt | String
colspan | String
hlsClassName | String
animation | Boolean
autoBind | Boolean
autoWidth | Boolean
cascadeFrom| String
cascadeFromField | String
clearButton| Boolean
dataSource | DataSource
dataTextField | String
dataValueField| String
delay | Number
enable | Boolean
enforceMinLength| Boolean
filter | String
fixedGroupTemplate| String \| Function
footerTemplate| String \| Function
groupTemplate| String \| Function
height| Number
highlightFirst| Boolean
ignoreCase| Boolean
index| Number
minLength| Number
noDataTemplate| String \| Function
placeholder | String
suggest| Boolean
headerTemplate| String \| Function
template| String \| Function
text| String
value| String
valuePrimitive| Boolean
virtual| Boolean
change| Function
close| Function
dataBound | Function
filtering| Function
open| Function
select| Function
cascade| Function
> 属性用法请参考KendoUI文档 [http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox](http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox)
### **用法示例*
| 属性名 | 类型 |
| --- | --- |
| animation | Boolean |
| autoBind | Boolean |
| autoWidth | Boolean |
| cascadeFrom | String |
| cascadeFromField | String |
| clearButton | Boolean |
| dataSource | DataSource |
| dataTextField | String |
| dataValueField | String |
| delay | Number |
| enable | Boolean |
| enforceMinLength | Boolean |
| filter | String |
| fixedGroupTemplate | String \| Function |
| footerTemplate | String \| Function |
| groupTemplate | String \| Function |
| height | Number |
| highlightFirst | Boolean |
| ignoreCase | Boolean |
| index | Number |
| minLength | Number |
| noDataTemplate | String \| Function |
| placeholder | String |
| suggest | Boolean |
| headerTemplate | String \| Function |
| template | String \| Function |
| text | String |
| value | String |
| valuePrimitive | Boolean |
| virtual | Boolean |
| change | Function |
| close | Function |
| dataBound | Function |
| filtering | Function |
| open | Function |
| select | Function |
| cascade | Function |
> 属性用法请参考KendoUI文档 [http:\/\/docs.telerik.com\/kendo-ui\/api\/javascript\/ui\/combobox](http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox)
### **用法示例**
```xml
<h: hlsCombobox id="hlsCombobox" dataSource="dataSource" clearButton="true" placeholder="test" enable="false" template="fn:itemTemplate" change="onComboboxChange"/>
```
> **提示:** 某些属性类型为**String \| Function** 时,表明它可以定义为字符串或者函数。因此当需要定义为Function时需要增加前缀**fn:**来区分\(例如函数template="fn:itemTemplate" \)
```javascript
### **主要子节点**
* animation
* popup
* virtual
### **animation**
//对于系统定义好的数据源
<script src="${base.contextPath}/common/code?sdDataSource=FND.CODING_RULE_TYPE" type="text/javascript"></script>
主要用来定义动画效果,例如打开关闭效果
* open 打开效果
* close 关闭效果
//自定义静态数据源sdDataSource
var sdDataSource= new kendo.data.DataSource({
data:["one","two"]
});
| 属性 | 类型 |
| --- | --- |
| effects | String |
| duration | Number |
//自定义动态查询到的数据源sdDataSource
$.ajax({
type : 'GET',
url : url,
async: false,
contentType : "application/json; charset=utf-8",
success : function(datas) {
viewModel.set("sdDataSource,",datas.rows);
}
});
//需要注意,bind中写dataSource,需要在viewModel中定义
var viewModel = kendo.observable({
enabled: true,
isEnabled: false,
data: {},
sdDataSource:sdDataSource,
});
//下拉列表渲染函数
var itemTemplate = function (){
//...
}
```xml
<h: hlsCombobox id=" hlsCombobox ">
<h:animation>
<h:close effects="zoom:out" duration="300"/>
<h:open effects="zoom:in" duration="300"/>
</h:animation>
</h: hlsCombobox >
//选中某一个列表选项后触发
function onComboboxChange(e){
var value = this.value();
// Use the value of the widget.
}
//以上两种函数定义方法皆可
```
### **popup**
弹出窗口设置
| 属性 | 类型 |
| --- | --- |
| appendTo | String |
| origin | String |
| position | String |
```xml
<h: hlsCombobox id="combobox">
<h:popup appendTo="container" origin="top left" position="top left"/>
</h: hlsCombobox >
```
### **virtual**
动态加载相关设置
| 属性 | 类型 |
| --- | --- |
| itemHeight | Number |
| mapValueTo | String |
| valueMapper | Function |
<h:hlsCombobox name="hlsCombobox" id="hlsCombobox"
bind="enabled: isEnabled,source: sdDataSource, value:data.code"
colspan="3"
dataTextField="meaning"
dataValueField="code"
placeholder="hlsCombobox"
prompt="hlsCombobox"
promptColspan="1"
valuePrimitive="true"
style="width:100
change="onComboboxChange"
template="fn:itemTemplate"
```javascript
function valueMapper(){
$.ajax({
url: "http://demos.telerik.com/kendo-ui/service/Orders/ValueMapper",
type: "GET",
dataType: "jsonp",
data: convertValues(options.value),
success: function(data) {
//the **data** is either index or array of indices.
//Example:
// 10258 -> 10 (index in the Orders collection)
// [10258, 10261] -> [10, 14] (indices in the Orders collection)
options.success(data);
}
})
}
/>
```
#### 特别注意 valuePrimitive="true" 如果该值为false,选中的值将不会匹配给dataTextField和dataValueField
dataValueField
> **提示:** 某些属性类型为**String \| Function** 时,表明它可以定义为字符串或者函数。因此当需要定义为Function时需要增加前缀**fn:**来区分(例如函数template="fn:itemTemplate" )
```xml
<h: hlsCombobox id="combobox">
<h:virtual itemHeight ="20" mapValueTo="index" valueMapper="valueMapper"/>
</h: hlsCombobox >
```
# hlsDatePicker标签
日期选择器
日期选择器(不包含时分秒)
```xml
<h:hlsDatePicker id="hlsDatePicker
xml配置
```
<!--基本用法-->
<h:hlsDatePicker id="hlsDatePickerId" bind="enabled:isEnabled,value:data.value" placeholder="hlsDatePicker"/>
```
### **主要属性**
| 属性名 | 类型 |
| --- | --- |
| culture | String |
| depth | String |
| footer | String \| Function |
| format | String |
| max | String |
| min | String |
| start | String |
| value | String |
| name | String |
| bind | Function |
| required | Boolean |
| change | Function |
| close | Function |
| open | Function |
| placeholder | String |
> **提示:** 属性用法请参考kendoui API文档 [http:\/\/docs.telerik.com\/kendo-ui\/api\/javascript\/ui\/datepicker](http://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker)
属性名 | 类型
-------- | -----
promptColspan | Integer
promptClassName | String
promptImage | String
prompt | String
colspan | Integer
hlsClassName | String
animation | Boolean
ARIATemplate| String
culture | String
depth| String
footer| String & Function
format| String
max| String
min| String
start| String
value | String
name | String
bind | Function
required | Boolean
change | Function
close| Function
open | Function
placeholder | String
interval |Integer
timeFormat |String
> **提示:** 属性用法请参考kendoui API文档 http://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker
### **用法示例**
```javascript
//注意是写在script标签内的
var viewModel = kendo.observable({
data:{},
isEnabled:true
});
function open(){
//...
}
function change(e){
//...
}
```
```xml
<h:hlsDatePicker id="hlsDatePicker"
max="2016-10-14"
name="datepicker"
placeholder="datepicker"
bind="value:data.birthday"
required="true" open="open" footer="fn:footer"/>
<h:hlsDatePicker id="hlsDatePickerId"bind="enabled: isEnabled,value:data.value"
style="width:200px;"
max="2016-6-6"
placeholder="hlsDatePicker"
open="open"
required="true"
change="change"
prompt="日期选择器:"
/>
id:可写可不写;
bind:属性里面包含配置两个选项:
(1)enabled配置日期选择器是否可以编辑,值为Boolean类型的变量,在viewModel里面配置。
(2)value配置日期选择器与变量关联,默认是在ViewModel下面的变量;
max:可选择日期的上限值;
style可改变该控件的样式;
open:点击控件调用的方法;
change:选择日期之后的事件;
prompt:为控件添加一个label,该属性一般和<h:hlsForm><h:hlsHBox>一起使用;
```
> **提示**:
>
> * 遇到**object**类型 就向下添加子标签,当遇到普通类型时,就添加到当前的标签上。
> **提示:**
> - 上述所有属性直接添加在标签内即可,(**[属性名] = "..."**),对于既是**String**类型又是**Function**类型的属性,只需要加**fn:**前缀区分即可,(**fn:函数名**)
> - 对于**max min**等本该是**时间类型**的属性,改为日期字符串,且连接符号为"**-**"
hlsForm表单
-----------------
<h:hlsForm>包括两个titile部分和body部分,body通常由<h:hlsBox><h:hlsMaskedTextBox><h:hlshlsNumericTextBox>等标记组成。
#### 一般用法
```html
<!-- hlsForm子标签的使用请参见相应文档,这里不再说明-->
<h:hlsForm title="hlsForm" width="100%">
<h:hlsHBox>
<h:hlsDatePicker name="transactionDate" id="transactionDate" bind="enabled: enabled,value:data.transactionDate" colspan="4" style="width:50%" placeholder="退款日期" prompt="退款日期:" promptColspan="2" required="true"/>
<h:hlsCombobox name="paymentMethod" id="paymentMethod" bind="enabled: enabled, source:cshPayments , value:data.paymentMethod" colspan="4" dataTextField="description" dataValueField="value" placeholder="退款方式" prompt="退款方式:" promptColspan="2" required="true" valuePrimitive="true" style="width:50%"/>
</h:hlsHBox>
<h:hlsHBox>
<h:hlsNumericTextBox name="returnDueAmount" id="returnDueAmount" bind="enabled: enabled, value:data.returnDueAmount" style="width:50%" colspan="4" prompt="退款金额:" promptColspan="2" required="true" validationMessage="Enter {0}"/>
<h:hlsMaskedTextBox name="bankSlipNum" id="bankSlipNum" bind="enabled: enabled, value:data.bankSlipNum" colspan="4" prompt="银行流水号:" promptColspan="2" style="width:50%"/>
</h:hlsHBox>
<h:hlsHBox>
<h:hlsLov name="bankAccountName" id="bankAccountName" code="BANK_ACCOUNT_INFO" colspan="4" contextPath="${base.contextPath}" data-bind="enabled: enabled, value:data.bankAccountId,text:data.bankAccountName" locale="${base.locale}" placeholder="退款账户" prompt="退款账户:" promptColspan="2" query="bankAccountNameQuery" change="bankAccountNameChange" select="bankAccountNameSelect" required="true" style="width:50%" />
<h:hlsMaskedTextBox name="bankAccountNum" id="bankAccountNum" bind="enabled: isEnabled, value:data.bankAccountNum" colspan="4" prompt="账号:" promptColspan="2" style="width:50%" />
</h:hlsHBox>
</h:hlsForm>
```
### **主要属性**
| 属性名 | 类型 | 描述 |
| --- | --- | --- |
| width | String | form组件的宽度|
|hlsClassName | String |组件的类样式|
| title | String | 标题文字|
> **注意:**
```javascript
$('#query-form input').keydown(function (e) {
if (e.keyCode == 13) {
e.target.blur();
viewModel.queryResource(e);
}
});
```
>**详解:**
> - query-form 是表单id,input指表单内所有输入框 (样式选择器选到input)
> - viewModel.queryResource(e)当按下回车按钮时都执行查询方法
---------------
#### viewModel在多处出现,这里粗略的介绍一下
```
viewModel用法
Kendo MVVM是一种MVVM的实现,当然可以跟Kendo 组件(widgets)和数据源(datasource)进行无缝结合
```javascript
var viewModel = kendo.observable({
model: {
//model 中可设置绑定初值
id:5
},
//可以自定义函数方法 :如saveFunction方法
saveFunction: function () {
$('#grid').data('kendoGrid').saveChanges();
},
queryResource: function (e) {
$('#grid').data('kendoGrid').dataSource.page(1);
}
});
```
使用:(**注意data-bind**)
```html
<div id="view">
<input data-bind="value: model.id" />
<button data-bind="click: saveFunction">Display</button>
</div>
```
关于绑定
```html
<div id="view" data-bind="value: model.name"></div>
<script>
var viewModel = kendo.observable({
model: {
name: "John Doe"
}
});
kendo.bind($("#view"), viewModel);
</script>
```
> **注意:**
> - viewModel中绑定是实时的,即viewModel中的name字段发生变化,则input中的value会一起变化,反之,当input中的value值变化,则viewModel中的name字段也会一同发生变化
> - viewModel中的所有字段属性都是可自定义的
> - 绑定需要input中data-bind 和kendo-bind两次绑定 第一是将数值绑定到model上,第二次是将此div绑定到viewModel上,这样才能访问到viewModel的model属性,也就是第一次绑定才有效
重置按钮
```javascript
resetForm : function(e) {
var formData = viewModel.model.toJSON();
for ( var k in formData) {
viewModel.model.set(k, null);
}
}
```
```html
<span class="btn btn-default" data-bind="click:resetForm" type="button"><@spring.message "hap.reset"/></span>
```
> **注意:**
> - viewModel与表单绑定后,model里面的字段变化,input框里的value里一起变化,所以在清空viewModel的同时,清空了表单里的数据
......@@ -86,3 +86,5 @@ weblogic选择要部署的war包,若出现_wl_cls_gen.jar!这样的日志异
上述 3 点在部署的时候请留意。
# 部署
# tomcat
<a href="#tomcat"></a>
### 1. 关闭 eclipse server `Auto Reload` 特性
* 禁用默认值
<img src="/assets/disable_autoreload_all.png" width="50%"/>
* 单独禁用项
<img src="/assets/disable_autoreload_1.png" width="50%"/>
* 建议关闭 jar 扫描, 提高启动速度, 减少内存占用 , 修改 `catalina.properties `
```properties
tomcat.util.scan.StandardJarScanFilter.jarsToSkip=*.jar
```
### 2. 内存设置
* Linux 修改 `catalina.sh` ,开始处添加
```bash
JAVA_OPTS='-Xms512m -Xmx2048m'
```
* Windows 修改 `catalina.bat`
```bash
set JAVA_OPTS=-Xms512m -Xmx2048m
```
### 3. 启用远程 JMX 连接
修改 catalina.sh , 搜索 `[ "$1" = "start" ]` , 在下方添加
```bash
JAVA_OPTS="-Dcom.sun.management.jmxremote \
-Dcom.sun.management.jmxremote.port=1099 \
-Djava.rmi.server.hostname=192.168.1.111 \
-Dcom.sun.management.jmxremote.ssl=false \
-Dcom.sun.management.jmxremote.authenticate=false $JAVA_OPTS"
```
> linux 系统可以用 `` `hostname -i` `` 获取 ip
# Weblogic
<a href="#weblogic"></a>
weblogic 上的部署有些特殊,主要注意以下几点:
> **以下设置仅仅针对 weblogic 12 版本,其他版本可能存在通配符等问题**
### 1. JNDI 数据源
weblogic 上定义好数据源后,在 `config.properties` 中需要修改 jndi 的名字
```properties
db.jndiName=hap_dev
```
> tomcat 中是 java:comp/env/jdbc/hap_dev,这点不一样
### 2. 新增 weblogic.xml
在 WEB-INF 目录下新增 weblogic.xml
```bash
<?xml version="1.0" encoding="UTF-8"?>
<weblogic-web-app>
<container-descriptor>
<!--优先加载应用下的jar包,解决jar包冲突问题-->
<!--具体jar包冲突问题,具体解决-->
<prefer-application-packages>
<package-name>org.springframework.*</package-name>
<package-name>org.hibernate.*</package-name>
<package-name>javax.validation.*</package-name>
<package-name>javax.validation.spi.*</package-name>
<package-name>org.slf4j.*</package-name>
<package-name>com.fasterxml.*</package-name>
</prefer-application-packages>
<show-archived-real-path-enabled>true</show-archived-real-path-enabled>
</container-descriptor>
</weblogic-web-app>
```
### 3. weblogic部署异常解决方案
weblogic选择要部署的war包,若出现_wl_cls_gen.jar!这样的日志异常,可将war包,直接解压,进行部署。
上述 3 点在部署的时候请留意。
......@@ -156,5 +156,11 @@ public class demoJob extends AbstractJob{
* 下次执行时间:预计执行完本次任务后,根据指定的执行间隔推算的下一次执行时间点。
* 实际执行时间:本次任务实际执行的时间点。
### 5、后台创建计划任务
#### 5.1 后端直接创建计划任务
1.在某些业务模块,可能需要直接在后端业务代码中定义计划任务,那么这个时候,融租易中提供了创建计划任何的接口
......@@ -3,7 +3,6 @@
* [GitBook使用](/gitbook.md)
---
* I. 开发环境准备
* [1.1 Git 使用](/git-guide.md "git指令")
......@@ -20,25 +19,41 @@
* III. 后端开发
* [3.2 部署](/后端开发/deployment.md)
* IV. 前端开发
* 4.1 前端开发说明 \(1.0\)
* [4.2 hlsCombobox](/前端组件/hlsCombobox.md)
* [4.3 hlsDataSource](/前端组件/hlsDataSource.md)
* [4.4 hlsMaskedTextBox](/前端组件/hlsMaskedTextBox.md)
* [4.5 hlsPage](/前端组件/hlsPage.md)
* [4.6 hlsTextArea](/前端组件/hlsTextArea.md)
* [4.7 hlsTlEdit](/前端组件/hlsTlEdit.md)
* [4.8 hlsDatePicker](/前端组件/hlsDatePicker.md)
* V. 框架功能描述
* 5.1 计划任务功能描述
* [5.2 消息机制](/框架功能描述/消息机制.md)
* IV. 前端JavaScript开发
* [4.1 前端开发说明 \(1.0\)](/front-kendoui.md)
* [4.2 字段级通用方法](/common-field-javascript.md)
* [4.3 窗口级通用方法](/common-window-javascript.md)
* V. 前端UI开发
* [5.1 hlsCombobox(下拉框)](/前端组件/hlsCombobox.md)
* [5.2 hlsDataSource](/前端组件/hlsDataSource.md)
* [5.3 hlsMaskedTextBox](/前端组件/hlsMaskedTextBox.md)
* [5.4 hlsPage](/前端组件/hlsPage.md)
* [5.5 hlsTextArea](/前端组件/hlsTextArea.md)
* [5.6 hlsTlEdit](/前端组件/hlsTlEdit.md)
* [5.7 hlsDatePicker](/前端组件/hlsDatePicker.md)
* [5.8 hlsDateTimePicker](/前端组件/HlsDateTimePicker.md)
* [5.9 hlsLov](/前端组件/HlsLov.md)
* [5.10 hlsToolBar](/前端组件/HlsToolBar.md)
* [5.11 TabStrip](/前端组件/TabStrip.md)
* [5.12 hlsForm](/前端组件/hlsForm.md)
* [5.13 hlsCombobox](/前端组件/HlsCombobox.md)
* [5.14 hlsCheckBox](/前端组件/HlsCheckBox.md)
* [5.15 抽屉通用方法](/前端组件/box.md)
* [5.16 Grid](/前端组件/Grid.md)
* [5.17 DataSource](/前端组件/DataSource.md)
* [5.18 hlsGridBox](/前端组件/hlsGridBox.md)
* [5.19 NumericTextBx](/前端组件/NumericTextBox.md)
* [5.20 HlsNavigationBar](/前端组件/HlsNavigationBar.md)
* VI. 框架功能描述
* [6.1 计划任务](/框架功能描述/计划任务.md)
* [6.2 RabbitMq消息队列](/后端开发/RabbitMq消息队列.md)
* [6.3 应用服务部署(tomcat/weblogic)](/框架功能描述/deployment.md)
* [6.4 合同文本生成](/docx4j.md)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment