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

2023-04-19 17:18:22 +03:00
parent 3c210a781a
commit f66c6420b0
4 changed files with 109 additions and 84 deletions
--- a/src/components/base/BaseCategorySelection.vue
+++ b/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 {
--- a/src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue
+++ b/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(@click="showModalCategories = true")
+          .flex.h-10.relative(v-else-if="field.type === 'select'")
+            .flex(@click="openModalCategories")
              q-field.items-center.cursor-pointer(
                standout,
                :disable="!isEdit",
-                :outlined="isEdit"
-              ) {{basic[insurance.insuranceKey][field.key]}}
+                :outlined="isEdit",
+              ) {{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)
-        insuranceFormDataDMS.append("series", insuranceDMS.series);
-
-      if (insuranceDMS.number)
-        insuranceFormDataDMS.append("number", insuranceDMS.number);
-
+      if (insuranceOMS.series && insuranceOMS.number) {
+        for (let key in insuranceOMS) {
+          if (insuranceOMS[key] && key !== "photo" && key !== "id")
+            insuranceFormDataOMS.append(key, insuranceOMS[key]);
+        }
+      }
      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 ||
-            this.initDataBasic.insuranceDMS.number) &&
-          this.isCheckChange
+          !insuranceDMS?.id &&
+          insuranceDMS.series &&
+          insuranceDMS.number
        ) {
-          insuranceFormDataDMS.append(
-            "organization",
-            insuranceDMS.organization
+          insuranceFormDataDMS.append("title", "DMS");
+          insuranceFormDataDMS.append("person", personal.id);
+          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 ||
-            this.initDataBasic.insuranceOMS.number) &&
-          this.isCheckChange
+          insuranceOMS.id &&
+          (insuranceOMS.number ||
+            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 (key === "benefit" && benefit.id) {
+          fetchWrapper.post(`general/person/${personal.id}/update/`, {
+            benefit: benefit.id,
+          });
          if (
-          key === "insuranceDMS" &&
-          !(
-            this.initDataBasic.insuranceDMS.series ||
-            this.initDataBasic.insuranceDMS.number
-          )
+            benefit.photo.file &&
+            benefit.photo.photo !== this.initDataBasic.benefit.photo.photo
          ) {
-          delete insuranceDMS.photo;
-          let createInsuranceDMS = {
-            person: personal.id,
-            title: "DMS",
-            ...insuranceDMS,
-          };
-          return getRequestChangeData(
-            createInsuranceDMS,
-            insuranceDMS,
-            {},
-            "insurance_policy",
-            insuranceDMS.id
+            benefitFormData.append("photo_benefit", benefit.photo.file[0]);
+            return fetchWrapper.post(
+              `general/person/${personal.id}/update/`,
+              benefitFormData,
+              "formData"
            );
          }
-        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%
--- a/src/pages/newMedicalCard/utils/medicalConfig.js
+++ b/src/pages/newMedicalCard/utils/medicalConfig.js
@@ -294,6 +294,11 @@ export const baseInsuranceForm = [
        label: "Категория",
        type: "select",
      },
+      {
+        key: "photo",
+        label: "Документы",
+        type: "avatar",
+      },
    ],
  },
 ];
--- a/src/store/modules/medicalCard.js
+++ b/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,
+            }
+          : {},
      },
    };
  },