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 @@ + + + + + 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 @@