[WIP] Добавил возможность создания страховки

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

@@ -17,9 +17,8 @@
         )
           .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 === 'avatar'")
-            .flex.w-10.h-10
+            .flex.w-10.h-10(v-if="basic[insurance.insuranceKey][field.key]?.photo")
               img.avatar.object-cover(
-                v-if="basic[insurance.insuranceKey][field.key]?.photo",
                 :src="basic[insurance.insuranceKey][field.key].photo",
                 alt="AV"
               )
@@ -28,6 +27,7 @@
               @click="changeModal(insurance.insuranceKey)"
             ) {{ basic[insurance.insuranceKey][field.key] ? "Заменить фото" : "Добавить фото"}}
             base-modal(
+              v-if="insurance.insuranceKey === photoId"
               v-model="showModal",
               title="Загрузить изображение"
             )
@@ -36,6 +36,37 @@
                 v-model="basic[photoId][field.key]"
                 :confirm-upload="confirmChangePhoto" 
               )
+          .flex.w-full.h-10.relative(v-else-if="field.type === 'select'")
+            q-field.items-center.cursor-pointer(
+              standout,
+              :disable="!isEdit",
+              :outlined="isEdit"
+            )
+              span(@click="openModalCategories") {{basic[insurance.insuranceKey][field.key]}}
+            base-modal(
+              v-model="showModalCategories",
+              title="Категории"
+            )
+              .flex
+                .flex.flex-col.gap-y-4
+                  base-input(outlined, :width="300")
+                  .flex.items-center(v-for="benefit in benefitData", :key="benefit.id")
+                    q-checkbox(
+                      v-model="selected"
+                      :val="benefit.id",
+                      :style="{border: 'none', sidth: '36px'}",
+                      size="32px"
+                    )
+                    .flex {{benefit.name}}
+                .flex
+            .flex.font-medium.text-smm.absolute.top-10(
+              v-if="basic?.benefit[insurance?.discount]",
+              :style="{color: 'var(--font-grey-color)'}"
+            )
+              span Процент скидки: 
+              span(
+                :style="{color: 'var(--font-dark-blue-color)'}"
+              ) {{"\xa0" + basic?.benefit[insurance?.discount] + "%"}}
           .flex.flex-col.relative(v-else)
             base-input(
               v-model="basic[insurance.insuranceKey][field.key]",
@@ -47,25 +78,18 @@
               :width="300",
               text-color="black"
             )
-            .flex.font-medium.text-smm.absolute.top-10(
-              v-if="basic?.benefit[insurance?.discount]",
-              :style="{color: 'var(--font-grey-color)'}"
-            )
-              span Процент скидки: 
-              span(
-                :style="{color: 'var(--font-dark-blue-color)'}"
-              ) {{"\xa0" + basic?.benefit[insurance?.discount] + "%"}}
 </template>
 
 <script>
 import { baseInsuranceForm } from "@/pages/newMedicalCard/utils/medicalConfig";
