记表格设计规范整理与页面可视化生成工具开发

前言

公司有一个项目在维护，大概有300左右，其中表单与表格的页面占比大概百分之五六十，为了节省开发时间，避免多人协作时，出现多套冗余代码，我们尝试写了一下表单和表格的生成工具，从梳理到规范学习再到总结，收获很多，写一下笔记与大家分享。

表单生成，使用Express mongoDB jquery编写

1. 表格生成

2. 表格预览

表格生成预览

1. 选择生成组件

2. 编辑组件数据

3. 表格编辑

4. 预览页面

下文仅对表格生成工具的规范梳理和工具开发做介绍。

现有页面梳理

把所有页面涉及到表格的页面全部截图110个，然后再查找规则，大致分为5种类型页面。

常规操作：56个
批量操作：11个
TAB样式：4个
特殊样式：30个

常规页面

批量操作

TAB样式

特殊样式

根据样式粗略的分类，查询条件有一丁点规则，会根据字段内容自己换行，并没有发现可复用规则。

感觉遇到瓶颈，于是开始学习表格的设计规范。

表格设计规范学习

以下链接是表格设计规范的学习资料。

设计更好的数据表格设计 (Data Table)
数据表格设计｜从功能、交互和 UI 进行全方位分析
Web 页面中的表格设计，远没那么简单
数据表格设计指南
数据表的用户界面最佳设计：设计结构、交互模式、技术列表浅析

收获知识点如下，学习完表格设计规范后，知道了如何根据自己的业务场景选择UI框架和组件，也发现一些框架的瑕疵，比如数字类型有小数点，要保持小数点位数一致，右侧对齐，在Element框架文档中就存在这个问题，当然，并不是鸡蛋里挑骨头，可能由于时间或者其他因素没有完善。

表格对字体的要求
标题与对齐规则
7±2定律
筛选与搜索
批量操作与记录所选项
反馈
长内容展示
空单元格处理
分割线的使用
实时筛选与交叉筛选
判断是否使用固定列表
横向对比与竖向对比
全选案例
筛选勾选
批量操作与单项操作
顶部批量操
悬停操作
行内编辑
快速浏览

很多知识点在UI框架中有应用，参见几个框架的表格规范。

Ant Design 表格
Element UI 表格
iView 表格

根据业务总结规范

对规范有了认识，按照原子设计概念，划分粒度较小的组件。

tomic Design原子设计理念：构建科学规范的设计系统

标题组件
TAB组件
上传下载组件
详情展示组件
查询条件组件
提示文字组件
表格组件
分页组件
提交按钮组件

按照思路整理以后，发现我们的UI设计也应用了很多交互规范，比如根据场景区分复杂分页与简单分页、批量操作与单项操作、行内编辑与提交编辑等，当然，也有很多不规范的地方，比如上传下载不统一、TAB样式多个、详情展示样式多个。

标题样式与TAB样式，按钮样式

上传下载样式

起止日期与选项标题

根据组件分类并整理出每个组件的不同状态后，和需求设计组的老大一块讨论，是否可以根据现有场景做一些优化和规则制定，结果很令人满意，初步组件规则协定好，去掉不规范的交互效果，需求设计组声明以后也会按照规则产出原型。

规则制定好后，犯懒的想法愈发严重，何不开发一个自动生成工具，能保证代码质量和规范，效率也更高。

页面生成工具开发

以前编写的表单生成工具尝到了一些甜头，有一些积累和总结，基于上次的经验，我们开始了本次的工作内容划分。

1. 技术选型 上次使用jquery开发，需要在DOM和数据间来回操作，很麻烦，这次准备用vue开发，效率很高，2个人几天就完成了，虽然仅仅是初版，另外使用表单生产工具之前，都要搭建node MongoDB的环境，很不方便，我们暂时不打算存储页面数据，去掉服务端和数据库。

2. 数据结构定义 要保证每个组件的数据和类型有地方存储，以及未来扩展和维护的成本。

