WIP Доделала визуал хедера

src/pages/newMedicalCard/components/MedicalCardHeader.vue

@@ -13,13 +13,50 @@
       q-btn(
         flat,
         text-color="grey",
-        icon="app:basket",
-        size="10px"
-        label="Удалить медкарту",
         no-caps,
         padding="6px"
+        size="md"
       )
-    .flex.justify-between.mt-22px
+        q-icon(left, name="app:basket", size="16px")
+        span Удалить медкарту
+    .ml-6.flex.gap-x-4
+      q-avatar(size="80px", :style="{'background-color': 'var(--border-light-grey-color)', color: 'var(--font-dark-blue-color)'}")
+        img(v-if="patient?.avatar", :src="patient?.avatar")
+        span.text-2xl(v-else) {{patientAvatar}}
+      .flex.gap-y-1.flex-col
+        .flex.items-center
+          span.text-xxl.font-bold.mr-3(
+            :style="{color: 'var(--font-dark-blue-color)', 'line-height': '135%'}",
+          ) {{`${patient?.first_name} ${patient?.last_name} ${patient?.patronimic}`}}
+          q-chip(
+            square,
+            text-color="white",
+            :style="{height: '20px', background: priority.color, padding: '2px 8px'}",
+            :label="priority.text"
+          )
+          q-btn-dropdown(
+            :style="{background: 'var(--border-red-color)', height: '20px'}",
+            text-color="white",
+            :label="`+${patient?.allergy?.length}`"
+            icon="pan_tool"
+            size="10px",
+            padding="2px 8px",
+            dropdown-icon="expand_more",
+            menu-anchor="bottom left"
+            menu-self="top start"
+          )
+            q-list.w-56(:style="{padding: '16px', color: 'var(--font-dark-blue-color)'}")
+              q-item.text-smm(
+                v-close-popup,
+                v-for="allergy in patient?.allergy",
+                :style="{padding: 0, 'min-height': '32px'}"
+              )
+                q-item-section.cursor-pointer {{allergy}}
+        span.text-smm.label-color Добавлен в систему: 
+          span.date-color {{ patient?.addedDate}}
+        span.text-smm.label-color Последнее обновление: 
+          span.date-color {{patient?.updatedDate}}
+    .flex.justify-between.pt-4
       .flex
         .menu-item.px-6.py-10px.cursor-pointer.text-base(
           v-for="item in menuItem",
@@ -34,6 +71,7 @@
         label="Печатать",
         dropdown-icon="expand_more",
         flat,
+        size="md"
         no-caps,
         padding="2px 4px"
         :style="{height: '32px'}"
@@ -42,6 +80,7 @@
 
 <script>
 import { v_model } from "@/shared/mixins/v-model";
+import { column } from "@/pages/clients/utils/tableConfig.js";
 export default {
   name: "MedicalCardHeader",
   mixins: [v_model],
@@ -74,8 +113,32 @@ export default {
           component: "ContactHistory",
         },
       ],
+      patient: {
+        first_name: "Иван",
+        last_name: "Иванов",
+        patronimic: "Иванович",
+        avatar: "",
+        addedDate: "22.01.2010",
+        updatedDate: "12.12.2022",
+        priority: 2,
+        allergy: ["Парацетомол", "Пчелы", "Мед"],
+      },
     };
   },
+  computed: {
+    patientAvatar() {
+      let checkedFirstName =
+        this.patient.first_name !== null
+          ? this.patient.first_name[0]
+          : this.patient.last_name[1];
+      return `${this.patient.last_name[0]}${checkedFirstName}`;
+    },
+    priority() {
+      return column
+        .find((elem) => elem.name === "priority")
+        ?.settings.find((elem) => elem.priority === this.patient?.priority);
+    },
+  },
   methods: {
     selectItem(item) {
       this.value = item?.component;
@@ -98,10 +161,7 @@ export default {
   color: var(--font-dark-blue-color)
   border-bottom: 1px solid var(--font-dark-blue-color)
 .q-btn
-  font-size: 14px !important
   font-weight: 500 !important
-.q-btn :deep(.q-icon)
-  font-size: 16px !important
 .q-btn :deep(.on-left)
   margin-right: 4px !important
 .q-btn :deep(.q-btn-dropdown__arrow)
@@ -115,4 +175,8 @@ export default {
   color: var(--font-grey-color)
 .q-breadcrumbs :deep(.q-breadcrumbs__separator)
   margin: 10px 0 4px 8px !important
+.label-color
+  color: var(--font-grey-color)
+.date-color
+  color: var(--font-dark-blue-color)
 </style>