单据架构+数据字典——实现页面可配置化

本篇是对以前工作中的单据架构实现做的总结，目前工作中我负责的系统也从零开始实现了这套架构功能。

?“单据”：金融、外贸行业术语，货运单据?

以前做外贸行业的SaaS软件，表单字段数量之多，没接触过的人肯定难以想象?。现在在金融行业工作（也有物联网、互联网服务行业工作经验），觉得外贸、财务、金融行业的业务相对来说复杂度更高?，技术实现上也更加复杂（?没有接触过的请先了解一下再发表意见?）。就比如本篇要讲的表单，不是想象的几个表单字段提交那么简单，除了核心的业务数据字段还涉及到非常多的行业术语字段，整体复杂度一下子提升很多，而且单据类型多样，传统的在页面上堆字段的开发方式显然不适用了?。所以，就开始在基础业务架构上进行探索，有兴趣请看下文?

1、使用场景及功能

1.1、使用场景

可用于常见任何表单性质的页面，筛选字段组件等。

1.2、功能

1. 页面可配置化
2. 样式排版可控制
3. 增查修功能三位一体
4. 碎片化修改
5. 字段联动展示
6. 字段联动展示
7. 字段参数预置
8. ……

2、前置思考

最根本的还是组件开发，并在此基础上给组件赋能

1、 复合组件+扩展组件+自定义组件

2、 组件开发三要素：属性、事件、方法

3、 组件的关系：**依赖、联动**

4、 业务字段+业务字典

• 业务字段设置: 用于配置页面需要显示的字段信息
• 业务字典设置: 用于字段枚举值获取显示

5、 **业务组件：** -> 架构

• 相似的业务活动
• 使用类似的数据
• 具有通用的处理流程
• 通用的业务目标
• 是密切联系的组织单元

6、 最后, 模块划分, 后端采用RESTful接口设计风格, 实现 CRUD

3、开发流程拆解

1、 基础控件开发（“小池子”）

• 初始化数据填入（带入值回显）： initVal()
• 更新： updata()
• 修改事件： change()
• 联动数据标记： $emit('handleReletedFields', xxx, xxx)
• 修改 controlData 得值，用于收集输入值。值类型一般是字符串、数字、布尔值、数组（多选时）
• 重置数据： reset()
• 移除校验： initVal 方法里 执行 clearVerfy() - this.$refs.form.clearValidate()
• 必填项校验： verifyForm() prop属性
• 控件数据获取：
• 获取码值配置数据 - 业务字典
• 普通接口获取业务数据
• vuex 存储的码值数据
• 收集控件并暴露给收发组件使用
• 排版样式处理

2、 控件收发控制 （“三通”）

• **以动态组件方式实现数据流的收发**
• 初始化数据： initData()，调用基础控件的 initVal()方法，或者 updata()方法
• 重置数据： reset() 调用基础控件的 reset()方法
• 提交数据： submit()
• 调用基础控件的 verifyForm()方法验证必填项，如果没有填写，则进行滚动定位到需要填写的组件(offsetTop)
• 控件输入值收集： 提取各个业务字段的 controlData 值，组装表单信息
• 数据联动： handleReletedFields()
• 调用联动控件的 initVal()方法实现数据联动

3、 具体业务组件 （数据流“主管道”，总线）

• 业务字段信息组装，props传递给收发控制组件
• 提交数据： submitForm() 调用收发控制组件的 submit() 方法，拿到业务字段输入信息。

4、控件参数（业务字段配置）

下面是单个控件的参数配置, ?要实现整个页面的可配置化, 需要配置业务字段

{

  "fieldLabel": "控件名称"，

  "showLabel": true, // 是否显示label

  "fieldName": "appId",

  "controlName": "SingleSelectDownBox",

  "controlData": "",

  "defaultValue": "",

  "defaultOptions": "",

  "localVuexDictData": true, // 控件数据是否从vuex里获取

  "remoteDictOptionsData": false, // 控件数据是否从接口里获取

  "remoteOtherApi": "", // 单独接口获取，在api里面定义的名称，采用策略模式使用

  "labelWidth": "100px",

  "rightWidth": "220px",

  "labelPosition": "right",

  "isNotNull": 0,

  "placeholder": "",

  "dictKey": "OperateTypeEnum",

  "keyCode": "dictCode",

  "controlSize": "100%",

  "column": "1",

  "readonly": false,

  "relatedFields": "platformCheckStatus=platformCheckStatus;" // 多个关联字段用;分割

  "clearable": false,

  "editable": false

}

4.1、页面业务字段配置示例

image.png

5、联动字段配置说明

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

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

platformCheckStatus=aaa中”=“左边的platformCheckStatus，表示当前字段要关联的字段名称，”=“右边的aaa，表示回传信息的键名，用于确定关联字段要显示的值。

const info = {
  aaa: 'xiao',
  bbb: 'xixi',
  // platformCheckStatus: '',
  // customField: '',
}

this.$emit('handleReletedFields', info, this.itemData.relatedFields);

6、字典值配置

多用于单选、多选、级联框备选项数据，以下是**字典数据结构**?

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": "规模",

    "id": 2,

    "moduleCode": "A001",

    "sortOrder": 0

}]

最后

架构设计要遵循三个设计原则:

1. 不多也不少 (架构都是适合当时的情况, 解决当时的问题, 重要的是不做过多设计, 这是一个陷阱)
2. 演进式 (根据变化及时改进和调整架构)
3. 持续性 (自身的能力也是逐步提升的, 设计的时候需要为未来改进留下一定的空间)

???

? 关注我，你会发现一个踏实努力的宝藏前端，持续更文，让我们一起学习，共同成长?

? 喜欢的小伙伴可以点赞收藏关注，更多请看掘金甜点cc

✨ 欢迎大家评论交流， 蟹蟹?