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

  - 

这里贴上代码，点击取消，取消对年龄的校验结果。
 

<template>
  <div>
    <el-form ref="formRules" :model="form" :rules="rules" :inline="true">
      <el-form-item prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item prop="age" ref="ageForm">
        <el-input v-model="form.age"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="validate">验证</el-button>
        <el-button type="primary" @click="cancelFieldValidate">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    name: `clearFieldValidate`,
    data () {
      return {
        formRules: '',
        form: {
          name: '',
          age: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入姓名！', trigger: 'blur' }
          ],
          age: [
            { required: true, message: '请输入年龄！', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      validate () {
        this.$refs.formRules.validate(valid => {
          if (valid) {
            this.$message.success('(^o^)~ 验证成功！')
          } else {
            this.$message.error('-_- 验证失败！')
          }
        })
      },
      cancelFieldValidate () {
        this.$refs['ageForm'].clearValidate() // 清除年龄的验证
      }
    }
  }
</script>


 

 

 
layui Form表单字段过滤

 
在利用layui + thinkphp 做网页设计时，通常会遇到一个Form表单字段过多的情况，但是有些字段是数据库中没有的，或者说是不需要的。举个栗子：
 
在使用 layui 的图片上传功能时，默认的字段是file。html文件如下：
 但是如果你数据库中存放图片的属性是img怎么办：
 
1. 在图片上传函数中修改字段，在里面的 field 字段中设置 field = img, 那么表单此处上传数据的字段名就是img了：2. 直接在数据库中修改 img 字段表头为 file , 这样也行，但不望文知义，并不推荐。
 
3. 添加一个隐藏字段，如下：
 那么此时，这个上传图片这块就包含两个字段，一是 file ，另外一个是 img。
 img 是我们需要的， file 字段此时就是多余的。
 
其实表单字段多余还有情况，这里只是举例说明。
 
还好在php端有处理方案，在form的表单数据提交到后台php端验证时候，此时可以使用 strict函数 过滤掉多余的字段。
 
注： 如果不加strict的话，那么做数据库插入、更新数据时，就是严格的对应字段名了，否则会报错POST 500错误

 
 
 
 
​
<template>
  <div class="content-container">
    <div class="content-operate">
      <el-form :inline="true"  class="search-form-inline" label-position="right">
        <div class="content-col">
          <el-form-item label="登录账号">
            <el-input
              class="content-col-input"
              v-model="account"
              @keyup.enter.native="enterSearch()"
              @blur="inputTrimProp('account')"
              maxlength="50"
              placeholder="请输入登录账号搜索">
            </el-input>
          </el-form-item>
        </div>
        <div class="content-col">
          <el-form-item label="姓名">
            <el-input class="content-col-input"
              v-model="userName"
              @keyup.enter.native="enterSearch()"
              @blur="inputTrimProp('userName')"
              maxlength="20"
              placeholder="请输入姓名搜索">
            </el-input>
          </el-form-item>
        </div>
        <div class="content-col">
          <el-form-item label-width="80px">
            <el-button type="primary" class="el-button-reset" @click="queryData">查询</el-button>
            <el-button class="el-button-reset" @click="searchReset">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="table">
      <el-table
        ref="multipleTable"
        :data="managers"
        style="width: 100%; font-size: 13px;">
        <el-table-column
          align="left"
          prop="account"
          label="登录账号"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          align="left"
          label="姓名"
          prop="userName"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          label="角色"
          width="200">
          <template slot-scope="scope">
            <el-tooltip placement="top">
              <div class="contentMore">
                <span v-for="(role, index) in scope.row.roles" :key="index">
                  {{role.roleName}}<span v-if="index !== (scope.row.roles.length - 1)">,</span>
                </span>
              </div>
              <div slot="content">
                <span v-for="(role, index) in scope.row.roles" :key="index">
                  {{role.roleName}}<span v-if="index !== (scope.row.roles.length - 1)">,</span>
                </span>
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          label="管理范围"
          prop="orgName"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          align="left"
          label="上次登录时间"
          width="150">
          <template slot-scope="scope">
            <span v-text="scope.row.lastLogin ? scope.row.lastLogin.slice(0, 10) : '' "></span>
           <!-- 也可以这么写<span {{scope.row.lastLogin ? scope.row.lastLogin.slice(0, 10) : ''}} ></span> -->
          </template>
        </el-table-column>
        <el-table-column
          width="100px"
          label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1">正常</span>
            <span v-if="scope.row.status === 0">禁用</span>
          </template>
        </el-table-column>
        <el-table-column
          width="200"
          label="操作">
          <template slot-scope="scope">
            <el-button class="operate" @click="forbidden(scope.row.orgManagerId, 0)" type="text" v-if="scope.row.status === 1">禁用</el-button>
            <el-button class="operate" @click="use(scope.row.orgManagerId, 1)" type="text" v-if="scope.row.status === 0">启用</el-button><div class="segment">|</div>
            <el-button class="operate" @click="editManager(scope.row)" type="text">编辑</el-button><div class="segment">|</div>
            <el-button class="operate" @click="deleteUserConfirm(scope.row.orgId, scope.row.userId)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @current-change="getManagers"
        :current-page.sync="pageIndex"
        :page-size="pageNum"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog title="编辑管理员" width="590px" :visible.sync="dialogVisible" class="dialog-set">
      <el-form :model="adminForm" ref="adminForm" :rules="adminRoles" label-width="79px" >
        <el-form-item label="角色" prop="roleIds">
          <div class="dialog-set-role" ref='roleRef' id="roleId">
            <el-checkbox-group v-model="adminForm.roleIds" class="dialog-set-role-check">
              <el-checkbox v-for="role in allRole" :label="role.roleId" :key="role.roleId">{{role.roleName}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item label="管理部门" prop="orgId">
          <div class="dialog-set-org">
            <el-tree
              ref="depTree"
              :data="orgTree"
              node-key="orgId"
              accordion
              :highlight-current='true'
              default-expand-all
              :props="defaultProps"
              @node-click="selectDep">
            </el-tree>
          </div>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            :rows="4"
            v-model="adminForm.remark"
            maxlength="100"
            placeholder="请输入内容,100字以内">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="el-button-reset" @click="restForm('adminForm')">取 消</el-button>
        <el-button class="el-button-reset" type="primary" @click="setAdmin('adminForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import manageApi from '@/api/manageApi';
import depApi from '@/api/depApi';
import userApi from '@/api/userApi';

export default {
  name: 'MenuTable',
  data() {
    const checkRoles = (role, value, callback) => {
      if (value.length === 0) {
        this.$refs.roleRef.style.borderColor = '#f56c6c';
        return callback(new Error('请至少选择一个角色'));
      }
      this.$refs.roleRef.style.borderColor = '#DCDFE6';
      return callback();
    };
    return {
      // 分页（当前页码、每页数据条数、全部数据条数）
      pageIndex: 0,
      pageNum: 10,
      total: 0,
      // 搜索条件
      account: '',
      userName: '',
      // 管理员数组
      managers: [],
      // 编辑管理员窗口
      dialogVisible: false,
      // 当前操作的管理员对象
      nowManage: {},
      // 编辑的管理员的对象
      adminForm: {
        roleIds: [],
        remark: '',
        orgId: '',
        userId: '',
      },
      // 存储全部角色
      allRole: [],
      // 组织树
      orgTree: [],
      defaultProps: {
        children: 'childs',
        label: 'orgName',
      },
      // 管理员编辑表单校验
      adminRoles: {
        roleIds: [
          // { type: 'array', required: true, message: '请至少选择一个角色', trigger: 'change' },
          { validator: checkRoles, trigger: 'change' },
        ],
        orgId: [
          { required: true, message: '请选择管理的部门', trigger: 'change' },
        ],
      },
    };
  },
  methods: {
    inputTrimProp(prop) {
      this[prop] = this[prop].trim();
    },
    enterSearch() {
      this.inputTrimProp('account');
      this.inputTrimProp('userName');
      this.queryData();
    },
    queryData() {
      this.pageIndex = 1;
      this.getManagers();
    },
    // 将搜索条件重置后查询管理员
    searchReset() {
      this.userName = '';
      this.account = '';
      this.pageIndex = 1;
      this.getManagers();
    },
    // 获取全部的管理员
    getManagers() {
      const params = {
        params: {
          userName: this.userName,
          account: this.account,
          pageIndex: this.pageIndex - 1,
          pageNum: this.pageNum,
        },
      };
      manageApi.getManagers({
        params,
      }).then((reponse) => {
        if (reponse.state === 0) {
          this.managers = reponse.data.data;
          this.total = reponse.data.count;
        } else {
          this.$message.error(reponse.message);
        }
      }).catch((err) => {
        this.$message.error(err.message);
      });
    },
    forbidden(orgManagerId, status) {
      this.$confirm('确定禁用该管理员?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const params = {
          params: {
            orgManagerId,
            status,
          },
        };
        manageApi.forbidden({
          params,
        }).then((reponse) => {
          if (reponse.state === 0) {
            this.$message({
              type: 'success',
              message: '已禁用管理员',
            });
            this.getManagers();
          } else {
            this.$message.error(reponse.message);
          }
        }).catch((err) => {
          this.$message.error(err.message);
        });
      }).catch(() => {

      });
    },
    use(orgManagerId, status) {
      this.$confirm('确定启用该管理员？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const params = {
          params: {
            orgManagerId,
            status,
          },
        };
        manageApi.forbidden({
          params,
        }).then((reponse) => {
          if (reponse.state === 0) {
            this.$message({
              type: 'success',
              message: '已启用管理员',
            });
            this.getManagers();
          } else {
            this.$message.error(reponse.message);
          }
        }).catch((err) => {
          this.$message.error(err.message);
        });
      }).catch(() => {
      });
    },
    deleteUserConfirm(orgId, userId) {
      this.$confirm('确定删除管理员？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.deleteUser(orgId, userId);
      }).catch(() => {
      });
    },
    deleteUser(orgId, userId) {
      const params = {
        params: {
          orgId,
          userId,
        },
      };
      manageApi.deleteUser({
        params,
      }).then((reponse) => {
        if (reponse.state === 0) {
          this.$message({
            type: 'success',
            message: '已删除管理员',
          });
        } else {
          this.$message.error(reponse.message);
        }
      }).catch((err) => {
        this.$message.error(err.message);
      });
      this.getManagers();
    },
    // 编辑管理员
    editManager(manager) {
      this.dialogVisible = true;
      this.nowManage = manager;
      this.adminForm.roleIds = this.nowManage.roles;
      this.adminForm.roleIds = [];
      for (let i = 0; i < this.nowManage.roles.length; i += 1) {
        this.adminForm.roleIds.push(this.nowManage.roles[i].roleId);
      }
      this.adminForm.remark = this.nowManage.remark;
      this.adminForm.orgId = this.nowManage.orgId;
      this.getAllRole();
      this.getAllOrg();
    },
    // 获取全部角色
    getAllRole() {
      const params = {
        params: {
          searchKeyword: '',
        },
      };
      userApi.getRole({
        params,
      }).then((data) => {
        if (data.state === 0) {
          this.allRole = data.data;
        }
      }).catch(() => {
        this.$message({
          message: '获取角色不成功',
          type: 'warning',
        });
      });
    },
    // 查找全部部门
    getAllOrg() {
      depApi.getAllOrg().then((response) => {
        if (response.state === 0) {
          this.orgTree = response.data;
          // 设置部门默认选中
          const defSelect = [];
          defSelect[0] = this.nowManage.orgId;
          this.$nextTick(() => {
            this.$refs.depTree.setCurrentKey(defSelect[0]);
          });
        } else {
          this.$message.error(response.message);
        }
      }).catch(() => {
      });
    },
    selectDep(data) {
      this.adminForm.orgId = data.orgId;
    },
    setAdmin(formName) {
      const params = {
        data: {
          orgId: this.adminForm.orgId,
          orgManagerId: this.nowManage.orgManagerId,
          remark: this.adminForm.remark,
          roleIds: this.adminForm.roleIds,
          userId: this.nowManage.userId,
        },
      };
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogVisible = false;
          manageApi.setAdmin({
            params,
          }).then((response) => {
            if (response.state === 0) {
              this.$message({
                message: '管理员信息已编辑',
                type: 'success',
              });
              this.getManagers();
              this.$refs[formName].resetFields();
            }
          }).catch((error) => {
            console.log(error);
          });
          return true;
        }
        return false;
      });
    },
    restForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false;
    },
  },
  mounted() {
    this.getManagers();
  },
};

