feat: 添加三步快速记账表单组件。
This commit is contained in:
@@ -76,7 +76,14 @@ export const TransactionForm: React.FC<TransactionFormProps> = ({
|
|||||||
currency: 'CNY',
|
currency: 'CNY',
|
||||||
categoryId: 0,
|
categoryId: 0,
|
||||||
accountId: 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: '',
|
note: '',
|
||||||
tagIds: [],
|
tagIds: [],
|
||||||
...initialData,
|
...initialData,
|
||||||
@@ -195,7 +202,28 @@ export const TransactionForm: React.FC<TransactionFormProps> = ({
|
|||||||
if (!formData.categoryId) return;
|
if (!formData.categoryId) return;
|
||||||
if (!formData.accountId) 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]);
|
}, [formData, onSubmit]);
|
||||||
|
|
||||||
const handleKeyDown = useCallback(
|
const handleKeyDown = useCallback(
|
||||||
@@ -213,6 +241,11 @@ export const TransactionForm: React.FC<TransactionFormProps> = ({
|
|||||||
);
|
);
|
||||||
|
|
||||||
// Helpers
|
// 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 selectedAccount = accounts.find((a) => a.id === formData.accountId);
|
||||||
const selectedCategory = categories.find((c) => c.id === formData.categoryId);
|
const selectedCategory = categories.find((c) => c.id === formData.categoryId);
|
||||||
|
|
||||||
@@ -372,10 +405,10 @@ export const TransactionForm: React.FC<TransactionFormProps> = ({
|
|||||||
</div>
|
</div>
|
||||||
<div className="transaction-form__field">
|
<div className="transaction-form__field">
|
||||||
<label className="transaction-form__label" htmlFor="transactionDate">
|
<label className="transaction-form__label" htmlFor="transactionDate">
|
||||||
日期
|
日期和时间
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
type="date"
|
type="datetime-local"
|
||||||
id="transactionDate"
|
id="transactionDate"
|
||||||
className="transaction-form__input"
|
className="transaction-form__input"
|
||||||
value={formData.transactionDate}
|
value={formData.transactionDate}
|
||||||
|
|||||||
Reference in New Issue
Block a user