feat(component): 新增CuteFormProDialog组件并重构搜索表单
- 新增CuteFormProDialog表单弹窗组件,支持多种输入类型 - 重命名CuteSearchFormPro为CuteSearchProForm并优化组件结构 - 更新组件演示页面,添加表单对话框Pro功能演示 - 为新组件添加完整的属性定义和事件处理机制 - 优化表单验证规则和数据绑定逻辑 - 添加日期和时间范围选择器支持
This commit is contained in:
@@ -11,8 +11,8 @@
|
||||
<el-button type="primary">查询后置按钮</el-button>
|
||||
</template>
|
||||
</cute-search-form>
|
||||
<cute-section-title title="高级搜索Pro版 CuteSearchFormPro" />
|
||||
<cute-search-form-pro :model="searchFormProValues" :schema="searchFormProSchema" />
|
||||
<cute-section-title title="高级搜索Pro版 CuteSearchProForm" />
|
||||
<cute-search-pro-form :model="searchFormProValues" :schema="searchFormProSchema" />
|
||||
<cute-section-title title="横向滚动 CuteHorizontalScrollBar" />
|
||||
<cute-horizontal-scroll-bar>
|
||||
<div style="width: 3000px;min-width: 3000px">模拟超长内容</div>
|
||||
@@ -75,12 +75,12 @@ import CuteSectionTitle from '@/views/components/dev/CuteSectionTitle.vue'
|
||||
import CuteButton from '@/views/components/dev/CuteButton.vue'
|
||||
import CuteTransfer from '@/views/components/dev/CuteTransfer.vue'
|
||||
import CuteTextAreaInput from '@/views/components/dev/CuteTextAreaInput.vue'
|
||||
import CuteSearchFormPro from '@/views/components/dev/CuteSearchFormPro.vue'
|
||||
import CuteSearchProForm from '@/views/components/dev/CuteSearchProForm.vue'
|
||||
|
||||
export default {
|
||||
name: 'CuteOtherDemo',
|
||||
components: {
|
||||
CuteSearchFormPro,
|
||||
CuteSearchProForm,
|
||||
CuteTextAreaInput,
|
||||
CuteTransfer,
|
||||
CuteButton,
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onDialogClick">演示:表单对话框</el-button>
|
||||
<el-button type="primary" @click="onDialogProClick">演示:表单对话框Pro</el-button>
|
||||
<el-button type="primary" @click="onDrawerClick">演示:表单抽屉</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@@ -103,6 +104,13 @@
|
||||
<cute-edit-table v-model="editTableDataSource" primary-key="id" :schema="editTableSchema" />
|
||||
</el-form-item>
|
||||
</cute-form-drawer>
|
||||
<cute-form-pro-dialog
|
||||
ref="dialogProForm"
|
||||
:model="createFormProModel"
|
||||
:schema="createFormProSchema"
|
||||
title="演示:表单对话框Pro"
|
||||
@submit="onDialogFormSubmit"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -115,10 +123,11 @@ import { FormatRowDateTimeStr } from '@/utils/KitUtil'
|
||||
import CuteButton from '@/views/components/dev/CuteButton.vue'
|
||||
import CuteTransfer from '@/views/components/dev/CuteTransfer.vue'
|
||||
import CuteEditTable from '@/views/components/dev/CuteEditTable.vue'
|
||||
import CuteFormProDialog from '@/views/components/dev/CuteFormProDialog.vue'
|
||||
|
||||
export default {
|
||||
name: 'CuteSimpleTableDemo',
|
||||
components: { CuteEditTable, CuteTransfer, CuteButton, CuteFormDrawer, CuteFormDialog, CuteSimpleTable },
|
||||
components: { CuteFormProDialog, CuteEditTable, CuteTransfer, CuteButton, CuteFormDrawer, CuteFormDialog, CuteSimpleTable },
|
||||
data() {
|
||||
return {
|
||||
modeDataSource: [
|
||||
@@ -190,6 +199,7 @@ export default {
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
// CuteFormDialog
|
||||
createFormModel: {
|
||||
name: '',
|
||||
region: '',
|
||||
@@ -203,7 +213,15 @@ export default {
|
||||
region: [
|
||||
{ required: true, message: '请选择活动区域', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
},
|
||||
// CuteFormProDialog
|
||||
createFormProModel: {},
|
||||
createFormProSchema: [
|
||||
{ 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 }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -234,6 +252,9 @@ export default {
|
||||
onDialogClick() {
|
||||
this.$refs.dialogForm.show()
|
||||
},
|
||||
onDialogProClick() {
|
||||
this.$refs.dialogProForm.show()
|
||||
},
|
||||
onDialogFormSubmit(values) {
|
||||
console.log('onDialogFormSubmit', values)
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user