WIP Изменила инпут, сделала документы

src/components/base/BaseInputDate.vue

@@ -9,7 +9,7 @@
       :readonly="readonly",
       :disable="disabled",
       mask="##.##.####",
-      :rules="[checkInput]",
+      :rules="[(val) => rule ? rule(val) : defaultRule(val)]",
       :lazy-rules="lazyRule",
       :item-aligned="itemAligned",
       no-error-icon,
@@ -60,7 +60,8 @@ export default {
     width: Number,
     lazyRule: [Boolean, String],
     itemAligned: Boolean,
-    modelValue: Date,
+    rule: Function,
+    modelValue: String,
     placeholder: String,
     disabled: Boolean,
     label: String,
@@ -74,32 +75,21 @@ export default {
     return {
       calendarVisibility: false,
       internalDate: null,
+      //internalValue: null,
     };
   },
   computed: {
     value: {
       get() {
-        if (
+        this.changeInternalDate(
-          moment(this.modelValue).isValid() &&
+          moment(this.convertFormat(this.modelValue)).isValid()
-          typeof this.modelValue === "object"
+            ? moment(this.convertFormat(this.modelValue))
-        ) {
-          this.changeInternalDate(moment(this.modelValue));
-          return moment(this.modelValue).format("DD.MM.YYYY");
-        }
-        if (moment(this.convertFormat(this.modelValue)).isValid()) {
-          this.changeInternalDate(moment(this.modelValue));
-          return this.modelValue;
-        }
-        this.changeInternalDate(null);
-        return null;
-      },
-      set(value) {
-        this.$emit(
-          "update:modelValue",
-          moment(this.convertFormat(value)).isValid()
-            ? new Date(moment(this.convertFormat(value)))
             : null
         );
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
       },
     },
     sizeVariable() {
@@ -153,8 +143,8 @@ export default {
         ? date.split(".").reverse().join("-")
         : null;
     },
-    checkInput(val) {
+    defaultRule(val) {
-      return moment(this.convertFormat(val)).isValid();
+      return !val || moment(this.convertFormat(val)).isValid();
     },
     closeCalendar() {
       this.calendarVisibility = false;

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

@@ -29,9 +29,10 @@
                 floating,
                 v-if="isEdit",
                 rounded,
-                @click="removeImage(data?.dataKey, field?.key)"
+                @click="removeImage(data?.dataKey, field?.key)",
+                :style="{padding: 0}"
               )
-                q-icon.icon-cancel(name="app:cancel", size="8px")
+                q-icon.cancel-icon(name="app:cancel-mini", size="16px")
             .replace-photo.font-medium.text-base.cursor-pointer(
               v-if="isEdit",
               @click="openModal(data.dataKey)",
@@ -44,46 +45,30 @@
           base-input-date(
             v-if="field.type === 'date'",
             v-model="docData[data.dataKey][field.key]",
-            :name="field.key",
+            :name="data.dataKey + ':' + field.key",
             @update:model-value="checkChangeDocData",
             :readonly="!isEdit",
             :width="302",
             :mask="field?.inputMask",
-            :rule="[(val) => !personDataField.includes(field.key) ? checkPassportFields(val, field.rules) : field.rules(val)]",
+            :rule="(val) => !personDataField.includes(data.dataKey + ':' + field.key) ? checkPassportFields(val, field.rules) : field.rules(val)",
-            :autogrow="field.key === 'issued_by_org'",
+            size="M",
-            size="M"
           )
           base-input(
-            v-if="field.type === 'text' && field.key !== 'issued_by_org'",
+            v-if="field.type === 'text'",
             v-model="docData[data.dataKey][field.key]",
-            :name="field.key",
+            :name="data.dataKey + ':' + field.key",
             @update:model-value="checkChangeDocData",
             :readonly="!isEdit",
             :type="field.type",
             :width="302",
             :mask="field?.inputMask",
-            :rule="[(val) => !personDataField.includes(field.key) ? checkPassportFields(val, field.rules) : field.rules(val)]",
+            :rule="[(val) => !personDataField.includes(data.dataKey + ':' + field.key) ? checkPassportFields(val, field.rules) : field.rules(val)]",
             size="M"
           )
             .icon-copy.my-auto.text-lg.label-field.cursor-pointer(
               v-if="checkCopiedFields(field.key) && !!docData[data.dataKey][field.key]",
               @click="copyValue(docData[data.dataKey][field.key])"
             )
-          base-textarea(
-            v-if="field.type === 'text' && field.key === 'issued_by_org'",
-            v-model="docData[data.dataKey][field.key]",
-            :name="field.key",
-            @update:model-value="checkChangeDocData",
-            :readonly="!isEdit",
-            :type="field.type",
-            :width="302",
-            :mask="field?.inputMask",
-            :rule="[(val) => !personDataField.includes(field.key) ? checkPassportFields(val, field.rules) : field.rules(val)]",
-            autogrow,
-            size="auto",
-            height="57px"
-            padding="10px 16px"
-          )
 </template>
 
 <script>
@@ -101,7 +86,7 @@ import TheNotificationProvider from "@/components/Notifications/TheNotificationP
 import { addNotification } from "@/components/Notifications/notificationContext";
 import BaseInput from "@/components/base/BaseInput.vue";
 import BaseInputDate from "@/components/base/BaseInputDate.vue";
-import BaseTextarea from "@/components/base/BaseTextarea.vue.vue";
+import { mapActions } from "vuex";
 export default {
   name: "DocumentsForm",
   components: {
@@ -112,7 +97,6 @@ export default {
     BaseUploadPhoto,
     TheNotificationProvider,
     BaseInputDate,
-    BaseTextarea,
   },
   data() {
     return {
@@ -133,21 +117,26 @@ export default {
           id: null,
           series: null,
           number: null,
-          issued_by_org: null,
+          issued_by: null,
           issued_by_org_code: null,
-          issued_by_date: null,
+          issued_at: null,
-          photo: null,
+          attachments: null,
         },
         insurance_number: {
-          insurance_number: null,
+          id: null,
-          photo_insurance_number: null,
+          number: null,
+          attachments: null,
         },
         tax_identification_number: {
-          tax_identification_number: null,
+          id: null,
-          photo_tax_identification_number: null,
+          number: null,
+          attachments: null,
         },
       },
-      personDataField: ["insurance_number", "tax_identification_number"],
+      personDataField: [
+        "insurance_number:number",
+        "tax_identification_number:number",
+      ],
       showModal: false,
       photoId: "",
     };
@@ -157,7 +146,7 @@ export default {
       return this.$store.state.medical?.documents;
     },
     passportFields() {
-      let excludedFields = ["photo", "id"];
+      let excludedFields = ["attachments", "id", "category"];
       return Object.keys(this.docData.passport).filter(
         (key) => !excludedFields.includes(key)
       );
@@ -191,8 +180,6 @@ export default {
     },
     cancelEdit() {
       this.docData = JSON.parse(JSON.stringify(this.initialDocData));
-      this.docData.passport.issued_by_date =
-        this.initialDocData?.passport?.issued_by_date;
       this.isEdit = false;
       this.isCheckChange = false;
       this.$refs.documentForm.resetValidation();
@@ -217,95 +204,72 @@ export default {
         if (!validate) {
           getFieldsNameUnvalidated(form).forEach((elem) => {
             let error = {};
-            this.configData.forEach(({ fields }) => {
+            this.configData.forEach(({ dataKey, fields }) => {
-              let findedElem = fields.find((el) => el.key === elem);
+              let findedElem = fields.find(
+                (el) => dataKey + ":" + el.key === elem
+              );
               if (findedElem) error = findedElem?.errorMessage;
             });
             this.addErrorNotification(error?.title, error?.message);
           });
         } else {
-          let passportFormData = new FormData();
-          let documentsFormData = new FormData();
-          form.getValidationComponents().forEach((elem) => {
-            if (!this.personDataField.includes(elem.name)) {
-              if (elem.name === "issued_by_date") {
-                passportFormData.append(
-                  elem.name,
-                  this.convertFormat(elem.modelValue) ?? ""
-                );
-              } else passportFormData.append(elem.name, elem.modelValue ?? "");
-            } else documentsFormData.append(elem.name, elem.modelValue ?? "");
-          });
-          this.checkChangePhoto("passport", "photo", passportFormData);
-          this.checkChangePhoto(
-            "insurance_number",
-            "photo_insurance_number",
-            documentsFormData
-          );
-          this.checkChangePhoto(
-            "tax_identification_number",
-            "photo_tax_identification_number",
-            documentsFormData
-          );
           let request = [];
-          if (!this.approvedPassportData) {
+          Object.keys(this.docData).forEach((elem) => {
-            if (!this.initialDocData.passport?.id) {
+            let formData = new FormData();
-              passportFormData.append("kind", "PASSPORT");
+            form
-              passportFormData.append(
+              .getValidationComponents()
-                "person",
+              .filter(({ name }) => name?.split(":")?.[0] === elem)
+              .forEach((el) => {
+                const name = el?.name?.split(":")?.[1];
+                if (name === "issued_at")
+                  formData.append(name, this.convertFormat(el.modelValue));
+                else formData.append(name, el.modelValue ?? "");
+              });
+            this.checkChangePhoto(elem, "attachments", formData);
+            if (formData.get("attachments")) {
+              console.log(elem, "img", formData.get("attachments"));
+              formData.delete("attachments");
+            }
+            if (formData.get("issued_by_org_code")) {
+              console.log(
+                "issued_by_org_code",
+                formData.get("issued_by_org_code")
+              );
+              formData.delete("issued_by_org_code");
+            }
+            if (
+              !checkChangeData(
+                this.initialDocData?.[elem],
+                this.docData?.[elem]
+              )
+            )
+              return;
+            formData.append("category", elem);
+            if (!this.initialDocData?.[elem]?.id) {
+              formData.append(
+                "person_id",
                 this.$store.state.medical?.basicData?.personalData?.id
               );
-              request.push(
+              // for (const key of formData.keys()) {
-                this.sendData(
+              //   console.log(key, formData.get(key));
-                  "general/identity_document/create/",
+              // }
-                  passportFormData
+              request.push(this.createData("documents/", formData));
-                )
-              );
             } else {
-              if (this.checkPhotoDeletion("passport", "photo"))
+              // for (const key of formData.keys()) {
-                request.push(
+              //   console.log(key, formData.get(key));
-                  this.deletePhoto(
+              // }
-                    `general/identity_document/${this.initialDocData.passport?.id}/delete_photo/`
-                  )
-                );
               request.push(
-                this.sendData(
+                this.updateData(
-                  `general/identity_document/${this.initialDocData.passport?.id}/update/`,
+                  `documents/${this.initialDocData?.[elem]?.id}`,
-                  passportFormData
+                  formData
                 )
               );
             }
-          }
+          });
-          if (
-            this.checkPhotoDeletion(
-              "insurance_number",
-              "photo_insurance_number"
-            )
-          )
-            request.push(
-              this.deletePhoto(
-                `general/person/${this.$store.state.medical?.basicData?.personalData?.id}/delete_photo_insurance_number/`
-              )
-            );
-          if (
-            this.checkPhotoDeletion(
-              "tax_identification_number",
-              "photo_tax_identification_number"
-            )
-          )
-            request.push(
-              this.deletePhoto(
-                `general/person/${this.$store.state.medical?.basicData?.personalData?.id}/delete_photo_tax_identification_number/`
-              )
-            );
-          request.push(
-            this.sendData(
-              `general/person/${this.$store.state.medical?.basicData?.personalData?.id}/update/`,
-              documentsFormData
-            )
-          );
           Promise.allSettled(request).then(() => {
-            this.$store.dispatch("getMedicalCardData");
+            this.getMedicalCardData({
+              personId: this.$store.state.medical?.basicData?.personalData?.id,
+            });
             this.isEdit = false;
             this.isCheckChange = false;
             this.$refs.form?.resetValidation();
@@ -323,9 +287,12 @@ export default {
         this.initialDocData[updatedObjId][field]?.photo
       );
     },
-    async sendData(url, body) {
+    async createData(url, body) {
       return await fetchWrapper.post(url, body, "formData");
     },
+    async updateData(url, body) {
+      return await fetchWrapper.patch(url, body, "formData");
+    },
     async deletePhoto(url) {
       return await fetchWrapper.del(url);
     },
@@ -333,8 +300,11 @@ export default {
       addNotification(title + message, title, message, "error", 5000);
     },
     convertFormat(date) {
-      return date ? date.split(".").reverse().join("-") : null;
+      return date ? date.split(".").reverse().join("-") : "";
     },
+    ...mapActions({
+      getMedicalCardData: "getMedicalCardDataByPersonId",
+    }),
   },
   watch: {
     initialDocData: {
@@ -342,9 +312,7 @@ export default {
       immediate: true,
       handler(value) {
         if (Object.keys(value).length) {
-          this.docData = JSON.parse(JSON.stringify(this.initialDocData));
+          this.docData = JSON.parse(JSON.stringify(value));
-          this.docData.passport.issued_by_date =
-            this.initialDocData?.passport?.issued_by_date;
         } else this.docData = this.initializationData;
       },
     },
@@ -377,4 +345,6 @@ export default {
   cursor: pointer
 .delete
   background-color: var(--btn-red-color)
+.cancel-icon :deep(path)
+  fill: white
 </style>

src/pages/newMedicalCard/components/MedicalBasicDataWrapper.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   .flex.flex-col.gap-y-2.wrapper.h-full.w-full
     basic-data-form
-    contacts-form
+    //contacts-form
     documents-form
     insurance-form
 </template>

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -475,7 +475,7 @@ export const documentForm = [
         rules: (val) => ruleLengthValue(val, 6),
       },
       {
-        key: "issued_by_org",
+        key: "issued_by",
         label: "Кем выдан",
         type: "text",
         errorMessage: {
@@ -496,7 +496,7 @@ export const documentForm = [
         rules: (val) => ruleLengthValue(val, 7),
       },
       {
-        key: "issued_by_date",
+        key: "issued_at",
         label: "Дата выдачи",
         type: "date",
         rules: (val) => ruleDateValue(val),
@@ -506,7 +506,7 @@ export const documentForm = [
         },
       },
       {
-        key: "photo",
+        key: "attachments",
         label: "Фото паспорта",
         type: "photo",
       },
@@ -517,7 +517,7 @@ export const documentForm = [
     dataKey: "insurance_number",
     fields: [
       {
-        key: "insurance_number",
+        key: "number",
         label: "Номер СНИЛС",
         type: "text",
         inputMask: "###-###-### ##",
@@ -528,7 +528,7 @@ export const documentForm = [
         rules: (val) => ruleOptionalFields(val, 14),
       },
       {
-        key: "photo_insurance_number",
+        key: "attachments",
         label: "Фото СНИЛС",
         type: "photo",
       },
@@ -539,7 +539,7 @@ export const documentForm = [
     dataKey: "tax_identification_number",
     fields: [
       {
-        key: "tax_identification_number",
+        key: "number",
         label: "Номер ИНН",
         type: "text",
         inputMask: "############",
@@ -550,7 +550,7 @@ export const documentForm = [
         rules: (val) => ruleOptionalFields(val, 12),
       },
       {
-        key: "photo_tax_identification_number",
+        key: "attachments",
         label: "Фото ИНН",
         type: "photo",
       },

src/shared/utils/rulesInputs.js

@@ -1,4 +1,5 @@
 import * as moment from "moment/moment";
+
 export function ruleNotValue(val, text) {
   return !!val || text || false;
 }
@@ -21,12 +22,16 @@ export function ruleMaxLength(val, maxLength, text) {
 }
 
 export function ruleDateValue(val, text) {
+  let date = moment(
+    val && val?.length === 10 ? val.split(".").reverse().join("-") : null
+  );
   return (
-    (val && !moment(val).isAfter(moment().format("YYYY-MM-DD"))) ||
+    (date.isValid() && !date.isAfter(moment().format("YYYY-MM-DD"))) ||
     text ||
     false
   );
 }
+
 export function ruleNumberInput(val, max, min, text) {
   return (val <= max && val >= min) || text || false;
 }

src/store/modules/medicalCard.js

@@ -214,41 +214,53 @@ const getters = {
     };
   },
   getDocumentsData(state, rootState) {
-    let person = state.medicalCard?.person;
+    const person = state.medicalCard?.person,
-    const passport = person?.identity_document?.find(
+      passport = person?.documents?.find(
-      (el) => el.kind === "PASSPORT"
+        ({ category }) => category === "passport"
-    );
+      ),
+      insurance_number = person?.documents?.find(
+        ({ category }) => category === "insurance_number"
+      ),
+      tax_identification_number = person?.documents?.find(
+        ({ category }) => category === "tax_identification_number"
+      );
     return {
       passport: {
-        id: passport?.id ?? "",
+        category: passport?.category || "",
-        series: passport?.series ?? "",
+        id: passport?.id || "",
-        number: passport?.number ?? "",
+        series: passport?.series || "",
-        issued_by_org: passport?.issued_by_org ?? "",
+        number: passport?.number || "",
-        issued_by_org_code: passport?.issued_by_org_code ?? "",
+        issued_by: passport?.issued_by || "",
-        issued_by_date: passport?.issued_by_date
+        issued_by_org_code: passport?.issued_by_org_code || "",
-          ? new Date(passport?.issued_by_date)
+        issued_at: passport?.issued_at
-          : null,
+          ? passport?.issued_at?.split("-")?.reverse()?.join(".")
-        photo: passport?.photo
+          : "",
+        attachments: passport?.attachments?.length
           ? {
-              photo: rootState.getUrl + passport.photo,
+              photo: rootState.getUrl + passport?.attachments?.[0],
               file: null,
             }
           : {},
       },
       insurance_number: {
-        insurance_number: person?.insurance_number ?? "",
+        category: insurance_number?.category || "",
-        photo_insurance_number: person?.photo_insurance_number
+        id: insurance_number?.id || "",
+        number: insurance_number?.number || "",
+        attachments: insurance_number?.attachments?.length
           ? {
-              photo: rootState.getUrl + person.photo_insurance_number,
+              photo: rootState.getUrl + insurance_number.attachments?.[0],
               file: null,
             }
           : {},
       },
       tax_identification_number: {
-        tax_identification_number: person?.tax_identification_number ?? "",
+        category: tax_identification_number?.category || "",
-        photo_tax_identification_number: person?.photo_tax_identification_number
+        id: tax_identification_number?.id || "",
+        number: tax_identification_number?.number || "",
+        attachments: tax_identification_number?.attachments?.length
           ? {
-              photo: rootState.getUrl + person?.photo_tax_identification_number,
+              photo:
+                rootState.getUrl + tax_identification_number?.attachments?.[0],
               file: null,
             }
           : {},