From d3eefcaf3762ca97483e1517697b6941bd9a58d8 Mon Sep 17 00:00:00 2001
From: dminyi <1301963064@qq.com>
Date: Wed, 28 Aug 2024 09:51:50 +0800
Subject: [PATCH] Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh into master
---
gz-customerSystem/src/views/register/visit/component/applyDialog.jsx | 31 ++++-
gz-customerSystem/src/views/register/visit/component/map.jsx | 123 ++++++++++---------
gz-customerSystem/src/assets/images/icon/frame.png | 0
gz-customerSystem/src/assets/images/icon/selectIcon.png | 0
gz-customerSystem/src/views/register/index.less | 47 +++++++
gz-customerSystem/src/views/register/visit/component/agentDialog.jsx | 56 ++++++--
gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx | 43 ++++++-
gz-customerSystem/src/components/personCard/index.jsx | 4
8 files changed, 212 insertions(+), 92 deletions(-)
diff --git a/gz-customerSystem/src/assets/images/icon/frame.png b/gz-customerSystem/src/assets/images/icon/frame.png
new file mode 100644
index 0000000..c686907
--- /dev/null
+++ b/gz-customerSystem/src/assets/images/icon/frame.png
Binary files differ
diff --git a/gz-customerSystem/src/assets/images/icon/selectIcon.png b/gz-customerSystem/src/assets/images/icon/selectIcon.png
new file mode 100644
index 0000000..49d51b2
--- /dev/null
+++ b/gz-customerSystem/src/assets/images/icon/selectIcon.png
Binary files differ
diff --git a/gz-customerSystem/src/components/personCard/index.jsx b/gz-customerSystem/src/components/personCard/index.jsx
index d9e33c6..fb4cf52 100644
--- a/gz-customerSystem/src/components/personCard/index.jsx
+++ b/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>
diff --git a/gz-customerSystem/src/views/register/index.less b/gz-customerSystem/src/views/register/index.less
index 8f7c546..da3bea2 100644
--- a/gz-customerSystem/src/views/register/index.less
+++ b/gz-customerSystem/src/views/register/index.less
@@ -206,4 +206,49 @@
padding: 0px 4px;
border-radius: 2px;
margin-left: 8px;
- }
\ No newline at end of file
+ }
+.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 {
+
+ }
+}
diff --git a/gz-customerSystem/src/views/register/visit/component/agentDialog.jsx b/gz-customerSystem/src/views/register/visit/component/agentDialog.jsx
index 5dfe16e..bea0658 100644
--- a/gz-customerSystem/src/views/register/visit/component/agentDialog.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/agentDialog.jsx
@@ -17,27 +17,48 @@
const [visitList, setVisitList] = useState([])
useEffect(() => {
- //过滤代理人
- setVisitList(props.fakeData.filter(item => {
- console.log(item,props.dialogType);
- if (props.dialogType === 2) {
- return item.partyType === 0
- } else {
- return item.partyType === 1
- }
- }))
- }, [props.fakeData])
+ if (props.editData) {
+ //编辑
+ formRef.current.setFieldsValue({
+ ...props.editData
+ })
+ //过滤代理人
+ setVisitList(props.fakeData.filter(item => {
+ 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
+ }
+ }))
+ }
+ }, [])
//保存信息
const handleSave = () => {
if (formRef.current) {
formRef.current.validate(undefined, (errors, values) => {
if (!errors) {
- props.handleAddParty({
- ...values,
- partyType: props.dialogType,
- perClassName: props.dialogType === 2 ? '申请方代理人' : '被申请方代理人',
- })
+ 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">
重置
diff --git a/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx b/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx
index bca0bab..3d31adb 100644
--- a/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx
+++ b/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) {
- props.handleAddParty({
- ...values,
- partyType: props.dialogType,
- perClass: perClass,
- perClassName: props.dialogType === 0 ? '申请方当事人' : '被申请方当事人'
- })
+ 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">
重置
diff --git a/gz-customerSystem/src/views/register/visit/component/map.jsx b/gz-customerSystem/src/views/register/visit/component/map.jsx
index c319d6b..fd7dcfc 100644
--- a/gz-customerSystem/src/views/register/visit/component/map.jsx
+++ b/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={{ color: '#86909C', marginTop: '43px' }} >附近地址</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>
diff --git a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
index d6d3993..1ea16e6 100644
--- a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
+++ b/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);
- setFakeData([...fakeData, {
- ...value,
- id: flagId
- }])
- setFlagId(flagId + 1)
+ 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
--
Gitblit v1.8.0