2 Star 0 Fork 0

LowcodeMan/springboot-plus

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

1.低代码介绍

Vue2版本基于Element UI、Vue3版本基于Element Plus
Vue2版本体验点此进入:Vue2低代码设计器
Vue3版本体验点此进入:Vue3低代码设计器
Vue2版本App体验点此进入:Vue2-App低代码设计器
Vue2版本带后台地址:Vue2若依版本

2.快速开始

2.1前后端集成

2.表格插件包

3.集成低代码设计器和渲染器

1)设计器页面-(需根据自身项目改造接口部分)

2)渲染器页面-(需根据自身项目改造接口部分)

2.2个性化配置

1.请求头

2.按钮权限

3.远程字段

2.3组件拓展(非免费版内容)

1.描述文件注册

2.组件注册

3.配置面板注册

4.事件注册

3.事件介绍

1.表单事件

1)表单数据初始化

说明:在表单元素加载或渲染到页面上时,对表单内的数据进行设置或初始化

_this.execute("@form.init",{
  id:"本页面",//页面ID,默认可以不调整
  data:{
    "field1":"表单字段1",
    "field2":2,
    "field3":"20240101",
    "field4":true
  }
})

2)改变表单数据值

说明:表单字段需要动态修改数据时可使用

_this.execute("@form.value",{
  id:"本页面",//页面ID,默认可以不调整
  name:"字段",//需要修改的表单字段
  value:""//值
})

3)获取表单数据

说明:需要从表单获取数据或者提交单据时候可使用

let form = _this.resolvePromise({id:"本页面",event:"@form"})

4)获取表单传递数据

说明:从A页面打开B页面会传递一些数据,可通过以下方法拿到传递的数据内容

let prop = _this.resolvePromise({id:"本页面",event:"@prop"})

5)表单校验

说明:全局校验(高级表格会一并校验)

_this.submitValid(function(_this,isValid,errorMap){
  //isValid为true表示校验通过,false表示校验不通过

})

说明:表单校验(高级表格不校验)

let isValid = _this.submitMainValid()

说明:表单字段校验

let fields = ["字段"];
let errorMap = _this.submitFieldValid(fields)

6)实时数据源

let dataSource = {
  url:"",
  methodType:"post",
  headers:{},
  params:{}
}
_this.resolveDataSource(dataSource).then(function(response){
  //执行业务逻辑

})
let dataSource = {
  url:"",
  methodType:"post",
  headers:{},
  params:{}
}
_this.resolveDataSourceCallback(dataSource, function(response){
  //执行业务逻辑

}, function(error){
  //执行逻辑

})

7)执行自定义数据源

说明:调用表单自定义的数据源

_this.execute("@dataSource.方法名",{
  id:"本页面",//页面ID,默认可以不调整
  data:{}//可传参
})

8)执行自定义事件

说明:调用表单自定义的事件,自定义事件可以有返回值

_this.execute("@formEvent.方法名",{
  id:"本页面",//页面ID,默认可以不调整
  data:{}//可传参
})

9)打开弹窗-需要调用接口

_this.execute("本页面.openM",{
  id:"页面ID",//需要弹出的页面ID
  title:"弹窗标题",
  data:{}//可传参给弹出的页面
})

10)打开弹窗-直接使用JSON元数据(不常用)

_this.execute("本页面.openF",{
  id:"ID",//自定义一个页面ID
  formContent:{},//弹窗JSON元数据(即:弹窗的设计页面JSON数据)
  formValue:{}//弹窗JSON元数据内的表单初始化数据
})

11)路由切换跳转

_this.execute("本页面.router",{
  path:"路由地址",//地址
  data:{}//参数
})

12)不切换路由跳转

_this.execute("本页面.navigator",{
  id:"页面ID",//需要打开的页面ID
  data:{}//可传参给打开的页面
})

2.组件事件

1)组件启用禁用

_this.execute("字段.enabled",false)

2)组件只读非只读

_this.execute("字段.readonly",false)

3)组件显示隐藏

_this.execute("字段.visibled",false)

4)组件必填非必填

_this.execute("字段.required",false)

4.组件介绍

1.布局组件

1)高级布局

_this.execute("@widget.setTitle",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//高级布局组件的字段值
  data:""
})
_this.execute("@widget.openFooter",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段"//高级布局组件的字段值
})

2)弹窗布局

