Kaynağa Gözat

✨ feat(submission-records): 优化表单字段处理和表格显示

- 移除表单字段初始化时的空值回退逻辑,直接使用原始值
- 在表格中添加状态列显示
- 优化ID列的字体样式为中等粗细
- 重新组织表单字段布局,移除不必要的网格分割
- 为所有数值输入字段添加onChange处理,确保正确转换为数字类型
- 调整字段顺序,将训练日期和标记字段移至表单末尾
- 统一创建和编辑表单的字段布局和验证逻辑
D8D Developer 6 ay önce
ebeveyn
işleme
d3fb6a4e92
1 değiştirilmiş dosya ile 198 ekleme ve 118 silme
  1. 198 118
      src/client/admin/pages/SubmissionRecordsPage.tsx

+ 198 - 118
src/client/admin/pages/SubmissionRecordsPage.tsx

@@ -128,21 +128,21 @@ export const SubmissionRecordsPage = () => {
     setIsCreateForm(false);
     setEditingRecord(record);
     updateForm.reset({
-      classroomNo: record.classroomNo || null,
-      userId: record.userId || null,
-      nickname: record.nickname || null,
-      score: record.score || null,
-      code: record.code || null,
+      classroomNo: record.classroomNo,
+      userId: record.userId,
+      nickname: record.nickname,
+      score: record.score,
+      code: record.code,
       trainingDate: record.trainingDate ? new Date(record.trainingDate) : null,
-      mark: record.mark || null,
-      status: record.status || null,
-      holdingStock: record.holdingStock || null,
-      holdingCash: record.holdingCash || null,
-      price: record.price || null,
-      profitAmount: record.profitAmount || null,
-      profitPercent: record.profitPercent || null,
-      totalProfitAmount: record.totalProfitAmount || null,
-      totalProfitPercent: record.totalProfitPercent || null
+      mark: record.mark,
+      status: record.status,
+      holdingStock: record.holdingStock,
+      holdingCash: record.holdingCash,
+      price: record.price,
+      profitAmount: record.profitAmount,
+      profitPercent: record.profitPercent,
+      totalProfitAmount: record.totalProfitAmount,
+      totalProfitPercent: record.totalProfitPercent
     });
     setIsModalOpen(true);
   };
