machinery-admin/src/pages/SystemManagement/Cooperative/edit.jsx

import { Form, Input, Card, Select, message, Button } from 'antd';
import { history } from 'umi';
import ProCard from '@ant-design/pro-card';
import { useState, useEffect } from 'react';
import POI from '@/components/POI/POI';

import { getRegionList } from '@/services/region';
import { addCooperative, getCooperativeDetail, updateCooperative } from '@/services/cooperative';

const { TextArea } = Input;
const { Option } = Select;
const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };

const goBack = () => {
  history.goBack();
};
const FormItem = Form.Item;
export default (props) => {
  const { location } = props;
  const { id } = location.query;
  const [form] = Form.useForm();
  const [listForm, setListForm] = useState({});
  const [loading, setLoading] = useState(false);
  const [newLocName, setLocName] = useState('');
  const [newAddress, setAddress] = useState('');
  const [regionList, setRegionList] = useState([]);

  const Submit = (data) => {
    console.log(data);
    setLoading(true);
    if (id) {
      updateCooperative(id, {
        ...listForm,
        ...data,
        lng: data.location.split(',')[0],
        lat: data.location.split(',')[1],
      })
        .then(() => {
          setLoading(false);
          message.success('数据更新成功');
          goBack();
        })
        .catch((err) => {
          setLoading(false);
          message.error(err.message || err);
        });
    } else {
      addCooperative({
        ...data,
        lng: data.location.split(',')[0],
        lat: data.location.split(',')[1],
      })
        .then((res) => {
          setLoading(false);
          message.success('数据保存成功');
          history.goBack();
        })
        .catch((err) => {
          setLoading(false);
          message.error(err.message || err);
        });
    }
  };

  useEffect(() => {
    getRegionList()
      .then((res) => {
        setRegionList(res.records || []);
      })
      .catch((err) => {});
  }, []);
  useEffect(() => {
    if (id) {
      getCooperativeDetail(id)
        .then((res) => {
          setListForm(res || []);
          form.setFieldsValue({ ...res, location: res.lng + ',' + res.lat });
        })
        .catch((err) => {
          message.error(err.message || err);
        });
    }
  }, [id]);

  return (
    <Card>
      <ProCard tabs={{ type: 'card' }}>
        <ProCard.TabPane key={1} tab="合作社编辑">
          <Form {...formItemLayout} onFinish={Submit} form={form}>
            <FormItem
              label="机构名"
              name="name"
              rules={[{ required: true, message: '请输入机构名称16个字符以内' }]}
            >
              <Input
                placeholder="请输入机构名称16个字符以内"
                maxLength="16"
                style={{ width: '350px' }}
              />
            </FormItem>
            <FormItem
              label="信用代码"
              name="creditCode"
              rules={[{ required: true, message: '请输入信用代码' }]}
            >
              <Input placeholder="请输入信用代码" style={{ width: '350px' }} />
            </FormItem>
            <FormItem
              label="联系人"
              name="contactPerson"
              rules={[{ required: true, message: '请输入联系人' }]}
            >
              <Input placeholder="请输入联系人" rows={4} style={{ width: '350px' }} />
            </FormItem>
            <FormItem
              label="联系方式"
              name="phone"
              rules={[{ required: true, message: '请输入联系方式' }]}
            >
              <Input placeholder="请输入联系方式" style={{ width: '350px' }} />
            </FormItem>
            <FormItem
              label="定位经纬"
              name="location"
              rules={[{ required: true, message: '请定位' }]}
            >
              <POI
                placeholder="定位"
                setLocName={setLocName}
                setAddress={setAddress}
                roomBoole={true}
              />
            </FormItem>
            <FormItem
              label="地址"
              name="address"
              rules={[{ required: true, message: '请输入地址' }]}
            >
              <TextArea placeholder="请输入地址" style={{ width: '350px' }} />
            </FormItem>
            <FormItem
              label="区域"
              name="regionId"
              rules={[{ required: true, message: '请输入区域' }]}
            >
              <Select placeholder="请选择区域" style={{ width: '350px' }}>
                {regionList.map((item) => (
                  <Option value={item.regionId} key={item.regionId}>
                    {item.name}
                  </Option>
                ))}
              </Select>
            </FormItem>
            <FormItem label="身份" name="role" rules={[{ required: true, message: '请选择身份' }]}>
              <Select placeholder="请选择身份" style={{ width: '350px' }}>
                <Option value="合作社" key="合作社" />
                <Option value="个体户" key="个体户" />
              </Select>
            </FormItem>
            <FormItem label="员工数">{listForm?.workerNum || 0}</FormItem>
            <FormItem label="农机数">{listForm?.machineryNum || 0}</FormItem>
            <FormItem label="订单完成数">{listForm?.orderNum || 0}</FormItem>
            <FormItem label="评分">{listForm?.score || 0}</FormItem>
            <FormItem label=" " colon={false}>
              <Button type="default" onClick={() => goBack()}>
                返回
              </Button>
              <Button
                type="primary"
                loading={loading}
                htmlType="submit"
                style={{ marginLeft: '4em' }}
              >
                保存
              </Button>
            </FormItem>
          </Form>
        </ProCard.TabPane>
      </ProCard>
    </Card>
  );
};