記表格設計規範整理與頁面可視化生成工具開發

時間 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>
複製代碼