Merge branch 'ASTRA-121' into 'master'

[WIP] Добавил форму отображения Клинического диагноза, отсортировал формы в соответствии с дизайном

See merge request andrusyakka/urban-couscous!441

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ClinicalForm.vue

@@ -0,0 +1,147 @@
+<template lang="pug">
+  medical-form-wrapper(
+      :title="data.title",
+      :is-edit="change",
+      :open-edit="openCard",
+      :cancel="closeCard",
+      :tag="fillInspection || change"
+    )
+      .protocol-body.flex.flex-col
+        .flex.gap-x-4(:style="{height: change || fillInspection ? '300px' : ''}")
+          .flex.flex-col.gap-y-1(:class="{'edit-form': change || fillInspection}")
+            .tag-wrap.flex.gap-x-1.gap-y-1(v-if="!fillInspection && selected")
+              .tag.flex.items-center.px-3.text-smm(
+                v-if="selected",
+                v-for="item in selected",
+                :key="item.id"
+                :class="{'pointer': change || fillInspection}"
+              ) {{item.label + " - " + item.text}}
+          .filter.flex.flex-col.gap-y-4.relative(v-if="change || fillInspection")
+            .flex.gap-x-2
+              base-input(placeholder="Поиск", outlined, :width="452", 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.gap-y-1(v-if="data.results.diseases")
+              .letter.flex.items-center.font-bold.text-base Некоторые инфекционные и паразитарные болезни
+              .checkbox.flex.gap-x-2.items-center(v-for="disease in data.results.diseases")
+                q-checkbox(
+                  dense,
+                  v-model="selected",
+                  :val="disease",
+                  :style="{border: 'none', width: '16px', height: '16px'}"
+                )
+                .name.font-semibold.text-smm {{ disease.label }}
+                .name.font-medium.text-smm {{ disease.text }}
+</template>
+
+<script>
+import BaseButton from "@/components/base/BaseButton.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
+import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+
+export default {
+  name: "ClinicalForm",
+  components: { BaseButton, BaseInput, MedicalFormWrapper },
+  props: { data: Object, fillInspection: Boolean },
+  data() {
+    return {
+      change: false,
+      selected: [{ id: 0, label: "В00.09", text: "Простой герпес" }],
+    };
+  },
+  methods: {
+    openCard() {
+      this.change = true;
+    },
+    closeCard() {
+      this.change = false;
+    },
+  },
+};
+</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
+
+.edit-form
+  width: 580px
+  padding: 4px
+  border: 1px solid var(--border-light-grey-color)
+  border-radius: 4px
+
+.tag
+  height: 32px
+  background: var(--bg-light-grey)
+  border-radius: 4px
+
+.tag-wrap
+  flex-wrap: wrap !important
+
+.filter
+  border: 1px solid var(--border-light-grey-color)
+  border-radius: 4px
+  padding: 16px 16px 0
+  width: 580px
+
+.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
+  border-bottom: 1px solid var(--bg-light-grey)
+  min-height: 36px
+
+.letter
+  color: var(--font-grey-color)
+  height: 34px
+
+.name
+  width: fit-content
+  color: var(--font-dark-blue-color)
+
+.pointer
+  cursor: pointer
+
+.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
+</style>

src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsInspection.vue

@@ -43,12 +43,14 @@ import IndexForm from "@/pages/newMedicalCard/components/InitialInspectionProtoc
 import MainFactorsForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MainFactorsForm.vue";
 import ToothFormulaForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue";
 import { protocolForms } from "@/pages/newMedicalCard/utils/medicalConfig.js";
+import ClinicalForm from "./Forms/ClinicalForm.vue";
 export default {
   name: "MedicalProtocolsInspection",
   components: {
     MedicalFormTag,
     DataForm,
     DiseaseForm,
+    ClinicalForm,
     BaseButton,
     IndexForm,
     MainFactorsForm,

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -670,172 +670,6 @@ export const protocolForms = [
       ],
     },
   },
-  {
-    title: "Прикус",
-    component: "IndexForm",
-    key: "bite",
-    state: "bite",
-    content: {
-      reference: `Прикус считается неправильным при аномалиях в расположении 
-        зубов и нарушениях окклюзии, в результате которых нарушаются функции 
-        зубочелюстной системы. Все виды нарушения прикуса в большей или меньшей 
-        степени приводят к разрушению и потере зубов, нарушениям ВНЧС 
-        (височно-нижнечелюстного сустава), а также асимметрии лица.`,
-      whitespace: false,
-      list: [
-        {
-          label: "Ортогнатический прикус",
-          readOnlyLabel: "Нормальный – Ортогнатический",
-          value: "ortognatic bite",
-          reference: `Ортогнатический пркус – при смыкании зубы верхней челюсти 
-            контактируют с одноименными нижними. Идеальным считается расположение 
-            зубов, при котором верхние резцы перекрывают нижние на 1/3`,
-        },
-        {
-          label: "Дистальный прикус",
-          readOnlyLabel: "Дистальный",
-          value: "distal bite",
-          reference: `Дистальный прикус – верхняя челюсть выдается вперед. Верхние резцы
-            могут быть наклонены вперед, к губам, или назад, внутрь ротовой полости.
-            Часто между передними зубами верхней и нижней челюстей отсутствует
-            контакт, образуется сагиттальная щель и дизокклюзия (отсутствие смыкания).
-            Такой вид прикуса зубов визуально проявляется в скошенном профиле и верхней
-            губе, нависающей над нижней; может формироваться «второй подбородок».`,
-        },
-        {
-          label: "Мезиальный прикус",
-          readOnlyLabel: "Мезиальный",
-          value: "mesial bite",
-          reference: `Мезиальный прикус – нижняя челюсть выдается вперед. Здесь 
-            так же может наблюдаться сагиттальная щель и отсутствовать окклюзия, 
-            а может быть лишь незначительное перекрытие верхних зубов нижними. 
-            Внешними признаками мезиального прикуса являются выдвинутая нижняя 
-            челюсть и массивный подбородок; нижняя губа, как правило, увеличена.`,
-        },
-        {
-          label: "Глубокий прикус",
-          readOnlyLabel: "Глубокий",
-          value: "deep bite",
-          reference: `Глубокий прикус – нижние резцы скрыты верхними на 50% 
-            или больше. В зависимости от стадии, при глубоком виде прикуса у 
-            взрослых может полностью отсутствовать окклюзия и развиваться воспаление 
-            тканей верхнего неба из-за травмирования нижними зубами. При глубоком прикусе 
-            распространена так называемая десневая улыбка, нижняя треть лица выглядит 
-            негармонично маленькой, а подбородок скошенным.`,
-        },
-        {
-          label: "Открытый прикус",
-          readOnlyLabel: "Открытый",
-          value: "open bite",
-          reference: `Открытый прикус – при смыкании челюстей контакта между 
-            верхними и нижними зубами нет. Такой вид прикуса вызывает значительные 
-            нарушения жевательных и речевых функций; лицевые мышцы обычно 
-            перенапряжены, а нижняя часть лица удлинена.`,
-        },
-        {
-          label: "Перекрестный прикус",
-          readOnlyLabel: "Перекрестный",
-          value: "cross bite",
-          reference: `Перекрестный прикус – асимметрия челюстей по вертикали; 
-            при смыкании наблюдается пересечение зубных рядов. Развивается при 
-            недоразвитии одной из челюстей и приводит к заметной асимметрии лица.`,
-        },
-      ],
-    },
-  },
-  {
-    title: "Индекс гигиены",
-    component: "IndexForm",
-    key: "hygieneIndex",
-    state: "hygieneIndex",
-    content: {
-      reference: `0 — отсутствие зубного налета, камня;
-      1  — налет покрывает треть поверхности зуба, зубной камень локализуется над деснами;
-      2 — налет поражает до 2/3 зуба, отмечается поддесневой камень;
-      3 — налет покрывает более 2/3 поверхности, поддесневой камень поражает шейки зубов.`,
-      whitespace: true,
-      list: [
-        {
-          label: "0",
-          value: 0,
-        },
-        {
-          label: "1",
-          value: 1,
-        },
-        {
-          label: "2",
-          value: 2,
-          icon: true,
-          color: "var(--bg-event-orange-color)",
-        },
-        {
-          label: "3",
-          value: 3,
-          icon: true,
-          color: "var(--border-red-color)",
-        },
-      ],
-    },
-  },
-  {
-    title: "Индекс КПУ",
-    component: "IndexForm",
-    key: "KPUIndex",
-    state: "KPUIndex",
-    content: {
-      reference: `Индекс КПУ в зависимости от стоматологических проблем:
-        от 0 до 2 – слабая интенсивность;
-        от 3 до 5 – средняя;
-        от 6 до 10 – высокая.`,
-      whitespace: true,
-    },
-    rules: [(val) => val <= 10 && val >= 0],
-    checkRangeColor: (val) => {
-      let roundedVal = parseInt(val);
-      if (roundedVal >= 3 && roundedVal <= 5)
-        return "var(--bg-event-orange-color)";
-      if (roundedVal >= 6 && roundedVal <= 10) return "var(--border-red-color)";
-    },
-  },
-  {
-    title: "Данные обследования",
-    component: "DataForm",
-    key: "data",
-    state: "data",
-    results: {
-      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: "Кровоточивость языка" },
-      ],
-      files: [
-        { name: "Документы", data: [] },
-        { name: "Сканы", data: [] },
-      ],
-    },
-    selected: [],
-    iconDictionary: {
-      doc: wordIcon,
-      docx: wordIcon,
-      xls: exelIcon,
-      xlsx: exelIcon,
-      odt: wordIcon,
-      pdf: pdfIcon,
-    },
-  },
   {
     title: "Термометрия (по показаниям)",
     component: "MainFactorsForm",
@@ -1268,6 +1102,134 @@ export const protocolForms = [
       },
     ],
   },
