WIP Исправлены проверки

src/components/base/BaseInput.vue

@@ -1,9 +1,10 @@
 <template lang="pug">
-  base-input-container.gap-y-2(:label="label")
+  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
     q-input(
       v-model="value",
+      :name="name",
       :class="{'circle': circle, 'font-input': true}",
-      :input-style="{ color: textColor, width: width + 'px' , borderColor: borderColor}",
+      :input-style="{ color: textColor, borderColor: borderColor}",
       :borderless="borderless",
       :placeholder="placeholder",
       :outlined="outlined",
@@ -11,7 +12,6 @@
       :type="type",
       :readonly="readonly",
       :disable="disabled",
-      :name="name"
       :filled="filled",
       :bg-color="filled || standout ? '' : 'white'",
       :rules="rule",

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

@@ -7,7 +7,7 @@
     :open-edit="openEdit",
     :save="saveChange"
   )
-    .form-wrap.gap-24.w-full
+    q-form.form-wrap.gap-24.w-full(ref="documentForm", :no-error-focus="true")
       .data-section.flex.flex-col.gap-4(v-for="data in configData", :key="data.dataLabel")
         .font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
         .flex.w-full.justify-between.items-center.gap-4(
@@ -16,11 +16,22 @@
         )
           .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
           .photo-field.flex.gap-3.items-center(v-if="field.type === 'photo'")
