f-page-generator v0.1.23

vue-page-design

安装

npm install f-page-generator

##快速上手

import Fpage from 'FPageGenerator'

Vue.use(Fpage)

  <f-page      ref="fPage"      :codeUrl="codeUrl"      @pageDown="onPageDown"       :childSlots="'xmmc', 'projectTotalInfo'"    >

1、codeUrl: 'online/code/' + 编码 2、onPageDown 该方法为加载完设计器接口后的回调 3、useFPage: true一定要设置，不然不能调用设计器中的定义的方法 4、childSlots为设计中加的插槽 注意：普通的插槽和表格中的插槽不一样

1、表格中的插槽使用，如slot="xmmc"，注意record的值是一个对象，该对象中有text,record，record的值为列表中该行的数据

2、普通的插槽使用，如：v-slot:projectTotalInfo                                                                                                            

表单 使用表单控件，表单id一定要设置，比如设置id值为”form”,使用 this.components.searchForm0获取该控件， 常用的api

this.components.searchForm0.getData() //获取表单的值

this.components.searchForm0.setData({ xzqhdm  }) //设置表单某项的值，或者全部的值，参数为一个对象

this.components.searchForm0.clearData() //清除表单的值

this.components.searchForm0.setTreeDataStatic('tree', tree)//设置树形控件的数据

this.components.searchForm0.setItemStatus('xzqhdm', 'hidden', false) //设置表单某一项，或者多项的状态，状态包括显示隐藏，是否可读，是否禁用等 ，第一个参数为要设置的元素的key，类型为数组，第二个参数为状态名称，第三个参数为状态的值，类型布尔值

this.components.searchForm0.setOptions('nf', arr) //设置下拉选择框的值

this.components.form0.setErrorMes('ghmj', '建设面积应大于等于灌溉面积') //设置表单某一项的校验的错误信息

this.components.form0.validateData() //表单校验方法，如果有未通过的，返回未通过的表单的值，如果通过，无返回值

this.components.form0.validateData('ghmj', 'gxjsmj') //单独校验某些项

this.components.form0.setHidden('ghmj', 'gxjsmj',true) //设置表头显示隐藏

补充：

表格 同表单，要设置表格id，如 “table”，id值为唯一标识 获取表格控件， this.components.table0

1、如果通过设置接口地址加载数据，可设置是否自动加载 this.components.table0.loadData(params) //加载数据方法,可传参，如果不传，拿不到查询表单中的数据 2、如果设置自定义加载函数，如：getList,将getList方法写在methods中，使用this.components.table0.loadData()，该方法会调用getList 3、刷新数据this.components.table0.reload 4、手动设置表格中的数据，比如，表格中的数据不是通过一个接口获取，方法同2中，设置自定义函数，该函数返回一个对象{           success: true,           result: {             extras: null,             pageNo: 1,             pageSize: 9999,             records: this.list,             total: this.list.length,             totalCount: this.list.length,             totalPage: 1           }

表格中的选中功能

1、选中后的执行方法，该方法会返回选中项，类型为一个数组

2、设置哪些选项不可选中，如下图：

该事件的执行方法扔写在methods中，返回一个布尔值

    canSelected (r) {       const { xmdm } = r       if (this.selectedProject.length === 0) {         return true       }       return xmdm !== this.selectedProject0.xmdm     },

操作列

1、方法名为，点击改该按钮的执行方法，写在methods中，注意该方法中的参数，是一个对象  handleSub (r) {       const record = r.record       this.$router.push({ name: 'ViewDeclarationReplyPlan', query: { pftype: record.pftype, pfpcdm: record.pfpcdm, nf: record.nf, ...this.querys } }) },

2、隐藏函数为如hiddenBack，写在methods中 hiddenBack (text, record, index) {       const flag = record.czgn.indexOf('ch') > -1       return !flag     }

按钮 设置按钮loading  this.$refs.fPage.$refs.a0.setButtonLoading('bc', flag)

a为按钮组id，bc为按钮的id

可调用方法

表格

loadData(params, url) 加载事件

reload 重载事件

addRow 新增行

getEditRecords 获取编辑后的所有表格数据

getSelectRows 获取所有选择行

selectRows(ids) 选择行，参数为行id数组

clearRowKeys 清空选择行

表单

getData() 返回整个表单的数据值

setData(values) 设置表单值，参数为键值对对象

clearData(ids) 清除表单值，参数为键名数组，不传则清除所有

validateData(ids) 校验错误值，参数为键名数组，不传则校验所有，有错误会返回错误信息

setErrorMes(id, err) 手动设置错误，参数为键名和错误信息

focus(id) 手动设置焦点，参数为控件id

blur(id) 用法与focus相同

setItemStatus(ids, key, status) 设置隐藏/销毁，参数为控件id的数组，hidden/destroy，true/false

可监听事件

表格

cellClick 单元格点击事件

editDown 编辑完成后的回调事件

onSelectChange 选择器改变事件

headerCellClick 表格标题栏点击事件

confirmExport 确认导出框

onLoad 表格加载完成的回调

表单

query 头部表单查询重置按钮点击事件，会携带表单值为参数

initialValueSetted 设置表单默认值事件完成后的回调

updataValue 表单值变化事件冒泡，会携带变化控件的键值对

blur 失去焦点事件

focus 获取焦点事件

pressEnter 回车事件

select 选择完成后的回调