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

时间  2019-11-24
标签 表格 设计规范 整理 页面 可视化 生成 工具 开发 栏目 设计模式 繁體版
原文   原文链接

前言

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

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

1. 表格生成 css

2. 表格预览 html

表格生成预览

1. 选择生成组件 vue

2. 编辑组件数据 java

3. 表格编辑 node

4. 预览页面 jquery

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

现有页面梳理

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

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

常规页面 json

批量操做

TAB样式

特殊样式

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

感受遇到瓶颈，因而开始学习表格的设计规范。

表格设计规范学习

如下连接是表格设计规范的学习资料。

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

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

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

根据业务总结规范

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

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

  • 标题组件

  • TAB组件

  • 上传下载组件

  • 详情展现组件

  • 查询条件组件

  • 提示文字组件

  • 表格组件

  • 分页组件

  • 提交按钮组件

按照思路整理之后，发现咱们的UI设计也应用了不少交互规范，好比根据场景区分复杂分页与简单分页、批量操做与单项操做、行内编辑与提交编辑等，固然，也有不少不规范的地方，好比上传下载不统1、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>
复制代码

4. 功能流程肯定

  1. 选择要展现组件
  2. 肯定表格类型
  3. 编辑各个组件数据
  4. 预览
  5. 导出html文件（暂未制做）

总结

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

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

启发与后续

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

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

具体实现思路还要整理清晰，以方便展开下步工做，若是你愿意和咱们一块儿完成，或者有更好的思路，欢迎一块儿讨论.

奔3了，时日很少，要加紧努力了。

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

源码地址
查询页面

表单工具

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程