[WIP] Добавил примерную форму мед карты

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -106,7 +106,7 @@
               :style="{fontWeight:key === 'numba'&&600}",
               v-model:value="sectionInfo[key]",
               :rows="section ==='pass' ? 2 : 1",
-              :placeholder="settings[section].placeholder[key]"
+              :placeholder="settings[section].placeholder[key] || settings[section].placeholder"
               :sharp="settings[section].sharps[key] && section === 'pass' ? settings[section].sharps[key] : ''"
             )
             base-input-date.input.text-sm(

src/pages/clients/components/ClientsActionPopup.vue

@@ -8,6 +8,9 @@
       .button.keep-redaction.flex.gap-x-3
         .icon-star-off.icon
         span На ведение
+      .button.keep-redaction.flex.gap-x-3(@click="createMedicalCard")
+        .icon-star-off.icon
+        span Мед. карта
       .button.delete.flex.gap-x-3(
         @click="transmitDeleteClient",
         :style="{'opacity': disabledDelete && '0.7'}"
@@ -25,6 +28,7 @@ export default {
   props: {
     openChangeData: Function,
     disabledDelete: Boolean,
+    createMedicalCard: Function,
   },
   methods: {
     transmitDeleteClient() {
@@ -47,7 +51,7 @@ export default {
 <style lang="sass" scoped>
 .popup-wrapper
   width: 180px
-  height: 128px
+  height: 164px
   border-radius: 4px 0 4px 4px
   background-color: var(--default-white)
   box-shadow: var(--default-shadow)

src/pages/clients/components/ClientsTable.vue

@@ -8,6 +8,8 @@
       @search="filterDataClients",
     )
     .flex.flex-col.h-full.table-container.w-full.mt-8.mb-3
+      base-modal(v-model="showMedicalCard")
+        form-create-medical-card
       clients-table-header(:check="selectedCheck" :is-check="selectAll")
       .flex.flex-col
         clients-table-row(
@@ -21,6 +23,7 @@
           :deleted-client-id="deletedRowId",
           :update-data-client="updateDataClient",
           :fetch-data-clients="fetchDataClients",
+          :create-medical-card="createMedicalCard",
           @delete-client="deleteClientHandler",
           @recover-client="clearDeletedRowId",
         )
@@ -52,6 +55,7 @@ import BaseClientFormCreate from "@/components/base/BaseClientFormCreate";
 import ClientTablePagination from "./ClientTablePagination.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import ClientTableDeleteModal from "./ClientTableDeleteModal.vue";
+import FormCreateMedicalCard from "@/pages/clients/components/FormCreateMedicalCard";
 export default {
   name: "ClientsTable",
   components: {
@@ -63,6 +67,7 @@ export default {
     ClientTablePagination,
     BaseModal,
     ClientTableDeleteModal,
+    FormCreateMedicalCard,
   },
   props: {
     openForm: Function,
@@ -89,6 +94,7 @@ export default {
       deletedClientId: "",
       deletedRowId: "",
       clearingTextSearch: false,
+      showMedicalCard: false,
     };
   },
   methods: {
@@ -184,6 +190,9 @@ export default {
     openModal() {
       this.showModal = true;
     },
+    createMedicalCard() {
+      this.showMedicalCard = true;
+    },
     deleteClientHandler(id) {
       this.deletedClientId = id;
       this.openModal();

src/pages/clients/components/ClientsTableRow.vue

@@ -22,7 +22,8 @@
               v-if="isOpenPopup",
               :open-change-data="openChangeData",
               :disabled-delete="!!deletedClientId && !rowOverlay",
-              @delete-client="transmitDeleteClient"
+              @delete-client="transmitDeleteClient",
+              :create-medical-card="createMedicalCard"
             )
         .dots.flex.justify-center.items-center(v-if="!rowOverlay")
           .flex.z-10(v-if="isOpenChange", class="pl-[10px]")
@@ -119,6 +120,7 @@ import ClientsActionPopup from "@/pages/clients/components/ClientsActionPopup";
 import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
 import ClientDetailInfoWrapper from "@/pages/clients/components/ClientDetailInfoWrapper";
 import BaseButton from "@/components/base/BaseButton";
+import BaseModal from "@/components/base/BaseModal";
 import { fetchWrapper } from "@/shared/fetchWrapper";
 import { column } from "@/pages/clients/utils/tableConfig";
 import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
@@ -129,6 +131,7 @@ export default {
   name: "ClientsTableRow",
   components: {
     BaseButton,
+    BaseModal,
     ClientsTableCheckbox,
     ClientsActionPopup,
     TableCellBodyName,
@@ -184,6 +187,7 @@ export default {
     updateDataClient: Function,
     url: String,
     fetchDataClients: Function,
+    createMedicalCard: Function,
   },
   computed: {
     rowOverlay() {

src/pages/clients/components/FormCreateMedicalCard.vue

@@ -0,0 +1,139 @@
+<template lang="pug">
+  .wrap.flex.flex-col.gap-y-6
+    .flex.flex.flex-col.gap-y-9
+      span.text-center.font-bold.text-xl Создание медицинской карты стоматологического пациента
+      .flex.justify-center.items-center.gap-x-2
+        base-button.button(:size="32", :rounded="true")
+          span(v-if="!isServices") 1
+          .icon-ok.text-xs(v-else)
+        span(:style="{color: 'var(--btn-blue-color)'}") Основное
+        .line.flex.mx-2
+        base-button.button(:class="{'active-button': !isServices}", :size="32", :rounded="true") 2
+        span(:style="{color: isServices ? 'var(--btn-blue-color)' : 'var(--font-dark-blue-color)' }") Услуги
+    medical-base-data(v-if="!isServices")
+    .services.flex.flex-col.gap-y-6(v-else)
+      .flex.flex-col.gap-y-6
+        .flex.flex-col.gap-y-2
+          .font-bold Услуги
+          .counter.text-smm Выберите подходищие из списка
+        .services-wrapper.flex.flex-col.pt-4.px-4
+          .flex.gap-x-2
+            base-input(
+              :with-icon="true",
+              icon-position="left",
+              :width-input="310",
+              placeholder="Поиск"
+            )
+              .counter.icon-search
+            base-select.h-10(placeholder="Вид услуги")
+          .flex.items-center.px-11px.py-9px(
+            :style="{borderBottom: '1px solid var(--btn-grey-color)'}"
+          )
+            .flex.items-center.gap-x-3
+              input.counter.w-4.h-4.checkbox.cursor-pointer(
+                type="checkbox",
+                @click="selectAll",
+                v-model="isAllServices"
+              )
+              .counter.flex.p-2(:style="{width: '358px'}") Название услуги
+            .counter Вид услуги
+          .list-services.flex.flex-col.px-11px.py-9px
+            .flex.items-center(v-for="service in services", :key="service.id")
+              .flex.items-center.gap-x-3
+                input.w-4.h-4.checkbox.cursor-pointer(
+                  type="checkbox",
+                  v-model="userIds",
+                  :value="service.id"
+                )
+                .flex.p-2(:style="{width: '358px'}") {{service.name}}
+              .counter {{service.type}}
+  base-button.custom-button(
+    v-if="!isServices",
+    :size="40",
+    @click="changeServices"
+  )
+    span.font-semibold Далее
+  base-button.custom-button(:size="40", v-else)
+    span.font-semibold Создать медицинскую карту
+</template>
+
+<script>
+import BaseInput from "@/components/base/BaseInput";
+import BaseButton from "@/components/base/BaseButton";
+import BaseInputDate from "@/components/base/BaseInputDate";
+import BaseSelect from "@/components/base/BaseSelect";
+import MedicalBaseData from "@/pages/medicalCard/components/MedicalBaseData";
+export default {
+  name: "FormCreateMedicalCard",
+  components: {
+    BaseInput,
+    BaseButton,
+    BaseInputDate,
+    BaseSelect,
+    MedicalBaseData,
+  },
+  data() {
+    return {
+      isServices: false,
+      isAllServices: false,
+      userIds: [],
+    };
+  },
+  methods: {
+    changeServices() {
+      this.isServices = !this.isServices;
+    },
+    selectAll() {
+      this.userIds = [];
+      if (!this.isAllServices) {
+        this.services.forEach((el) => this.userIds.push(el.id));
+      }
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrap
+  width: 570px
+  height: fit-content
+  min-height: 640px
+
+.services-wrapper
+  border: 1px solid var(--btn-grey-color)
+  border-radius: 8px
+
+.list-services
+  overflow-y: auto
+  max-height: 280px
+
+.input-date
+  border: 1.5px solid var(--border-light-grey-color)
+  border-radius: 4px
+
+.button
+  &:hover
+    background-color: var(--btn-blue-color)
+    border: none
+
+.active-button
+  background: var(--btn-grey-color)
+  color: var(--font-dark-blue-color)
+  border-color: var(--btn-grey-color)
+  &:hover
+    background-color: var(--btn-grey-color)
+    border: none
+
+.line
+  width: 78px
+  border: 1.5px solid var(--btn-grey-color)
+
+.place
+  width: 100%
+  border: 2px dashed var(--font-grey-color)
+  border-radius: 4px
+  color: var(--font-grey-color)
+
+.counter
+  color: var(--font-grey-color)
+</style>

src/pages/clients/utils/tableConfig.js

@@ -159,9 +159,7 @@ export const detail = {
       join_adress: "Полный адрес",
     },
     sharps: { join_adress: "" },
-    placeholder: {
+    placeholder: "Введите адрес целиком",
-      join_adress: "Введите адрес целиком",
-    },
     width: 292,
     voidHeight: 86,
   },

src/pages/medicalCard/TheMedicalCard.vue

@@ -0,0 +1,13 @@
+<template lang="pug">
+  medical-card-wrapper
+</template>
+
+<script>
+import MedicalCardWrapper from "@/pages/medicalCard/components/MedicalCardWrapper";
+export default {
+  name: "TheMedicalCard",
+  components: { MedicalCardWrapper },
+};
+</script>
+
+<style lang="sass" scoped></style>

src/pages/medicalCard/components/MedicalBaseData.vue

@@ -0,0 +1,40 @@
+<template lang="pug">
+  .base.flex.flex-col.gap-y-6
+    .flex.flex-col.gap-y-6
+      span.font-bold Основное
+      .flex.flex-col.gap-y-4
+        base-input.w-full(placeholder="ФИО*")
+        .flex.gap-x-4
+          .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-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-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="Введите полный адрес")
+</template>
+
+<script>
+import BaseInput from "@/components/base/BaseInput";
+import BaseInputDate from "@/components/base/BaseInputDate";
+import BaseSelect from "@/components/base/BaseSelect";
+export default {
+  name: "MedicalBaseData",
+  components: { BaseInput, BaseInputDate, BaseSelect },
+};
+</script>
+
+<style lang="sass" scoped>
+.input-date
+  border: 1.5px solid var(--border-light-grey-color)
+  border-radius: 4px
+
+.counter
+  color: var(--font-grey-color)
+</style>

src/pages/medicalCard/components/MedicalCardWrapper.vue

@@ -0,0 +1,17 @@
+<template lang="pug">
+  .wrapper.flex.w-full.relative.mx-2
+    .wrapper-medical.relative.flex.flex-col.px-6.py-6.h-full.w-full
+</template>
+
+<script>
+export default { name: "MedicalCardWrapper" };
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+  overflow: auto
+  border-top-left-radius: 4px
+.wrapper-medical
+  background-color: var(--default-white)
+  height: calc(100vh - 64px)
+</style>