[WIP] Добавил поиск на модальное окно выбора льгот, правки кода

src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue

@@ -13,7 +13,8 @@
         .font-semibold.text-sm.whitespace-nowrap {{insurance.insuranceLabel}}
         .flex.w-full.justify-between.items-center.gap-4(
           v-for="field in insurance.fields",
-          :key="insurance.insuranceKey + field.key"
+          :key="insurance.insuranceKey + field.key",
+          :style="{marginTop: field.label === 'Документы' ? '20px' : null}"
         )
           .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
           .avatar-field.flex.gap-3.items-center.h-10.w-10(v-if="field.type === 'avatar'")
@@ -25,7 +26,7 @@
             .replace-photo.font-medium.text-base.cursor-pointer(
               v-if="isEdit",
               @click="changeModal(insurance.insuranceKey)"
-            ) {{ basic[insurance.insuranceKey][field.key] ? "Заменить фото" : "Добавить фото"}}
+            ) {{ basic[insurance.insuranceKey][field.key] ? "Заменить фото" : "Добавить фото" }}
             base-modal(
               v-if="insurance.insuranceKey === photoId"
               v-model="showModal",
@@ -36,13 +37,15 @@
                 v-model="basic[photoId][field.key]"
                 :confirm-upload="confirmChangePhoto" 
               )
-          .flex.h-10.relative(v-else-if="field.type === 'select'")
-            .flex(@click="openModalCategories")
-              q-field.items-center.cursor-pointer(
-                standout,
-                :disable="!isEdit",
-                :outlined="isEdit",
-              ) {{selectCategory(basic[insurance.insuranceKey][field.key])}}
+          .flex.h-10.relative(
+            v-else-if="field.type === 'select'",
+            @click="openModalCategories"
+          )
+            q-field.items-center.cursor-pointer(
+              standout,
+              :readonly="!isEdit",
+              :outlined="isEdit",
+            ) {{selectCategory(basic[insurance.insuranceKey][field.key])}}
             base-modal(
               default-padding,
               hide-header,
@@ -52,9 +55,11 @@
               base-category-selection(
                 :benefit-data="benefitData",
                 :close-modal-categories="closeModalCategories",
-                :save-categories="saveCategories"
+                :save-categories="saveCategories",
+                :show-modal="showModalCategories",
+                @search="filterDataBenefit"
               )
-            .flex.font-medium.text-smm.absolute.top-10(
+            .flex.font-medium.text-smm.absolute.top-11(
               v-if="basic?.benefit[insurance?.discount]",
               :style="{color: 'var(--font-grey-color)'}"
             )
@@ -67,18 +72,24 @@
               v-model="basic[insurance.insuranceKey][field.key]",
               @update:model-value="checkChangeInput",
               :mask="field?.inputMask",
-              :disabled="!isEdit",
+              :readonly="!isEdit",
               :standout="!isEdit",
               :outlined="isEdit",
               :type="field.type",
               :width="278",
               text-color="black"
             )
+              q-icon.my-auto.text-lg.label-field(
+                size="18px",
+                name="app:icon-copy",
+                v-if="checkCopiedFields(field.key)",
+                @click="copyValue(basic[insurance.insuranceKey][field.key])"
+              )
 </template>
 
 <script>
 import { baseInsuranceForm } from "@/pages/newMedicalCard/utils/medicalConfig";
-import { mapActions, mapGetters, mapState } from "vuex";
+import { mapGetters, mapState } from "vuex";
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import BaseAvatar from "@/components/base/BaseAvatar.vue";
 import { fetchWrapper } from "@/shared/fetchWrapper";
@@ -106,6 +117,7 @@ export default {
       showModal: false,
       showModalCategories: false,
       photoId: "",
+      copiedFields: ["series", "number"],
     };
   },
   computed: {
@@ -118,11 +130,24 @@ export default {
       basic: (state) => state.medical.basicData,
       benefitData: (state) => state.medical.benefitData,
     }),
-    ...mapActions({
-      fetchBenefitData: "getBenefitData",
-    }),
   },
   methods: {
+    filterDataBenefit(text) {
+      if (text.length > 1) {
+        localStorage.setItem("searchBenefit", text);
+        this.$store.dispatch("getBenefitDataSearch");
+      } else {
+        this.$store.dispatch("getBenefitData");
+        localStorage.removeItem("searchBenefit", text);
+      }
+    },
+
+    checkCopiedFields(key) {
+      return !this.isEdit && this.copiedFields.some((elem) => elem === key);
+    },
+    copyValue(text) {
+      navigator.clipboard.writeText(text);
+    },
     selectCategory(str) {
       return str && str.length > 30
         ? str.substr(0, 30) + "..."
@@ -134,6 +159,7 @@ export default {
       this.showModalCategories = false;
       this.basic.benefit.id = obj.id;
       this.basic.benefit.name = obj.name;
+      this.basic.benefit.discount = obj.discount;
       this.isCheckChange = true;
     },
     changeModal(id) {
@@ -290,7 +316,7 @@ export default {
     showModalCategories: {
       immediate: true,
       handler(newVal) {
-        if (newVal) this.fetchBenefitData;
+        if (newVal) this.$store.dispatch("getBenefitData");
       },
     },
   },
@@ -314,9 +340,6 @@ export default {
 .replace-photo
   color: var(--btn-blue-color)
 
-.input
-  color: purple
-
 .form-wrap
   display: grid
   grid-template-columns: repeat(3, 1fr)