.

config/routes.js

@@ -78,6 +78,17 @@ export default [
         path: '/Machinery/Cooperative/edit.jsx',
         name: '合作社编辑',
         component: './Machinery/Cooperative/edit.jsx',
+        // hideInMenu: true,
+      },
+      {
+        path: '/Machinery/Employees',
+        name: '员工列表',
+        component: './Machinery/Employees',
+      },
+      {
+        path: '/Machinery/Employees/edit.jsx',
+        name: '员工编辑',
+        component: './Machinery/Employees/edit.jsx',
         hideInMenu: true,
       },
     ],

src/components/AMap/SearchPOI.jsx

@@ -0,0 +1,132 @@
+
+import { useState, useEffect, useRef } from 'react'
+import loader from './loader'
+import { newMarker, autoPos, autoPoi } from './utils'
+
+const plugins = ['AMap.Scale', 'AMap.ToolBar', 'AMap.Geolocation', 'AMap.Autocomplete', 'AMap.PlaceSearch']
+
+export default (props) => {
+  const { className, style, onChange, value, setAddress, setLocName, setPkLocName, setParkingAddress, roomBoole } = props
+
+  const map = useRef()
+  const container = useRef()
+  const inputRef = useRef()
+  const posMarker = useRef()
+  const [currentPos, setCurrentPos] = useState([]);
+
+
+  const handleClick = (e) => {
+    const locationNmae = e?.target?.w?.label?.locationNmae
+    const name = e?.target?.w?.label?.name
+    const position = e?.target?.w?.label?.position
+    if (roomBoole) {
+      setLocName(name || '')
+      setAddress(locationNmae || '')
+    } else {
+      setPkLocName(name || '')
+      setParkingAddress(locationNmae || '')
+
+    }
+
+
+    const { lnglat } = e
+    const pos = [lnglat.getLng(), lnglat.getLat()]
+    posMarker.current.setMap(map.current);
+    setCurrentPos(pos)
+    onChange(pos.join(','))
+
+  }
+
+
+  useEffect(() => {
+    loader(plugins).then((AMap) => {
+      const instance = new AMap.Map(container.current, { zoom: 12 })
+      instance.addControl(new AMap.Scale())
+      instance.addControl(new AMap.ToolBar())
+
+      // 尝试自动定位到当前位置
+      if (!props.value) {
+        instance.addControl(autoPos(AMap))
+      }
+
+      // 当前选中点 - 初始的时候没有定位
+      posMarker.current = newMarker(AMap, {
+        active: true,
+        position: props.value ? props.value.split(',') : undefined,
+      })
+
+      if (props.value) {
+        posMarker.current.setMap(instance);
+      }
+
+      // POI 搜索
+      autoPoi(instance, AMap, inputRef, { click: handleClick })
+
+      instance.on('click', handleClick);
+      map.current = instance
+    })
+  }, [])
+
+  useEffect(() => {
+    if (value) {
+      setCurrentPos(value.split(','))
+    }
+  }, [value])
+
+  useEffect(() => {
+    if (currentPos.length) {
+      if (posMarker.current) {
+        posMarker.current.setPosition(currentPos)
+      }
+      if (map.current) {
+        map.current.setCenter(currentPos);
+      }
+      if (currentPos.length && map.current) {
+        posMarker.current.setMap(map.current)
+      }
+    }
+  }, [currentPos])
+
+
+  const boxStyle = {
+    width: '100%',
+    height: '400px',
+    position: 'relative',
+    ...(style || {}),
+  }
+
+  const mapStyle = {
+    height: '100%',
+    width: '100%',
+    margin: 0,
+  }
+
+  const inputStyle = {
+    width: '200px',
+    padding: '5px',
+    position: 'absolute',
+    zIndex: 9999,
+    right: '30px',
+    lineHeight: '1em',
+  }
+
+  const inputSty1 = {
+    ...inputStyle,
+    top: '50px',
+  }
+
+  const inputSty2 = {
+    ...inputStyle,
+    top: '10px',
+    background: 'rgba(255, 255, 255, .9)',
+    border: '1px solid #bbb',
+  }
+
+  return (
+    <div className={className} style={boxStyle}>
+      <div ref={container} style={mapStyle} id="poi-map-wrapper"></div>
+      <input placeholder="请输入搜索关键字" ref={inputRef} style={inputSty1} />
+      <input value={`坐标: ${currentPos.join(',')}`} style={inputSty2} disabled />
+    </div>
+  )
+}

src/components/AMap/loader.js

@@ -0,0 +1,19 @@
+import AMapLoader from '@amap/amap-jsapi-loader';
+
+const WEB_KEY = '29259f677b42900507074fd92ecb628a'
+const SERVER_KEY = '3be0a9567a794d2690d378476f057a6f'
+
+export default (plugins, uiPlugins) => {
+  return AMapLoader.load({
+    "key": WEB_KEY,              // 申请好的Web端开发者Key，首次调用 load 时必填
+    "version": "1.4.15",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    "plugins": plugins || [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
+      "version": '1.1',   // AMapUI 缺省 1.1
+      "plugins": uiPlugins || [],       // 需要加载的 AMapUI ui插件
+    },
+    "Loca": {                // 是否加载 Loca， 缺省不加载
+      "version": '1.3.2'  // Loca 版本，缺省 1.3.2
+    },
+  })
+}

src/components/AMap/style.less

@@ -0,0 +1,8 @@
+:global{
+  #poi-map-wrapper {
+    .amap-marker-label{
+      border: 0;
+      background-color: transparent;
+    }
+  }
+}

src/components/AMap/utils.js

@@ -0,0 +1,96 @@
+
+const iconNoraml = '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png';
+const iconActive = '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png';
+
+export function newMarker(AMap, options = {}) {
+  const { active = false, ...params } = options;
+  const icon = new AMap.Icon({
+    size: new AMap.Size(25, 34),
+    image: active ? iconActive : iconNoraml,
+    imageSize: new AMap.Size(25, 34),
+  })
+  const offset = new AMap.Pixel(-13, -30)
+
+  return new AMap.Marker({ icon, offset, ...params });
+}
+
+export function autoPos(AMap, options = {}) {
+  return new AMap.Geolocation({
+    enableHighAccuracy: true,//是否使用高精度定位，默认:true
+    timeout: 10000,          //超过10秒后停止定位，默认：5s
+    buttonPosition: 'RB',    //定位按钮的停靠位置
+    buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
+    zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
+    ...options,
+  });
+}
+
+const labelStyle = `
+  padding: .5em .8em;
+  border-radius: .25rem;
+  background-color: white;
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+`
+
+export function autoPoi(map, AMap, inputRef, evt) {
+
+
+  var locationNmae = ''
+
+  const markers = [];
+  const input = inputRef.current
+
+  const destroy = () => {
+    if (markers.length) {
+      markers.forEach((m) => map.remove(m))
+      markers.splice(0, markers.length)
+    }
+  }
+
+  const handleSearchResult = (status, result) => {
+    // 先清空
+    destroy();
+
+    const { pois } = result.poiList;
+    (pois || []).forEach((poi) => {
+      const { location, name } = poi;
+      const pos = `${location.lng},${location.lat}`
+
+      const marker = newMarker(AMap, {
+        map,
+        position: location,
+
+        label: {
+          content: `<div style="${labelStyle}">${name}</div>`,
+          direction: 'top',
+          name: name,
+          locationNmae: locationNmae,
+          position: pos,
+
+
+        },
+      })
+      marker.on('click', evt.click)
+      markers.push(marker)
+    })
+    // map.setZoom(18);
+    map.setFitView();
+  }
+
+  const placeSearch = new AMap.PlaceSearch({ pageSize: 20 });
+  const autoComplete = new AMap.Autocomplete({ input });
+
+
+  // 选择自动填充
+  autoComplete.on('select', e => {
+    const val = `${e.poi?.district}${e.poi?.address}`
+    locationNmae = val
+    placeSearch.setCity(e.poi.adcode)
+    placeSearch.search(e.poi.name, handleSearchResult)
+
+  })
+
+  autoComplete.on('error', (err) => console.error(err))
+
+  return autoComplete;
+}

src/components/POI/POI.jsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react'
+import { Button, Modal } from 'antd'
+import SearchPOI from '@/components/AMap/SearchPOI'
+
+export default (props) => {
+  const { value, onChange, placeholder, setLocName, setAddress, setPkLocName, setParkingAddress, roomBoole } = props
+
+  const [showModal, setShowModal] = useState(false);
+  const [location, setLocation] = useState()
+
+  const handleOk = () => {
+    onChange(location)
+    setShowModal(false)
+  }
+
+  useEffect(() => {
+    setLocation(value)
+  }, [value])
+
+  return (
+    <div>
+      <Button type="link" onClick={() => setShowModal(true)}>{value || placeholder}</Button>
+      <Modal
+        title="请选择地址"
+        visible={showModal}
+        width={800}
+        bodyStyle={{ padding: 0 }}
+        onOk={handleOk}
+        onCancel={() => setShowModal(false)}
+      >
+        <SearchPOI
+          value={location}
+          onChange={onChange}
+          setLocName={setLocName}
+          setAddress={setAddress}
+          setPkLocName={setPkLocName}
+          setParkingAddress={setParkingAddress}
+          roomBoole={roomBoole}
+        />
+      </Modal>
+    </div>
+  )
+}

src/pages/Machinery/Cooperative/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { history, Link } from 'umi';
 import { Button, Popconfirm, message, Tooltip } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
 // import { getPersonList, exportPersonList } from '@/services/person';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import moment from 'moment';
