[WIP] Добавил update страховки, а также возможность замены фото на вкладке страховки

src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue

@@ -1,27 +1,44 @@
 <template lang="pug">
   medical-form-wrapper(
     title="Страховка",
+    :is-loading-data="isLoadingData",
+    :is-check-change="isCheckChange",
     :is-edit="isEdit",
     :open-edit="openEdit",
+    :save="saveChange",
     :cancel="cancelEdit"
   )
     .form-wrap.gap-24.w-full
-      .data-section.flex.flex-col.gap-4(v-for="insurance in insuranceConfig")
+      .flex.flex-col.gap-4(v-for="insurance in insuranceConfig", :key="insurance.insuranceKey")
         .font-semibold.text-sm.whitespace-nowrap {{insurance.insuranceLabel}}
-        .flex.w-full.justify-between.items-center.gap-4(v-for="field in insurance.fields")
+        .flex.w-full.justify-between.items-center.gap-4(
+          v-for="field in insurance.fields",
+          :key="insurance.insuranceKey + field.key"
+        )
           .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
-          .avatar-field.flex.gap-3.items-center.h-10.w-10(v-if="field.type === 'photo'")
+          .avatar-field.flex.gap-3.items-center.h-10.w-10(v-if="field.type === 'avatar'")
-            img.avatar.object-cover(
+            .flex.w-10.h-10
-              v-if="basic[insurance.insuranceKey][field.key]",
+              img.avatar.object-cover(
-              :src="basic[insurance.insuranceKey][field.key]",
+                v-if="basic[insurance.insuranceKey][field.key]?.photo",
-              alt="AV"
+                :src="basic[insurance.insuranceKey][field.key].photo",
-            )
+                alt="AV"
+              )
             .replace-photo.font-medium.text-base.cursor-pointer(
-              v-if="isEdit"
+              v-if="isEdit",
+              @click="changeModal(insurance.insuranceKey)"
             ) {{ basic[insurance.insuranceKey][field.key] ? "Заменить фото" : "Добавить фото"}}
+            base-modal(
+              v-model="showModal",
+              title="Загрузить изображение"
+            )
+              base-upload-photo(
+                :key="insurance.insuranceKey"
+                v-model="basic[photoId][field.key]"
+                :confirm-upload="confirmChangePhoto" 
+              )
           .flex.flex-col.relative(v-else)
             base-input(
-              v-model="basic[insurance.insuranceKey][field?.key]",
+              v-model="basic[insurance.insuranceKey][field.key]",
               @update:model-value="checkChangeInput",
               :disabled="!isEdit",
               :standout="!isEdit",
@@ -45,21 +62,34 @@ import { baseInsuranceForm } from "@/pages/newMedicalCard/utils/medicalConfig";
 import { mapGetters, mapState } from "vuex";
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import BaseAvatar from "@/components/base/BaseAvatar.vue";
+import { fetchWrapper } from "@/shared/fetchWrapper";
 import BaseInput from "@/components/base/BaseInput.vue";
+import BaseModal from "@/components/base/BaseModal.vue";
+import BaseUploadPhoto from "@/components/base/BaseUploadPhoto.vue";
 
 export default {
   name: "InsuranceForm",
-  components: { MedicalFormWrapper, BaseAvatar, BaseInput },
+  components: {
+    MedicalFormWrapper,
+    BaseAvatar,
+    BaseInput,
+    BaseModal,
+    BaseUploadPhoto,
+  },
   data() {
     return {
       insuranceConfig: baseInsuranceForm,
       isCheckChange: false,
       isEdit: false,
+      isLoadingData: false,
+      showModal: false,
+      photoId: "",
     };
   },
   computed: {
     ...mapGetters({
       url: "getUrl",
+      avatar: "getAvatar",
       initDataBasic: "getBasicData",
     }),
     ...mapState({
@@ -67,21 +97,99 @@ export default {
     }),
   },
   methods: {
+    changeModal(id) {
+      this.photoId = id;
+      this.showModal = true;
+    },
     checkChangeInput() {
-      let initData = JSON.stringify(this.initDataBasic);
+      this.isCheckChange =
-      let changeData = JSON.stringify(this.basic);
+        JSON.stringify(this.initDataBasic) !== JSON.stringify(this.basic)
-      if (initData !== changeData) {
+          ? true
-        this.isCheckChange = true;
+          : false;
-      } else {
+    },
-        this.isCheckChange = false;
+    confirmChangePhoto() {
-      }
+      this.showModal = false;
+      this.isCheckChange = true;
+    },
+    updateBasicData() {
+      let insuranceDMS = this.basic.insuranceDMS;
+      let insuranceOMS = this.basic.insuranceOMS;
+      // let benefit = this.basic.benefit;
+
+      const insuranceFormDataDMS = new FormData();
+      const insuranceFormDataOMS = new FormData();
+
+      if (
+        insuranceDMS.photo.file &&
+        insuranceDMS.photo.photo !== this.initDataBasic.insuranceDMS.photo.photo
+      )
+        insuranceFormDataDMS.append("photo", insuranceDMS.photo.file[0]);
+
+      if (insuranceDMS.series)
+        insuranceFormDataDMS.append("series", insuranceDMS.series);
+
+      if (insuranceDMS.number)
+        insuranceFormDataDMS.append("number", insuranceDMS.number);
+
+      if (
+        insuranceOMS.photo.file &&
+        insuranceOMS.photo.photo !== this.initDataBasic.insuranceOMS.photo.photo
+      )
+        insuranceFormDataOMS.append("photo", insuranceOMS.photo.file[0]);
+
+      if (insuranceOMS.series)
+        insuranceFormDataOMS.append("series", insuranceOMS.series);
+
+      if (insuranceOMS.number)
+        insuranceFormDataOMS.append("number", insuranceOMS.number);
+
+      const request = Object.keys(this.basic).map((key) => {
+        if (key === "insuranceDMS") {
+          insuranceFormDataDMS.append(
+            "organization",
+            insuranceDMS.organization
+          );
+          insuranceFormDataDMS.append("title", "DMS");
+          return fetchWrapper.post(
+            `general/insurance_policy/${insuranceDMS.id}/update/`,
+            insuranceFormDataDMS,
+            "formData"
+          );
+        }
+        if (key === "insuranceOMS") {
+          insuranceFormDataOMS.append(
+            "organization",
+            insuranceDMS.organization
+          );
+          insuranceFormDataOMS.append("title", "OMS");
+          return fetchWrapper.post(
+            `general/insurance_policy/${insuranceOMS.id}/update/`,
+            insuranceFormDataOMS,
+            "formData"
+          );
+        }
+      });
+      return request;
     },
     cancelEdit() {
+      this.$store.dispatch("returnInitData");
       this.isEdit = false;
+      this.isCheckChange = false;
     },
     openEdit() {
       this.isEdit = true;
     },
+    saveChange() {
+      this.isLoadingData = true;
+      let updateBasic = this.updateBasicData();
+      Promise.allSettled(updateBasic)
+        .then(() => this.$store.dispatch("getMedicalCardData"))
+        .then(() => {
+          this.isLoadingData = false;
+          this.isEdit = false;
+          this.isCheckChange = false;
+        });
+    },
   },
 };
 </script>

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -216,7 +216,7 @@ export const baseInsuranceForm = [
       {
         key: "photo",
         label: "Фото ДМС",
-        type: "photo",
+        type: "avatar",
       },
     ],
   },
@@ -237,7 +237,7 @@ export const baseInsuranceForm = [
       {
         key: "photo",
         label: "Фото ОМС",
-        type: "photo",
+        type: "avatar",
       },
     ],
   },
