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

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -6,7 +6,7 @@
       span.text-sm.font-semibold.whitespace-nowrap {{settings[section].title}}
       .flex.items-center.gap-x-8
         base-button(
-          v-if="isChange && (this.isData || this.isAddress || this.isAttachments)",
+          v-if="isChange && (this.isData || this.isAddress || this.isAttachments || this.isNotes)",
           @click.stop="changeDoc",
           confirm,
           rounded,
@@ -15,7 +15,7 @@
         )
           .icon-ok.text-xsm(class="pt-[3px]")
         .edit.cursor-pointer(
-          v-if="!isChange && (this.isData || this.isAddress || this.isAttachments)",
+          v-if="!isChange && (this.isData || this.isAddress || this.isAttachments || this.isNotes)",
           @click="changeClientData"
         )
           .icon-edit.text-base.mt-2px
@@ -54,24 +54,15 @@
               v-click-outside="closeAddDocs"
             )
             table-create-package-doc(v-if="isOpenPackage")
-          table-adding-new-additional(
-            v-if="section === 'additional' && isOpenAddingWrap"
-            :new-additional-data="additionalData",
-            :add-new-additional="addDocAdditional",
-            :save-additional="saveDocs"
-          )
     transition(name="section", mode="out-in")
       .flex.justify-center.items-center(
         v-if="sectionDataPresence",
         :style="{height: settings[section].voidHeight + 'px'}",
       )
-        base-loader(
+        base-loader(:width="60", :height="60")
-          :width="60",
-          :height="60"
-        )
       .section-body.flex.flex-col.gap-y-4.px-4(
-        v-else-if="(this.isData || this.isAddress || this.isAttachments) && !isChange",
+        v-else-if="(this.isData || this.isAddress || this.isAttachments || this.isNotes) && !isChange",
-        :class="{'pt-3 pb-4': isData || isAddress || isAttachments}",
+        :class="{'pt-3 pb-4': isData || isAddress || isAttachments || isNotes}",
         :style="{height: settings[section].voidHeight + 'px'}"
       )
         .flex.flex-col.gap-y-4
@@ -86,14 +77,17 @@
               )
             .flex(v-if="item.name && !isChange")
               span.text-sm.w-fit {{item.title}}
-            .flex.items-center(v-if="item.title")
+            .flex.items-center(v-if="item.title && section !== 'additional'")
               .flex.gap-x-2.items-center
                 img(:src="iconDictionary[item?.document?.substr(item.document.lastIndexOf('.') + 1)]")
                 span.text-sm {{item.title}}
               span.text-sm(v-if="item.document") {{`.${item?.document?.substr(item.document.lastIndexOf(".") + 1)}`}}
+            .flex.flex-col(v-if="section === 'additional' && !isChange", class="gap-y-1.5")
+              .title-section.text-xxs.font-semibold {{item.title}}
+              span.text-smm {{item.description}}
       .section-body.flex.flex-col.gap-y-4.px-4(
-        v-else-if="(this.isData || this.isAddress || this.isAttachments) && isChange",
+        v-else-if="(this.isData || this.isAddress || this.isAttachments || this.isNotes) && isChange",
-        :class="{'pt-3 pb-4': isData || isAddress || isAttachments}",
+        :class="{'pt-3 pb-4': isData || isAddress || isAttachments || isNotes}",
       )
         .flex.flex-col.gap-y-4
           .flex.flex-col(v-for="(item, key) in sectionInfo", class="gap-y-1.5")
