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

import React, { useState } from 'react';
import { Form, Input, Modal, Select, Row, Col } 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, firmList }) => {

   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.lng)
                  form.setFieldValue('latitude', result.poiList.pois[0].location.lat)
               }) //关键字查询查询
            }
         }
         auto.on("select", select);//注册监听，当选中某条记录时会触发
         map.on('click', function (e) {  //点击地图获取经纬度
            form.setFieldValue('longitude', e.lnglat.lng)
            form.setFieldValue('latitude', e.lnglat.lat)
         });
      });

   }, [])



   return (
      <Modal
         className="global-modal"
         title={modelData?.id ? '编辑项目' : '新建项目'}
         width={717}
         open={true}
         onOk={() => {
            form.validateFields().then(v => {
               dispatch(projectRegime.postAddProject({
                  ...v,
                  img: v.img ? v.img.map(u => u.storageUrl) : [],
                  id: modelData?.id
               })).then(res => {
                  if (res.success) {
                     success()
                  }
               })
            })
         }}
         onCancel={() => close()}
      >
         <Form
            style={{}}
            form={form}
            labelAlign='right'
            labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}
            onFinish={r => {
            }}
            initialValues={{
               img: (modelData.img || []).map(s => {
                  return {
                     storageUrl: s
                  }
               }),
               describe: modelData?.describe,
            }}
         >
            <div style={{ position: 'relative', display: 'flex' }}>
               <Form.Item label='结构物名称' labelCol={{ span: 9 }} name="name" style={{ width: 369 }}
                  initialValue={modelData?.name}
                  rules={[{ required: true, message: '请输入结构物名称' },]}
               >
                  <Input placeholder="请输入结构物名称" allowClear bordered={false} />
               </Form.Item>
               <Form.Item label='结构物类型' labelCol={{ span: 9 }} name="type" style={{ width: 254 }}
                  initialValue={modelData?.type || '桥梁'}
               // rules={[{ required: true, message: '请选择结构物类型' },]}
               >
                  <Select
                     bordered={false}
                     allowClear
                     options={[
                        { value: '桥梁', label: '桥梁' },
                        { value: '隧道', label: '隧道' },
                        { value: '管廊', label: '管廊' }]}
                  />
               </Form.Item>
            </div>
            <div style={{ position: 'relative' }}>
               <Form.Item label="所在地区:" labelCol={{ span: 9 }} labelAlign='right' name="longitude" style={{ display: 'inline-block', width: 'calc(60% - 50px)', }}
                  rules={[{ required: true, 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("请输入横坐标")]);
                     }
                  }]}
               >
                  <Input placeholder="经度支持数字" bordered={false} />
               </Form.Item>
               &nbsp;—&nbsp;
               <Form.Item name="latitude" style={{ display: 'inline-block', width: 'calc(40% + 15px)', }}
                  rules={[{ required: true, 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("请输入纵坐标")]);
                     }
                  }]}
               >
                  <Input placeholder="维度支持数字" bordered={false} />
               </Form.Item>
               <img src='/assets/images/show_map.svg' style={{ position: 'absolute', width: 28, top: 2, right: 47, cursor: 'pointer' }} onClick={() => {
                  setShowBaiduMap(!showBaiduMap)
               }} />
            </div>
            <Form.Item
               label={"地址"}
               name='location'
               style={showBaiduMap ? { display: 'block' } : { display: 'none' }}
            >
               <Input id="tipinput" bordered={false} />
            </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="描述">
               <TextArea bordered={false} />
            </Form.Item>
            <Form.Item
               label="结构物图片"
               name='img'
               help={<div style={{ fontSize: 12 }}>说明：请上传png，jpg格式图片，图片大小不超过5M，建议图片宽高比16:9</div>}
            // rules={[{ required: true, message: '请上传图片', },]}
            >
               <Uploads
                  // className='upload'
                  listType='picture-card'
                  uploadType='project'
                  maxFilesNum={1}
                  maxFileSize={5}
                  isQiniu={true}
                  // onChange={vsjunct}
                  fileTypes={["png", "jpg"]}
                  // value={editUrl}
                  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);