Files
order_site/apps/frontend/src/pages/admin/panels/HallConfigPanel.tsx
T

68 lines
2.5 KiB
TypeScript

import { useQuery, useQueryClient } from '@tanstack/react-query'
import { App, Button, Card, Descriptions, Form, InputNumber, Space } from 'antd'
import { useEffect, useState } from 'react'
import { fetchAdminWorkerHallConfig, saveAdminWorkerHallConfig } from '@/services/admin'
type HallConfigFormValues = {
maxVisibleOrders: number
}
export default function HallConfigPanel() {
const { message } = App.useApp()
const queryClient = useQueryClient()
const [form] = Form.useForm<HallConfigFormValues>()
const [saving, setSaving] = useState(false)
const configQuery = useQuery({
queryKey: ['admin-worker-hall-config'],
queryFn: fetchAdminWorkerHallConfig,
})
const config = configQuery.data?.data
useEffect(() => {
if (config) form.setFieldsValue({ maxVisibleOrders: config.maxVisibleOrders })
}, [config, form])
async function saveConfig(values: HallConfigFormValues) {
setSaving(true)
try {
await saveAdminWorkerHallConfig({ maxVisibleOrders: Number(values.maxVisibleOrders) })
await Promise.all([
queryClient.invalidateQueries({ queryKey: ['admin-worker-hall-config'] }),
queryClient.invalidateQueries({ queryKey: ['admin-worker-platform-summary'] }),
])
message.success('大厅配置已保存')
} catch (error) {
message.error(error instanceof Error ? error.message : '保存大厅配置失败')
} finally {
setSaving(false)
}
}
return (
<Card title="大厅配置" bordered={false} loading={configQuery.isLoading}>
<Space direction="vertical" size="middle" style={{ width: '100%', maxWidth: 560 }}>
<Descriptions size="small" column={3}>
<Descriptions.Item label="展示中">{config?.visibleOrderCount || 0}</Descriptions.Item>
<Descriptions.Item label="等待入厅">{config?.queuedOrderCount || 0}</Descriptions.Item>
<Descriptions.Item label="当前上限">{config?.maxVisibleOrders || '-'}</Descriptions.Item>
</Descriptions>
<Form form={form} layout="inline" onFinish={saveConfig}>
<Form.Item
name="maxVisibleOrders"
label="大厅订单总数"
rules={[{ required: true, message: '请输入大厅订单总数' }]}
>
<InputNumber min={1} max={500} precision={0} style={{ width: 160 }} />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" loading={saving}>
保存
</Button>
</Form.Item>
</Form>
</Space>
</Card>
)
}