修改ureport2源码(3)新增自定义颜色值输入框

ureport2原有颜色选择器效果

 个人感觉用户用起来，还是差点东西，能不能直接给颜色值？一言不合就开干，最终效果如下：

 这次，修改修改的项目不多，只须改动ureport2-js项目即可。

整体的修改、编译、使用过程，请参照上一篇文章。

1.修改ureport2-js项目

1.1修改字体前景色选择器

文件相对位置：ureport2-js\src\tools\ForecolorTool.js

#添加自定义颜色值输入框
const colordiaply=$(`<div style="align:center;"></div>`);
const colortext=$(`<input type="text" class="form-control" style="display: inline-block;width:98%;padding: 5px;height: 26px;line-hight:26px;text-align:center;">`);
colordiaply.append(colortext);

       //绑定输入框事件
        colortext.bind('input propertychange', function() {
            var colorinput=$(this).val();
            //just simple,only support format like: #aaaaaa 
            if(colorinput.length==7){
                var type = "^#[0-9a-fA-F]{6}$";
                var re = new RegExp(type);
                if (colorinput.match(re)) {
                    //set colorpicker with customer color 
                    colorContainer.colorpicker('setValue',colorinput);
                }
            }
           
        });
        
        //添加输入框
        ul.append(colordiaply);

//获取颜色选择器的变化值，同步值颜色值输入框
var colorStr=e.color.toHex();
colortext.val(colorStr);

 OK，源代码要修改的地方就这么多。

1.2修改背景填充色选择器

如果要修改背景填充色的颜色选择器，请参照上面的内容，自行修改，代码的内容也一样。

文件相对路径：ureport2-js\src\tools\BgcolorTool.js

2.编译ureport2-js项目

在vscode的终端输入命令：npm run build

 3.编译ureport2-console项目

在Eclipse中，选中“ureport2-console”项目，运行编译命令：mvn clean install -Dgpg.skip

mvn clean install -Dgpg.skip

4.验证效果

 自建springboot项目，修改POM文件的依赖包

        <!-- 公开发布的版本 -->	
  	
<!--         <dependency>
			<groupId>com.bstek.ureport</groupId>
			<artifactId>ureport2-console</artifactId>
			<version>2.0.6</version>
		</dependency>  -->
		
		<!-- 本地新编译后的版本 -->	
 		 <dependency>
			<groupId>com.bstek.ureport</groupId>
			<artifactId>ureport2-console</artifactId>
			<version>2.3.0-SNAPSHOT</version>
		</dependency>

 启动程序，查看效果

1）字体前景色

 2）背景填充色