# ruoyi

**Repository Path**: lanbgit/ruoyi

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 5
- **Created**: 2024-09-11
- **Last Updated**: 2024-09-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 若依低代码版

#### 介绍
###### 内置组件已全部开放，作者微信号：LowcodeMan

###### 已使用当前低代码落地一套完整的后台管理系统
###### 现开放集成若依版本，已提供示例页面，有兴趣的小伙伴可免费下载使用。
###### 当前项目版本插件成熟度已满足大部分业务场景开发，功能，BUG将不定期优化并修复更新

#### 安装教程
##### 1.  直接参考若依开源项目部署启动即可
##### 2.  低代码插件已集成，可完全平替项目内所有功能

# 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/)

###### Vue3版本带后台开源地址：[Vue3版本](https://gitee.com/lowcode-open/springboot-plus)

# 2.快速开始

## 2.1前后端集成

### **1.安装低代码插件包（直接下载即可）**

###### [📎LowcodeDesigner.umd.min.js](https://www.yuque.com/attachments/yuque/0/2024/js/648549/1724549300598-e041007e-4335-4345-93f3-bcb3bcb5137b.js)
###### [📎LowcodeDesigner.css](https://www.yuque.com/attachments/yuque/0/2024/css/648549/1724549298097-639426bb-df4c-48af-8152-94da6ddbbbee.css)
###### 说明：将插件包引入到Vue2项目内，如放入lib目录，并在main.js中引入
![输入图片说明](doc/image.png)

```javascript
import lowcodeForm from '@/../lib/LowcodeDesigner.umd.min.js'
import '@/../lib/LowcodeDesigner.css'
Vue.use(lowcodeForm,{})
```

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

#### 1）安装

```shell
npm install vxe-table@legacy
```

#### 2）引入

```javascript
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
Vue.use(VXETable)
```

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

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

```javascript
<template>
  <div id="app" class="lowcode-designer">
    <lowcode-designer ref="lowcodeDesigner" :designer-config="designerConfig">
      <!-- 自定义按钮插槽演示 -->
      <template #customToolButtons>
        <!-- 自行定义关闭当前页面的click事件 -->
        <el-button type="text"><i class="el-icon-finished" />关闭</el-button>
        <el-button type="text" @click="saveFormJson"><i class="el-icon-finished" />保存</el-button>
      </template>
    </lowcode-designer>
  </div>
</template>

<script>
import { getPage,updatePage } from "@/api/system/page";//TODO：根据项目自行调整
export default {
  name: 'LowcodeDesign',
  mounted(){
    //从地址栏获取页面ID（必传）
    let pageId = this.$route.query.pageId;
    if(!!pageId){
      this.initForm(pageId)
    }else{
      this.$message.warning("获取页面失败：地址栏页面ID未传")
    }
    //键盘监听
    window.addEventListener('keydown', this.saveEvent)
  },
  beforeDestroy() {
    // 在页面销毁的时候解除键盘监听
    window.removeEventListener('keydown', this.saveEvent) 
  },
  data() {
    return {
      designerConfig: {},
      currentForm:{},
    }
  },
  methods: {
    //TODO：获取页面的方法，根据各自项目自行调整
    initForm(pageId){
      let that = this;
      //API自行替换:主要功能获取设计器的页面JSON元数据
      getPage(pageId).then((response) => {
        if (response.data && response.data.pageContent) {
          that.$refs.lowcodeDesigner.setFormJson(JSON.parse(that.unescapeHTML(response.data.pageContent)))
        } else {
          that.$refs.lowcodeDesigner.setFormJson({})
        }
      }).catch((_) => {})
    },
    
    //TODO：保存页面的方法，根据各自项目自行调整
    saveFormJson() {
      //获取设计器的JSON元数据
      let formJson = this.$refs.lowcodeDesigner.getFormJson()
      if (formJson.length === 0) {
        this.$message('您还没绘制任何表单内容!')
        return
      }
      this.currentForm.pageContent = JSON.stringify(formJson);
      //API自行替换:主要功能保存设计器的页面元数据
      updatePage(this.currentForm).then(response => {
        if(response.code==200){
          console.log("保存成功")
        }else{
          console.log("保存失败")
        }
      });
    },
    
    //解决页面元数据特殊符号转换问题
    unescapeHTML(text) {
      return text.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
    },
    
    //键盘操控监听
    async saveEvent(event) {
      switch (event.keyCode) {
        //83：s
        case 83:
          //ctrl + s
          if(event.ctrlKey){
            event.preventDefault()
            //阻止直接保存网页
            event.returnValue = false 
            //执行保存页面
            this.saveFormJson();
            break
          }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  #app {
    height: 100%;
  }
</style>

```

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

