# springboot-plus

**Repository Path**: lowcode-open/springboot-plus

## Basic Information

- **Project Name**: springboot-plus
- **Description**: Vue3低代码版本-开源版
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-08-25
- **Last Updated**: 2024-08-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 1.低代码介绍

###### Vue2版本基于`Element UI`、Vue3版本基于`Element Plus`
###### Vue2版本体验点此进入：[Vue2低代码设计器](http://120.25.191.141/)
###### Vue3版本体验点此进入：[Vue3低代码设计器](http://120.25.191.141:3000/)
###### Vue2版本App体验点此进入：[Vue2-App低代码设计器](http://120.25.191.141:8088/)
###### Vue2版本带后台地址：[Vue2若依版本](https://gitee.com/lowcode-open/ruoyi)

# 2.快速开始

## 2.1前后端集成


### **2.表格插件包**


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

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


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


## 2.2个性化配置

### 1.请求头

### 2.按钮权限

### 3.远程字段

## 2.3组件拓展（非免费版内容）

### 1.描述文件注册

### 2.组件注册

### 3.配置面板注册

### 4.事件注册

# 3.事件介绍

### 1.表单事件

#### 1）表单数据初始化

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

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

#### 2）改变表单数据值

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

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

#### 3）获取表单数据

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

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

#### 4）获取表单传递数据

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

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

#### 5）表单校验

> 说明：全局校验（高级表格会一并校验）

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

})
```
> 说明：表单校验（高级表格不校验）
```javascript
let isValid = _this.submitMainValid()
```
> 说明：表单字段校验
```javascript
let fields = ["字段"];
let errorMap = _this.submitFieldValid(fields)
```

#### 6）实时数据源

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

})
```

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

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

})
```

#### 7）执行自定义数据源

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

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

```

#### 8）执行自定义事件

> 说明：调用表单自定义的事件，自定义事件可以有返回值

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

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

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

#### 10）打开弹窗-直接使用JSON元数据（不常用）

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

#### 11）路由切换跳转

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

#### 12）不切换路由跳转

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

### 2.组件事件

#### 1）组件启用禁用

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

#### 2）组件只读非只读

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

#### 3）组件显示隐藏

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

#### 4）组件必填非必填

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

# 4.组件介绍

### **1.布局组件**

#### 1）高级布局

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

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

#### 2）弹窗布局

```javascript
_this.execute("本页面.openM",{
  id:"页面ID",//需要打开的弹窗页面ID
  title:"",//弹窗标题
  data:{}//需要传递到弹窗页面的数据
})
```

```javascript
_this.execute("@widget.closeM",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段"//弹窗布局组件的字段值
})
```

#### 3）弹窗树布局

```javascript
_this.execute("本页面.openM",{
  id:"页面ID",//需要打开的弹窗页面ID
  title:"",//弹窗标题
  data:{}//需要传递到弹窗页面的数据
})
```

```javascript
_this.execute("@widget.closeM",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段"//弹窗树布局组件的字段值
})
```

#### 4）抽屉布局

```javascript
_this.execute("本页面.openM",{
  id:"页面ID",//需要打开的抽屉页面ID
  title:"",//抽屉标题
  data:{}//需要传递到抽屉页面的数据
})
```

```javascript
_this.execute("@widget.closeM",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段"//抽屉布局组件的字段值
})
```

### 2.容器组件

#### 1）标签页

```javascript
//获取激活的标签页
let activeKey = _this.execute("@widget.fetchActiveTabKey",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段"//标签页组件的字段值
})
```

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

#### 2）卡片组件

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

#### 3）树组件

```javascript
//加载数据源
_this.execute("@widget.loadData",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//树组件的字段值
  data:{}//数据源参数
})
```

```javascript
//设置数据
_this.execute("@widget.setData",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//树组件的字段值
  data:[]//值集合
})
```

```javascript
//获取选中数据集合
_this.execute("@widget.getCheckedDatas",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//树组件的字段值
})
```

```javascript
//获取选中数据主键集合
_this.execute("@widget.getCheckedKeys",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//树组件的字段值
})
```

```javascript
//获取选中数据集合(含半选)
_this.execute("@widget.getAllCheckedDatas",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//树组件的字段值
})
```

```javascript
//获取选中数据主键集合(含半选)
_this.execute("@widget.getAllCheckedKeys",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//树组件的字段值
})
```

```javascript
//设置多个选中
_this.execute("@widget.setCheckedKeys",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//树组件的字段值
  data:{keys:[],isLeaf:false},//isLeaf:true表示只选中叶子节点
})
```

