Обновление 1.0

resources/js/Pages/Home/ArchiveHistoryCreateModal/Index.vue

@@ -15,7 +15,40 @@ const archiveInfo = ref({
     num: null,
     post_in: null,
 })
+const archiveInfoRules = {
+    id: [
+        {
+            required: true,
+            validator(rule, value) {
+                console.log(value)
+                if (!value) {
+                    return new Error('Это поле необходимо заполнить')
+                }
+                else if (!Number(value)) {
+                    return new Error('Ошибка при получении ID')
+                }
+                return true
+            },
+            trigger: ['input', 'blur']
+        }
+    ],
+    num: [
+        {
+            required: true,
+            message: 'Это поле необходимо заполнить',
+            trigger: 'blur'
+        }
+    ],
+    post_in: [
+        {
+            required: true,
+            message: 'Это поле необходимо заполнить',
+            trigger: 'blur'
+        }
+    ]
+}
 const loadingFilterPatients = ref(false)
+const formRef = ref(null)
 
 const emits = defineEmits(['historyUpdated', 'closeWithoutSave'])
 
@@ -30,6 +63,7 @@ const onResetData = () => {
 const onCloseWithoutSave = () => {
     emits('closeWithoutSave')
     open.value = false
+    onResetData()
 }
 
 const filteredPatients = ref([])
@@ -49,51 +83,79 @@ const handleSearchCard = (query) => {
     debounceSearchCard(query)
 }
 
-const onSubmit = async () => {
-    loading.value = true
-    try {
-        await axios.post(`/api/archive/create`, archiveInfo.value).then(res => {
-            open.value = false
-        })
+const onSubmit = async (e) => {
+    e.preventDefault()
+    formRef.value?.validate(async (errors) => {
+        if (!errors) {
+            loading.value = true
+            try {
+                await axios.post(`/api/archive/create`, archiveInfo.value).then(res => {
+                    open.value = false
+                })
 
-    } catch (error) {
-        errorApi(error)
-        console.error(error)
-    } finally {
-        loading.value = false
-    }
+            } catch (error) {
+                errorApi(error)
+                console.error(error)
+            } finally {
+                loading.value = false
+            }
+        }
+        else {
+            console.log(errors)
+            errorApi(null, 'Проверьте заполненность формы')
+        }
+    })
 }
 </script>
 
 <template>
-    <NModal v-model:show="open" preset="card" class="max-w-xl relative overflow-clip" closable @close="onCloseWithoutSave">
-        <template #header>
-            Добавить карту в архив
-        </template>
+    <NModal v-model:show="open"
+            preset="card"
+            class="max-w-xl relative"
+            :mask-closable="false"
+            closable
+            title="Добавить карту в архив"
+            @close="onCloseWithoutSave">
         <NFlex class="w-full" :wrap="false">
-            <NForm class="w-full">
-                <NFormItem label="Пациент">
-                    <NSelect placeholder="№ карты фамилия имя отчество или фамилия имя отчество" size="large" :remote filterable :loading="loadingFilterPatients" :options="filteredPatients" v-model:value="archiveInfo.id" @search="handleSearchCard" />
+            <NForm ref="formRef" id="formAddToArchive" class="w-full" :model="archiveInfo" :rules="archiveInfoRules">
+                <NFormItem label="Карта пациента" path="id">
+                    <NSelect placeholder="№ карты фамилия имя отчество ИЛИ фамилия имя отчество"
+                             size="large"
+                             :remote
+                             filterable
+                             :loading="loadingFilterPatients"
+                             :options="filteredPatients"
+                             v-model:value="archiveInfo.id"
+                             @search="handleSearchCard"
+                    />
                 </NFormItem>
-                <NFormItem size="large" label="№ в архиве">
+                <NFormItem size="large" label="Дата поступления карты в архив" path="post_in">
+                    <NDatePicker class="w-full"
+                                 v-model:value="archiveInfo.post_in"
+                                 format="dd.MM.yyyy"
+                    />
+                </NFormItem>
+                <NFormItem size="large" label="№ в архиве" path="num">
                     <NInput v-model:value="archiveInfo.num" />
                 </NFormItem>
-                <NFormItem size="large" label="Дата поступления карты в архив">
-                    <NDatePicker class="w-full" v-model:value="archiveInfo.post_in" format="dd.MM.yyyy" />
-                </NFormItem>
             </NForm>
         </NFlex>
         <template #action>
             <NFlex justify="end" align="center">
                 <NSpace align="center" :size="0">
-                    <NButton secondary type="primary" @click="onSubmit">
+                    <NButton secondary
+                             type="primary"
+                             attr-type="submit"
+                             form="formAddToArchive"
+                             @click="onSubmit">
                         Добавить карту
                     </NButton>
                 </NSpace>
             </NFlex>
         </template>
 
-        <div v-show="loading" class="absolute inset-0 z-10 backdrop-blur flex items-center justify-center">
+        <div v-show="loading"
+             class="absolute inset-0 z-10 backdrop-blur flex items-center justify-center rounded-[8px]">
             <NSpin :show="true" />
         </div>
     </NModal>