-            img.h-10.w-10.object-cover(
+            q-avatar(
-              v-if="docData[data.dataKey][field.key]?.photo",
+              square,
-              :src="docData[data.dataKey][field.key]?.photo",
+              size="40px",
-              :alt="docData[data.dataKey][field.label]",
+              v-if="docData[data.dataKey][field.key]?.photo"
             )
+              img.h-10.w-10.object-cover(
+                :src="docData[data.dataKey][field.key]?.photo",
+                :alt="docData[data.dataKey][field.label]"
+              )
+              q-badge.delete(
+                floating,
+                v-if="isEdit",
+                rounded,
+                @click="removeImage(data?.dataKey, field?.key)"
+              )
+                q-icon(name="app:icon-cancel", size="8px")
             .replace-photo.font-medium.text-base.cursor-pointer(
               v-if="isEdit",
               @click="openModal(data.dataKey)",
@@ -33,15 +44,17 @@
           base-input(
             v-else,
             v-model="docData[data.dataKey][field.key]",
-            @update:model-value="checkChangeDocData"
+            :name="field.key",
+            @update:model-value="checkChangeDocData",
             :readonly="!isEdit",
             :type="field.type",
-            textColor="var(--font-dark-blue-color)"
+            textColor="var(--font-dark-blue-color)",
-            :width="checkCopiedFields(field.key) ? 260 : 278",
+            :width="302",
             :standout="!isEdit",
             :outlined="isEdit", 
+            :mask="field?.inputMask",
             :rule="field.rules",
-            :mask="field?.inputMask"
+            :autogrow="field.key === 'issued_by_org'"
           )
             .icon-copy.my-auto.text-lg.label-field(
               v-if="checkCopiedFields(field.key)",
@@ -56,9 +69,11 @@ import BaseInput from "@/components/base/BaseInput.vue";
 import BaseAvatar from "@/components/base/BaseAvatar.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import BaseUploadPhoto from "@/components/base/BaseUploadPhoto.vue";
-import { checkChangeData } from "@/shared/utils/changesObjects.js";
+import {
+  checkChangeData,
+  getFieldsNameUnvalidated,
+} from "@/shared/utils/changesObjects.js";
 import { fetchWrapper } from "@/shared/fetchWrapper.js";
-import * as moment from "moment/moment";
 import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
 import { addNotification } from "@/components/Notifications/notificationContext";
 export default {
@@ -103,6 +118,7 @@ export default {
           photo_tax_identification_number: null,
         },
       },
+      personDataField: ["insurance_number", "tax_identification_number"],
       showModal: false,
       photoId: "",
     };
@@ -113,6 +129,10 @@ export default {
     },
   },
   methods: {
+    removeImage(docKey, field) {
+      this.docData[docKey][field] = {};
+      this.isCheckChange = true;
+    },
     copyValue(text) {
       navigator.clipboard.writeText(text);
     },
@@ -141,44 +161,54 @@ export default {
       this.isCheckChange = true;
     },
     saveChange() {
-      this.updateDocData();
+      const form = this.$refs.documentForm;
-    },
+      form.validate().then((validate) => {
-    updateDocData() {
+        if (!validate) {
-      let { insurance_number: insurance, tax_identification_number: tax } =
+          getFieldsNameUnvalidated(form).forEach((elem) => {
-        this.docData;
+            let error = {};
-      let passport = JSON.parse(JSON.stringify(this.docData.passport));
+            this.configData.forEach(({ fields }) => {
-      passport.issued_by_date = moment(passport.issued_by_date).format(
+              let findedElem = fields.find((el) => el.key === elem);
-        "YYYY-MM-DD"
+              if (findedElem) error = findedElem?.errorMessage;
-      );
+            });
-      passport.photo = this.docData.passport.photo;
+            this.addErrorNotification(error?.title, error?.message);
-      let initData = JSON.parse(JSON.stringify(this.initialDocData));
+          });
-      initData.passport.issued_by_date = moment(
+          this.cancelEdit();
-        initData.passport.issued_by_date
+        } else {
-      ).format("YYYY-MM-DD");
-      let documentsFormData = new FormData();
           let passportFormData = new FormData();
-      this.fillResultData(initData, passport, "passport", passportFormData);
+          let documentsFormData = new FormData();
-      this.fillResultData(
+          form.getValidationComponents().forEach((elem) => {
-        initData,
+            if (!this.personDataField.includes(elem.name))
-        insurance,
+              passportFormData.append(elem.name, elem.modelValue ?? "");
+            else documentsFormData.append(elem.name, elem.modelValue ?? "");
+          });
+          this.checkChengePhoto("passport", "photo", passportFormData);
+          this.checkChengePhoto(
             "insurance_number",
+            "photo_insurance_number",
             documentsFormData
           );
-      this.fillResultData(
+          this.checkChengePhoto(
-        initData,
-        tax,
             "tax_identification_number",
+            "photo_tax_identification_number",
             documentsFormData
           );
           let request = [];
-      if (!passport.id)
+          if (!this.initialDocData.passport?.id) {
-        request.push(
+            passportFormData.append("kind", "PASSPORT");
-          this.sendData("general/identity_document/create/", passportFormData)
+            passportFormData.append(
+              "person",
+              this.$store.state.medical?.basicData?.personalData?.id
             );
-      else
             request.push(
               this.sendData(
-            `general/identity_document/${passport.id}/update/`,
+                "general/identity_document/create/",
+                passportFormData
+              )
+            );
+          } else
+            request.push(
+              this.sendData(
+                `general/identity_document/${this.initialDocData.passport?.id}/update/`,
                 passportFormData
               )
             );
@@ -193,51 +223,12 @@ export default {
             this.isEdit = false;
             this.isCheckChange = false;
           });
-    },
-    fillResultData(initObj, updateObj, id, formData) {
-      Object.keys(updateObj).forEach((key) => {
-        let config = this.configData
-          .find(({ dataKey }) => dataKey === id)
-          ?.fields.find((el) => el.key === key);
-        if (
-          config?.type === "photo" &&
-          this.checkChengePhoto(initObj[id], updateObj, key)
-        ) {
-          if (config.inputMask && !config.checkField(updateObj[key])) {
-            this.addErrorNotification(
-              config.errorMessage.title,
-              config.errorMessage.message
-            );
-            return;
-          }
-          formData.append(key, updateObj[key]?.file[0]);
-          return;
-        }
-        if (
-          config?.type !== "photo" &&
-          this.checkChangeField(initObj[id], updateObj, key)
-        ) {
-          if (config.inputMask && !config.checkField(updateObj[key])) {
-            this.addErrorNotification(
-              config.errorMessage.title,
-              config.errorMessage.message
-            );
-            return;
-          }
-          formData.append(key, updateObj[key]);
-          return;
         }
       });
-      return;
     },
-    checkChangeField(initObj, updatedObj, field) {
+    checkChengePhoto(updatedObjId, field, formData) {
-      return updatedObj[field] && initObj[field] !== updatedObj[field];
+      if (this.docData[updatedObjId][field]?.file)
-    },
+        formData.append(field, this.docData[updatedObjId][field]?.file[0]);
-    checkChengePhoto(initObj, updatedObj, field) {
-      return (
-        updatedObj[field]?.file &&
-        initObj[field]?.photo !== updatedObj[field]?.photo
-      );
     },
     async sendData(url, body) {
       return await fetchWrapper.post(url, body, "formData");
@@ -280,4 +271,9 @@ export default {
   min-width: 302px
 .icon-copy .cursor
   cursor: pointer !important
+.q-badge
+  padding: 4px
+  cursor: pointer
+.delete
+  background-color: var(--btn-red-color)
 </style>

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -3,6 +3,8 @@ import {
   ruleEmailValue,
   ruleMaxLength,
   ruleNotValue,
+  ruleDateValue,
+  ruleOptionalFields,
 } from "@/shared/utils/rulesInputs";
 
 export const baseDataForm = [
@@ -369,49 +371,53 @@ export const documentForm = [
         label: "Серия",
         type: "text",
         inputMask: "####",
-        checkField: (field) => {
-          return field.length === 4;
-        },
         errorMessage: {
           title: "Ошибка валидации",
-          message: "Серия паспорта заполнена неправильно",
+          message: "Серия паспорта менее 4 цифр или не заполнена",
         },
+        rules: [(val) => ruleLengthValue(val, 4)],
       },
       {
         key: "number",
         label: "Номер",
         type: "text",
         inputMask: "######",
-        checkField: (field) => {
-          return field.length === 6;
-        },
         errorMessage: {
           title: "Ошибка валидации",
-          message: "Номер паспорта заполнен неправильно",
+          message: "Номер паспорта менее 6 цифр или не заполнен",
         },
+        rules: [(val) => ruleLengthValue(val, 6)],
       },
       {
         key: "issued_by_org",
         label: "Кем выдан",
         type: "text",
+        errorMessage: {
+          title: "Ошибка валидации",
+          message: "Поле 'Кем выдан' не заполнено",
+        },
+        rules: [(val) => ruleNotValue(val)],
       },
       {
         key: "issued_by_org_code",
         label: "Код подраздел.",
         type: "text",
         inputMask: "###-###",
-        checkField: (field) => {
-          return field.length === 7;
-        },
         errorMessage: {
           title: "Ошибка валидации",
-          message: "Код подразделения заполнен неправильно",
+          message: "Код подразделения менее 6 цифр или не заполнен",
         },
+        rules: [(val) => ruleLengthValue(val, 7)],
       },
       {
         key: "issued_by_date",
         label: "Дата выдачи",
         type: "date",
+        rules: [(val) => ruleDateValue(val)],
+        errorMessage: {
+          title: "Ошибка валидации",
+          message: "Дата выдачи паспорта позднее текущего дня",
+        },
       },
       {
         key: "photo",
@@ -429,13 +435,11 @@ export const documentForm = [
         label: "Номер СНИЛС",
         type: "text",
         inputMask: "###-###-### ##",
-        checkField: (field) => {
-          return field.length === 14;
-        },
         errorMessage: {
           title: "Ошибка валидации",
-          message: "СНИЛС заполнен неправильно",
+          message: "СНИЛС содержит менее 11 цифр",
         },
+        rules: [(val) => ruleOptionalFields(val, 14)],
       },
       {
         key: "photo_insurance_number",
@@ -453,13 +457,11 @@ export const documentForm = [
         label: "Номер ИНН",
         type: "text",
         inputMask: "############",
-        checkField: (field) => {
-          return field.length === 12;
-        },
         errorMessage: {
           title: "Ошибка валидации",
-          message: "ИНН заполнен неправильно",
+          message: "ИНН содержит менее 12 цифр",
         },
+        rules: [(val) => ruleOptionalFields(val, 12)],
       },
       {
         key: "photo_tax_identification_number",

src/shared/utils/rulesInputs.js

@@ -1,3 +1,4 @@
+import * as moment from "moment/moment";
 export function ruleNotValue(val, text) {
   return !!val || text || false;
 }
@@ -6,6 +7,10 @@ export function ruleLengthValue(val, minLength, text) {
   return (val && val.length === minLength) || text || false;
 }
 
+export function ruleOptionalFields(val, minLength, text) {
+  return !val || val.length === minLength || text || false;
+}
+
 export function ruleEmailValue(val, text) {
   return (
     (val &&
@@ -21,3 +26,11 @@ export function ruleEmailValue(val, text) {
 export function ruleMaxLength(val, maxLength, text) {
   return (!!val && val.length <= maxLength) || text || false;
 }
+
+export function ruleDateValue(val, text) {
+  return (
+    (val && !moment(val).isAfter(moment().format("YYYY-MM-DD"))) ||
+    text ||
+    false
+  );
+}

src/store/modules/medicalCard.js

@@ -147,11 +147,11 @@ const getters = {
     );
     return {
       passport: {
-        id: passport?.id,
+        id: passport?.id ?? "",
-        series: passport?.series,
+        series: passport?.series ?? "",
-        number: passport?.number,
+        number: passport?.number ?? "",
-        issued_by_org: passport?.issued_by_org,
+        issued_by_org: passport?.issued_by_org ?? "",
-        issued_by_org_code: passport?.issued_by_org_code,
+        issued_by_org_code: passport?.issued_by_org_code ?? "",
         issued_by_date: passport?.issued_by_date
           ? new Date(passport?.issued_by_date)
           : null,
@@ -163,7 +163,7 @@ const getters = {
           : {},
       },
       insurance_number: {
-        insurance_number: person?.insurance_number,
+        insurance_number: person?.insurance_number ?? "",
         photo_insurance_number: person?.photo_insurance_number
           ? {
               photo: rootState.getUrl + person.photo_insurance_number,
@@ -172,7 +172,7 @@ const getters = {
           : {},
       },
       tax_identification_number: {
-        tax_identification_number: person?.tax_identification_number,
+        tax_identification_number: person?.tax_identification_number ?? "",
         photo_tax_identification_number: person?.photo_tax_identification_number
           ? {
               photo: rootState.getUrl + person?.photo_tax_identification_number,