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:
DwCay
2023-05-31 17:47:29 +03:00
parent 89adf5489f
commit c7aedc53d6
8 changed files with 205 additions and 607 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue Normal file
View File

@@ -0,0 +1,66 @@
<template lang="pug">
.flex.p-1
.wrapper-tooth.felx.h-250px.w-28.flex-col.rounded.justify-around.items-center
span.text-base.font-medium {{cellConfig.tooth_number}}
.flex.flex-col.pt-2.pl-4.pr-1.gap-y-2.w-350px.h-250px
span.font-bold.text-m Состояние зуба
.options-wrapper.flex.flex-col.h-250px.overflow-y-auto.gap-y-1
q-expansion-item.expansion-item.rounded.mr-2(
v-for="(kind, key) in formConfig.conditions",
:label="kind.label"
)
.flex.flex-col.pl-4(v-if="!kind?.partsTooth")
.flex.gap-11px.items.center.h-10.w-full(
v-for="option in kind.options"
)
q-radio(
v-model="data[key]",
:val="option.value"
dense,
checked-icon="check_box",
unchecked-icon="check_box_outline_blank",
)
.condition-label.flex.gap-x-2.h-full.w-full.items-center.text-smm
span.font-semibold {{ option.value }}
span.font-medium {{ option.label }}
.flex.flex-col.pl-4(v-else)
.flex.flex-col.gap-y-3
.flex.flex-col(v-for="(part, partKey) in kind?.partsTooth")
span.option-label.text-smm.font-medium {{part.label}}
q-option-group(
v-model="data[key][partKey]",
:options="kind.options",
size="30px",
dense,
type="checkbox",
)
template(v-slot:label="opt")
.condition-label.flex.gap-x-2.h-10.w-full.items-center.text-smm
span.font-semibold {{ opt.value }}
span.font-medium {{ opt.label }}
</template>
<script>
export default {
name: "DentalConditionForm",
props: {
data: Object,
cellConfig: Object,
formConfig: Object,
},
};
</script>
<style lang="sass" scoped>
.wrapper-tooth
border: 1px solid var(--border-light-grey-color)
.expansion-item
border: 1px solid var(--bg-light-grey)
.option-label
color: var(--font-grey-color)
.condition-label
border-bottom: 1px solid var(--bg-light-grey)
.options-wrapper
&::-webkit-scrollbar
width: 4px
</style>

23
src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
View File

@@ -43,19 +43,19 @@
v-model="isOpenConditionsInfo",
:general="value[rowKey].general",
:conditions="getFiiledConditions(value[rowKey])"
:config="toothConfig.conditions"
:config="conditionConfig"
)
span.text-smm.font-medium(
v-if="rowKey === 'tooth_mobility' && !isEditCondition",
:class="{'cell-info': isEdit}"
) {{ toothConfig.mobility.find((el) => el.id === value[rowKey])?.label || null }}
) {{ mobilityConfig.find((el) => el.id === value[rowKey])?.label || null }}
q-menu(
v-if="isEdit",
v-model="isEditCondition",
)
.flex.flex-col.p-4(v-if="rowKey === 'tooth_mobility'")
.mobility-item.flex.justify-between.items-center.py-7px.pl-7px.pr-15px.rounded.w-143px.cursor-pointer(
v-for="mobility in toothConfig.mobility",
v-for="mobility in mobilityConfig",
@click="()=>chooseMobility(mobility.id)"
)
span.text-smm.font-medium {{ `${mobility.label} степень` }}
@@ -63,21 +63,34 @@
name="check",
size="12px"
)
dental-condition-form(
v-if="rowKey === 'dental_condition'",
:data="value.dental_condition"
:cell-config="config",
:form-config="formConfig"
)
</template>
<script>
import DentalConditionForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue";
import ToothLowSvg from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothLowSvg.vue";
import ToothConditionsInfo from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue";
import { getFiiledConditions } from "@/pages/newMedicalCard/utils/gettersObjects";
import {
toothConditions,
toothMobility,
} from "@/pages/newMedicalCard/utils/medicalConfig";
import { v_model } from "@/shared/mixins/v-model";
export default {
name: "ToothFormulaCell",
components: { ToothLowSvg, ToothConditionsInfo },
components: { ToothLowSvg, ToothConditionsInfo, DentalConditionForm },
data() {
return {
isEditCondition: false,
isOpenConditionsInfo: false,
mobilityConfig: toothMobility,
conditionConfig: toothConditions,
getFiiledConditions,
};
},
@@ -87,7 +100,7 @@ export default {
jawPosition: String,
rowKey: String,
config: Object,
toothConfig: Object,
formConfig: Object,
},
watch: {
isEdit() {

2
src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue
View File

@@ -20,7 +20,7 @@
:key="`table_${config.name}`",
:config="config",
:data="protocol[data.state]",
:toothConfig="data.toothConfig",
:form-config="data.conditionsForm",
:is-edit="isEdit"
)
template(v-slot:right-corner)

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

@@ -16,7 +16,7 @@
:jaw-position="config.name",
:row-key="row.key",
:config="cell",
:tooth-config="toothConfig"
:form-config="formConfig"
)
</template>
@@ -36,11 +36,11 @@ export default {
};
},
props: {
toothConfig: Object,
config: Object,
data: Object,
modelValue: Object,
isEdit: Boolean,
formConfig: Object,
},
emits: ["update:modelValue"],
};

