# 代码生成页面ViewGrid
说明
1、每张表生成前端的代码都有都一个[表名.js]文件，按此文档可对生成页面进行自定义扩展
2、后台扩展及业务实现 点击查看
# 参数属性配置
| 属性 | 说明 | 类型 | 默认 |
|---|---|---|---|
| 重要说明 | 此处列出来的这些属性，在生成页面对应表名的.js文件onInit中可以直接this.xx使用,见下面示例 | json | |
| 自定义扩展页面获取父组件(获取生成页面对象) | 1、通过 this.$emit('parentCall', $parent => { //如：调用页面查询 $parent.search() })可以访问父组件ViewGird中的任何属性、对象、方法 2、见上面示例【扩展弹出框按钮】 | ||
| 获取自定义扩展页面 | this.$refs.gridHeader/gridBody/gridFooter/modelHeader/modelBody/modelFooter | ||
| rowKey | 树形table的主键字段,字段的值必须是唯一的(2021.05.02) | String | |
| dragPosition | 表格拖动改变高度(可拖动位置，顶部拖动top,底部bottom) | top/bottom | |
| columns | 查询页面table表的配置,如果满足不了业务,可参照VolTable参数动态扩展 | array | [] |
| detail | 主从明细表配置：{columns:[],sortName:''},columns主从明细表table列配置,sortName主从明细表排序字段 | json | {} |
| editFormFields | 编辑字段，可参照VolForm配置 | json | |
| editFormOptions | 编辑配置,，可参照VolForm配置 | array | [] |
| searchFormFields | 查询字段同上 | json | |
| searchFormOptions | 查询配置，同上 | array | [] |
| select2Count | 下拉框选项超出500个后会启用element plus中的select2组件 | int | 500 |
| queryFields | 指定快捷查询字段(默认第一个字段为快捷查询字段), onInit(){this.queryFields=['字段1','字段2']},注意代码生成器必须设置了查询行的字段才会生效 | Array | |
| table | 表其他配置,如： table: { key: 'Order_Id', //排序字段 footer: 'Foots', cnName: '主从明细表ViewGird组件使用',//表中文名 name: 'SellOrder',//表名(代码生码的别名) url: '/SellOrder/',//后台控制器名 sortName: 'CreateDate' //后台排序字段} | array | {} |
| extend | 扩展js中的所有对象,如:doc_viewGirdExtension.js整个js文件的对象 | json | array |
| single | 查询界面的表是否只能单选 | bool | false |
| continueAdd | 连续添加(新建功能连续添加不会关闭弹出框) | bool | false |
| continueAddName | 连续添加的按钮文字 | string | |
| downloadFileName | 自定义导出文件名(2022.09.26更新前端组件后才能使用) | string | |
| boxModel | 弹出新建、编辑框状态 | bool | false |
| currentAction | 当前操作的状态:如：Add,Update | string | |
| currentRow | 当前编辑的行数据 | json | |
| labelWidth | 高级查询label标签的宽度 | number | 100 |
| maxBtnLength | 查询界面显示的按钮最大数量，超过的在更多中显示 | number | 3 |
| ck | 是否显示checkbox(2020.11.01) | bool | true |
| columnIndex | 是否显示index序号(2020.11.01) | bool | false |
| textInline | table内容超出后自动换行(2021.01.16) | bool | true |
| (获取焦点)获取表单原生dom标签 | this.$refs.form.$refs.字段名 使用场景:新建/编辑时设置input标签设置焦点：this.$refs.form.$refs.字段名[0].focus() (2022.09.12更新volform.vue文件后才能使用) | ||
| buttons | 查询界面的所有按钮，[{ name: "刷 新",//按钮名称 icon: 'md-refresh',//按钮图标，参照iview图标 type: 'success',//按钮类型,可参照iview buttons设置此属性 hidden:false,//是否隐藏按钮(如果想要隐藏按钮，在onInited方法中遍历buttons，设置hidden=true) onClick: ()=> { //触发事件 this.refresh(); } }] | array | [] |
| boxButtons | 弹出框的所有按钮，格式同上 | array | [] |
| dicKeys | 所有数据源的字典编号 | array | [] |
| hasKeyField | 所有有数据源的字段 | array | [] |
| load | 页面打开后是否默认加载表格数据 | bool | true |
| activatedLoad | 页面触发actived时是否刷新页面数据 | bool | false |
| hasDetail | 是否有明细表数据(可控制新建、编辑弹出框中的明细表是否显示2022.04.17更新viewgrid.vue才能使用) | bool | false |
| detailOptions | 明细表参数 detailOptions: { //弹出框主从明细表(明细)对象 //主从明细表配置 buttons: [], //弹出框主从明细表表格操作按钮,目前有删除行，添加行，刷新操作，如需要其他操作按钮，可在表对应的.js中添加 cnName: "", //主从明细表名称 key: "", //主从明细表主键名 data: [], //数据源 columns: [], //主从明细表列信息 textInline: true, //明细表行内容显示在一行上，如果需要换行显示，设置false edit: true, //明细是否可以编辑 single:false,//明细表是否单选 delKeys: [], //当编辑时删除当前明细的行主键值 url: "", //主从明细表加载数据的url pagination: { total: 0, size: 100, sortName: "" }, //主从明细表分页配置数据 height: 0, //默认主从明细表高度 doubleEdit: true, //使用双击编辑 columnIndex: false, //是否显示index序号(2020.11.01) ck: true, //是否显示checkbox(2020.11.01) //开启编辑时 beginEdit: (row, column, index) => { return true; }, //结束编辑前 endEditBefore: (row, column, index) => { return true; }, //结束编辑后 endEditAfter: (row, column, index) => { return true; }, summary:弹出框明细表是否显示统计和求，设置为true需要实现后台GetDetailSummary方法,可参照SellOrderService实现, } | json | |
| auditParam | 审核参数 auditParam: { //审核对象 rows: 0, //当前选中审核的行数 model: false, //审核弹出框 status: -1, //审核结果 reason: "", //审核原因 //审核选项(可自行再添加) data: [{ text: "通过", status: 1 }, { text: "拒绝", status: 2 }] }, | ||
| tableHeight | 指定页面table的高度(只能在onInit方法中使用) | number | 0 |
| height | 查询页面table的高度,值已经计算好了(只能在onInited方法中使用) | number | |
| tableMaxHeight | 查询页面table的最大高度,如果同时设置了tableHeight，只会tableMaxHeight起作用 | number | 0 |
| pagination | 分页参数 pagination: { total: 0, size: 30, //分页大小 sortName: "" //排序字段 } | json | |
| boxOptions | 新建、编辑弹出框参数 boxOptions: { saveClose: true, //新建、编辑完成后是否关闭弹出框 labelWidth: 100, //弹出框里表单的label标签的宽度 height: 0, //弹出框的高度(默认自动计算) width: 0//弹出框的宽度(默认自动计算) } | json |
# 方法
| 方法 | 说明 |
|---|---|
| refresh | 刷新查询界面的表数据,使用：this.refresh()或者this.search() |
| getSelectRows | 查询界面获取选中的行,使用：this.getSelectRows() |
| initDicKeys | 刷新字典数据源,使用：this.initDicKeys()//使用场景如：新建编辑级联下拉框保存后，调用此方法刷新级联的数据源 |
| filterPermission | onInit() { //例：判断用户是否有SellOrder表有没有Add权限(2021.03.19到最后的才能使用) //第二个参数可选值：Add、Update、Delete、Audit、Import、Export、Search，也可以是自定的义的按钮权限值 if (this.filterPermission("SellOrder", 'Add')) { //to do... } } |
| 显示所有查询条件 | this.setFiexdSearchForm(true)//直接放在onInit中使用 |
| 调用新建方法 | this.add() |
| 调用删除方法 | this.del(row)//row要删除的行数据 |
| 调用编辑方法 | this.edit(row)//row要编辑的行数据 |
| 获取主从明细表明细选择中的行 | 获取主从明细表明细选择中的行,使用：this.$refs.detail.getSelected() |
| 强制刷新主从明细表统计合计数据 | this.$refs.detail.updateDetailTableSummaryTotal() |
| 获取table所有的行数据 | this.$refs.table.rowData |
| 获取/设置table正在编辑的行 | this.$refs.table.edit.rowIndex //设置值可以指定某行处于编辑状态，值为-1时关闭编辑状态， |
| 获取明细表table所有的行数据 | this.$refs.detail.rowData |
| 刷新主从明细表数据 | this.resetDetailTable() //如果是新建弹出框中，此方法不会执行 //新建中刷新主从明细表解决办法： /* let _currentAction= this.currentAction; this.currentAction=""; this.resetDetailTable() this.currentAction=_currentAction; */ |
# 自定义组件扩展
生成页面自定义扩展见,http://v3.volcore.xyz/web/组件扩展.html (opens new window)
查看示例代码 →