</script>

<style lang="less" scoped>
.content-container {
  padding: 0 20px;
  background: #fff;
  overflow: hidden;
}
.content-col{
  width: 33.33%;
  float: left;
}
.content-col .el-form-item{
  margin-bottom: 0px;
  width: 100%;
}
.content-row {
  overflow: hidden;
}
.content-col-input {
  width: 100%;
}
.fl {
  float: left;
}

.fr {
  float: right;
}

.content-row--classify {
  padding: 4px 0 22px 0;
  border-bottom: 1px dashed #ebeef5;
}
.content-row--tool-first {
  margin-top: 26px;
}
.content-row--operate {
  margin-bottom: 6px;
}
.content-row--tool {
  margin-bottom: 20px;
}

.content-tool {
  padding: 20px;
  border: 1px solid #ebeef5;
  background: #fff;
  font-size: 14px;
  color: #606266;
  overflow: hidden;
}

.content-tool--title {
  margin-right: 12px;
  height: 36px;
  line-height: 36px;
  width: 44px;
}
.content-tool--input {
  width: calc(100% - 250px);
  height: 36px;
}
.content-tool--input input {
  height: 36px;
  line-height: 36px;
}
.content-tool--operate {
  float: left;
  margin-left: 20px;
}
.content-tool--qry {
  width: 80px;
}
.content-tool--reset {
  width: 80px;
  margin-left: 10px;
}

