From cfc24483155224c3b9a4acbec32ab68a92da105c Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Tue, 13 Dec 2022 18:35:29 +0300
Subject: [PATCH] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=BF=D1=80=D0=B8=D0=BC=D0=B5=D1=80=D0=BD=D1=83=D1=8E?=
 =?UTF-8?q?=20=D1=84=D0=BE=D1=80=D0=BC=D1=83=20=D0=BC=D0=B5=D0=B4=20=D0=BA?=
 =?UTF-8?q?=D0=B0=D1=80=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ClientDetailInfoSection.vue    |   2 +-
 .../clients/components/ClientsActionPopup.vue |   6 +-
 src/pages/clients/components/ClientsTable.vue |   9 ++
 .../clients/components/ClientsTableRow.vue    |   6 +-
 .../components/FormCreateMedicalCard.vue      | 139 ++++++++++++++++++
 src/pages/clients/utils/tableConfig.js        |   4 +-
 src/pages/medicalCard/TheMedicalCard.vue      |  13 ++
 .../components/MedicalBaseData.vue            |  40 +++++
 .../components/MedicalCardWrapper.vue         |  17 +++
 9 files changed, 230 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/clients/components/FormCreateMedicalCard.vue
 create mode 100644 src/pages/medicalCard/TheMedicalCard.vue
 create mode 100644 src/pages/medicalCard/components/MedicalBaseData.vue
 create mode 100644 src/pages/medicalCard/components/MedicalCardWrapper.vue

diff --git a/src/pages/clients/components/ClientDetailInfoSection.vue b/src/pages/clients/components/ClientDetailInfoSection.vue
index 1cd3985..533c4fe 100644
--- a/src/pages/clients/components/ClientDetailInfoSection.vue
+++ b/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(
diff --git a/src/pages/clients/components/ClientsActionPopup.vue b/src/pages/clients/components/ClientsActionPopup.vue
index ce26080..78d6b90 100644
--- a/src/pages/clients/components/ClientsActionPopup.vue
+++ b/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)
diff --git a/src/pages/clients/components/ClientsTable.vue b/src/pages/clients/components/ClientsTable.vue
index bccdda6..7d74d52 100644
--- a/src/pages/clients/components/ClientsTable.vue
+++ b/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();
diff --git a/src/pages/clients/components/ClientsTableRow.vue b/src/pages/clients/components/ClientsTableRow.vue
index a6f82be..6914523 100644
--- a/src/pages/clients/components/ClientsTableRow.vue
+++ b/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() {
diff --git a/src/pages/clients/components/FormCreateMedicalCard.vue b/src/pages/clients/components/FormCreateMedicalCard.vue
new file mode 100644
index 0000000..3796c1e
--- /dev/null
+++ b/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>
diff --git a/src/pages/clients/utils/tableConfig.js b/src/pages/clients/utils/tableConfig.js
index 79346ab..a6ceebf 100644
--- a/src/pages/clients/utils/tableConfig.js
+++ b/src/pages/clients/utils/tableConfig.js
@@ -159,9 +159,7 @@ export const detail = {
       join_adress: "Полный адрес",
     },
     sharps: { join_adress: "" },
-    placeholder: {
-      join_adress: "Введите адрес целиком",
-    },
+    placeholder: "Введите адрес целиком",
     width: 292,
     voidHeight: 86,
   },
diff --git a/src/pages/medicalCard/TheMedicalCard.vue b/src/pages/medicalCard/TheMedicalCard.vue
new file mode 100644
index 0000000..20d6cb4
--- /dev/null
+++ b/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>
diff --git a/src/pages/medicalCard/components/MedicalBaseData.vue b/src/pages/medicalCard/components/MedicalBaseData.vue
new file mode 100644
index 0000000..d6315f2
--- /dev/null
+++ b/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>
diff --git a/src/pages/medicalCard/components/MedicalCardWrapper.vue b/src/pages/medicalCard/components/MedicalCardWrapper.vue
new file mode 100644
index 0000000..4edbbf2
--- /dev/null
+++ b/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>