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

前言

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

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

1. 表格生成

2. 表格预览

表格生成预览

1. 选择生成组件

2. 编辑组件数据

3. 表格编辑

4. 预览页面

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

现有页面梳理

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

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

常规页面

批量操作

TAB样式

特殊样式

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

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

表格设计规范学习

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

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

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

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

根据业务总结规范

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

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-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="getjson.val">
    </el-input>
    <el-select v-model="getjson.type" placeholder="请选择">
    <el-option v-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>