```javascript
//设置单个选中
_this.execute("@widget.setChecked",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//树组件的字段值
  data:{key:"",isChecked:true,isChildChecked:true},//isChildChecked:false表示不选中子节点
})
```

#### 4）进度条组件

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

#### 5）时间线组件

```javascript
//设置时间线数据
_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组件

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

#### 7）IFRAM组件

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

8）统计数值组件

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

### 3.表单组件

#### 1）高级表格组件

```javascript
//加载数据源
_this.execute("@widget.loadData",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:{}//请求参数
})
```

```javascript
//设置数据
_this.execute("@widget.setData",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:[]//数据集合
})
```

```javascript
//头部新增行
_this.execute("@widget.addPreRow",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:{}//[{},{}]
})
```

```javascript
//尾部新增行
_this.execute("@widget.addRow",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:{}//[{},{}]
})
```

```javascript
//删除行
_this.execute("@widget.removeRow",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:row//表格的行数据，一般在操作列点击事件内自带
})
```

```javascript
//获取选中行
let selectRows = _this.execute("@widget.getSelectRows",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:true//是否全部，默认即可，兼容虚拟列
})
```

```javascript
//设置选中行
_this.execute("@widget.selectRows",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:{row|rows|rowId|rowIds,checked}//可传行/行集合/行ID/行ID集合，是否选中
})
```

```javascript
//设置复选框全选
_this.execute("@widget.toggleCheckbox",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:true//选中状态
})
```

```javascript
//设置列是否只读
_this.execute("@widget.columnReadonly",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:[{rowId:rowId,colId:"列字段",readonly:true}]}//表格行ID,列的字段,是否只读
})
```

```javascript
//设置列值
_this.execute("@widget.columnValue",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:[{rowId:rowId,colId:"列字段",value:""}]//表格行ID,列的字段,值
})
```

```javascript
//设置列是否必填
_this.execute("@widget.columnRequired",{
  id:"本页面",//页面ID，默认可以不调整
  field:"",//高级表格组件的字段值
  data:{colId:'列字段',required:true,message:'必填'}//列的字段,是否必填,必填提示
})
```

```javascript
//设置列显示隐藏
_this.execute("@widget.columnVisible",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",
  data:{colIds:[],visible:true}//列的字段集合,是否显示
})
```

```javascript
//动态新增列
/* 
参考表格列的options数据
{
 "columnType":"",//dict,date,datetime,time,number,switch...
}
*/
_this.execute("@widget.dynamicColumn",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:{insertField:"",columns}//列字段(空默认动态加到最后一列),表格列的options数据
})
```

```javascript
//刷新表格尾部行数据
_this.execute("@widget.flushFooter",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段"//高级表格组件的字段值
})
```

```javascript
//表格行展开
_this.execute("@widget.toggleRowExpand",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:row//表格行
})
```

```javascript
//新增二级表格行
_this.execute("@widget.addSecondRow",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:{"parentRow":row,data:{}}//一级表格行,数据或集合
})
```

```javascript
//删除二级表格行
_this.execute("@widget.removeSecondRow",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:row//二级表格的行 row:{ parentRow, currentRow, rowIndex }
})
```

```javascript
//设置二级表格列是否只读
_this.execute("@widget.secondTableReadonly",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:{
    "parentRow":parentRow,//一级表格行
    "data":[{
        rowId:rowId,//二级表格行ID
        colId:"列字段",//二级表格列字段
        readonly:true//是否只读
    }]
  }
})
```

```javascript
//设置二级表格列值
_this.execute("@widget.secondColumnValue",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:{
    parentRow:row.parentRow,//一级表格行
    data:[{
      rowId:row.currentRow.rowId,//二级表格行ID
      colId:"列字段",//二级表格列字段
      value:""//值
    }]
   }
})
```

```javascript
//设置二级表格列是否必填
_this.execute("@widget.secondColumnRequired",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//高级表格组件的字段值
  data:{
   parentRow:row.parentRow,//一级表格行
   config:{
    required:true,//是否必填
    colId:'类字段',//二级表格列字段
    message:'必填'//必填提示
   }
 }
})
```

#### 2）卡片表格组件

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

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

#### 3）方片表格组件

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

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

#### 4）下拉组件

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

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

#### 5）下拉树组件

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

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

#### 6）步骤条组件

```javascript
//上一步
_this.execute("@widget.back",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//步骤条组件的字段值
})
```

```javascript
//下一步
_this.execute("@widget.next",{
  id:"本页面",//页面ID，默认可以不调整
  field:"字段",//步骤条组件的字段值
})
```

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