WIP Сделана выборка по полисам

src/components/base/BaseInput.vue

@@ -6,11 +6,10 @@
     ) {{ label }}
     .input-wrapper.flex.gap-x-2.px-4.box-border.py-10px(
       :class="{'border-none': borderNone, 'border-error': borderError }"
-      :style="{'background-color': disabled && 'var(--bg-disable-grey-color)'}"
+      :style="disabledBackgroundStyle"
     )
       input.input.w-full.outline-0.not-italic(
         v-model="value",
-        :style="{'color': disabled && 'var(--font-grey-color-0)'}",
         :class="textClass",
         :placeholder="placeholder",
         :disabled="disabled",
@@ -63,6 +62,13 @@ export default {
             "text-sm": true,
           };
     },
+    disabledBackgroundStyle() {
+      return this.disabled
+        ? {
+            "background-color": "var(--bg-disable-grey-color)",
+          }
+        : false;
+    },
   },
 };
 </script>
@@ -83,6 +89,7 @@ export default {
   background-color: inherit
   &:disabled, &[disabled]
     background-color: var(--bg-disable-grey-color)
+    color: var(--font-grey-color-0)
 .label
   color: var(--font-black-color)
 </style>

src/components/base/BaseRadioButtonsGroup.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   .container.flex.flex-col.gap-y-2
     .label.font-semibold.text-smm(v-if="radioButtonsLabel") {{ radioButtonsLabel }}
-    .group.flex.gap-x-4.text-base(:class="{'flex-col gap-y-1': direction === 'col'}")
+    .group.flex.text-base(:class="radioGroupClasses")
       .option(v-for="item in items")
         input.mr-2(
           type="radio",
@@ -23,10 +23,9 @@ export default {
       type: Array,
       default: () => [],
     },
-    direction: {
+    directionColumn: Boolean,
-      type: String,
+    columnGap: String,
-      default: "row",
+    rowGap: String,
-    },
   },
   computed: {
     value: {
@@ -37,6 +36,26 @@ export default {
         this.$emit("update:modelValue", value);
       },
     },
+    radioGroupClasses() {
+      if (this.directionColumn) {
+        return this.columnGap
+          ? {
+              "flex-col": true,
+              [this.columnGap]: true,
+            }
+          : {
+              "flex-col": true,
+              "gap-y-1": true,
+            };
+      }
+      if (this.rowGap)
+        return {
+          [this.rowGap]: true,
+        };
+      return {
+        "gap-x-4": true,
+      };
+    },
   },
 };
 </script>

src/pages/medicalCard/components/MedicalBaseData.vue

@@ -6,6 +6,7 @@
         base-input.w-full(
           placeholder="ФИО*",
           v-model="clientDetail.fullName",
+          disabled
         )
         base-radio-buttons-group(
           :items="gendersList",

src/pages/medicalCard/components/MedicalIdentityDocuments.vue

@@ -23,10 +23,6 @@
             label="Дата выдачи",
             v-model="clientDetail.identity_documents.issued_by_date"
           )
-        base-input(
-          label="Страховая оганизация",
-          placeholder="Введите название организации"
-        )
 </template>
 
 <script>

src/pages/medicalCard/components/MedicalPolicyDocuments.vue

@@ -1,28 +1,38 @@
 <template lang="pug">
   .base.flex.flex-col.gap-y-6
     span.font-bold Полис
+    base-radio-buttons-group(
+      :items="policiesList",
+      v-model="policy",
+      rowGap="gap-x-[182px]"
+    )
     .flex.gap-x-4
-      base-input.input(
+      .flex.flex-col.gap-y-4
-        label="Серия и номер полиса ОМС",
+        base-input.input(
-        placeholder="000000 0000000000",
+          label="Серия и номер полиса ОМС",
-        v-model="clientDetail.OMSPolicy.number",
+          placeholder="000000 0000000000",
-        v-mask="'###### ##########'"
+          v-model="clientDetail.OMSPolicy.number",
-      )
+          v-mask="'###### ##########'",
-      base-input.input(
+          :disabled="!selectedOMSPolicy"
-        label="Страховая компания полиса ОМС",
+        )
-        v-model="clientDetail.OMSPolicy.organization",
+        base-input.input(
-      )
+          label="Страховая организация полиса ОМС",
-    .flex.gap-x-4  
+          v-model="clientDetail.OMSPolicy.organization",
-      base-input.input(
+          :disabled="!selectedOMSPolicy"
-        label="Серия и номер полиса ДМС",
+        )
-        placeholder="000000 0000000000",
+      .flex.flex-col.gap-y-4
-        v-model="clientDetail.DMSPolicy.number",
+        base-input.input(
-        v-mask="'###### ##########'"
+          label="Серия и номер полиса ДМС",
-      )
+          placeholder="000000 0000000000",
-      base-input.input(
+          v-model="clientDetail.DMSPolicy.number",
-        label="Страховая компания полиса ДМС",
+          v-mask="'###### ##########'",
-        v-model="clientDetail.DMSPolicy.organization",
+          :disabled="selectedOMSPolicy"
-      )
+        )
+        base-input.input(
+          label="Страховая организация полиса ДМС",
+          v-model="clientDetail.DMSPolicy.organization",
+          :disabled="selectedOMSPolicy"
+        )
     base-input(
       label="Код категории льготы",
       placeholder="000",
@@ -42,16 +52,35 @@
 import BaseInput from "@/components/base/BaseInput";
 import BaseInputDate from "@/components/base/BaseInputDate";
 import BaseSelect from "@/components/base/BaseSelect";
-import BaseButton from "@/components/base/BaseButton";
 import { mask } from "vue-the-mask";
+import BaseRadioButtonsGroup from "@/components/base/BaseRadioButtonsGroup.vue";
+import { medicalDetailConfig } from "@/pages/medicalCard/utils/medicalConfig.js";
 
 export default {
   name: "MedicalPolicyDocuments",
-  components: { BaseInput, BaseInputDate, BaseSelect, BaseButton },
+  components: {
+    BaseInput,
+    BaseInputDate,
+    BaseSelect,
+    BaseRadioButtonsGroup,
+  },
   directives: { mask },
   props: {
     clientDetail: Object,
   },
+  data() {
+    return {
+      policy: "OMS",
+    };
+  },
+  computed: {
+    policiesList() {
+      return medicalDetailConfig.policiesList;
+    },
+    selectedOMSPolicy() {
+      return this.policy === "OMS";
+    },
+  },
 };
 </script>
 

src/pages/medicalCard/utils/medicalConfig.js

@@ -11,6 +11,18 @@ export const medicalDetailConfig = {
       value: "WOMEN",
     },
   ],
+  policiesList: [
+    {
+      id: "1",
+      label: "Полис ОМС",
+      value: "OMS",
+    },
+    {
+      id: "2",
+      label: "Полис ДМС",
+      value: "DMS",
+    },
+  ],
   identity_document: {
     height: 366,
     title: "Паспортные данные",