Skip to content

C
CivManage
Commit b65bbf94 authored by Maofei94's avatar Maofei94
Browse files
Options

perf(pages/usercenter): siteManage perf

parent ca29b390
Hide whitespace changes
Inline Side-by-side
Showing with 486 additions and 53 deletions
src/assets/images/icons/user_green.png 0 → 100644
View file @ b65bbf94
This diff was suppressed by a .gitattributes entry.
src/components/Modal/SiteModa.jsx 0 → 100644
View file @ b65bbf94
import React from 'react'
import {
Modal
} from 'antd'
const SiteModal = (props) =>{
console.log(props)
const defaultCofig = {
title:'测试',
visible:false,
}
const config = { ...defaultCofig, ...props}
return (
<Modal
style={{width:"1000px"}}
{...config}
>
{props.children}
</Modal>
)
}
export default SiteModal
\ No newline at end of file
src/pages/orgnazation/DefaultComponent.jsx
View file @ b65bbf94
......@@ -182,11 +182,6 @@ const DefaultComponent = ()=> {
const btnLable = [
{label:'查找用户',handle:handleSearch ,config:{ type:'primary',danger:true} },
{label:'用户导入',handle:handleImport,config:{ type:'info',}},
<<<<<<< Updated upstream
=======
{label:'新建用户',handle:'newHandle'},
{label:'批量关联',handle:'relHandle'}
>>>>>>> Stashed changes
]
return (
......@@ -194,11 +189,7 @@ const DefaultComponent = ()=> {
<PageContainer>
<Card>
<Row>
<<<<<<< Updated upstream
<Col span ={1}>
=======
<Col span ={2}>
>>>>>>> Stashed changes
<div style={{height:"30px",lineHeight:"30px"}}>
机构选择
</div>
......@@ -220,7 +211,6 @@ const DefaultComponent = ()=> {
/> */}
</Col>
</Row>
<<<<<<< Updated upstream
<div style={{marginTop:'20px',textAlign:'center'}}>
<Space>
{
......@@ -233,20 +223,6 @@ const DefaultComponent = ()=> {
}
</Space>
</div>
=======
</Card>
<Card>
<Space>
{
btnLable && btnLable.map( (item,index) => {
const { config} =item
return (
<Button key={index} {...config} onClick ={ ()=>{ item.handle && typeof item.handle === 'function' && item.handle()}}>{item.label}</Button>
)
})
}
</Space>
>>>>>>> Stashed changes
<TestModal
title='用户选择'
visible = {modalVisible}
......
src/pages/orgnazation/ListCard.jsx
View file @ b65bbf94
import React, { useState, useEffect, useCallback} from 'react'
import ListCardItem from './listCardItem'
import React, { useState, useEffect, useCallback} from 'react';
import { Spin } from 'antd';
import ListCardItem from './listCardItem';
import { get, post } from '../../services';
import { orgTest} from '../../services/orgnazation/api'
import { orgTest} from '../../services/orgnazation/api';
const tip ='loading...'
const ListCard = (props) =>{
const { ouid } = props
console.log(ouid)
const { ouid, searchWord } = props
const [valueList, setValueList]=useState([])
const [testList, setTestList] = useState([])
const [loading, setLoading] = useState(true)
const { optionsList} = props
const getValueCallback = useCallback(
(value,index) => {
console.log(value,index)
console.log(valueList,'valueList1```')
setValueList(valueList[index]=value)
console.log(valueList,'valueList')
},[])
useEffect(()=>{
setLoading(true)
const defaultConfig ={
optionsList:[],
title:'默认组',
......@@ -26,11 +29,15 @@ const ListCard = (props) =>{
_version:9999,
_dc:new Date().getTime()
}).then(res =>{
setLoading(false)
const list = []
res && res.map(item =>{
list.push({...defaultConfig,...item})
})
setTestList(list)
}).catch(err =>{
console.error(err)
setLoading(false)
})
//多级嵌套测试
orgTest().then(res =>{
......@@ -38,11 +45,12 @@ const ListCard = (props) =>{
})
},[ouid])
return (
<>
<>
{
loading? <Spin size="large" spinning = {loading} tip={tip} style={{position:'absolute',top:'30%',left:'0',right:'0',bottom:'0'}}/> :
testList && testList.map((item,index) =>{
return (<ListCardItem {...item} itemid={index} key={index}
getValueCallback={getValueCallback}></ListCardItem>)
getValueCallback={getValueCallback} searchWord ={ searchWord} {...props}></ListCardItem>)
})
}
</>
......
src/pages/orgnazation/ListCardItem.less
View file @ b65bbf94
:global{
.spans span{
background-color: red !important;
}
}
.divBox {
display: flex;
flex-wrap: wrap;
......@@ -13,11 +18,19 @@
.checkdiv {
display: flex;
margin-left: 20px;
justify-content: space-between;
.check {
margin: 10px 0 ;
flex: 1;
.spans {
background-color: red !important;
span{
font-size: 200px;
display: none;
color: chartreuse !important;
}
}
}
}
}
src/pages/orgnazation/listCardItem.jsx
View file @ b65bbf94
......@@ -9,12 +9,17 @@ import styles from './ListCardItem.less'
const CheckGroup = Checkbox.Group;
const ListCardItem = (props) =>{
console.log(props)
console.log(props.searchWord)
const [ indeterminate, setIndeterminate ] = useState(false)
const [ allChecked, setAllChecked ] = useState(false) //全选状态
const [ checkList, setCheckList] = useState([]) //复选框列表
const { getValueCallback, itemid, userList, OUName } = props
const { getValueCallback, itemid, userList, OUName, searchWord } = props
const defaultList = userList && userList.map( (item,index) =>{
// if(!searchWord){
// return
// }else{
// if(!item.userName.includes(searchWord))return
// }
item.label = item.userName || item.label
item.value = item.userID || item.label
return item
......@@ -26,7 +31,8 @@ const ListCardItem = (props) =>{
let arr = []
if(checked){
arr = defaultList.map(item =>{
return item.value
item.isChecked=checked
return item
})
}else{
arr = []
......@@ -52,7 +58,14 @@ const ListCardItem = (props) =>{
>{OUName}</Checkbox>
</div>
<div style={{width:"100%"}} className = {styles.checkdiv}>
{defaultList && defaultList.length>0 && <CheckGroup className = {styles.check} onChange = {(e) => { handleChecked(e)}} value={checkList} options = {defaultList} /> }
{/* {defaultList && defaultList.length>0 && <CheckGroup className = {`${styles.check} ${styles.span}`} onChange = {(e) => { handleChecked(e)}} value={checkList} options = {defaultList} /> } */}
<CheckGroup onChange = {(e) => { handleChecked(e)}}>
{defaultList && defaultList.length>0 &&
defaultList.map( (item, index) =>{
return item.label.includes(searchWord) && <Checkbox key={index} checked={item.isChecked} className={ item.label.includes(searchWord)&&styles.spans} value={item.value} >{item.label}</Checkbox>
})
}
</CheckGroup>
</div>
</div>
</>
......
src/pages/userCenter/siteManage/AddModal.jsx 0 → 100644
View file @ b65bbf94
import React, { useState} from 'react';
import {
Form,
Input,
notification
} from 'antd'
import SiteModal from '@/components/Modal/SiteModa';
import { addStation } from '@/services/userCenter/siteManage/api';
const { Item } = Form
const AddModal = (props) =>{
const [form] = Form.useForm();
const [formLayout, setFormLayout] = useState('horizontal');
const [loading,setLoading] = useState(false)
const { confirmModal } =props
const onSubmit = () =>{
form.validateFields().then(res =>{
console.log(res,'res')
setLoading(true)
addStation({
stationName:res.stationName,
description:res.description,
_version:9999,
_dc:new Date().getTime()
}).then(res =>{
setLoading(false)
if(res.success){
form.resetFields()
notification.success({
message: '通知',
duration: 3,
description: '新增成功',
});
confirmModal()
}else{
notification.error({
message: '提示',
duration: 3,
description: res.message,
});
}
}).catch(err =>{
setLoading(false)
notification.error({
message: '提示',
duration: 3,
description: err,
});
})
}).catch(err =>{
console.error(err)
})
}
const onFinish = (value)=>{
}
return(
<SiteModal {...props} title='新增站点'
bodyStyle ={{width:"100%",minHeight:"100px"}}
style= {{top:200,borderRadius:"20px",}}
width="600px"
destroyOnClose={true}
cancelText='取消'
okText='确认选择'
onOk={()=>onSubmit()}
confirmLoading={loading}
>
<Form
form={form}
layout={formLayout}
onFinish={onFinish}
>
<Item label='站点名称' name='stationName'
rules={[
{
required: true,
message: '请输入站点名称',
},
]}
>
<Input placeholder='请输入站点名称'></Input>
</Item>
<Item label='站点类别'>all</Item>
<Item label='站点描述' name='description'>
<Input placeholder='请输入站点描述'></Input>
</Item>
</Form>
</SiteModal>
)
}
export default AddModal
src/pages/userCenter/siteManage/DelModal.jsx 0 → 100644
View file @ b65bbf94
import React, { useState} from 'react';
import {
notification
} from 'antd'
import SiteModal from '@/components/Modal/SiteModa';
import { deleteStation } from '@/services/userCenter/siteManage/api'
const DelModal = (props) =>{
const { confirmModal, stationId } =props
const [loading,setLoading] = useState(false)
const onSubmit = (props) =>{
setLoading(true)
deleteStation({
stationID: stationId,
_version: 9999,
_dc: new Date().getTime()
}).then(res =>{
setLoading(false)
if(res.success){
notification.success({
message: '通知',
duration: 3,
description: '删除成功',
});
confirmModal()
}else{
notification.error({
message: '提示',
duration: 3,
description: res.message,
});
}
}).catch(err =>{
setLoading(false)
notification.error({
message: '提示',
duration: 3,
description: err
});
})
}
return(
<SiteModal {...props} title='删除站点'
bodyStyle ={{width:"100%",minHeight:"50px",}}
style= {{top:'500px'}}
width="400px"
destroyOnClose={true}
cancelText='取消'
okText='确认删除'
onOk={()=>onSubmit()}
confirmLoading={loading}
>
是否删除该站点?
</SiteModal>
)
}
export default DelModal
src/pages/userCenter/siteManage/EditModal.jsx 0 → 100644
View file @ b65bbf94
import React, { useState, useEffect, useRef} from 'react';
import {
Form,
Input,
notification
} from 'antd'
import SiteModal from '@/components/Modal/SiteModa';
import { editStation } from '@/services/userCenter/siteManage/api';
const { Item } = Form
const EditModal = (props) =>{
const [form] = Form.useForm();
const [formLayout, setFormLayout] = useState('horizontal');
const [loading,setLoading] = useState(false)
const flag = useRef()
const { confirmModal, stationObj } =props
const onSubmit = () =>{
form.validateFields().then(res =>{
setLoading(true)
flag.current=res
editStation({
stationName:res.stationName,
description:res.description,
stationID: stationObj.stationID,
_version:9999,
_dc:new Date().getTime()
}).then(res =>{
setLoading(false)
if(res.success){
form.resetFields()
notification.success({
message: '通知',
duration: 3,
description: '编辑成功',
});
confirmModal()
}else{
notification.error({
message: '提示',
duration: 3,
description: res.message,
});
}
}).catch(err =>{
setLoading(false)
notification.error({
message: '提示',
duration: 3,
description: err,
});
})
}).catch(err =>{
console.error(err)
})
}
useEffect( () =>{
form.setFieldsValue({
stationName:stationObj.text,
description:stationObj.description
})
return ()=>{
console.log(flag.current)
form.setFieldsValue(flag.current)
}
},[stationObj])
return(
<SiteModal {...props} title='编辑站点'
bodyStyle ={{width:"100%",minHeight:"100px"}}
style= {{top:200,borderRadius:"20px",}}
width="600px"
destroyOnClose={true}
cancelText='取消'
okText='确认编辑'
onOk={()=>onSubmit()}
confirmLoading={loading}
>
<Form
form={form}
layout={formLayout}
>
<Item label='站点名称' name='stationName'
rules={[
{
required: true,
message: '请输入站点名称',
},
]}
>
<Input placeholder='请输入站点名称'></Input>
</Item>
<Item label='站点类别'>all</Item>
<Item label='站点描述' name='description'>
<Input placeholder='请输入站点描述'></Input>
</Item>
</Form>
</SiteModal>
)
}
export default EditModal
src/pages/userCenter/siteManage/SiteManage.jsx
View file @ b65bbf94
import React, { useState, useEffect} from 'react';
import { Row, Col, Tree, Card} from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { Row, Col, Tree, Card, Input, Tooltip} from 'antd';
import {
FileAddTwoTone,
EditTwoTone,
DeleteTwoTone,
} from '@ant-design/icons';
import { PageContainer, GridContent } from '@ant-design/pro-layout';
import { getOUTree} from '@/services/userCenter/siteManage/api';
import { getOUTree, getWebModuleTree} from '@/services/userCenter/siteManage/api';
import ListCard from '@/pages/orgnazation/ListCard';
import styles from '@/pages/userCenter/siteManage/SiteManage.less'
import styles from '@/pages/userCenter/siteManage/SiteManage.less';
import AddModal from './AddModal'
import DelModal from './DelModal'
import EditModal from './EditModal'
const { Search } = Input;
const placeholder = '请输入人员姓名'
const SiteManage = ()=>{
const [ treeData, setTreeData ] = useState([])
const [ searchWord, setSearchWord] = useState( '')
const [ ouid, setOuid ] = useState('')
const [saveTreeId, setSaveTreeId] = useState('')//保存点击回调的id
const [modalVisible, setModalVisible] = useState(false) //新增弹窗
const [flag, setFlag] = useState(1)
const [ stationId, setStationId] = useState('') //选择的站点
const [ stationObj, setStationObj] = useState({}) //选择的站点
const [delVisible, setDelVisible] = useState(false) //删除弹窗
const [editVisible, setEditVisible] = useState(false) //修改弹窗
const now = new Date().getTime()
//点击树的回调
const handleTreeSelect = (e) =>{
console.log(e)
let id = e[0]
setOuid(id)
if(id){
setSaveTreeId(id)
setOuid(id)
}else{
setOuid(saveTreeId)
}
}
useEffect(()=>{
getOUTree().then(res =>{
let arr = transTree(res)
setTreeData(arr)
getWebModuleTree({
userMode:"super",
select:'',
_version:9999,
_dc:now ,
node:-2
}).then(res =>{
let arr =[]
if(res){
arr.push( res.find(item =>{
return item.id==='Web4StationRoot'
}))
console.log(arr,'arr')
}
let arr2 = transTree(arr)
setTreeData(arr2)
}).catch(err =>{
console.error(err)
})
},[])
// getOUTree().then(res =>{
// let arr = transTree(res)
// setTreeData(arr)
// }).catch(err =>{
// console.error(err)
// })
},[flag])
const Title = (props) =>{
const { text } = props
return (
<div className={styles.treeTitle}>
{text}
<div className={styles.titleBox}>
<Tooltip title='新增站点'><FileAddTwoTone onClick={()=>{ handleAdd(props)}} /></Tooltip>
<Tooltip title='编辑站点'><EditTwoTone onClick={()=>{ handleEdit(props)}} /></Tooltip>
<Tooltip title='删除站点'><DeleteTwoTone onClick={()=>{ handleDel(props)}}/></Tooltip>
</div>
</div>
)
}
const handleAdd = (e) =>{
console.log(e)
setModalVisible(true)
}
//站点删除
const handleDel = (e) =>{
setStationId(e.stationID)
setDelVisible(true)
}
//编辑站点
const handleEdit =(e) =>{
setStationObj(e)
setEditVisible(true)
}
//树形数据转换
const transTree = (val) =>{
let arr = val
return arr.map( item =>{
item.title = item.text
item.title = Title(item) || item.text
item.key = item.id
// item.icon = (<img src={user_green} style={{marginBottom:'2px'}}/>)
let obj = {}
if(Array.isArray(item.children) && item.children.length > 0){
transTree(item.children)
......@@ -35,6 +107,22 @@ const SiteManage = ()=>{
}
})
}
//获取搜索框的值
const handleSearch = (value) =>{
setSearchWord(value)
}
const confirmModal = (e) =>{
setModalVisible(false)
setFlag(flag+1)
}
const delModal = ()=>{
setDelVisible(false)
setFlag(flag+1)
}
const editModal = () =>{
setEditVisible(false)
setFlag(flag+1)
}
return (
<PageContainer>
<GridContent>
......@@ -42,21 +130,47 @@ const SiteManage = ()=>{
<Col lg={6} md={24}>
<Card className={ styles.cardBox}>
<Tree
showLine
showIcon={<DownOutlined />}
showLine={{showLeafIcon:false}}
showIcon
onSelect={(e)=> handleTreeSelect(e)}
treeData={treeData}
/>
/>
<AddModal
visible = {modalVisible}
onCancel={() => setModalVisible(false)}
confirmModal={confirmModal}
/>
<DelModal
visible={delVisible}
stationId={stationId}
onCancel={() => setDelVisible(false)}
confirmModal = { delModal}/>
<EditModal
visible={editVisible}
stationObj={stationObj}
onCancel={() => setEditVisible(false)}
confirmModal = { editModal}
/>
</Card>
</Col>
<Col lg={18} md={24}>
<Card className={ styles.cardBox}>
<ListCard ouid={ouid}></ListCard>
<Row align='middle'>
<Col span={1}>搜索</Col>
<Col span={ 8}>
<Search
allowClear
placeholder = {placeholder}
onSearch = { handleSearch}
enterButton
/>
</Col>
</Row>
{ ouid && <ListCard ouid={ouid} searchWord = { searchWord }></ListCard>}
</Card>
</Col>
</Row>
</GridContent>
</PageContainer>
)
}
......
src/pages/userCenter/siteManage/SiteManage.less
View file @ b65bbf94
.cardBox{
min-height: calc(100vh - 200px);
}
.ant-tree-node-content-wrapper-open{
display: flex;
align-items: center;
}
.treeTitle {
display: flex;
span {
display: none;
}
}
.treeTitle:hover {
span {
margin-left: 20px;
display: block;
}
}
.titleBox{
display: flex;
justify-content: space-around;
align-items: center;
}
.test{
border-radius: 200px;
}
\ No newline at end of file
src/services/userCenter/siteManage/api.js
View file @ b65bbf94
......@@ -9,3 +9,16 @@ export const getOUTree = params =>
'/Cityinterface/rest/services/OMS.svc/U_GetOUTree?_version=9999&node=-1',
params,
);
// 获取站点信息
export const getWebModuleTree = params =>
get('/Cityinterface/rest/services/OMS.svc/W4_GetWeb4ModuleTree', params);
// 新增站点
export const addStation = params =>
get('/Cityinterface/rest/services/OMS.svc/W4_AddStation', params);
// 删除站点
export const deleteStation = params =>
get('/Cityinterface/rest/services/OMS.svc/P_DeleteStation', params);
// 编辑站点
export const editStation = params =>
get('/Cityinterface/rest/services/OMS.svc/P_EditStation', params);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment