4 changed files with 405 additions and 14 deletions
-
2src/pages/SystemMgm/AreaManage/loadable.jsx
-
70src/pages/SystemMgm/OrgnizationMgm/index.scss
-
315src/pages/SystemMgm/OrgnizationMgm/loadable.jsx
-
32src/services/system.js
@ -1,15 +1,308 @@ |
|||
import React, { useState, useRef, useEffect } from "react"; |
|||
// import { message, Pagination, Table, Space, Modal, } from "antd"; |
|||
// import { dictionary, utils } from "@/config/common"; |
|||
// import moment from 'moment' |
|||
// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; |
|||
// import ajax from "@/services" |
|||
// import { FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components" |
|||
// import "./index.scss"; |
|||
// import errorImg from "@/assets/images/layout/error.png" |
|||
// import { useLocation } from "react-router-dom"; |
|||
import React, { useState, useRef, useEffect, useMemo } from "react"; |
|||
import { message, Input, Upload, Modal, Space, Tree, Tabs, Form, Select, Button } from "antd"; |
|||
import { DeleteOutlined, EditOutlined, PlusCircleOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons'; |
|||
import ajax from "@/services" |
|||
import "./index.scss"; |
|||
|
|||
const isDev = window.location.href.indexOf('localhost') > -1 |
|||
function OrgnizationMgm() { |
|||
return <div>OrgnizationMgm</div> |
|||
|
|||
const [editStatus, setEditStatus] = useState(false) |
|||
const [defaultTreeActiveKey, setDefaultTreeActiveKey] = useState([]) |
|||
const [defaultTreeAreaActiveKey, setDefaultTreeAreaActiveKey] = useState([]) |
|||
const [imgUploading, setImgUploading] = useState(false) |
|||
const [imgUrl, setImgUrl] = useState("") |
|||
const [orgTree, setOrgTree] = useState([]) |
|||
const [areaTree, setAreaTree] = useState([]) |
|||
const [activeOrg, setActiveOrg] = useState({}) |
|||
const [baseForm] = Form.useForm() |
|||
|
|||
const imgUploadUrl = () => { |
|||
return isDev ? `http://10.10.128.65:3001/mock/11/v1/controlalarm/upload_image` : `${baseApi}/v1/controlalarm/upload_image` |
|||
} |
|||
|
|||
const getAreaTree = () => { |
|||
ajax.getAreaTree().then((e) => { |
|||
if (e.status == 20000) { |
|||
setAreaTree(e.data) |
|||
setDefaultTreeActiveKey([e.data[0].id]) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
const ajaxGetOrgDetail = (id) => { |
|||
handleCancel() |
|||
return new Promise((resolved, rejected) => { |
|||
ajax.getOrgDetail({id: id}).then((e) => { |
|||
if (e.status == 20000) { |
|||
resolved(e.data) |
|||
} else { |
|||
rejected(e.message) |
|||
} |
|||
}).catch((err) => { |
|||
rejected(err) |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
const getOrgTree = () => { |
|||
ajax.getOrgTree().then((e) => { |
|||
if (e.status == 20000) { |
|||
setOrgTree(e.data) |
|||
handleTreeClick(undefined, {node: e.data[0]}) |
|||
} |
|||
}) |
|||
} |
|||
const handleOrgAdd = (e) => { |
|||
e.stopPropagation() |
|||
e.nativeEvent.stopImmediatePropagation() |
|||
|
|||
} |
|||
const handleOrgDel = () => { |
|||
e.stopPropagation() |
|||
e.nativeEvent.stopImmediatePropagation() |
|||
} |
|||
const handleOrgEdit = () => { |
|||
e.stopPropagation() |
|||
e.nativeEvent.stopImmediatePropagation() |
|||
} |
|||
|
|||
const ajaxOrgDetailSave = (data) => { |
|||
return new Promise((resolved, rejected) => { |
|||
ajax.orgDetailEdit(data).then((e) => { |
|||
if (e.status == 20000) { |
|||
resolved(e.message) |
|||
} else { |
|||
rejected(e.message) |
|||
} |
|||
}).catch((err) => { |
|||
rejected(err) |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
const handleTreeClick = (e, {node}) => { |
|||
ajaxGetOrgDetail(node.id).then((data) => { |
|||
setActiveOrg({ |
|||
id: node.id, |
|||
key: node.key, |
|||
name: node.name, |
|||
level: node.level, |
|||
img_url: node.img_url, |
|||
control_area: node.control_area, |
|||
...data |
|||
}) |
|||
baseForm.setFieldsValue({ |
|||
platform: data.platform, |
|||
control_type: data.control_type, |
|||
control_area: data.control_area, |
|||
img_url: data.img_url |
|||
}) |
|||
setImgUrl(data.img_url) |
|||
}).catch(err => { |
|||
message.error(err) |
|||
}) |
|||
} |
|||
|
|||
const uploadButton = ( |
|||
<div> |
|||
{imgUploading ? <LoadingOutlined /> : <PlusOutlined />} |
|||
<div |
|||
style={{ |
|||
marginTop: 4, |
|||
}} |
|||
> |
|||
点击上传 |
|||
</div> |
|||
</div> |
|||
) |
|||
|
|||
const beforeUpload = () => { |
|||
setImgUploading(true) |
|||
return true |
|||
} |
|||
|
|||
const handleUploadChange = ({file}) => { |
|||
const res = file.response |
|||
if (res && res.status == 20000) { |
|||
baseForm.setFieldValue('img_url', res.data) |
|||
setImgUrl(res.data) |
|||
setImgUploading(false) |
|||
} |
|||
} |
|||
|
|||
const handleBaseFormValueChange = () => { |
|||
|
|||
} |
|||
|
|||
const handleAreaTreeChange = (checkedKeys) => { |
|||
baseForm.setFieldValue('control_area', checkedKeys.join(',')) |
|||
} |
|||
|
|||
const getAreaDefaultKeys = () => { |
|||
return baseForm.getFieldValue('control_area') |
|||
} |
|||
|
|||
const handleCancel = () => { |
|||
baseForm.setFieldsValue({ |
|||
...activeOrg |
|||
}) |
|||
setImgUrl(activeOrg.img_url) |
|||
setEditStatus(false) |
|||
} |
|||
|
|||
const handleConfirm = () => { |
|||
ajaxOrgDetailSave(baseForm.getFieldsValue()).then((msg) => { |
|||
message.success(msg) |
|||
setEditStatus(false) |
|||
}).catch((err) => { |
|||
message.error(err) |
|||
}) |
|||
} |
|||
|
|||
const handleEdit = () => { |
|||
setEditStatus(true) |
|||
} |
|||
|
|||
const tabRender = useMemo(() => { |
|||
return [ |
|||
{ |
|||
label: `基础配置`, |
|||
key: '1', |
|||
children: ( |
|||
<div className="base-form-container"> |
|||
<Form |
|||
form={baseForm} |
|||
labelCol={{ |
|||
span: 2, |
|||
offset: 1 |
|||
}} |
|||
wrapperCol={{ |
|||
span: 4 |
|||
}} |
|||
initialValues={{ |
|||
type: "1" |
|||
}} |
|||
onValuesChange={handleBaseFormValueChange} |
|||
> |
|||
<Form.Item name="id" hidden></Form.Item> |
|||
<Form.Item name="name" hidden></Form.Item> |
|||
<Form.Item label="机构名称" name="name"> |
|||
<Space/><Space/>{activeOrg.name} |
|||
</Form.Item> |
|||
<Form.Item label="平台名称" name="platform"> |
|||
<Input disabled={!editStatus}/> |
|||
</Form.Item> |
|||
<Form.Item label="平台logo" name="img_url"> |
|||
<Upload |
|||
name="avatar" |
|||
listType="picture-card" |
|||
className="avatar-uploader" |
|||
showUploadList={false} |
|||
action={imgUploadUrl()} |
|||
beforeUpload={beforeUpload} |
|||
disabled={!editStatus} |
|||
onChange={handleUploadChange}> |
|||
{imgUrl ? ( |
|||
<img |
|||
src={imgUrl} |
|||
alt="avatar" |
|||
style={{ |
|||
width: '100%', |
|||
}} |
|||
/> |
|||
) : ( |
|||
uploadButton |
|||
)} |
|||
</Upload> |
|||
</Form.Item> |
|||
{ |
|||
activeOrg.level > 2 ? <> |
|||
<Form.Item label="管辖范围" name="control_type"> |
|||
<Select disabled={!editStatus}> |
|||
<Option value={1}>按区管理</Option> |
|||
<Option value={2}>按街管理</Option> |
|||
</Select> |
|||
</Form.Item> |
|||
<Form.Item label="管辖区域" className="area-tree" name="control_area"> |
|||
<Tree |
|||
disabled={!editStatus} |
|||
checkable |
|||
defaultCheckedKeys={getAreaDefaultKeys()} |
|||
treeData={areaTree} |
|||
onCheck={handleAreaTreeChange} |
|||
fieldNames={{ |
|||
title: 'name', |
|||
key: 'id' |
|||
}} |
|||
/> |
|||
</Form.Item> |
|||
</> : null |
|||
} |
|||
</Form> |
|||
</div> |
|||
), |
|||
}, |
|||
activeOrg.level > 2 ? { |
|||
label: `功能配置`, |
|||
key: '2', |
|||
children: `Content of Tab Pane 2`, |
|||
} : undefined |
|||
] |
|||
}, [JSON.stringify(activeOrg), editStatus, imgUrl]) |
|||
|
|||
useEffect(() => { |
|||
getOrgTree() |
|||
getAreaTree() |
|||
}, []) |
|||
|
|||
const treeTitleRender = ({name, children, level, pid, id, virtually_code, lng_lat, code}) => { |
|||
return <> |
|||
<span className='label-text'>{name}</span> |
|||
{ |
|||
level > 2 ? <> |
|||
<PlusCircleOutlined className='label-icon' onClick={(e) => handleOrgAdd(e, {level, pid, isCity: false})} /> |
|||
<DeleteOutlined className="label-icon" onClick={(e) => handleOrgDel(e, {name, id})} /> |
|||
<EditOutlined className="label-icon" onClick={(e) => handleOrgEdit(e, {name, id, virtually_code, code, lng_lat})}/> |
|||
</> : ( |
|||
<PlusCircleOutlined className='label-icon' onClick={(e) => handleOrgAdd(e, {level, pid, isCity: true})} /> |
|||
) |
|||
} |
|||
</> |
|||
} |
|||
|
|||
return ( |
|||
<div className="orgnization-container"> |
|||
<div className="org-tree-container"> |
|||
<Tree |
|||
defaultSelectedKeys={defaultTreeActiveKey} |
|||
treeData={orgTree} |
|||
titleRender={treeTitleRender} |
|||
onSelect={handleTreeClick} |
|||
fieldNames={{ |
|||
title: 'name' |
|||
}} |
|||
> |
|||
</Tree> |
|||
</div> |
|||
<div className="org-content"> |
|||
<Tabs |
|||
defaultActiveKey="1" |
|||
items={tabRender} |
|||
/> |
|||
<div className="form-confirm"> |
|||
{ |
|||
!editStatus ? ( |
|||
<Button type="primary" className="yisa-btn" onClick={() => handleEdit()}>编辑</Button> |
|||
) : <> |
|||
<Button type="primary" className="yisa-btn" onClick={() => handleConfirm()}>确认</Button> |
|||
<Button type="ghost" className="yisa-btn" onClick={() => handleCancel()}>取消</Button> |
|||
</> |
|||
} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default OrgnizationMgm; |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue