311 lines
11 KiB
Vue
311 lines
11 KiB
Vue
<template>
|
|
<div class="">
|
|
<p class="has-text-centered title is-4 has-text-danger mb-4">
|
|
Vui lòng kiểm tra kỹ thông tin trước khi thay đổi ngày đến hạn
|
|
</p>
|
|
|
|
<div v-if="loadingData" class="has-text-centered py-5">
|
|
<SvgIcon v-bind="{ name: 'loading.svg', type: 'primary', size: 18 }" />
|
|
<p class="mt-2">{{ isVietnamese ? 'Đang tải thông tin công nợ...' : 'Loading payment schedule information...' }}
|
|
</p>
|
|
</div>
|
|
|
|
<div v-else-if="paymentScheduleData">
|
|
<div class="content">
|
|
<div class="columns is-multiline is-mobile">
|
|
<div class="column is-4">
|
|
<strong>{{ isVietnamese ? 'Mã:' : 'Schedule Code:' }}</strong>
|
|
<p>{{ paymentScheduleData.code || '-' }}</p>
|
|
</div>
|
|
<div class="column is-4">
|
|
<strong>{{ isVietnamese ? 'Trạng thái:' : 'Status:' }}</strong>
|
|
<p
|
|
:class="{ 'has-text-success': paymentScheduleData.status__name === 'Đã xác nhận', 'has-text-warning': paymentScheduleData.status__name === 'Chưa xác nhận' }">
|
|
{{ paymentScheduleData.status__name || '-' }}
|
|
</p>
|
|
</div>
|
|
<div class="column is-4">
|
|
<strong>{{ isVietnamese ? 'Loại thanh toán:' : 'Payment Type:' }}</strong>
|
|
<p>{{ paymentScheduleData.type__name || '-' }}</p>
|
|
</div>
|
|
|
|
<div class="column is-4">
|
|
<strong>{{ isVietnamese ? 'Tiền gốc theo kỳ thanh toán:' : 'Amount:' }}</strong>
|
|
<p class="has-text-weight-bold has-text-primary">{{ $numtoString(paymentScheduleData.amount) }}</p>
|
|
</div>
|
|
<div class="column is-4">
|
|
<strong>{{ isVietnamese ? 'Ngày đến hạn hiện tại:' : 'Current Due Date:' }}</strong>
|
|
<p class="has-text-weight-bold">{{ formatDate(paymentScheduleData.to_date) }}</p>
|
|
</div>
|
|
<div class="column is-4">
|
|
<strong>{{ isVietnamese ? 'Ngày tính lãi:' : 'Penalty Date:' }}</strong>
|
|
<p :class="paymentScheduleData.batch_date ? 'has-text-danger' : ''">
|
|
{{ formatDate(paymentScheduleData.batch_date) || 'Chưa tính lãi' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<p class="title is-6">{{ isVietnamese ? 'Thông tin Giao dịch liên quan' : 'Related Transaction Information' }}
|
|
</p>
|
|
<div class="columns is-multiline is-mobile">
|
|
<div class="column is-4">
|
|
<strong>{{ isVietnamese ? 'Mã giao dịch:' : 'Transaction Code:' }}</strong>
|
|
<p>{{ paymentScheduleData.txn_detail__transaction__code || '-' }}</p>
|
|
</div>
|
|
<div class="column is-4">
|
|
<strong>{{ isVietnamese ? 'Khách hàng:' : 'Customer:' }}</strong>
|
|
<p>{{ paymentScheduleData.txn_detail__transaction__customer__fullname || '-' }}</p>
|
|
</div>
|
|
<div class="column is-4">
|
|
<strong>{{ isVietnamese ? 'Chính sách:' : 'Policy:' }}</strong>
|
|
<p>{{ paymentScheduleData.txn_detail__transaction__policy__code || '-' }} </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div v-if="canEditDueDate">
|
|
<Caption class="mb-4" v-bind="{ title: 'Thay đổi ngày đến hạn', size: 20 }" />
|
|
|
|
<div class="field">
|
|
<label class="label has-text-weight-bold">{{ isVietnamese ? 'Ngày đến hạn mới' : 'New Due Date' }}</label>
|
|
<div class="control">
|
|
<Datepicker
|
|
:record="dateRecord"
|
|
attr="newDueDate"
|
|
@date="updateDueDate"
|
|
position="is-bottom-left"
|
|
:mindate="minDate"
|
|
/>
|
|
</div>
|
|
<p v-if="dateError" class="help is-danger">{{ dateError }}</p>
|
|
</div>
|
|
|
|
<div class="field mt-5">
|
|
<label class="label has-text-weight-bold">{{ isVietnamese ? 'Mã xác nhận' : 'Confirmation Code' }}</label>
|
|
<div class="control">
|
|
<div class="field has-addons">
|
|
<div class="control is-expanded">
|
|
<input class="input" type="text"
|
|
:placeholder="isVietnamese ? 'Nhập mã xác nhận' : 'Enter confirmation code'"
|
|
v-model="userInputCaptcha" @keydown.enter="handleUpdate">
|
|
</div>
|
|
<div class="control">
|
|
<a class="button is-static has-text-weight-bold has-background-grey-lighter"
|
|
style="font-family: 'Courier New', monospace; letter-spacing: 2px;">
|
|
{{ captchaCode }}
|
|
</a>
|
|
</div>
|
|
<div class="control">
|
|
<button class="button is-info is-light" @click="generateCaptcha"
|
|
:title="isVietnamese ? 'Tạo mã mới' : 'Generate new code'">
|
|
<SvgIcon v-bind="{ name: 'refresh.svg', type: 'primary', size: 23 }"></SvgIcon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p v-if="!isCaptchaValid && userInputCaptcha.length > 0" class="help is-danger">Mã xác nhận không đúng.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="notification is-warning">
|
|
<p class="has-text-weight-bold">
|
|
{{ isVietnamese ? 'Không thể thay đổi ngày đến hạn' : 'Cannot change due date' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field is-grouped is-grouped-left mt-5">
|
|
<p class="control">
|
|
<button
|
|
v-if="canEditDueDate"
|
|
class="button is-success has-text-white"
|
|
:class="{ 'is-loading': isLoading }"
|
|
@click="handleUpdate"
|
|
:disabled="!isUpdateValid || isLoading">
|
|
<span>{{ isVietnamese ? 'Cập nhật ngày đến hạn' : 'Update Due Date' }}</span>
|
|
</button>
|
|
<button class="button" @click="emit('close')">
|
|
<span>{{ isVietnamese ? 'Đóng' : 'Close' }}</span>
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue';
|
|
import { useNuxtApp } from '#app';
|
|
import { useStore } from "@/stores/index";
|
|
import dayjs from 'dayjs';
|
|
|
|
const props = defineProps({
|
|
scheduleItemId: {
|
|
type: [Number, String],
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['close', 'updated']);
|
|
|
|
const store = useStore();
|
|
const { $getdata, $patchapi, $snackbar } = useNuxtApp();
|
|
|
|
const isLoading = ref(false);
|
|
const loadingData = ref(true);
|
|
const paymentScheduleData = ref(null);
|
|
const dateRecord = ref({ newDueDate: null });
|
|
const captchaCode = ref('');
|
|
const userInputCaptcha = ref('');
|
|
|
|
const isVietnamese = computed(() => store.lang === 'vi');
|
|
|
|
// Kiểm tra xem có thể sửa ngày đến hạn không (chưa tính lãi và chưa thanh toán)
|
|
const canEditDueDate = computed(() => {
|
|
const hasNoPenaltyCalculated = paymentScheduleData.value?.batch_date === null || paymentScheduleData.value?.batch_date === undefined;
|
|
const isNotPaid = paymentScheduleData.value?.status !== 2;
|
|
return hasNoPenaltyCalculated && isNotPaid;
|
|
});
|
|
|
|
// Ngày tối thiểu (phải lớn hơn ngày hiện tại)
|
|
const minDate = computed(() => {
|
|
const currentDate = paymentScheduleData.value?.to_date;
|
|
if (currentDate) {
|
|
return dayjs(currentDate).add(1, 'day').format('YYYY-MM-DD');
|
|
}
|
|
return dayjs().add(1, 'day').format('YYYY-MM-DD');
|
|
});
|
|
|
|
// Kiểm tra lỗi ngày
|
|
const dateError = computed(() => {
|
|
if (!dateRecord.value.newDueDate) return '';
|
|
|
|
const selectedDate = dayjs(dateRecord.value.newDueDate);
|
|
const currentDueDate = dayjs(paymentScheduleData.value?.to_date);
|
|
|
|
if (selectedDate.isBefore(currentDueDate) || selectedDate.isSame(currentDueDate)) {
|
|
return isVietnamese.value
|
|
? 'Ngày đến hạn mới phải lớn hơn ngày đến hạn hiện tại'
|
|
: 'New due date must be after current due date';
|
|
}
|
|
|
|
return '';
|
|
});
|
|
|
|
const updateDueDate = (date) => {
|
|
dateRecord.value.newDueDate = date;
|
|
};
|
|
|
|
const generateCaptcha = () => {
|
|
captchaCode.value = Math.random().toString(36).substring(2, 7).toUpperCase();
|
|
userInputCaptcha.value = '';
|
|
};
|
|
|
|
const isCaptchaValid = computed(() => {
|
|
return userInputCaptcha.value.toLowerCase() === captchaCode.value.toLowerCase();
|
|
});
|
|
|
|
const isUpdateValid = computed(() => {
|
|
return canEditDueDate.value
|
|
&& dateRecord.value.newDueDate
|
|
&& !dateError.value
|
|
&& isCaptchaValid.value
|
|
&& userInputCaptcha.value.length > 0;
|
|
});
|
|
|
|
const formatDate = (dateString) => {
|
|
if (!dateString) return '-';
|
|
return dayjs(dateString).format('DD/MM/YYYY');
|
|
};
|
|
|
|
const fetchPaymentScheduleData = async () => {
|
|
loadingData.value = true;
|
|
try {
|
|
const data = await $getdata('payment_schedule', { id: props.scheduleItemId }, undefined, true);
|
|
paymentScheduleData.value = data;
|
|
|
|
// Set initial value for new due date
|
|
if (data?.to_date) {
|
|
dateRecord.value.newDueDate = data.to_date;
|
|
}
|
|
} catch (e) {
|
|
console.error("Error fetching payment schedule data:", e);
|
|
$snackbar(
|
|
isVietnamese.value ? 'Không thể tải thông tin công nợ.' : 'Failed to load payment schedule information.',
|
|
'Lỗi',
|
|
'Error'
|
|
);
|
|
} finally {
|
|
loadingData.value = false;
|
|
}
|
|
};
|
|
|
|
const handleUpdate = async () => {
|
|
if (!isUpdateValid.value) {
|
|
if (!isCaptchaValid.value) {
|
|
$snackbar(
|
|
isVietnamese.value ? 'Vui lòng nhập đúng mã xác nhận.' : 'Please enter the correct confirmation code.',
|
|
'Cảnh báo',
|
|
'Warning'
|
|
);
|
|
} else if (dateError.value) {
|
|
$snackbar(dateError.value, 'Cảnh báo', 'Warning');
|
|
} else if (!canEditDueDate.value) {
|
|
$snackbar(
|
|
isVietnamese.value ? 'Không thể thay đổi ngày đến hạn.' : 'Cannot change due date.',
|
|
'Cảnh báo',
|
|
'Warning'
|
|
);
|
|
}
|
|
return;
|
|
}
|
|
|
|
isLoading.value = true;
|
|
|
|
try {
|
|
const response = await $patchapi('payment_schedule', {
|
|
id: props.scheduleItemId,
|
|
to_date: dateRecord.value.newDueDate
|
|
});
|
|
|
|
if (response !== 'error') {
|
|
$snackbar(
|
|
isVietnamese.value ? 'Cập nhật ngày đến hạn thành công!' : 'Due date updated successfully!',
|
|
'Thành công',
|
|
'Success'
|
|
);
|
|
emit('updated');
|
|
emit('close');
|
|
} else {
|
|
$snackbar(
|
|
isVietnamese.value ? 'Có lỗi xảy ra khi cập nhật ngày đến hạn.' : 'An error occurred while updating due date.',
|
|
'Lỗi',
|
|
'Error'
|
|
);
|
|
}
|
|
} catch (e) {
|
|
console.error("Error updating due date:", e);
|
|
$snackbar(
|
|
isVietnamese.value ? 'Có lỗi xảy ra khi cập nhật ngày đến hạn.' : 'An error occurred while updating due date.',
|
|
'Lỗi',
|
|
'Error'
|
|
);
|
|
} finally {
|
|
isLoading.value = false;
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
fetchPaymentScheduleData();
|
|
generateCaptcha();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.notification {
|
|
margin-top: 1rem;
|
|
}
|
|
</style> |