vol移动端(uni-app)接口文档1.0
组件API
1、volform表单组件
2、voltable
3、viewgrid生成页面

vue-在线接口文档1.0

微信小程序

安卓扫描下载

手机浏览器访问

1、volform表单组件
1. props
props
属性 说明 类型 默认值
formOptions 字段配置信息(见下面formOptions说明或查看代码editFormOptions属性) Array []
formFields 字段(见下面的查看代码editFormFields属性) {} {}
padding 表单padding Number 30
labelPosition 字段名称显示位置:left/top String left
loadKey 是否默认加载数据源 bool true
2. formOptions
formOptions
属性 说明 类型 默认值
title 字段名字 String
required 是否必填 bool false
field 字段(与上面formFields的属性对应,或者见下面的查看代码editFormFields属性) String
type 显示类型：text、password、group(分组显示见下面的查看代码中的group)、select、selectList(下拉框多选)、date(年月日)、datetime(年月日时分秒)、switch(单选) String left
focus 是否获取焦点 bool false
3. methods
methods
属性 说明 类型 默认值
onChange 日期、下拉框选中事件，见下面的查看代码onChange使用
validate 校验表单,this.$refs.名字.validate()，见下面的查看代码validate使用
reset 重置表单,this.$refs.名字.reset()，见下面的查看代码validate使用
查看代码
<template>
  <view class="form-test">
    <!-- 表单配置-->
    <!--onChange: 下拉框、日期选择时会调用此方法-->
    <vol-form
      @onChange="onChange"
      :load-key="true"
      ref="form"
      :form-options.sync="editFormOptions"
      :formFields.sync="editFormFields"
    >
    </vol-form>

    <view class="btns">
      <view class="btn">
        <u-button
          type="primary"
          @click="reset"
          shape="circle"
          text="重置表单"
        ></u-button>
      </view>
      <view class="btn">
        <u-button
          type="success"
          @click="vailForm"
          shape="circle"
          text="校验表单"
        ></u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      editFormFields: {
        inputText: '这是必填输入框',
        textarea: '这里的文字有点长这里的文字有点长这里的文字有点长。。',
        pwd: '12345',
        readonlyText: '只读输入框',
        selectVal: '',
        selectListVal: [], //多选这里的值是数组
        dateValue: '2022-03-27',
        datetimeValue: '2022-03-27 20:15',
        dateRange: ['2022-03-10', '2022-06-20'], //数组
        switchValue: 1,
        selectClickValue: '',
        dateClickValue: null
      },
      editFormOptions: [
        {
          title: '输入框',
          required: true,
          field: 'inputText'
        },
        {
          title: '多文本',
          field: 'textarea',
          type: 'textarea'
        },
        {
          title: '密码框',
          field: 'pwd',
          type: 'password'
        },
        {
          title: '只读框',
          field: 'readonlyText',
          type: 'text',
          readonly: true
        },
        {
          type: 'group' //表单分组
        },
        {
          title: '下拉框',
          field: 'selectVal',
          type: 'select',
          required: true,
          data: [],
          key: 'pn'
        },
        {
          title: '多选框',
          field: 'selectListVal',
          type: 'selectList',
          required: true,
          data: [],
          key: 'pn'
        },
        {
          type: 'group' //表单分组
        },
        {
          title: '日期',
          required: true,
          type: 'date',
          field: 'dateValue'
        },
        {
          title: '日期时分秒',
          type: 'datetime',
          field: 'datetimeValue'
        },
        {
          title: '日期范围',
          type: 'date',
          range: true,
          field: 'dateRange'
        },
        {
          type: 'group' //表单分组
        },
        {
          title: '单选',
          type: 'switch',
          field: 'switchValue'
        },
        {
          type: 'group', //表单分组
          title: '注册选择事件,见onChange方法说明'
        },
        {
          title: '下拉框事件',
          type: 'select',
          field: 'selectClickValue',
          data: [],
          key: 'pn'
        },
        {
          title: '日期事件',
          type: 'date',
          field: 'dateClickValue'
        }
      ]
    };
  },
  methods: {
    onChange(field, value) {
      //日期与下拉框选择事件
      if (field == 'selectClickValue' || field == 'dateClickValue') {
        this.$toast("选择字段"+field+"值+"value);
      }
    },
    vailForm() {
      if (this.$refs.form.validate()) {
        this.$toast('表单校验成功');
      }
    },
    reset() {
      this.$refs.form.reset();
      this.$toast('表单已重置');
    }
  },
  onShow() {}
};
</script>

<style lang="less" scoped>
.form-test {
  margin-top: -20rpx;
  background: #fbfbfb;
  padding-top: 20rpx;
}

.btns {
  display: flex;
  padding: 0rpx 20rpx;

  .btn {
    flex: 1;
    padding: 20rpx;
  }
}
</style>

