chenglb
/
PMS_Frontend_v1.0.0
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix(): 系统管理-组织架构，处理已知问题

tags/PMS_Frontend_v1.0.6-develop
wanghx 1 year ago
parent
d7d0fedf0f
commit
40961a80bc
3 changed files with 113 additions and 30 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/pages/SystemMgm/AreaManage/ModalAreaAdd/index.jsx
  2. 2
      src/pages/SystemMgm/AreaManage/loadable.jsx
  3. 115
      src/pages/SystemMgm/OrgnizationMgm/loadable.jsx

4
src/pages/SystemMgm/AreaManage/ModalAreaAdd/index.jsx
View File

@ -97,7 +97,7 @@ function ModalAreaAdd(props) {
rules={[ rules={[
{ required: true }, { required: true },
{ max: 20, message: "编码长度不能大于20位" }, { max: 20, message: "编码长度不能大于20位" },
{ pattern: new RegExp('/^[a-zA-Z0-9]+$/', 'g'), message: '编码为英文大小写或数字' }
{ pattern: new RegExp(/^[a-zA-Z0-9]+$/, 'g'), message: '编码为英文大小写或数字' }
]}> ]}>
<Input /> <Input />
</Form.Item> </Form.Item>
@ -108,7 +108,7 @@ function ModalAreaAdd(props) {
rules={[ rules={[
{ required: true }, { required: true },
{ max: 20, message: "编码长度不能大于20位" }, { max: 20, message: "编码长度不能大于20位" },
{ pattern: new RegExp('/^[a-zA-Z0-9]+$/', 'g'), message: '编码为英文大小写或数字' }
{ pattern: new RegExp(/^[a-zA-Z0-9]+$/, 'g'), message: '编码为英文大小写或数字' }
]}> ]}>
<Input /> <Input />
</Form.Item> </Form.Item>

2
src/pages/SystemMgm/AreaManage/loadable.jsx
View File

@ -178,7 +178,7 @@ function AreaManage() {
level > 2 ? <> level > 2 ? <>
{/* <PlusCircleOutlined className='label-icon' onClick={() => handleAreaAdd({level, pid, isCity: false})} /> */} {/* <PlusCircleOutlined className='label-icon' onClick={() => handleAreaAdd({level, pid, isCity: false})} /> */}
<DeleteOutlined className="label-icon" onClick={() => handleAreaDel({ name, id, children })} /> <DeleteOutlined className="label-icon" onClick={() => handleAreaDel({ name, id, children })} />
<EditOutlined className="label-icon" onClick={() => handleAreaEdit({ name, id, virtually_code, code, lng_lat })} />
<EditOutlined className="label-icon" onClick={() => handleAreaEdit({ name, id, virtually_code, code, lng_lat, type })} />
</> : null </> : null
} }
</> </>

115
src/pages/SystemMgm/OrgnizationMgm/loadable.jsx
View File

@ -1,6 +1,7 @@
import React, { useState, useRef, useEffect, useMemo } from "react"; import React, { useState, useRef, useEffect, useMemo } from "react";
import { message, Input, Upload, Modal, Space, Tree, Tabs, Form, Select, Button, Cascader } from "antd"; import { message, Input, Upload, Modal, Space, Tree, Tabs, Form, Select, Button, Cascader } from "antd";
import { DeleteOutlined, EditOutlined, PlusCircleOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons'; import { DeleteOutlined, EditOutlined, PlusCircleOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import cloneDeep from 'lodash/cloneDeep'
import ajax from "@/services" import ajax from "@/services"
import "./index.scss"; import "./index.scss";
@ -16,6 +17,7 @@ function OrgnizationMgm() {
const [imgUrl, setImgUrl] = useState("") const [imgUrl, setImgUrl] = useState("")
const [orgTree, setOrgTree] = useState([]) const [orgTree, setOrgTree] = useState([])
const [areaTree, setAreaTree] = useState([]) const [areaTree, setAreaTree] = useState([])
const [defaultAreaTree, setDefaultAreaTree] = useState([])
const [activeOrg, setActiveOrg] = useState({}) const [activeOrg, setActiveOrg] = useState({})
const [roleTree, setRoleTree] = useState([]) const [roleTree, setRoleTree] = useState([])
const [roleCheckedKeys, setRoleCheckedKeys] = useState([]) const [roleCheckedKeys, setRoleCheckedKeys] = useState([])
@ -23,18 +25,33 @@ function OrgnizationMgm() {
const [orgModalVisible, setOrgModalVisible] = useState(false) //组织树新增&修改弹窗 const [orgModalVisible, setOrgModalVisible] = useState(false) //组织树新增&修改弹窗
const [orgEditStatus, setOrgEditStatus] = useState(true) //组织树新增修改状态 const [orgEditStatus, setOrgEditStatus] = useState(true) //组织树新增修改状态
const [activeOrgTree, setActiveOrgTree] = useState({ isTop: true }) const [activeOrgTree, setActiveOrgTree] = useState({ isTop: true })
const [departTree, setDepartTree] = useState([])
const [baseForm] = Form.useForm() const [baseForm] = Form.useForm()
const [orgForm] = Form.useForm() const [orgForm] = Form.useForm()
const [areaTreeUpdate, setAreaTreeUpdate] = useState(1)
const imgUploadUrl = () => { const imgUploadUrl = () => {
return isDev ? `http://10.10.128.65:3001/mock/11/v1/controlalarm/upload_image` : `${baseApi}/v1/controlalarm/upload_image`
// https://acb-pre.xihaianparking.com:28181/PMS/api/manage/com/get_depart_menu_tree?id=1777877974658410516
// return isDev ? `http://10.10.128.65:3001/mock/11/v1/controlalarm/upload_image` : `${baseApi}/v1/controlalarm/upload_image`
return isDev ? `http://10.10.128.65:3001/mock/11/v1/controlalarm/upload_image` : `${baseApi}/api/controlalarm/upload_image`
} }
const getAreaTree = () => { const getAreaTree = () => {
ajax.getDepartName().then((e) => {
ajax.getAreaTree().then((e) => {
if (e.status == 20000) { if (e.status == 20000) {
setAreaTree(e.data)
setAreaTree([...e.data])
setDefaultAreaTree([...e.data])
setDefaultTreeActiveKey([e.data[0].id]) setDefaultTreeActiveKey([e.data[0].id])
getRoleTree(e.data[0].id)
}
})
}
const getDepartTree = () => {
ajax.getDepartName().then((e) => {
if (e.status == 20000) {
setDepartTree(e.data)
// setDefaultTreeActiveKey([e.data[0].id])
} }
}) })
} }
@ -63,6 +80,7 @@ function OrgnizationMgm() {
} }
const getOrgTree = () => { const getOrgTree = () => {
setOrgTree([])
ajax.getOrgTree().then((e) => { ajax.getOrgTree().then((e) => {
if (e.status == 20000) { if (e.status == 20000) {
testTemp = e.data testTemp = e.data
@ -77,7 +95,8 @@ function OrgnizationMgm() {
e.nativeEvent.stopImmediatePropagation() e.nativeEvent.stopImmediatePropagation()
orgForm.setFieldsValue({ orgForm.setFieldsValue({
id: undefined, id: undefined,
'depart_id': pid ? [pid, id] : [id],
// 'depart_id': pid ? [pid, id] : [id+""],
"depart_id": recursionFindIdPath([...departTree], id),
name: '', name: '',
level: Number(level) + 1 level: Number(level) + 1
}) })
@ -104,12 +123,11 @@ function OrgnizationMgm() {
}) })
} }
const handleOrgEdit = (e, { isTop, level, pid, id, name }) => { const handleOrgEdit = (e, { isTop, level, pid, id, name }) => {
console.log(isTop);
e.stopPropagation() e.stopPropagation()
e.nativeEvent.stopImmediatePropagation() e.nativeEvent.stopImmediatePropagation()
orgForm.setFieldsValue({ orgForm.setFieldsValue({
id: id, id: id,
'depart_id': pid ? [pid, id] : [id],
'depart_id': recursionFindIdPath([...departTree], id),
'name': name 'name': name
}) })
setActiveOrgTree({ isTop: isTop }) setActiveOrgTree({ isTop: isTop })
@ -117,6 +135,29 @@ function OrgnizationMgm() {
setOrgEditStatus(true) setOrgEditStatus(true)
} }
const recursionFindIdPath = (data, id, path=[]) => {
for (let item of data) {
if (item.id === id) {
// 如果找到目标id，则返回当前路径
return path
}
path.push(item.id); // 将当前节点的name添加到路径中
if (Array.isArray(item.children) && item.children.length > 0) {
// 如果当前节点有子节点，则递归搜索子节点
const result = recursionFindIdPath(item.children, id, path);
if (result) {
// 如果在子节点中找到目标id，则返回结果
return result;
}
}
path.pop(); // 如果当前节点及其子节点中没有找到目标id，则从路径中移除当前节点
}
return null; // 如果在数组中未找到目标id，则返回null
}
const ajaxOrgDetailSave = (data) => { const ajaxOrgDetailSave = (data) => {
return new Promise((resolved, rejected) => { return new Promise((resolved, rejected) => {
ajax.orgDetailEdit(data).then((e) => { ajax.orgDetailEdit(data).then((e) => {
@ -154,7 +195,6 @@ function OrgnizationMgm() {
ajax.saveAreaTree(data).then((e) => { ajax.saveAreaTree(data).then((e) => {
if (e.status == 20000) { if (e.status == 20000) {
resolved(e.message) resolved(e.message)
message.success(e.message)
}else{ }else{
message.error(e.message) message.error(e.message)
} }
@ -205,7 +245,7 @@ function OrgnizationMgm() {
}) })
baseForm.setFieldsValue({ baseForm.setFieldsValue({
platform: data.platform, platform: data.platform,
control_type: data.control_type,
control_type: data.control_type || "",
control_area: data.control_area, control_area: data.control_area,
img_url: data.img_url img_url: data.img_url
}) })
@ -296,12 +336,35 @@ function OrgnizationMgm() {
}) })
} }
const handleControlTypeChange = (val) => {
const copyData = cloneDeep([...defaultAreaTree])
let data = recursionAreaTree([...copyData], val)
setAreaTree(data)
setAreaTreeUpdate(areaTreeUpdate+1)
}
const recursionAreaTree = (treeData, controlType) => {
const data = [...treeData]
return data.map(item => {
if (item.children) {
if ((controlType == 1 && item.level < 2) || (controlType == 2 && item.level < 3)) {
item.children = recursionAreaTree(item.children, controlType)
} else {
item.children = []
}
}
return item
})
}
const formatAreaTree = (data, controlType) => {
const copyData = [...data]
recursionAreaTree(copyData, controlType)
return copyData
}
const handleOrgConfirm = () => { const handleOrgConfirm = () => {
orgForm.validateFields().then((data) => { orgForm.validateFields().then((data) => {
let arr =data.depart_id let arr =data.depart_id
console.log(arr);
// let strArr=arr.map(num=>parseInt(num))
console.log(arr.at(-2));
if (data.id) { if (data.id) {
ajaxAreaEdit(Object.assign({}, { ajaxAreaEdit(Object.assign({}, {
id: data.id, id: data.id,
@ -311,6 +374,7 @@ function OrgnizationMgm() {
message.success(msg) message.success(msg)
setOrgModalVisible(false) setOrgModalVisible(false)
getAreaTree() getAreaTree()
getOrgTree()
}).catch((err) => { }).catch((err) => {
message.error(err) message.error(err)
}) })
@ -323,10 +387,13 @@ function OrgnizationMgm() {
message.success(msg) message.success(msg)
setOrgModalVisible(false) setOrgModalVisible(false)
getAreaTree() getAreaTree()
getOrgTree()
}).catch((err) => { }).catch((err) => {
message.error(err) message.error(err)
}) })
} }
}).catch((err) => {
console.error(err)
}) })
} }
@ -335,6 +402,7 @@ function OrgnizationMgm() {
} }
const tabRender = useMemo(() => { const tabRender = useMemo(() => {
// console.log(areaTree)
return [ return [
{ {
label: `基础配置`, label: `基础配置`,
@ -389,7 +457,7 @@ function OrgnizationMgm() {
{ {
activeOrg.level > 1 ? <> activeOrg.level > 1 ? <>
<Form.Item label="管辖范围" name="control_type"> <Form.Item label="管辖范围" name="control_type">
<Select disabled={!editStatus}>
<Select disabled={!editStatus} onChange={(v) => handleControlTypeChange(v)}>
<Option value={1}>按区管理</Option> <Option value={1}>按区管理</Option>
<Option value={2}>按街管理</Option> <Option value={2}>按街管理</Option>
</Select> </Select>
@ -399,7 +467,7 @@ function OrgnizationMgm() {
disabled={!editStatus} disabled={!editStatus}
checkable checkable
defaultCheckedKeys={getAreaDefaultKeys()} defaultCheckedKeys={getAreaDefaultKeys()}
treeData={areaTree}
treeData={[...areaTree]}
onCheck={handleAreaTreeChange} onCheck={handleAreaTreeChange}
fieldNames={{ fieldNames={{
title: 'name', title: 'name',
@ -436,11 +504,16 @@ function OrgnizationMgm() {
), ),
} : undefined } : undefined
] ]
}, [JSON.stringify(activeOrg), editStatus, imgUrl, roleCheckedKeys])
}, [JSON.stringify(activeOrg), editStatus, imgUrl, roleCheckedKeys, areaTreeUpdate])
useEffect(() => {
setAreaTreeUpdate(areaTreeUpdate+1)
}, [JSON.stringify(areaTree)])
useEffect(() => { useEffect(() => {
getOrgTree() getOrgTree()
getAreaTree() getAreaTree()
getDepartTree()
// getRoleTree() // getRoleTree()
}, []) }, [])
@ -466,10 +539,13 @@ function OrgnizationMgm() {
return <> return <>
<div className="orgnization-container"> <div className="orgnization-container">
<div className="org-tree-container"> <div className="org-tree-container">
{
orgTree.length ? (
<Tree <Tree
defaultSelectedKeys={defaultTreeActiveKey} defaultSelectedKeys={defaultTreeActiveKey}
treeData={orgTree} treeData={orgTree}
autoExpandParent={true} autoExpandParent={true}
defaultExpandAll={true}
titleRender={treeTitleRender} titleRender={treeTitleRender}
onSelect={handleTreeClick} onSelect={handleTreeClick}
fieldNames={{ fieldNames={{
@ -477,6 +553,8 @@ function OrgnizationMgm() {
}} }}
> >
</Tree> </Tree>
) : (<></>)
}
</div> </div>
<div className="org-content"> <div className="org-content">
<Tabs <Tabs
@ -522,17 +600,22 @@ function OrgnizationMgm() {
> >
<Form.Item name="id" hidden></Form.Item> <Form.Item name="id" hidden></Form.Item>
<Form.Item name="level" hidden></Form.Item> <Form.Item name="level" hidden></Form.Item>
<Form.Item label="部门名称" name="name" required>
<Form.Item label="部门名称" name="name" rules={[
{
required: true
},
]}>
<Input /> <Input />
</Form.Item> </Form.Item>
{ {
!orgEditStatus || (orgEditStatus && !activeOrgTree.isTop) ? ( !orgEditStatus || (orgEditStatus && !activeOrgTree.isTop) ? (
<Form.Item label="所属部门" name="depart_id"> <Form.Item label="所属部门" name="depart_id">
<Cascader <Cascader
options={areaTree}
options={departTree}
displayRender={(labelArr) => { displayRender={(labelArr) => {
return [...labelArr].pop() return [...labelArr].pop()
}} }}
changeOnSelect
multiple={false} multiple={false}
onChange={(v) => console.log(v)} onChange={(v) => console.log(v)}
fieldNames={{ fieldNames={{

Write Preview
Loading…
Cancel
Save