machinery-admin/src/pages/Machinery/Org/index.jsx

import React, { useState, useEffect } from 'react';
import { Tree, Row, Col, Popconfirm, Card, Form, Input, Select, Button, message } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { getRegionList } from '@/services/region';
import {
  getCooperativeList,
  deleteCooperative,
  addCooperative,
  getCooperativeDetail,
  updateCooperative,
} from '@/services/cooperative';

import POI from '@/components/POI/POI';
import { CloseOutlined } from '@ant-design/icons';
import './index.less';

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

export default (props) => {
  //列表数据
  const [data, setData] = useState([]);

  //合作社Id
  const [orgId, setOrgId] = useState('');
  const [form] = Form.useForm();
  //合作社表单数据
  const [listForm, setListForm] = useState({});
  //确定按钮loading框防连点
  const [loading, setLoading] = useState(false);
  //记录定位信息
  const [newLocName, setLocName] = useState('');
  const [newAddress, setAddress] = useState('');
  //合作社所属区域列表
  const [regionList, setRegionList] = useState([]);

  //选中左侧列表右侧显示详情
  const handleslect = (val) => {
    setOrgId(val);
  };
  const handleDelete = (val) => {
    deleteCooperative(val).then(() => {
      message.success('删除成功');
      setOrgId();
      handelReset();
    }).catch((err) => {
      console.log(err.message)
    });
  };
  // 刷新左侧列表
  const handelReset = () => {
    setData([]);
    getCooperativeList({ pageSize: 999 })
      .then((res) => {
        const list = res.records?.map((item) => {
          return { title: item.name, key: item.orgId };
        });
        setData(list);
      })
      .catch((err) => {
        message.error(err.message || err);
      });
  };
  // 动态生成树
  const handelNode = (item) => {
    let node = (
      <div
        key={item.orgId}
        style={{ justifyContent: 'space-between', display: 'flex', padding: '8px 0' }}
        onClick={() => handleslect(item.key)}
      >
        <span>{item.title}</span>
        <Popconfirm
          title="您是否确认删除 ?"
          onConfirm={() => handleDelete(item.key)}
          okText="确定"
          cancelText="取消"
        >
          <CloseOutlined style={{ color: 'red', display: 'grid', placeItems: 'center' }} />
        </Popconfirm>
      </div>
    );
    return node;
  };

  //提交表单
  const Submit = (data) => {
    setLoading(true);
    if (orgId) {
      updateCooperative(orgId, {
        ...listForm,
        ...data,
        lng: data.location.split(',')[0],
        lat: data.location.split(',')[1],
      })
        .then(() => {
          setLoading(false);
          message.success('数据更新成功');
          handelReset();
        })
        .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('数据保存成功');
          handelReset();
        })
        .catch((err) => {
          setLoading(false);
          message.error(err.message || err);
        });
    }
  };

  useEffect(() => {
    handelReset();
    getRegionList()
      .then((res) => {
        setRegionList(res.records || []);
      })
      .catch((err) => {
        message.error(err.message || err);
      });
  }, []);
  useEffect(() => {
    if (orgId) {
      getCooperativeDetail(orgId)
        .then((res) => {
          setListForm(res || []);
          form.setFieldsValue({ ...res, location: res.lng + ',' + res.lat });
        })
        .catch((err) => {
          message.error(err.message || err);
        });
    } else {
      setListForm();
      form.resetFields();
    }
  }, [orgId]);
  return (
    <PageHeaderWrapper>
      <Row gutter={16}>
        <Col span={8}>
          <Card
            title="列表"
            extra={
              <Button type='link' onClick={() => setOrgId()}>
                添加
              </Button>
            }
          >
            <Tree className="treeClass" titleRender={(data) => handelNode(data)} treeData={data} />
          </Card>
        </Col>
        <Col span={16}>
          <Card title="详情">
            <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">
                <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="员工数">{listForm?.workerNum || 0}</FormItem>
              <FormItem label="农机数">{listForm?.machineryNum || 0}</FormItem>
              <FormItem label="订单完成数">{listForm?.orderNum || 0}</FormItem>
              <FormItem label=" " colon={false}>
                <Button type="primary" loading={loading} htmlType="submit">
                  保存
                </Button>
              </FormItem>
            </Form>
          </Card>
        </Col>
      </Row>
    </PageHeaderWrapper>
  );
};