Web项目中表单流程自定义之表单字段用户自定义

本文不是是讲的表单字段自定义的富文本编辑器的实现，而是讲在如何在实际项目中实现业务模块的表单自定义功能。
主要用到的框架有：

• SpringBootStarter
• Thymeleaf
• ModeMapper

实现的基本思路为：
- Model类实现fdExtendPath和fdExtendContent字段。其中fdExtendPath字段保存需加载的Html片段，该片段为客户自定义的，需要在新建表单时由使用者填写字段内容，编辑查看时显示出字段内容。fdExtendContent长文本字段，映射为数据库的Lob类型。用于保存Html片段的业务数据
- Form类实现fdExtendPath和fdExtendContent字段，fdExtendPath字段和Model中该字段一样。fdExtendContent为Map类型，用于将数据库中的自定义字段内容显示出来。
- 总体思路即为：客户自定义一个Html片段保存在路径A中，新建表单页面时根据该路径加载Html片段，并显示给操作员填写实际内容,表单提交后，后台将Html的业务数据摄取出来保存进数据库。编辑或查看表单页面时，从数据库中读取业务数据，并填充在Html片段的格式中。

相关类如下：
MapUtil.java用于将Map类型和Byte中转化。

public class MapUtil {    /**将Map序列化为字符串     * @param map     * @return     */    public static  byte[] serializer(Map map) {        ByteArrayOutputStream baos = new ByteArrayOutputStream();        ObjectOutputStream oos;        try {            oos = new ObjectOutputStream(baos);            oos.writeObject(map);            oos.close();        } catch (IOException e) {            // TODO Auto-generated catch block            e.printStackTrace();        }        return baos.toByteArray();     }    /**将字符串实例化为Map     * @param map     * @return     */    public static Map derializer( byte[] data) {        ObjectInputStream ois;        Map map=null;        try {            ois = new ObjectInputStream(new ByteArrayInputStream(data));            map=(Map)ois.readObject();            ois.close();         } catch (IOException | ClassNotFoundException e) {            // TODO Auto-generated catch block            e.printStackTrace();        }        return map;    }}

ModelMapperConverter类实现ModelMapper中的Convert接口，将Form和Model互转时，检查是否实现对应的接口，从而自动转换对应的值。

public class ModelMapperConverter<T1,T2> implements Converter<T1,T2> {    @Override    public T2 convert(MappingContext<T1, T2> context) {        // TODO Auto-generated method stub        T1 t1=context.getSource();        T2 t2=context.getDestination();        if (t1 instanceof IBaseExtendForm&&            t2 instanceof IBaseExtendModel) {            IBaseExtendForm _t1=(IBaseExtendForm)t1;            IBaseExtendModel _t2=(IBaseExtendModel)t2;            if (_t1.getFdExtendContent()!=null) {                _t2.setFdExtendContent(MapUtil.serializer(_t1.getFdExtendContent()));            }            _t2.setFdExtendPath(_t1.getFdExtendPath());        }        if (t1 instanceof IBaseExtendModel&&                t2 instanceof IBaseExtendForm) {            IBaseExtendModel _t1=(IBaseExtendModel)t1;            IBaseExtendForm _t2=(IBaseExtendForm)t2;            if (!StringUtils.isEmpty(_t1.getFdExtendContent())) {                _t2.setFdExtendContent(MapUtil.derializer(_t1.getFdExtendContent()));            }else {                _t2.setFdExtendContent(new HashMap());            }            _t2.setFdExtendPath(_t1.getFdExtendPath());        }        return t2;    }}

在ModelMapper中增加自定义类型转化

Converter<BzSaleContract_Add, BzSaleContract> addToModel=new ModelMapperConverter<BzSaleContract_Add, BzSaleContract>() {            @Override            public BzSaleContract convert(MappingContext<BzSaleContract_Add, BzSaleContract> context) {                // TODO Auto-generated method stub                BzSaleContract_Add form = context.getSource();                BzSaleContract model = super.convert(context);                SimpleDateFormat dateFormat=new SimpleDateFormat("yyyy-MM-dd");                model.setFdAmount(form.getFdAmount());                model.setFdCustomer(bzConsumerCustomerDao.findOne(form.getFdCustomerId()));                model.setFdName(form.getFdName());                model.setFdPaymentTerm(form.getFdPaymentTerm());                List<BzSaleContractProduct> fdProducts=new ArrayList<BzSaleContractProduct>();                for (BzSaleContractProduct_Add productItem : form.getFdProducts()) {                    BzSaleContractProduct fdProduct=modelMapper.map(productItem, BzSaleContractProduct.class);                    fdProduct.setFdContract(model);                    fdProducts.add(fdProduct);                }                model.setFdProducts(fdProducts);                model.setFdRemarks(form.getFdRemarks());                try {                    model.setFdSignDate(dateFormat.parse(form.getFdSignDate()));                } catch (ParseException e) {                    // TODO Auto-generated catch block                    e.printStackTrace();                }                model.setFdSignPlace(form.getFdSignPlace());                model.setFdLinker(bzConsumerLinkerDao.findOne(form.getFdLinkerId()));                model.setFdStaff(sysOrgPersonDao.findOne(form.getFdStaffId()));                model.setFdTemplate("");                model.setFdClue(bzSaleClueDao.findOne(form.getFdClueId()));                return model;            }        };        modelMapper.addConverter(addToModel);

Html片段，为用户自定义片段的Demo。

<!DOCTYPE html><html  xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"></head><body>    <div th:fragment="extendFragment(fdExtendContent)">        <table class="form">            <tr>                <td colspan="4" class="panelTitle">用户数据</td>            </tr>            <tr>                <td class="title">强势</td>                <td>                    <input id="fdExtendContent['fdStrong']" name="fdExtendContent['fdStrong']"                            data-dojo-type="dijit/form/TextBox" type="text" th:value="*{fdExtendContent['fdStrong']}"/>                </td>                <td class="title">弱势</td>                <td>                    <input id="fdExtendContent['fdWeak']" name="fdExtendContent['fdWeak']"                            data-dojo-type="dijit/form/TextBox" type="text" th:value="*{fdExtendContent['fdWeak']}"/>                </td>            </tr>        </table>    </div></body></html>

在新建表单或编辑表单中增加这一行，用于显示出对应的Html片段，并填充业务数据。

<tr>                        <td colspan="6">                            <div th:replace="@{__${command.fdExtendPath}__}::extendFragment(*{fdExtendContent})"></div>                        </td>                    </tr>

-