.set-ellipesd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-tool--nav {
  width: 100%;
  float: left;
}

.content-operate {
  padding: 27px 20px;
  overflow: hidden;
  border: 1px solid #EBEEF5;
  margin-bottom: 20px;
}
.content-operate--add {
  width: 80px;
  float: left;
}
.content-operate--input {
  float: right;
  width: 272px;
  height: 36px;
}
.edit-operation {
  color: #20A0FF;
  font-size: 14px;
  padding-left: 10px;
  padding-right: 10px;
  border-left: 1px solid #EBEEF5;
  cursor: pointer;
}
.edit-operation:first-child {
  padding-left: 0px;
  padding-right: 10px;
  border-left: 0px solid #EBEEF5;
}
.edit-operation:last-child {
  padding-left: 10px;
  padding-right: 0px;
}
.block {
  float: right;
  margin-left: -5px;
  margin-top: 20px;
}
.contentMore {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.operate {
  float: left;
  padding: 4px 0px 0px 0px;
}
.segment {
  float: left;
  position: relative;
  color: #EBEEF5;
  margin-left: 10px;
  margin-right: 10px;
}
.dialog-set {
  &-role {
    height: 125px;
    width: 470px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    overflow: auto;
    margin-right: 0px;
    &-check {
      .el-checkbox {
        margin: 0px;
        width: calc(50% - 20px);
        float: left;
        padding-left: 20px
      }
    }
  }
  &-org {
    height: 150px;
    width: 470px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    overflow: auto;
    margin-right: 0px;
    .el-tree {
      margin: 11px 14px
    }
  }
  &-remark {
    height: 100px;
    width: 470px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    margin-right: 0px;
  }
}
</style>

<style>
.search-form-inline .el-form-item__content{
  width: 70%;
}
</style>

​
 
删除form表单中的某个字段，直接用delete。
 
adminForm: {
        roleIds: [],
        remark: '',
        orgId: '',
        userId: '',
      },

delete this.adminForm.remark ;