-import { mapGetters, mapState } from "vuex";
+import { mapActions, 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";
+import { getRequestChangeData } from "@/shared/utils/wrapperRequestChangeData";
 
 export default {
   name: "InsuranceForm",
@@ -83,7 +107,9 @@ export default {
       isEdit: false,
       isLoadingData: false,
       showModal: false,
+      showModalCategories: false,
       photoId: "",
+      selected: [],
     };
   },
   computed: {
@@ -94,6 +120,10 @@ export default {
     }),
     ...mapState({
       basic: (state) => state.medical.basicData,
+      benefitData: (state) => state.medical.benefitData,
+    }),
+    ...mapActions({
+      fetchBenefitData: "getBenefitData",
     }),
   },
   methods: {
@@ -101,6 +131,9 @@ export default {
       this.photoId = id;
       this.showModal = true;
     },
+    openModalCategories() {
+      this.showModalCategories = true;
+    },
     checkChangeInput() {
       this.isCheckChange =
         JSON.stringify(this.initDataBasic) !== JSON.stringify(this.basic)
@@ -114,6 +147,7 @@ export default {
     updateBasicData() {
       let insuranceDMS = this.basic.insuranceDMS;
       let insuranceOMS = this.basic.insuranceOMS;
+      let personal = this.basic.personalData;
       // let benefit = this.basic.benefit;
 
       const insuranceFormDataDMS = new FormData();
@@ -144,7 +178,12 @@ export default {
         insuranceFormDataOMS.append("number", insuranceOMS.number);
 
       const request = Object.keys(this.basic).map((key) => {
-        if (key === "insuranceDMS") {
+        if (
+          key === "insuranceDMS" &&
+          (this.initDataBasic.insuranceDMS.series ||
+            this.initDataBasic.insuranceDMS.number) &&
+          this.isCheckChange
+        ) {
           insuranceFormDataDMS.append(
             "organization",
             insuranceDMS.organization
@@ -156,10 +195,15 @@ export default {
             "formData"
           );
         }
-        if (key === "insuranceOMS") {
+        if (
+          key === "insuranceOMS" &&
+          (this.initDataBasic.insuranceOMS.series ||
+            this.initDataBasic.insuranceOMS.number) &&
+          this.isCheckChange
+        ) {
           insuranceFormDataOMS.append(
             "organization",
-            insuranceDMS.organization
+            insuranceOMS.organization
           );
           insuranceFormDataOMS.append("title", "OMS");
           return fetchWrapper.post(
@@ -168,6 +212,48 @@ export default {
             "formData"
           );
         }
+        if (
+          key === "insuranceDMS" &&
+          !(
+            this.initDataBasic.insuranceDMS.series ||
+            this.initDataBasic.insuranceDMS.number
+          )
+        ) {
+          delete insuranceDMS.photo;
+          let createInsuranceDMS = {
+            person: personal.id,
+            title: "DMS",
+            ...insuranceDMS,
+          };
+          return getRequestChangeData(
+            createInsuranceDMS,
+            insuranceDMS,
+            {},
+            "insurance_policy",
+            insuranceDMS.id
+          );
+        }
+        if (
+          key === "insuranceOMS" &&
+          !(
+            this.initDataBasic.insuranceOMS.series ||
+            this.initDataBasic.insuranceOMS.number
+          )
+        ) {
+          delete insuranceOMS.photo;
+          let createInsuranceOMS = {
+            person: personal.id,
+            title: "OMS",
+            ...insuranceOMS,
+          };
+          return getRequestChangeData(
+            createInsuranceOMS,
+            insuranceOMS,
+            {},
+            "insurance_policy",
+            insuranceOMS.id
+          );
+        }
       });
       return request;
     },
@@ -191,10 +277,29 @@ export default {
         });
     },
   },
+  watch: {
+    showModalCategories: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) this.fetchBenefitData;
+      },
+    },
+  },
 };
 </script>
 
 <style lang="sass" scoped>
+.q-field :deep(.q-field__control)
+  min-height: 40px
+  min-width: 302px
+  align-items: center
+  background: rgba(0, 0, 0, 0.05)
+  color: var(--font-dark-blue-color)
+
+.q-checkbox :deep(.q-checkbox__bg)
+  border-radius: 50%
+  border: 1.5px solid var(--font-grey-color)
+
 .select
   width: 324px
 

src/store/modules/medicalCard.js

@@ -53,6 +53,7 @@ const state = () => ({
   },
   documents: {},
   avatar: "",
+  benefitData: [],
 });
 
 const getters = {
@@ -154,6 +155,11 @@ const getters = {
 };
 
 const actions = {
+  getBenefitData({ commit }) {
+    fetchWrapper.get("general/benefit/").then((res) => {
+      commit("setBenefitData", res.results);
+    });
+  },
   getMedicalCardData({ commit }) {
     fetchWrapper
       .get(
@@ -223,6 +229,9 @@ const actions = {
 };
 
 const mutations = {
+  setBenefitData(state, data) {
+    state.benefitData = data;
+  },
   setMedicalCard(state, card) {
     state.medicalCard = card;
   },