WIP Начала набрасывать хедер медкарты

2023-03-30 19:38:33 +03:00
parent 2941ab6f71
commit e48082af02
6 changed files with 132 additions and 10 deletions
--- a/src/pages/newMedicalCard/components/MedicalCardHeader.vue
+++ b/src/pages/newMedicalCard/components/MedicalCardHeader.vue
@@ -0,0 +1,114 @@
+<template lang="pug">
+  .patient-info.pt-4.pr-6.flex.flex-col.justify-between
+    .ml-6.flex.justify-between
+      q-breadcrumbs
+        template(v-slot:separator)
+          q-icon.rotate-180(
+            size="12px",
+            name="app:long-arrow",
+            color="grey",
+          )
+        q-breadcrumbs-el(label="Календарь")
+        q-breadcrumbs-el(label="Медкарта #13019319")
+      q-btn(
+        flat,
+        text-color="grey",
+        icon="app:basket",
+        size="10px"
+        label="Удалить медкарту",
+        no-caps,
+        padding="4px"
+      )
+    .flex.justify-between.mt-22px
+      .flex
+        .menu-item.px-6.py-10px.cursor-pointer.text-base(
+          v-for="item in menuItem",
+          @click="selectItem(item.component)",
+          :class="{'menu-item-active': item.component === currentMenuItem}",
+          :key="item.id",
+          :id="item.id"
+        ) {{item.title}}
+      q-btn-dropdown(
+        color="primary",
+        icon="print",
+        label="Печатать",
+        dropdown-icon="expand_more",
+        flat,
+        no-caps,
+        padding="2px 4px"
+      )
+</template>
+
+<script>
+export default {
+  name: "MedicalCardHeader",
+  data() {
+    return {
+      menuItem: [
+        {
+          title: "Общая информация",
+          id: "basic",
+          component: "Basic",
+        },
+        {
+          title: "Журнал посещений",
+          id: "session-log",
+          component: "SessionLog",
+        },
+        {
+          title: "Планы лечения",
+          id: "treatment-plans",
+          component: "TreatmentPlans",
+        },
+        {
+          title: "Статистика",
+          id: "statistics",
+          component: "Statistics",
+        },
+        {
+          title: "История контактов",
+          id: "contact-history",
+          component: "ContactHistory",
+        },
+      ],
+      currentMenuItem: "Basic",
+    };
+  },
+  methods: {
+    selectItem(componentName) {
+      this.currentMenuItem = this.menuItem.find(
+        (elem) => elem.component === componentName
+      )?.component;
+    },
+  },
+};
+</script>
+<style scoped lang="sass">
+.patient-info
+  width: 83.2%
+  height: 190px
+  background-color: var(--default-white)
+  border-radius: 4px
+.menu-item
+  color: var(--font-grey-color)
+  border-bottom: 1px solid transparent
+.menu-item:first-child
+  border-bottom-left-radius: 4px
+.menu-item-active
+  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(.on-left)
+  margin-right: 4px !important
+.q-btn :deep(.q-btn-dropdown__arrow)
+  margin-left: 0px !important
+  opacity: 0.7
+.text-grey
+  color: var(--font-grey-color) !important
+.q-breadcrumbs__el
+  font-size: 12px
+  line-height: 135%
+  color: var(--font-grey-color)
+</style>