@@ -286,6 +286,7 @@ export const SubmissionRecordsPage = () => {
                   <TableHead>成绩</TableHead>
                   <TableHead>代码</TableHead>
                   <TableHead>训练日期</TableHead>
+                  <TableHead>状态</TableHead>
                   <TableHead>收益率</TableHead>
                   <TableHead>累计收益率</TableHead>
                   <TableHead className="text-right">操作</TableHead>
@@ -294,7 +295,7 @@ export const SubmissionRecordsPage = () => {
               <TableBody>
                 {records.map((record) => (
                   <TableRow key={record.id}>
-                    <TableCell>{record.id}</TableCell>
+                    <TableCell className="font-medium">{record.id}</TableCell>
                     <TableCell>{record.classroomNo || '-'}</TableCell>
                     <TableCell>{record.userId || '-'}</TableCell>
                     <TableCell>{record.nickname || '-'}</TableCell>
@@ -303,6 +304,7 @@ export const SubmissionRecordsPage = () => {
                     <TableCell>
                       {record.trainingDate ? format(new Date(record.trainingDate), 'yyyy-MM-dd HH:mm', { locale: zhCN }) : '-'}
                     </TableCell>
+                    <TableCell>{record.status || '-'}</TableCell>
                     <TableCell>{record.profitPercent ? `${record.profitPercent}%` : '-'}</TableCell>
                     <TableCell>{record.totalProfitPercent ? `${record.totalProfitPercent}%` : '-'}</TableCell>
                     <TableCell className="text-right">
@@ -387,9 +389,7 @@ export const SubmissionRecordsPage = () => {
                       </FormItem>
                     )}
                   />
-                </div>
 
-                <div className="grid grid-cols-2 gap-4">
                   <FormField
                     control={createForm.control}
                     name="nickname"
@@ -411,15 +411,20 @@ export const SubmissionRecordsPage = () => {
                       <FormItem>
                         <FormLabel>成绩</FormLabel>
                         <FormControl>
-                          <Input type="number" step="0.01" placeholder="请输入成绩" {...field} value={field.value || ''} />
+                          <Input 
+                            type="number" 
+                            step="0.01"
+                            placeholder="请输入成绩" 
+                            {...field} 
+                            value={field.value || ''}
+                            onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : null)}
+                          />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
                     )}
                   />
-                </div>
 
-                <div className="grid grid-cols-2 gap-4">
                   <FormField
                     control={createForm.control}
                     name="code"
@@ -436,53 +441,24 @@ export const SubmissionRecordsPage = () => {
 
                   <FormField
                     control={createForm.control}
-                    name="trainingDate"
+                    name="status"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel>训练日期</FormLabel>
+                        <FormLabel>状态</FormLabel>
                         <FormControl>
                           <Input 
-                            type="datetime-local" 
+                            type="number"
+                            placeholder="请输入状态" 
                             {...field} 
-                            value={field.value ? format(new Date(field.value), "yyyy-MM-dd'T'HH:mm") : ''}
-                            onChange={(e) => field.onChange(e.target.value ? new Date(e.target.value) : null)}
+                            value={field.value || ''}
+                            onChange={(e) => field.onChange(e.target.value ? parseInt(e.target.value) : null)}
                           />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
                     )}
                   />
-                </div>
-
-                <FormField
-                  control={createForm.control}
-                  name="mark"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>标记</FormLabel>
-                      <FormControl>
-                        <Input placeholder="请输入标记" {...field} value={field.value || ''} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={createForm.control}
-                  name="status"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>状态</FormLabel>
-                      <FormControl>
-                        <Input type="number" placeholder="请输入状态" {...field} value={field.value || ''} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
 
-                <div className="grid grid-cols-2 gap-4">
                   <FormField
                     control={createForm.control}
                     name="holdingStock"
@@ -510,17 +486,22 @@ export const SubmissionRecordsPage = () => {
                       </FormItem>
                     )}
                   />
-                </div>
 
-                <div className="grid grid-cols-2 gap-4">
-                <FormField
+                  <FormField
                     control={createForm.control}
                     name="price"
                     render={({ field }) => (
                       <FormItem>
                         <FormLabel>价格</FormLabel>
                         <FormControl>
-                          <Input type="number" step="0.01" placeholder="请输入价格" {...field} value={field.value || ''} />
+                          <Input 
+                            type="number" 
+                            step="0.01"
+                            placeholder="请输入价格" 
+                            {...field} 
+                            value={field.value || ''}
+                            onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : null)}
+                          />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
@@ -534,15 +515,20 @@ export const SubmissionRecordsPage = () => {
                       <FormItem>
                         <FormLabel>收益金额</FormLabel>
                         <FormControl>
-                          <Input type="number" step="0.01" placeholder="请输入收益金额" {...field} value={field.value || ''} />
+                          <Input 
+                            type="number" 
+                            step="0.01"
+                            placeholder="请输入收益金额" 
+                            {...field} 
+                            value={field.value || ''}
+                            onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : null)}
+                          />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
                     )}
                   />
-                </div>
 
-                <div className="grid grid-cols-2 gap-4">
                   <FormField
                     control={createForm.control}
                     name="profitPercent"
