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() { |
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; |
export default OrgnizationMgm; |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue