[WIP] Добавил выбор категорий и их отправку на форме контактов, исправил отправку данных, фикс стилей

src/components/base/BaseCategorySelection.vue

@@ -16,7 +16,7 @@
           :style="{alignItems: benefit.name.length > 28 ? 'start' : 'center'}"
         )
           q-checkbox(
-            v-model="selected"
+            v-model="selected",
             :val="benefit",
             :style="{border: 'none', width: '36px'}",
             size="32px"
@@ -24,7 +24,7 @@
           .name.flex.items-center.font-medium.text-xm {{benefit.name}}
       .buttons-group.flex.py-4.px-8.justify-center
         base-button.text-base.font-semibold(outlined, :size="40", @click="closeModalCategories") Отменить
-        base-button.text-base.font-semibold(:size="40") Сохранить
+        base-button.text-base.font-semibold(:size="40", @click="saveCategories(selected[0])") Сохранить
     .right-side.flex.px-14.font-bold.relative
       q-icon(name="app:icon-cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories")
       .flex.py-10.gap-y-6.flex-col(v-if="selected.length > 0 && selected[0]?.name !== 'Без льготы'")
@@ -57,6 +57,7 @@ export default {
     benefitData: Array,
     shiftSelected: Function,
     closeModalCategories: Function,
+    saveCategories: Function,
   },
   data() {
     return {

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

@@ -36,20 +36,24 @@
                 v-model="basic[photoId][field.key]"
                 :confirm-upload="confirmChangePhoto" 
               )
-          .flex.w-full.h-10.relative(v-else-if="field.type === 'select'")
+          .flex.h-10.relative(v-else-if="field.type === 'select'")
-            .flex(@click="showModalCategories = true")
+            .flex(@click="openModalCategories")
               q-field.items-center.cursor-pointer(
                 standout,
                 :disable="!isEdit",
-                :outlined="isEdit"
+                :outlined="isEdit",
-              ) {{basic[insurance.insuranceKey][field.key]}}
+              ) {{selectCategory(basic[insurance.insuranceKey][field.key])}}
             base-modal(
               default-padding,
               hide-header,
               v-model="showModalCategories",
               title="Категории"
             )
-              base-category-selection(:benefit-data="benefitData" :close-modal-categories="closeModalCategories")
+              base-category-selection(
+                :benefit-data="benefitData",
+                :close-modal-categories="closeModalCategories",
+                :save-categories="saveCategories"
+              )
             .flex.font-medium.text-smm.absolute.top-10(
               v-if="basic?.benefit[insurance?.discount]",
               :style="{color: 'var(--font-grey-color)'}"
@@ -67,7 +71,7 @@
               :standout="!isEdit",
               :outlined="isEdit",
               :type="field.type",
-              :width="300",
+              :width="278",
               text-color="black"
             )
 </template>
@@ -81,7 +85,6 @@ 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";
 import BaseCategorySelection from "@/components/base/BaseCategorySelection.vue";
 
 export default {
@@ -120,6 +123,19 @@ export default {
     }),
   },
   methods: {
+    selectCategory(str) {
+      return str && str.length > 30
+        ? str.substr(0, 30) + "..."
+        : !str
+        ? "Выберите категорию"
+        : str;
+    },
+    saveCategories(obj) {
+      this.showModalCategories = false;
+      this.basic.benefit.id = obj.id;
+      this.basic.benefit.name = obj.name;
+      this.isCheckChange = true;
+    },
     changeModal(id) {
       this.photoId = id;
       this.showModal = true;
@@ -127,6 +143,9 @@ export default {
     closeModalCategories() {
       this.showModalCategories = false;
     },
+    openModalCategories() {
+      if (this.isEdit) this.showModalCategories = true;
+    },
     checkChangeInput() {
       this.isCheckChange =
         JSON.stringify(this.initDataBasic) !== JSON.stringify(this.basic)
@@ -141,46 +160,72 @@ export default {
       let insuranceDMS = this.basic.insuranceDMS;
       let insuranceOMS = this.basic.insuranceOMS;
       let personal = this.basic.personalData;
-      // let benefit = this.basic.benefit;
+      let benefit = this.basic.benefit;
 
       const insuranceFormDataDMS = new FormData();
       const insuranceFormDataOMS = new FormData();
+      const benefitFormData = new FormData();
 
+      if (insuranceDMS.series && insuranceDMS.number) {
+        for (let key in insuranceDMS) {
+          if (insuranceDMS[key] && key !== "photo" && key !== "id")
+            insuranceFormDataDMS.append(key, insuranceDMS[key]);
+        }
+      }
       if (
         insuranceDMS.photo.file &&
         insuranceDMS.photo.photo !== this.initDataBasic.insuranceDMS.photo.photo
       )
         insuranceFormDataDMS.append("photo", insuranceDMS.photo.file[0]);
 
-      if (insuranceDMS.series)
+      if (insuranceOMS.series && insuranceOMS.number) {
-        insuranceFormDataDMS.append("series", insuranceDMS.series);
+        for (let key in insuranceOMS) {
-
+          if (insuranceOMS[key] && key !== "photo" && key !== "id")
-      if (insuranceDMS.number)
+            insuranceFormDataOMS.append(key, insuranceOMS[key]);
-        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" &&
-          (this.initDataBasic.insuranceDMS.series ||
+          !insuranceDMS?.id &&
-            this.initDataBasic.insuranceDMS.number) &&
+          insuranceDMS.series &&
-          this.isCheckChange
+          insuranceDMS.number
         ) {
-          insuranceFormDataDMS.append(
+          insuranceFormDataDMS.append("title", "DMS");
-            "organization",
+          insuranceFormDataDMS.append("person", personal.id);
-            insuranceDMS.organization
+          return fetchWrapper.post(
+            `general/insurance_policy/create/`,
+            insuranceFormDataDMS,
+            "formData"
           );
+        }
+        if (
+          key === "insuranceOMS" &&
+          !insuranceOMS?.id &&
+          insuranceOMS.series &&
+          insuranceOMS.number
+        ) {
+          insuranceFormDataOMS.append("title", "OMS");
+          insuranceFormDataOMS.append("person", personal.id);
+          return fetchWrapper.post(
+            `general/insurance_policy/create/`,
+            insuranceFormDataOMS,
+            "formData"
+          );
+        }
+        if (
+          key === "insuranceDMS" &&
+          insuranceDMS.id &&
+          (insuranceDMS.number ||
+            insuranceDMS.series ||
+            insuranceDMS.photo.file)
+        ) {
           insuranceFormDataDMS.append("title", "DMS");
           return fetchWrapper.post(
             `general/insurance_policy/${insuranceDMS.id}/update/`,
@@ -190,14 +235,11 @@ export default {
         }
         if (
           key === "insuranceOMS" &&
-          (this.initDataBasic.insuranceOMS.series ||
+          insuranceOMS.id &&
-            this.initDataBasic.insuranceOMS.number) &&
+          (insuranceOMS.number ||
-          this.isCheckChange
+            insuranceOMS.series ||
+            insuranceOMS.photo.file)
         ) {
-          insuranceFormDataOMS.append(
-            "organization",
-            insuranceOMS.organization
-          );
           insuranceFormDataOMS.append("title", "OMS");
           return fetchWrapper.post(
             `general/insurance_policy/${insuranceOMS.id}/update/`,
@@ -205,47 +247,21 @@ export default {
             "formData"
           );
         }
-        if (
+        if (key === "benefit" && benefit.id) {
-          key === "insuranceDMS" &&
+          fetchWrapper.post(`general/person/${personal.id}/update/`, {
-          !(
+            benefit: benefit.id,
-            this.initDataBasic.insuranceDMS.series ||
+          });
-            this.initDataBasic.insuranceDMS.number
+          if (
-          )
+            benefit.photo.file &&
-        ) {
+            benefit.photo.photo !== this.initDataBasic.benefit.photo.photo
-          delete insuranceDMS.photo;
+          ) {
-          let createInsuranceDMS = {
+            benefitFormData.append("photo_benefit", benefit.photo.file[0]);
-            person: personal.id,
+            return fetchWrapper.post(
-            title: "DMS",
+              `general/person/${personal.id}/update/`,
-            ...insuranceDMS,
+              benefitFormData,
-          };
+              "formData"
-          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;
@@ -284,16 +300,13 @@ export default {
 <style lang="sass" scoped>
 .q-field :deep(.q-field__control)
   min-height: 40px
-  min-width: 302px
+  width: 302px
   align-items: center
   background: rgba(0, 0, 0, 0.05)
   color: var(--font-dark-blue-color)
 
-.select
-  width: 324px
-
 .avatar-field
-  min-width: 324px
+  min-width: 302px
 
 .avatar
   height: 100%

src/pages/newMedicalCard/utils/medicalConfig.js

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

src/store/modules/medicalCard.js

@@ -46,8 +46,8 @@ const state = () => ({
       organization: null,
     },
     benefit: {
+      id: null,
       name: null,
-      discount: null,
       photo: null,
     },
   },
@@ -128,7 +128,13 @@ const getters = {
       },
       benefit: {
         name: person?.benefit?.name,
-        discount: person?.benefit?.discount,
+        id: person?.benefit?.id,
+        photo: person?.photo_benefit
+          ? {
+              photo: rootState.getUrl + person?.photo_benefit,
+              file: null,
+            }
+          : {},
       },
     };
   },