|
|
|
@ -1,5 +1,5 @@ |
|
|
|
import React, { useState, useRef, useEffect } from "react"; |
|
|
|
import { message, Pagination, Table, Input, Modal, Tree, Button } from "antd"; |
|
|
|
import { message, Pagination, Table, Input, Modal, Tree, Button } from "antd"; |
|
|
|
import { DeleteOutlined, EditOutlined, PlusCircleOutlined } from '@ant-design/icons'; |
|
|
|
import ajax from "@/services" |
|
|
|
import { BaseMap } from "@/components" |
|
|
|
@ -73,30 +73,31 @@ function AreaManage() { |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
const handleAreaAdd = ({level, pid, isCity}) => { |
|
|
|
const handleAreaAdd = ({ level, id, isCity }) => { |
|
|
|
let pid =id |
|
|
|
setIsCity(isCity) |
|
|
|
setPid(pid) |
|
|
|
setLevel(Number(level)+1) |
|
|
|
setLevel(Number(level) + 1) |
|
|
|
setEditStatus(false) |
|
|
|
setModalAreaVisible(true) |
|
|
|
} |
|
|
|
|
|
|
|
const handleAreaEdit = ({name, id, virtually_code, code, lng_lat}) => { |
|
|
|
setEditForm({name, id, virtually_code, code, lng_lat}) |
|
|
|
const handleAreaEdit = ({ name, id, virtually_code, code, lng_lat }) => { |
|
|
|
setEditForm({ name, id, virtually_code, code, lng_lat }) |
|
|
|
setEditStatus(true) |
|
|
|
setModalAreaVisible(true) |
|
|
|
} |
|
|
|
|
|
|
|
// 区域删除 |
|
|
|
const handleAreaDel = ({name, id}) => { |
|
|
|
const handleAreaDel = ({ name, id }) => { |
|
|
|
Modal.confirm({ |
|
|
|
title: '确认删除？', |
|
|
|
content: `是否确认删除区域： ${name}`, |
|
|
|
icon: <DeleteOutlined style={{color: '#f40'}}/>, |
|
|
|
icon: <DeleteOutlined style={{ color: '#f40' }} />, |
|
|
|
okText: '删除', |
|
|
|
cancelText: '取消', |
|
|
|
onOk: () => { |
|
|
|
ajaxAreaDel({name, id}).then((msg) => { |
|
|
|
ajaxAreaDel({ name, id }).then((msg) => { |
|
|
|
message.success(msg) |
|
|
|
getAreaTree() |
|
|
|
}).catch((err) => { |
|
|
|
@ -112,12 +113,12 @@ function AreaManage() { |
|
|
|
setModalAreaVisible(false) |
|
|
|
setModalMapVisible(true) |
|
|
|
} |
|
|
|
const handleMapClick = ({lat, lng}) => { |
|
|
|
const handleMapClick = ({ lat, lng }) => { |
|
|
|
setLatlng([lat.toFixed(4), lng.toFixed(4)]) |
|
|
|
} |
|
|
|
|
|
|
|
// 区域新增 |
|
|
|
const handleAreaConfirm = ({formData, editStatus}) => { |
|
|
|
const handleAreaConfirm = ({ formData, editStatus }) => { |
|
|
|
if (editStatus) { // 编辑 |
|
|
|
ajaxAreaEdit(formData).then((msg) => { |
|
|
|
message.success(msg) |
|
|
|
@ -146,19 +147,26 @@ function AreaManage() { |
|
|
|
setModalAreaVisible(true) |
|
|
|
} |
|
|
|
} |
|
|
|
const treeTitleRender = ({name, children, level, pid, id, virtually_code, lng_lat, code}) => { |
|
|
|
const treeTitleRender = ({ name, children, level, pid, id, virtually_code, lng_lat, code }) => { |
|
|
|
return <> |
|
|
|
<span className='label-text'>{name}</span> |
|
|
|
{ |
|
|
|
children ? ( |
|
|
|
<PlusCircleOutlined className='label-icon' onClick={() => handleAreaAdd({level, pid, isCity: true})} /> |
|
|
|
level === 1 ? ( |
|
|
|
<PlusCircleOutlined className='label-icon' onClick={() => handleAreaAdd({ level, id, isCity: true })} /> |
|
|
|
) : null |
|
|
|
} |
|
|
|
{ |
|
|
|
level === 2 ? <> |
|
|
|
<PlusCircleOutlined className='label-icon' onClick={() => handleAreaAdd({ level, id, isCity: false })} /> |
|
|
|
<DeleteOutlined className="label-icon" onClick={() => handleAreaDel({ name, id })} /> |
|
|
|
<EditOutlined className="label-icon" onClick={() => handleAreaEdit({ name, id, virtually_code, code, lng_lat })} /> |
|
|
|
</> : null |
|
|
|
} |
|
|
|
{ |
|
|
|
level > 2 ? <> |
|
|
|
<PlusCircleOutlined className='label-icon' onClick={() => handleAreaAdd({level, pid, isCity: false})} /> |
|
|
|
<DeleteOutlined className="label-icon" onClick={() => handleAreaDel({name, id})} /> |
|
|
|
<EditOutlined className="label-icon" onClick={() => handleAreaEdit({name, id, virtually_code, code, lng_lat})}/> |
|
|
|
{/* <PlusCircleOutlined className='label-icon' onClick={() => handleAreaAdd({level, pid, isCity: false})} /> */} |
|
|
|
<DeleteOutlined className="label-icon" onClick={() => handleAreaDel({ name, id })} /> |
|
|
|
<EditOutlined className="label-icon" onClick={() => handleAreaEdit({ name, id, virtually_code, code, lng_lat })} /> |
|
|
|
</> : null |
|
|
|
} |
|
|
|
</> |
|
|
|
@ -189,7 +197,7 @@ function AreaManage() { |
|
|
|
editForm={editForm} |
|
|
|
visible={modalAreaVisible} |
|
|
|
onMapSelect={modalMapSelct} |
|
|
|
onOk={(formData, editStatus) => handleAreaConfirm({formData, editStatus})} |
|
|
|
onOk={(formData, editStatus) => handleAreaConfirm({ formData, editStatus })} |
|
|
|
latlng={latlng} |
|
|
|
onCancel={() => handleModalClose()} |
|
|
|
/> |
|
|
|
@ -202,12 +210,12 @@ function AreaManage() { |
|
|
|
<div className="modal-map-content"> |
|
|
|
<BaseMap |
|
|
|
id="map-select-container" |
|
|
|
onClick={({latlng}) => handleMapClick(latlng)} |
|
|
|
onClick={({ latlng }) => handleMapClick(latlng)} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div className="modal-map-info"> |
|
|
|
<Input value={latlng}></Input> |
|
|
|
<Button type="primary" onClick={() => handleLatLngConfirm()}>确定</Button> |
|
|
|
<Input value={latlng}></Input> |
|
|
|
<Button type="primary" onClick={() => handleLatLngConfirm()}>确定</Button> |
|
|
|
</div> |
|
|
|
</Modal> |
|
|
|
</> |
|
|
|
|
