173 lines
3.8 KiB
Plaintext
173 lines
3.8 KiB
Plaintext
<template>
|
|
<div>
|
|
<div class="n-layout-page-header">
|
|
<a-card :bordered="false" title="基础表单"> useForm 表单，用于向用户收集表单信息 </a-card>
|
|
</div>
|
|
<a-card :bordered="false" class="mt-4 proCard">
|
|
<div class="BasicForm">
|
|
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
|
|
<template #statusSlot="{ model, field }">
|
|
<a-input v-model:value="model[field]" placeholder="请输入" />
|
|
</template>
|
|
</BasicForm>
|
|
</div>
|
|
</a-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { BasicForm, useForm, FormSchema } from '@/components/Form/index';
|
|
import { message } from 'ant-design-vue';
|
|
|
|
const schemas: FormSchema[] = [
|
|
{
|
|
name: 'name',
|
|
component: 'Input',
|
|
label: '姓名',
|
|
labelMessage: '这是一个提示',
|
|
componentProps: {
|
|
placeholder: '请输入姓名',
|
|
onChange: (e: any) => {
|
|
console.log(e);
|
|
},
|
|
},
|
|
rules: [{ required: true, message: '请输入姓名', trigger: ['blur'] }],
|
|
},
|
|
{
|
|
name: 'mobile',
|
|
component: 'InputNumber',
|
|
label: '手机',
|
|
componentProps: {
|
|
placeholder: '请输入手机号码',
|
|
showButton: false,
|
|
onChange: (e: any) => {
|
|
console.log(e);
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: 'type',
|
|
component: 'Select',
|
|
label: '类型',
|
|
componentProps: {
|
|
placeholder: '请选择类型',
|
|
options: [
|
|
{
|
|
label: '舒适性',
|
|
value: 1,
|
|
},
|
|
{
|
|
label: '经济性',
|
|
value: 2,
|
|
},
|
|
],
|
|
onUpdateValue: (e: any) => {
|
|
console.log(e);
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: 'makeDate',
|
|
component: 'DatePicker',
|
|
label: '预约时间',
|
|
//defaultValue: 1183135260000,
|
|
componentProps: {
|
|
type: 'date',
|
|
onUpdateValue: (e: any) => {
|
|
console.log(e);
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: 'makeTime',
|
|
component: 'TimePicker',
|
|
label: '停留时间',
|
|
componentProps: {
|
|
clearable: true,
|
|
onUpdateValue: (e: any) => {
|
|
console.log(e);
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: 'makeProject',
|
|
component: 'Checkbox',
|
|
label: '预约项目',
|
|
componentProps: {
|
|
placeholder: '请选择预约项目',
|
|
options: [
|
|
{
|
|
label: '种牙',
|
|
value: 1,
|
|
},
|
|
{
|
|
label: '补牙',
|
|
value: 2,
|
|
},
|
|
{
|
|
label: '根管',
|
|
value: 3,
|
|
},
|
|
],
|
|
onUpdateValue: (e: any) => {
|
|
console.log(e);
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: 'makeSource',
|
|
component: 'RadioGroup',
|
|
label: '来源',
|
|
componentProps: {
|
|
options: [
|
|
{
|
|
label: '网上',
|
|
value: 1,
|
|
},
|
|
{
|
|
label: '门店',
|
|
value: 2,
|
|
},
|
|
],
|
|
onUpdateValue: (e: any) => {
|
|
console.log(e);
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: 'status',
|
|
label: '状态',
|
|
//插槽
|
|
slot: 'statusSlot',
|
|
},
|
|
];
|
|
|
|
const [register, {}] = useForm({
|
|
rowProps: { gutter: [16, 0] },
|
|
labelCol: { span: 4 },
|
|
colProps: { span: 24 },
|
|
actInheritLabelCol: true,
|
|
submitButtonText: '提交预约',
|
|
isFull: true,
|
|
schemas,
|
|
});
|
|
|
|
function handleSubmit(values: Recordable) {
|
|
console.log(values);
|
|
message.success(JSON.stringify(values));
|
|
}
|
|
|
|
function handleReset(values: Recordable) {
|
|
console.log(values);
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.BasicForm {
|
|
width: 550px;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
padding-top: 20px;
|
|
}
|
|
</style>
|