本篇是对以前工作中的单据架构实现做的总结,目前工作中我负责的系统也从零开始实现了这套架构功能。
?“单据”:金融、外贸行业术语,货运单据?
以前做外贸行业的SaaS软件,表单字段数量之多,没接触过的人肯定难以想象?。现在在金融行业工作(也有物联网、互联网服务行业工作经验),觉得外贸、财务、金融行业的业务相对来说复杂度更高?,技术实现上也更加复杂(?没有接触过的请先了解一下再发表意见?)。就比如本篇要讲的表单,不是想象的几个表单字段提交那么简单,除了核心的业务数据字段还涉及到非常多的行业术语字段,整体复杂度一下子提升很多,而且单据类型多样,传统的在页面上堆字段的开发方式显然不适用了?。所以,就开始在基础业务架构上进行探索,有兴趣请看下文?
可用于常见任何表单性质的页面,筛选字段组件等。
最根本的还是组件开发,并在此基础上给组件赋能
1、 复合组件+扩展组件+自定义组件
2、 组件开发三要素:属性、事件、方法
3、 组件的关系:**依赖、联动**
4、 业务字段+业务字典
5、 **业务组件:** -> 架构
6、 最后, 模块划分, 后端采用RESTful接口设计风格, 实现 CRUD
1、 基础控件开发(“小池子”)
2、 控件收发控制 (“三通”)
3、 具体业务组件 (数据流“主管道”,总线)
下面是单个控件的参数配置, ?要实现整个页面的可配置化, 需要配置业务字段
{
"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
}
"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);
多用于单选、多选、级联框备选项数据,以下是**字典数据结构**?
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
}]
架构设计要遵循三个设计原则:
???
? 关注我,你会发现一个踏实努力的宝藏前端,持续更文,让我们一起学习,共同成长?
? 喜欢的小伙伴可以点赞收藏关注,更多请看掘金甜点cc
✨ 欢迎大家评论交流, 蟹蟹?
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。