admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[WIP] Добавил форму данных обследования

Browse Source
This commit is contained in:
megavrilinvv
2023-05-12 18:36:36 +03:00
parent 317e8c80fe
commit c192f777d1
6 changed files with 330 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/base/BaseInput.vue
View File

@@ -3,7 +3,7 @@
q-input(
v-model="value",
:name="name",
:class="{'circle': circle, 'font-input': true}",
:class="{'circle': circle, 'font-input': true, 'doc': doc}",
:input-style="{ color: textColor, borderColor: borderColor, resize: resize}",
:borderless="borderless",
:placeholder="placeholder",
@@ -40,6 +40,7 @@ export default {
components: { BaseInputContainer },
props: {
circle: Boolean,
doc: Boolean,
dense: {
type: Boolean,
default: true,
@@ -129,6 +130,12 @@ export default {
z-index: 5
opacity: 0
cursor: pointer
.doc
width: 100%
height: 100%
z-index: 5
opacity: 0
cursor: pointer
</style>
<style lang="sass">
.q-field--standout.q-field--readonly .q-field__control:before

311
src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue Normal file
View File

@@ -0,0 +1,311 @@
<template lang="pug">
medical-form-wrapper(
:title="data.title",
:is-edit="list?.change",
:open-edit="openCard",
:cancel="closeCard",
:tag="fillInspection || list?.change"
)
.protocol-body.flex.flex-col
.flex.items-center.gap-x-11px(:class="{'open-header': list.change || fillInspection}")
.flex.gap-x-4(:style="{height: list.change || fillInspection ? '300px' : ''}")
.flex.flex-col.gap-y-1(:class="{'open-textarea': list.change || fillInspection}")
.tag-wrap.flex.gap-x-1.gap-y-1(v-if="!fillInspection")
.tag.flex.items-center.px-3.cursor-pointer.font-medium.text-smm(
v-for="tag in list.tags" :key="tag.id"
) {{tag.label}}
base-input.px-3(v-if="list.change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите жалобу...")
.filter.flex.flex-col.gap-y-4(v-if="list.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(v-if="list.complaints")
.checkbox.flex.flex-col(v-for="complaint in textSorting(list.complaints)")
.letter.flex.items-center.font-bold.justify-center {{ complaint.sym }}
.line.flex.gap-x-4.h-9.items-center(v-for="name in complaint?.array")
q-checkbox(
dense,
v-model="selected",
:val="name?.label",
:style="{border: 'none', width: '16px', height: '16px'}"
)
.name.flex.items-center.font-medium.text-smm {{ name?.label }}
.protocol-data.flex.gap-x-20(v-if="list.change || fillInspection")
.flex.flex-col.gap-y-3
.title.text-smm.font-semibold Документы
.download.flex.relative
base-input(
@change="addNewDoc",
doc,
:width="548",
type="file",
id="upload",
borderless
)
.text.flex.flex-col.items-center.justify-center.absolute.font-medium.text-smm
span Загрузите документ
label.label.cursor-pointer(for="upload") с компьютера
span или перетащите его в это поле
.photo-field.flex.gap-x-2.items-center(v-if="docData.length", v-for="item in docData")
q-avatar(size="24px")
img.h-10.w-10.object-cover(
:src="iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)]"
)
.doc-text.font-medium.text-smm {{item.name}}
.flex.flex-col.gap-y-3
.title.text-smm.font-semibold Сканы
.download.flex.relative.cursor-pointer
base-input(
@change="addNewScan"
doc,
:width="548",
type="file",
id="upload",
borderless
)
.text.flex.flex-col.items-center.justify-center.absolute.font-medium.text-smm
span Загрузите скан документа
label.label(for="upload") с компьютера
span или перетащите его в это поле
.photo-field.flex.gap-x-2.items-center(v-if="scanData.length", v-for="item in scanData")
q-avatar(size="24px")
img.h-10.w-10.object-cover(
:src="iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)]"
)
.doc-text.font-medium.text-smm {{item.name}}
</template>
<script>
import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
import BaseButton from "@/components/base/BaseButton.vue";
import BaseInput from "@/components/base/BaseInput.vue";
import pdfIcon from "@/assets/icons/pdf.svg";
import wordIcon from "@/assets/icons/word.svg";
import exelIcon from "@/assets/icons/exel.svg";
export default {
name: "DataForm",
components: { MedicalFormWrapper, BaseButton, BaseInput },
props: {
data: Object,
fillInspection: Boolean,
inspection: Boolean,
},
data() {
return {
list: {
title: "Данные обследования",
change: false,
tags: [
{ id: 1, label: "Боль при приеме сладкой пищи" },
{ id: 2, label: "Жжение языка" },
{ id: 3, label: "Кровоточивость десен" },
{ id: 4, label: "Лечение у ортодонта не проводилось" },
{ id: 5, label: "Ранее зубы лечили в ЛПУ" },
{ id: 6, label: "Удаление зуба" },
],
complaints: [
{ id: 1, label: "Ранее зубы лечили в ЛПУ" },
{ id: 2, label: "Жжение языка" },
{ id: 3, label: "Кровоточивость десен" },
{ id: 4, label: "Лечение у ортодонта не проводилось" },
{ id: 5, label: "Уныние зуба" },
{ id: 6, label: "Боль при приеме сладкой пищи" },
{ id: 7, label: "Удаление зуба" },
{ id: 2, label: "Жжение языка" },
],
},
selected: [],
abc: [
"А",
"Б",
"В",
"Г",
"Д",
"Е",
"Ё",
"Ж",
"З",
"И",
"Й",
"К",
"Л",
"М",
"Н",
"О",
"П",
"Р",
"С",
"Т",
"У",
"Ф",
"Х",
"Ц",
"Ч",
"Ш",
"Щ",
"Ы",
"Э",
"Ю",
"Я",
],
docData: [],
scanData: [],
iconDictionary: {
doc: wordIcon,
docx: wordIcon,
odt: wordIcon,
pdf: pdfIcon,
xls: exelIcon,
},
};
},
methods: {
textSorting(arr) {
let srt = [];
this.abc.forEach((letter) => {
arr.forEach((str) => {
let finded = srt.find((obj) => obj.sym === letter);
if (str.label[0] === letter) {
if (!finded) {
srt.push({ sym: letter, array: [{ label: str.label }] });
} else if (finded.sym === letter)
finded.array.push({ label: str.label });
}
});
});
return srt;
},
openCard() {
this.list.change = true;
},
closeCard() {
this.list.change = false;
},
addNewDoc(e) {
this.docData = [...this.docData, ...e.target.files];
},
addNewScan(e) {
this.scanData = [...this.scanData, ...e.target.files];
},
},
};
</script>
<style lang="sass" scoped>
.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
color: var(--font-dark-blue-color)
.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-track:vertical
margin-bottom: 12px
&::-webkit-scrollbar
width: 4px
.checkbox
width: 328px
.line
border-bottom: 1px solid var(--bg-light-grey)
min-height: 36px
.letter
width: 18px
height: 34px
color: var(--font-grey-color)
.name
width: 268px
color: var(--font-dark-blue-color)
.q-checkbox :deep(.q-checkbox__bg)
border-radius: 4px
border: 1.5px solid var(--font-grey-color)
.q-checkbox :deep(.q-checkbox__inner:before)
background: none !important
.download
width: 548px
height: 62px
border: 1px dashed var(--border-light-grey-color)
border-radius: 4px
cursor: pointer
.text
width: 520px
height: 60px
background: white
color: var(--font-grey-color)
.title
color: var(--font-grey-color)
.label
color: var(--btn-blue-color)
.doc-text
color: var(--font-dark-blue-color)
.photo-field
height: 32px
background: var(--bg-light-grey)
border-radius: 4px
padding: 4px 8px
width: fit-content
</style>

40
src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormData.vue
View File

@@ -1,40 +0,0 @@
<template lang="pug">
medical-form-wrapper
</template>
<script>
import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
export default {
name: "MedicalFormData",
components: { MedicalFormWrapper },
data() {
return {
list: {
title: "Данные обследования",
change: false,
tags: [
{ id: 1, label: "Боль при приеме сладкой пищи" },
{ id: 2, label: "Жжение языка" },
{ id: 3, label: "Кровоточивость десен" },
{ id: 4, label: "Лечение у ортодонта не проводилось" },
{ id: 5, label: "Ранее зубы лечили в ЛПУ" },
{ id: 6, label: "Удаление зуба" },
],
complaints: [
{ id: 1, label: "Ранее зубы лечили в ЛПУ" },
{ id: 2, label: "Жжение языка" },
{ id: 3, label: "Кровоточивость десен" },
{ id: 4, label: "Лечение у ортодонта не проводилось" },
{ id: 5, label: "Уныние зуба" },
{ id: 6, label: "Боль при приеме сладкой пищи" },
{ id: 7, label: "Удаление зуба" },
{ id: 2, label: "Жжение языка" },
],
},
};
},
};
</script>
<style lang="sass" scoped></style>

4
src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue
View File

@@ -43,8 +43,7 @@
dense,
v-model="selected",
:val="name?.label",
:style="{border: 'none', width: '16px', height: '16px'}",
:style="{border: 'none', width: '16px', height: '16px'}"
)
.name.flex.items-center.font-medium.text-smm {{ name?.label }}
</template>
@@ -59,7 +58,6 @@ export default {
components: { BaseButton, BaseInput, MedicalFormWrapper },
props: {
list: Array,
inspection: Boolean,
fillInspection: Boolean,
openCard: Function,
closeCard: Function,

9
src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsInspection.vue
View File

@@ -17,7 +17,7 @@
)
.button
q-btn(
icon="app:basket",
icon="app:basket",
size="20px",
:style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
padding="0"
@@ -25,13 +25,12 @@
medical-form-tag(
v-if="inspection || fillInspection",
:list="list",
:inspection="inspection",
:fill-inspection="fillInspection"
:open-card="openCard",
:close-card="closeCard"
)
div(v-for="form in protocolForms", :key="form.key")
component(v-bind:is="form.component", :data="form")
component(v-bind:is="form.component", :data="form" :fill-inspection="fillInspection")
.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") Отменить
@@ -43,7 +42,7 @@
<script>
import MedicalFormTag from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue";
import MedicalFormData from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormData.vue";
import DataForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue";
import BaseButton from "@/components/base/BaseButton.vue";
import IndexForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/IndexForm.vue";
import { protocolForms } from "@/pages/newMedicalCard/utils/medicalConfig.js";
@@ -52,7 +51,7 @@ export default {
name: "MedicalProtocolsInspection",
components: {
MedicalFormTag,
MedicalFormData,
DataForm,
BaseButton,
IndexForm,
},

6
src/pages/newMedicalCard/utils/medicalConfig.js
View File

@@ -628,4 +628,10 @@ export const protocolForms = [
},
rules: [(val) => val <= 10 && val >= 0],
},
{
title: "Данные обследования",
component: "DataForm",
key: "data",
state: "data",
},
];