前言
大家好 我是歌谣 列表页面的新增和编辑是日常开发中遇到比较多的问题 如何控制 一个页面实现页面的新增和编辑
效果演示
分析 对于以上的页面 先渲染出结构
<Form name="menu" form={form} labelCol={{ sm: { span: 5 }, }} wrapperCol={{ sm: { span: 16 }, }} > <Form.Item label="款式" name="style_id" rules={[{ required: true, message: '请输入款式' }]} > <Select showSearch style={{ width: "200px" }} placeholder="请选择款式" optionFilterProp="children" options={styleList} ></Select> </Form.Item> <Form.Item label="通用部位" name="part" rules={[{ required: true, message: '请输入通用部位' }]} > <Select showSearch style={{ width: "200px" }} onChange={handleChange} placeholder="请选择部位" optionFilterProp="children" options={PartsList} ></Select> </Form.Item> <Form.Item label="部位" name="partName" rules={[{ required: true, message: '请输入部位' }]} > <Input placeholder='请输入部位'></Input> </Form.Item> </Form>
操作要点1 进入页面判断是清空页面还是赋值
useEffect(()=>{ if(type=="edit"){ form.setFieldsValue({ style_id:menu?.style_id, partName:menu?.name, }) }else{ form.resetFields() } },[])
、
操作要点2 判断是新增接口还是编辑接口
const onOk = useCallback(() => { form.validateFields().then(res => { const values = res as AddOrEditMenuFormProps; const info: Menu = { }; if (info.id) { postGrest().update('t_base_part_region', { id: info.id, data: { style_id:form.getFieldValue("style_id"), name:form.getFieldValue("partName") } }).then((response: any) => { if (!response.code) { message.success("编辑成功") props.onConfirm(); } else { message.warning(response.message) } }) } else { postGrest().create('t_base_part_region', { data: { style_id:form.getFieldValue("style_id"), name:form.getFieldValue("partName") } }).then((response: any) => { if (!response.code) { message.success("创建成功") props.onConfirm(); } else { message.warning(response.message) } }) } }); }, []);