+  {
+    title: "Прикус",
+    component: "IndexForm",
+    key: "bite",
+    state: "bite",
+    content: {
+      reference: `Прикус считается неправильным при аномалиях в расположении 
+        зубов и нарушениях окклюзии, в результате которых нарушаются функции 
+        зубочелюстной системы. Все виды нарушения прикуса в большей или меньшей 
+        степени приводят к разрушению и потере зубов, нарушениям ВНЧС 
+        (височно-нижнечелюстного сустава), а также асимметрии лица.`,
+      whitespace: false,
+      list: [
+        {
+          label: "Ортогнатический прикус",
+          readOnlyLabel: "Нормальный – Ортогнатический",
+          value: "ortognatic bite",
+          reference: `Ортогнатический пркус – при смыкании зубы верхней челюсти 
+            контактируют с одноименными нижними. Идеальным считается расположение 
+            зубов, при котором верхние резцы перекрывают нижние на 1/3`,
+        },
+        {
+          label: "Дистальный прикус",
+          readOnlyLabel: "Дистальный",
+          value: "distal bite",
+          reference: `Дистальный прикус – верхняя челюсть выдается вперед. Верхние резцы
+            могут быть наклонены вперед, к губам, или назад, внутрь ротовой полости.
+            Часто между передними зубами верхней и нижней челюстей отсутствует
+            контакт, образуется сагиттальная щель и дизокклюзия (отсутствие смыкания).
+            Такой вид прикуса зубов визуально проявляется в скошенном профиле и верхней
+            губе, нависающей над нижней; может формироваться «второй подбородок».`,
+        },
+        {
+          label: "Мезиальный прикус",
+          readOnlyLabel: "Мезиальный",
+          value: "mesial bite",
+          reference: `Мезиальный прикус – нижняя челюсть выдается вперед. Здесь 
+            так же может наблюдаться сагиттальная щель и отсутствовать окклюзия, 
+            а может быть лишь незначительное перекрытие верхних зубов нижними. 
+            Внешними признаками мезиального прикуса являются выдвинутая нижняя 
+            челюсть и массивный подбородок; нижняя губа, как правило, увеличена.`,
+        },
+        {
+          label: "Глубокий прикус",
+          readOnlyLabel: "Глубокий",
+          value: "deep bite",
+          reference: `Глубокий прикус – нижние резцы скрыты верхними на 50% 
+            или больше. В зависимости от стадии, при глубоком виде прикуса у 
+            взрослых может полностью отсутствовать окклюзия и развиваться воспаление 
+            тканей верхнего неба из-за травмирования нижними зубами. При глубоком прикусе 
+            распространена так называемая десневая улыбка, нижняя треть лица выглядит 
+            негармонично маленькой, а подбородок скошенным.`,
+        },
+        {
+          label: "Открытый прикус",
+          readOnlyLabel: "Открытый",
+          value: "open bite",
+          reference: `Открытый прикус – при смыкании челюстей контакта между 
+            верхними и нижними зубами нет. Такой вид прикуса вызывает значительные 
+            нарушения жевательных и речевых функций; лицевые мышцы обычно 
+            перенапряжены, а нижняя часть лица удлинена.`,
+        },
+        {
+          label: "Перекрестный прикус",
+          readOnlyLabel: "Перекрестный",
+          value: "cross bite",
+          reference: `Перекрестный прикус – асимметрия челюстей по вертикали; 
+            при смыкании наблюдается пересечение зубных рядов. Развивается при 
+            недоразвитии одной из челюстей и приводит к заметной асимметрии лица.`,
+        },
+      ],
+    },
+  },
+  {
+    title: "Индекс гигиены",
+    component: "IndexForm",
+    key: "hygieneIndex",
+    state: "hygieneIndex",
+    content: {
+      reference: `0 — отсутствие зубного налета, камня;
+      1  — налет покрывает треть поверхности зуба, зубной камень локализуется над деснами;
+      2 — налет поражает до 2/3 зуба, отмечается поддесневой камень;
+      3 — налет покрывает более 2/3 поверхности, поддесневой камень поражает шейки зубов.`,
+      whitespace: true,
+      list: [
+        {
+          label: "0",
+          value: 0,
+        },
+        {
+          label: "1",
+          value: 1,
+        },
+        {
+          label: "2",
+          value: 2,
+          icon: true,
+          color: "var(--bg-event-orange-color)",
+        },
+        {
+          label: "3",
+          value: 3,
+          icon: true,
+          color: "var(--border-red-color)",
+        },
+      ],
+    },
+  },
+  {
+    title: "Индекс КПУ",
+    component: "IndexForm",
+    key: "KPUIndex",
+    state: "KPUIndex",
+    content: {
+      reference: `Индекс КПУ в зависимости от стоматологических проблем:
+        от 0 до 2 – слабая интенсивность;
+        от 3 до 5 – средняя;
+        от 6 до 10 – высокая.`,
+      whitespace: true,
+    },
+    rules: [(val) => val <= 10 && val >= 0],
+    checkRangeColor: (val) => {
+      let roundedVal = parseInt(val);
+      if (roundedVal >= 3 && roundedVal <= 5)
+        return "var(--bg-event-orange-color)";
+      if (roundedVal >= 6 && roundedVal <= 10) return "var(--border-red-color)";
+    },
+  },
   {
     title: "План обследования",
     component: "MedicalFormTag",
@@ -1286,6 +1248,89 @@ export const protocolForms = [
       ],
     },
   },