@@ -102,7 +96,7 @@
             ) {{settings[section].options[key]}}
             span.title-section.font-semibold.text-xs(v-if="item.header") {{item.header}}  
             client-detail-input.text-sm.w-max-fit(
-              v-if="section!=='docs' && isChange && settings[section].options[key] !== 'Дата выдачи'",
+              v-if="section!=='docs' && section!=='additional' && isChange && settings[section].options[key] !== 'Дата выдачи'",
               :style="{fontWeight:key === 'numba'&&600}",
               v-model:value="sectionInfo[key]",
               :rows="section ==='pass' ? 2 : 1",
@@ -110,7 +104,7 @@
               :sharp="settings[section].sharps[key] && section === 'pass' ? settings[section].sharps[key] : ''"
             )
             base-input-date.input.text-sm(
-              v-else-if="isChange && section !== 'docs'",
+              v-else-if="isChange && section !== 'docs' && section !== 'additional'",
               v-model:value="sectionInfo.issued_by_date"
             )
               .copy.icon-copy.cursor-pointer(
@@ -125,7 +119,13 @@
               .text-separation.span.text-sm.separator.px-2 или
             .flex.flex-col.gap-y-4(v-if="section === 'addresses' && isChange")
               client-detail-section-address(:dope-address="dopeAddress")
-            .flex.items-center(v-if="item.title")
+            .flex.flex-col.gap-y-2(v-if="section === 'additional' && isChange")
+              .title-section.text-xxs.font-semibold {{item.title}}
+              client-detail-input.text-sm.w-max-fit(
+                :style="{fontWeight:key === 'numba'&&600}",
+                v-model:value="sectionInfo[key].description"
+              )
+            .flex.items-center(v-if="item.title && section !== 'additional'")
               .icon-cancel.cancel.cursor-pointer.pr-3.text-xsm(
                 v-if="isChange",
                 :id="item.id",
@@ -176,14 +176,17 @@ export default {
   },
   props: {
     saveNewDoc: Function,
+    createNote: Function,
     sectionInfo: Object,
     section: String,
     deleteDoc: Function,
     updateDocument: Function,
     updateAddress: Function,
+    updateNotes: Function,
     lackData: Boolean,
     lackAddress: Boolean,
     lackAttachments: Boolean,
+    lackNotes: Boolean,
     dopeAddress: Object,
     createAddress: Function,
     createDocument: Function,
@@ -205,6 +208,7 @@ export default {
       isData: true,
       isAddress: true,
       isAttachments: true,
+      isNotes: true,
       iconDictionary: {
         doc: wordIcon,
         docx: wordIcon,
@@ -229,7 +233,7 @@ export default {
         : "";
     },
     sectionDataPresence() {
-      if (this.section === "docs") {
+      if (this.section === "docs" || this.section === "additional") {
         return this.sectionInfo[0]?.initialization;
       }
       return Object.keys(this.sectionInfo).length === 0;
@@ -246,6 +250,8 @@ export default {
         this.isAttachments = true;
         this.showModal = true;
         this.isOpenAddDoc = true;
+      } else if (this.section === "additional") {
+        this.isNotes = true;
       }
     },
     changeOpenAddDoc() {
@@ -306,6 +312,12 @@ export default {
           this.createAddress();
         } else this.updateAddress();
       }
+      if (this.section === "additional") {
+        if (!this.sectionInfo[0].id) {
+          this.isNotes = false;
+          this.createAddress();
+        } else this.updateNotes();
+      }
     },
     copyValue(text) {
       navigator.clipboard.writeText(text);
@@ -365,6 +377,12 @@ export default {
         this.isAttachments = newValue;
       },
     },
+    lackNotes: {
+      immediate: true,
+      handler(newValue) {
+        this.isNotes = newValue;
+      },
+    },
     showModal: function () {
       if (this.showModal === false) {
         this.clearDocs();

src/pages/clients/components/ClientDetailInfoWrapper.vue

@@ -26,6 +26,14 @@
         :delete-doc="deleteDoc"
         :lack-attachments="lackAttachments"
       )
+    .flex.flex-col
+      client-detail-info-section(
+        section="additional",
+        :section-info="dataNotes",
+        :lack-notes="lackNotes",
+        :create-note="createNote",
+        :update-notes="updateNotes"
+      )
 </template>
 
 <script>
@@ -34,16 +42,19 @@ export default {
   name: "ClientDetailInfoWrapper",
   components: { ClientDetailInfoSection },
   props: {
-    dataDetail: Object,
     dataAddress: Object,
     dataAttachments: Array,
+    dataNotes: Array,
     saveNewDoc: Function,
+    createNote: Function,
     deleteDoc: Function,
     dataDocument: Object,
     updateDocument: Function,
     updateAddress: Function,
+    updateNotes: Function,
     lackData: Boolean,
     lackAddress: Boolean,
+    lackNotes: Boolean,
     lackAttachments: Boolean,
     dopeAddress: Object,
     createAddress: Function,

src/pages/clients/components/ClientsTableRow.vue

@@ -89,19 +89,22 @@
       client-detail-info-wrapper.detail.px-52px(
         :class="{'pb-[30px] pt-4': isOpenDetailInfo}"
         :data-address="dataAddress",
-        :data-detail="dataDetail",
         :data-attachments="dataAttachments",
         :data-document="dataIdentityDocument",
+        :data-notes="dataNotes"
         :save-new-doc="saveNewDoc",
         :delete-doc="deleteDoc",
         :update-document="postUpdateIdentityDocument",
         :update-address="postUpdateAddress",
+        :update-notes="postUpdateNotes",
         :lack-data="lackData",
         :lack-address="lackAddress",
         :dope-address="dopeAddress",
         :lack-attachments="lackAttachments",
+        :lack-notes="lackNotes"
         :create-address="postCreateAddress",
         :create-document="postCreateIdentityDocument",
+        :create-note="postCreateNote",
         :address-id="addressId",
         :doc-id="docId",
       )
@@ -154,7 +157,11 @@ export default {
           initialization: true,
         },
       ],
-      dataDetail: {},
+      dataNotes: [
+        {
+          initialization: true,
+        },
+      ],
       isOpenDetailInfo: false,
       isOpenPopup: false,
       columnBody: column,
@@ -166,6 +173,7 @@ export default {
       lackData: true,
       lackAddress: true,
       lackAttachments: true,
+      lackNotes: true,
       dopeAddress: {
         city: "",
         region: "",
@@ -388,9 +396,10 @@ export default {
       addNotification(title, title, message, "error", 5000);
     },
     fetchClientDetail(id) {
-      fetchWrapper
+      fetchWrapper.get(`general/person/${id}/detail/`).then((data) => {
-        .get(`general/person/${id}/detail/`)
+        this.saveClientDetail(data);
-        .then((data) => this.saveClientDetail(data));
+        this.saveNote(data);
+      });
       this.fetchAttachment();
     },
     saveClientDetail(data) {
@@ -410,6 +419,10 @@ export default {
       this.dataAttachments = data.filter((e) => e.person_id.id === this.id);
       this.lackAttachments = this.dataAttachments[0]?.id ? true : false;
     },
+    saveNote(data) {
+      this.dataNotes = [...data.note];
+      this.lackNotes = this.dataNotes[0]?.id ? true : false;
+    },
     saveIdentityDocument(data) {
       if (data?.id) {
         this.docId = data.id;
@@ -595,7 +608,25 @@ export default {
             );
         });
     },
+    postCreateNote() {
+      fetchWrapper
+        .post("general/note/create/", {
+          person_id: this.id,
+          title: this.dataNotes[0].title,
+          description: this.dataNotes[0].title,
+        })
+        .then(() => this.fetchClientDetail(this.id));
+    },
+    postUpdateNotes() {
+      fetchWrapper
+        .post(`general/note/${this.dataNotes[0].id}/update/`, {
+          title: this.dataNotes[0].title,
+          description: this.dataNotes[0].description,
+        })
+        .then(() => this.fetchClientDetail(this.id));
+    },
   },
+
   watch: {
     rowOverlay() {
       if (this.rowOverlay) this.startTimer();

src/pages/clients/components/FormCreateMedicalCard.vue

@@ -64,7 +64,7 @@ export default {
 .wrap
   width: 570px
   height: fit-content
-  min-height: 640px
+  min-height: 485px
 
 .services-wrapper
   border: 1px solid var(--btn-grey-color)

src/pages/clients/utils/tableConfig.js

@@ -165,6 +165,9 @@ export const detail = {
   },
   docs: {
     title: "Документы",
+    placeholder: {
+      numba: "Редактировать данные",
+    },
     height: 280,
     width: 360,
     addFile: true,
@@ -175,6 +178,7 @@ export const detail = {
     height: 280,
     width: 360,
     addFile: true,
+    voidHeight: 236,
   },
   docsColor: {
     "application/pdf": "#ff6969",

src/pages/medicalCard/components/MedicalBaseData.vue

@@ -2,7 +2,7 @@
   .base.flex.flex-col.gap-y-6
     .flex.flex-col.gap-y-6
       span.font-bold Основное
-      .flex.flex-col.gap-y-4
+      .flex.flex-col.gap-y-6
         base-input.w-full(placeholder="ФИО*")
         .flex.gap-x-4
           .flex.flex-col.gap-y-2
@@ -11,7 +11,7 @@
           .flex.flex-col.gap-y-2
             .counter.font-semibold.text-smm СНИЛС
             base-input(:width-input="277", placeholder="000–000–000 00")
-        .flex.flex-col.gap-y-4
+        .flex.flex-col.gap-y-6
           .flex.flex-col.gap-y-2
             .counter.font-semibold.text-smm Адрес регистрации
             base-input(:width-input="277", placeholder="Введите полный адрес")
@@ -29,8 +29,9 @@
           .flex.flex-col.gap-y-2
             .counter.font-semibold.text-smm Email
             base-input(:width-input="277", placeholder="user@yandex.ru")
-    base-button(:size="40", @click="changeBaseData")
+    .flex.py-2.justify-between
-      span.font-semibold Далее
+      base-button(:size="40", @click="changeBaseData")
+        span.font-semibold Далее
 </template>
 
 <script>

src/pages/medicalCard/components/MedicalIdentityDocuments.vue

@@ -2,7 +2,7 @@
   .base.flex.flex-col.gap-y-6
     .flex.flex-col.gap-y-6
       span.font-bold Паспортные данные
-      .flex.flex-col.gap-y-4
+      .flex.flex-col.gap-y-6
         .flex.gap-x-4
           .flex.flex-col.gap-y-2
             .counter.font-semibold.text-smm Серия и номер
@@ -10,15 +10,16 @@
           .flex.flex-col.gap-y-2
             .counter.font-semibold.text-smm Дата выдачи
             base-input-date.input-date.h-10(:width-input="277")
-        .flex.flex-col.gap-y-4
+        .flex.flex-col.gap-y-6
           .flex.flex-col.gap-y-2
             .counter.font-semibold.text-smm Кем выдан
             base-input(:width-input="277", placeholder="Точно как в паспорте")
           .flex.flex-col.gap-y-2
             .counter.font-semibold.text-smm Страховая оганизация
             base-input(:width-input="277", placeholder="Введите название организации")
-    base-button(:size="40", @click="changeIdentityDoc")
+    .flex.py-2
-      span.font-semibold Далее
+      base-button(:size="40", @click="changeIdentityDoc")
+        span.font-semibold Далее
 </template>
 
 <script>

src/pages/medicalCard/components/MedicalPolicyDocuments.vue

@@ -3,7 +3,7 @@
     .flex.gap-x-4
       .flex.flex-col.gap-y-6
         span.font-bold Полис
-        .flex.gap-x-4
+        .flex.gap-x-6
           .flex.flex-col.gap-y-2
             .counter.font-semibold.text-smm Серия и номер полиса ОМС
             base-input(:width-input="277", placeholder="0000 000000")
@@ -13,7 +13,7 @@
     .flex.flex-col.gap-y-2
       .counter.font-semibold.text-smm Код категории льготы
       base-input(:width-input="277", placeholder="000")
-    .flex.flex-col.gap-y-4
+    .flex.flex-col.gap-y-6
       .flex.flex-col.gap-y-2
         .counter.font-semibold.text-smm К кому обращаться в случае необходимости 
         base-input.w-full(placeholder="ФИО*")
@@ -23,8 +23,9 @@
           :width-input="277",
           placeholder="+7 (915) 644–92–23"
         )
-    base-button(:size="40")
+    .flex.py-2
-      span.font-semibold Создать медицинскую карту
+      base-button(:size="40")
+        span.font-semibold Создать медицинскую карту
 </template>
 
 <script>