前言
公司有一個專案在維護，大概有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框架中有應用，參見幾個框架的表格規範。
根據業務總結規範
對規範有了認識，按照原子設計概念，劃分粒度較小的元件。
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>
複製程式碼4. 功能流程確定
- 選擇要展示元件
- 確定表格型別
- 編輯各個元件資料
- 預覽
- 匯出html檔案（暫未製作）
總結
在表單和表格的生成工具開發過程中，我們都是先實現功能，然後再反過來整理頁面的sass檔案，像欄位最長最短個數影響展示樣式這樣的問題都是等功能都實現了才發現有問題，導致返工和修改，後續開發順序最好如下：
- 視覺規範整理
- 元件狀態與欄位規則整理
- html+scss元件、頁面測試 元件文件編寫
- 開發頁面生成工具
啟發與後續
目前頁面很醜，功能上也有很多bug，但是思路是可行的，而且開發難度也不是很高，效率與質量有保證，後續希望使用Node+mongoDB+Vue全棧開發出常用頁面型別生成工具，借鑑資料百度FEX的吳多益大神的PPT，不過百度的產品並沒有開源，商業化了，
Ant Design框架頁面是按照 功能=>模板=>元件 來劃分的，
具體實現思路還要整理清晰，以方便展開下步工作，如果你願意和我們一起完成，或者有更好的思路，歡迎一起討論.
奔3了，時日不多，要加緊努力了。