add create medical card

src/pages/medcards/components/MedicalCardSearchHeader.vue

@@ -10,9 +10,11 @@
       )
         template(#iconLeft)
           q-icon.search-icon(name="app:search", size="20px")
-    base-button(width="216px", @click="openCreateMedcardPage")
+    base-button(width="216px", @click="showCreateModal = true")
       q-icon.plus.mr-2(name="app:plus", size="24px")
       span Создать медкарту
+    base-modal(v-model="showCreateModal", title="Создать медицинскую карту", modal-padding)
+      patient-creation-form(@close="handleClosePatientForm")
 </template>
 
 <script>
@@ -21,19 +23,37 @@ import BaseSelect from "@/components/base/BaseSelect.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
 
 import debounce from "lodash/debounce";
+import BaseModal from "@/components/base/BaseModal.vue";
+import PatientCreationForm from "@/components/PatientCreationForm.vue";
+import { mapActions } from "vuex";
 export default {
   name: "MedicalCardSearchHeader",
-  components: { BaseInput, BaseSelect, BaseButton },
+  components: {
+    PatientCreationForm,
+    BaseModal,
+    BaseInput,
+    BaseSelect,
+    BaseButton,
+  },
   emits: ["search"],
   data() {
     return {
       filterString: "",
+      showCreateModal: false,
     };
   },
   methods: {
-    openCreateMedcardPage() {
-      alert("Создать медкарту с ФИО: " + this.filterString);
+    handleClosePatientForm(val) {
+      this.showCreateModal = false;
+      if (!val) return;
+      this.getMedicalCardData({
+        personId: val.id,
+        successCallback: (id) => this.$router.push("medical-card/" + id),
+      });
     },
+    ...mapActions({
+      getMedicalCardData: "getMedicalCardDataByPersonId",
+    }),
   },
   watch: {
     filterString: debounce(function (value) {