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-17 16:49:25 +03:00
parent 495310f39e
commit 3fbe0dd6d8
5 changed files with 156 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue
View File

@@ -1,36 +1,37 @@
<template lang="pug">
medical-form-wrapper(
:title="data.title",
:is-edit="list?.change",
:is-edit="change",
:open-edit="openCard",
:cancel="closeCard",
:tag="fillInspection || list?.change"
:tag="fillInspection || change"
)
.protocol-body.flex.flex-col
.flex.items-center.gap-x-11px(:class="{'open-header': list.change || fillInspection}")
.flex.flex-col.gap-y-4(:class="{'changed': list.change || fillInspection}")
.flex.flex-col.gap-y-1(:class="{'open-textarea': list.change || fillInspection}")
.flex.items-center.gap-x-11px(:class="{'open-header': change || fillInspection}")
.flex.flex-col.gap-y-4(:class="{'changed': change || fillInspection}")
.flex.flex-col.gap-y-1(:class="{'open-textarea': 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"
v-for="tag in data.results.tags", :key="tag.id"
) {{tag.label}}
base-input.px-3(v-if="list.change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите жалобу...")
.wrap.gap-1.flex.flex-col(v-if="(docData.length || scanData.length) && !(list.change || fillInspection)", v-for="file in list.files")
.title.font-semibold.text-smm.mb-2(v-if="file?.data?.length") {{file.name}}
.wrap.flex.gap-x-1.gap-y-1
.flex.gap-x-2.items-center.pl-2.pr-4.py-2.gap-y-3(
v-for="item in file.data"
:class="{'photo-field': checkedName(file.name), 'scan-field': file.name === 'Сканы'}"
)
q-avatar(:size="checkedName(file.name) ? '24px' : '40px'", :rounded="!checkedName(file.name)")
img.h-10.w-10.object-cover(
:src="checkedName(file.name) ? iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)] : item.file"
)
.doc-text.font-medium.text-smm(v-if="checkedName(file.name)") {{item.name}}
.flex.flex-col.gap-y-1(v-else)
.doc-text.font-medium.text-smm {{item.name.substr(0, item.name.lastIndexOf('.'))}}
.title.font-medium.text-xsx {{item.size + " Мб"}}
.filter.flex.flex-col.gap-y-4(v-if="list.change || fillInspection")
base-input.px-3(v-if="change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите жалобу...")
template(v-if="!(change || fillInspection)", v-for="file in data.results.files")
.wrap.flex.flex-col.gap-1.gap-y-3(v-if="file?.data?.length")
.title.font-semibold.text-smm.mb-2 {{file.name}}
.wrap.flex.gap-x-1.gap-y-1
.flex.gap-x-2.items-center.pl-2.pr-4.py-2.gap-y-3(
v-for="item in file.data"
:class="{'photo-field': checkedName(file.name), 'scan-field': file.name === 'Сканы'}"
)
q-avatar(:size="checkedName(file.name) ? '24px' : '40px'", :rounded="!checkedName(file.name)")
img.h-10.w-10.object-cover(
:src="checkedName(file.name) ? data.iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)] : item.file"
)
.doc-text.font-medium.text-smm(v-if="checkedName(file.name)") {{item.name}}
.flex.flex-col.gap-y-1(v-else)
.doc-text.font-medium.text-smm {{item.name.substr(0, item.name.lastIndexOf('.'))}}
.title.font-medium.text-xsx {{item.size + " Мб"}}
.filter.flex.flex-col.gap-y-4(v-if="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)")
@@ -46,19 +47,19 @@
: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)")
.field.flex.flex-col.overflow-y-scroll
.checkbox.flex.flex-col(v-for="complaint in textSorting(data.results.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",
v-model="data.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(v-for="file in list.files")
.protocol-data.flex.gap-x-20(v-if="change || fillInspection")
.flex.flex-col.gap-y-3(v-for="file in data.results.files")
.title.text-smm.font-semibold {{file.name}}
.download.flex.relative
base-input(
@@ -82,7 +83,7 @@
)
q-avatar(:size="checkedName(file.name) ? '24px' : '40px'", :rounded="!checkedName(file.name)")
img.h-10.w-10.object-cover(
:src="checkedName(file.name) ? iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)] : item.file"
:src="checkedName(file.name) ? data.iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)] : item.file"
)
.doc-text.font-medium.text-smm(v-if="checkedName(file.name)") {{item.name}}
.flex.flex-col.gap-y-1(v-else)
@@ -94,9 +95,6 @@
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",
@@ -109,46 +107,9 @@ export default {
},
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: "Жжение языка" },
],
files: [
{ name: "Документы", data: null },
{ name: "Сканы", data: null },
],
},
selected: [],
docData: [],
scanData: [],
iconDictionary: {
doc: wordIcon,
docx: wordIcon,
xls: exelIcon,
xlsx: exelIcon,
odt: wordIcon,
pdf: pdfIcon,
},
change: false,
};
},
methods: {
checkedName(e) {
return e === "Документы" ? true : false;
@@ -172,28 +133,30 @@ export default {
return srt;
},
openCard() {
this.list.change = true;
this.change = true;
},
closeCard() {
this.list.change = false;
this.change = false;
},
addNewDoc(arr) {
this.docData = [...this.docData, ...arr];
this.list.files.find((e) => e.name === "Документы").data = this.docData;
this.data.results.files.find((e) => e.name === "Документы").data = [
...arr,
];
},
addNewScan(arr) {
[...arr].forEach((file) => {
const reader = new FileReader();
reader.onload = (e) => {
this.scanData.push({
file: e.target.result,
name: file.name,
size: (file.size / 1024 / 1024).toFixed(1),
});
this.data.results.files
.find((e) => e.name === "Сканы")
?.data.push({
file: e.target.result,
name: file.name,
size: (file.size / 1024 / 1024).toFixed(1),
});
};
reader.readAsDataURL(file);
});
this.list.files.find((e) => e.name === "Сканы").data = this.scanData;
},
},
};

