[WIP] Добавил разделение по формам создания, редактирования и просмотра осмотра

src/pages/newMedicalCard/components/MedicalFormTagWrapper.vue

@@ -0,0 +1,171 @@
+<template lang="pug">
+  .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(
+          name="print",
+          size="20px",
+          style="color: var(--font-grey-color)"
+        )
+      .icon.flex.rounded.w-10.h-10.items-center.justify-center
+        q-icon(
+          name="app:basket", 
+          size="20px",
+          style="color: var(--font-grey-color)"
+        )
+  medical-form-wrapper(
+    v-for="(item, index) in list[0].data",
+    :key="item.id"
+    :title="item.name",
+    :is-edit="item?.change",
+    :open-edit="()=>openCard(index)",
+    :cancel="()=>closeCard(index)"
+    :tag="fillInspection"
+  )
+    .protocol-body.flex.flex-col
+      .flex.items-center.gap-x-11px(:class="{'open-header': item.change || fillInspection}")
+        .flex.items-center.h-5(v-if="item.change", :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: item.change || fillInspection ? '300px' : ''}")
+        .flex.flex-col.gap-y-1(:class="{'open-textarea': item.change || fillInspection}")
+          .tag-wrap.flex.gap-x-1.gap-y-1(v-if="!fillInspection")
+            .tag.flex.items-center.px-3.cursor-pointer(v-for="tag in item.tags" :key="tag.id") {{tag.label}}
+          base-input.px-3(v-if="item.change || fillInspection" type="textarea", autogrow, borderless, placeholder="Введите жалобу...")
+        .filter.flex.flex-col.gap-y-4(v-if="item.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
+            .checkbox.flex.items-center.gap-x-4(
+              v-for="complaint in item.complaints",
+              :key="complaint.id"
+            )
+              q-checkbox(
+                v-model="selected",
+                :val="complaint",
+                :style="{border: 'none', width: '15px'}",
+                size="32px"
+              )
+              .name.flex.items-center.font-medium.text-xm {{complaint.label}}
+  .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") Отменить
+      base-button.text-base.font-semibold(:size="40") Сохранить
+    .flex.items-center.gap-x-3(:style="{color: 'var(--font-grey-color)'}")
+      .flex.font-semibold.text-7xl 0%
+      .flex.font-medium.text-smm.w-20 заполнение осмотра
+</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: "MedicalFormTagWrapper",
+  components: { BaseButton, BaseInput, MedicalFormWrapper },
+  props: {
+    list: Array,
+    inspection: Boolean,
+    fillInspection: Boolean,
+    openCard: Function,
+    closeCard: Function,
+  },
+  data() {
+    return {
+      selected: [],
+    };
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.protocol
+  background: var(--default-white)
+  width: 100%
+  height: 80px
+  border-radius: 4px
+
+.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
+
+.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
+    width: 4px
+
+.checkbox
+  border-bottom: 1px solid var(--bg-light-grey)
+  width: 328px
+
+.name
+  min-height: 40px
+  padding-top: 4px
+  padding-bottom: 4px
+  width: 268px
+
+.q-checkbox :deep(.q-checkbox__bg)
+  border-radius: 4px
+  border: 1.5px solid var(--font-grey-color)
+</style>

src/pages/newMedicalCard/components/MedicalFormWrapper.vue

@@ -5,9 +5,15 @@
         base-loader
     .flex.flex-col.h-full.gap-25px.p-6
       .flex.w-full.justify-between
-        .flex.w-fit.gap-11px.items-center
+        .flex.w-fit.gap-11px.items-center(v-if="!tag")
           span.font-bold.text-base.whitespace-nowrap {{title}}
           q-icon.edit-button.text-lg.cursor-pointer(name="app:edit" v-if="!isEdit" @click="openEdit" size="20")
+        .flex.w-full.gap-11px.items-center.justify-between(v-else)
+          span.font-bold.text-base.whitespace-nowrap {{title}}
+          .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.w-fit.gap-10px.items-center.delete-button.cursor-pointer(v-if="!isEdit && titleDelete" @click="deleteItem")
           q-icon(name="app:basket" size="20")
           span.text-smm.font-medium {{ titleDelete }}
@@ -24,6 +30,10 @@ export default {
   name: "MedicalFormWrapper",
   components: { BaseButton, BaseLoader },
   props: {
+    tag: {
+      type: Boolean,
+      default: false,
+    },
     title: String,
     titleDelete: String,
     cancel: {

src/pages/newMedicalCard/components/MedicalProtocolsInspection.vue

@@ -5,75 +5,25 @@
       :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")
+      medical-form-tag-wrapper(
-        .flex.font-bold.text-6xl {{elem.label}}
+        v-if="inspection",
-        .flex.gap-x-4
+        :list="list",
-          .icon.flex.rounded.w-10.h-10.items-center.justify-center
+        :inspection="inspection",
-            q-icon(
+        :fill-inspection="fillInspection"
-              name="print",
+        :open-card="openCard",
-              size="20px",
+        :close-card="closeCard"
-              style="color: var(--font-grey-color)"
+      )
-            )
-          .icon.flex.rounded.w-10.h-10.items-center.justify-center
-            q-icon(
-              name="app:basket", 
-              size="20px",
-              style="color: var(--font-grey-color)"
-            )
-      .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") Отменить
-          base-button.text-base.font-semibold(:size="40") Сохранить
-        .flex.items-center.gap-x-3(:style="{color: 'var(--font-grey-color)'}")
-          .flex.font-semibold.text-7xl 0%
-          .flex.font-medium.text-smm.w-20 заполнение осмотра
 </template>
 
 <script>
-import BaseButton from "@/components/base/BaseButton.vue";
+import MedicalFormTagWrapper from "@/pages/newMedicalCard/components/MedicalFormTagWrapper.vue";
-import BaseInput from "@/components/base/BaseInput.vue";
 
 export default {
   name: "MedicalProtocolsInspection",
-  components: { BaseButton, BaseInput },
+  components: {
-  props: { inspection: Boolean },
+    MedicalFormTagWrapper,
+  },
+  props: { inspection: Boolean, fillInspection: Boolean },
   data() {
     return {
       list: [
@@ -83,6 +33,7 @@ export default {
           data: [
             {
               id: 1,
+              change: false,
               name: "Жалобы",
               tags: [
                 { id: 1, label: "Боль при приеме сладкой пищи" },
@@ -96,15 +47,20 @@ export default {
                 { id: 1, label: "Боль при приеме сладкой пищи" },
                 { id: 2, label: "Жжение языка" },
                 { id: 3, label: "Кровоточивость десен" },
+                { id: 4, label: "Лечение у ортодонта не проводилось" },
+                { id: 5, label: "Ранее зубы лечили в ЛПУ" },
+                { id: 6, label: "Удаление зуба" },
               ],
             },
             {
               id: 2,
+              change: false,
               name: "Алергологический анамнез",
               tags: [],
             },
             {
               id: 3,
+              change: false,
               name: "Принимаемые лекарственные препараты",
               tags: [],
             },
@@ -113,6 +69,14 @@ export default {
       ],
     };
   },
+  methods: {
+    openCard(index) {
+      this.list[0].data[index].change = true;
+    },
+    closeCard(index) {
+      this.list[0].data[index].change = false;
+    },
+  },
 };
 </script>
 
@@ -122,49 +86,4 @@ export default {
   overflow-y: auto
   &::-webkit-scrollbar
     width: 0
-
-.protocol
-  background: var(--default-white)
-  width: 100%
-  height: 80px
-  border-radius: 4px
-
-.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

@@ -9,6 +9,7 @@
         icon="add",
         :style="{width: '100%', height: '40px'}"
         padding="0",
+        @click="createInspection"
       )
     .p-4.rounded.background.list
       .flex
@@ -42,7 +43,7 @@ import MedicalProtocolCard from "@/pages/newMedicalCard/components/MedicalProtoc
 export default {
   name: "MedicalProtocolsList",
   components: { BaseSelect, BaseAvatar, MedicalProtocolCard },
-  props: { openInspection: Function },
+  props: { openInspection: Function, createInspection: 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(:open-inspection="openInspection")
+    medical-protocols-list(:open-inspection="openInspection", :create-inspection="createInspection")
-    medical-protocols-inspection(:inspection="inspection")
+    medical-protocols-inspection(:inspection="inspection", :fill-inspection="fillInspection")
 </template>
 
 <script>
@@ -13,12 +13,16 @@ export default {
   data() {
     return {
       inspection: false,
+      fillInspection: false,
     };
   },
   methods: {
     openInspection() {
       this.inspection = !this.inspection;
     },
+    createInspection() {
+      this.fillInspection = !this.fillInspection;
+    },
   },
 };
 </script>