Ureport2源码改造demo是关于日期控件的扩展

1.需求来源

最近刚入职一个新公司，之前的项目中有较多的报表需求，但是一直没有优化，所以界面以及一些功能性要求，部分没有达到客户的认可。因此，需要在报表这块做一些改动。入职一个星期之内，一直在试用各种报表工具。奈何好用的报表工具收费贵，收费便宜的报表又不太好用。因此决定使用开源的ureport2。但是再使用过程中，发现此框架也满足不了我们的大部分需求，因此决定对其进行个性化改造。

准备下手的时候，发现网上基本没有任何相关对ureport2源码修改的文章，官方也没有任何教程是关于源码修改的，因此只能摸着石头过河了。

经过一个星期的琢磨，已经可以修改好源码，并成功运行了，因此写一篇总结文档算是能帮助大家一下吧。但是在我修改源码之后，改出一个小Bug，就是查询表单设计器的里面的绑定的查询参数之前是下拉选择框，现在没有了。变成手动输入的了，但是不影响正常使用，所以我就没有修改了，如果哪位大佬再修改之后，可以讲一下是如何操作的。下面放几张修改之后的效果图

1.1.设计页面

1.2.最终效果图

2.改动步骤

其实当改完一个组件的时候，就发现其余的改动都是大同小异的，因此我这里就不阐述所有的组件的改动方法了，就以改动日期控件的这个为例子。做源码改动的讲解。

2.1. 改动前准备

先到官方地址下载一个ureport2的源码，从tag标签中选择2.2.9（最新的稳定版本）。（地址：github.com/youseries/u…）。
下载源码之后，我们会发现ureport2一共包含5个模块，和我们打交道最多的是ureport2-console、ureport2-core、ureport2-js这三个模块，其中ureport2-console是我们在项目中引入的模块，它依赖于ureport2-core、ureport2-js,所以我们修改完源码打包的时候，要先将ureport2-core、ureport2-js打包，最后才打ureport2-console的包。
需求将ureport2-parent中pom.xml的以下代码注释，否则会影响我们本地编译。官方默认自带的编译源码的版本是1.7，我们还需要将其改为1.8。改动完成之后，clean install一下，看看能不能正常运行。

<!--javadoc是生成说明文档的，用到的小伙伴自己打开，gpg那个插件是和加密相关的东西，因为我们不需要将修改之后的源码提交到原ureport2的源码库，所以我们也不需要此插件
<plugin>
	<groupId>org.apache.maven.plugins</groupId>
	<artifactId>maven-javadoc-plugin</artifactId>
	<version>2.9.1</version>
	<executions>
		<execution>
		   <id>attach-javadocs</id>
		   <goals>
		      <goal>jar</goal>
		      </goals>
		 </execution>
	</executions>
</plugin>
<plugin>
	<groupId>org.apache.maven.plugins</groupId>
	<artifactId>maven-gpg-plugin</artifactId>
	<version>1.5</version>
	<executions>
		<execution>
			<id>sign-artifacts</id>
			<phase>verify</phase>
			<goals>
				<goal>sign</goal>
			</goals>
		</execution>
	</executions>
</plugin>-->

4.将ureport2-core、ureport2-console的pom.xml中和源码相关的配置最好都注释，就是licenses到build之上的那块代码

2.2. 改造开始（日期控件）

2.2.1. 前端改造

使用开发工具，打开ureport2-js项目
我们修改完代码之后，需要重新编译打包，但是源码的的package.json中，没有打包插件的依赖，因此需要我们手动安装webpack.
```
npm install -D webpack webpack-cli
npm install --save-dev webpack-dev-server
```
配置package.json文件

"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --open"

当我们想要修改前端的某个组件的时候，要先定位一下，在哪个文件中修改。所以我们先全局搜索yyyy-mm-dd,从匹配的文件中，找到最终修改的文件。

	#可以直接复制的代码
	this.formatSelect.append($("<option>yyyy</option>"));
	this.formatSelect.append($("<option>yyyy-mm</option>"));

前端代码我是没有找到如何单独测试，所以我这里采用修改代码之后，将其重新打包、编译嵌入到测试项目之后测试效果。

2.2.2. 修改ureport2-core模块

1.全局搜索yyyy-mmm-dd,也是先定位到日期处理的文件位置，

2. 如果想要添加placeholder属性，在当前文件下的inputHtml方法中，找到相应的位置，添加想要提示的信息

3. 然后执行mvn clean install命令

2.2.3. 修改ureport2-console模块

此模块的代码大部分是和导出相关的，像我们修改日期控件的话，在此模块中不需要修改任何的代码，因此直接mvn clean install就行。此时有关日期相关的源码就改动完毕了。

2.2.4. 导入现有项目测试

最终效果如下图所示

3. 修改总结

整个流程综合下来，发现修改源代码其实也不是太难，难的只是不知道一开始如何下手。如果有小伙伴，改的更好的效果，请放上链接。大家共同学习一下。