From af47b06a7c9e42643e3daa9db3fc52e4f144312d Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Wed, 22 Feb 2023 15:46:26 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=9F=D0=BE=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D1=82=D0=B0=D0=B1=D0=BB=D0=B8=D1=86=D1=83=20?=
 =?UTF-8?q?=D0=B7=D1=83=D0=B1=D0=BD=D0=BE=D0=B9=20=D1=84=D0=BE=D1=80=D0=BC?=
 =?UTF-8?q?=D1=83=D0=BB=D1=8B=20=D0=B8=20=D0=B4=D0=BE=D1=80=D0=B0=D0=B1?=
 =?UTF-8?q?=D0=BE=D1=82=D0=B0=D0=BB=20=D1=84=D0=BE=D1=80=D0=BC=D1=8B=20?=
 =?UTF-8?q?=D0=B8=D0=BD=D1=84=D0=BE=D1=80=D0=BC=D0=B0=D1=86=D0=B8=D0=B8=20?=
 =?UTF-8?q?=D0=BE=20=D0=BA=D0=BB=D0=B8=D0=B5=D0=BD=D1=82=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/rules/rulesInput.js                |  5 +++
 src/components/base/BaseDetailInfo.vue        | 14 +++++---
 src/components/base/BaseDetailInput.vue       |  8 +++--
 src/components/base/BaseInput.vue             |  6 ++++
 src/components/base/BaseRadioButtonsGroup.vue |  4 +--
 src/components/base/BaseSelect.vue            | 11 ++++--
 .../components/MedicalCardWrapper.vue         | 21 +++++++++++
 .../components/MedicalDentalFormula.vue       | 10 ++++++
 .../components/MedicalFormulaTable.vue        | 35 ++++++++++++++-----
 src/pages/medicalCard/utils/medicalConfig.js  | 30 +++++++++++-----
 10 files changed, 116 insertions(+), 28 deletions(-)
 create mode 100644 src/assets/rules/rulesInput.js

diff --git a/src/assets/rules/rulesInput.js b/src/assets/rules/rulesInput.js
new file mode 100644
index 0000000..a144124
--- /dev/null
+++ 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);
+};
diff --git a/src/components/base/BaseDetailInfo.vue b/src/components/base/BaseDetailInfo.vue
index 6691b4c..4c5ab78 100644
--- 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 {
diff --git a/src/components/base/BaseDetailInput.vue b/src/components/base/BaseDetailInput.vue
index c1ae22f..a8dd5c0 100644
--- 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,
diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
index 27db359..d76d87e 100644
--- 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,
diff --git a/src/components/base/BaseRadioButtonsGroup.vue b/src/components/base/BaseRadioButtonsGroup.vue
index 303b39e..e138b2c 100644
--- 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,
diff --git a/src/components/base/BaseSelect.vue b/src/components/base/BaseSelect.vue
index fc4310d..32d1d44 100644
--- 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: () => [],
diff --git a/src/pages/medicalCard/components/MedicalCardWrapper.vue b/src/pages/medicalCard/components/MedicalCardWrapper.vue
index e4c4cd5..baba93c 100644
--- 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>
diff --git a/src/pages/medicalCard/components/MedicalDentalFormula.vue b/src/pages/medicalCard/components/MedicalDentalFormula.vue
index a3e893b..af38aff 100644
--- 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>
diff --git a/src/pages/medicalCard/components/MedicalFormulaTable.vue b/src/pages/medicalCard/components/MedicalFormulaTable.vue
index f7e3198..bfa7966 100644
--- 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>
diff --git a/src/pages/medicalCard/utils/medicalConfig.js b/src/pages/medicalCard/utils/medicalConfig.js
index be748ba..e376957 100644
--- 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",