From c192f777d197efd28ec568ae875fed26df7e2078 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Fri, 12 May 2023 18:36:36 +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=D1=84=D0=BE=D1=80=D0=BC=D1=83=20=D0=B4=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=BD=D1=8B=D1=85=20=D0=BE=D0=B1=D1=81=D0=BB=D0=B5=D0=B4=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=B0=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseInput.vue             |   9 +-
 .../Forms/DataForm.vue                        | 311 ++++++++++++++++++
 .../Forms/MedicalFormData.vue                 |  40 ---
 .../Forms/MedicalFormTag.vue                  |   4 +-
 .../MedicalProtocolsInspection.vue            |   9 +-
 .../newMedicalCard/utils/medicalConfig.js     |   6 +
 6 files changed, 330 insertions(+), 49 deletions(-)
 create mode 100644 src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue
 delete mode 100644 src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormData.vue

diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
index 5603dab..efce6e6 100644
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -3,7 +3,7 @@
     q-input(
       v-model="value",
       :name="name",
-      :class="{'circle': circle, 'font-input': true}",
+      :class="{'circle': circle, 'font-input': true, 'doc': doc}",
       :input-style="{ color: textColor, borderColor: borderColor, resize: resize}",
       :borderless="borderless",
       :placeholder="placeholder",
@@ -40,6 +40,7 @@ export default {
   components: { BaseInputContainer },
   props: {
     circle: Boolean,
+    doc: Boolean,
     dense: {
       type: Boolean,
       default: true,
@@ -129,6 +130,12 @@ export default {
   z-index: 5
   opacity: 0
   cursor: pointer
+.doc
+  width: 100%
+  height: 100%
+  z-index: 5
+  opacity: 0
+  cursor: pointer
 </style>
 <style lang="sass">
 .q-field--standout.q-field--readonly .q-field__control:before
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue
new file mode 100644
index 0000000..346f982
--- /dev/null
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue
@@ -0,0 +1,311 @@
+<template lang="pug">
+  medical-form-wrapper(
+    :title="data.title",
+    :is-edit="list?.change",
+    :open-edit="openCard",
+    :cancel="closeCard",
+    :tag="fillInspection || list?.change"
+  )
+    .protocol-body.flex.flex-col
+      .flex.items-center.gap-x-11px(:class="{'open-header': list.change || fillInspection}")
+      .flex.gap-x-4(:style="{height: list.change || fillInspection ? '300px' : ''}")
+        .flex.flex-col.gap-y-1(:class="{'open-textarea': list.change || fillInspection}")
+          .tag-wrap.flex.gap-x-1.gap-y-1(v-if="!fillInspection")
+            .tag.flex.items-center.px-3.cursor-pointer.font-medium.text-smm(
+              v-for="tag in list.tags" :key="tag.id"
+            ) {{tag.label}}
+          base-input.px-3(v-if="list.change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите жалобу...")
+        .filter.flex.flex-col.gap-y-4(v-if="list.change || fillInspection")
+          .flex.gap-x-2
+            base-input(placeholder="Поиск", outlined, :width="232", iconLeft)
+              q-icon(
+                name="app:icon-search",
+                size="20px",
+                style="color: var(--font-grey-color)"
+              )
+            .button
+              q-btn(
+                icon="filter_alt",
+                :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
+                padding="0"
+              )
+            .button
+              q-btn(
+                icon="app:sort-number",
+                :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
+                padding="0"
+              )
+          .field.flex.flex-col.overflow-y-scroll(v-if="list.complaints")
+            .checkbox.flex.flex-col(v-for="complaint in textSorting(list.complaints)")
+              .letter.flex.items-center.font-bold.justify-center {{ complaint.sym }}
+              .line.flex.gap-x-4.h-9.items-center(v-for="name in complaint?.array")
+                q-checkbox(
+                  dense,
+                  v-model="selected",
+                  :val="name?.label",
+                  :style="{border: 'none', width: '16px', height: '16px'}"
+                )
+                .name.flex.items-center.font-medium.text-smm {{ name?.label }}
+    .protocol-data.flex.gap-x-20(v-if="list.change || fillInspection")
+      .flex.flex-col.gap-y-3
+        .title.text-smm.font-semibold Документы
+        .download.flex.relative
+          base-input(
+            @change="addNewDoc",
+            doc,
+            :width="548",
+            type="file",
+            id="upload",
+            borderless
+          )
+          .text.flex.flex-col.items-center.justify-center.absolute.font-medium.text-smm
+            span Загрузите документ
+              label.label.cursor-pointer(for="upload")  с компьютера
+            span  или перетащите его в это поле
+        .photo-field.flex.gap-x-2.items-center(v-if="docData.length", v-for="item in docData")
+          q-avatar(size="24px")
+            img.h-10.w-10.object-cover(
+              :src="iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)]"
+            )
+          .doc-text.font-medium.text-smm {{item.name}}
+      .flex.flex-col.gap-y-3
+        .title.text-smm.font-semibold Сканы
+        .download.flex.relative.cursor-pointer
+          base-input(
+            @change="addNewScan"
+            doc,
+            :width="548",
+            type="file",
+            id="upload",
+            borderless
+          )
+          .text.flex.flex-col.items-center.justify-center.absolute.font-medium.text-smm
+            span Загрузите скан документа
+              label.label(for="upload")  с компьютера
+            span  или перетащите его в это поле
+        .photo-field.flex.gap-x-2.items-center(v-if="scanData.length", v-for="item in scanData")
+          q-avatar(size="24px")
+            img.h-10.w-10.object-cover(
+              :src="iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)]"
+            )
+          .doc-text.font-medium.text-smm {{item.name}}
+</template>
+
+<script>
+import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
+import pdfIcon from "@/assets/icons/pdf.svg";
+import wordIcon from "@/assets/icons/word.svg";
+import exelIcon from "@/assets/icons/exel.svg";
+
+export default {
+  name: "DataForm",
+  components: { MedicalFormWrapper, BaseButton, BaseInput },
+  props: {
+    data: Object,
+    fillInspection: Boolean,
+    inspection: Boolean,
+  },
+  data() {
+    return {
+      list: {
+        title: "Данные обследования",
+        change: false,
+        tags: [
+          { id: 1, label: "Боль при приеме сладкой пищи" },
+          { id: 2, label: "Жжение языка" },
+          { id: 3, label: "Кровоточивость десен" },
+          { id: 4, label: "Лечение у ортодонта не проводилось" },
+          { id: 5, label: "Ранее зубы лечили в ЛПУ" },
+          { id: 6, label: "Удаление зуба" },
+        ],
+        complaints: [
+          { id: 1, label: "Ранее зубы лечили в ЛПУ" },
+          { id: 2, label: "Жжение языка" },
+          { id: 3, label: "Кровоточивость десен" },
+          { id: 4, label: "Лечение у ортодонта не проводилось" },
+          { id: 5, label: "Уныние зуба" },
+          { id: 6, label: "Боль при приеме сладкой пищи" },
+          { id: 7, label: "Удаление зуба" },
+          { id: 2, label: "Жжение языка" },
+        ],
+      },
+      selected: [],
+      abc: [
+        "А",
+        "Б",
+        "В",
+        "Г",
+        "Д",
+        "Е",
+        "Ё",
+        "Ж",
+        "З",
+        "И",
+        "Й",
+        "К",
+        "Л",
+        "М",
+        "Н",
+        "О",
+        "П",
+        "Р",
+        "С",
+        "Т",
+        "У",
+        "Ф",
+        "Х",
+        "Ц",
+        "Ч",
+        "Ш",
+        "Щ",
+        "Ы",
+        "Э",
+        "Ю",
+        "Я",
+      ],
+      docData: [],
+      scanData: [],
+      iconDictionary: {
+        doc: wordIcon,
+        docx: wordIcon,
+        odt: wordIcon,
+        pdf: pdfIcon,
+        xls: exelIcon,
+      },
+    };
+  },
+  methods: {
+    textSorting(arr) {
+      let srt = [];
+      this.abc.forEach((letter) => {
+        arr.forEach((str) => {
+          let finded = srt.find((obj) => obj.sym === letter);
+          if (str.label[0] === letter) {
+            if (!finded) {
+              srt.push({ sym: letter, array: [{ label: str.label }] });
+            } else if (finded.sym === letter)
+              finded.array.push({ label: str.label });
+          }
+        });
+      });
+      return srt;
+    },
+    openCard() {
+      this.list.change = true;
+    },
+    closeCard() {
+      this.list.change = false;
+    },
+    addNewDoc(e) {
+      this.docData = [...this.docData, ...e.target.files];
+    },
+    addNewScan(e) {
+      this.scanData = [...this.scanData, ...e.target.files];
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.protocol-body
+  background: var(--default-white)
+  border-radius: 4px
+
+.icon
+  background: var(--bg-light-grey)
+
+.open-header
+  justify-content: space-between
+
+.open-textarea
+  width: 800px
+  padding: 4px
+  border: 1px solid var(--border-light-grey-color)
+  border-radius: 4px
+
+.tag
+  height: 32px
+  background: var(--bg-light-grey)
+  border-radius: 4px
+  color: var(--font-dark-blue-color)
+
+.tag-wrap
+  flex-wrap: wrap !important
+
+.filter
+  border: 1px solid var(--border-light-grey-color)
+  border-radius: 4px
+  padding: 16px 16px 0
+  width: 360px
+
+.button
+  display: flex
+  align-items: center
+  width: 40px
+  height: 40px
+  justify-content: center
+  cursor: pointer
+  border-radius: 4px
+  background: var(--bg-light-grey)
+
+.field
+  margin-right: -10px
+  &::-webkit-scrollbar-track:vertical
+    margin-bottom: 12px
+  &::-webkit-scrollbar
+    width: 4px
+
+.checkbox
+  width: 328px
+
+.line
+  border-bottom: 1px solid var(--bg-light-grey)
+  min-height: 36px
+
+.letter
+  width: 18px
+  height: 34px
+  color: var(--font-grey-color)
+
+.name
+  width: 268px
+  color: var(--font-dark-blue-color)
+
+.q-checkbox :deep(.q-checkbox__bg)
+  border-radius: 4px
+  border: 1.5px solid var(--font-grey-color)
+
+.q-checkbox :deep(.q-checkbox__inner:before)
+  background: none !important
+
+.download
+  width: 548px
+  height: 62px
+  border: 1px dashed var(--border-light-grey-color)
+  border-radius: 4px
+  cursor: pointer
+
+.text
+  width: 520px
+  height: 60px
+  background: white
+  color: var(--font-grey-color)
+
+.title
+  color: var(--font-grey-color)
+
+.label
+  color: var(--btn-blue-color)
+
+.doc-text
+  color: var(--font-dark-blue-color)
+
+.photo-field
+  height: 32px
+  background: var(--bg-light-grey)
+  border-radius: 4px
+  padding: 4px 8px
+  width: fit-content
+</style>
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormData.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormData.vue
deleted file mode 100644
index f869b1c..0000000
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormData.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template lang="pug">
-  medical-form-wrapper
-</template>
-
-<script>
-import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
-
-export default {
-  name: "MedicalFormData",
-  components: { MedicalFormWrapper },
-  data() {
-    return {
-      list: {
-        title: "Данные обследования",
-        change: false,
-        tags: [
-          { id: 1, label: "Боль при приеме сладкой пищи" },
-          { id: 2, label: "Жжение языка" },
-          { id: 3, label: "Кровоточивость десен" },
-          { id: 4, label: "Лечение у ортодонта не проводилось" },
-          { id: 5, label: "Ранее зубы лечили в ЛПУ" },
-          { id: 6, label: "Удаление зуба" },
-        ],
-        complaints: [
-          { id: 1, label: "Ранее зубы лечили в ЛПУ" },
-          { id: 2, label: "Жжение языка" },
-          { id: 3, label: "Кровоточивость десен" },
-          { id: 4, label: "Лечение у ортодонта не проводилось" },
-          { id: 5, label: "Уныние зуба" },
-          { id: 6, label: "Боль при приеме сладкой пищи" },
-          { id: 7, label: "Удаление зуба" },
-          { id: 2, label: "Жжение языка" },
-        ],
-      },
-    };
-  },
-};
-</script>
-
-<style lang="sass" scoped></style>
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue
index 27c62d5..3a70262 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue
@@ -43,8 +43,7 @@
                   dense,
                   v-model="selected",
                   :val="name?.label",
-                  :style="{border: 'none', width: '16px', height: '16px'}",
-                 
+                  :style="{border: 'none', width: '16px', height: '16px'}"
                 )
                 .name.flex.items-center.font-medium.text-smm {{ name?.label }}
 </template>
@@ -59,7 +58,6 @@ export default {
   components: { BaseButton, BaseInput, MedicalFormWrapper },
   props: {
     list: Array,
-    inspection: Boolean,
     fillInspection: Boolean,
     openCard: Function,
     closeCard: Function,
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsInspection.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsInspection.vue
index 0d8aea9..f1c587e 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsInspection.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsInspection.vue
@@ -17,7 +17,7 @@
             )
           .button
             q-btn(
-              icon="app:basket", 
+              icon="app:basket",
               size="20px",
               :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
               padding="0"
@@ -25,13 +25,12 @@
       medical-form-tag(
         v-if="inspection || fillInspection",
         :list="list",
-        :inspection="inspection",
         :fill-inspection="fillInspection"
         :open-card="openCard",
         :close-card="closeCard"
       )
       div(v-for="form in protocolForms", :key="form.key")  
-        component(v-bind:is="form.component", :data="form")
+        component(v-bind:is="form.component", :data="form" :fill-inspection="fillInspection")
       .protocol.flex.justify-between.p-6(v-if="fillInspection")
         .flex.h-fit.w-fit.gap-2
           base-button.text-base.font-semibold(outlined, :size="40") Отменить
@@ -43,7 +42,7 @@
 
 <script>
 import MedicalFormTag from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue";
-import MedicalFormData from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormData.vue";
+import DataForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
 import IndexForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/IndexForm.vue";
 import { protocolForms } from "@/pages/newMedicalCard/utils/medicalConfig.js";
@@ -52,7 +51,7 @@ export default {
   name: "MedicalProtocolsInspection",
   components: {
     MedicalFormTag,
-    MedicalFormData,
+    DataForm,
     BaseButton,
     IndexForm,
   },
diff --git a/src/pages/newMedicalCard/utils/medicalConfig.js b/src/pages/newMedicalCard/utils/medicalConfig.js
index d5ee9e3..5c9068d 100644
--- a/src/pages/newMedicalCard/utils/medicalConfig.js
+++ b/src/pages/newMedicalCard/utils/medicalConfig.js
@@ -628,4 +628,10 @@ export const protocolForms = [
     },
     rules: [(val) => val <= 10 && val >= 0],
   },
+  {
+    title: "Данные обследования",
+    component: "DataForm",
+    key: "data",
+    state: "data",
+  },
 ];