菜单的第一层是按照项目或行业的维度划分,每个下面分为组件和模板两个大模块,每个大模块下面是具体的组件。该结构设计的初衷是方便开发和其他项目使用,在后面做
SASS 平台
后,通过勾选菜单中的模块,扁平化生成对应的目录,在开发时只需要关注已选的目录下的props
、widgets
、templates
三个模块即可。
├── src # 源码目录
│ │── components # 设计器,渲染器等系统支撑需要的内容
│ │── designer # 设计器
│ │── props # 默认的属性配置
│ │── name-editor
│ │── index.vue # 属性组件的页面
│ └── index.json # 属性组件的配置
│ └── index.vue # props配置页面,根据加载字段配置的editor属性会决定取该目录下默认的还是组件中自定义的
│ │── tools # 存放平台工具按钮
│ │── import-json.vue
│ │── export-json.vue
│ └── export-sfc.vue
│ │── events.vue
│ │── actions.vue
│ │── data-source.vue
│ └── global.vue
│ │── render # 渲染器
│ └── index.vue
│ └── v-easy-form # 数据表格需要的表单组件
│ │── platform # 基础平台
│ │── props # 属性文件
│ │── input-props
│ └── input-custom-editor
│ │── index.vue # 自定义属性组件的页面
│ └── index.json # 自定义属性组件的配置
│ │── widgets # 组件设计文件
│ │── input-widget
│ │── index.vue # 组件文件
│ └── index.json # 组件配置
│ └── templates # 模板文件
│ │── form-template # 表单模板
│ │── form-1.json # 单列表单
│ │── form-2.json # 多列表单
│ └── form-3.json # 标签页表单
│ └── index.json # 基础平台的配置信息,主要包含组件和模板的配置信息,系统启动后会加载此配置整合到菜单中
│ │── platform-hosp # 医院平台
│ │── props # 属性文件
│ │── widgets # 组件设计文件
│ └── templates # 模板文件
│ └── index.json # 医院平台的配置信息,主要包含组件和模板的配置信息,系统启动后会加载此配置整合到菜单中
│ │── lang # i18n国际化
│ │── layout # 设计器布局
│ │── mixins # 设计器组件需要混入的脚本
│ │── store # 设计器需要用到的状态管理
│ │── styles # 样式
│ │── themes # 主题,用:root变量,支持换肤
│ │── utils # 工具
│ │── App.vue # 设计器入口页面
│ │── main.js # 入口js
│ │── settings.js # 设计器相关的配置
平台展示的菜单结构是按照平台目录划分,每个平台下又分为components
组件库和templates
模板库。
components组件库
:里面可以细分不同类型的组件,比如容器、表单、行业组件、项目组件等,支持两层结构,第一层是组件类型
,第二层是具体的组件
。
templates模板库
:里面也是可以细分不同类型的模板,比如表单模板、行业模板、项目模板等,也同样支持两层结构,第一层是模板类型
,第二层是具体模板
。
基础
组件
容器
普通容器
表单容器
表单
按钮
输入框
文本域
下拉框
数据
表格
数据表格
数据列表
模板
表单模板
单列表单
多列表单
列表模板
人员列表
医院
组件
人员管理
科室列表树
人员基础信息集
人员附属信息集
业务办理
业务菜单树
业务流程条
模板
人员管理模板
人员管理列表模板
业务办理模板
业务办理列表模板
业务办理申请模板
平台数据结构是左侧菜单展示的来源,低代码平台会自动加载平台目录下的index.json
配置文件,解析到菜单中展示。
数据结构分为components组件库
和templates模板库
,配置会自动加载到菜单中。
注意:这里组件的 name 是要和 widgets 下对应的组件 index.json 配置中的 type 保持一致才可以确保加载到对应组件。
{
"name": "platform",
"label": "基础",
"components": [
{
"name": "container",
"label": "容器",
"icon": "Tickets",
"children": [
{
"name": "simple-container",
"label": "普通容器",
"icon": "Tickets"
},
{
"name": "form-container",
"label": "表单容器",
"icon": "Tickets"
}
]
},
{
"name": "form",
"label": "表单",
"icon": "Tickets",
"children": [
{
"name": "button",
"label": "按钮",
"icon": "Tickets"
},
{
"name": "input",
"label": "输入框",
"icon": "Tickets"
},
{
"name": "textarea",
"label": "文本域",
"icon": "Tickets"
},
{
"name": "select",
"label": "下拉框",
"icon": "Tickets"
}
]
},
{
"name": "navigation",
"label": "导航",
"icon": "Tickets"
},
{
"name": "data",
"label": "数据展示",
"icon": "Tickets",
"children": [
{
"name": "table",
"label": "表格",
"icon": "Tickets"
},
{
"name": "data-table",
"label": "数据表格",
"icon": "Tickets"
},
{
"name": "data-list",
"label": "数据列表",
"icon": "Tickets"
}
]
},
{
"name": "feedback",
"label": "数据反馈",
"icon": "Tickets"
}
],
"templates": [
{
"name": "form-template",
"label": "表单模板",
"icon": "Tickets",
"children": [
{
"name": "form-1",
"label": "单列表单",
"url": "",
"icon": "Tickets"
},
{
"name": "form-2",
"label": "多列表单",
"icon": "Tickets"
},
{
"name": "form-3",
"label": "标签页表单",
"icon": "Tickets"
}
]
},
{
"name": "list-template",
"label": "列表模板",
"icon": "Tickets",
"children": [
{
"name": "list-1",
"label": "人员列表",
"icon": "Tickets"
}
]
}
]
},
数据结构分为components组件库
和templates模板库
,配置会自动加载到菜单中。
注意:这里组件的 name 是要和 widgets 下对应的组件 index.json 配置中的 type 保持一致才可以确保加载到对应组件。
{
"name": "platform-hosp",
"label": "医院",
"components": [
{
"name": "person-manage",
"label": "人员管理",
"icon": "Tickets",
"children": [
{
"name": "simple-container",
"label": "科室列表树",
"icon": "Tickets"
},
{
"name": "form-container",
"label": "人员基础信息集",
"icon": "Tickets"
},
{
"name": "form-container",
"label": "人员附属信息集",
"icon": "Tickets"
}
]
},
{
"name": "business",
"label": "业务办理",
"icon": "Tickets",
"children": [
{
"name": "menu-list-tree",
"label": "业务菜单树",
"icon": "Tickets"
},
{
"name": "flow-step",
"label": "业务流程条",
"icon": "Tickets"
}
]
}
],
"templates": [
{
"name": "person-manage-template",
"label": "人员管理模板",
"icon": "Tickets",
"children": [
{
"name": "person-manage-1",
"label": "人员管理列表模板",
"icon": "Tickets"
}
]
},
{
"name": "business-template",
"label": "业务办理模板",
"icon": "Tickets",
"children": [
{
"name": "business-1",
"label": "业务办理列表模板",
"icon": "Tickets"
},
{
"name": "business-1",
"label": "业务办理申请模板",
"icon": "Tickets"
}
]
}
]
}
设计器生成的json是可以导入到低代码设计器中的,结构数据是结合了组件的数据结构。
{
"widgets": [
{
"id": "",
"type": "select",
"label": "下拉框",
"props": {
"name": "",
"className": "",
"defaultValue": "",
"dsEnable": false,
"dsName": "",
"options": []
},
"events": [
{
"name": "change",
"args": [
"row",
"rowIndex"
],
"code": "/*这里事件内容*/"
}
],
"actions": [
{
"name": "deleteTable",
"label": "删除表格数据",
"code": "/*这里动作内容,可以获取到this*/"
}
],
"widgets": []
}
],
"widgetConfig": {
"globalCss": [],
"globalVars": [],
"globalFns": [],
"globalEvents": [],
"dataSources": [
{
"id": "",
"name": "",
"title": "",
"url": "",
"urlType": "string",
"description": "",
"method": "get",
"headers": [],
"params": [],
"data": [],
"requestCode": "return config;",
"responseCode": "return result.data.result;",
"responseErrorCode": "$message.error(error.message);"
}
],
"lowcodeVersion": "1.0.0"
}
}
组件是在平台目录下的widgets
中写的,所有的都放到一起,目的是为了按模块生成SASS平台源码,从左侧拖拽到设计器、或设计器加载json数据时候会自动映射对应的组件。
注意:组件的结构要遵循一定规则,比如input组件,目录是input-widget,并且要包含index.vue和index.json
input-widget/index.json
的配置如下:
{
"type": "input",
"label": "输入框",
/*props属性配置会自动加载所有props下对应的*/
"props": {
"name": "",
"className": "",
"defaultValue": "",
"inputCustomEditor": ""
},
"events": [
{
"name": "change",
"args": [
"row",
"rowIndex"
],
"code": "(row, rowIndex) => { /*这里事件内容*/ }"
}
],
"actions": [
{
"name": "deleteTable",
"label": "删除表格数据",
"code": "/*这里动作内容*/ }"
}
]
}
组件的json配置中的props对应的配置。
配置是在设计器右侧中展示的,是需要分组,默认有base 基础属性
,advanced 高级属性
,custom 自定义属性
三种,不写group默认是custom 自定义属性
。
比如组件中用到了className
属性,会自动从全局$platformProps
中找到对应的class-name-editor
这个组件,对应的属性编辑器组件配置如下:
{
"name": "className",
"label": "类名",
"group": "base"
}
生成的文件为:
npm run lib
├── dist
│ │── lowcode.js
│ │── lowcode.umd.js
│ └── lowcode.css
这种方式和之前vform一样,可以通过使用组件,传入json使用,以下两种使用,同时也是能支持插槽
<!-- 使用方式1 -->
<lowcode-render ref="lowcodeRender" :data="{/*设计器生成的json*/}" />
<!-- 使用方式2 -->
<lowcode-render ref="lowcodeRender" :data="{/*设计器生成的json*/}">
<template #inputCustom>
<!-- 自定义的插槽 -->
</template>
</lowcode-render>
<!-- 使用方式3 -->
this.$refs.lowcodeRender.loadJson(/*设计器生成的json*/);
这种方式就是生成的SFC文件拿到项目中使用,会按需引入
<template>
<div class="low-code-widget">
<inputWidget
ref="ref_inputWidget_25d8d7b4"
v-bind="inputWidget_25d8d7b4_props"
v-on="inputWidget_25d8d7b4_event"
>
</inputWidget>
</div>
</template>
<script setup>
import { ref, reactive, computed } from 'vue';
import { inputWidget } from '@/lib/lowcode.umd.js';
const ref_inputWidget_25d8d7b4 = ref(); // 输入框
</script>
<style lang="scss" scoped></style>
生成的文件为:
npm run build
├── dist
├── │── src # 源码目录
│ │── components
│ │── platform-base
│ │── platform-hosp
│ └── 其他的源码目录中的文件
│ │── lang # i18n国际化
│ │── layout # 设计器布局
│ │── mixins # 设计器组件需要混入的脚本
│ │── store # 设计器需要用到的状态管理
│ │── styles # 样式
│ │── themes # 主题,用:root变量,支持换肤
│ │── utils # 工具
│ │── App.vue # 设计器入口页面
│ │── main.js # 入口js
│ │── settings.js # 设计器相关的配置
需要生成SFC的文件中使用,会按需引入
<template>
<div class="low-code-widget">
<inputWidget
ref="ref_inputWidget_25d8d7b4"
v-bind="inputWidget_25d8d7b4_props"
v-on="inputWidget_25d8d7b4_event"
>
</inputWidget>
<hospInputWidget
ref="ref_hospInputWidget_25d8d7b4"
v-bind="hospInputWidget_25d8d7b4_props"
v-on="hospInputWidget_25d8d7b4_event"
>
</hospInputWidget>
</div>
</template>
<script setup>
import { ref, reactive, computed } from "vue";
import { hospInputWidget } from "@/lib/platform-hosp/widgets/input-widget/index.vue";
const ref_inputWidget_25d8d7b4 = ref(); // 输入框
const ref_hospInputWidget_25d8d7b4 = ref(); // 医院-输入框
</script>
<style lang="scss" scoped></style>