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-29 18:09:01 +03:00
parent ff6678af09
commit e11a628c78
8 changed files with 808 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue Normal file
View File

@@ -0,0 +1,27 @@
<template lang="pug">
q-menu(
v-model="modelValue",
)
.flex.flex-col.p-4.gap-15px.text-smm.font-medium
.general.w-full.flex.justify-start.pb-15px
span.opacity-60(:style="{'color': 'var(--font-dark-blue-color)'}") {{`${general} – ${config[general]}`}}
span(v-for="condition in conditions") {{`${condition} – ${config[condition]}`}}
</template>
<script>
export default {
name: "ToothConditionsInfo",
props: {
config: Object,
general: String,
conditions: Array,
modelValue: Boolean,
},
emits: ["update:modelValue"],
};
</script>
<style lang="sass" scoped>
.general
border-bottom: 1px solid var(--border-light-grey-color)
</style>

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

@@ -1,16 +1,25 @@
<template lang="pug">
medical-form-wrapper(:title="data.title")
medical-form-wrapper(
:title="data.title",
:is-edit="isEdit",
:open-edit="openEdit",
:cancel="cancelEdit",
)
.flex.flex-col.gap-y-4
.flex.gap-x-7px.rounded.py-7px.px-3.w-fit(:style="{'backgroundColor': isEdit ? 'var(--default-white)': 'var(--bg-light-grey)'}")
q-checkbox.font-medium.text-smm(
v-model="protocol[data.key].lacticBite",
v-model="protocol[data.state].lacticBite",
dense,
:disable="!isEdit",
label="Молочный прикус",
:color="isEdit ? 'primary' : 'grey'"
)
.flex.flex-col
tooth-formula-table(v-for="config in data.formulaConfig", :config="config")
tooth-formula-table(
v-for="config in data.formulaConfig",
:config="config", :data="protocol[data.state]",
:toothConfig="data.toothConfig"
)
template(v-slot:right-corner)
.flex.flex-toogle.h-10.p-1.rounded(:style="{'backgroundColor': 'var(--bg-light-grey)'}")
q-btn.w-12.h-full.rounded(
@@ -55,5 +64,13 @@ export default {
protocol: (state) => state.medical.protocolData,
}),
},
methods: {
openEdit() {
this.isEdit = true;
},
cancelEdit() {
this.isEdit = false;
},
},
};
</script>

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

