gz-customerSystem/src/assets/images/icon/frame.png | patch | view | raw | blame | history | |
gz-customerSystem/src/assets/images/icon/selectIcon.png | patch | view | raw | blame | history | |
gz-customerSystem/src/components/personCard/index.jsx | ●●●●● patch | view | raw | blame | history | |
gz-customerSystem/src/views/register/index.less | ●●●●● patch | view | raw | blame | history | |
gz-customerSystem/src/views/register/visit/component/agentDialog.jsx | ●●●●● patch | view | raw | blame | history | |
gz-customerSystem/src/views/register/visit/component/applyDialog.jsx | ●●●●● patch | view | raw | blame | history | |
gz-customerSystem/src/views/register/visit/component/map.jsx | ●●●●● patch | view | raw | blame | history | |
gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx | ●●●●● patch | view | raw | blame | history |
gz-customerSystem/src/assets/images/icon/frame.png
gz-customerSystem/src/assets/images/icon/selectIcon.png
gz-customerSystem/src/components/personCard/index.jsx
@@ -18,7 +18,7 @@ * handleCheckParty, // 点击查看详情 * handleDeleteParty, // 删除当事人 */ const PersonCard = ({ isCheck, data, handleCheckParty, handleDeleteParty, handleAdd }) => { const PersonCard = ({ isCheck, data, handleCheckParty, handleDeleteParty, handleAdd, handleEdit }) => { let isAgent = false let isAgentFor = false const typeList = data.map(item => { @@ -53,7 +53,7 @@ <Text style={{ maxWidth: '80%', paddingRight: '8px' }} ellipsis={{ tooltip: x.trueName }}> {x.trueName} </Text> <Text ellipsis={{ tooltip: x.perClassName }} className={`public-personCard-tag public-personCard-tag-${(x.partyType === 0 || x.partyType === 2) ? 'blue' : 'orange'}`}> <Text onClick={() => { handleEdit(x) }} ellipsis={{ tooltip: x.perClassName }} className={`public-personCard-tag public-personCard-tag-${(x.partyType === 0 || x.partyType === 2) ? 'blue' : 'orange'}`}> {x.perClassName} </Text> </div> gz-customerSystem/src/views/register/index.less
@@ -207,3 +207,48 @@ border-radius: 2px; margin-left: 8px; } .mapPopconfirm { width: 300px; height: 90px; background: #fff; border-radius: 4px; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10); padding: 15px; &::after { content: " "; position: absolute; height: 0; width: 0; border: solid transparent; top: 100%; right: 50px; border-top-color: white; border-width: 10px; } .mapPopconfirm-btn { background-color: #1A6FB8; color: #fff; cursor: pointer; padding: 3px 10px; width: 80px; text-align: center; position: absolute; right: 15px; bottom: 15px; } } .mapVicinity { margin-bottom: 5px; cursor: pointer; &:hover { color: #1A6FB8; } .mapVicinityIcon { } } gz-customerSystem/src/views/register/visit/component/agentDialog.jsx
@@ -17,27 +17,48 @@ const [visitList, setVisitList] = useState([]) useEffect(() => { if (props.editData) { //编辑 formRef.current.setFieldsValue({ ...props.editData }) //过滤代理人 setVisitList(props.fakeData.filter(item => { console.log(item,props.dialogType); if (props.editData.dialogType === 2) { return item.partyType === 0 } else { return item.partyType === 1 } })) } else { //过滤代理人 setVisitList(props.fakeData.filter(item => { if (props.dialogType === 2) { return item.partyType === 0 } else { return item.partyType === 1 } })) }, [props.fakeData]) } }, []) //保存信息 const handleSave = () => { if (formRef.current) { formRef.current.validate(undefined, (errors, values) => { if (!errors) { if (props.editData) { props.handleAddParty({ ...props.editData, ...values, }) } else { props.handleAddParty({ ...values, partyType: props.dialogType, perClassName: props.dialogType === 2 ? '申请方代理人' : '被申请方代理人', }) } props.onClose() } }); @@ -55,6 +76,7 @@ requiredSymbol={false} initialValues={{ }}//默认值 scrollToFirstError > <Row gutter={[32, 0]} style={{ margin: '0 -10px' }}> <Col span={24}> @@ -227,7 +249,7 @@ <Col span={12}> <FormItem label={(<div style={{ display: 'flex' }}>代理对象<div className="must">必填</div></div>)} rules={[{ required: true }]} rules={[{ required: true, message: '请选择代理对象' }]} field='dailimap' > <CheckboxGroup @@ -256,7 +278,7 @@ className="dialogPrimary" onClick={handleSave} > 保存信息 保存 </Button> <Button className="dialogBack"> 重置 gz-customerSystem/src/views/register/visit/component/applyDialog.jsx
@@ -29,6 +29,15 @@ const [perClass, setPerClass] = useState('09_01001-1'); const [visible, setVisible] = useState(false); useEffect(() => { if (props.editData) { //编辑 formRef.current.setFieldsValue({ ...props.editData }) } }, []) const personIconType = (v) => { switch (v) { @@ -271,12 +280,19 @@ if (formRef.current) { formRef.current.validate(undefined, (errors, values) => { if (!errors) { if (props.editData) { props.handleAddParty({ ...props.editData, ...values }) } else { props.handleAddParty({ ...values, partyType: props.dialogType, perClass: perClass, perClassName: props.dialogType === 0 ? '申请方当事人' : '被申请方当事人' }) } props.onClose() } }); @@ -319,6 +335,7 @@ requiredSymbol={false} initialValues={{ }}//默认值 scrollToFirstError > <Row gutter={[32, 0]} style={{ margin: '0 -10px' }}>{formType(perClass)}</Row> </Form> @@ -336,7 +353,7 @@ className="dialogPrimary" onClick={handleSave} > 保存信息 保存 </Button> <Button className="dialogBack"> 重置 gz-customerSystem/src/views/register/visit/component/map.jsx
@@ -7,8 +7,9 @@ * @Description: 地图 */ import React, { useEffect, useRef, useState } from 'react'; import { Map, Marker, NavigationControl, InfoWindow } from 'react-bmapgl'; import { Form, Input, Button, Message } from '@arco-design/web-react'; import { Map, Marker, NavigationControl, InfoWindow, CustomOverlay } from 'react-bmapgl'; import { Form, Input, Button, Message, Popconfirm } from '@arco-design/web-react'; import { Row, Col } from 'antd'; const FormItem = Form.Item; @@ -21,55 +22,44 @@ }, }; // var map = new window.BMapGL.Map("container"); // map.centerAndZoom(new window.BMapGL.Point(116.401952, 40.032704), 12); // map.enableScrollWheelZoom(); const BMapGL = window.BMapGL // 自定义Marker的icon let myIcon = new BMapGL.Icon(require("@/assets/images/icon/frame.png"), new BMapGL.Size(24, 24), { // 是否允许缩放图标 enableScaling: true }); export default function MapView(props) { const mapRef = useRef() const formRef = useRef() const [addressList, setAddressList] = useState([]) const [addressData, setAddressData] = useState({}) const [selectData, setSelectData] = useState({}) useEffect(() => { //初次进入定位在当前浏览器 if (mapRef.current) { let geolocation = new window.BMapGL.Geolocation(); let geolocation = new BMapGL.Geolocation(); geolocation.getCurrentPosition((r) => { if (geolocation.getStatus() === 0) { handleAnalysis(r.point); } else { Message.warning(`Failed with status ${geolocation.getStatus()}`); } }); }, '广州市'); } }, [mapRef]); // const addCustomLabel = (point, content) => { // var label = new window.BMapGL.Label(content, { // position: point, // offset: new window.BMapGL.Size(10, 20) // }); // label.setStyle({ // color: '#000', // fontSize: '30px', // border: '2px solid #1E90FF' // }); // mapRef.current.map.addOverlay(label); // }; //查询 const handleSubmit = () => { if (formRef.current) { formRef.current.validate(undefined, (errors, values) => { if (!errors) { var myGeo = new window.BMapGL.Geocoder(); var myGeo = new BMapGL.Geocoder(); myGeo.getPoint(values.name, (point) => { if (point) { mapRef.current.map.centerAndZoom(point, 15); mapRef.current.map.addOverlay(new window.BMapGL.Marker(point, { title: values.name })); handleAnalysis(point, values.name); // 添加地点名称 // addCustomLabel(point, 'label'); // 添加自定义样式标签 handleAnalysis(point); // 添加地点名称 } else { Message.warning('您输入的地址没有解析到结果!'); } @@ -79,35 +69,40 @@ } }; // 解析地址为中文 const handleAnalysis = (pt, name) => { let geoc = new window.BMapGL.Geocoder(); const handleAnalysis = (pt) => { let geoc = new BMapGL.Geocoder(); geoc.getLocation(pt, (rs) => { console.log(rs, 'rsss') let addComp = rs.addressComponents; let addName = `${addComp.province}${addComp.city}${addComp.district}${addComp.street}${addComp.streetNumber}`; let addComp = rs.content; let addName = `${addComp.address} ${addComp.poi_desc}`; let surroundingPois = rs.surroundingPois; if (name) { addName += ` ${name}`; // 添加地点名称 } mapRef.current?.map.centerAndZoom(pt, 15); mapRef.current?.map.addOverlay(new window.BMapGL.Marker(pt, { title: addName })); mapRef.current?.map.centerAndZoom(pt, 15);//地图指向中心 mapRef.current?.map.clearOverlays();//清除所有标点 mapRef.current?.map.addOverlay(new BMapGL.Marker(pt, { icon: myIcon }));//添加标点 setAddressList(surroundingPois); console.log(pt, addName, 'pt', 'addName') setAddressData({ pt, addName }) }); }; console.log(addressList, 'addressList') //点击附近地址 const clickVicinity = (data) => { const address = data.address + data.title setSelectData({ uid: data.uid, address }) formRef.current.setFieldValue('name', address) handleSubmit() } //使用地址 const handleUseAddress = (e) => { e.stopPropagation() console.log(addressData); } return ( <div> @@ -141,21 +136,33 @@ enableScrollWheelZoom onClick={(e) => { let pt = e.latlng; handleAnalysis(pt, null); // addCustomLabel(pt, 'label'); // 添加自定义样式标签 handleAnalysis(pt); }} > <Marker position={{ lng: 116.402544, lat: 39.928216 }} /> <NavigationControl /> <InfoWindow position={{ lng: 116.402544, lat: 39.928216 }} text="内容" title="标题" /> <CustomOverlay position={addressData.pt || new BMapGL.Point(113.26552377996691, 23.143506946336696)} offset={{ width: -91, height: -25 }} > <div className='mapPopconfirm'> <div>{addressData.addName}</div> <div className='mapPopconfirm-btn' onClick={handleUseAddress}>使用地址</div> </div> </CustomOverlay> </Map> </Col> <Col span={8}> <div style={{ color: '#86909C', marginTop: '43px' }}>附近地址</div> <div style={{ height: 'calc(100% - 64px)', overflowY: 'scroll' }}> {addressList?.map((item, index) => ( <div key={index}>{item.address} {item.title}</div> <div style={{ height: '343px', overflowY: 'scroll' }}> {addressList?.map(item => ( <div key={item.uid} className='mapVicinity' onClick={() => { clickVicinity(item) }} style={{ color: selectData.uid === item.uid ? '#1A6FB8' : '' }} > {item.address} {item.title} <div className='mapVicinityIcon'></div> </div> ))} </div> </Col> gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
@@ -47,9 +47,10 @@ const [fileTip, setFileTip] = useState('0'); const [detailVisabled, setDetailVisabled] = useState(false);//查看信息弹窗控制 const [mapView, setMapView] = useState(false); const [flagId, setFlagId] = useState(0);//赋予当事人唯一id,用于删除 const [flagId, setFlagId] = useState(1);//赋予当事人唯一id,用于删除 const [visible, setVisible] = useState(false); const [apply, setApply] = useState(false); const [editData, setEditData] = useState(null); const addressOptions = [ { label: '地址1', value: 'address1' }, @@ -370,12 +371,24 @@ //添加当事人 const handleAddParty = (value) => { console.log(value); if (value.id) { //编辑 const newList = fakeData.map(item => { if (item.id === value.id) { return value } else { return item } }) setFakeData(newList) setEditData(null) } else { setFakeData([...fakeData, { ...value, id: flagId }]) setFlagId(flagId + 1) } } //删除当事人 @@ -383,6 +396,19 @@ event.stopPropagation(); const filterData = fakeData.filter(item => item.id !== value.id) setFakeData(filterData) } //编辑 const handleEdit = (value) => { console.log(value); if (value.partyType === 0 || value.partyType === 1) { //当事人 setAddVisabled(true) } else { //代理人 setAgentVisible(true) } setEditData(value) } @@ -402,6 +428,7 @@ handleCheckParty={handleCheckParty} handleAdd={handleAdd} handleDeleteParty={handleDeleteParty} handleEdit={handleEdit} /> </div> <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}> @@ -734,6 +761,7 @@ dialogType={dialogType} onClose={() => setAddVisabled(false)} handleAddParty={handleAddParty} editData={editData} /> </Modal> <Modal @@ -752,6 +780,7 @@ onClose={() => setAgentVisible(false)} fakeData={fakeData} dialogType={dialogType} editData={editData} /> </Modal> <Modal