feat: 添加三步快速记账表单组件。
This commit is contained in:
@@ -76,7 +76,14 @@ export const TransactionForm: React.FC<TransactionFormProps> = ({
|
||||
currency: 'CNY',
|
||||
categoryId: 0,
|
||||
accountId: 0,
|
||||
transactionDate: new Date().toISOString().split('T')[0],
|
||||
// Initialize with current local time for datetime-local input
|
||||
transactionDate: initialData?.transactionDate
|
||||
? (initialData.transactionDate.includes('T') ? initialData.transactionDate.substring(0, 16) : initialData.transactionDate)
|
||||
: (() => {
|
||||
const now = new Date();
|
||||
const pad = (n: number) => n.toString().padStart(2, '0');
|
||||
return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}T${pad(now.getHours())}:${pad(now.getMinutes())}`;
|
||||
})(),
|
||||
note: '',
|
||||
tagIds: [],
|
||||
...initialData,
|
||||
@@ -195,7 +202,28 @@ export const TransactionForm: React.FC<TransactionFormProps> = ({
|
||||
if (!formData.categoryId) return;
|
||||
if (!formData.accountId) return;
|
||||
|
||||
onSubmit(formData);
|
||||
// Convert local datetime-local string to proper ISO string for backend
|
||||
// datetime-local value format: YYYY-MM-DDTHH:mm
|
||||
// new Date(val).toISOString() will give UTC time which backend accepts
|
||||
let submitDate = formData.transactionDate;
|
||||
try {
|
||||
const dateObj = new Date(formData.transactionDate);
|
||||
if (!isNaN(dateObj.getTime())) {
|
||||
submitDate = dateObj.toISOString();
|
||||
} else {
|
||||
// Fallback for date-only strings if any legacy data
|
||||
submitDate = new Date(formData.transactionDate + 'T00:00:00').toISOString();
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Date conversion error', e);
|
||||
}
|
||||
|
||||
const payload = {
|
||||
...formData,
|
||||
transactionDate: submitDate
|
||||
};
|
||||
|
||||
onSubmit(payload);
|
||||
}, [formData, onSubmit]);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
@@ -213,6 +241,11 @@ export const TransactionForm: React.FC<TransactionFormProps> = ({
|
||||
);
|
||||
|
||||
// Helpers
|
||||
const toLocalISOString = (date: Date) => {
|
||||
const pad = (n: number) => n.toString().padStart(2, '0');
|
||||
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
|
||||
};
|
||||
|
||||
const selectedAccount = accounts.find((a) => a.id === formData.accountId);
|
||||
const selectedCategory = categories.find((c) => c.id === formData.categoryId);
|
||||
|
||||
@@ -372,10 +405,10 @@ export const TransactionForm: React.FC<TransactionFormProps> = ({
|
||||
</div>
|
||||
<div className="transaction-form__field">
|
||||
<label className="transaction-form__label" htmlFor="transactionDate">
|
||||
日期
|
||||
日期和时间
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
type="datetime-local"
|
||||
id="transactionDate"
|
||||
className="transaction-form__input"
|
||||
value={formData.transactionDate}
|
||||
|
||||
Reference in New Issue
Block a user