新页面编辑说明
新页面编辑说明
- 此页面文档仅限于【代码生成器编辑模式选择新页面编辑时生效】
- 同样自动生成代码，支持一对多、多对多功能,根据业务自定义扩展
- 业务实现文件位置:views->类库名(代码生成器选择的类库)->文件夹名(代码生成器输入的文件夹名)->表名->edit.vue
自定义按钮
自定义按钮
- 在生成的vue文件直接配置表单、明细表按钮
自定义按钮1
<template>
// 在生成的edit.vue文件vol-edit标签添加@initButtons="initButtons"方法
<vol-edit ref="edit" @initButtons="initButtons"></vol-edit>
</template>
<script setup lang="jsx">
//初始化表单按钮
const initButtons = (buttons) => {
//splice在第三个按钮后面添加一个按钮,也可使用buttons.push或者unshift添加按钮到最后或最前
buttons.splice(3, 0, ...[{
name: '测试按钮', //按钮名称
icon: 'el-icon-edit-outline', //按钮图标http://doc.volcore.xyz/icon/
type: 'success', //type类型见:https://element-plus.org/zh-CN/component/button.html
plain: true,
onClick: () => {
proxy.$message.success('点击了按钮')
}
}]) //数据可以传多个按钮配置
}
</script>
自定义按钮2
<template>
// 在生成的edit.vue文件vol-edit标签添加@initDetailButtons="detailButtons"三个方法
<vol-edit ref="edit"
@initDetailButtons="initDetailButtons"
@initDetailColumns="initDetailColumns"
@initSubDetailColumns="initSubDetailColumns"
></vol-edit>
</template>
<script setup lang="jsx">
//初始化主从表按钮(注意不是一对多，只是主从表，一对多的看下面)
const initDetailButtons = (detailButtons) => {
// 配置同上(自定义按钮1),detailButtons.splice()
}
//初始化主从表按钮(注意不是一对多，只是主从表)
// detail.columns.forEach((col) => {
// if (col.field == 'Remark') {
// col.edit = null
// col.render = (h, { row, column, index }) => {
// return (
// <div>
// <el-button link
// onClick={($e) => {proxy.$message.success('点击了图标1') }}
// class="el-icon-search"
// style="color: #2196F3;cursor: pointer;"
// ></el-button>
// <el-button link
// onClick={($e) => {proxy.$message.success('点击了图标2') }}
// class="el-icon-date"
// style="margin-left:1px;color: #2196F3;cursor: pointer;"
// ></el-button>
// <span style="margin-left:5px">{row.Remark}</span>
// </div>
// )
// }
// }
// })
//初始化一对多二级表格与按钮
const initDetailColumns = (detailColumns) => {
detailColumns[0].buttons.push({
name: '按钮', //按钮名称
icon: 'el-icon-edit-outline', //按钮图标http://doc.volcore.xyz/icon/
type: 'primary',
plain: true,
onClick: () => {
proxy.$message.success('点击了二级明细按钮')
}
})
//初始化表格按钮
detailColumns[0].columns.forEach((col) => {
if (col.field == 'Remark') {
col.edit = null
col.render = (h, { row, column, index }) => {
return (
<div>
<el-button link
onClick={($e) => {proxy.$message.success('点击了图标1') }}
class="el-icon-search"
style="color: #2196F3;cursor: pointer;"
></el-button>
<el-button link
onClick={($e) => {proxy.$message.success('点击了图标2') }}
class="el-icon-date"
style="margin-left:1px;color: #2196F3;cursor: pointer;"
></el-button>
<span style="margin-left:5px">{row.Remark}</span>
</div>
)
}
}
})
//初始化一对多三级表格与按钮
const initSubDetailColumns = (subDetailColumns) => {
//操作同上initDetailColumns
}
</script>
自定义按钮3
<template>
// 在生成的edit.vue文件vol-edit标签添加@detailButtons="detailButtons"三个方法
<vol-edit ref="edit"
@initDetailColumns="initDetailColumns"
@initSubDetailColumns="initSubDetailColumns"
></vol-edit>
</template>
<script setup lang="jsx">
//主从表添加按钮(注意不是一对多)
// detail.columns.push({title:"操作"})//其他配置同下
//初始化一对多二级表格与按钮
const initDetailColumns = (detailColumns) => {
//明细表单独添加一列按钮,将示例：http://doc.volcore.xyz/web/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%89%E9%92%AE.html
detailColumns[0].columns.push({
title: '操作',
field: '操作',
width: 80,
align: 'center', // 'center',
render: (h, { row, column, index }) => {
return (
<div>
<el-button
onClick={($e) => { proxy.$message.success('点击了表格按钮') }}
type="primary" plain
style="height:26px; padding: 10px !important;">
查看
</el-button>
</div>
)
}
})
}
}
//初始化一对多三级表格与按钮
const initSubDetailColumns = (subDetailColumns) => {
//操作同上initDetailColumns
}
</script>
主表表单配置
主表表单配置
- 在生成vue文件中配置表单属性
获取表单值
<script setup lang="jsx">
//表单值对象
editFormFields
</script>
表单设置值
<script setup lang="jsx">
editFormFields.字段=值
</script>
设置明细表高度
<script setup lang="jsx">
const detailHeight = 100
</script>
判断是否为新建
<script setup lang="jsx">
if(isAdd){
}
</script>
获取编辑主键id值
<script setup lang="jsx">
//只有编辑时才有值
const id= route.query.id;
</script>
http调用接口请求
<script setup lang="jsx">
//生成的edit已经内置了，直接使用即可
const { proxy } = getCurrentInstance()
proxy.http.post("url",参数,true).then(res=>{
})
</script>
提示信息
<script setup lang="jsx">
//生成的edit已经内置了，直接使用即可
const { proxy } = getCurrentInstance()
proxy.$message.success("提示信息")
proxy.$message.error("提示信息")
</script>
自定义显示内容(数据槽)
见上面【新页面编辑说明】截图效果，生成的edit.vue文件已内置，在文件中提示的【自定义数据槽显示】位置即自定义数据槽
表单数据加载前
//编辑时才会执行
<template>
// 在生成的edit.vue文件vol-edit标签添加@loadFormBefore="loadFormBefore"方法
<vol-edit ref="edit"
:loadFormBefore="loadFormBefore"
></vol-edit>
</template>
<script setup lang="jsx">
//页面加载时获取表单字典数据
const loadFormBefore = (params,callback) => {
//params为查询条件参数
callback(true)//返回false不会加载数据
}
</script>
表单数据加载后
//编辑时才会执行
<template>
// 在生成的edit.vue文件vol-edit标签添加@loadFormBefore="loadFormBefore"方法
<vol-edit ref="edit"
:loadFormBefore="loadFormBefore"
></vol-edit>
</template>
<script setup lang="jsx">
//页面加载时获取表单字典数据
const loadFormAfter = (result) => {
//result后台返回的表单数据
//formFields为当前表单数据，在此方法也可以直接设置值
}
</script>
重置(刷新)表单
edit.value.reset();
//重置表单也可以设置一些默认值
//edit.value.reset({字段:值});
数据源(数据字典)加载事件
<template>
// 在生成的edit.vue文件vol-edit标签添加@dicInited="dicInited"方法
<vol-edit ref="edit"
@dicInited="dicInited"
></vol-edit>
</template>
<script setup lang="jsx">
//页面加载时获取表单字典数据
//dicData返回的字典数据
//table，对应明细表的字典，table没有值时为表单加载的数据
const dicInited = (dicData,table) => {
}
</script>
addBefore 新建前
//新建时点保存按钮事件
<template>
// 在生成的edit.vue文件vol-edit标签添加:addBefore="addBefore"方法
<vol-edit ref="edit"
:addBefore="addBefore"
></vol-edit>
</template>
<script setup lang="jsx">
//页面加载时获取表单字典数据
const addBefore = (formData,callback) => {
//formData提交的表单数据
callback(true);//返回false不会执行保存
}
</script>
addAfter 新建后
//新建时点保存按钮事件，后台接口返回事件
<template>
// 在生成的edit.vue文件vol-edit标签添加:addAfter="addAfter"方法
<vol-edit ref="edit"
:addAfter="addAfter"
></vol-edit>
</template>
<script setup lang="jsx">
const addAfter = (result,callback) => {
//formData提交的表单数据
callback(true);//返回false不会执行保存
}
</script>
updateBefore 编辑前
//编辑时点保存按钮事件
<template>
// 在生成的edit.vue文件vol-edit标签添加:updateBefore="updateBefore"方法
<vol-edit ref="edit"
:updateBefore="updateBefore"
></vol-edit>
</template>
<script setup lang="jsx">
const updateBefore = (formData,callback) => {
//formData提交的表单数据
callback(true);//返回false不会执行保存
}
</script>
updateAfter 编辑后
//编辑时点保存按钮事件，后台接口返回事件
<template>
// 在生成的edit.vue文件vol-edit标签添加:updateAfter="updateAfter"方法
<vol-edit ref="edit"
:updateAfter="updateAfter"
></vol-edit>
</template>
<script setup lang="jsx">
//页面加载时获取表单字典数据
const updateAfter = (result,callback) => {
//formData提交的表单数据
callback(true);//返回false不会执行保存
}
</script>
提交表格所有数据
//默认只会提交修改的明细表数据，设置为true会提交所有加载的明细表数据
<template>
// 在生成的edit.vue文件vol-edit标签添加:submitChangeRows="true"方法
<vol-edit ref="edit" :submitChangeRows="true"></vol-edit>
</template>
表单自定义按钮
<template>
//在生成的edit.vue文件中操作
<vol-edit ref="edit" ></vol-edit>
</template>
<script setup lang="jsx">
editFormOptions.forEach((option) => {
option.forEach((item) => {
if (item.field == '字段') {
item.extra = {
btnValue: '发送短信',
render: (h, {}) => {
return (
<div>
<el-button
type="primary"
link
onClick={() => {
proxy.$message.success('点击了按钮')
}}
>
<i class="el-icon-search">选择</i>
</el-button>
<el-button
type="primary"
style="margin-left:0"
link
onClick={() => {
//设置倒计时
var timer = setInterval(function () {
if (countdown > 0) {
item.extra.btnValue=countdown+'(秒)'
countdown--
} else {
//给倒计时按钮设置值
item.extra.btnValue='发送短信';
countdown=10;
clearInterval(timer)
}
}, 1000)
}}
>
<i class="el-icon-message">{item.extra.btnValue}</i>
</el-button>
</div>
)
}
}
}
})
})
</script>
表单分组显示
<template>
//在生成的edit.vue文件中操作
<vol-edit ref="edit" ></vol-edit>
</template>
<script setup lang="jsx">
editFormOptions.forEach((ops) => {
ops.forEach((x) => {
if (['字段1','字段2'].includes(x.field)) {
x.group = "基础信息";
} else if (['字段3','字段4'].includes(x.field)) {
x.group = "供应商资质";
} else {
x.group = "供应商信息";
}
});
});
</script>
弹出框选择数据
见上面[表单自定义按钮]配置按钮及触发事件，再接着在当前页面加一个弹出框组件显示
明细表配置
明细表配置
- 在生成的vue可对明细表配置编辑、数据加载、合计等操作
loadTableBefore明细表查询前
<template>
// 在生成的edit.vue文件vol-edit标签添加:loadTableBefore="loadTableBefore"两个方法
<vol-edit ref="edit" :loadTableBefore="loadTableBefore"></vol-edit>
</template>
<script setup lang="jsx">
//明细表加载前方法
const loadTableBefore = (params, callback,table,item) => {
//params明细表查询参数
//table查询的明细表(一对多的明细表时才有值)
//item明细表配置(一对多的明细表时才有值)
callback(true);//返回false不会加载明细表数据
}
</script>
loadTableAfter明细表查询后
<template>
// 在生成的edit.vue文件vol-edit标签添加:loadTableAfter="loadTableAfter"两个方法
<vol-edit ref="edit" :loadTableAfter="loadTableAfter"></vol-edit>
</template>
<script setup lang="jsx">
//明细表从数据库加载后方法，可以给明细重新设置值
const loadTableBefore = (rows,result, callback,table,item) => {
//rows返回的明细表数据
//result接口返回的完整数据
//table查询的明细表(一对多的明细表时才有值)
//item明细表配置(一对多的明细表时才有值)
callback(true);//返回false不会加载明细表数据
}
</script>
获取明细表格配置(主从表)
detail.columns
获取明细表格配置(一对多)
<template>
// 在生成的edit.vue文件vol-edit标签添加@initDetailColumns="initDetailColumns"两个方法
<vol-edit ref="edit"
@initDetailColumns="initDetailColumns"
@initSubDetailColumns="initSubDetailColumns"
></vol-edit>
</template>
<script setup lang="jsx">
//初始化一对多二级表格配置
const initDetailColumns = (detailColumns) => {
//detailColumns里面包括多张明细表按钮、表格等配置信息
}
//初始化一对多三级表格与按钮
const initSubDetailColumns = (subDetailColumns) => {
//操作同上initDetailColumns
}
//一对多二级表格配置可直接使用details对象
details[0].columns;
details.foEach(item=>{})
</script>
明设置添加值设置默认值
<template>
// 在生成的edit.vue文件vol-edit标签添加
<vol-edit ref="edit" :addRow="addRow"
></vol-edit>
</template>
<script setup lang="jsx">
const addRow=(table,ops)=>{
//判断表，如果是一对一主从明细表不需要if判断
if(table==='表名'){
return {字段1:值2,字段2:值2}
}
}
</script>
获取明细对象
edit.value.getTable('明细表表名')
获取明细表所有行数据
const rows= edit.value.getTable('明细表表名').rowData;
明细表添加行数据
const rows= edit.value.getTable('明细表表名').rowData;
//添加到最后一行
rows.push(...[{字段:"值"},{字段:"值"}])
//添加到第一行
rows.unshift(...[{字段:"值"},{字段:"值"}])
获取明细表选中的行
const rows= edit.value.getTable('明细表表名').getSelected();
设置明细表默认选中行
edit.value.getTable('明细表表名').toggleRowSelection(row);//row为需要选中的行
刷新明细表
edit.value.loadDetail('表名');//刷新指定明细表数据