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>

• -