diff --git a/src/pages/newMedicalCard/components/MedicalFormTagWrapper.vue b/src/pages/newMedicalCard/components/MedicalFormTagWrapper.vue
new file mode 100644
index 0000000..c16e41b
--- /dev/null
+++ b/src/pages/newMedicalCard/components/MedicalFormTagWrapper.vue
@@ -0,0 +1,171 @@
+
+ .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 заполнение осмотра
+
+
+
+
+
diff --git a/src/pages/newMedicalCard/components/MedicalFormWrapper.vue b/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
index 8a91d97..6a8f38e 100644
--- a/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
+++ b/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: {
diff --git a/src/pages/newMedicalCard/components/MedicalProtocolsInspection.vue b/src/pages/newMedicalCard/components/MedicalProtocolsInspection.vue
index d3fc2ff..549be2f 100644
--- a/src/pages/newMedicalCard/components/MedicalProtocolsInspection.vue
+++ b/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")
- .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)"
- )
- .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 заполнение осмотра
+ medical-form-tag-wrapper(
+ v-if="inspection",
+ :list="list",
+ :inspection="inspection",
+ :fill-inspection="fillInspection"
+ :open-card="openCard",
+ :close-card="closeCard"
+ )
@@ -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
diff --git a/src/pages/newMedicalCard/components/MedicalProtocolsList.vue b/src/pages/newMedicalCard/components/MedicalProtocolsList.vue
index 8816037..dec2cbe 100644
--- a/src/pages/newMedicalCard/components/MedicalProtocolsList.vue
+++ b/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,
diff --git a/src/pages/newMedicalCard/components/MedicalProtocolsWrapper.vue b/src/pages/newMedicalCard/components/MedicalProtocolsWrapper.vue
index c7587f8..72116ac 100644
--- a/src/pages/newMedicalCard/components/MedicalProtocolsWrapper.vue
+++ b/src/pages/newMedicalCard/components/MedicalProtocolsWrapper.vue
@@ -1,7 +1,7 @@
.wrapper.flex.gap-x-2
- medical-protocols-list(:open-inspection="openInspection")
- medical-protocols-inspection(:inspection="inspection")
+ medical-protocols-list(:open-inspection="openInspection", :create-inspection="createInspection")
+ medical-protocols-inspection(:inspection="inspection", :fill-inspection="fillInspection")