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-06-27 17:54:18 +03:00
parent e032159e7f
commit 9bafd0f9b5
6 changed files with 122 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,13 +11,13 @@
.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-wrap.flex.gap-x-1.gap-y-1
.tag.flex.items-center.px-3.font-medium.text-smm(
:class="{'pointer': fillInspection || change}"
v-for="tag in data.results.tags", :key="tag.id"
) {{tag.label}}
v-for="tag in protocolData[data.state].complaints", :key="tag.id"
) {{ tag }}
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")
template(v-if="!(change || fillInspection)", v-for="file in protocolData[data.state].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
@@ -50,21 +50,21 @@
padding="0"
)
.field.flex.flex-col.overflow-y-scroll
.checkbox.flex.flex-col(v-for="complaint in textSorting(data.results.complaints)")
.checkbox.flex.flex-col(v-for="complaint in textSorting(data.results.tags)")
.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")
.line.flex.gap-x-4.h-9.items-center(v-for="name in complaint.array")
q-checkbox(
dense,
v-model="selected",
:val="name?.label",
v-model="protocolData[data.state].complaints",
:val="name",
:style="{border: 'none', width: '16px', height: '16px'}"
)
.name.flex.items-center.font-medium.text-smm {{ name?.label }}
.name.flex.items-center.font-medium.text-smm {{ name }}
.flex.h-10.w-10.absolute.right-4.bottom-4
q-btn(color="primary", dense, padding="4px 12px")
q-icon(name="app:icon-plus", size="17px")
.flex.gap-x-20.w-full(v-if="change || fillInspection")
.flex.flex-col.gap-y-3.w-full(v-for="file in data.results.files")
.flex.flex-col.gap-y-3.w-full(v-for="file in protocolData[data.state].files")
.title.text-smm.font-semibold {{file.name}}
.download.flex.relative.w-full
base-input.w-full(
@@ -99,6 +99,7 @@
import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
import BaseButton from "@/components/base/BaseButton.vue";
import BaseInput from "@/components/base/BaseInput.vue";
import { mapState } from "vuex";
export default {
name: "DataForm",
@@ -112,9 +113,13 @@ export default {
data() {
return {
change: false,
selected: [],
};
},
computed: {
...mapState({
protocolData: (state) => state.medical.protocolData,
}),
},
methods: {
checkedName(e) {
return e === "Документы" ? true : false;
@@ -123,19 +128,21 @@ export default {
return name === "Документы" ? this.addNewDoc(e) : this.addNewScan(e);
},
textSorting(arr) {
let srt = [];
let sortArr = [];
this.abc.forEach((letter) => {
arr.forEach((str) => {
let finded = srt.find((obj) => obj.sym === letter);
if (str.label[0] === letter) {
let finded = sortArr.find((obj) => obj.sym === letter);
if (str[0] === letter) {
if (!finded) {
srt.push({ sym: letter, array: [{ label: str.label }] });
} else if (finded.sym === letter)
finded.array.push({ label: str.label });
sortArr.push({
sym: letter,
array: [str],
});
} else if (finded.sym === letter) finded.array.push(str);
}
});
});
return srt;
return sortArr;
},
openCard() {
this.change = true;
@@ -150,8 +157,12 @@ export default {
doc[0]?.name.substr(doc[0].name.lastIndexOf(".") + 1)
]
)
this.data.results.files.find((e) => e.name === "Документы").data = [
...this.data.results.files.find((e) => e.name === "Документы").data,
this.protocolData[this.data.state].files.find(
(e) => e.name === "Документы"
).data = [
...this.protocolData[this.data.state].files.find(
(e) => e.name === "Документы"
).data,
...arr,
];
},
@@ -161,7 +172,7 @@ export default {
[...arr].forEach((file) => {
const reader = new FileReader();
reader.onload = (e) => {
this.data.results.files
this.protocolData[this.data.state].files
.find((e) => e.name === "Сканы")
?.data.push({
file: e.target.result,
@@ -172,17 +183,6 @@ export default {
reader.readAsDataURL(file);
});
},
checkSelected() {
this.data.results.tags.forEach((com) => {
this.data.results.complaints.forEach((tag) => {
if (
tag.label === com.label &&
!this.selected.find((e) => e.label === com.label)
)
this.selected.push(tag.label);
});
});
},
},
watch: {
fillInspection: {
@@ -190,14 +190,13 @@ export default {
handler(newVal) {
if (newVal) {
this.change = false;
this.data.results.files.forEach((e) => (e.data = []));
this.protocolData[this.data.state].files.forEach(
(e) => (e.data = [])
);
}
},
},
},
mounted() {
this.checkSelected();
},
};
</script>

45
src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DiseaseForm.vue
View File

@@ -10,16 +10,20 @@
.disease-body.flex
.flex.flex-col.gap-y-17px.w-full(v-if="fillInspection || change")
.flex.-ml-2(v-if="data.key === 'disease'")
q-checkbox.text-smm.font-medium(v-model="data.results.checked" label="Без особенностей" size="36px")
q-checkbox.text-smm.font-medium(
v-model="protocolData[data.state].checked",
label="Без особенностей",
size="36px"
)
.textarea.flex.w-full
base-input.w-full(
v-model="modelValue",
v-model="protocolData[data.state].text",
type="textarea",
outlined,
resize="vertical",
placeholder="Введите данные..."
)
.font-medium.text-smm(v-else) {{displayedValue}}
.font-medium.text-smm(v-else) {{protocolData[data.state]?.text}}
</template>
<script>
@@ -35,29 +39,12 @@ export default {
fillInspection: Boolean,
},
data() {
return { change: false, modelValue: null };
return { change: false };
},
computed: {
...mapState({
protocolData: (state) => state.medical.protocolData,
}),
state() {
return this.protocolData[this.data.state];
},
findedListItem() {
if (this.data.results?.text && this.modelValue)
return this.data.results?.text === this.modelValue;
return null;
},
reference() {
if (this.findedListItem && this.findedListItem?.text)
return this.findedListItem?.text;
return this.data.results?.text;
},
displayedValue() {
if (this.findedListItem?.text) return this.findedListItem?.text;
return this.modelValue;
},
},
methods: {
openCard() {
@@ -68,29 +55,15 @@ export default {
},
},
watch: {
state: {
immediate: true,
handler(value) {
if (!this.fillInspection) this.modelValue = value;
},
},
fillInspection: {
immediate: true,
handler(newVal) {
if (newVal) {
this.change = false;
this.modelValue = null;
} else {
this.modelValue = this.state;
this.protocolData[this.data.state].text = null;
}
},
},
modelValue: {
immediate: true,
handler(value) {
this.protocolData[this.data.state] = value;
},
},
},
};
</script>

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

@@ -9,7 +9,7 @@
.protocol-body.flex.flex-col
.flex.gap-x-4(:style="{height: change || fillInspection ? '300px' : ''}")
.flex.flex-col.gap-y-1.overflow-y-auto(:class="{'open-textarea': change || fillInspection}")
.tag-wrap.flex.gap-x-1.gap-y-1(v-if="!fillInspection")
.tag-wrap.flex.gap-x-1.gap-y-1
.tag.flex.items-center.px-3.text-smm(
v-for="tag in protocolData[data.state]",
:key="tag.id"
@@ -39,7 +39,7 @@
.field.flex.flex-col.overflow-y-scroll(v-if="data.results.tags")
.checkbox.flex.flex-col(v-for="complaint in textSorting(data.results.tags)")
.letter.flex.items-center.font-bold.justify-center {{ complaint.sym }}
.line.flex.gap-x-4.h-9.items-center(:key="name.id", v-for="name in complaint.array")
.line.flex.gap-x-4.h-9.items-center(v-for="name in complaint.array")
q-checkbox(
dense,
v-model="protocolData[data.state]",

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

@@ -29,7 +29,7 @@
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-semibold.text-7xl {{ percent + "%" }}
.flex.font-medium.text-smm.w-20 заполнение осмотра
</template>
@@ -60,6 +60,7 @@ export default {
props: { inspection: Boolean, fillInspection: Boolean },
data() {
return {
percent: 0,
protocolForms: protocolForms,
list: [
{
@@ -110,6 +111,41 @@ export default {
protocolDataGet: "getInitProtocol",
}),
},
methods: {
interestСalculation() {
const getTypeOf = (obj) => {
return {}.toString.call(obj).slice(8, -1);
};
let sum = 0;
for (let a in this.protocolData) {
if (
Array.isArray(this.protocolData[a]) &&
this.protocolData[a].length > 0
)
sum += 1;
if (this.protocolData[a] && typeof this.protocolData[a] === "string")
sum += 1;
if (
getTypeOf(this.protocolData[a]) === "Object" &&
Object.keys(this.protocolData[a]).length
)
sum += 1;
}
sum = Math.ceil(17 / sum);
this.percent = sum > 1 ? sum * 10 : sum * 100;
},
},
watch: {
protocolData: {
deep: true,
immediate: true,
handler() {
this.interestСalculation();
},
},
},
};
</script>