WIP Подтянула данные в форму мед.карты

src/pages/clients/components/ClientsActionPopup.vue

@@ -29,7 +29,6 @@ export default {
     openChangeData: Function,
     disabledDelete: Boolean,
     createMedicalCard: Function,
-    clientId: String,
   },
   methods: {
     transmitDeleteClient() {

src/pages/clients/components/ClientsTable.vue

@@ -260,20 +260,20 @@ export default {
     openModal() {
       this.showModal = true;
     },
-    async handlerClickPopup(action, id) {
+    async handlerClickPopup(action, clientId, medicalId) {
       this.modalConfig = this.modalConfig.map((el) => {
         return el.name === action
           ? { ...el, view: true }
           : { ...el, view: false };
       });
+      this.clientId = clientId;
       if (action === "delete") {
-        this.clientId = id;
         this.titleModal = "Удалить клиента";
         this.openModal();
       }
       if (action === "medical") {
-        if (id) {
+        if (medicalId) {
-          localStorage.setItem("medicalId", id);
+          localStorage.setItem("medicalId", medicalId);
           this.$router.push("medical-card");
         } else {
           this.titleModal = "Создать мед.карту";
@@ -281,8 +281,8 @@ export default {
         }
       }
     },
-    createMedicalCard(id) {
+    createMedicalCard() {
-      this.selectedClientId = id;
+      this.selectedClientId = this.clientId;
       this.showMedicalCard = true;
       this.closeModal();
     },

src/pages/clients/components/ClientsTableRow.vue

@@ -403,6 +403,7 @@ export default {
       this.$emit(
         "handler-click-popup",
         "medical",
+        this.client.id,
         this.client?.medical_history[0]?.id
       );
     },

src/pages/clients/components/FormCreateMedicalCard.vue

@@ -7,7 +7,10 @@
           :steps="steps",
           :currentStep="currentStep"
         )
-      component(v-bind:is="currentTabComponent")
+      component(
+        v-bind:is="currentTabComponent",
+        :client-detail="clientData",
+      )
     .flex.justify-between
       .flex
         base-button.font-semibold(
@@ -38,6 +41,7 @@ import MedicalBaseData from "@/pages/medicalCard/components/MedicalBaseData";
 import MedicalIdentityDocuments from "@/pages/medicalCard/components/MedicalIdentityDocuments";
 import MedicalPolicyDocuments from "@/pages/medicalCard/components/MedicalPolicyDocuments";
 import BaseStepper from "@/components/base/BaseStepper.vue";
+import { fetchWrapper } from "@/shared/fetchWrapper.js";
 
 export default {
   name: "FormCreateMedicalCard",
@@ -51,6 +55,9 @@ export default {
     MedicalPolicyDocuments,
     BaseStepper,
   },
+  props: {
+    selectedClientId: String,
+  },
   data() {
     return {
       isBaseData: true,
@@ -77,6 +84,8 @@ export default {
           component: "medical-policy-documents",
         },
       ],
+      sourceСlientDetail: {},
+      clientData: {},
     };
   },
   computed: {
@@ -92,6 +101,73 @@ export default {
       this.currentStep -= 1;
     },
     finish() {},
+    fetchClientDetail() {
+      fetchWrapper
+        .get(`/general/person/${this.selectedClientId}/detail/`)
+        .then((detail) => this.saveClientDetail(detail));
+    },
+    saveClientDetail(detail) {
+      this.sourceСlientDetail = detail;
+      this.clientData = {
+        id: detail.id,
+        address: detail.address,
+        benefit_code: detail.benefit_code,
+        birth_date: detail.birth_date ? new Date(detail.birth_date) : null,
+        //contacts: detail.contacts,
+        fullName: `${detail.last_name ?? ""} ${detail.first_name ?? ""} ${
+          detail.patronymic ?? ""
+        }`,
+        gender: detail?.gender,
+        insurance_number: detail.insurance_number,
+        special_mark: detail.special_mark,
+        phone: detail.contacts.find((el) => el.kind === "PHONE")?.username,
+        email: detail.contacts.find((el) => el.kind === "EMAIL")?.username,
+      };
+      this.saveClientIdentityDoc(detail.identity_documents);
+      this.saveCLientPolicy(detail.insurance_policy);
+    },
+    saveCLientPolicy(data) {
+      let OMSPolicy = data.find((el) => el.title === "OMS"),
+        DMSPolicy = data.find((el) => el.title === "DMS");
+      this.clientData.OMSPolicy = {
+        number:
+          OMSPolicy?.series && OMSPolicy?.number
+            ? `${OMSPolicy?.series} ${OMSPolicy?.number}`
+            : "",
+        organization: OMSPolicy?.organization || "",
+        title: "OMS",
+      };
+      if (OMSPolicy?.id) this.clientData.OMSPolicy.id = OMSPolicy?.id;
+      this.clientData.DMSPolicy = {
+        number:
+          DMSPolicy?.series && DMSPolicy?.number
+            ? `${DMSPolicy?.series} ${DMSPolicy?.number}`
+            : "",
+        organization: DMSPolicy?.organization || "",
+        title: "DMS",
+      };
+      if (DMSPolicy?.id) this.clientData.DMSPolicy.id = DMSPolicy?.id;
+    },
+    saveClientIdentityDoc(data) {
+      let identityDoc = data.find((el) => el.kind === "PASSPORT");
+      this.clientData.identity_documents = {
+        kind: "PASSPORT",
+        number:
+          identityDoc?.series && identityDoc?.number
+            ? `${identityDoc?.series} ${identityDoc?.number}`
+            : "",
+        issued_by_org: identityDoc?.issued_by_org || "",
+        issued_by_org_code: identityDoc?.issued_by_org_code || "",
+        issued_by_date: identityDoc?.issued_by_date
+          ? new Date(identityDoc?.issued_by_date)
+          : null,
+      };
+      if (identityDoc?.id)
+        this.clientData.identity_documents.id = identityDoc?.id;
+    },
+  },
+  mounted() {
+    this.fetchClientDetail();
   },
 };
 </script>

src/pages/medicalCard/components/MedicalBaseData.vue

@@ -3,20 +3,27 @@
     .flex.flex-col.gap-y-6
       span.font-bold Основное
       .flex.flex-col.gap-y-6
-        base-input.w-full(placeholder="ФИО*")
+        base-input.w-full(
+          placeholder="ФИО*",
+          v-model="clientDetail.fullName",
+        )
         base-radio-buttons-group(
           :items="gendersList",
           radioButtonsLabel="Пол",
-          v-model="gender",
+          v-model="clientDetail.gender",
         )
         .flex.gap-x-4
           .input
-            base-input-date(label="Дата рождения")
+            base-input-date(
+              label="Дата рождения",
+              v-model="clientDetail.birth_date",
+            )
           .input
             base-input(
               placeholder="000–000–000 00",
               v-mask="'###-###-### ##'",
-              label="СНИЛС"
+              label="СНИЛС",
+              v-model="clientDetail.insurance_number",
             )
         .flex.flex-col.gap-y-6
           base-input(
@@ -32,12 +39,14 @@
             base-input(
               label="Номер телефона",
               placeholder="+7 (915) 644–92–23",
-              v-mask="'+7 (###) ###-##-##'"
+              v-mask="'+7 (###) ###-##-##'",
+              v-model="clientDetail.phone",
             )
           .input
             base-input(
               label="Email",
               placeholder="user@yandex.ru"
+              v-model="clientDetail.email",
             )
 </template>
 
@@ -48,6 +57,7 @@ import BaseSelect from "@/components/base/BaseSelect";
 import BaseButton from "@/components/base/BaseButton";
 import { mask } from "vue-the-mask";
 import BaseRadioButtonsGroup from "@/components/base/BaseRadioButtonsGroup.vue";
+import { medicalDetailConfig } from "@/pages/medicalCard/utils/medicalConfig.js";
 
 export default {
   name: "MedicalBaseData",
@@ -59,22 +69,13 @@ export default {
     BaseRadioButtonsGroup,
   },
   directives: { mask },
-  data() {
+  props: {
-    return {
+    clientDetail: Object,
-      gendersList: [
-        {
-          id: "1",
-          label: "Мужской",
-          value: "male",
   },
-        {
+  computed: {
-          id: "2",
+    gendersList() {
-          label: "Женский",
+      return medicalDetailConfig.gendersList;
-          value: "woman",
     },
-      ],
-      gender: "",
-    };
   },
 };
 </script>

src/pages/medicalCard/components/MedicalIdentityDocuments.vue

@@ -3,18 +3,25 @@
     .flex.flex-col.gap-y-6
       span.font-bold Паспортные данные
       .flex.flex-col.gap-y-6
-        .flex.gap-x-4
+        base-input.input(
-          .input
-            base-input(
           label="Серия и номер",
-              placeholder="0000 000000"
+          placeholder="0000 000000",
+          v-model="clientDetail.identity_documents.number"
         )
-          .input
-            base-input-date(label="Дата выдачи")
-        .flex.flex-col.gap-y-6
         base-input(
           label="Кем выдан",
-            placeholder="Точно как в паспорте"
+          placeholder="Точно как в паспорте",
+          v-model="clientDetail.identity_documents.issued_by_org"
+        )
+        .flex.gap-x-4
+          base-input.input(
+            label="Код подразделения",
+            placeholder="000-000",
+            v-model="clientDetail.identity_documents.issued_by_org_code"
+          )
+          base-input-date.input(
+            label="Дата выдачи",
+            v-model="clientDetail.identity_documents.issued_by_date"
           )
         base-input(
           label="Страховая оганизация",
@@ -35,6 +42,7 @@ export default {
   directives: { mask },
   props: {
     changeIdentityDoc: Function,
+    clientDetail: Object,
   },
 };
 </script>

src/pages/medicalCard/components/MedicalPolicyDocuments.vue

@@ -1,20 +1,33 @@
 <template lang="pug">
   .base.flex.flex-col.gap-y-6
-    .flex.gap-x-4
-      .flex.flex-col.gap-y-6
     span.font-bold Полис
-        .flex.gap-x-6
+    .flex.gap-x-4
-          .input
+      base-input.input(
-            base-input(
         label="Серия и номер полиса ОМС",
-              placeholder="0000 000000"
+        placeholder="000000 0000000000",
+        v-model="clientDetail.OMSPolicy.number",
+        v-mask="'###### ##########'"
       )
-          .input
+      base-input.input(
-            base-input(
+        label="Страховая компания полиса ОМС",
+        v-model="clientDetail.OMSPolicy.organization",
+      )
+    .flex.gap-x-4  
+      base-input.input(
         label="Серия и номер полиса ДМС",
-              placeholder="0000 000000"
+        placeholder="000000 0000000000",
+        v-model="clientDetail.DMSPolicy.number",
+        v-mask="'###### ##########'"
+      )
+      base-input.input(
+        label="Страховая компания полиса ДМС",
+        v-model="clientDetail.DMSPolicy.organization",
+      )
+    base-input(
+      label="Код категории льготы",
+      placeholder="000",
+      v-model="clientDetail.benefit_code",
     )
-    base-input(label="Код категории льготы", placeholder="000")
     base-input(
       label="К кому обращаться в случае необходимости",
       placeholder="ФИО*"
@@ -36,6 +49,9 @@ export default {
   name: "MedicalPolicyDocuments",
   components: { BaseInput, BaseInputDate, BaseSelect, BaseButton },
   directives: { mask },
+  props: {
+    clientDetail: Object,
+  },
 };
 </script>
 

src/pages/medicalCard/utils/medicalConfig.js

@@ -1,4 +1,16 @@
 export const medicalDetailConfig = {
+  gendersList: [
+    {
+      id: "1",
+      label: "Мужской",
+      value: "MALE",
+    },
+    {
+      id: "2",
+      label: "Женский",
+      value: "WOMEN",
+    },
+  ],
   identity_document: {
     height: 366,
     title: "Паспортные данные",

src/pages/schedule/TheSchedule.vue

@@ -1,6 +1,12 @@
 <template lang="pug">
   .wrapper.flex.w-full.relative.mx-2
-    .schedule-wrapper.relative.flex.flex-col.px-6.py-6.h-full.w-full.gap-y-5
+    transition(name="schedule", mode="out-in")
+      .flex.justify-center.items-center.w-full(v-if="schedulesDataPresence")
+          base-loader(
+            :width="60",
+            :height="60"
+          )
+      .relative.flex.flex-col.px-6.py-6.h-full.w-full.gap-y-5(v-else)
         schedule-header(
           :start-month="startMonth",
           :times-shift="timesShift",
@@ -36,13 +42,18 @@ import ScheduleHeader from "@/pages/schedule/components/ScheduleHeader.vue";
 import ScheduleBar from "@/pages/schedule/components/ScheduleBar.vue";
 import ScheduleTable from "@/pages/schedule/components/ScheduleTable.vue";
 import { fetchWrapper } from "@/shared/fetchWrapper.js";
+import BaseLoader from "@/components/Loader/BaseLoader.vue";
 
 export default {
   name: "TheSchedule",
-  components: { ScheduleHeader, ScheduleBar, ScheduleTable },
+  components: { ScheduleHeader, ScheduleBar, ScheduleTable, BaseLoader },
   data() {
     return {
-      employeeList: [],
+      employeeList: [
+        {
+          initialization: true,
+        },
+      ],
       scheduleList: [],
       clearEmployee: [],
       serialized: [],
@@ -87,6 +98,9 @@ export default {
     endMonth() {
       return this.startMonth.clone().endOf("month");
     },
+    schedulesDataPresence() {
+      return this.employeeList[0]?.initialization;
+    },
   },
   methods: {
     changeShowTime() {
@@ -176,7 +190,7 @@ export default {
         active_flg: true,
         start_time: this.times.start_time,
         end_time: this.times.end_time,
-        status: this.buttons.find((e) => e.active).work,
+        status: this.buttons.find((e) => e.active)?.work,
       };
       if (this.insideSchedules?.length > 0) {
         this.postUpdateSchedule();
@@ -221,7 +235,7 @@ export default {
     },
     deleteSchedule() {
       let ids = "";
-      if (this.insideSchedules.length > 0) {
+      if (this.insideSchedules?.length > 0) {
         this.insideSchedules.forEach((e) => (ids += e.id + ","));
         ids = ids.slice(0, -1);
         fetchWrapper
@@ -266,7 +280,20 @@ export default {
   overflow: auto
   border-top-left-radius: 4px
   border-top-right-radius: 4px
-
-.schedule-wrapper
   background-color: var(--default-white)
+
+.schedule-enter-from
+  opacity: 0
+  transform: translateY(0px)
+  pointer-events: none
+.schedule-enter-active
+  transition: 0.3s ease
+.schedule-leave-to
+  opacity: 0
+  transform: translateY(0px)
+  pointer-events: none
+.schedule-leave-active
+  transition: 0.3s ease
+.schedule-move
+  transition: 0.3s ease
 </style>

src/pages/schedule/components/ScheduleTable.vue

@@ -2,13 +2,14 @@
   .schedule.flex-col(:style="themeCell")
     .table-header.flex.w-full.pr-2
       .flex.items-center.justify-center.pl-11(
-        :style="{width: 'calc(25% + 40px)'}"
+        :style="{width: 'calc(25% + 43px)'}"
       )
         .text.font-bold Сотрудник
       .column-wrapper.flex
         .schedule-column.flex.flex-col.items-center.justify-center.w-11(
           v-for="day in result",
           :class="{'column-color': changelColumnColor(day)}",
+          :style="{width: `calc(100% / ${result.length})`}"
         )
           .text.flex.font-bold(
             :style="{opacity: changeOpacity(day)}"
@@ -22,18 +23,19 @@
           .flex.icon-edit
         .name-employee.flex.justify-center.items-center.cursor-pointer
           span {{trimOwnerName(schedule.last_name, schedule.first_name, schedule.patronymic)}}
-        .cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer(
+        .row.flex
+          .cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer.transition(
             v-for="day in result",
             :key="day",
             :id="schedule.id + day",
             @click="choiceCell(day, schedule.id, schedule); clearSelect(selectEmployee)",
             :class="choiceState(day, schedule.id)",
-          :style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : ''}"
+            :style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : '', width: `calc(100% / ${result.length})`}"
           )
             .flex(
               :class="{'cell-work': choiceState(day, schedule.id).status, 'show-time': showTime}"
             ) {{choiceDay(day, schedule.id) ? choiceWorks(day, schedule) : ''}}
-    .schedule-select.flex.w-full.pr-2(v-if="clearEmployee")
+    .schedule-select.flex.w-full(v-if="clearEmployee")
       .edit.flex.items-center.justify-center.h-11.w-11(v-if="selectEmployee.label")
         .flex.icon-edit(v-if="selectEmployee.label")
           //- base-button(
@@ -54,13 +56,15 @@
           :style="{border: 'none', justifyContent: 'center'}"
         )
         .flex.justify-center(v-else) {{selectEmployee.label}}
+      .row.flex
         .cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer(
           v-if="selectEmployee.label",
           v-for="day in result",
           :key="day",
           :id="selectEmployee.id + day",
           @click="choiceCell(day, selectEmployee.id)",
-        :class="choiceState(day, selectEmployee.id)"
+          :class="choiceState(day, selectEmployee.id)",
+          :style="{width: `calc(100% / ${result.length})`}"
         )
 </template>
 
@@ -302,6 +306,8 @@ export default {
 .schedule-wrapper
   overflow-y: scroll
   max-height: 351px
+  &::-webkit-scrollbar-track
+    border-radius: 0
 
 .schedule-body
   &:hover
@@ -315,12 +321,14 @@ export default {
   border-top-right-radius: 2px
 
 .schedule-select
+  border-right: 8px solid var(--bg-ligth-blue-color)
   &:hover
     background-color: var(--border-light-grey-color-1)
 
 .column-wrapper
   overflow: auto
   overflow-x: hidden
+  width: calc(75% - 44px)
 
 .column-color
   background-color: var(--bg-white-color-1)
@@ -332,6 +340,9 @@ export default {
   border-right: 1.5px solid var(--border-light-grey-color-1)
   border-bottom: 1.5px solid var(--border-light-grey-color-1)
 
+.row
+  width: calc(75% - 44px)
+
 .select-name
   width: 25%
   border-right: 1.5px solid var(--border-light-grey-color-1)
@@ -346,6 +357,8 @@ export default {
 .cell
   border-right: 1.5px solid var(--border-light-grey-color-1)
   border-bottom: 1.5px solid var(--border-light-grey-color-1)
+  &:last-child
+    border-right: none
 
 .show-time
   text-align: center