2、voltable
1. props
props
属性 说明 类型 默认值
url 加载数据的接口地址，如：api/xx/xx string
defaultLoadPage 设置了url，是否默认加载表格数据 bool true
loadKey 是否加载数据源 bool true
direction 显示方向:horizontal(表格显示)/list(列表显示) string
textInline horizontal(表格显示)时文本超出是否显示省略号 Number false
index 是否显示行号,direction=horizontal生效 bool false
columns 表格配置,下面columns属性，或者查看代码中的columns配置 Array []
tableData 表格数据,不设置url属性，手动设置表格数据,具体可以见演示环境uniapp中的示例 Array []
2. columns
columns
属性 说明 类型 默认值
title 字段名字 String
hidden 是否显示 bool true
field 字段 String
click 是否开启点击事件(见下面查看代码中的使用) bool false
formatter 是否开启自定义格式化(见下面查看代码中的使用) bool false
type 显示类型：select、selectList(下拉框多选)、date(年月日)、datetime(年月日时分秒) String left
bind 数据源绑定配置，bind:{key:'字典编号',data:[]},见下面查看代码中的columns配置 {}
3. methods
methods
属性 说明 类型 默认值
formatter 自定义格式化显示,见下面查看代码中的formatter配置
rowClick 行点击事件,见下面查看代码中配置
cellClick 单元格点击事件(仅对table显示有效),见下面查看代码中配置
loadAfter api数据加载后的方法,见下面查看代码中的loadAfter配置
loadBefore 重数据加载前方法,见下面查看代码中的loadBefore配置
查看代码


<template>
  <view style="overflow: hidden">
    <vol-table
      :url="tableUrl"
      @rowClick="rowClick"
      :defaultLoadPage="load"
      @loadBefore="loadBefore"
      :height="height"
      :index="rowIndex"
      @loadAfter="loadAfter"
      ref="table"
      :direction="direction"
      @formatter="formatter"
      :columns.sync="columns"
      :textInline="textInline"
    >
    </vol-table>
  </view>
</template>

<script>
export default {
  data() {
    return {
      rowIndex: true, //显示行号
      load: true, //默认是否加载数据(设置了url才生效)
      tableUrl: 'api/app_expert/getPageData',
      direction: 'horizontal',   //设置table为水平显示或者list列表显示'horizontal'//list
      height: 0, //表格高度，默认100%高度
      textInline: false, //表格内容超出是否换行
      columns: [
        {
          field: 'ExpertId',
          title: '主键ID',
          hidden: true
        },
        {
          field: 'HeadImageUrl',
          title: '头像',
          type: 'img',
          width: 50
        },
        {
          field: 'ExpertName',
          title: '名称',
          formatter: true
        },
        {
          field: 'UserName',
          title: '帐号',
          click:true,//添加单元格点击事件
          formatter:true//添加格式化处理
        },
        {
          field: 'AuditStatus',
          title: '状态',
          type: 'select',
          bind: {
            key: 'audit',
            data: []
          }
        },
        {
          field: 'Resume',
          title: '简介',
          width: 80
        }
      ]
    };
  },
  onLoad() {
    let _this = this;
    //设置表格高度
    uni.getSystemInfo({
      success: function (res) {
        _this.height = res.windowHeight - 125;
      }
    });
  },
  methods: {
    formatter(row, column, index, callback) {
      //格式化单元格数据
      if (column.field == 'ExpertName'||column.field=='UserName') {
        return callback('<a style="color:red;">' + row.ExpertName + '</a>');
      }
      return callback(row[column.field]);
    },
    cellClick(index, row,column) { //判断单元格点击事件
      if (column.field=='UserName') {
          //点击了单元格
         this.$toast("点击了单元格"+row.UserName);
      }
    },
    rowClick(index, row,column) {
      //行点击事件
      this.$toast("点击了第"+index+"行");
    },
    loadAfter(data, callback) {
      //api数据加载后的方法
      callback(true);
    },
    loadBefore(params, callback) {
      //数据加载前方法,可以自己设置查询条件
      // params.wheres.push({ name: '字段', value: '值' });
     
      // params.value='设置一些其他值'

      callback(true);
    },
    reload(){ //刷新表格数据
      this.$refs.table.load(null,true)//
    }
  }
};
</script>

<


