Inspection/web/client/src/sections/projectRegime/components/pointModel.js

import React, { useState } from 'react';
import { Button, Form, Input, Modal, Select, DatePicker } from 'antd';
import { EnvironmentTwoTone } from '@ant-design/icons';
const { TextArea } = Input;
import { connect } from 'react-redux';
import Uploads from '$components/Uploads';
import { useEffect } from 'react';
import moment from 'moment';

const ProjectAddModel = ({ dispatch, actions, user, modelData, close, success, qrCodeId }) => {

   const { projectRegime } = actions
   const [showBaiduMap, setShowBaiduMap] = useState(false)
   const [form] = Form.useForm();

   useEffect(() => {
      if (modelData?.longitude && modelData?.latitude) {
         form.setFieldValue('longitude', modelData?.longitude)
         form.setFieldValue('latitude', modelData?.latitude)
      }
      var map = new AMap.Map('container', {
         resizeEnable: true, //是否监控地图容器尺寸变化
         zoom: 11, //初始化地图层级
         center: [116.397428, 39.90923] //初始化地图中心点
      });

      var autoOptions = {
         input: "tipinput"
      };

      AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder'], () => {
         var auto = new AMap.AutoComplete(autoOptions);
         var placeSearch = new AMap.PlaceSearch({
            map: map
         });  //构造地点查询类

         function select(e) {
            if (e) {
               placeSearch.setCity(e.poi.adcode);
               placeSearch.search(e.poi.name, function (status, result) {
                  form.setFieldValue('longitude', result.poiList.pois[0].location.lat)
                  form.setFieldValue('latitude', result.poiList.pois[0].location.lng)
               }) //关键字查询查询
            }
         }
         auto.on("select", select);//注册监听，当选中某条记录时会触发
         map.on('click', function (e) {  //点击地图获取经纬度
            form.setFieldValue('longitude', e.lnglat.lat)
            form.setFieldValue('latitude', e.lnglat.lng)
         });
      });


   }, [])


   return (
      <Modal
         title={modelData.id ? '编辑点位' : '新增点位'}
         width={570}
         open={true}
         onOk={() => {
            form.validateFields().then(r => {
               dispatch(projectRegime.addPosition({
                  ...r,
                  id: modelData?.id,
                  projectId: qrCodeId,
                  latitude: r?.latitude ? r?.latitude : null,
                  longitude: r?.longitude ? r?.longitude : null,
                  img: r.img ? r.img.map(u => u.storageUrl) : [],
               })).then(res => {
                  if (res.success) {
                     success()
                  }
               })
            })
         }}
         onCancel={() => {
            close()
         }}
      >
         <Form
            style={{}}
            form={form}
            labelAlign='right'
            labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}
            onFinish={r => {

            }}
            initialValues={{
               img: (modelData.img || []).map(s => {
                  return {
                     storageUrl: s
                  }
               }),
            }}
         >
            <Form.Item label='点位名称' name="name" style={{}}
               initialValue={modelData?.name}
               rules={[{ required: true, message: '必填，名称不能包含 \\ / : * ? " < > | #', pattern: new RegExp('^[^\\\\/|:*?\"<>#]+$') },]}
            >
               <Input placeholder="请输入点位名称" allowClear />
            </Form.Item>
            <div style={{ position: 'relative' }}>
               {/* /^\d+$|^\d*\.\d+$/g */}
               <Form.Item label="所在地区:" labelCol={{ span: 11 }} labelAlign='right' name="longitude" style={{ display: 'inline-block', width: 'calc(60% - 30px)', }}
                  rules={[{ required: false, message: '', }, {
                     validator: (rule, value, callback) => {
                        const sjh = /^\d+$|^\d*\.\d+$/g;
                        if (value) {
                           let valid = sjh.test(value);
                           if (!valid) {
                              return callback([new Error("横坐标填写错误")]);
                           }
                           callback();
                        }
                        // return callback([new Error("请输入横坐标")]);
                        return Promise.resolve();
                     }
                  }]}
               >
                  <Input placeholder="经度支持数字" />
               </Form.Item>
               ~
               <Form.Item name="latitude" style={{ display: 'inline-block', width: 'calc(40% + 15px)', }}
                  rules={[{ required: false, message: '', }, {
                     validator: (rule, value, callback) => {
                        const sjh = /^\d+$|^\d*\.\d+$/g;
                        if (value) {
                           let valid = sjh.test(value);
                           if (!valid) {
                              return callback([new Error("纵坐标填写错误")]);
                           }
                           callback();
                        }
                        // return callback([new Error("请输入纵坐标")]);
                        return Promise.resolve();
                     }
                  }]}
               >
                  <Input placeholder="维度支持数字" />
               </Form.Item>
               <EnvironmentTwoTone style={{ position: 'absolute', top: 5, right: 27, fontSize: 22 }} onClick={() => {
                  setShowBaiduMap(!showBaiduMap)
               }} />
            </div>
            <Form.Item
               label={"地址"}
               name='location'
               style={showBaiduMap ? { display: 'block' } : { display: 'none' }}
            >
               <Input id="tipinput" />
            </Form.Item>
            <Form.Item

               label="地图"
               name='map'
               style={showBaiduMap ? { display: 'block' } : { display: 'none' }}
            >
               <div id="container" style={{ width: '100%', height: '425px', marginBottom: '15px' }}></div>
            </Form.Item>
            <Form.Item name='describe' label="描述"
               initialValue={modelData?.describe}
               rules={[{ required: true, message: '请输入描述内容', },]}>
               <TextArea />
            </Form.Item>
            <Form.Item label='设备编号' name="equipmentNo" style={{}}
               initialValue={modelData?.equipmentNo}>
               <Input placeholder="请输入设备编号" allowClear />
            </Form.Item>
            <Form.Item label='设备型号' name="equipmentModel" style={{}}
               initialValue={modelData?.equipmentModel}>
               <Input placeholder="请输入设备型号" allowClear />
            </Form.Item>
            <Form.Item
               label="点位图片"
               name='img'
               help={<div style={{ fontSize: 12 }}>说明：请上传png，jpg格式图片，图片大小不超过10M</div>}
            >
               <Uploads
                  listType='picture-card'
                  uploadType='project'
                  maxFilesNum={1}
                  maxFileSize={10}
                  isQiniu={true}
                  fileTypes={["png", "jpg"]}
                  defaultValue={(modelData.img || []).map(s => {
                     return {
                        storageUrl: s
                     }
                  })}
               />
            </Form.Item>
         </Form>
      </Modal>

   );
};


function mapStateToProps(state) {
   const { auth, global } = state;
   return {
      user: auth.user,
      actions: global.actions,
   };
}

export default connect(mapStateToProps)(ProjectAddModel);