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

2023-04-20 16:22:25 +03:00
parent 3776ac6c7d
commit 4e2865d143
5 changed files with 94 additions and 34 deletions
--- a/src/components/base/BaseCategorySelection.vue
+++ b/src/components/base/BaseCategorySelection.vue
@@ -2,13 +2,19 @@
  .selection-wrapper.flex
    .left-side.flex.flex-col.gap-y-4
      .flex.font-bold.text-xl Категории
-      base-input(placeholder="Поиск", outlined, :width="300")
-        .flex.items-center.cursor-pointer
-          q-icon(
-            name="app:icon-search",
-            size="18px",
-            style="color: var(--font-dark-blue-color)"
-          )
+      base-input(
+        placeholder="Поиск",
+        @keyup.enter="searchCategory",
+        v-model="searchBenefit",
+        outlined,
+        :width="300",
+        iconLeft
+      )
+        q-icon(
+          name="app:icon-search",
+          size="20px",
+          style="color: var(--font-grey-color)"
+        )
      .field.flex.flex-col.overflow-y-scroll
        .flex.items-center(
          v-for="benefit in benefitData",
@@ -24,7 +30,11 @@
          .name.flex.items-center.font-medium.text-xm {{benefit.name}}
      .buttons-group.flex.py-4.px-8.justify-center
        base-button.text-base.font-semibold(outlined, :size="40", @click="closeModalCategories") Отменить
-        base-button.text-base.font-semibold(:size="40", @click="saveCategories(selected[0])") Сохранить
+        base-button.text-base.font-semibold(
+          v-if="selected.length > 0",
+          :size="40",
+          @click="saveCategories(selected[0])"
+        ) Сохранить
    .right-side.flex.px-14.font-bold.relative
      q-icon(name="app:icon-cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories")
      .flex.py-10.gap-y-6.flex-col(v-if="selected.length > 0 && selected[0]?.name !== 'Без льготы'")
@@ -58,10 +68,12 @@ export default {
    shiftSelected: Function,
    closeModalCategories: Function,
    saveCategories: Function,
+    showModal: Boolean,
  },
  data() {
    return {
      selected: [],
+      searchBenefit: "",
    };
  },
  computed: {
@@ -75,6 +87,11 @@ export default {
      return this.selected[0]?.privileges.split(",");
    },
  },
+  methods: {
+    searchCategory() {
+      this.$emit("search", this.searchBenefit);
+    },
+  },
  watch: {
    selected: {
      immediate: true,
@@ -83,6 +100,12 @@ export default {
        if (this.selected.length >= 2) this.selected.shift();
      },
    },
+    showModal: {
+      immediate: true,
+      handler(newVal) {
+        if (!newVal) this.searchBenefit = "";
+      },
+    },
  },
 };
 </script>
@@ -91,6 +114,7 @@ export default {
 .selection-wrapper
  width: 895px
  height: 660px
+  font-feature-settings: 'pnum' on, 'lnum' on

 .left-side
  width: 364px
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -22,10 +22,12 @@
      :autogrow="autogrow",
      :square="square",
      :standout="standout"
-      :accept="accept"
+      :accept="accept",
      hide-bottom-space
    )
-      slot.cursor-pointer
+      template(v-slot:prepend, v-if="iconLeft")
+        slot
+      slot.cursor-pointer(v-if="!iconLeft")
 </template>

 <script>
@@ -85,6 +87,7 @@ export default {
    disabled: Boolean,
    label: String,
    readonly: Boolean,
+    iconLeft: Boolean,
  },
  emits: ["update:modelValue"],
  computed: {
--- a/src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue
+++ b/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)
--- a/src/pages/newMedicalCard/utils/medicalConfig.js
+++ b/src/pages/newMedicalCard/utils/medicalConfig.js
@@ -250,13 +250,13 @@ export const baseInsuranceForm = [
        key: "series",
        label: "Серия",
        type: "text",
-        inputMask: "######",
+        inputMask: "####",
      },
      {
        key: "number",
        label: "Номер",
        type: "text",
-        inputMask: "##########",
+        inputMask: "####-####-####",
      },
      {
        key: "photo",
@@ -273,13 +273,13 @@ export const baseInsuranceForm = [
        key: "series",
        label: "Серия",
        type: "text",
-        inputMask: "######",
+        inputMask: "####",
      },
      {
        key: "number",
        label: "Номер",
        type: "text",
-        inputMask: "##########",
+        inputMask: "####-####-####",
      },
      {
        key: "photo",
--- a/src/store/modules/medicalCard.js
+++ b/src/store/modules/medicalCard.js
@@ -47,6 +47,7 @@ const state = () => ({
    },
    benefit: {
      id: null,
+      discount: null,
      name: null,
      photo: null,
    },
@@ -129,6 +130,7 @@ const getters = {
      benefit: {
        name: person?.benefit?.name,
        id: person?.benefit?.id,
+        discount: person?.benefit?.discount,
        photo: person?.photo_benefit
          ? {
              photo: rootState.getUrl + person?.photo_benefit,
@@ -212,6 +214,14 @@ const actions = {
      commit("setBenefitData", res.results);
    });
  },
+  getBenefitDataSearch({ commit }) {
+    fetchWrapper
+      .get(`general/benefit/?name=${localStorage.getItem("searchBenefit")}`)
+      .then((res) => {
+        commit("setBenefitData", res.results);
+      });
+  },
+
  getMedicalCardData({ commit }) {
    fetchWrapper
      .get(