admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'ASTRA-110' into 'master'

Browse Source 
[WIP] Добавил раскрытие опций при нажатии на часть зуба

See merge request andrusyakka/urban-couscous!416
This commit is contained in:
Aleksey Demin
2023-06-13 15:02:57 +00:00
parent d89f52b048 e92f591360
commit 1e195ee430
4 changed files with 66 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue
View File

@@ -3,26 +3,28 @@
.wrapper-tooth.flex.h-250px.w-28.flex-col.rounded.justify-around.items-center
detailed-tooth-svg(
part-tooth="general",
:click-part="clickPart",
:tooth-config="cellConfig",
jaw-position="upper",
:jaw-position="jawPosition",
:oversized="20",
:view="data.general === 'ИЗ' ? 'artificial': 'native'",
editable
)
.flex.items-center.justify-center(
:style="{'width': '35px', 'height': '35px'}"
detailed-tooth-svg(
part-tooth="crown",
:click-part="clickPart",
:oversized="10",
:view="data.general === 'ИЗ' ? 'artificial': 'native'",
editable
)
detailed-tooth-svg(
part-tooth="crown",
:view="data.general === 'ИЗ' ? 'artificial': 'native'",
editable
)
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 Состояние зуба
.scroll.flex.flex-col.h-250px.overflow-y-auto.gap-y-1.pb-14px
q-expansion-item.expansion-item.rounded.mr-2.w-318px(
v-for="(type, key) in formConfig.conditions",
:label="type.label"
v-model="isOpenExpansion[key]",
:label="type.label",
)
.general-expaction.flex.flex-col.pl-4(v-if="!type?.partsTooth")
.condition-item.flex.gap-11px.items-center.h-10.w-full(
@@ -89,6 +91,11 @@ export default {
return {
isOpenInfoSelected: false,
listSelected: [],
isOpenExpansion: {
general: false,
root: false,
crown: false,
},
getFilledConditions,
toothConditions,
};
@@ -97,8 +104,22 @@ export default {
data: Object,
cellConfig: Object,
formConfig: Object,
jawPosition: {
default: "upper",
type: String,
},
},
methods: {
clickPart(id) {
let arrayRefs = id.split("_");
Object.keys(this.isOpenExpansion).forEach((key) => {
if (key === arrayRefs[0]) {
this.isOpenExpansion[key] = true;
} else {
this.isOpenExpansion[key] = false;
}
});
},
updateConditions() {
let arraySelected = [...this.getFilledConditions(this.data)];
if (arraySelected.length) {

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

@@ -26,27 +26,37 @@
stroke="#252850"
)
path(
@click="(el) => clickPart(el.target.id)",
:id="editable && 'crown_bottom'",
:class="{'edit-part': editable}",
d="M29.5234 31.7754C29.802 32.0662 29.7555 32.5373 29.4182 32.7575C26.5287 34.6441 23.1246 36.0162 19.6995 35.9394C16.2673 35.8624 12.8886 34.7337 10.0788 32.7673C9.75567 32.5412 9.72375 32.0808 10.0001 31.7996L13.1122 28.6337C13.3445 28.3973 13.7156 28.3737 13.9901 28.5594C15.7771 29.7687 17.5777 30.0976 19.8296 30.1481C22.0882 30.1988 23.8151 29.7034 25.6461 28.5283C25.9184 28.3536 26.2784 28.3877 26.5021 28.6212L29.5234 31.7754Z",
fill="#D3D4DC"
)
path(
@click="(el) => clickPart(el.target.id)",
:id="editable && 'crown_top'",
:class="{'edit-part': editable}",
d="M10.02 7.83259C9.73773 7.54247 9.78271 7.06817 10.1218 6.84692C13.0102 4.96209 16.4123 3.59159 19.8354 3.66837C23.2653 3.74529 26.6418 4.87262 29.4506 6.83662C29.7757 7.06395 29.8058 7.52786 29.5252 7.80822L26.2828 11.048C26.0499 11.2806 25.6816 11.3026 25.4106 11.1157C23.6415 9.89566 21.9585 9.51017 19.7053 9.45964C17.4456 9.40896 15.8222 9.95753 14.0063 11.1421C13.737 11.3177 13.3792 11.2851 13.155 11.0547L10.02 7.83259Z",
fill="#D3D4DC"
)
path(
@click="(el) => clickPart(el.target.id)",
:id="editable && 'crown_right'",
:class="{'edit-part': editable}",
d="M31.759 10.0672C32.0484 9.7804 32.5272 9.82331 32.75 10.1644C34.6342 13.049 36.0037 16.4456 35.9269 19.8633C35.8499 23.2903 34.7217 26.6639 32.756 29.4704C32.5285 29.7952 32.0642 29.8253 31.7836 29.5449L28.5411 26.3052C28.3083 26.0725 28.2862 25.7045 28.4733 25.4337C29.6944 23.6662 30.0802 21.9845 30.1308 19.7333C30.1815 17.4738 29.6311 15.9223 28.4438 14.1173C28.2686 13.8509 28.2992 13.4965 28.5257 13.2719L31.759 10.0672Z",
fill="#D3D4DC"
)
path(
@click="(el) => clickPart(el.target.id)",
:id="editable && 'crown_left'",
:class="{'edit-part': editable}",
d="M7.84119 10.0499C7.55039 9.77014 7.07763 9.81602 6.85683 10.1537C4.96938 13.0404 3.59672 16.4408 3.67359 19.8623C3.75057 23.2893 4.87885 26.663 6.8445 29.4694C7.07202 29.7943 7.53632 29.8243 7.81691 29.544L11.0594 26.3042C11.2922 26.0716 11.3143 25.7036 11.1272 25.4328C9.90611 23.6652 9.52029 21.9836 9.46972 19.7323C9.41901 17.4751 9.92564 15.7802 11.1039 13.9551C11.2789 13.684 11.2454 13.3252 11.0129 13.1015L7.84119 10.0499Z",
fill="#D3D4DC"
)
g
ellipse(
@click="(el) => clickPart(el.target.id)",
:id="editable && 'crown_centeral'",
:class="{'edit-part': editable}",
cx="19.7675",
cy="19.7948",
@@ -124,21 +134,29 @@
stroke="#252850"
)
path(
@click="(el) => clickPart(el.target.id)",
:id="editable && 'general'",
:class="{'edit-part': editable}",
d="M34.5713 13.3113C34.5713 17.2416 27.0496 20.4277 18.8213 20.4277C10.593 20.4277 3.07129 17.2416 3.07129 13.3113V10.8813C3.07129 6.56757 6.95639 3.07059 11.5848 3.07059C14.2175 3.07059 17.2849 5.80103 18.8213 7.57059C20.3577 5.80103 23.4251 3.07059 26.0578 3.07059C30.6862 3.07059 34.5713 6.56757 34.5713 10.8813V13.3113Z",
fill="#D3D4DC"
)
path(
@click="(el) => clickPart(el.target.id)",
:id="editable && 'root_left'",
:class="{'edit-part': editable}",
d="M4.81804 51.5043C3.25298 49.9392 3.08382 32.4872 3.07204 22.6833C3.07152 22.2535 3.68699 22.002 4.03135 22.2593C4.96781 22.9589 6.28013 23.7063 7.28315 24.161C7.45558 24.2392 7.56669 24.4067 7.55941 24.5959C7.17711 34.5275 6.43755 53.1238 4.81804 51.5043Z",
fill="#D3D4DC"
)
path(
@click="(el) => clickPart(el.target.id)",
:id="editable && 'root_right'",
:class="{'edit-part': editable}",
d="M32.3199 51.5043C33.8853 49.9389 34.5356 31.7491 34.5891 21.8825C34.5915 21.4526 34.0164 21.2387 33.7092 21.5394C32.7619 22.4667 31.3903 23.6221 30.3561 24.1534C30.1877 24.2399 30.0761 24.4067 30.0831 24.5959C30.4552 34.5275 30.7004 53.1238 32.3199 51.5043Z",
fill="#D3D4DC"
)
path(
@click="(el) => clickPart(el.target.id)",
:id="editable && 'root_central'",
:class="{'edit-part': editable}",
d="M16.669 25.9951C17.4383 32.3528 16.9336 38.7773 18.6832 38.7773C20.4366 38.7773 20.1845 32.3251 20.9795 25.9541C21.0207 25.6243 20.7074 25.3586 20.3838 25.4346C18.9844 25.7636 18.0072 25.6611 17.2903 25.4763C16.9589 25.3908 16.6278 25.6553 16.669 25.9951Z",
fill="#D3D4DC"
@@ -195,6 +213,8 @@
stroke="#252850"
)
path(
@click="(el) => clickPart(el.target.id)",
:id="editable && 'root_central'",
:class="{'edit-part': editable}",
d="M27.6106 31.75C27.9904 31.5726 28.5857 31.8793 28.5671 32.298C28.193 40.7601 23.9204 54.7656 18.75 54.7656C13.5545 54.7656 8.9633 40.6236 8.60111 32.175C8.58393 31.7742 9.10691 31.4947 9.47075 31.6638C10.7255 32.2471 13.473 33.1093 18.75 33.1093C23.7725 33.1093 26.3734 32.3282 27.6106 31.75Z",
fill="#D3D4DC"
@@ -205,6 +225,8 @@
stroke="#252850"
)
path(
@click="(el) => clickPart(el.target.id)",
:id="editable && 'general'",
:class="{'edit-part': editable}",
d="M33.8438 18.8624C33.8438 13.0868 24.4102 3.57812 18.75 3.57812C13.0898 3.57812 3.65625 13.0868 3.65625 18.8624C3.65625 24.638 10.414 28.5156 18.75 28.5156C27.086 28.5156 33.8438 24.638 33.8438 18.8624Z",
fill="#D3D4DC"
@@ -266,11 +288,15 @@
stroke="#252850"
)
path(
@click="(el) => clickPart(el.target.id)",
:id="editable && 'general'",
:class="{'edit-part': editable}",
d="M36.1934 18.8948C36.1934 5.05857 38.9103 5.5807 21.2504 5.5807C3.59053 5.5807 6.3065 5.31963 6.3065 18.8948C6.3065 24.5178 12.8475 29.8594 21.2504 29.8594C29.6533 29.8594 36.1934 24.5178 36.1934 18.8948Z",
fill="#D3D4DC"
)
path(
@click="(el) => clickPart(el.target.id)",
:id="editable && 'root_central'",
:class="{'edit-part': editable}",
d="M30.1106 33.75C30.4904 33.5726 31.0857 33.8793 31.0671 34.2981C30.693 42.7601 26.4204 56.7656 21.25 56.7656C16.0796 56.7656 11.807 42.7601 11.4329 34.2981C11.4143 33.8793 12.0096 33.5726 12.3894 33.75C13.6266 34.3282 16.2275 35.1094 21.25 35.1094C26.2725 35.1094 28.8734 34.3282 30.1106 33.75Z",
fill="#D3D4DC"
@@ -291,6 +317,10 @@ export default {
partTooth: String,
toothConfig: Object,
jawPosition: String,
clickPart: {
default: () => {},
type: Function,
},
view: {
default: "native",
type: String,
@@ -323,9 +353,7 @@ export default {
return {
width: `${size.width + this.oversized}`,
height: `${size.height + this.oversized}`,
viewBox: `0 0 ${size.width + this.oversized} ${
size.height + this.oversized
}`,
viewBox: `0 0 ${size.width} ${size.height}`,
};
},
},

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

@@ -76,7 +76,8 @@
dental-condition-form(
:data="value.dental_condition"
:cell-config="config",
:form-config="formConfig"
:form-config="formConfig",
:jaw-position="jawPosition"
)
</template>

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

@@ -46,12 +46,14 @@
<script>
import ToothFormulaCell from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue";
import DetailedToothSvg from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DetailedToothSvg.vue";
import { getFilledConditions } from "@/pages/newMedicalCard/utils/gettersObjects";
export default {
name: "ToothFormulaTable",
components: { ToothFormulaCell, DetailedToothSvg },
data() {
return {
getFilledConditions,
heightRow: {
tooth_mobility: "36px",
dental_condition: "64px",