Merge branch 'ASTRA-72' into 'master'

[WIP] Добавил карточку с первичным осмотром и тэгами

See merge request andrusyakka/urban-couscous!343

src/pages/newMedicalCard/components/MedicalProtocolsInspection.vue

@@ -1,7 +1,12 @@
 <template lang="pug">
   .protocols-wrapper.h-full.flex.flex-col.gap-y-2
-    .protocol.flex.justify-between.p-6
-      .flex.font-bold.text-6xl Первичный осмотр 2024
+    .flex.font-bold.text-6xl.items-center.h-full.justify-center(
+      v-if="!inspection"
+      :style="{color: 'var(--font-grey-color)'}"
+    ) Выберите осмотр
+    .flex.flex-col.gap-y-2(v-else)
+      .protocol.flex.justify-between.p-6(v-for="elem in list")
+        .flex.font-bold.text-6xl {{elem.label}}
         .flex.gap-x-4
           .icon.flex.rounded.w-10.h-10.items-center.justify-center
             q-icon(
@@ -15,7 +20,43 @@
               size="20px",
               style="color: var(--font-grey-color)"
             )
-    //- .protocol-body
+      .protocol-body.flex.flex-col.p-6(v-for="item in list[0].data")
+        .header.flex.justify-between.items-center
+          .flex.font-bold.text-xm {{item.name}}
+          .flex.items-center.h-5(:style="{color: 'var(--btn-blue-color)'}")
+            q-btn(flat, no-caps)
+              q-icon(left, name="app:plus", size="10px")
+              span.text-smm.font-medium Создать шаблон
+        .flex.gap-x-4(:style="{height: '300px'}")
+          .textarea.flex.flex-col.gap-y-1
+            .tag-wrap.flex.gap-x-1.gap-y-1
+              .tag.flex.items-center.px-3.cursor-pointer(v-for="tag in item.tags") {{tag.label}}
+            base-input.px-3(type="textarea", autogrow, borderless placeholder="Введите жалобу...")
+          .filter.flex
+            .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"
+                )
       .protocol.flex.justify-between.p-6
         .flex.h-fit.w-fit.gap-2
           base-button.text-base.font-semibold(outlined, :size="40") Отменить
@@ -27,16 +68,60 @@
 
 <script>
 import BaseButton from "@/components/base/BaseButton.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
 
 export default {
   name: "MedicalProtocolsInspection",
-  components: { BaseButton },
+  components: { BaseButton, BaseInput },
+  props: { inspection: Boolean },
+  data() {
+    return {
+      list: [
+        {
+          id: 1,
+          label: "Первичный осмотр 2023 года",
+          data: [
+            {
+              id: 1,
+              name: "Жалобы",
+              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: 2,
+              name: "Алергологический анамнез",
+              tags: [],
+            },
+            {
+              id: 3,
+              name: "Принимаемые лекарственные препараты",
+              tags: [],
+            },
+          ],
+        },
+      ],
+    };
+  },
 };
 </script>
 
 <style lang="sass" scoped>
 .protocols-wrapper
-  width: 89.2%
+  flex: 1
+  overflow-y: auto
+  &::-webkit-scrollbar
+    width: 0
 
 .protocol
   background: var(--default-white)
@@ -46,4 +131,40 @@ export default {
 
 .icon
   background: var(--bg-light-grey)
+
+.protocol-body
+  min-height: 394px
+  background: var(--default-white)
+  border-radius: 4px
+  row-gap: 26px
+
+.tag-wrap
+  flex-wrap: wrap !important
+
+.button
+  display: flex
+  align-items: center
+  width: 40px
+  height: 40px
+  justify-content: center
+  cursor: pointer
+  border-radius: 4px
+  background: var(--bg-light-grey)
+
+.tag
+  height: 32px
+  background: var(--bg-light-grey)
+  border-radius: 4px
+
+.textarea
+  width: 800px
+  padding: 4px
+  border: 1px solid var(--border-light-grey-color)
+  border-radius: 4px
+
+.filter
+  border: 1px solid var(--border-light-grey-color)
+  border-radius: 4px
+  padding: 16px 16px 0
+  width: 360px
 </style>

src/pages/newMedicalCard/components/MedicalProtocolsList.vue

@@ -24,7 +24,7 @@
       .flex.py-4.w-full.color-grey.text-base.justify-center
         span.opacity-50 Осмотров: 5
       .flex.gap-y-2
-        .w-full.border.rounded.border-grey.p-4
+        .w-full.border.rounded.border-grey.p-4(@click="openInspection")
           .flex.justify-between.mb-7
             .flex.flex-col.gap-y-1
               span.text-xl.font-bold.color-blue.line-height 2023 г.
@@ -42,6 +42,7 @@ import BaseSelect from "@/components/base/BaseSelect.vue";
 export default {
   name: "MedicalProtocolsList",
   components: { BaseSelect },
+  props: { openInspection: Function },
   data() {
     return {
       sorting: false,

src/pages/newMedicalCard/components/MedicalProtocolsWrapper.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   .wrapper.flex.gap-x-2
-    medical-protocols-list
-    medical-protocols-inspection
+    medical-protocols-list(:open-inspection="openInspection")
+    medical-protocols-inspection(:inspection="inspection")
 </template>
 
 <script>
@@ -10,6 +10,16 @@ import MedicalProtocolsInspection from "@/pages/newMedicalCard/components/Medica
 export default {
   name: "MedicalProtocolsWrapper",
   components: { MedicalProtocolsList, MedicalProtocolsInspection },
+  data() {
+    return {
+      inspection: false,
+    };
+  },
+  methods: {
+    openInspection() {
+      this.inspection = !this.inspection;
+    },
+  },
 };
 </script>