183 lines
4.0 KiB
Plaintext
183 lines
4.0 KiB
Plaintext
<template>
|
|
<basicModal @register="register" ref="modalRef" @ok="okModal">
|
|
<template #default>
|
|
<BasicForm @register="formRegister" @reset="handleReset" class="basicForm">
|
|
<template #statusSlot="{ model, field }">
|
|
<a-input v-model:value="model[field]" placeholder="请输入状态" />
|
|
</template>
|
|
</BasicForm>
|
|
</template>
|
|
</basicModal>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { basicModal, useModal } from '@/components/Modal';
|
|
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
|
|
import { message } from 'ant-design-vue';
|
|
|
|
const schemas: FormSchema[] = [
|
|
{
|
|
name: 'name',
|
|
component: 'Input',
|
|
label: '姓名',
|
|
labelMessage: '这是一个提示',
|
|
componentProps: {
|
|
placeholder: '请输入姓名',
|
|
onInput: (e: any) => {
|
|
console.log(e);
|
|
},
|
|
},
|
|
rules: [{ required: true, message: '请输入姓名', trigger: ['blur'] }],
|
|
},
|
|
{
|
|
name: 'mobile',
|
|
component: 'InputNumber',
|
|
label: '手机',
|
|
componentProps: {
|
|
placeholder: '请输入手机号码',
|
|
showButton: false,
|
|
onInput: (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: '',
|
|
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: '来源',
|
|
giProps: {
|
|
//span: 24,
|
|
},
|
|
componentProps: {
|
|
options: [
|
|
{
|
|
label: '网上',
|
|
value: 1,
|
|
},
|
|
{
|
|
label: '门店',
|
|
value: 2,
|
|
},
|
|
],
|
|
onUpdateValue: (e: any) => {
|
|
console.log(e);
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: 'status',
|
|
label: '状态',
|
|
//插槽
|
|
slot: 'statusSlot',
|
|
},
|
|
];
|
|
|
|
const [formRegister, { submit, getFieldsValue }] = useForm({
|
|
rowProps: { gutter: [16, 0], wrap: true },
|
|
colProps: {
|
|
span: 12,
|
|
},
|
|
labelCol: { span: 6 },
|
|
layout: 'horizontal',
|
|
submitButtonText: '提交预约',
|
|
showActionButtonGroup: false,
|
|
schemas,
|
|
});
|
|
|
|
const [register, { openModal, closeModal, setSubLoading }] = useModal({
|
|
title: '新增预约',
|
|
okText: '提交预约',
|
|
width: 700,
|
|
maskClosable: false,
|
|
});
|
|
|
|
async function okModal() {
|
|
const formRes = await submit();
|
|
if (formRes) {
|
|
closeModal();
|
|
message.success(JSON.stringify(getFieldsValue()));
|
|
} else {
|
|
message.error('验证失败，请填写完整信息');
|
|
setSubLoading(false);
|
|
}
|
|
}
|
|
|
|
function handleReset(values: Recordable) {
|
|
console.log(values);
|
|
}
|
|
|
|
//导出方法
|
|
defineExpose({
|
|
openModal,
|
|
});
|
|
</script>
|