8
src/pages/newMedicalCard/utils/gettersObjects.js
View File

@@ -57,8 +57,12 @@ export function getConfidantObject(data) {
export const getFiiledConditions = (condition) => {
let filledConditions = [
...Object.values(condition.crown).filter((val) => val),
...Object.values(condition.root).filter((val) => val),
...Object.values(condition.crown)
.filter((val) => val.length)
.flat(),
...Object.values(condition.root)
.filter((val) => val.length)
.flat(),
];
return filledConditions;
};

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

@@ -565,6 +565,27 @@ export const mapEventStatus = {
},
};
export const toothConditions = {
К: "Кариес",
П: "Пульпит",
Пт: "Периодонтит",
Д: "Дефект",
Пл: "Пломба",
ИК: "Искусственная коронка",
ИЗ: "Искусственный зуб",
В: "Вкладка",
И: "Имплантат",
КЗ: "Корень зуба",
О: "Отсутствующий зуб",
};
export const toothMobility = [
{ id: 1, label: "I" },
{ id: 2, label: "II" },
{ id: 3, label: "III" },
{ id: 4, label: "IV" },
];
export const protocolForms = [
{
title: "Жалобы",
@@ -933,26 +954,67 @@ export const protocolForms = [
component: "ToothFormulaForm",
key: "toothFormula",
state: "toothFormula",
toothConfig: {
conditionsForm: {
conditions: {
К: "Кариес",
П: "Пульпит",
Пт: "Периодонтит",
Д: "Дефект",
Пл: "Пломба",
ИК: "Искусственная коронка",
ИЗ: "Искусственный зуб",
В: "Вкладка",
И: "Имплантат",
КЗ: "Корень зуба",
О: "Отсутствующий зуб",
general: {
options: (() => {
let arrayOptions = ["ИЗ", "И", "О", "П"];
return arrayOptions.map((item) => ({
value: item,
label: toothConditions[item],
}));
})(),
label: "Общее",
},
crown: {
options: (() => {
let arrayOptions = ["К", "П", "Д", "Пл"];
return arrayOptions.map((item) => ({
value: item,
label: toothConditions[item],
}));
})(),
label: "Коронка",
partsTooth: {
central: {
label: "Центральная часть",
},
upper: {
label: "Верхняя часть",
},
lower: {
label: "Нижняя часть",
},
left: {
label: "Левая часть",
},
right: {
label: "Правая часть",
},
},
},
root: {
options: (() => {
let arrayOptions = ["К", "П", "Д", "Пл"];
return arrayOptions.map((item) => ({
value: item,
label: toothConditions[item],
}));
})(),
label: "Корень",
partsTooth: {
central: {
label: "Центральная часть",
},
left: {
label: "Левая часть",
},
right: {
label: "Правая часть",
},
},
},
},
mobility: [
{ id: 1, label: "I" },
{ id: 2, label: "II" },
{ id: 3, label: "III" },
{ id: 4, label: "IV" },
],
},
formulaConfig: [
{

608
src/store/modules/toothFormula.js
View File

@@ -1,583 +1,33 @@
const stateInit = {
lacticBite: false,
formula: {
18: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
formula: (() => {
let initObj = {};
let arrayTooth = [
18, 17, 16, 15, 14, 13, 12, 11, 21, 22, 23, 24, 25, 26, 27, 28, 48, 47,
46, 45, 44, 43, 42, 41, 31, 32, 33, 34, 35, 36, 37, 38,
];
arrayTooth.forEach((number) => {
initObj[number] = {
dental_condition: {
general: null,
crown: {
central: [],
upper: [],
lower: [],
left: [],
right: [],
},
root: {
central: [],
left: [],
right: [],
},
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
17: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
16: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
15: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
14: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
13: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
12: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
11: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
21: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
22: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
23: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
24: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
25: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
26: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
27: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
28: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
48: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
47: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
46: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
45: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
44: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
43: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
42: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
41: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
31: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
32: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
33: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
34: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
35: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
36: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
37: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
38: {
dental_condition: {
general: null,
crown: {
central: null,
upper: null,
lower: null,
left: null,
right: null,
},
root: {
central: null,
left: null,
right: null,
},
},
tooth_mobility: null,
},
},
tooth_mobility: null,
};
});
return initObj;
})(),
};
const state = {
@@ -605,7 +55,7 @@ const state = {
general: "ИЗ",
crown: {
...stateInit.formula["11"].dental_condition.crown,
central: "К",
central: ["К"],
},
root: { ...stateInit.formula["11"].dental_condition.root },
},
@@ -639,7 +89,7 @@ const state = {
dental_condition: {
general: "ИЗ",
crown: { ...stateInit.formula["41"].dental_condition.crown },
root: { ...stateInit.formula["41"].dental_condition.root, left: "П" },
root: { ...stateInit.formula["41"].dental_condition.root, left: ["П"] },
},
tooth_mobility: null,
},