```javascript
<template>
  <div style="height: 100%;">
    <div class="lowcode-render">
      <!--默认渲染器-->
      <lowcode-render v-if="showMain" :ref="pageId" :form-json="formJson" :form-data="formData" :previewState="true" :props="props"></lowcode-render>
      <!--弹窗渲染器-->
      <transition v-for="item in popFormList" :key="item.pageId" name="el-fade-in-linear">
        <lowcode-render
          :ref="item.pageId"
          v-if="item.openFlag"
          :form-json="item.formJson"
          :form-data="item.formData"
          :previewState="true"
          :props="item.props" >
        </lowcode-render>
      </transition>
    </div>
  </div>
</template>
<script>
import { getPage } from "@/api/system/page";//TODO：根据项目自行调整
export default {
  data() {
    return {
      pageId:undefined,
      formJson: {},
      formData: {},
      props:{},//页面传参
      showMain:false,

      popFormList:[],//弹窗页面集合
      pageRefList:[],//缓存加载过的页面JSON元数据
    }
  },
  created() {
    //约定格式：/lowcode/render/ + 页面ID
    let url = this.$route.name;
    let pageId = url.split("/")[2];
    let query = this.$route.query;
    if (pageId) {
      this.initForm({id:pageId,data:query});
    }else{
      this.$message.error('未能获取到后台页面数据');
    }
  },
  methods: {
    //TODO：获取页面的方法，根据各自项目自行调整
    async initForm(params){
      let that = this;
      this.pageId = params.id;
      //API自行替换:主要功能获取设计器的页面元数据
      await getPage(params.id).then((response) => {
        if(response.data && response.data.pageContent){
          that.formData = {},
          that.formJson = JSON.parse(that.unescapeHTML(response.data.pageContent)),
          that.props = Object.assign({},params.data)
          that.showMain = true
          that.popFormList = [];//清空弹窗页面
          that.pageRefList.push({pageId:params.id,pageRef:that})//设置当前主页的引用

          //将主页引用添加至页面
          that.$nextTick(()=>{
            that.$refs[params.id + ""].addEC(params.id,that);
          })
        }
      }).catch((_) => {})
    },
    
    //TODO：获取页面的方法，根据各自项目自行调整
    async openM(params){
      let that = this;
      //API自行替换:主要功能获取设计器的页面元数据
      await getPage(params.id).then((response) => {
        if(response.data && response.data.pageContent){
          //过滤出上一次是否加载过，加载过则移除重新添加引用
          let pageIndex = that.pageRefList.findIndex(item => item.pageId == params.id);
          if(pageIndex!==-1){
            that.pageRefList.splice(pageIndex, 1);
          }
          that.pageRefList.push({pageId:`${params.id}`,pageRef:that})

          //查找之前是否已经加载过当前弹窗页面
          let popForm = that.popFormList.find(item => item.pageId == params.id);

          //弹窗JSON
          let formJson = JSON.parse(that.unescapeHTML(response.data.pageContent));
          //设置弹窗默认名称
          if(!!params.title){
            form.formJson.options.title = params.title
          }
          //存在则先隐藏再打开（为了触发create等事件）
          if(popForm){
            popForm.openFlag = false;
            popForm.pageId = `${params.id}`,
            popForm.formData = {};
            popForm.formJson = formJson;
            popForm.props = Object.assign({},params.data);
          }
          //不存在则直接打开
          else{
            that.popFormList.push({
              pageId:`${params.id}`,
              openFlag:true,
              formData:{},
              formJson:formJson,
              props:Object.assign({},params.data)
            })
          }

          that.$nextTick(()=>{
            popForm.openFlag = true;
            //以上操作完成后，最终将当前引用放入页面引用集合
            that.$nextTick(()=>{
              that.pageRefList.forEach(item=>{
                that.$refs[`${params.id}`][0].addEC(item.pageId,item.pageRef);
              })
            })
          })
        }
      }).catch((_) => {})
    },

    //直接根据JSON元数据弹窗
    async openF(params){
      let that = this;
      if(params.formContent){
        //过滤出上一次是否加载过，加载过则移除重新添加引用
        let pageIndex = that.pageRefList.findIndex(item => item.pageId === params.id);
        if(pageIndex!==-1){
          that.pageRefList.splice(pageIndex, 1);
        }
        that.pageRefList.push({pageId:params.id,pageRef:that})
        
        //查找之前是否已经加载过当前弹窗页面
        let popFormList = that.popFormList.find(item => item.pageId === params.id);
        //存在则先隐藏再打开（为了触发create等事件）
        if(popFormList){
          popFormList.openFlag = false;
          popFormList.pageId = `${params.id}`;
          popFormList.formData = {};
          popFormList.formJson = JSON.parse(that.unescapeHTML(params.formContent));
          popFormList.props = params.data;
        }
        //不存在则直接打开
        else{
          that.popFormList.push({
            pageId:`${params.id}`,
            openFlag:true,
            formData:{},
            formJson:JSON.parse(that.unescapeHTML(params.formContent)),
            props:params.data
          })
        }

        that.$nextTick(()=>{
          popFormList.openFlag = true;
          //以上操作完成后，最终将当前引用放入页面引用集合
          that.$nextTick(()=>{
            that.pageRefList.forEach(item=>{
              that.$refs[`${params.id}`][0].addEC(item.pageId,item.pageRef);
            })
          })
        })
      }
    },
    
    //解决页面元数据特殊符号转换问题
    unescapeHTML(text) {
      return text.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
    },
    
    //路由跳转
    router(params){
      let path = params.path;
      let query = Object.assign({},params.data);
      this.$router.push({ path, query});
    },
    
    //不切换路由，替换当前表单JSON元数据
    async navigator(params){
      let that = this;
      //API自行替换:主要功能获取设计器的页面元数据
      await getFormPage(params.id).then((response) => {
        if(response.data && response.data.pageContent){
          that.popFormList = [];
          that.pageRefList = [];
          that.popFormList.push({
            pageId:`${params.id}`,
            formData:{},
            formJson:JSON.parse(that.unescapeHTML(response.data.pageContent)),
            props:Object.assign({},params.data)
          })
          that.pageRefList.push({pageId:params.id,pageRef:that})
          that.$nextTick(()=>{
            that.pageRefList.forEach(item=>{
              that.$refs[`${params.id}`][0].addEC(item.pageId,item.pageRef);
            })
          })
        }
      }).catch((_) => {})
    },
    
    //===========================设计器事件(固定即可)====================================
    execute(eventMethods,param){
      let page = this.pageRefList.find(item => item.pageId === param.id);
      return page.pageRef.$refs[param.id][0].execute(eventMethods,param);
    },
    resolvePromise(param){
      let page = this.pageRefList.find(item => item.pageId === param.id);
      return page.pageRef.$refs[param.id][0].resolvePromise(param);
    },
    submitValid(callback){
      return this.$refs[0].submitValid(callback);
    },
    resolveDataSource(dataSource){
      let page = this.pageRefList.find(item => item.pageId === dataSource.id);
      return page.pageRef.$refs[dataSource.id][0].resolveDataSource(dataSource);
    },
    resolveDataSourceCallback(dataSource, successCallback, errorCallback){
      let page = this.pageRefList.find(item => item.pageId === dataSource.id);
      return page.pageRef.$refs[dataSource.id][0].resolveDataSourceCallback(dataSource, successCallback, errorCallback);
    },
  }
}
</script>

<style lang="scss" scoped>
  .lowcode-render  {
    overflow-x: hidden;
    background: #e7e7e7;
  }
</style>

```

说明：示例将以上2个页面添加到 src/views/lowcode 目录下，并新增一个路由

```javascript
{
  path: '/lowcode/designer',
  component: () => import('@/views/lowcode/locode-design'),
  name: 'LowcodeDesign',
}
```

## 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
  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
_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":""}
  ]
})
```
# 5.场景功能介绍
待用户实际反馈


### 微信二维码
![输入图片说明](doc/93e765fcc7194afd29610bed9f3dc4d.jpg)