63
src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DiseaseForm.vue Normal file
View File

@@ -0,0 +1,63 @@
<template lang="pug">
medical-form-wrapper(
:title="data.title",
:is-edit="change",
:open-edit="openCard",
:cancel="closeCard",
)
.disease-body.flex
.flex.flex-col.gap-y-17px(v-if="fillInspection || change")
.flex.-ml-2
q-checkbox.text-smm.font-medium(v-model="data.results.checked" label="Без особенностей" size="36px")
.textarea.flex
base-input(
v-model="data.results.text",
type="textarea",
outlined,
resize="vertical",
:width="1176",
placeholder="Введите данные..."
)
.font-medium.text-smm(v-else) {{data.results?.text}}
</template>
<script>
import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
import BaseInput from "@/components/base/BaseInput.vue";
export default {
name: "DiseaseForm",
components: { MedicalFormWrapper, BaseInput },
props: {
data: Object,
fillInspection: Boolean,
inspection: Boolean,
},
data() {
return { change: false };
},
methods: {
openCard() {
this.change = true;
},
closeCard() {
this.change = false;
},
},
};
</script>
<style lang="sass" scoped>
.disease-body
background: var(--default-white)
border-radius: 4px
color: var(--font-dark-blue-color)
.q-checkbox :deep(.q-checkbox__bg)
border-radius: 4px
border: 1.5px solid var(--font-grey-color)
.textarea
box-sizing: border-box
min-height: 130px
</style>

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

@@ -44,6 +44,7 @@
<script>
import MedicalFormTag from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue";
import DataForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue";
import DiseaseForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DiseaseForm.vue";
import BaseButton from "@/components/base/BaseButton.vue";
import IndexForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/IndexForm.vue";
import ThermometryForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ThermometryForm.vue";
@@ -54,6 +55,7 @@ export default {
components: {
MedicalFormTag,
DataForm,
DiseaseForm,
BaseButton,
IndexForm,
ThermometryForm,

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

@@ -6,6 +6,9 @@ import {
ruleDateValue,
ruleOptionalFields,
} from "@/shared/utils/rulesInputs";
import pdfIcon from "@/assets/icons/pdf.svg";
import wordIcon from "@/assets/icons/word.svg";
import exelIcon from "@/assets/icons/exel.svg";
export const baseDataForm = [
{
@@ -670,6 +673,40 @@ export const protocolForms = [
component: "DataForm",
key: "data",
state: "data",
results: {
title: "Данные обследования",
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: 8, label: "Кровоточивость языка" },
],
files: [
{ name: "Документы", data: [] },
{ name: "Сканы", data: [] },
],
},
selected: [],
iconDictionary: {
doc: wordIcon,
docx: wordIcon,
xls: exelIcon,
xlsx: exelIcon,
odt: wordIcon,
pdf: pdfIcon,
},
},
{
title: "Термометрия (по показаниям)",
@@ -714,4 +751,14 @@ export const protocolForms = [
],
},
},
{
title: "Развитие настоящего заболевания",
component: "DiseaseForm",
key: "disease",
state: "disease",
results: {
checked: false,
text: "",
},
},
];

1
tailwind.config.js
View File

@@ -34,6 +34,7 @@ module.exports = {
"7px": "7px",
"10px": "10px",
"11px": "11px",
"17px": "17px",
"30px": "30px",
"25px": "25px",
43: "43px",