Merge branch 'UC-208' into 'master'

WIP Поправил таблицу зубной формулы и доработал формы информации о клиенте See merge request andrusyakka/urban-couscous!270
2023-02-22 12:51:02 +00:00
parent 83449a9153 af47b06a7c
commit 713490fe32
10 changed files with 116 additions and 28 deletions
--- a/src/assets/rules/rulesInput.js
+++ b/src/assets/rules/rulesInput.js
@@ -0,0 +1,5 @@
+import { dentalСonditionMap } from "@/pages/medicalCard/utils/medicalConfig";
+const dentalCondition = dentalСonditionMap.map((den) => den.name);
+export const ruleDentalCondition = (val) => {
+  return dentalCondition.includes(val);
+};
--- a/src/components/base/BaseDetailInfo.vue
+++ b/src/components/base/BaseDetailInfo.vue
@@ -1,10 +1,15 @@
 <template lang="pug">
-  .section-wrapper.flex.flex-col.h-fit.cursor-pointer(:style="{height: `${height}px`}")
-    .section-header.flex.items-center.justify-between.pl-4.pr-3.py-4.mb-3
+  .section-wrapper.flex.flex-col.h-fit.cursor-pointer
+    .section-header.flex.items-center.justify-between.pl-4.pr-3.py-3
      span.text-sm.font-semibold.whitespace-normal {{title}}
-    .flex.flex-col.items-center.gap-y-4.px-4
-     slot(v-if="!isNoData")
+    .flex.gap-y-4.px-4.py-3(
+      :style="{height: `${height}px`}"
+      v-if="!isNoData"
+      :class="{'flex-col': !directionRow}"
+      )
+      slot
    .section-add.flex.justify-center.items-center.cursor-pointer(
+      :style="{height: `${height}px`}"
      v-if="isNoData"
      @click="openAddDoc"
    ) Добавить данные