_this.execute("本页面.openM",{
  id:"页面ID",//需要打开的弹窗页面ID
  title:"",//弹窗标题
  data:{}//需要传递到弹窗页面的数据
})
_this.execute("@widget.closeM",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段"//弹窗布局组件的字段值
})

3)弹窗树布局

_this.execute("本页面.openM",{
  id:"页面ID",//需要打开的弹窗页面ID
  title:"",//弹窗标题
  data:{}//需要传递到弹窗页面的数据
})
_this.execute("@widget.closeM",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段"//弹窗树布局组件的字段值
})

4)抽屉布局

_this.execute("本页面.openM",{
  id:"页面ID",//需要打开的抽屉页面ID
  title:"",//抽屉标题
  data:{}//需要传递到抽屉页面的数据
})
_this.execute("@widget.closeM",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段"//抽屉布局组件的字段值
})

2.容器组件

1)标签页

//获取激活的标签页
let activeKey = _this.execute("@widget.fetchActiveTabKey",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段"//标签页组件的字段值
})
//设置标签项的角标
_this.execute("@widget.dynamicBadge",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//标签页组件的字段值
  data:{
    key:"标签项ID",//标签项的ID
    number:99//数值
  }
})

2)卡片组件

//设置卡片的描述文字
_this.execute("@widget.setDesc",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//卡片组件的字段值
  data:""//描述文字
})

3)树组件

//加载数据源
_this.execute("@widget.loadData",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//树组件的字段值
  data:{}//数据源参数
})
//设置数据
_this.execute("@widget.setData",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//树组件的字段值
  data:[]//值集合
})
//获取选中数据集合
_this.execute("@widget.getCheckedDatas",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//树组件的字段值
})
//获取选中数据主键集合
_this.execute("@widget.getCheckedKeys",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//树组件的字段值
})
//获取选中数据集合(含半选)
_this.execute("@widget.getAllCheckedDatas",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//树组件的字段值
})
//获取选中数据主键集合(含半选)
_this.execute("@widget.getAllCheckedKeys",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//树组件的字段值
})
//设置多个选中
_this.execute("@widget.setCheckedKeys",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//树组件的字段值
  data:{keys:[],isLeaf:false},//isLeaf:true表示只选中叶子节点
})
//设置单个选中
_this.execute("@widget.setChecked",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//树组件的字段值
  data:{key:"",isChecked:true,isChildChecked:true},//isChildChecked:false表示不选中子节点
})

4)进度条组件

//设置进度条值
_this.execute("@widget.setData",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//树组件的字段值
  data:50//数值
})

5)时间线组件

//设置时间线数据
_this.execute("@widget.setData",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//时间线组件的字段值
  data:[
    {"content":"开始","timestamp":"2018-04-19","type":"info","placement":"top"},
    {"content":"延期","timestamp":"2018-04-15","type":"warning","icon":"el-icon-warning-outline"},
    {"content":"再次延期","timestamp":"2018-04-17","type":"danger","hideTimestamp":true},
    {"content":"进行中","timestamp":"2018-04-13","type":"success"},
    {"content":"结束","timestamp":"2018-04-11","type":"primary"}
   ]
})

6)Echarts组件

//设置图表数据
_this.execute("@widget.setData",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段"//图表组件的字段值
  data:{"key":[//key表示数据项的字段
    20,30,40
  ]}
})

7)IFRAM组件

//IFRAM组件
_this.execute("@widget.setUrl",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//IFRAM组件的字段值
  data:"http://120.25.191.141/"
})

8)统计数值组件

//设置值
_this.execute("@widget.setData",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//统计数值组件的字段值
  data:{type:"number|date",value:"值|日期",prefix:"",suffix:""}//type=number为数值类型,date表示倒计时
})

3.表单组件

1)高级表格组件

