WIP Сделана отправка данных

src/components/base/BaseInput.vue

@@ -9,9 +9,10 @@
       :outlined="outlined",
       :dense="dense",
       :type="type",
+      :readonly="readonly",
+      :disable="disabled",
       :filled="filled",
       :bg-color="filled || standout ? '' : 'white'",
-      :disable="disabled",
       :rules="rule",
       :lazy-rules="lazyRule",
       :item-aligned="itemAligned",
@@ -83,6 +84,7 @@ export default {
     placeholder: String,
     disabled: Boolean,
     label: String,
+    readonly: Boolean,
   },
   emits: ["update:modelValue"],
   computed: {
@@ -117,3 +119,9 @@ export default {
   opacity: 0
   cursor: pointer
 </style>
+<style lang="sass">
+.q-field--standout.q-field--readonly .q-field__control:before
+  border: none !important
+.q-field--standout .q-field__control
+  background: var(--bg-light-grey) !important
+</style>

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

@@ -34,15 +34,19 @@
             v-else,
             v-model="docData[data.dataKey][field.key]",
             @update:model-value="checkChangeDocData"
-            :disabled="!isEdit",
+            :readonly="!isEdit",
             :type="field.type",
-            :width="278",
+            textColor="var(--font-dark-blue-color)"
+            :width="checkCopiedFields(field.key) ? 260 : 278",
             :standout="!isEdit",
             :outlined="isEdit", 
             :rule="field.rules",
-            text-color="black",
             :mask="field?.inputMask"
           )
+            .icon-copy.my-auto.text-lg.label-field(
+              v-if="checkCopiedFields(field.key)",
+              @click="copyValue(docData[data.dataKey][field.key])"
+            )
 </template>
 
 <script>
@@ -55,6 +59,8 @@ import BaseUploadPhoto from "@/components/base/BaseUploadPhoto.vue";
 import { checkChangeData } 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 {
   name: "DocumentsForm",
   components: {
@@ -63,6 +69,7 @@ export default {
     BaseAvatar,
     BaseModal,
     BaseUploadPhoto,
+    TheNotificationProvider,
   },
   data() {
     return {
@@ -71,6 +78,12 @@ export default {
       docData: null,
       isCheckChange: false,
       isLoadingData: true,
+      copiedFields: [
+        "series",
+        "number",
+        "insurance_number",
+        "tax_identification_number",
+      ],
       initializationData: {
         passport: {
           id: null,
@@ -100,6 +113,12 @@ export default {
     },
   },
   methods: {
+    copyValue(text) {
+      navigator.clipboard.writeText(text);
+    },
+    checkCopiedFields(key) {
+      return !this.isEdit && this.copiedFields.some((elem) => elem === key);
+    },
     cancelEdit() {
       this.docData = JSON.parse(JSON.stringify(this.initialDocData));
       this.docData.passport.issued_by_date =
@@ -125,71 +144,33 @@ export default {
       this.updateDocData();
     },
     updateDocData() {
-      let {
-        passport,
-        insurance_number: insurance,
-        tax_identification_number: tax,
-      } = this.docData;
+      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 (insurance?.insurance_number)
-        documentsFormData.append(
-          "insurance_number",
-          insurance?.insurance_number
-        );
-      if (tax?.tax_identification_number)
-        documentsFormData.append(
-          "tax_identification_number",
-          tax?.tax_identification_number
-        );
-      if (
-        insurance?.photo_insurance_number?.file &&
-        insurance?.photo_insurance_number?.photo !==
-          this.initialDocData.insurance_number?.photo_insurance_number.photo
-      )
-        documentsFormData.append(
-          "photo_insurance_number",
-          insurance?.photo_insurance_number?.file[0]
-        );
-      if (
-        tax?.photo_tax_identification_number?.file &&
-        tax?.photo_tax_identification_number.photo !==
-          this.initialDocData.tax_identification_number
-            ?.photo_tax_identification_number.photo
-      )
-        documentsFormData.append(
-          "photo_tax_identification_number",
-          tax?.photo_tax_identification_number?.file[0]
-        );
-      Object.keys(passport).forEach((key) => {
-        if (key === "issued_by_date" && passport[key]) {
-          passportFormData.append(
-            "issued_by_date",
-            moment(passport.issued_by_date).format("YYYY-MM-DD")
-          );
-          return;
-        }
-        if (
-          key === "photo" &&
-          passport?.photo?.file &&
-          this.checkChangeField(
-            this.initialDocData?.passport?.photo,
-            passport?.photo,
-            "photo"
-          )
-        ) {
-          passportFormData.append(key, passport[key]?.file[0]);
-          return;
-        }
-        if (
-          key !== "photo" &&
-          this.checkChangeField(this.initialDocData.passport, passport, key)
-        ) {
-          passportFormData.append(key, passport[key]);
-          return;
-        }
-      });
       if (!passport.id)
         request.push(
           this.sendData("general/identity_document/create/", passportFormData)
@@ -213,12 +194,57 @@ export default {
         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) {
-      return initObj[field] !== updatedObj[field];
+      return updatedObj[field] && initObj[field] !== updatedObj[field];
+    },
+    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");
     },
+    addErrorNotification(title, message) {
+      addNotification(title + message, title, message, "error", 5000);
+    },
   },
   watch: {
     initialDocData: {
@@ -252,4 +278,6 @@ export default {
   color: var(--btn-blue-color)
 .photo-field
   min-width: 302px
+.icon-copy .cursor
+  cursor: pointer !important
 </style>

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -322,12 +322,26 @@ export const documentForm = [
         label: "Серия",
         type: "text",
         inputMask: "####",
+        checkField: (field) => {
+          return field.length === 4;
+        },
+        errorMessage: {
+          title: "Ошибка валидации",
+          message: "Серия паспорта заполнена неправильно",
+        },
       },
       {
         key: "number",
         label: "Номер",
         type: "text",
         inputMask: "######",
+        checkField: (field) => {
+          return field.length === 6;
+        },
+        errorMessage: {
+          title: "Ошибка валидации",
+          message: "Номер паспорта заполнен неправильно",
+        },
       },
       {
         key: "issued_by_org",
@@ -339,6 +353,13 @@ export const documentForm = [
         label: "Код подраздел.",
         type: "text",
         inputMask: "###-###",
+        checkField: (field) => {
+          return field.length === 7;
+        },
+        errorMessage: {
+          title: "Ошибка валидации",
+          message: "Код подразделения заполнен неправильно",
+        },
       },
       {
         key: "issued_by_date",
@@ -361,6 +382,13 @@ export const documentForm = [
         label: "Номер СНИЛС",
         type: "text",
         inputMask: "###-###-### ##",
+        checkField: (field) => {
+          return field.length === 14;
+        },
+        errorMessage: {
+          title: "Ошибка валидации",
+          message: "СНИЛС заполнен неправильно",
+        },
       },
       {
         key: "photo_insurance_number",
@@ -378,6 +406,13 @@ export const documentForm = [
         label: "Номер ИНН",
         type: "text",
         inputMask: "############",
+        checkField: (field) => {
+          return field.length === 12;
+        },
+        errorMessage: {
+          title: "Ошибка валидации",
+          message: "ИНН заполнен неправильно",
+        },
       },
       {
         key: "photo_tax_identification_number",