diff --git a/cutejava-front/src/views/components/dev/CuteFormProDialog.vue b/cutejava-front/src/views/components/dev/CuteFormProDialog.vue new file mode 100644 index 00000000..11e132ca --- /dev/null +++ b/cutejava-front/src/views/components/dev/CuteFormProDialog.vue @@ -0,0 +1,262 @@ + + + + + + diff --git a/cutejava-front/src/views/components/dev/CuteSearchFormPro.vue b/cutejava-front/src/views/components/dev/CuteSearchProForm.vue similarity index 86% rename from cutejava-front/src/views/components/dev/CuteSearchFormPro.vue rename to cutejava-front/src/views/components/dev/CuteSearchProForm.vue index ceb79e77..621c8bfc 100644 --- a/cutejava-front/src/views/components/dev/CuteSearchFormPro.vue +++ b/cutejava-front/src/views/components/dev/CuteSearchProForm.vue @@ -14,7 +14,6 @@ :disabled="disabled" size="small" > - export default { - name: 'CuteSearchFormPro', + name: 'CuteSearchProForm', components: {}, props: { + /** + * 表单定义 + */ schema: { type: Array, required: true, @@ -91,10 +93,16 @@ export default { return [] } }, + /** + * 绑定值 + */ model: { type: Object, required: true }, + /** + * 是否禁用 + */ disabled: { type: Boolean, required: false, @@ -103,7 +111,6 @@ export default { }, data() { return { - // formRules: {}, pickerOptions: { shortcuts: [{ text: '最近一周', @@ -133,22 +140,6 @@ export default { } } }, - // mounted() { - // const schema = this.schema - // const formRules = this.formRules - // let trigger = 'blur' - // for (const element of schema) { - // if (element.type === 'input') { - // trigger = 'blur' - // } else { - // trigger = 'change' - // } - // formRules[element.name] = [ - // { required: element.required === true, message: '请输入' + element.title, trigger: trigger } - // ] - // } - // this.formRules = formRules - // }, methods: { onFormSubmit(formName) { const that = this diff --git a/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue b/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue index ae28b4a0..f422a1af 100644 --- a/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue +++ b/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue @@ -11,8 +11,8 @@ 查询后置按钮 - - + +
模拟超长内容
@@ -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, diff --git a/cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue b/cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue index 7b18fb49..f207f0de 100644 --- a/cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue +++ b/cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue @@ -20,6 +20,7 @@
演示:表单对话框 + 演示:表单对话框Pro 演示:表单抽屉 @@ -103,6 +104,13 @@ + @@ -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) },