//加载数据源
_this.execute("@widget.loadData",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:{}//请求参数
})
//设置数据
_this.execute("@widget.setData",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:[]//数据集合
})
//头部新增行
_this.execute("@widget.addPreRow",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:{}//[{},{}]
})
//尾部新增行
_this.execute("@widget.addRow",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:{}//[{},{}]
})
//删除行
_this.execute("@widget.removeRow",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:row//表格的行数据,一般在操作列点击事件内自带
})
//获取选中行
let selectRows = _this.execute("@widget.getSelectRows",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:true//是否全部,默认即可,兼容虚拟列
})
//设置选中行
_this.execute("@widget.selectRows",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:{row|rows|rowId|rowIds,checked}//可传行/行集合/行ID/行ID集合,是否选中
})
//设置复选框全选
_this.execute("@widget.toggleCheckbox",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:true//选中状态
})
//设置列是否只读
_this.execute("@widget.columnReadonly",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:[{rowId:rowId,colId:"列字段",readonly:true}]}//表格行ID,列的字段,是否只读
})
//设置列值
_this.execute("@widget.columnValue",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:[{rowId:rowId,colId:"列字段",value:""}]//表格行ID,列的字段,值
})
//设置列是否必填
_this.execute("@widget.columnRequired",{
  id:"本页面",//页面ID,默认可以不调整
  field:"",//高级表格组件的字段值
  data:{colId:'列字段',required:true,message:'必填'}//列的字段,是否必填,必填提示
})
//设置列显示隐藏
_this.execute("@widget.columnVisible",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",
  data:{colIds:[],visible:true}//列的字段集合,是否显示
})
//动态新增列
/* 
参考表格列的options数据
{
 "columnType":"",//dict,date,datetime,time,number,switch...
}
*/
_this.execute("@widget.dynamicColumn",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:{insertField:"",columns}//列字段(空默认动态加到最后一列),表格列的options数据
})
//刷新表格尾部行数据
_this.execute("@widget.flushFooter",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段"//高级表格组件的字段值
})
//表格行展开
_this.execute("@widget.toggleRowExpand",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:row//表格行
})
//新增二级表格行
_this.execute("@widget.addSecondRow",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:{"parentRow":row,data:{}}//一级表格行,数据或集合
})
//删除二级表格行
_this.execute("@widget.removeSecondRow",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:row//二级表格的行 row:{ parentRow, currentRow, rowIndex }
})
//设置二级表格列是否只读
_this.execute("@widget.secondTableReadonly",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:{
    "parentRow":parentRow,//一级表格行
    "data":[{
        rowId:rowId,//二级表格行ID
        colId:"列字段",//二级表格列字段
        readonly:true//是否只读
    }]
  }
})
//设置二级表格列值
_this.execute("@widget.secondColumnValue",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:{
    parentRow:row.parentRow,//一级表格行
    data:[{
      rowId:row.currentRow.rowId,//二级表格行ID
      colId:"列字段",//二级表格列字段
      value:""//值
    }]
   }
})
//设置二级表格列是否必填
_this.execute("@widget.secondColumnRequired",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:{
   parentRow:row.parentRow,//一级表格行
   config:{
    required:true,//是否必填
    colId:'类字段',//二级表格列字段
    message:'必填'//必填提示
   }
 }
})

2)卡片表格组件

//加载数据源
_this.execute("@widget.loadData",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//卡片表格组件的字段值
  data:{}//请求参数
})
//设置数据
_this.execute("@widget.setData",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//卡片表格组件的字段值
  data:[]//数据集合
})

3)方片表格组件

//加载数据源
_this.execute("@widget.loadData",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//方片表格组件的字段值
  data:{}//请求参数
})
//设置数据
_this.execute("@widget.setData",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//方片表格组件的字段值
  data:[]//数据集合
})

4)下拉组件

//加载数据源
_this.execute("@widget.loadData",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//下拉组件的字段值
  data:{}//请求参数
})
//设置数据
_this.execute("@widget.setData",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//下拉组件的字段值
  data:[]//数据集合
})

5)下拉树组件

//加载数据源
_this.execute("@widget.loadData",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//下拉树组件的字段值
  data:{}//请求参数
})
//设置数据
_this.execute("@widget.setData",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//下拉树组件的字段值
  data:[]//数据集合
})

6)步骤条组件

//上一步
_this.execute("@widget.back",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//步骤条组件的字段值
})
//下一步
_this.execute("@widget.next",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//步骤条组件的字段值
})
//设置步骤内容
_this.execute("@widget.setData",{
  id:"本页面",//页面ID,默认可以不调整
  field:"字段",//步骤条组件的字段值
  data:[
    {"title":"第一步","description":"描述一","icon":""},
    {"title":"第二步","description":"描述二","icon":""},
    {"title":"第三步","description":"描述三","icon":""}
  ]
})

微信二维码

MIT License Copyright (c) 2023 geekidea Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

Vue3低代码版本-开源版 展开 收起
README
MIT
取消

发行版

暂无发行版

贡献者 (1)

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/lowcode-open/springboot-plus.git
git@gitee.com:lowcode-open/springboot-plus.git
lowcode-open
springboot-plus
springboot-plus
master

搜索帮助