@@ -17,6 +22,7 @@ export default {
    title: String,
    height: Number,
    data: Object,
+    directionRow: Boolean,
  },
  data() {
    return {
--- a/src/components/base/BaseDetailInput.vue
+++ b/src/components/base/BaseDetailInput.vue
@@ -3,17 +3,19 @@
    span.title-section.font-semibold.text-xs(v-if="field.title" ) {{field.title}}
    .flex.items-center(v-if="field.type === 'text' || field.type === 'textarea'" class="gap-x-2.5")
      span.w-4.icon(v-if="field.icon" :class="field.icon")
-      base-input(v-model="data[field.label]" :with-icon="field.copy", outlined)
+      base-input(v-model="data[field.label]" :with-icon="field.copy" outlined)
        .flex.items-center(v-if="field.copy && data[field.label]")
          .copy.icon-copy.cursor-pointer(@click="() => copyValue(data[field.label])")
-    base-input(v-if="field.type === 'date'" v-model="data[field.label]")
+    base-input(v-if="field.type === 'date'" type="date" v-model="data[field.label]" outlined)
+    base-radio-buttons-group(v-if="field.type === 'radio'" v-model="data[field.label]" :items="field.items" size="xs" :column-gap="14"  direction-column)
 </template>

 <script>
 import BaseInput from "@/components/base/BaseInput.vue";
+import BaseRadioButtonsGroup from "@/components/base/BaseRadioButtonsGroup.vue";
 export default {
  name: "BaseDetailInput",
-  components: { BaseInput },
+  components: { BaseInput, BaseRadioButtonsGroup },
  props: {
    value: String,
    field: Object,
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -13,6 +13,9 @@
      :bg-color="filled ? '' : 'white'",
      :disable="disabled",
      :rules="rule",
+      :lazy-rules="lazyRule",
+      :item-aligned="itemAligned",
+      :no-error-icon="noErrorIcon",
      :mask="mask",
      :maxlength="maxLength",
      :autogrow="autogrow",
@@ -62,6 +65,9 @@ export default {
    maxLength: Number,
    textColor: String,
    rule: Array,
+    lazyRule: [Boolean, String],
+    noErrorIcon: Boolean,
+    itemAligned: Boolean,
    modelValue: [String, Date],
    placeholder: String,
    disabled: Boolean,
--- a/src/components/base/BaseRadioButtonsGroup.vue
+++ b/src/components/base/BaseRadioButtonsGroup.vue
@@ -5,7 +5,7 @@
    )
      q-option-group.flex(
        class="q-gutter-md",
-        :style="{ columnGap: columnGap + 'px', rowGap: rowGap + 'px' }"
+        :style="{ columnGap: columnGap + 'px', rowGap: rowGap + 'px', flexDirection: directionColumn ? 'column' : 'row' }"
        :size="size",
        :options="items",
        type="radio",
@@ -22,7 +22,7 @@ export default {
  components: { BaseInputContainer },
  emits: ["update:modelValue"],
  props: {
-    modelValue: String,
+    modelValue: [String, Boolean],
    radioButtonsLabel: String,
    items: {
      type: Array,
--- a/src/components/base/BaseSelect.vue
+++ b/src/components/base/BaseSelect.vue
@@ -5,9 +5,10 @@
        v-model="value",
        :options="items",
        :disable="disable",
-        :behavior="behavior",
+        :hide-dropdown-icon="hideDropdownIcon"
+        :borderless="borderless",
+        :outlined="outlined",
        bg-color="white",
-        outlined,
        dense,
        emit-value,
        map-options
@@ -37,7 +38,13 @@ export default {
  components: { BaseMenu, BaseInputContainer },
  props: {
    placeholder: String,
+    hideDropdownIcon: Boolean,
+    borderless: Boolean,
    modelValue: [Object, String],
+    outlined: {
+      type: Boolean,
+      default: true,
+    },
    items: {
      type: Array,
      default: () => [],
--- a/src/pages/medicalCard/components/MedicalCardWrapper.vue
+++ b/src/pages/medicalCard/components/MedicalCardWrapper.vue
@@ -80,6 +80,12 @@
            base-detail-info(
              :title="configData.agreement_form.title"
              :height="configData.agreement_form.height"
+              direction-row
+              )
+              base-detail-input(
+                v-for="field in configData.agreement_form.fields"
+                :field="field"
+                :data="medicalDataInit.agreement_form"
              )
      .flex.flex-col(class="px-92px gap-y-60px")
        .flex.flex-col(class="gap-y-2.5")
@@ -92,6 +98,7 @@
            color="primary",
            label="Сохранить",
            padding="8px 24px",
+            @click="validateFormMedical"
            no-caps
          )
 </template>
@@ -180,6 +187,9 @@ export default {
    };
  },
  methods: {
+    validateFormMedical() {
+      console.log(this.medicalDataInit);
+    },
    saveDataMedical(data) {
      this.numberCard = data?.number && data.number;
      const confidant = data ? data["confidant"] : undefined;
@@ -267,6 +277,17 @@ export default {
  display: grid
  grid-template-columns: 280px 292px 180px 360px 463px
  gap: 16px
+  padding: 0 20px 20px 0
+  overflow-x: auto
+  &::-webkit-scrollbar
+    height: 4px
+    width: 4px
+  &::-webkit-scrollbar-track
+    background-color: rgba(211, 212, 220, 0.5)
+    border-radius: 8px
+  &::-webkit-scrollbar-thumb
+    border-radius: 8px
+    background-color: var(--btn-blue-color)
 .card-upper
  border-bottom: 1px solid var(--border-light-grey-color)
 </style>
--- a/src/pages/medicalCard/components/MedicalDentalFormula.vue
+++ b/src/pages/medicalCard/components/MedicalDentalFormula.vue
@@ -37,4 +37,14 @@ export default {
 .wrapper
  border: 1.5px solid var(--border-light-grey-color)
  border-radius: 4px
+  overflow: auto
+  &::-webkit-scrollbar
+    height: 4px
+    width: 4px
+  &::-webkit-scrollbar-track
+    background-color: rgba(211, 212, 220, 0.5)
+    border-radius: 8px
+  &::-webkit-scrollbar-thumb
+    border-radius: 8px
+    background-color: var(--btn-blue-color)
 </style>
--- a/src/pages/medicalCard/components/MedicalFormulaTable.vue
+++ b/src/pages/medicalCard/components/MedicalFormulaTable.vue
@@ -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>
--- a/src/pages/medicalCard/utils/medicalConfig.js
+++ b/src/pages/medicalCard/utils/medicalConfig.js
@@ -24,7 +24,7 @@ export const medicalDetailConfig = {
    },
  ],
  identity_document: {
-    height: 366,
+    height: 316,
    title: "Паспортные данные",
    fields: [
      {
@@ -51,7 +51,7 @@ export const medicalDetailConfig = {
    ],
  },
  registration_address: {
-    height: 135,
+    height: 85,
    title: "Адрес регистрации",
    fields: [
      {
@@ -62,7 +62,7 @@ export const medicalDetailConfig = {
    ],
  },
  temporary_address: {
-    height: 135,
+    height: 85,
    title: "Адрес проживания",
    fields: [
      {
@@ -73,7 +73,7 @@ export const medicalDetailConfig = {
    ],
  },
  snils: {
-    height: 135,
+    height: 85,
    title: "СНИЛС",
    fields: [
      {
@@ -85,7 +85,7 @@ export const medicalDetailConfig = {
    ],
  },
  policy: {
-    height: 210,
+    height: 162,
    title: "ПОЛИС",
    fields: [
      {
@@ -101,7 +101,7 @@ export const medicalDetailConfig = {
    ],
  },
  policy_organization: {
-    height: 135,
+    height: 85,
    title: "Страховая организация",
    fields: [
      {
@@ -112,7 +112,7 @@ export const medicalDetailConfig = {
    ],
  },
  additional: {
-    height: 275,
+    height: 218,
    title: "Дополнительная информация",
    fields: [
      {
@@ -135,14 +135,26 @@ export const medicalDetailConfig = {
    ],
  },
  agreement_form: {
-    height: 163,
+    height: 121,
    title:
      "Информированное добровольное согласие на виды медицинских вмешательств, включенные в Перечень определенных видов медицинских вмешательств:",
    fields: [
      {
        label: "agreement",
        title: "Получено",
-        type: "check_box",
+        type: "radio",
+        items: [
+          {
+            id: "1",
+            label: "Да",
+            value: true,
+          },
+          {
+            id: "2",
+            label: "Нет",
+            value: false,
+          },
+        ],
      },
      {
        label: "agreement_date",