@@ -11,21 +11,40 @@
)
.flex.flex-col.gap-y-5px.items-center(v-if="row.key === 'tooth_number'")
tooth-low-svg(
:opacity="data.formula[cell.tooth_number].dental_condition.general === 'О' ? 0.2 : 1"
:type="cell.type",
:position="cell?.position",
:jaw="config.name"
)
span.font-medium.text-smm {{ cell.tooth_number }}
.flex.flex-col.gap-y-1.items-center(v-if="row.key === 'dental_condition'")
span.text-smm.font-medium {{ data.formula[cell.tooth_number].dental_condition.general }}
.conditions.flex.justify-center.items-center.w-27px.h-6.rounded.cursor-pointer(
v-if="getFiiledConditions(data.formula[cell.tooth_number].dental_condition).length",
@click="()=>openConditionsInfo()"
)
span.text-xsx.font-medium {{`+${getFiiledConditions(data.formula[cell.tooth_number].dental_condition).length}`}}
tooth-conditions-info(
v-model="isOpenConditions",
:general="data.formula[cell.tooth_number].dental_condition.general",
:conditions="getFiiledConditions(data.formula[cell.tooth_number].dental_condition)"
:config="toothConfig.conditions"
)
span.text-smm.font-medium(v-if="row.key === 'tooth_mobility'") {{ toothConfig.mobility.find((el) => el.id === data.formula[cell.tooth_number].tooth_mobility)?.label || null }}
</template>
<script>
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";
export default {
name: "ToothFormulaTable",
components: { ToothLowSvg },
components: { ToothLowSvg, ToothConditionsInfo },
data() {
return {
isOpenConditions: false,
getFiiledConditions,
heightRow: {
tooth_mobility: "36px",
dental_condition: "64px",
@@ -34,7 +53,14 @@ export default {
};
},
props: {
toothConfig: Object,
config: Object,
data: Object,
},
methods: {
openConditionsInfo() {
this.isOpenConditions = true;
},
},
};
</script>
@@ -52,4 +78,10 @@ export default {
border-right: 1px solid var(--border-light-grey-color)
&:last-child
border-right-width: 0
.conditions
background-color: var(--bg-light-grey)
&:hover
background-color: var(--font-grey-color-0)
&.active
background-color: var(--btn-blue-color)
</style>

20
src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothLowSvg.vue
View File

@@ -4,7 +4,8 @@
:width="getSize.width",
:height="getSize.height",
:viewBox="getSize.viewBox",
fill="none",
:fill-opacity="opacity"
fill="#252850",
xmlns="http://www.w3.org/2000/svg",
)
path(
@@ -34,9 +35,22 @@
export default {
name: "ToothLowSvg",
props: {
opacity: {
type: Number,
default: 1,
},
type: {
type: String,
position: String,
jaw: String,
default: "molars",
},
position: {
type: String,
default: "left",
},
jaw: {
type: String,
default: "upper",
},
},
computed: {
getSize() {

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

@@ -54,3 +54,11 @@ export function getConfidantObject(data) {
};
}
}
export const getFiiledConditions = (condition) => {
let filledConditions = [
...Object.values(condition.crown).filter((val) => val),
...Object.values(condition.root).filter((val) => val),
];
return filledConditions;
};

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

@@ -933,6 +933,27 @@ export const protocolForms = [
component: "ToothFormulaForm",
key: "toothFormula",
state: "toothFormula",
toothConfig: {
conditions: {
К: "Кариес",
П: "Пульпит",
Пт: "Периодонтит",
Д: "Дефект",
Пл: "Пломба",
ИК: "Искусственная коронка",
ИЗ: "Искусственный зуб",
В: "Вкладка",
И: "Имплантат",
КЗ: "Корень зуба",
О: "Отсутствующий зуб",
},
mobility: [
{ id: 1, label: "I" },
{ id: 2, label: "II" },
{ id: 3, label: "III" },
{ id: 4, label: "IV" },
],
},
formulaConfig: [
{
name: "upper",
@@ -1074,103 +1095,103 @@ export const protocolForms = [
columns: [
{
type: "molars",
tooth_number: 48,
tooth_number: "48",
dental_condition: "",
tooth_mobility: "",
},
{
type: "molars",
tooth_number: 47,
tooth_number: "47",
dental_condition: "",
tooth_mobility: "",
},
{
type: "molars",
tooth_number: 46,
tooth_number: "46",
dental_condition: "",
tooth_mobility: "",
},
{
position: "left",
type: "pre-molars",
tooth_number: 45,
tooth_number: "45",
dental_condition: "",
tooth_mobility: "",
},
{
position: "left",
type: "pre-molars",
tooth_number: 44,
tooth_number: "44",
dental_condition: "",
tooth_mobility: "",
},
{
position: "left",
type: "fangs",
tooth_number: 43,
tooth_number: "43",
dental_condition: "",
tooth_mobility: "",
},
{
type: "incisors",
tooth_number: 42,
tooth_number: "42",
dental_condition: "",
tooth_mobility: "",
},
{
type: "incisors",
tooth_number: 41,
tooth_number: "41",
dental_condition: "",
tooth_mobility: "",
},
{
type: "incisors",
tooth_number: 31,
tooth_number: "31",
dental_condition: "",
tooth_mobility: "",
},
{
type: "incisors",
tooth_number: 32,
tooth_number: "32",
dental_condition: "",
tooth_mobility: "",
},
{
position: "right",
type: "fangs",
tooth_number: 33,
tooth_number: "33",
dental_condition: "",
tooth_mobility: "",
},
{
position: "right",
type: "pre-molars",
tooth_number: 34,
tooth_number: "34",
dental_condition: "",
tooth_mobility: "",
},
{
position: "right",
type: "pre-molars",
tooth_number: 35,
tooth_number: "35",
dental_condition: "",
tooth_mobility: "",
},
{
type: "molars",
tooth_number: 36,
tooth_number: "36",
dental_condition: "",
tooth_mobility: "",
},
{
type: "molars",
tooth_number: 37,
tooth_number: "37",
dental_condition: "",
tooth_mobility: "",
},
{
type: "molars",
tooth_number: 38,
tooth_number: "38",
dental_condition: "",
tooth_mobility: "",
},

7
src/store/modules/medicalCard.js
View File

@@ -1,6 +1,7 @@
import { fetchWrapper } from "@/shared/fetchWrapper";
import { genderOptions } from "@/pages/newMedicalCard/utils/medicalConfig";
import { getConfidantObject } from "@/pages/newMedicalCard/utils/gettersObjects";
import toothFormula from "@/store/modules/toothFormula";
const state = () => ({
medicalCard: {},
@@ -305,7 +306,8 @@ const getters = {
},
},
toothFormula: {
lacticBite: true,
lacticBite: toothFormula.state.lacticBite,
formula: toothFormula.state.formula,
},
};
},
@@ -334,7 +336,8 @@ const getters = {
},
disease: null,
toothFormula: {
lacticBite: false,
lacticBite: toothFormula.stateInit.lacticBite,
formula: toothFormula.stateInit.formula,
},
};
},

660
src/store/modules/toothFormula.js Normal file
View File

@@ -0,0 +1,660 @@
const stateInit = {
lacticBite: false,
formula: {
18: {
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,
},
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,
},
},
};
const state = {
lacticBite: true,
formula: {
...JSON.parse(JSON.stringify(stateInit.formula)),
13: {
dental_condition: {
general: "О",
crown: { ...stateInit.formula["13"].dental_condition.crown },
root: { ...stateInit.formula["13"].dental_condition.root },
},
tooth_mobility: 1,
},
12: {
dental_condition: {
general: "О",
crown: { ...stateInit.formula["12"].dental_condition.crown },
root: { ...stateInit.formula["12"].dental_condition.root },
},
tooth_mobility: null,
},
11: {
dental_condition: {
general: "ИЗ",
crown: {
...stateInit.formula["11"].dental_condition.crown,
central: "К",
},
root: { ...stateInit.formula["11"].dental_condition.root },
},
tooth_mobility: null,
},
25: {
dental_condition: {
general: "ИЗ",
crown: { ...stateInit.formula["25"].dental_condition.crown },
root: { ...stateInit.formula["25"].dental_condition.root },
},
tooth_mobility: 3,
},
43: {
dental_condition: {
general: "О",
crown: { ...stateInit.formula["43"].dental_condition.crown },
root: { ...stateInit.formula["43"].dental_condition.root },
},
tooth_mobility: 3,
},
42: {
dental_condition: {
general: "О",
crown: { ...stateInit.formula["42"].dental_condition.crown },
root: { ...stateInit.formula["42"].dental_condition.root },
},
tooth_mobility: null,
},
41: {
dental_condition: {
general: "ИЗ",
crown: { ...stateInit.formula["41"].dental_condition.crown },
root: { ...stateInit.formula["41"].dental_condition.root, left: "П" },
},
tooth_mobility: null,
},
35: {
dental_condition: {
general: "ИЗ",
crown: { ...stateInit.formula["35"].dental_condition.crown },
root: { ...stateInit.formula["35"].dental_condition.root },
},
tooth_mobility: null,
},
},
};
export default {
stateInit,
state,
};