單據(jù)架構(gòu)—實(shí)現(xiàn)頁(yè)面可配置化

本篇是對(duì)以前工作中的單據(jù)架構(gòu)實(shí)現(xiàn)做的總結(jié)，目前工作中我負(fù)責(zé)的系統(tǒng)也從零開(kāi)始實(shí)現(xiàn)了這套架構(gòu)功能。

??“單據(jù)”：金融、外貿(mào)行業(yè)術(shù)語(yǔ)，貨運(yùn)單據(jù)

??以前做外貿(mào)行業(yè)的SaaS軟件，表單字段數(shù)量之多，沒(méi)接觸過(guò)的人肯定難以想象???，F(xiàn)在在金融行業(yè)工作（也有物聯(lián)網(wǎng)、互聯(lián)網(wǎng)服務(wù)行業(yè)工作經(jīng)驗(yàn)），覺(jué)得外貿(mào)、財(cái)務(wù)、金融行業(yè)的業(yè)務(wù)相對(duì)來(lái)說(shuō)復(fù)雜度更高??，技術(shù)實(shí)現(xiàn)上也更加復(fù)雜（??沒(méi)有接觸過(guò)的請(qǐng)先了解一下再發(fā)表意見(jiàn)??）。就比如本篇要講的表單，不是想象的幾個(gè)表單字段提交那么簡(jiǎn)單，除了核心的業(yè)務(wù)數(shù)據(jù)字段還涉及到非常多的行業(yè)術(shù)語(yǔ)字段，整體復(fù)雜度一下子提升很多，而且單據(jù)類(lèi)型多樣，傳統(tǒng)的在頁(yè)面上堆字段的開(kāi)發(fā)方式顯然不適用了??。所以，就開(kāi)始在基礎(chǔ)業(yè)務(wù)架構(gòu)上進(jìn)行探索創(chuàng)新，創(chuàng)意需要想象力，感興趣請(qǐng)看下文??

1、使用場(chǎng)景及功能

1.1、使用場(chǎng)景

可用于常見(jiàn)任何表單性質(zhì)的頁(yè)面，篩選字段組件等。

1.2、功能

  1. 頁(yè)面可配置化（整體效果）

  2. 樣式排版可控制（horizontal / vertical）

  3. 增查修功能三位一體

  4. 碎片化修改

  5. 字段聯(lián)動(dòng)展示

  6. 字段參數(shù)預(yù)置

  7. ……

2、前置思考

最根本的還是組件開(kāi)發(fā)，并在此基礎(chǔ)上給組件賦能，采用自下而上的設(shè)計(jì)。

  1. 復(fù)合組件+擴(kuò)展組件+自定義組件

  2. 組件開(kāi)發(fā)三要素：屬性、事件、方法

  3. 組件的關(guān)系：依賴、聯(lián)動(dòng)

  4. 數(shù)據(jù)字典：業(yè)務(wù)字段+業(yè)務(wù)字典

    • 業(yè)務(wù)字段設(shè)置: 用于配置頁(yè)面需要顯示的字段信息

    • 業(yè)務(wù)字典設(shè)置: 用于字段枚舉值獲取顯示

  5. 業(yè)務(wù)組件： -> 架構(gòu)

    • 相似的業(yè)務(wù)活動(dòng)

    • 使用類(lèi)似的數(shù)據(jù)

    • 具有通用的處理流程

    • 通用的業(yè)務(wù)目標(biāo)

    • 是密切聯(lián)系的組織單元

  6. 最后, 模塊劃分, 后端采用RESTful接口設(shè)計(jì)風(fēng)格, 實(shí)現(xiàn) CRUD

3、開(kāi)發(fā)流程拆解

  1. 基礎(chǔ)控件開(kāi)發(fā)（“小池子”）

    • 初始化數(shù)據(jù)填入（帶入值回顯）： initVal()

    • 更新： updata()

    • 修改事件： change()

      • 聯(lián)動(dòng)數(shù)據(jù)標(biāo)記： $emit('handleReletedFields', xxx, xxx)
      • 修改 controlData 得值，用于收集輸入值。值類(lèi)型一般是字符串、數(shù)字、布爾值、數(shù)組（多選時(shí)）

    • 重置數(shù)據(jù)： reset()

    • 移除校驗(yàn)： initVal 方法里 執(zhí)行 clearVerfy() - this.$refs.form.clearValidate()

    • 必填項(xiàng)校驗(yàn)： verifyForm() prop屬性

    • 控件數(shù)據(jù)獲?。?/p>

      • 獲取碼值配置數(shù)據(jù) - 業(yè)務(wù)字典
      • 普通接口獲取業(yè)務(wù)數(shù)據(jù)
      • vuex 存儲(chǔ)的碼值數(shù)據(jù)

    • 收集控件并暴露給收發(fā)組件使用

    • 排版樣式處理

  1. 控件收發(fā)控制 （“三通”）

    • 以動(dòng)態(tài)組件方式實(shí)現(xiàn)數(shù)據(jù)流的收發(fā)

    • 初始化數(shù)據(jù)： initData()，調(diào)用基礎(chǔ)控件的 initVal()方法，或者 updata()方法

    • 重置數(shù)據(jù)： reset() 調(diào)用基礎(chǔ)控件的 reset()方法

    • 提交數(shù)據(jù)： submit()

      • 調(diào)用基礎(chǔ)控件的 verifyForm()方法驗(yàn)證必填項(xiàng)，如果沒(méi)有填寫(xiě)，則進(jìn)行滾動(dòng)定位到需要填寫(xiě)的組件(offsetTop)
      • 控件輸入值收集： 提取各個(gè)業(yè)務(wù)字段的 controlData 值，組裝表單信息

    • 數(shù)據(jù)聯(lián)動(dòng)： handleReletedFields()

      • 調(diào)用聯(lián)動(dòng)控件的 initVal()方法實(shí)現(xiàn)數(shù)據(jù)聯(lián)動(dòng)

  1. 具體業(yè)務(wù)組件 （數(shù)據(jù)流“主管道”，總線）

    • 業(yè)務(wù)字段信息組裝，props傳遞給收發(fā)控制組件

    • 提交數(shù)據(jù)： submitForm() 調(diào)用收發(fā)控制組件的 submit() 方法，拿到業(yè)務(wù)字段輸入信息。

