52 lines
1.9 KiB
Vue
52 lines
1.9 KiB
Vue
<template lang="pug">
|
||
//TODO: Поправить бордеры у таблицы
|
||
.table-formula.flex.border-collapse
|
||
.flex.flex-col.border-collapse
|
||
.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(v-for="(row, index) in data.rowMap" :class="{'cell-grey': row.name === 'tooth_number'}")
|
||
span(v-if="row.name === 'tooth_number'") {{tooth[row.name]}}
|
||
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-left: 1.5px solid var(--font-black-color)
|
||
border-top: 1.5px solid var(--font-black-color)
|
||
.cell
|
||
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>
|