@@ -11,6 +12,15 @@ const formatterTime = (val) => {
 };
 
 export default (props) => {
+  const actions = () => [
+    <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => gotoDetail()}>
+      新增合作社
+    </Button>,
+  ];
+  const gotoDetail = (id) => {
+    const queryStr = id ? `?id=${id}` : '';
+    history.push(`./Cooperative/edit.jsx${queryStr}`);
+  };
   const columns = [
     {
       title: '合作社名',
@@ -71,7 +81,6 @@ export default (props) => {
         </Popconfirm>,
       ],
     },
-    // 农机列表点击进入详情页 下面是轨迹上面是时间
   ];
   const handleDelete = () => {};
   return (
@@ -82,6 +91,7 @@ export default (props) => {
         columns={columns}
         rowKey="cooperativeId"
         options={false}
+        toolBarRender={actions}
         scroll={{ x: 1000 }}
       />
     </PageHeaderWrapper>

src/pages/Machinery/Employees/edit.jsx

@@ -0,0 +1,149 @@
+import { Form, Input, Card, InputNumber, Select, message, Button } from 'antd';
+import { history } from 'umi';
+import ProCard from '@ant-design/pro-card';
+import { useState, useEffect } from 'react';
+// import { getTagList } from '@/services/tag';
+// import { addAttaList, gettaTouristForm, EditaddAttaList } from '@/services/AttaList'
+
+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 [imageList, setImageList] = useState([]);
+
+  const Submit = (data) => {
+    const typeList = (data.typeList || []).map((x) => {
+      return { ...x, targetId: id, targetType: 'tourist' };
+    });
+    setLoading(true);
+
+    // if (id) {
+    //   EditaddAttaList(id, { ...listForm, ...data, imageList, typeList }).then(() => {
+    //     setLoading(false);
+    //     message.success('数据更新成功');
+    //     goBack();
+    //   })
+    //     .catch(err => {
+    //       setLoading(false);
+    //       message.error(err.message || err);
+    //     });
+    // } else {
+    //   addAttaList({ ...data, imageList, typeList }).then((res) => {
+    //     setLoading(false);
+    //     message.success('数据保存成功');
+    //     history.replace(`/Attractions/Edit?id=${res.touristId}`)
+    //   })
+    //     .catch(err => {
+    //       setLoading(false);
+    //       message.error(err.message || err);
+    //     });
+    // }
+  };
+
+  //地址--占位
+  const [newLocName, setLocName] = useState('');
+  const [newAddress, setAddress] = useState('');
+
+  const selectTagList = (params) => {
+    // return getTagList({
+    // }).then((res) => {
+    // }).catch((err) => {
+    //   return {
+    //     success: false,
+    //   }
+    // })
+  };
+
+  const imageInput = (image) => {
+    return {
+      uid: image.imageId,
+      url: image.url,
+    };
+  };
+
+  const imageOutput = (image) => {
+    return {
+      imageId: image?.raw?.imageId,
+      shopId: id,
+      url: image.url,
+    };
+  };
+  useEffect(() => {
+    selectTagList();
+    // if (id) {
+    //   gettaTouristForm(id).then((res) => {
+    //     setListForm(res)
+    //     form.setFieldsValue(res)
+    //     setImageList(res?.imageList || [])
+    //   })
+    // }
+  }, [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: '请输入姓名' }]}>
+              <Input placeholder="请输入姓名" style={{ width: '350px' }} />
+            </FormItem>
+            <FormItem
+              label="手机号"
+              name="phone"
+              rules={[{ required: true, message: '请输入手机号' }]}
+            >
+              <Input placeholder="请输入手机号" style={{ width: '350px' }} />
+            </FormItem>
+            <FormItem
+              label="所属机构"
+              name="cooperative_id"
+              rules={[{ required: true, message: '请选择所属机构' }]}
+            >
+              <Select style={{ width: '350px' }}>
+                <Option value="6" key="6">
+                  {6}
+                </Option>
+                <Option value="7" key="7">
+                  {7}
+                </Option>
+              </Select>
+            </FormItem>
+            <FormItem label="角色" name="role" rules={[{ required: true, message: '请选择角色' }]}>
+              <Select style={{ width: '350px' }}>
+                <Option value="6" key="6">
+                  农机手
+                </Option>
+                <Option value="7" key="7">
+                  合作社负责人
+                </Option>
+              </Select>
+            </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>
+  );
+};

src/pages/Machinery/Employees/index.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { history, Link } from 'umi';
+import { Button, Popconfirm, message, Tooltip } from 'antd';
+// import { getPersonList, exportPersonList } from '@/services/person';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import moment from 'moment';
+import PageTable from '@/components/PageTable';
+
+const formatterTime = (val) => {
+  return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : '';
+};
+
+export default (props) => {
+  const columns = [
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '手机号',
+      dataIndex: 'phone',
+      key: 'phone',
+    },
+    {
+      title: '所属机构',
+      dataIndex: 'title',
+      key: 'title',
+    },
+    {
+      title: '角色',
+      dataIndex: 'role',
+      key: 'role',
+    },
+    {
+      title: '注册时间',
+      dataIndex: 'createData',
+      key: 'createData',
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      render: (_, record) => [
+        <Link key={1} to={`./edit.jsx`}>
+          编辑
+        </Link>,
+        <Popconfirm
+          key={2}
+          title="您是否确认删除 ?"
+          onConfirm={() => handleDelete(record.cooperativeId)}
+          okText="确定"
+          cancelText="取消"
+        >
+          <a href="#">删除</a>
+        </Popconfirm>,
+      ],
+    },
+  ];
+  const handleDelete = () => {};
+  return (
+    <PageHeaderWrapper>
+      <PageTable
+        // request={getPersonList}
+        // expfunc={exportPersonList}
+        columns={columns}
+        rowKey="employeesId"
+        options={false}
+        scroll={{ x: 1000 }}
+      />
+    </PageHeaderWrapper>
+  );
+};