diff --git a/Cunkebao/src/pages/mobile/workspace/auto-group/form/components/BasicSettings.tsx b/Cunkebao/src/pages/mobile/workspace/auto-group/form/components/BasicSettings.tsx index 9cba69e94..39712e2dd 100644 --- a/Cunkebao/src/pages/mobile/workspace/auto-group/form/components/BasicSettings.tsx +++ b/Cunkebao/src/pages/mobile/workspace/auto-group/form/components/BasicSettings.tsx @@ -1,9 +1,11 @@ -import React, { useImperativeHandle, forwardRef } from "react"; -import { Input, Button, Card, Switch, Form, InputNumber } from "antd"; -import { TextArea } from "antd-mobile"; +import React, { useImperativeHandle, forwardRef, useEffect } from "react"; +import { Button, Card, Switch, Form, InputNumber } from "antd"; +import { Input } from "antd"; + +const { TextArea } = Input; interface BasicSettingsProps { - defaultValues?: { + initialValues?: { name: string; startTime: string; endTime: string; @@ -22,21 +24,29 @@ export interface BasicSettingsRef { } const BasicSettings = forwardRef( - ({ - defaultValues = { - name: "", - startTime: "06:00", - endTime: "23:59", - groupSizeMin: 20, - groupSizeMax: 50, - maxGroupsPerDay: 10, - groupNameTemplate: "", - groupDescription: "", - status: 1, + ( + { + initialValues = { + name: "", + startTime: "06:00", + endTime: "23:59", + groupSizeMin: 20, + groupSizeMax: 50, + maxGroupsPerDay: 10, + groupNameTemplate: "", + groupDescription: "", + status: 1, + }, }, - }, ref) => { + ref, + ) => { const [form] = Form.useForm(); + // 当initialValues变化时,重新设置表单值 + useEffect(() => { + form.setFieldsValue(initialValues); + }, [form, initialValues]); + // 暴露方法给父组件 useImperativeHandle(ref, () => ({ validate: async () => { @@ -59,7 +69,7 @@ const BasicSettings = forwardRef(
{ // 可以在这里处理表单值变化 }} @@ -104,42 +114,53 @@ const BasicSettings = forwardRef( rules={[ { required: true, message: "请输入每日最大建群数" }, { - type: "number", - min: 1, - max: 100, - message: "每日最大建群数在1-100之间", + validator: (_, value) => { + const numValue = Number(value); + if (value && (numValue < 1 || numValue > 100)) { + return Promise.reject( + new Error("每日最大建群数在1-100之间"), + ); + } + return Promise.resolve(); + }, }, ]} > -
- - - -
+ form.setFieldValue("maxGroupsPerDay", value)} + addonBefore={ + + } + addonAfter={ + + } + /> {/* 群组最小人数 */} @@ -149,43 +170,53 @@ const BasicSettings = forwardRef( rules={[ { required: true, message: "请输入群组最小人数" }, { - type: "number", - min: 1, - max: 500, - message: "群组最小人数在1-500之间", + validator: (_, value) => { + const numValue = Number(value); + if (value && (numValue < 1 || numValue > 500)) { + return Promise.reject( + new Error("群组最小人数在1-500之间"), + ); + } + return Promise.resolve(); + }, }, ]} > -
- - - -
+ form.setFieldValue("groupSizeMin", value)} + addonBefore={ + + } + addonAfter={ + + } + /> {/* 群组最大人数 */} @@ -195,43 +226,53 @@ const BasicSettings = forwardRef( rules={[ { required: true, message: "请输入群组最大人数" }, { - type: "number", - min: 1, - max: 500, - message: "群组最大人数在1-500之间", + validator: (_, value) => { + const numValue = Number(value); + if (value && (numValue < 1 || numValue > 500)) { + return Promise.reject( + new Error("群组最大人数在1-500之间"), + ); + } + return Promise.resolve(); + }, }, ]} > -
- - - -
+ form.setFieldValue("groupSizeMax", value)} + addonBefore={ + + } + addonAfter={ + + } + /> {/* 群名称模板 */} @@ -240,7 +281,11 @@ const BasicSettings = forwardRef( name="groupNameTemplate" rules={[ { required: true, message: "请输入群名称模板" }, - { min: 2, max: 100, message: "群名称模板长度在2-100个字符之间" }, + { + min: 2, + max: 100, + message: "群名称模板长度在2-100个字符之间", + }, ]} > @@ -265,8 +310,8 @@ const BasicSettings = forwardRef( label="是否启用" name="status" valuePropName="checked" - getValueFromEvent={(checked) => checked ? 1 : 0} - getValueProps={(value) => ({ checked: value === 1 })} + getValueFromEvent={checked => (checked ? 1 : 0)} + getValueProps={value => ({ checked: value === 1 })} >
( BasicSettings.displayName = "BasicSettings"; -export default BasicSettings; \ No newline at end of file +export default BasicSettings; diff --git a/Cunkebao/src/pages/mobile/workspace/auto-group/form/index.tsx b/Cunkebao/src/pages/mobile/workspace/auto-group/form/index.tsx index 6d7c316e5..1c9247e7a 100644 --- a/Cunkebao/src/pages/mobile/workspace/auto-group/form/index.tsx +++ b/Cunkebao/src/pages/mobile/workspace/auto-group/form/index.tsx @@ -45,6 +45,7 @@ const AutoGroupForm: React.FC = () => { const isEdit = Boolean(id); const [currentStep, setCurrentStep] = useState(1); const [loading, setLoading] = useState(false); + const [dataLoaded, setDataLoaded] = useState(!isEdit); // 非编辑模式直接标记为已加载 const [formData, setFormData] = useState(defaultForm); const [deviceGroupsOptions, setDeviceGroupsOptions] = useState< DeviceSelectionItem[] @@ -83,6 +84,7 @@ const AutoGroupForm: React.FC = () => { setFormData(updatedForm); setDeviceGroupsOptions(res.config.deveiceGroupsOptions || []); setContentGroupsOptions(res.config.contentGroupsOptions || []); + setDataLoaded(true); // 标记数据已加载 }); }, [id]); @@ -190,12 +192,19 @@ const AutoGroupForm: React.FC = () => { }; const renderCurrentStep = () => { + // 编辑模式下,等待数据加载完成后再渲染 + if (isEdit && !dataLoaded) { + return ( +
加载中...
+ ); + } + switch (currentStep) { case 1: return ( { return ( navigate(-1)} - /> + <> + navigate(-1)} + /> + + } footer={renderFooter()} > -
-
- -
-
{renderCurrentStep()}
-
+
{renderCurrentStep()}
); };