WIP Добавил модалку для создания мед. карты

src/pages/clients/components/ClientTableModal.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .flex.flex-col.mb-1.mt-4
-    span.font-medium.text-base.modal-text Вы действительно хотите удалить клиента?
+    span.font-medium.text-base.modal-text {{ bodyText }}
     .flex.gap-x-3.mt-6.font-semibold
       base-button(
         outlined,
@@ -10,26 +10,22 @@
       base-button(
         outlined-red,
         :size=40,
-        @click="transmitDeleteClient"
-      ) Удалить
+        @click="clickConfirm"
+      ) {{ confirmTitle }}
 </template>
 
 <script>
 import BaseButton from "@/components/base/BaseButton.vue";
 export default {
-  name: "ClientTableDeleteModal",
+  name: "ClientTableModal",
   components: {
     BaseButton,
   },
   props: {
+    confirmTitle: String,
+    bodyText: String,
     closeModal: Function,
-    deletedClientId: String,
-  },
-  methods: {
-    transmitDeleteClient() {
-      this.$emit("delete-client", this.deletedClientId);
-      this.closeModal();
-    },
+    clickConfirm: Function,
   },
 };
 </script>

src/pages/clients/components/ClientsTable.vue

@@ -32,7 +32,7 @@
               :update-data-client="updateDataClient",
               :fetch-data-clients="fetchDataClients",
               :fetch-created-client-data="fetchCreatedClientData",
-              :create-medical-card="createMedicalCard",
+              :create-medical-card="medicalCardHandler",
               :created-client-name="createdClientName",
               @delete-client="deleteClientHandler",
               @recover-client="clearDeletedRowId",
@@ -46,12 +46,15 @@
         )
         base-modal(
           v-model="showModal",
-          title="Удалить клиента"
+          :title="titleModal",
         )
-          client-table-delete-modal(
+          client-table-modal(
+            v-for="modal in modalConfig"
+            v-show="modal.view"
             :close-modal="closeModal",
-            :deleted-client-id="deletedClientId",
-            @delete-client="writeDeletedRowId"
+            :click-confirm="modal.clickConfirm"
+            :confirm-title="modal.titleConfirm"
+            :body-text="modal.bodyText"
           )
 </template>
 
@@ -64,7 +67,7 @@ import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbo
 import BaseClientFormCreate from "@/components/base/BaseClientFormCreate";
 import ClientTablePagination from "./ClientTablePagination.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
-import ClientTableDeleteModal from "./ClientTableDeleteModal.vue";
+import ClientTableModal from "./ClientTableModal.vue";
 import FormCreateMedicalCard from "@/pages/clients/components/FormCreateMedicalCard";
 import BaseLoader from "@/components/Loader/BaseLoader.vue";
 export default {
@@ -77,7 +80,7 @@ export default {
     BaseClientFormCreate,
     ClientTablePagination,
     BaseModal,
-    ClientTableDeleteModal,
+    ClientTableModal,
     FormCreateMedicalCard,
     BaseLoader,
   },
@@ -91,6 +94,23 @@ export default {
 
   data() {
     return {
+      modalConfig: [
+        {
+          name: "delete",
+          bodyText: "Вы действительно хотите удалить клиента?",
+          titleConfirm: "Удалить",
+          clickConfirm: this.writeDeletedRowId,
+          view: false,
+        },
+        {
+          name: "medical",
+          bodyText: "Медицинская карта отсутствует. Создать мед.карту?",
+          titleConfirm: "Создать",
+          clickConfirm: this.createMedicalCard,
+          view: false,
+        },
+      ],
+      titleModal: "",
       selectAll: false,
       marked: [],
       dataClients: [
@@ -108,7 +128,7 @@ export default {
         length: 0,
       },
       showModal: false,
-      deletedClientId: "",
+      clientId: "",
       deletedRowId: "",
       clearingTextSearch: false,
       showMedicalCard: false,
@@ -233,21 +253,38 @@ export default {
     openModal() {
       this.showModal = true;
     },
-    createMedicalCard() {
-      this.showMedicalCard = true;
-    },
-    deleteClientHandler(id) {
-      this.deletedClientId = id;
+    medicalCardHandler() {
+      this.modalConfig = this.modalConfig.map((el) => {
+        return el.name === "medical"
+          ? { ...el, view: true }
+          : { ...el, view: false };
+      });
+      this.titleModal = "Создать мед.карту";
       this.openModal();
     },
-    writeDeletedRowId(id) {
-      this.deletedRowId = id;
+    createMedicalCard() {
+      this.showMedicalCard = true;
+      this.closeModal();
+    },
+    deleteClientHandler(id) {
+      this.clientId = id;
+      this.modalConfig = this.modalConfig.map((el) => {
+        return el.name === "delete"
+          ? { ...el, view: true }
+          : { ...el, view: false };
+      });
+      this.titleModal = "Удалить клиента";
+      this.openModal();
+    },
+    writeDeletedRowId() {
+      this.deletedRowId = this.clientId;
+      this.closeModal();
     },
     clearDeletedRowId() {
       this.deletedRowId = "";
     },
     clearDeletedClientId() {
-      this.deletedClientId = "";
+      this.clientId = "";
     },
     changeClearingTextSearch() {
       this.clearingTextSearch = false;