WIP Сделана отправка данных
This commit is contained in:
Daria Golova
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user