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-26 18:10:15 +03:00
parent 3521ea73f7
commit 364d2a776a
6 changed files with 395 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,41 +1,46 @@
<template lang="pug">
medical-form-wrapper(:title="data.title")
.flex.flex-col.gap-y-4
.flex.gap-x-7px.rounded.py-7px.px-3.w-fit(:style="{'backgroundColor': isEdit ? none: 'var(--bg-light-grey)'}")
.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",
dense,
checked-icon="check_box",
unchecked-icon="check_box_outline_blank",
:disable="!isEdit",
label="Молочный прикус",
:color="isEdit ? 'primary' : 'grey'"
)
.flex.flex-col
tooth-formula-table(v-for="config in data.formulaConfig", :config="config")
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(
size="12px",
:style="{'backgroundColor': viewToothFormula ? 'var(--bg-aqua-blue)' : none}",
:style="{'backgroundColor': viewToothFormula ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}",
@click="()=>{ viewToothFormula=true }",
)
img(:src="teeth")
q-btn.w-12.h-full.rounded(
size="12px",
:style="{'backgroundColor': !viewToothFormula ? 'var(--bg-aqua-blue)' : none}",
:style="{'backgroundColor': !viewToothFormula ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}",
@click="()=>{ viewToothFormula=false }",
)
img(:src="teeth_2")
</template>
<script>
import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
import ToothFormulaTable from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaTable.vue";
import teeth from "@/assets/icons/teeth.svg";
import teeth_2 from "@/assets/icons/teeth-2.svg";
import { mapState } from "vuex";
export default {
name: "ToothFormulaForm",
components: { MedicalFormWrapper },
components: { MedicalFormWrapper, ToothFormulaTable },
data() {
return {
teeth: teeth,
teeth,
teeth_2,
isEdit: false,
component: false,
viewToothFormula: true,
@@ -43,6 +48,7 @@ export default {
},
props: {
data: Object,
fillInspection: Boolean,
},
computed: {
...mapState({

55
src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaTable.vue Normal file
View File

@@ -0,0 +1,55 @@
<template lang="pug">
.table.flex.flex-col.w-full.box-border(
:class="{'rounded-t': config.name === 'upper', 'rounded-b': config.name === 'lower','border-botton-none': config.name === 'upper',}",
)
.row.flex.w-full(v-for="row in config.rowMap", :style="{'height': heightRow[row.key]}")
.cell.flex.justify-start.items-center.pl-4.h-full(:style="{'width': '20%', 'minWidth': '146px'}")
span.font-medium.text-smm.whitespace-nowrap(:style="{'color': 'var(--font-grey-color)'}") {{ row.label }}
.cell.flex.justify-center.items-center.h-full(
v-for="cell in config.columns",
:style="{'width': '5%'}"
)
.flex.flex-col.gap-y-5px.items-center(v-if="row.key === 'tooth_number'")
tooth-low-svg(
:type="cell.type",
:position="cell?.position",
:jaw="config.name"
)
span.font-medium.text-smm {{ cell.tooth_number }}
</template>
<script>
import ToothLowSvg from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothLowSvg.vue";
export default {
name: "ToothFormulaTable",
components: { ToothLowSvg },
data() {
return {
heightRow: {
tooth_mobility: "36px",
dental_condition: "64px",
tooth_number: "64px",
},
};
},
props: {
config: Object,
},
};
</script>
<style lang="sass" scoped>
.table
border: 1px solid var(--border-light-grey-color)
&.border-botton-none
border-bottom-width: 0
.row
border-bottom: 1px solid var(--border-light-grey-color)
&:last-child
border-bottom-width: 0
.cell
border-right: 1px solid var(--border-light-grey-color)
&:last-child
border-right-width: 0
</style>

81
src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothLowSvg.vue Normal file
View File

@@ -0,0 +1,81 @@
<template lang="pug">
svg.svg-wrapper(
:class="{'rotate-180': jaw === 'lower', 'scale-upper': scaleUpper, 'scale-lower': scaleLower}"
:width="getSize.width",
:height="getSize.height",
:viewBox="getSize.viewBox",
fill="none",
xmlns="http://www.w3.org/2000/svg",
)
path(
v-if="type === 'molars'",
fill-rule="evenodd",
clip-rule="evenodd",
d="M5.3156 0.873357C5.64865 0.654405 6.09478 0.734196 6.33129 1.05502C6.5634 1.36986 6.61683 1.76695 6.63582 2.06737C6.65666 2.39728 6.64206 2.79354 6.61843 3.22301C6.60833 3.40659 6.59632 3.60063 6.58364 3.80557C6.53548 4.58358 6.4776 5.5187 6.4776 6.63519C6.4776 7.93534 6.8546 8.25058 7.02124 8.34527C7.24038 8.46978 7.46319 8.46415 7.75825 8.45669C7.83369 8.45479 7.91387 8.45276 7.99991 8.45276C8.08596 8.45276 8.16613 8.45479 8.24158 8.45669C8.53664 8.46415 8.75945 8.46978 8.97858 8.34527C9.14523 8.25058 9.52222 7.93534 9.52222 6.63519C9.52222 5.51869 9.46434 4.58357 9.41619 3.80556C9.4035 3.60063 9.39149 3.40659 9.38139 3.22301C9.35777 2.79354 9.34316 2.39728 9.36401 2.06737C9.38299 1.76695 9.43643 1.36986 9.66854 1.05502C9.90505 0.734196 10.3512 0.654405 10.6842 0.873357C13.9701 3.03353 15.0108 5.35469 14.9269 7.49897C14.8596 9.21966 14.0601 10.7019 13.4832 11.6674C14.4731 12.762 15.522 14.3672 15.7176 16.0486C15.8327 17.0387 15.6515 18.0685 14.9782 18.9982C14.3143 19.915 13.2242 20.6626 11.6542 21.2085C11.3093 21.3284 10.9281 21.1825 10.7515 20.8628C10.7575 20.8737 10.7571 20.8733 10.7474 20.8641C10.7145 20.8328 10.5738 20.6989 10.2107 20.5562C9.77152 20.3835 9.06331 20.223 7.99991 20.223C6.93651 20.223 6.2283 20.3835 5.78913 20.5562C5.42601 20.6989 5.28536 20.8328 5.2524 20.8641C5.24271 20.8733 5.24233 20.8737 5.24833 20.8628C5.07169 21.1825 4.69053 21.3284 4.34562 21.2085C2.77567 20.6626 1.68551 19.915 1.02158 18.9982C0.348324 18.0685 0.167086 17.0387 0.282245 16.0486C0.477787 14.3672 1.5267 12.762 2.51667 11.6674C1.93973 10.7019 1.14024 9.21966 1.07293 7.49897C0.989053 5.35469 2.02976 3.03353 5.3156 0.873357ZM4.01643 11.2481C4.0441 11.2938 4.0713 11.3387 4.09793 11.3829C4.27708 11.6798 4.22929 12.0608 3.98237 12.3043C2.98928 13.2837 1.93729 14.8023 1.7722 16.2218C1.69327 16.9006 1.81737 17.5397 2.23648 18.1184C2.61689 18.6437 3.28172 19.1759 4.39482 19.6255C4.624 19.4474 4.9112 19.2896 5.24037 19.1602C5.88981 18.9049 6.791 18.723 7.99991 18.723C9.20882 18.723 10.11 18.9049 10.7595 19.1602C11.0886 19.2896 11.3758 19.4474 11.605 19.6255C12.7181 19.1759 13.3829 18.6437 13.7633 18.1184C14.1825 17.5397 14.3066 16.9006 14.2276 16.2218C14.0625 14.8023 13.0106 13.2837 12.0175 12.3043C11.7705 12.0608 11.7227 11.6798 11.9019 11.3829C11.9285 11.3387 11.9557 11.2938 11.9834 11.2481C12.5696 10.2798 13.3686 8.95997 13.428 7.44033C13.4792 6.13349 12.9775 4.53598 10.8648 2.85165C10.8687 2.94173 10.8735 3.03792 10.8791 3.14061C10.8885 3.31091 10.9 3.4956 10.9123 3.69406C10.9606 4.47424 11.0222 5.46722 11.0222 6.63519C11.0222 8.21072 10.5471 9.17926 9.71961 9.64944C9.08467 10.0102 8.34347 9.97033 8.07866 9.95608C8.04362 9.9542 8.01692 9.95276 7.99991 9.95276C7.9829 9.95276 7.9562 9.9542 7.92116 9.95608C7.65635 9.97033 6.91516 10.0102 6.28021 9.64944C5.45272 9.17926 4.9776 8.21072 4.9776 6.63519C4.9776 5.46721 5.03918 4.47423 5.08757 3.69405C5.09988 3.49559 5.11133 3.31091 5.1207 3.14061C5.12635 3.03792 5.13116 2.94173 5.13503 2.85165C3.02236 4.53598 2.52067 6.13349 2.57179 7.44034C2.63123 8.95997 3.43021 10.2798 4.01643 11.2481Z",
fill="#252850"
)
path(
v-if="type === 'incisors'",
fill-rule="evenodd",
clip-rule="evenodd",
d="M5.25221 0.75C5.54103 0.75 5.80419 0.91585 5.92881 1.17641C6.86098 3.1255 8.17766 6.34136 9.11204 9.68568C10.0264 12.9585 10.6194 16.5043 9.99893 19.1036C9.95739 19.7568 9.52184 20.3141 8.7805 20.6745C8.03085 21.039 6.89784 21.25 5.25258 21.25C3.6073 21.25 2.47415 21.039 1.72437 20.6745C0.983027 20.3142 0.547051 19.7571 0.505479 19.1036C-0.115016 16.5043 0.477976 12.9585 1.39237 9.68568C2.32675 6.34136 3.64343 3.1255 4.57561 1.17641C4.70022 0.91585 4.96338 0.75 5.25221 0.75ZM2.83704 10.0893C1.91898 13.3752 1.43134 16.6242 1.97981 18.8181C1.9947 18.8776 2.00222 18.9388 2.00221 19.0001V19.0002C2.0022 19.0086 2.0022 19.0312 2.03371 19.0745C2.06972 19.124 2.16207 19.2195 2.3801 19.3255C2.83046 19.5444 3.69756 19.75 5.25258 19.75C6.80762 19.75 7.67448 19.5444 8.12461 19.3255C8.3425 19.2196 8.43474 19.1241 8.4707 19.0746C8.5022 19.0313 8.50221 19.0087 8.50221 19.0001C8.5022 18.9388 8.50972 18.8776 8.5246 18.8181C9.07307 16.6242 8.58543 13.3752 7.66737 10.0893C6.96975 7.59239 6.0498 5.16239 5.25221 3.31606C4.45462 5.16239 3.53467 7.59239 2.83704 10.0893Z",
fill="#252850"
)
path(
v-if="type === 'fangs' || type === 'pre-molars'",
fill-rule="evenodd",
clip-rule="evenodd",
d="M7.1311 0.696607C7.42418 0.779953 7.63772 1.03234 7.67136 1.33518C8.15182 5.65928 9.0961 8.33679 9.92866 10.5281C9.99269 10.6966 10.0564 10.863 10.1196 11.0279C10.8765 13.0042 11.5441 14.7474 11.5441 17.0491C11.5441 17.4273 11.4149 17.7804 11.2521 18.0817C11.0867 18.3875 10.8624 18.6845 10.6139 18.9633C10.1173 19.5205 9.46596 20.0697 8.81361 20.5483C8.15787 21.0295 7.47646 21.4573 6.90337 21.7681C6.61755 21.9231 6.34857 22.0545 6.11646 22.1495C5.92125 22.2293 5.64269 22.3313 5.38569 22.3313C5.20855 22.3313 5.05337 22.2836 4.9465 22.2425C4.83138 22.1982 4.719 22.1405 4.61471 22.0799C4.40613 21.9586 4.17934 21.7959 3.95072 21.6142C3.49085 21.2486 2.96637 20.7601 2.47305 20.2438C1.98024 19.728 1.50087 19.166 1.139 18.6494C0.958523 18.3918 0.797061 18.131 0.677874 17.8826C0.566882 17.6512 0.455078 17.3554 0.455078 17.0491C0.455078 8.46103 4.5059 3.28988 6.33566 0.955346C6.52363 0.715523 6.83801 0.613261 7.1311 0.696607ZM6.42186 3.32159C4.52242 5.95285 1.95508 10.4036 1.95508 17.0491C1.95508 17.0431 1.95492 17.0399 1.95519 17.0399C1.95634 17.0397 1.96549 17.0987 2.03029 17.2338C2.10181 17.3828 2.21445 17.5702 2.36755 17.7888C2.67286 18.2246 3.09862 18.7272 3.55761 19.2076C4.01609 19.6875 4.49009 20.1268 4.8841 20.44C5.08242 20.5976 5.24642 20.712 5.36858 20.7831C5.38706 20.7938 5.40343 20.8029 5.41774 20.8105C5.44902 20.7999 5.49211 20.7842 5.54855 20.7611C5.71431 20.6933 5.93204 20.5885 6.18826 20.4495C6.69926 20.1724 7.32326 19.7814 7.92626 19.339C8.53265 18.894 9.09336 18.4149 9.49412 17.9653C9.69432 17.7406 9.84003 17.5395 9.93253 17.3684C10.0275 17.1927 10.0441 17.09 10.0441 17.0491C10.0441 15.0345 9.47242 13.538 8.70246 11.5224C8.64485 11.3716 8.58613 11.2179 8.52646 11.0608C7.7919 9.12748 6.95926 6.78633 6.42186 3.32159ZM5.49236 20.845C5.49241 20.8451 5.49087 20.8446 5.48765 20.8434C5.49071 20.8443 5.49231 20.8449 5.49236 20.845Z",
fill="#252850"
)
</template>
<script>
export default {
name: "ToothLowSvg",
props: {
type: String,
position: String,
jaw: String,
},
computed: {
getSize() {
let size = {
width: "12",
height: "23",
viewBox: "0 0 12 23",
};
if (this.type === "molars") {
size.width = "16";
size.height = "22";
size.viewBox = "0 0 16 22";
} else if (this.type === "incisors") {
size.width = "11";
size.height = "22";
size.viewBox = "0 0 11 22";
}
return size;
},
scaleUpper() {
if (this.position === "right" && this.jaw === "upper") {
return true;
}
return false;
},
scaleLower() {
if (this.position === "left" && this.jaw === "lower") {
return true;
}
return false;
},
},
};
</script>
<style lang="sass" scoped>
.svg-wrapper
&.scale-upper
transform: scale(-1,1)
&.scale-lower
transform: scale(1,-1)
</style>

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

@@ -41,7 +41,7 @@ import DiseaseForm from "@/pages/newMedicalCard/components/InitialInspectionProt
import BaseButton from "@/components/base/BaseButton.vue";
import IndexForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/IndexForm.vue";
import MainFactorsForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MainFactorsForm.vue";
import ToothFormulaForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormulaForm.vue";
import ToothFormulaForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue";
import { protocolForms } from "@/pages/newMedicalCard/utils/medicalConfig.js";
export default {
name: "MedicalProtocolsInspection",

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

@@ -933,6 +933,250 @@ export const protocolForms = [
component: "ToothFormulaForm",
key: "toothFormula",
state: "toothFormula",
formulaConfig: [
{
name: "upper",
rowMap: [
{
label: "Подвижность",
key: "tooth_mobility",
},
{
label: "Cостояние зубов",
key: "dental_condition",
},
{
label: "Верхняя челюсть",
key: "tooth_number",
},
],
columns: [
{
type: "molars",
tooth_number: 18,
dental_condition: "",
tooth_mobility: "",
},
{
type: "molars",
tooth_number: 17,
dental_condition: "",
tooth_mobility: "",
},
{
type: "molars",
tooth_number: 16,
dental_condition: "",
tooth_mobility: "",
},
{
position: "left",
type: "pre-molars",
tooth_number: 15,
dental_condition: "",
tooth_mobility: "",
},
{
position: "left",
type: "pre-molars",
tooth_number: 14,
dental_condition: "",
tooth_mobility: "",
},
{
position: "left",
type: "fangs",
tooth_number: 13,
dental_condition: "",
tooth_mobility: "",
},
{
type: "incisors",
tooth_number: 12,
dental_condition: "",
tooth_mobility: "",
},
{
type: "incisors",
tooth_number: 11,
dental_condition: "",
tooth_mobility: "",
},
{
type: "incisors",
tooth_number: 21,
dental_condition: "",
tooth_mobility: "",
},
{
type: "incisors",
tooth_number: 22,
dental_condition: "",
tooth_mobility: "",
},
{
position: "right",
type: "fangs",
tooth_number: 23,
dental_condition: "",
tooth_mobility: "",
},
{
position: "right",
type: "pre-molars",
tooth_number: 24,
dental_condition: "",
tooth_mobility: "",
},
{
position: "right",
type: "pre-molars",
tooth_number: 25,
dental_condition: "",
tooth_mobility: "",
},
{
type: "molars",
tooth_number: 26,
dental_condition: "",
tooth_mobility: "",
},
{
type: "molars",
tooth_number: 27,
dental_condition: "",
tooth_mobility: "",
},
{
type: "molars",
tooth_number: 28,
dental_condition: "",
tooth_mobility: "",
},
],
},
{
name: "lower",
rowMap: [
{
label: "Нижняя челюсть",
key: "tooth_number",
},
{
label: "Cостояние зубов",
key: "dental_condition",
},
{
label: "Подвижность",
key: "tooth_mobility",
},
],
columns: [
{
type: "molars",
tooth_number: 48,
dental_condition: "",
tooth_mobility: "",
},
{
type: "molars",
tooth_number: 47,
dental_condition: "",
tooth_mobility: "",
},
{
type: "molars",
tooth_number: 46,
dental_condition: "",
tooth_mobility: "",
},
{
position: "left",
type: "pre-molars",
tooth_number: 45,
dental_condition: "",
tooth_mobility: "",
},
{
position: "left",
type: "pre-molars",
tooth_number: 44,
dental_condition: "",
tooth_mobility: "",
},
{
position: "left",
type: "fangs",
tooth_number: 43,
dental_condition: "",
tooth_mobility: "",
},
{
type: "incisors",
tooth_number: 42,
dental_condition: "",
tooth_mobility: "",
},
{
type: "incisors",
tooth_number: 41,
dental_condition: "",
tooth_mobility: "",
},
{
type: "incisors",
tooth_number: 31,
dental_condition: "",
tooth_mobility: "",
},
{
type: "incisors",
tooth_number: 32,
dental_condition: "",
tooth_mobility: "",
},
{
position: "right",
type: "fangs",
tooth_number: 33,
dental_condition: "",
tooth_mobility: "",
},
{
position: "right",
type: "pre-molars",
tooth_number: 34,
dental_condition: "",
tooth_mobility: "",
},
{
position: "right",
type: "pre-molars",
tooth_number: 35,
dental_condition: "",
tooth_mobility: "",
},
{
type: "molars",
tooth_number: 36,
dental_condition: "",
tooth_mobility: "",
},
{
type: "molars",
tooth_number: 37,
dental_condition: "",
tooth_mobility: "",
},
{
type: "molars",
tooth_number: 38,
dental_condition: "",
tooth_mobility: "",
},
],
},
],
},
{
title: "План обследования",