odboy/cutejava
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(components): 添加表单组件重置按钮和取消事件支持

Browse Source 
- 在 CuteFormDialog、CuteFormDialogPro 和 CuteFormDrawer 组件中添加 showReset 属性控制重置按钮显示
- 为表单组件添加 reset 事件发射功能
- 为表单组件添加 cancel 事件发射功能
- 修改 CuteFormDialog 的 title 属性为非必需，默认值为'默认标题'
- 在 CuteFormDialogPro 中为输入框、选择框、日期范围和日期时间范围组件添加 disabled 状态支持
- 更新 CuteEditTableDemo 的文档描述，说明 disabled 字段功能
- 创建并添加 CuteFormDialogDemo、CuteFormDialogProDemo 和 CuteFormDrawerDemo 示例页面
This commit is contained in:
odboy
2026-02-05 10:40:08 +08:00
parent 421788fce8
commit e349499e55
12 changed files with 370 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cutejava-front/src/views/componentsDemo/advanced/CuteEditTableDemo.vue
+2 -2
View File
@@ -63,7 +63,7 @@ export default {
]
},
apiData: [
{ name: 'value', remark: '绑定的值', type: 'array', defaultValue: '-', required: '否' },
{ name: 'value', remark: '绑定的值。当数据源中包含disabled字段时，当前行会随着disabled的值禁用与启用', type: 'array', defaultValue: '-', required: '否' },
{ name: 'primary-key', remark: '对象中的哪个字段设置为主键', type: 'string', defaultValue: 'id', required: '是' },
{ name: 'height', remark: '表格高度', type: 'number', defaultValue: 'height', required: '否' },
{ name: 'schema', remark: '表格定义', type: 'array', defaultValue: '[]', required: '是' },
@@ -77,7 +77,7 @@ export default {
{ name: 'name', remark: '表单项名称', type: 'string', defaultValue: '-', required: '是' },
{ name: 'title', remark: '表单项标题', type: 'string', defaultValue: '-', required: '是' },
{ name: 'type', remark: '表单项类型。input 输入框 | select 单选框', type: 'string', defaultValue: '-', required: '是' },
{ name: 'dataSource', remark: '数据源。当type=select时必填。当数据源中包含disabled字段时，当前行会随着disabled的值禁用与启用', type: 'array', defaultValue: '[]', required: '否' }
{ name: 'dataSource', remark: '数据源，当type=select时必填。', type: 'array', defaultValue: '[]', required: '否' }
]
}
},
cutejava-front/src/views/componentsDemo/advanced/CuteFormDialogDemo.vue
+104
View File
@@ -0,0 +1,104 @@
<template>
<div>
<h4>何时使用</h4>
<ul class="description">
<li>不离开当前场景完成增删改操作</li>
<li>需要确认用户的操作，明确操作会产生的结果，提醒告知用户</li>
<li>作为配置型功能及信息的容器</li>
<li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
</ul>
<h4>基础用法</h4>
<cute-button type="primary" @click="showDialogForm">显示对话框表单</cute-button>
<cute-form-dialog
ref="formDialog"
:model="model"
:rules="rules"
title="表单对话框"
@submit="onSubmit"
>
<el-form-item label="活动名称" prop="name" label-width="100px">
<el-input v-model="model.name" placeholder="请输入" style="width: 100%" />
</el-form-item>
<el-form-item label="活动区域" prop="region" label-width="100px">
<el-select v-model="model.region" placeholder="请选择" style="width: 100%">
<el-option label="区域一" value="shanghai" />
<el-option label="区域二" value="beijing" />
</el-select>
</el-form-item>
</cute-form-dialog>
<h4>API</h4>
<el-table :data="apiData">
<el-table-column prop="name" label="参数" width="220" />
<el-table-column prop="remark" label="说明" width="450" />
<el-table-column prop="type" label="类型" />
<el-table-column prop="defaultValue" label="默认值" />
<el-table-column prop="required" label="是否必填" />
</el-table>
<h4>方法</h4>
<el-table :data="methodData">
<el-table-column prop="name" label="函数" width="220" />
<el-table-column prop="remark" label="说明" width="450" />
<el-table-column prop="inputArgs" label="入参" />
<el-table-column prop="outArgs" label="出参" />
</el-table>
</div>
</template>
<script>
import CuteFormDialog from '@/views/components/advanced/CuteFormDialog.vue'
import CuteButton from '@/views/components/dev/CuteButton.vue'
export default {
name: 'CuteFormDialogDemo',
components: { CuteButton, CuteFormDialog },
data() {
return {
model: {
name: '',
region: '',
modeList: []
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
]
},
apiData: [
{ name: 'title', remark: '弹窗的标题', type: 'string', defaultValue: '默认标题', required: '否' },
{ name: 'width', remark: '弹窗的宽度', type: 'string', defaultValue: '40%', required: '否' },
{ name: 'fullscreen', remark: '是否全屏', type: 'boolean', defaultValue: 'false', required: '否' },
{ name: 'model', remark: '绑定的表单对象', type: 'object', defaultValue: '-', required: '是' },
{ name: 'rules', remark: '表单校验规则', type: 'object', defaultValue: '-', required: '否' },
{ name: 'inline', remark: '是否平铺显示。默认是垂直排列', type: 'boolean', defaultValue: 'false', required: '否' },
{ name: 'showReset', remark: '是否显示重置按钮', type: 'boolean', defaultValue: 'false', required: '否' },
{ name: 'submit', remark: '提交按钮被点击回调事件', type: '(values) => {}', defaultValue: '-', required: '否' },
{ name: 'cancel', remark: '取消按钮被点击回调事件', type: '() => {}', defaultValue: '-', required: '否' },
{ name: 'reset', remark: '重置按钮被点击回调事件', type: '() => {}', defaultValue: '-', required: '否' }
],
methodData: [
{ name: 'show', remark: '显示对话框', inputArgs: '-', outArgs: '-' },
{ name: 'hidden', remark: '隐藏对话框', inputArgs: '-', outArgs: '-' }
]
}
},
methods: {
showDialogForm() {
this.$refs.formDialog.show()
},
onSubmit(values) {
console.log('onSubmit', values)
}
}
}
</script>
<style lang="scss" scoped>
ul {
padding-left: 20px;
}
.description > li{
font-size: 12px;
}
</style>
cutejava-front/src/views/componentsDemo/advanced/CuteFormDialogProDemo.vue
+101
View File
@@ -0,0 +1,101 @@
<template>
<div>
<h4>何时使用</h4>
<ul class="description">
<li>不离开当前场景完成增删改操作</li>
<li>需要确认用户的操作，明确操作会产生的结果，提醒告知用户</li>
<li>作为配置型功能及信息的容器</li>
<li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
</ul>
<h4>基础用法</h4>
<cute-button type="primary" @click="showDialogForm">显示对话框表单</cute-button>
<cute-form-dialog-pro
ref="formDialogPro"
:model="model"
:schema="schema"
title="表单对话框Pro"
@submit="onSubmit"
/>
<h4>API</h4>
<el-table :data="apiData">
<el-table-column prop="name" label="参数" width="220" />
<el-table-column prop="remark" label="说明" width="450" />
<el-table-column prop="type" label="类型" />
<el-table-column prop="defaultValue" label="默认值" />
<el-table-column prop="required" label="是否必填" />
</el-table>
<h4>Schema属性</h4>
<el-table :data="schemaData">
<el-table-column prop="name" label="属性名" width="220" />
<el-table-column prop="remark" label="说明" width="450" />
<el-table-column prop="type" label="类型" />
<el-table-column prop="required" label="是否必填" />
</el-table>
<h4>方法</h4>
<el-table :data="methodData">
<el-table-column prop="name" label="函数" width="220" />
<el-table-column prop="remark" label="说明" width="450" />
<el-table-column prop="inputArgs" label="入参" />
<el-table-column prop="outArgs" label="出参" />
</el-table>
</div>
</template>
<script>
import CuteFormDialogPro from '@/views/components/advanced/CuteFormDialogPro.vue'
import CuteButton from '@/views/components/dev/CuteButton.vue'
export default {
name: 'CuteFormDialogProDemo',
components: { CuteButton, CuteFormDialogPro },
data() {
return {
model: {},
schema: [
{ name: 'name', title: '姓名', type: 'input', required: true },
{ name: 'sex', title: '性别', type: 'select', required: true, dataSource: [{ label: '男', value: 'nn' }, { label: '女', value: 'mm' }] },
{ name: 'createDate', title: '创建日期', type: 'date', required: false },
{ name: 'createTime', title: '创建时间', type: 'datetime', required: false }
],
apiData: [
{ name: 'title', remark: '弹窗的标题', type: 'string', defaultValue: '默认标题', required: '否' },
{ name: 'width', remark: '弹窗的宽度', type: 'string', defaultValue: '40%', required: '否' },
{ name: 'fullscreen', remark: '是否全屏', type: 'boolean', defaultValue: 'false', required: '否' },
{ name: 'model', remark: '绑定的表单对象', type: 'object', defaultValue: '-', required: '是' },
{ name: 'schema', remark: '表单定义', type: 'object', defaultValue: '-', required: '是' },
{ name: 'showReset', remark: '是否显示重置按钮', type: 'boolean', defaultValue: 'false', required: '否' },
{ name: 'submit', remark: '提交按钮被点击回调事件', type: '(values) => {}', defaultValue: '-', required: '否' },
{ name: 'cancel', remark: '取消按钮被点击回调事件', type: '() => {}', defaultValue: '-', required: '否' },
{ name: 'reset', remark: '重置按钮被点击回调事件', type: '() => {}', defaultValue: '-', required: '否' }
],
schemaData: [
{ name: 'name', remark: '表单项名称', type: 'string', defaultValue: '-', required: '是' },
{ name: 'title', remark: '表单项标题', type: 'string', defaultValue: '-', required: '是' },
{ name: 'type', remark: '表单项类型。input 输入框 | select 单选框 | date 日期选择框 | datetime 日期时间选择框', type: 'string', defaultValue: '-', required: '是' },
{ name: 'required', remark: '是否必填', type: 'boolean', defaultValue: 'false', required: '否' },
{ name: 'dataSource', remark: '数据源，当type=select时必填', type: 'array', defaultValue: '[]', required: '否' }
],
methodData: [
{ name: 'show', remark: '显示对话框', inputArgs: '-', outArgs: '-' },
{ name: 'hidden', remark: '隐藏对话框', inputArgs: '-', outArgs: '-' }
]
}
},
methods: {
showDialogForm() {
this.$refs.formDialogPro.show()
},
onSubmit(values) {
console.log('onSubmit', values)
}
}
}
</script>
<style lang="scss" scoped>
ul {
padding-left: 20px;
}
.description > li{
font-size: 12px;
}
</style>
cutejava-front/src/views/componentsDemo/advanced/CuteFormDrawerDemo.vue
+102
View File
@@ -0,0 +1,102 @@
<template>
<div>
<h4>何时使用</h4>
<ul class="description">
<li>不离开当前场景完成增删改操作</li>
<li>作为配置型功能及信息的容器</li>
<li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
</ul>
<h4>基础用法</h4>
<cute-button type="primary" @click="showDialogForm">显示对话框表单</cute-button>
<cute-form-drawer
ref="formDrawer"
:model="model"
:rules="rules"
title="表单抽屉"
@submit="onSubmit"
>
<el-form-item label="活动名称" prop="name" label-width="100px">
<el-input v-model="model.name" placeholder="请输入" style="width: 100%" />
</el-form-item>
<el-form-item label="活动区域" prop="region" label-width="100px">
<el-select v-model="model.region" placeholder="请选择" style="width: 100%">
<el-option label="区域一" value="shanghai" />
<el-option label="区域二" value="beijing" />
</el-select>
</el-form-item>
</cute-form-drawer>
<h4>API</h4>
<el-table :data="apiData">
<el-table-column prop="name" label="参数" width="220" />
<el-table-column prop="remark" label="说明" width="450" />
<el-table-column prop="type" label="类型" />
<el-table-column prop="defaultValue" label="默认值" />
<el-table-column prop="required" label="是否必填" />
</el-table>
<h4>方法</h4>
<el-table :data="methodData">
<el-table-column prop="name" label="函数" width="220" />
<el-table-column prop="remark" label="说明" width="450" />
<el-table-column prop="inputArgs" label="入参" />
<el-table-column prop="outArgs" label="出参" />
</el-table>
</div>
</template>
<script>
import CuteButton from '@/views/components/dev/CuteButton.vue'
import CuteFormDrawer from '@/views/components/advanced/CuteFormDrawer.vue'
export default {
name: 'CuteFormDrawerDemo',
components: { CuteFormDrawer, CuteButton },
data() {
return {
model: {
name: '',
region: '',
modeList: []
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
]
},
apiData: [
{ name: 'title', remark: '弹窗的标题', type: 'string', defaultValue: '默认标题', required: '否' },
{ name: 'width', remark: '弹窗的宽度', type: 'string', defaultValue: '40%', required: '否' },
{ name: 'model', remark: '绑定的表单对象', type: 'object', defaultValue: '-', required: '是' },
{ name: 'rules', remark: '表单校验规则', type: 'object', defaultValue: '-', required: '否' },
{ name: 'inline', remark: '是否平铺显示。默认是垂直排列', type: 'boolean', defaultValue: 'false', required: '否' },
{ name: 'showReset', remark: '是否显示重置按钮', type: 'boolean', defaultValue: 'false', required: '否' },
{ name: 'submit', remark: '提交按钮被点击回调事件', type: '(values) => {}', defaultValue: '-', required: '否' },
{ name: 'cancel', remark: '取消按钮被点击回调事件', type: '() => {}', defaultValue: '-', required: '否' },
{ name: 'reset', remark: '重置按钮被点击回调事件', type: '() => {}', defaultValue: '-', required: '否' }
],
methodData: [
{ name: 'show', remark: '显示对话框', inputArgs: '-', outArgs: '-' },
{ name: 'hidden', remark: '隐藏对话框', inputArgs: '-', outArgs: '-' }
]
}
},
methods: {
showDialogForm() {
this.$refs.formDrawer.show()
},
onSubmit(values) {
console.log('onSubmit', values)
}
}
}
</script>
<style lang="scss" scoped>
ul {
padding-left: 20px;
}
.description > li{
font-size: 12px;
}
</style>
cutejava-front/src/views/componentsDemo/advanced/CuteSimpleTableDemo.vue
+2 -2
View File
@@ -136,10 +136,10 @@ export default {
methods: {
FormatRowDateTimeStr,
onTableEditClick(row) {
console.log('编辑', row)
console.log('onTableEditClick', row)
},
onTableDeleteClick(row) {
console.log('删除', row)
console.log('onTableDeleteClick', row)
}
}
}