@@ -550,7 +536,35 @@ export const SubmissionRecordsPage = () => {
                       <FormItem>
                         <FormLabel>收益率(%)</FormLabel>
                         <FormControl>
-                          <Input type="number" step="0.01" placeholder="请输入收益率" {...field} value={field.value || ''} />
+                          <Input 
+                            type="number" 
+                            step="0.01"
+                            placeholder="请输入收益率" 
+                            {...field} 
+                            value={field.value || ''}
+                            onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : null)}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={createForm.control}
+                    name="totalProfitAmount"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>累计收益金额</FormLabel>
+                        <FormControl>
+                          <Input 
+                            type="number" 
+                            step="0.01"
+                            placeholder="请输入累计收益金额" 
+                            {...field} 
+                            value={field.value || ''}
+                            onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : null)}
+                          />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
@@ -564,7 +578,14 @@ export const SubmissionRecordsPage = () => {
                       <FormItem>
                         <FormLabel>累计收益率(%)</FormLabel>
                         <FormControl>
-                          <Input type="number" step="0.01" placeholder="请输入累计收益率" {...field} value={field.value || ''} />
+                          <Input 
+                            type="number" 
+                            step="0.01"
+                            placeholder="请输入累计收益率" 
+                            {...field} 
+                            value={field.value || ''}
+                            onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : null)}
+                          />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
@@ -573,12 +594,32 @@ export const SubmissionRecordsPage = () => {
 
                   <FormField
                     control={createForm.control}
-                    name="totalProfitAmount"
+                    name="mark"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel>累计收益金额</FormLabel>
+                        <FormLabel>标记</FormLabel>
                         <FormControl>
-                          <Input type="number" step="0.01" placeholder="请输入累计收益金额" {...field} value={field.value || ''} />
+                          <Input placeholder="请输入标记" {...field} value={field.value || ''} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={createForm.control}
+                    name="trainingDate"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>训练日期</FormLabel>
+                        <FormControl>
+                          <Input 
+                            type="datetime-local"
+                            placeholder="请选择训练日期" 
+                            {...field} 
+                            value={field.value ? format(new Date(field.value), "yyyy-MM-dd'T'HH:mm") : ''}
+                            onChange={(e) => field.onChange(e.target.value ? new Date(e.target.value) : null)}
+                          />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
@@ -625,9 +666,7 @@ export const SubmissionRecordsPage = () => {
                       </FormItem>
                     )}
                   />
-                </div>
 
-                <div className="grid grid-cols-2 gap-4">
                   <FormField
                     control={updateForm.control}
                     name="nickname"
@@ -649,15 +688,20 @@ export const SubmissionRecordsPage = () => {
                       <FormItem>
                         <FormLabel>成绩</FormLabel>
                         <FormControl>
-                          <Input type="number" step="0.01" placeholder="请输入成绩" {...field} value={field.value || ''} />
+                          <Input 
+                            type="number" 
+                            step="0.01"
+                            placeholder="请输入成绩" 
+                            {...field} 
+                            value={field.value || ''}
+                            onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : null)}
+                          />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
                     )}
                   />
-                </div>
 
-                <div className="grid grid-cols-2 gap-4">
                   <FormField
                     control={updateForm.control}
                     name="code"
@@ -674,53 +718,24 @@ export const SubmissionRecordsPage = () => {
 
                   <FormField
                     control={updateForm.control}
-                    name="trainingDate"
+                    name="status"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel>训练日期</FormLabel>
+                        <FormLabel>状态</FormLabel>
                         <FormControl>
                           <Input 
-                            type="datetime-local" 
+                            type="number"
+                            placeholder="请输入状态" 
                             {...field} 
-                            value={field.value ? format(new Date(field.value), "yyyy-MM-dd'T'HH:mm") : ''}
-                            onChange={(e) => field.onChange(e.target.value ? new Date(e.target.value) : null)}
+                            value={field.value || ''}
+                            onChange={(e) => field.onChange(e.target.value ? parseInt(e.target.value) : null)}
                           />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
                     )}
                   />
-                </div>
-
-                <FormField
-                  control={updateForm.control}
-                  name="mark"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>标记</FormLabel>
-                      <FormControl>
-                        <Input placeholder="请输入标记" {...field} value={field.value || ''} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={updateForm.control}
-                  name="status"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>状态</FormLabel>
-                      <FormControl>
-                        <Input type="number" placeholder="请输入状态" {...field} value={field.value || ''} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
 