export const TABLE_JSON = {"title": "保障层级变更",  //标题数据"tab": ['保单','会交单'], //tab数据"download":[            //上传下载操作{label:'上传清单人员模板',buttonText:'点击下载'},{label:'批量修改模板',buttonText:'点击下载'},{label:'导入修改信息',buttonText:'导入'},{label:'批量导入',buttonText:'导入'}],"search": [ //查询条件{label:'团体保单号',dataType:'input',isRequired:true,placeholder:'请输入',value:''},{label:'证件类型',dataType:'select',isRequired:false,placeholder:'请选择',value:['军官证','身份证','居住证']},{label:'统计日期',dataType:'date',isRequired:false,placeholder:'请选择',value:'2015-10-11'},{label:'起止日期',dataType:'StartToEnd',isRequired:false,placeholder:['选择开始日期','选择结束如期'],value:['2017-02-11','2017-10-11']},{dataType:'button',value:'查询'},{dataType:'button',value:'重置'}],"info": [ //详情展示{label:'投保单位名称',val:'东风汽车有限公司'},{label:'团体保单号',val:'88681433942'},{label:'保险期间',val:'自2014-07-29 零时起 至 2015-07-28 二十四时 止'},{label:'保单状态',val:'承保'},{label:'总赔付金额',val:'1000元'},{label:'总赔付人数空',val:'10'}],"note": {val:'注：查询案件状态为回退修改时，请按照回退意见补充或修改申请材料后再提交，时效以最终同意受理日开始计算。',type:'normal'},  //提醒文字  类型：normal,warning,danger"table": [ //表格数据// {// "type": 1,// "thead": [],// "tbody": []// }{"type": 1,"thead": ['t1','t2','t3'],"tbody": [[{"type": 1,"icon": "","nodes": ['c1']},{"type": 2,"icon": "","nodes": ['c2']},{"type": 1,"icon": "","nodes": ['c3']}]]},{"type": 2,"thead": ['d1','d2','d3'],"tbody": [[{"type": 1,"icon": "","nodes": ['a1']},{"type": 2,"icon": "","nodes": ['a2']},{"type": 1,"icon": "","nodes": ['a3']}]]}],"pagination": {type:'simple'}, //分页以及类型"button": [ //按钮与类型{type:'dafult',buttonText:'上一步'},{type:'warning',buttonText:'确认加入'},{type:'primary',buttonText:'返回'},{type:'info',buttonText:'上一步'}]
}

3. 功能拆分 实现的思路是父组件存储所有数据，展示元素引用子组件，每个组件除展示外，要配套一个弹框来修改数据，点击确定后将数据提交给父组件，这样团队也可以多人开发，父组件只是负责存储和展示数据，灵活度高。

目录结构图，pages内放置要的主编辑页面，base内方放置子组件。

例：提示组件代码与预览

<template>
<div v-show="getjson != ''"><h3>提示信息内容编辑</h3><!-- 表格显示部分 --><div style="font-family:'新宋体'; font-size:12px; margin:0px 29px;  height:30px;line-height:30px;padding:10px 0px; color: #666; ">{{getjson.val}}</div><!-- 操作按钮 --><div class="controlbox"><el-button type="primary" icon="el-icon-edit" circle @click="msgBoxShow = true"></el-button><el-button type="danger" icon="el-icon-delete" @click="deleteSelf" circle></el-button></div><!-- 弹窗 --><el-dialog title="提示信息内容编辑" :visible.sync="msgBoxShow" center :show-close='false'><el-inputtype="textarea":autosize="{ minRows: 2, maxRows: 4}"placeholder="请输入内容"v-model="getjson.val"></el-input><el-select v-model="getjson.type" placeholder="请选择"><el-optionv-for="item in noteType":key="item.type":label="item.name":value="item.type"></el-option></el-select><div slot="footer" class="dialog-footer"><el-button @click="msgBoxShow = false">取 消</el-button><el-button type="primary" @click="commit">确 定</el-button></div></el-dialog></div>
</template>
<script>export default {name:"msgBox",props:['noteData'],data() {return {getjson:this.noteData,msgBoxShow: false,noteType:[{type:'normal',name:'灰色：普通消息'},{type:'warning',name:'橙色：次重要消息'},{type:'danger',name:'红色：重要消息'}],formLabelWidth: '120px',};},methods:{commit() {this.msgBoxShow = false;this.$emit('noteConfig', this.getjson)},deleteSelf(){this.getjson='';this.$emit('noteConfig', this.getjson)}}}
</script>

4. 功能流程确定

选择要展示组件
确定表格类型
编辑各个组件数据
预览
导出html文件（暂未制作）

总结

在表单和表格的生成工具开发过程中，我们都是先实现功能，然后再反过来整理页面的sass文件，像字段最长最短个数影响展示样式这样的问题都是等功能都实现了才发现有问题，导致返工和修改，后续开发顺序最好如下：

视觉规范整理
组件状态与字段规则整理
html scss组件、页面测试组件文档编写
开发页面生成工具

启发与后续

目前页面很丑，功能上也有很多bug，但是思路是可行的，而且开发难度也不是很高，效率与质量有保证，后续希望使用Node mongoDB Vue全栈开发出常用页面类型生成工具，借鉴资料百度FEX的吴多益大神的PPT，不过百度的产品并没有开源，商业化了，

Ant Design框架页面是按照 功能=>模板=>组件 来划分的，

具体实现思路还要整理清晰，以方便展开下步工作，如果你愿意和我们一起完成，或者有更好的思路，欢迎一起讨论.

奔3了，时日不多，要加紧努力了。

才疏学浅，如有问题恳请斧正。