wms-antdvue/.svn/pristine/fa/fa2dbe3ff77b798d980a9dfdde94015b307b2c15.svn-base

<template>
  <div>
    <div class="n-layout-page-header">
      <a-card :bordered="false" title="基础表单">
        表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。表单域标签也可支持响应式。
      </a-card>
    </div>
    <a-card :bordered="false" class="mt-4 proCard">
      <a-form
        ref="formRef"
        :labelCol="{ lg: 7, sm: 7 }"
        :model="formValue"
        :rules="rules"
        class="py-8"
        label-placement="left"
      >
        <a-form-item label="预约姓名" name="name" :wrapperCol="{ lg: 10, sm: 17 }">
          <a-input v-model:value="formValue.name" placeholder="输入姓名" />
        </a-form-item>
        <a-form-item label="预约号码" name="mobile" :wrapperCol="{ lg: 10, sm: 17 }">
          <a-input v-model:value="formValue.mobile" placeholder="电话号码" />
        </a-form-item>
        <a-form-item label="预约时间" name="datetime" :wrapperCol="{ lg: 10, sm: 17 }">
          <a-date-picker v-model:value="formValue.datetime" type="datetime" />
        </a-form-item>
        <a-form-item label="预约医生" name="doctor" :wrapperCol="{ lg: 10, sm: 17 }">
          <a-select
            v-model:value="formValue.doctor"
            :options="doctorList"
            placeholder="请选择预约医生"
          />
        </a-form-item>
        <a-form-item label="预约事项" name="matter" :wrapperCol="{ lg: 10, sm: 17 }">
          <a-select
            v-model:value="formValue.matter"
            :options="matterList"
            multiple
            placeholder="请选择预约事项"
          />
        </a-form-item>
        <a-form-item label="性别" name="sex" :wrapperCol="{ lg: 10, sm: 17 }">
          <a-radio-group v-model:value="formValue.sex" name="sex">
            <a-space>
              <a-radio :value="1">男</a-radio>
              <a-radio :value="2">女</a-radio>
            </a-space>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="预约备注" name="remark" :wrapperCol="{ lg: 10, sm: 17 }">
          <a-input v-model:value="formValue.remark" placeholder="请输入预约备注" type="textarea" />
        </a-form-item>
        <!--        <a-form-item label="图片" name="img">-->
        <!--          <BasicUpload-->
        <!--            v-model:value="uploadList"-->
        <!--            :action="`${uploadUrl}/v1.0/files`"-->
        <!--            :data="{ type: 0 }"-->
        <!--            :headers="uploadHeaders"-->
        <!--            :height="100"-->
        <!--            :width="100"-->
        <!--            helpText="单个文件不超过20MB，最多只能上传10个文件"-->
        <!--            name="files"-->
        <!--            @uploadChange="uploadChange"-->
        <!--          />-->
        <!--        </a-form-item>-->
        <a-form-item :wrapperCol="{ offset: 7 }">
          <a-space>
            <a-button type="primary" @click="formSubmit">提交预约</a-button>
            <a-button @click="resetForm">重置</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref, unref, reactive } from 'vue';
  import { message } from 'ant-design-vue';
  // import { BasicUpload } from '@/components/Upload';
  import { useGlobSetting } from '@/hooks/setting';

  const globSetting = useGlobSetting();

  const matterList = [
    {
      label: '种牙',
      value: 1,
    },
    {
      label: '补牙',
      value: 2,
    },
    {
      label: '根管',
      value: 3,
    },
  ];

  const doctorList = [
    {
      label: '李医生',
      value: 1,
    },
    {
      label: '黄医生',
      value: 2,
    },
    {
      label: '张医生',
      value: 3,
    },
  ];

  const rules = {
    name: {
      required: true,
      message: '请输入预约姓名',
      trigger: 'blur',
    },
    remark: {
      required: true,
      message: '请输入预约备注',
      trigger: 'blur',
    },
    mobile: {
      required: true,
      message: '请输入预约电话号码',
      trigger: ['input'],
    },
    datetime: {
      required: true,
      type: 'number',
      message: '请选择预约时间',
      trigger: ['blur', 'change'],
    },
    doctor: {
      required: true,
      type: 'number',
      message: '请选择预约医生',
      trigger: 'change',
    },
  };

  const formRef: any = ref(null);

  const { uploadUrl } = globSetting;

  const defaultValueRef = () => ({
    name: '',
    mobile: '',
    remark: '',
    sex: 1,
    matter: null,
    doctor: null,
    datetime: undefined,
  });

  let formValue = reactive(defaultValueRef());
  const uploadList = ref([
    'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  ]);
  const uploadHeaders = reactive({
    platform: 'miniPrograms',
    timestamp: new Date().getTime(),
    token: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
  });

  function formSubmit() {
    formRef.value
      .validate()
      .then(() => {
        message.success('验证成功');
      })
      .catch((error) => {
        console.log('error', error);
        message.error('验证失败，请填写完整信息');
      });
  }

  function resetForm() {
    formRef.value.restoreValidation();
    formValue = Object.assign(unref(formValue), defaultValueRef());
  }

  function uploadChange(list: string[]) {
    console.log(list);
  }
</script>