@@ -251,11 +251,6 @@ export const baseInsuranceForm = [
         label: "Категория",
         type: "select",
       },
-      {
-        key: "photo",
-        label: "Документы",
-        type: "photo",
-      },
     ],
   },
 ];

src/store/modules/medicalCard.js

@@ -35,11 +35,15 @@ const state = () => ({
       series: null,
       number: null,
       photo: null,
+      id: null,
+      organization: null,
     },
     insuranceOMS: {
       series: null,
       number: null,
       photo: null,
+      id: null,
+      organization: null,
     },
     benefit: {
       name: null,
@@ -116,25 +120,36 @@ const getters = {
           ?.series,
         number: person.insurance_policy.find((e) => e.title === "DMS")?.number,
         photo: person.insurance_policy.find((e) => e.title === "DMS")?.photo
-          ? rootState.getUrl +
+          ? {
-            person.insurance_policy.find((e) => e.title === "DMS")?.photo
+              photo:
-          : null,
+                rootState.getUrl +
+                person.insurance_policy.find((e) => e.title === "DMS")?.photo,
+              file: null,
+            }
+          : {},
+        id: person?.insurance_policy?.find((e) => e.title === "DMS")?.id,
+        organization: person?.insurance_policy?.find((e) => e.title === "DMS")
+          ?.organization,
       },
       insuranceOMS: {
         series: person?.insurance_policy?.find((e) => e.title === "OMS")
           ?.series,
         number: person.insurance_policy.find((e) => e.title === "OMS")?.number,
         photo: person.insurance_policy.find((e) => e.title === "OMS")?.photo
-          ? rootState.getUrl +
+          ? {
-            person.insurance_policy.find((e) => e.title === "OMS")?.photo
+              photo:
-          : null,
+                rootState.getUrl +
+                person.insurance_policy.find((e) => e.title === "OMS")?.photo,
+              file: null,
+            }
+          : {},
+        id: person?.insurance_policy?.find((e) => e.title === "OMS")?.id,
+        organization: person?.insurance_policy?.find((e) => e.title === "OMS")
+          ?.organization,
       },
       benefit: {
         name: person?.benefit?.name,
         discount: person?.benefit?.discount,
-        photo: person?.photo_benefit
-          ? rootState.getUrl + person.photo_benefit
-          : null,
       },
     };
   },