diff --git a/src/components/deal/DealModal.vue b/src/components/deal/DealModal.vue index c8f1910..c23b7d8 100644 --- a/src/components/deal/DealModal.vue +++ b/src/components/deal/DealModal.vue @@ -91,6 +91,7 @@ optionValue="id" placeholder="Выберите заявку" :filter="true" + :class="{ 'p-invalid': errors.req_side_two }" @filter="filterRequisitionsList" :virtualScrollerOptions="{ itemSize: 40 }" > @@ -98,6 +99,7 @@ + {{ errorMessages.req_side_two }}
@@ -744,6 +746,7 @@ const errors = ref({ title: false, side_one: false, side_two: false, + req_side_two: false, deal_date: false }); @@ -751,9 +754,45 @@ const errorMessages = ref({ title: '', side_one: '', side_two: '', + req_side_two: '', deal_date: '' }); +watch(() => deal.value.title, () => { + if (errors.value.title) { + errors.value.title = false; + errorMessages.value.title = ''; + } +}); + +watch(() => deal.value.side_one, () => { + if (errors.value.side_one) { + errors.value.side_one = false; + errorMessages.value.side_one = ''; + } +}); + +watch(() => deal.value.side_two, () => { + if (errors.value.side_two) { + errors.value.side_two = false; + errorMessages.value.side_two = ''; + } +}); + +watch(() => deal.value.deal_date, () => { + if (errors.value.deal_date) { + errors.value.deal_date = false; + errorMessages.value.deal_date = ''; + } +}); + +watch(selectedRequisitionSideTwoId, () => { + if (errors.value.req_side_two) { + errors.value.req_side_two = false; + errorMessages.value.req_side_two = ''; + } +}); + const validateForm = () => { let isValid = true; @@ -791,6 +830,16 @@ const validateForm = () => { errorMessages.value.side_two = ''; } + // Валидация заявки стороны 2 + if (!selectedRequisitionSideTwoId.value) { + errors.value.req_side_two = true; + errorMessages.value.req_side_two = 'Выберите заявку стороны 2'; + isValid = false; + } else { + errors.value.req_side_two = false; + errorMessages.value.req_side_two = ''; + } + // Валидация даты сделки if (!deal.value.deal_date) { errors.value.deal_date = true; @@ -1539,9 +1588,19 @@ defineExpose({ closeModel }); .form__item { .p-invalid { + border-color: #e24c4c !important; + box-shadow: 0 0 0 1px #e24c4c; + } + + .p-error { color: #e24c4c; } + .error-highlight { + animation: shake 0.4s ease; + box-shadow: 0 0 0 2px #e24c4c; + } + label { font-size: 16px; font-weight: 400; @@ -1706,4 +1765,12 @@ defineExpose({ closeModel }); background: #f2f2f2; } +@keyframes shake { + 0%, 100% { transform: translateX(0); } + 20% { transform: translateX(-4px); } + 40% { transform: translateX(4px); } + 60% { transform: translateX(-4px); } + 80% { transform: translateX(4px); } +} +