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-02-22 15:46:26 +03:00
parent 83449a9153
commit af47b06a7c
10 changed files with 116 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/pages/medicalCard/components/MedicalFormulaTable.vue
View File

@@ -1,32 +1,51 @@
<template lang="pug">
//TODO: Поправить бордеры у таблицы
.table-formula.flex.border-collapse(:class="{'rounded-t': data.name === 'upperJaw', 'rounded-b': data.name === 'lowerJaw'}")
.table-formula.flex.border-collapse
.flex.flex-col.border-collapse
.cell-number.flex.w-52.h-50px.font-bold.text-lg.justify-center.items-center.border-collapse(v-for="row in data.rowMap") {{row.label}}
.cell-grey.flex.w-52.h-50px.font-bold.text-lg.justify-center.items-center.border-collapse(v-for="row in data.rowMap") {{row.label}}
.flex.flex-col.border-collapse(v-for="tooth in data.columns")
.cell.flex.w-50px.h-50px.font-bold.text-2xl.justify-center.items-center.border-collapse(v-for="row in data.rowMap" :class="{'cell-number': row.name === 'tooth_number'}")
.cell.flex.w-50px.h-50px.font-bold.text-2xl.justify-center.items-center(v-for="(row, index) in data.rowMap" :class="{'cell-grey': row.name === 'tooth_number'}")
span(v-if="row.name === 'tooth_number'") {{tooth[row.name]}}
input.w-8.outline-0(v-if="row.name === 'dental_condition'" v-model="tooth[row.name]" maxlength="2")
input.w-8.outline-0(v-if="row.name === 'tooth_mobility'" v-model="tooth[row.name]" maxlength="3")
base-input.pl-4.pr-2(v-if="row.name === 'dental_condition'" v-model="tooth[row.name]" :rules="[ruleCondition]" :max-length="2" borderless no-error-icon)
label.flex.w-full.h-full.justify-center.items-center.cursor-pointer(v-if="row.name === 'tooth_mobility'")
base-select.pl-4.pr-4(v-model="tooth[row.name]" :id="`${row.name}_${index}`" :items="mobilityMap" :outlined="false" menu-anchor="bottom start" borderless hide-dropdown-icon)
</template>
<script>
import { ruleDentalCondition } from "@/assets/rules/rulesInput";
import BaseInput from "@/components/base/BaseInput.vue";
import BaseSelect from "@/components/base/BaseSelect.vue";
export default {
name: "MedicalFormulaTable",
components: { BaseInput, BaseSelect },
props: {
data: Object,
rowMap: Array,
condition: Array,
},
data() {
return {
ruleCondition: ruleDentalCondition,
mobilityMap: [
{ id: 1, label: "I" },
{ id: 2, label: "II" },
{ id: 3, label: "III" },
],
};
},
};
</script>
<style lang="sass" scoped>
.table-formula
border: 2px solid var(--font-black-color)
border-left: 1.5px solid var(--font-black-color)
border-top: 1.5px solid var(--font-black-color)
.cell
border: 1px solid var(--font-black-color)
.cell-number
border-bottom: 1.5px solid black
border-right: 1.5px solid black
.cell-grey
@extend .cell
background-color: var(--border-light-grey-color)
.not-border
border: none
</style>