4、控件參數(shù)（業(yè)務(wù)字段配置）

下面是單個(gè)控件的參數(shù)配置, ??要實(shí)現(xiàn)整個(gè)頁(yè)面的可配置化, 需要配置業(yè)務(wù)字段

{
  "fieldLabel": "控件名稱"，
  "showLabel": true, // 是否顯示label
  "fieldName": "appId",
  "controlName": "SingleSelectDownBox",
  "controlData": "",
  "defaultValue": "",
  "defaultOptions": "",
  "localVuexDictData": true, // 控件數(shù)據(jù)是否從vuex里獲取
  "remoteDictOptionsData": false, // 控件數(shù)據(jù)是否從接口里獲取
  "remoteOtherApi": "", // 單獨(dú)接口獲取，在api里面定義的名稱，采用策略模式使用
  "labelWidth": "100px",
  "rightWidth": "220px",
  "labelPosition": "right",
  "isNotNull": 0,
  "placeholder": "",
  "dictKey": "OperateTypeEnum",
  "keyCode": "dictCode",
  "controlSize": "100%",
  "column": "1",
  "readonly": false,
  "relatedFields": "platformCheckStatus=platformCheckStatus;" // 多個(gè)關(guān)聯(lián)字段用;分割
  "clearable": false,
  "editable": false
}

4.1、頁(yè)面業(yè)務(wù)字段配置示例

5、聯(lián)動(dòng)字段配置說(shuō)明

"relatedFields": "platformCheckStatus=aaa;customField=bbb"

// 或者
"relatedFields": "platformCheckStatus=platformCheckStatus;customField=customField"

platformCheckStatus=aaa

  • ”=“左邊的platformCheckStatus，表示當(dāng)前字段要關(guān)聯(lián)的字段名稱，

  • ”=“右邊的aaa，表示回傳信息的鍵名，用于確定關(guān)聯(lián)字段要顯示的值。

const info = {
  aaa: 'xiao',
  bbb: 'xixi',
  // platformCheckStatus: '',
  // customField: '',
}
this.$emit('handleReletedFields', info, this.itemData.relatedFields);

6、字典值配置

多用于單選、多選、級(jí)聯(lián)框備選項(xiàng)數(shù)據(jù)，以下是字典數(shù)據(jù)結(jié)構(gòu)??

data: [{
    "alias": "scale",
    "dictCode": 2,
    "dictItems": [
        {
            "dictItem": [],
            "dictItemCode": 1,
            "id": 512323,
            "inUse": 1,
            "itemEnName": "1-5 people",
            "itemName": "1-5人",
            "itemValue": ""
        },
        {
            "dictItem": [],
            "dictItemCode": 2,
            "id": 512324,
            "inUse": 1,
            "itemEnName": "6-10 people",
            "itemName": "6-10人",
            "itemValue": ""
        }
    ],
    "dictName": "規(guī)模",
    "id": 2,
    "moduleCode": "A001",
    "sortOrder": 0
}]

最后

架構(gòu)設(shè)計(jì)要遵循三個(gè)設(shè)計(jì)原則:

  1. 不多也不少 (架構(gòu)都是適合當(dāng)時(shí)的情況, 解決當(dāng)時(shí)的問(wèn)題, 重要的是不做過(guò)多設(shè)計(jì), 這是一個(gè)陷阱)

  2. 演進(jìn)式 (根據(jù)變化及時(shí)改進(jìn)和調(diào)整架構(gòu))

  3. 持續(xù)性 (自身的能力也是逐步提升的, 設(shè)計(jì)的時(shí)候需要為未來(lái)改進(jìn)留下一定的空間)

我是 甜點(diǎn)cc

熱愛(ài)前端開(kāi)發(fā)，也喜歡專(zhuān)研各種跟本職工作關(guān)系不大的技術(shù)，技術(shù)、產(chǎn)品興趣廣泛且濃厚。本號(hào)主要致力于分享個(gè)人經(jīng)驗(yàn)總結(jié)，希望可以給一小部分人一些微小幫助。

希望能和大家一起努力營(yíng)造一個(gè)良好的學(xué)習(xí)氛圍，為了個(gè)人和家庭、為了我國(guó)的互聯(lián)網(wǎng)物聯(lián)網(wǎng)技術(shù)、數(shù)字化轉(zhuǎn)型、數(shù)字經(jīng)濟(jì)發(fā)展做一點(diǎn)點(diǎn)貢獻(xiàn)。數(shù)風(fēng)流人物還看中國(guó)、看今朝、看你我。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容