3、viewgrid生成页面
1. data
data
属性 说明 类型 默认值
rowIndex 是否显示行号,direction=horizontal生效 bool false
load 是否默认加载table表格数据 bool true
height table高度(默认自动计算) Number
direction 显示方向:horizontal(表格显示)/list(列表显示) string
textInline horizontal(表格显示)时文本超出是否显示省略号 Number false
titleField 如果table表格属性direction是以list显示，可以指定标题字段 String false
fabButtons 右下角的浮动按钮,格式[{icon:'图标',value:'自定义',hidden:false,onClick:()=>{ this.xx() }}] Arrar false
buttons 新建编辑弹出框中的按钮,格式[{name:'按钮名',icon:'图标',value:'自定义',hidden:false,onClick:()=>{ this.xx() }}] Arrar false
currentAction 前操作状态是编辑还是建新,Add/Update bool false
maxHeight 新建编辑、查询弹出框的最大高度(默认自动计算) Number 0
showButtons 是否显示右下角的浮动按钮 bool true
columns 表格配置,见上面的voltable的columns配置 Array []
editFormOptions 编辑表单配置见上面的volform的formOptions配置 Array []
editFormFields 编辑表单字段见上面的volform的formFields {} {}
searchFormOptions 查询表单配,同上 Array []
searchFormFields 查询表单字段,同上 {} {}
hasEditpermission 是否有编辑、新建权限 bool false
searchModel 查询弹出框 bool false
model 新建编辑弹出框 bool false
hasEditpermission 是否有编辑、新建权限 bool false
2. methods
methods
属性 说明 类型 默认值
search 调用刷新方法this.search()
rowClick 行点击事件,见下面查看代码中的onInited配置
cellClick 单元格点击事件,见下面查看代码中的onInited配置
loadAfter api数据加载后的方法,见下面查看代码中的loadAfter配置
loadBefore 重数据加载前方法,见下面查看代码中的loadBefore配置
3. slot(可在生成的vue页面中自定义slot来显示自定义内容)
slot(可在生成的vue页面中自定义slot来显示自定义内容)
属性 说明 类型 默认值
gridHeader 页面上最顶部位置
gridFooter 页面上最底部位置
modelHeader 新建编辑弹出框最顶部位置
modelFooter 新建编辑弹出框最底部位置
searchHeader 查询弹出框最顶部位置
searchFooter 查询弹出框最底部位置
查看代码

//  *自定义业务逻辑扩展
//************************************************
export default function() {
  return {
    methods: {
      onInited() { //页面参数初始化
        //设置table超出换行显示
        //this.textInline = false;

        //设置列宽度
        //this.columns[1].width = 70;

        //设置table为水平显示或者list列表显示
        //this.direction = 'horizontal'//list
        //如果为list列表显示，指定list的标题列
        this.titleField="CreateDate";
   
    //手动设置页面列表/table高度
        //this.height=this.height-65;
        //设置自定义格式显示
        //this.columns.forEach(column=>{
        //  if(column.field=='字段'){
        //自定义格式化显示,在下面的formatter实现具体逻辑
        //column.formatter=true;
       
                //单元格添加点击件,仅对table显示有效,事件执行见下面cellClick方法
              //column.cellClick=true

        //指定字段为date类型不显示时分秒
        //column.type="date";

        //设置列宽度
        //column.width = 70;
        //  }
     
        // })

        //页面打开时禁用加载数据
        this.load=false;
        //页面打开时默认弹出查询框
        this.searchModel = true;
      },
      formatter(row, column) { //自定义格式化
        if(column.field=='字段'){
         return '<a style="color:red;">' + row[column.field] + '</a>';
        }
        return row[column.field]
      },
    cellClick(index, row, column){ //单元格点击事件，仅对table显示有效，配置见上面onInited中的配置
      if(column.field=='字段'){
        //字段的点击事件
      }
    },
      rowClick(index, row, column) { //行点击事件(默认触发编辑)
        //index当前点击的行
        //row当前行数据
        //column当前行配置信息
        return true;
      },
      searchBefore(params){ //查询前
          // params.wheres.push(
          //   {
          //     name:"字段名",//查询的字段
          //     value:"值", //查询的字段的值
          //     displayType:"" //text/selectList/like  --查询类型：selectList为多选，like为模糊查询
          //   }
          // )

          //  params.value='xx'//还可以自定义一些其他值，后台的查询方法中loadData.vlue取值
        return true;
      },
      updateBefore(formData) { //更新保存前操作
          //formData格式：(自己调试出输看)
          // {
          //     mainData: { 主表字段1: 'x1', 主表字段2: 'x2' },
          //     detailData: [{ 明细表字段1: d1 }],
          //     delKeys: null //删除明细表行数据的id
          // }

          //formData.mainData.xxx="xxxx";//还可以继续手动添加值

          //如果需要同时提交其他数据到后台，请设置formData.extra=xxxx
          //后台在表xxxxService.cs中重写Update方法即可从saveDataModel参数中拿到extra提交的对象
        return true;
      },
      addBefore(formData) {//新建保存前操作
          //formData格式：
          // {
          //     mainData: { 主表字段1: 'x1', 主表字段2: 'x2' },
          //     detailData: [{ 明细表字段1: d1 }],
          //     delKeys: null //删除明细表行数据的id
          // }

          //formData.mainData.xxx="xxxx";//还可以继续手动添加值

          //如果需要同时提交其他数据到后台，请设置formData.extra=xxxx
          //后台在表xxxxService.cs中重写Add方法即可从saveDataModel参数中拿到extra提交的对象
        return true;
      },
      modelOpenAfter(){ //弹出框打开的方法
        // this.currentAction=='Add'//判断是新建还是编辑操作
         return true;//返回false不会弹出框
      }
    }
  }
}