/* * @Description: * @Author: leizhe * @Date: 2022-01-13 17:26:14 * @LastEditTime: 2022-03-22 16:22:17 * @LastEditors: leizhe */ import React, { useState, useEffect, useRef } from 'react'; import { Form, Input, notification } from 'antd'; import SiteModal from '@/components/Modal/SiteModa'; import { editStation } from '@/services/siteManage/api'; const { Item } = Form; const EditModal = props => { const [form] = Form.useForm(); const [formLayout, setFormLayout] = useState('horizontal'); const [loading, setLoading] = useState(false); const flag = useRef(); const { confirmModal, stationObj, des } = props; const onSubmit = () => { form .validateFields() .then(res => { setLoading(true); flag.current = res; editStation({ stationName: res.stationName, description: res.description, stationID: stationObj.id, }) .then(res => { setLoading(false); if (res.msg === '') { form.resetFields(); notification.success({ message: '通知', duration: 3, description: '编辑成功', }); confirmModal(); } else { notification.error({ message: '提示', duration: 3, description: res.msg, }); } }) .catch(err => { setLoading(false); notification.error({ message: '提示', duration: 3, description: err, }); }); }) .catch(err => { console.error(err); }); }; useEffect(() => { form.setFieldsValue({ stationName: stationObj.text, description: stationObj.describe, }); }, [stationObj]); return ( <SiteModal {...props} title="编辑站点" bodyStyle={{ width: '100%', minHeight: '100px' }} style={{ top: 200, borderRadius: '20px' }} width="600px" maskClosable={false} destroyOnClose cancelText="取消" okText="确认" onOk={() => onSubmit()} confirmLoading={loading} > <Form form={form} layout={formLayout} labelCol={{ span: 4 }}> <Item label="站点名称" name="stationName" rules={[ { required: true, message: '请输入站点名称', }, ]} > <Input placeholder="请输入站点名称" style={{ width: '95%' }} maxLength="20" /> </Item> <Item label="站点描述" name="description"> <Input placeholder="请输入站点描述" style={{ width: '95%' }} maxLength="100" /> </Item> </Form> </SiteModal> ); }; export default EditModal;