+  {
+    title: "Данные обследования",
+    component: "DataForm",
+    key: "data",
+    state: "data",
+    results: {
+      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: "Кровоточивость языка" },
+      ],
+      files: [
+        { name: "Документы", data: [] },
+        { name: "Сканы", data: [] },
+      ],
+    },
+    selected: [],
+    iconDictionary: {
+      doc: wordIcon,
+      docx: wordIcon,
+      xls: exelIcon,
+      xlsx: exelIcon,
+      odt: wordIcon,
+      pdf: pdfIcon,
+    },
+  },
+  {
+    title: "Клинический диагноз",
+    component: "ClinicalForm",
+    key: "clinical",
+    state: "clinical",
+    results: {
+      diseases: [
+        {
+          id: 1,
+          label: "В00.10",
+          text: "Простой герпес лица",
+        },
+        {
+          id: 2,
+          label: "В00.11",
+          text: "Простой герпес губы",
+        },
+        {
+          id: 3,
+          label: "В00.2Х",
+          text: "Герпетический гингивостоматит",
+        },
+        {
+          id: 4,
+          label: "В02.20",
+          text: "Постгерпетическая невралгия тройничного нерва",
+        },
+        {
+          id: 5,
+          label: "В02.21",
+          text: "Постгерпетическая невралгия других черепных нервов",
+        },
+        {
+          id: 6,
+          label: "В02.22",
+          text: "Постгерпетическая невралгия двойного нерва",
+        },
+        {
+          id: 7,
+          label: "В02.23",
+          text: "Простой герпес нижней губы",
+        },
+      ],
+    },
+  },
 ];
 
 export const thermometryResultsMap = [