From c63c36ba3adb3ca5e19f569b18a80c5e5c75064c Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Mon, 17 Apr 2023 18:02:07 +0300 Subject: [PATCH] =?UTF-8?q?WIP=20=D0=9F=D0=BE=D0=B4=D1=82=D1=8F=D0=BD?= =?UTF-8?q?=D1=83=D0=BB=D0=B0=20=D0=BA=D0=B0=D1=80=D1=82=D0=B8=D0=BD=D0=BA?= =?UTF-8?q?=D0=B8=20=D0=B8=D0=B7=20=D1=81=D1=82=D0=BE=D1=80=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/base/BaseInput.vue | 9 ++- src/components/base/BaseUploadPhoto.vue | 2 +- .../BasicDataForms/DocumentsForm.vue | 61 ++++++++++++---- .../newMedicalCard/utils/medicalConfig.js | 7 +- src/store/modules/medicalCard.js | 73 ++++++++++++------- 5 files changed, 106 insertions(+), 46 deletions(-) diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue index 0fd5c5e..50b2a7e 100644 --- a/src/components/base/BaseInput.vue +++ b/src/components/base/BaseInput.vue @@ -88,9 +88,12 @@ export default { computed: { value: { get() { - return this.type === "date" - ? this.modelValue?.toISOString().split("T")[0] - : this.modelValue; + if (this.type === "date") { + return this.modelValue + ? this.modelValue?.toISOString().split("T")[0] + : null; + } + return this.modelValue; }, set(value) { this.type === "date" diff --git a/src/components/base/BaseUploadPhoto.vue b/src/components/base/BaseUploadPhoto.vue index 2bfeffd..98a8bd0 100644 --- a/src/components/base/BaseUploadPhoto.vue +++ b/src/components/base/BaseUploadPhoto.vue @@ -57,7 +57,7 @@ export default { }, }, created() { - if (this.value.photo) { + if (this.value?.photo) { this.image = this.value.photo; } }, diff --git a/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue b/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue index f58cfec..4ff43cb 100644 --- a/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue +++ b/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue @@ -5,31 +5,43 @@ :is-edit="isEdit", :cancel="cancelEdit", :open-edit="openEdit", + :save="saveChange" ) .form-wrap.gap-24.w-full - .data-section.flex.flex-col.gap-4(v-for="data in configData") + .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(v-for="field in data.fields") + .flex.w-full.justify-between.items-center.gap-4( + v-for="field in data.fields", + :key="field.label" + ) .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}} .photo-field.flex.gap-3.items-center(v-if="field.type === 'photo'") - img.photo.object-cover( - v-if="docData[data.dataKey][field.key]", - :src="docData[data.dataKey][field.key]", + 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]", ) .replace-photo.font-medium.text-base.cursor-pointer( - v-if="isEdit" - ) {{ docData[data.dataKey][field.key] ? "Заменить фото" : "Добавить фото"}} + v-if="isEdit", + @click="openModal(data.dataKey)", + ) {{ docData[data.dataKey][field.key]?.photo ? "Заменить фото" : "Добавить фото"}} + base-modal(v-model="showModal", title="Загрузить изображение" v-if="photoId === data.dataKey") + base-upload-photo( + v-model="docData[photoId][field.key]", + :confirm-upload="confirmChangePhoto", + ) base-input( v-else, v-model="docData[data.dataKey][field.key]", @update:model-value="checkChangeDocData" :disabled="!isEdit", + :type="field.type", :width="278", :standout="!isEdit", :outlined="isEdit", :rule="field.rules", text-color="black", + :mask="field?.inputMask" ) @@ -38,10 +50,17 @@ import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWra import { documentForm } from "@/pages/newMedicalCard/utils/medicalConfig"; import BaseInput from "@/components/base/BaseInput.vue"; import BaseAvatar from "@/components/base/BaseAvatar.vue"; -import BaseLoader from "@/components/Loader/BaseLoader.vue"; +import BaseModal from "@/components/base/BaseModal.vue"; +import BaseUploadPhoto from "@/components/base/BaseUploadPhoto.vue"; export default { name: "DocumentsForm", - components: { MedicalFormWrapper, BaseInput, BaseAvatar, BaseLoader }, + components: { + MedicalFormWrapper, + BaseInput, + BaseAvatar, + BaseModal, + BaseUploadPhoto, + }, data() { return { configData: documentForm, @@ -68,6 +87,8 @@ export default { photo_tax_identification_number: null, }, }, + showModal: false, + photoId: "", }; }, computed: { @@ -78,7 +99,10 @@ export default { methods: { 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; }, openEdit() { this.isEdit = true; @@ -87,15 +111,28 @@ export default { this.isCheckChange = JSON.stringify(this.docData) !== JSON.stringify(this.initialDocData); }, + openModal(id) { + this.photoId = id; + this.showModal = true; + }, + confirmChangePhoto() { + this.showModal = false; + this.isCheckChange = true; + }, + saveChange() { + //console.log(this.docData); + }, }, watch: { initialDocData: { deep: true, immediate: true, handler(value) { - if (Object.keys(value).length) + if (Object.keys(value).length) { this.docData = JSON.parse(JSON.stringify(this.initialDocData)); - else this.docData = this.initializationData; + this.docData.passport.issued_by_date = + this.initialDocData?.passport?.issued_by_date; + } else this.docData = this.initializationData; }, }, }, @@ -118,6 +155,4 @@ export default { color: var(--btn-blue-color) .photo-field min-width: 302px -.photo - height: 100% diff --git a/src/pages/newMedicalCard/utils/medicalConfig.js b/src/pages/newMedicalCard/utils/medicalConfig.js index 729fcb6..b188656 100644 --- a/src/pages/newMedicalCard/utils/medicalConfig.js +++ b/src/pages/newMedicalCard/utils/medicalConfig.js @@ -314,11 +314,13 @@ export const documentForm = [ key: "series", label: "Серия", type: "text", + inputMask: "####", }, { key: "number", label: "Номер", type: "text", + inputMask: "######", }, { key: "issued_by_org", @@ -329,6 +331,7 @@ export const documentForm = [ key: "issued_by_org_code", label: "Код подраздел.", type: "text", + inputMask: "###-###", }, { key: "issued_by_date", @@ -350,6 +353,7 @@ export const documentForm = [ key: "insurance_number", label: "Номер СНИЛС", type: "text", + inputMask: "###-###-### ##", }, { key: "photo_insurance_number", @@ -365,7 +369,8 @@ export const documentForm = [ { key: "tax_identification_number", label: "Номер ИНН", - type: "text", + type: "number", + inputMask: "############", }, { key: "photo_tax_identification_number", diff --git a/src/store/modules/medicalCard.js b/src/store/modules/medicalCard.js index 08d64e9..842e9b8 100644 --- a/src/store/modules/medicalCard.js +++ b/src/store/modules/medicalCard.js @@ -131,6 +131,48 @@ const getters = { }, }; }, + getDocumentsData(state, rootState) { + let person = state.medicalCard?.person; + const passport = person?.identity_document.find( + (el) => el.kind === "PASSPORT" + ); + return { + passport: { + id: passport?.id, + series: passport?.series, + number: passport?.number, + issued_by_org: passport?.issued_by_org, + issued_by_org_code: passport?.issued_by_org_code, + issued_by_date: passport?.issued_by_date + ? new Date(passport?.issued_by_date) + : null, + photo: passport?.photo + ? { + photo: rootState.getUrl + passport.photo, + file: null, + } + : {}, + }, + insurance_number: { + insurance_number: person?.insurance_number, + photo_insurance_number: person?.photo_insurance_number + ? { + photo: rootState.getUrl + person.photo_insurance_number, + file: null, + } + : {}, + }, + 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, + file: null, + } + : {}, + }, + }; + }, getContactsData(state) { let phones = state.medicalCard.person.contacts .filter((el) => el.kind === "PHONE") @@ -171,7 +213,7 @@ const actions = { commit("setMedicalCard", res); commit("setBasicData"); commit("setContactsData"); - commit("setDocumentData", res.person); + commit("setDocumentsData"); }); }, returnInitData({ commit }) { @@ -241,33 +283,8 @@ const mutations = { setContactsData(state) { state.contactsData = { ...this.getters.getContactsData }; }, - setDocumentData(state, data, rootState) { - const passport = data?.identity_document.find( - (el) => el.kind === "PASSPORT" - ); - state.documents = { - passport: { - id: passport?.id, - series: passport?.series, - number: passport?.number, - issued_by_org: passport?.issued_by_org, - issued_by_org_code: passport?.issued_by_org_code, - issued_by_date: passport?.issued_by_date, - photo: passport?.photo ? rootState.getUrl + passport.photo : "", - }, - insurance_number: { - insurance_number: data?.insurance_number, - photo_insurance_number: data?.photo_insurance_number - ? rootState.getUrl + data.photo_insurance_number - : "", - }, - tax_identification_number: { - tax_identification_number: data?.tax_identification_number, - photo_tax_identification_number: data?.photo_tax_identification_number - ? rootState.getUrl + data?.photo_tax_identification_number - : "", - }, - }; + setDocumentsData(state) { + state.documents = { ...this.getters.getDocumentsData }; }, };