feat: 支持表格单元格快捷编辑

apps/admin/src/pages/ClassroomRentals/index.tsx

@@ -26,6 +26,7 @@ import dayjs, { Dayjs } from 'dayjs';
 import api from '../../api';
 import { downloadBlob } from '../../utils/download';
 import PermissionButton from '../../components/PermissionButton';
+import EditableCell from '../../components/EditableCell';
 import { message } from '../../ui/app-message';
 import { usePermission } from '../../hooks/usePermission';
 
@@ -214,6 +215,12 @@ const ClassroomRentalsPage: React.FC = () => {
     }
   };
 
+  const saveCell = async (record: any, field: string, value: unknown) => {
+    await api.put(`/classroom-rentals/${record.id}`, { [field]: value });
+    message.success('已保存');
+    await fetchData();
+  };
+
   const handleDelete = async (id: number) => {
     try {
       await api.delete(`/classroom-rentals/${id}`);
@@ -279,34 +286,95 @@ const ClassroomRentalsPage: React.FC = () => {
         title: '教室',
         width: 120,
         dataIndex: 'classroom',
-        render: (c: any) =>
-          c ? (
-            <span>
-              {c.building ? `${c.building} · ` : ''}
-              {c.name}
-            </span>
-          ) : (
-            '-'
-          ),
+        render: (c: any, r: any) => (
+          <EditableCell
+            value={r.classroomId}
+            editor="select"
+            options={classrooms
+              .filter((item) => item.status !== 'archived')
+              .map((item) => ({
+                value: item.id,
+                label: item.building ? `${item.building} · ${item.name}` : item.name,
+              }))}
+            permission="rental:edit"
+            disabled={r.effectiveStatus !== 'active'}
+            required
+            onSave={(next) => saveCell(r, 'classroomId', next)}
+          >
+            {c ? (
+              <span>
+                {c.building ? `${c.building} · ` : ''}
+                {c.name}
+              </span>
+            ) : (
+              '-'
+            )}
+          </EditableCell>
+        ),
       },
       {
         title: '承租机构',
         width: 100,
         dataIndex: 'lesseeOrganization',
-        render: (t: any) =>
-          t ? (
-            <Tag
-              color={t.color}
-              style={{ background: t.color, color: '#fff', borderColor: t.color }}
-            >
-              {t.name}
-            </Tag>
-          ) : (
-            '-'
-          ),
+        render: (t: any, r: any) => (
+          <EditableCell
+            value={r.lesseeOrganizationId}
+            editor="select"
+            options={organizations
+              .filter((item) => item.status !== 'archived')
+              .map((item) => ({ value: item.id, label: item.name }))}
+            permission="rental:edit"
+            disabled={r.effectiveStatus !== 'active'}
+            required
+            onSave={(next) => saveCell(r, 'lesseeOrganizationId', next)}
+          >
+            {t ? (
+              <Tag
+                color={t.color}
+                style={{ background: t.color, color: '#fff', borderColor: t.color }}
+              >
+                {t.name}
+              </Tag>
+            ) : (
+              '-'
+            )}
+          </EditableCell>
+        ),
+      },
+      {
+        title: '开始日期',
+        dataIndex: 'startDate',
+        width: 110,
+        render: (v: string, r: any) => (
+          <EditableCell
+            value={v}
+            editor="date"
+            permission="rental:edit"
+            disabled={r.effectiveStatus !== 'active'}
+            required
+            onSave={(next) => saveCell(r, 'startDate', next)}
+          >
+            {v}
+          </EditableCell>
+        ),
+      },
+      {
+        title: '结束日期',
+        dataIndex: 'endDate',
+        width: 110,
+        render: (v: string, r: any) => (
+          <EditableCell
+            value={v}
+            editor="date"
+            permission="rental:edit"
+            disabled={r.effectiveStatus !== 'active'}
+            required
+            onSave={(next) => saveCell(r, 'endDate', next)}
+          >
+            {v}
+          </EditableCell>
+        ),
       },
-      { title: '开始日期', dataIndex: 'startDate', width: 110 },
-      { title: '结束日期', dataIndex: 'endDate', width: 110 },
       {
         title: '时长',
         width: 80,
@@ -319,13 +387,35 @@ const ClassroomRentalsPage: React.FC = () => {
         title: '日租金',
         dataIndex: 'dailyRate',
         width: 100,
-        render: (v: any) => (v ? `¥${v}` : '-'),
+        render: (v: any, r: any) => (
+          <EditableCell
+            value={v}
+            editor="money"
+            min={0.01}
+            permission="rental:edit"
+            disabled={r.effectiveStatus !== 'active'}
+            onSave={(next) => saveCell(r, 'dailyRate', next)}
+          >
+            {v ? `¥${v}` : '-'}
+          </EditableCell>
+        ),
       },
       {
         title: '总额',
         dataIndex: 'totalAmount',
         width: 100,
-        render: (v: any) => (v ? `¥${v}` : '-'),
+        render: (v: any, r: any) => (
+          <EditableCell
+            value={v}
+            editor="money"
+            min={0.01}
+            permission="rental:edit"
+            disabled={r.effectiveStatus !== 'active'}
+            onSave={(next) => saveCell(r, 'totalAmount', next)}
+          >
+            {v ? `¥${v}` : '-'}
+          </EditableCell>
+        ),
       },
       {
         title: '状态',
@@ -448,7 +538,7 @@ const ClassroomRentalsPage: React.FC = () => {
         ),
       },
     ],
-    [],
+    [classrooms, organizations],
   );
 
   return (