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

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(
-              v-if="docData[data.dataKey][field.key]?.photo",
-              :src="docData[data.dataKey][field.key]?.photo",
-              :alt="docData[data.dataKey][field.label]",
+            q-avatar(
+              square,
+              size="40px",
+              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)"
-            :width="checkCopiedFields(field.key) ? 260 : 278",
+            textColor="var(--font-dark-blue-color)",
+            :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,103 +161,74 @@ export default {
       this.isCheckChange = true;
     },
     saveChange() {
-      this.updateDocData();
-    },
-    updateDocData() {
-      let { insurance_number: insurance, tax_identification_number: tax } =
-        this.docData;
-      let passport = JSON.parse(JSON.stringify(this.docData.passport));
-      passport.issued_by_date = moment(passport.issued_by_date).format(
-        "YYYY-MM-DD"
-      );
-      passport.photo = this.docData.passport.photo;
-      let initData = JSON.parse(JSON.stringify(this.initialDocData));
-      initData.passport.issued_by_date = moment(
-        initData.passport.issued_by_date
-      ).format("YYYY-MM-DD");
-      let documentsFormData = new FormData();
-      let passportFormData = new FormData();
-      this.fillResultData(initData, passport, "passport", passportFormData);
-      this.fillResultData(
-        initData,
-        insurance,
-        "insurance_number",
-        documentsFormData
-      );
-      this.fillResultData(
-        initData,
-        tax,
-        "tax_identification_number",
-        documentsFormData
-      );
-      let request = [];
-      if (!passport.id)
-        request.push(
-          this.sendData("general/identity_document/create/", passportFormData)
-        );
-      else
-        request.push(
-          this.sendData(
-            `general/identity_document/${passport.id}/update/`,
-            passportFormData
-          )
-        );
-      request.push(
-        this.sendData(
-          `general/person/${this.$store.state.medical?.basicData?.personalData?.id}/update/`,
-          documentsFormData
-        )
-      );
-      Promise.allSettled(request).then(() => {
-        this.$store.dispatch("getMedicalCardData");
-        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
+      const form = this.$refs.documentForm;
+      form.validate().then((validate) => {
+        if (!validate) {
+          getFieldsNameUnvalidated(form).forEach((elem) => {
+            let error = {};
+            this.configData.forEach(({ fields }) => {
+              let findedElem = fields.find((el) => el.key === elem);
+              if (findedElem) error = findedElem?.errorMessage;
+            });
+            this.addErrorNotification(error?.title, error?.message);
+          });
+          this.cancelEdit();
+        } else {
+          let passportFormData = new FormData();
+          let documentsFormData = new FormData();
+          form.getValidationComponents().forEach((elem) => {
+            if (!this.personDataField.includes(elem.name))
+              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.checkChengePhoto(
+            "tax_identification_number",
+            "photo_tax_identification_number",
+            documentsFormData
+          );
+          let request = [];
+          if (!this.initialDocData.passport?.id) {
+            passportFormData.append("kind", "PASSPORT");
+            passportFormData.append(
+              "person",
+              this.$store.state.medical?.basicData?.personalData?.id
             );
-            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
+            request.push(
+              this.sendData(
+                "general/identity_document/create/",
+                passportFormData
+              )
             );
-            return;
-          }
-          formData.append(key, updateObj[key]);
-          return;
+          } else
+            request.push(
+              this.sendData(
+                `general/identity_document/${this.initialDocData.passport?.id}/update/`,
+                passportFormData
+              )
+            );
+          request.push(
+            this.sendData(
+              `general/person/${this.$store.state.medical?.basicData?.personalData?.id}/update/`,
+              documentsFormData
+            )
+          );
+          Promise.allSettled(request).then(() => {
+            this.$store.dispatch("getMedicalCardData");
+            this.isEdit = false;
+            this.isCheckChange = false;
+          });
         }
       });
-      return;
     },
-    checkChangeField(initObj, updatedObj, field) {
-      return updatedObj[field] && initObj[field] !== updatedObj[field];
-    },
-    checkChengePhoto(initObj, updatedObj, field) {
-      return (
-        updatedObj[field]?.file &&
-        initObj[field]?.photo !== updatedObj[field]?.photo
-      );
+    checkChengePhoto(updatedObjId, field, formData) {
+      if (this.docData[updatedObjId][field]?.file)
+        formData.append(field, this.docData[updatedObjId][field]?.file[0]);
     },
     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>