Фикс багов дизайна

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

@@ -29,7 +29,7 @@
                 @click="removeImage(insurance?.insuranceKey, field?.key)",
                 rounded
               )
-                q-icon(name="app:icon-cancel", size="8px")
+                q-icon.icon-cancel(name="app:cancel", size="8px")
             .replace-photo.font-medium.text-base.cursor-pointer(
               v-if="isEdit",
               @click="changeModal(insurance.insuranceKey)"
@@ -44,15 +44,15 @@
                 v-model="basic[photoId][field.key]"
                 :confirm-upload="confirmChangePhoto" 
               )
-          .flex.h-10.relative(
-            v-else-if="field.type === 'select'",
-            @click="openModalCategories"
-          )
-            q-field.items-center.categories(
-              :style="{cursor: isEdit ? 'pointer' : 'default'}",
-              :readonly="!isEdit",
-              outlined
-            ) {{selectCategory(basic[insurance.insuranceKey][field.key])}}
+          .category.flex.h-10.relative.gap-x-2(v-else-if="field.type === 'select'")
+            .category-select.flex.items-center.change.px-4.rounded {{selectCategory(basic[insurance.insuranceKey][field.key])}}
+            q-btn.change.flex.w-7.h-9.rounded-md(
+              v-if="isEdit", 
+              @click="showModalCategories = true", 
+              dense, 
+              padding="8px"
+            )
+              q-icon.icon(name="app:folder", size="24px")
             base-modal(
               default-padding,
               hide-header,
@@ -84,9 +84,9 @@
               :type="field.type",
               size="M"
             )
-              q-icon.my-auto.text-lg.label-field.cursor-pointer(
+              q-icon.my-auto.text-lg.label-field.cursor-pointer.copy(
                 size="18px",
-                name="app:icon-copy",
+                name="app:copy",
                 v-if="checkCopiedFields(field.key, basic[insurance.insuranceKey])",
                 @click="copyValue(basic[insurance.insuranceKey][field.key])"
               )
@@ -134,8 +134,8 @@ export default {
       initDataBasic: "getBasicData",
     }),
     ...mapState({
-      basic: (state) => state.medical.basicData,
-      benefitData: (state) => state.medical.benefitData,
+      basic: (state) => state.medical?.basicData,
+      benefitData: (state) => state.medical?.benefitData,
     }),
   },
   methods: {
@@ -176,9 +176,6 @@ export default {
     closeModalCategories() {
       this.showModalCategories = false;
     },
-    openModalCategories() {
-      if (this.isEdit) this.showModalCategories = true;
-    },
     checkChangeInput() {
       this.isCheckChange =
         JSON.stringify(this.initDataBasic) !== JSON.stringify(this.basic)
@@ -363,14 +360,6 @@ export default {
         });
     },
   },
-  watch: {
-    showModalCategories: {
-      immediate: true,
-      handler(newVal) {
-        if (newVal) this.$store.dispatch("getBenefitData");
-      },
-    },
-  },
 };
 </script>
 
@@ -415,27 +404,25 @@ export default {
 .delete
   background-color: var(--btn-red-color)
 
+.category
+  width: 324px
 
-.categories :deep(.q-field__control)
-  height: 40px
-  color: var(--font-dark-blue-color)
-  padding: 0 16px
-  background: var(--bg-light-grey) !important
-  &:before
-    border: none !important
-    transition: none
-  &:after
-    border: none !important
-    transition: none
-    transform: none !important
+.category-select
+  min-width: 276px
 
-.categories :deep(.q-field__native)
-  font-weight: 500
-  font-size: 16px
-  line-height: normal
-  color: var(--font-dark-blue-color)
-  padding: 8px 0
-  background: var(--bg-light-grey) !important
+.icon :deep(path)
+  fill: var(--font-grey-color)
+
+.icon-cancel :deep(path)
+  fill: var(--default-white)
+
+.copy :deep(path)
+  fill: var(--font-grey-color)
+
+.change
+  background: var(--bg-light-grey)
+  color: var(--font-grey-color)
+  border: 1px solid var(--gray-secondary)
 
 .q-field--outlined.q-field--readonly :deep(.q-field__control)
   background: var(--bg-light-grey) !important