EditModal.jsx 2.64 KB
Newer Older
Maofei94's avatar
Maofei94 committed
1 2
import React, { useState, useEffect, useRef } from 'react';
import { Form, Input, notification } from 'antd';
3 4
import SiteModal from '@/components/Modal/SiteModa';
import { editStation } from '@/services/userCenter/siteManage/api';
Maofei94's avatar
Maofei94 committed
5 6
const { Item } = Form;
const EditModal = props => {
7 8
  const [form] = Form.useForm();
  const [formLayout, setFormLayout] = useState('horizontal');
Maofei94's avatar
Maofei94 committed
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
  const [loading, setLoading] = useState(false);
  const flag = useRef();
  const { confirmModal, stationObj } = props;
  const onSubmit = () => {
    form
      .validateFields()
      .then(res => {
        setLoading(true);
        flag.current = res;
        editStation({
          stationName: res.stationName,
          description: res.description,
          stationID: stationObj.stationID,
          _version: 9999,
          _dc: new Date().getTime(),
        })
          .then(res => {
            setLoading(false);
            if (res.success) {
              form.resetFields();
              notification.success({
                message: '通知',
                duration: 3,
                description: '编辑成功',
              });
              confirmModal();
            } else {
              notification.error({
                message: '提示',
                duration: 3,
                description: res.message,
              });
            }
          })
          .catch(err => {
            setLoading(false);
            notification.error({
              message: '提示',
              duration: 3,
              description: err,
            });
50
          });
Maofei94's avatar
Maofei94 committed
51 52 53 54 55 56
      })
      .catch(err => {
        console.error(err);
      });
  };
  useEffect(() => {
57
    form.setFieldsValue({
Maofei94's avatar
Maofei94 committed
58 59 60 61 62 63 64 65 66 67
      stationName: stationObj.text,
      description: stationObj.description,
    });
  }, [stationObj]);
  return (
    <SiteModal
      {...props}
      title="编辑站点"
      bodyStyle={{ width: '100%', minHeight: '100px' }}
      style={{ top: 200, borderRadius: '20px' }}
68
      width="600px"
Maofei94's avatar
Maofei94 committed
69 70
      destroyOnClose
      cancelText="取消"
Maofei94's avatar
Maofei94 committed
71
      okText="确认"
Maofei94's avatar
Maofei94 committed
72
      onOk={() => onSubmit()}
73 74
      confirmLoading={loading}
    >
Maofei94's avatar
Maofei94 committed
75
      <Form form={form} layout={formLayout} labelCol={{ span: 4 }}>
Maofei94's avatar
Maofei94 committed
76 77 78 79 80 81 82 83 84
        <Item
          label="站点名称"
          name="stationName"
          rules={[
            {
              required: true,
              message: '请输入站点名称',
            },
          ]}
85
        >
Maofei94's avatar
Maofei94 committed
86 87 88 89 90 91
          <Input placeholder="请输入站点名称" />
        </Item>
        <Item label="站点描述" name="description">
          <Input placeholder="请输入站点描述" />
        </Item>
      </Form>
92
    </SiteModal>
Maofei94's avatar
Maofei94 committed
93 94
  );
};
95

Maofei94's avatar
Maofei94 committed
96
export default EditModal;