-                <div className="grid grid-cols-2 gap-4">
                   <FormField
                     control={updateForm.control}
                     name="holdingStock"
@@ -748,9 +763,7 @@ export const SubmissionRecordsPage = () => {
                       </FormItem>
                     )}
                   />
-                </div>
 
-                <div className="grid grid-cols-2 gap-4">
                   <FormField
                     control={updateForm.control}
                     name="price"
@@ -758,7 +771,14 @@ export const SubmissionRecordsPage = () => {
                       <FormItem>
                         <FormLabel>价格</FormLabel>
                         <FormControl>
-                          <Input type="number" step="0.01" placeholder="请输入价格" {...field} value={field.value || ''} />
+                          <Input 
+                            type="number" 
+                            step="0.01"
+                            placeholder="请输入价格" 
+                            {...field} 
+                            value={field.value || ''}
+                            onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : null)}
+                          />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
@@ -772,15 +792,20 @@ export const SubmissionRecordsPage = () => {
                       <FormItem>
                         <FormLabel>收益金额</FormLabel>
                         <FormControl>
-                          <Input type="number" step="0.01" placeholder="请输入收益金额" {...field} value={field.value || ''} />
+                          <Input 
+                            type="number" 
+                            step="0.01"
+                            placeholder="请输入收益金额" 
+                            {...field} 
+                            value={field.value || ''}
+                            onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : null)}
+                          />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
                     )}
                   />
-                </div>
 
-                <div className="grid grid-cols-2 gap-4">
                   <FormField
                     control={updateForm.control}
                     name="profitPercent"
@@ -788,7 +813,35 @@ export const SubmissionRecordsPage = () => {
                       <FormItem>
                         <FormLabel>收益率(%)</FormLabel>
                         <FormControl>
-                          <Input type="number" step="0.01" placeholder="请输入收益率" {...field} value={field.value || ''} />
+                          <Input 
+                            type="number" 
+                            step="0.01"
+                            placeholder="请输入收益率" 
+                            {...field} 
+                            value={field.value || ''}
+                            onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : null)}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={updateForm.control}
+                    name="totalProfitAmount"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>累计收益金额</FormLabel>
+                        <FormControl>
+                          <Input 
+                            type="number" 
+                            step="0.01"
+                            placeholder="请输入累计收益金额" 
+                            {...field} 
+                            value={field.value || ''}
+                            onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : null)}
+                          />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
@@ -802,7 +855,14 @@ export const SubmissionRecordsPage = () => {
                       <FormItem>
                         <FormLabel>累计收益率(%)</FormLabel>
                         <FormControl>
-                          <Input type="number" step="0.01" placeholder="请输入累计收益率" {...field} value={field.value || ''} />
+                          <Input 
+                            type="number" 
+                            step="0.01"
+                            placeholder="请输入累计收益率" 
+                            {...field} 
+                            value={field.value || ''}
+                            onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : null)}
+                          />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
@@ -811,12 +871,32 @@ export const SubmissionRecordsPage = () => {
 
                   <FormField
                     control={updateForm.control}
-                    name="totalProfitAmount"
+                    name="mark"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel>累计收益金额</FormLabel>
+                        <FormLabel>标记</FormLabel>
                         <FormControl>
-                          <Input type="number" step="0.01" placeholder="请输入累计收益金额" {...field} value={field.value || ''} />
+                          <Input placeholder="请输入标记" {...field} value={field.value || ''} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={updateForm.control}
+                    name="trainingDate"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>训练日期</FormLabel>
+                        <FormControl>
+                          <Input 
+                            type="datetime-local"
+                            placeholder="请选择训练日期" 
+                            {...field} 
+                            value={field.value ? format(new Date(field.value), "yyyy-MM-dd'T'HH:mm") : ''}
+                            onChange={(e) => field.onChange(e.target.value ? new Date(e.target.value) : null)}
+                          />
                         </FormControl>
                         <FormMessage />
                       </FormItem>