Skip to content

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

perf: a perf

parent ea962fac
Show whitespace changes
Inline Side-by-side
Showing with 1231 additions and 696 deletions
src/components/Modal/SiteModa.jsx
View file @ dd04561a
import React from 'react'
import {
Modal
} from 'antd'
import React from 'react';
import { Modal } from 'antd';
const SiteModal = (props) =>{
console.log(props)
const SiteModal = props => {
const defaultCofig = {
title:'测试',
visible:false,
}
const config = { ...defaultCofig, ...props}
title: '提示',
visible: false,
};
const config = { ...defaultCofig, ...props };
return (
<Modal
style={{width:"1000px"}}
{...config}
>
<Modal style={{ width: '1000px' }} {...config}>
{props.children}
</Modal>
)
}
);
};
export default SiteModal
\ No newline at end of file
export default SiteModal;
src/pages/database/InitDataBase.jsx
View file @ dd04561a
......@@ -15,7 +15,7 @@ import {
import { PageContainer } from '@ant-design/pro-layout';
import { connect } from 'react-redux';
import { get, post } from '../../services';
import { setTableSQLDirName, deleteConn } from '@/services/database/api'
import { setTableSQLDirName, deleteConn } from '@/services/database/api';
import styles from './InitDataBase.less';
const { Option } = Select;
......@@ -39,8 +39,8 @@ const InitDataBase = props => {
const [upData, setUpData] = useState(1); // 列表刷新标记
const [option, setOption] = useState([]); // 下拉列表数据
const [desc, setDesc] = useState(''); // 修改描述
const [allSqlDir, setAllSqulDir] = useState([]) //修改产品方案
const [defaultSqlDir, setDefaultSqlDir] = useState('') //修改产品方案默认值
const [allSqlDir, setAllSqulDir] = useState([]); // 修改产品方案
const [defaultSqlDir, setDefaultSqlDir] = useState(''); // 修改产品方案默认值
const [modalVisible, setModalVisible] = useState(false);
console.log(window.location.host);
// 获取数据库链接记录
......@@ -80,8 +80,8 @@ const InitDataBase = props => {
});
form.setFieldsValue(obj);
setDbForm(val => ({ ...val, ...obj }));
setAllSqulDir(res.allSqlDir)
setDefaultSqlDir(res.tableSQLDirName)
setAllSqulDir(res.allSqlDir);
setDefaultSqlDir(res.tableSQLDirName);
}
})
.catch(err => {
......@@ -201,7 +201,7 @@ const InitDataBase = props => {
};
// 点击表格回显到表单
const tableClick = item => {
console.log(item)
console.log(item);
let obj = { ...dbForm };
Object.keys(obj).forEach(k => {
obj[k] = item[k];
......@@ -209,29 +209,31 @@ const InitDataBase = props => {
form.setFieldsValue(obj);
};
// 产品方案选择框回调
const handleSelect = (value) =>{
const handleSelect = value => {
setTableSQLDirName({
dirName:value,
_version:9999,
_dc:new Date().getTime()
}).then(res =>{
if(res.success){
dirName: value,
_version: 9999,
_dc: new Date().getTime(),
})
.then(res => {
if (res.success) {
notification.success({
message: '提示',
duration: 3,
description: `已切换初始化脚本为:${value}`,
});
}else{
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message,
});
}
}).catch(err =>{
console.error(err)
})
}
.catch(err => {
console.error(err);
});
};
// 展示修改描述
const changeDesc = () => {
setModalVisible(true);
......@@ -265,34 +267,37 @@ const InitDataBase = props => {
setModalVisible(false);
});
};
//删除数据库连接记录
const delConn = (value)=>{
setTableLoading(true)
const { key='' } =value
// 删除数据库连接记录
const delConn = value => {
setTableLoading(true);
const { key = '' } = value;
deleteConn({
rowIndex:key,
_version:9999,
_dc:new Date().getTime()
}).then(res =>{
setTableLoading(false)
if(res.success){
rowIndex: key,
_version: 9999,
_dc: new Date().getTime(),
})
.then(res => {
setTableLoading(false);
if (res.success) {
setUpData(upData + 1);
notification.success({
message:'提示',
duration:3,
description:'操作成功'
})
}else{
message: '提示',
duration: 3,
description: '操作成功',
});
} else {
notification.error({
message:'提示',
duration:3,
description:res.message
})
}
}).catch(err => {
setTableLoading(false)
console.error(err)})
message: '提示',
duration: 3,
description: res.message,
});
}
})
.catch(err => {
setTableLoading(false);
console.error(err);
});
};
const columns = [
{
title: '服务器名或IP地址',
......@@ -320,10 +325,11 @@ const InitDataBase = props => {
key: 'desc',
},
{
title: '修改描述',
dataIndex: 'name',
key: 'name',
render: () => (
title: '操作',
dataIndex: 'action',
key: 'action',
render: (text, record) => (
<Space>
<Button
type="primary"
size="small"
......@@ -333,18 +339,10 @@ const InitDataBase = props => {
>
修改描述
</Button>
),
},
{
title: '删除',
dataIndex: 'del',
key: 'del',
render: (text,record) => (
<Button size="small" danger
onClick={() => delConn(record)}
>
<Button size="small" danger onClick={() => delConn(record)}>
删除
</Button>
</Space>
),
},
];
......@@ -418,19 +416,27 @@ const InitDataBase = props => {
>
数据库初始化
</Button>
{defaultSqlDir && <Select
placeholder='请选择解决方案'
style={
{width:'200px'}
}
{defaultSqlDir && (
<Select
placeholder="请选择解决方案"
style={{ width: '200px' }}
defaultValue={defaultSqlDir}
onChange = { (e)=>{ handleSelect(e)}}
onChange={e => {
handleSelect(e);
}}
>
{allSqlDir && allSqlDir.map( (item, index) => {
console.log(defaultSqlDir)
return <Option value={item} key={index}> {item} </Option>
}) }
</Select>}
{allSqlDir &&
allSqlDir.map((item, index) => {
console.log(defaultSqlDir);
return (
<Option value={item} key={index}>
{' '}
{item}{' '}
</Option>
);
})}
</Select>
)}
{/* <span>{dbForm.inUse}</span> */}
</Space>
</div>
......@@ -464,10 +470,9 @@ const InitDataBase = props => {
bodyStyle={{
minHeight: '100px',
}}
cancelText="取消"
okText="确认修改"
destroyOnClose={true}
destroyOnClose
>
<Row>
<Col span={2} className={styles.decsBox}>
......
src/pages/database/ManagementDataBase.jsx
View file @ dd04561a
......@@ -2,13 +2,13 @@ import React, { useEffect, useState } from 'react';
import { Card, Button, Table, Space, Modal } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { get } from '../../services';
import styles from './ManagementDataBase.less'
import styles from './ManagementDataBase.less';
const ManagementDataBase = () => {
const [autoCheckList, setAutoCheckList] = useState([]);
const [checkList, setCheckList] = useState([]);
const [logList, setLogList] = useState([]);
const [checkFlag, setCheckFlag] = useState(1)
const [checkFlag, setCheckFlag] = useState(1);
const [checkLoading, setCheckLoading] = useState(false);
const [logLoading, setLogLoading] = useState(false);
const [modalVisible, setModalVisible] = useState(false); // 弹窗
......@@ -45,7 +45,7 @@ const ManagementDataBase = () => {
console.error(err);
});
}, [checkFlag]);
//获取数据库升级记录
// 获取数据库升级记录
useEffect(() => {
setLogLoading(true);
get(`/Cityinterface/rest/services/OMS.svc/DatabaseStandard_GetLog`, {
......@@ -70,18 +70,15 @@ const ManagementDataBase = () => {
});
}, []);
const handleCheck = () => {
setCheckFlag(checkFlag+1)
setCheckFlag(checkFlag + 1);
};
const handleUpdate = () => {
alert('updatedb')
alert('updatedb');
console.log('updatedb');
};
const handleLog = text => {
let arr = []
arr.push(
text.split(/[(\r\n)\r\n]+/).map(item =>{
return (<p>${item}</p>)
}))
let arr = [];
arr.push(text.split(/[(\r\n)\r\n]+/).map(item => <p>${item}</p>));
setModalVisible(true);
setContent(text);
};
......@@ -141,38 +138,33 @@ const ManagementDataBase = () => {
title: '版本日志',
dataIndex: 'despersion',
key: 'despersion',
render: text => {
return (
render: text => (
<Button
size='small'
size="small"
onClick={() => {
handleLog(text);
}}
>
日志
</Button>
);
},
),
},
{
title: '升级内容',
dataIndex: 'content',
key: 'content',
ellipsis: true,
render: text => {
return (
render: text => (
<Button
size='small'
type='primary'
size="small"
type="primary"
onClick={() => {
handleLog(text);
}}
>
升级内容
</Button>
);
},
),
},
];
......@@ -187,12 +179,20 @@ const ManagementDataBase = () => {
dataSource={autoCheckList}
bordered
loading={checkLoading}
size='small'
size="small"
/>
<div className={ styles.tCenter}>
<div className={styles.tCenter}>
<Space>
<Button type='primary' onClick={handleCheck} loading={checkLoading}>检查</Button>
<Button danger type='primary' onClick={handleUpdate}>升级</Button>
<Button
type="primary"
onClick={handleCheck}
loading={checkLoading}
>
检查
</Button>
<Button danger type="primary" onClick={handleUpdate}>
升级
</Button>
</Space>
</div>
</Card>
......@@ -207,7 +207,7 @@ const ManagementDataBase = () => {
dataSource={checkList}
bordered
loading={checkLoading}
size='small'
size="small"
/>
</Card>
<Card className={styles.mgTop20}>
......@@ -218,7 +218,7 @@ const ManagementDataBase = () => {
dataSource={logList}
bordered
loading={logLoading}
size='small'
size="small"
/>
</Card>
</PageContainer>
......@@ -232,13 +232,15 @@ const ManagementDataBase = () => {
onCancel={() => setModalVisible(false)}
width="1000px"
bodyStyle={{
minHeight:'100px',
maxHeight:'600px',
overflowY:'scroll'
minHeight: '100px',
maxHeight: '600px',
overflowY: 'scroll',
}}
style={{top:"40px"}}
style={{ top: '40px' }}
footer={[
<Button type='primary' onClick={() => setModalVisible(false)}>关闭窗口</Button>,
<Button type="primary" onClick={() => setModalVisible(false)}>
关闭窗口
</Button>,
]}
>
{content}
......
src/pages/orgnazation/DefaultComponent.jsx
View file @ dd04561a
import React,{ useState, useEffect, } from 'react'
import {
Card,
TreeSelect,
Space,
Button,
Table,
Input,
Row,
Col
} from 'antd';
import React, { useState, useEffect } from 'react';
import { Card, TreeSelect, Space, Button, Table, Input, Row, Col } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { connect } from 'react-redux';
import TestModal from './ModalComponent';
import ListCard from './ListCard';
import { get, post } from '../../services';
import { orgGet,orgTest } from '../../services/orgnazation/api'
import styles from './DefaultComponent.less'
const { Search } = Input
import { orgGet, orgTest } from '../../services/orgnazation/api';
import styles from './DefaultComponent.less';
const { Search } = Input;
const { TreeNode } = TreeSelect;
// const treeData = [
// {
......@@ -39,204 +30,199 @@ const { TreeNode } = TreeSelect;
// },
// ];
const DefaultComponent = ()=> {
const [treeValue, setTreeValue] = useState(null)//树节点选中的值
const [tableData, setTableData] = useState([]) //table的值
const [selectedRowKeys, setSelectedRowKeys] = useState([]) //table表格checkbox配置
const [modalVisible, setModalVisible] = useState(false) //展示Modal弹窗
const [testPeoList, setTestPeoList] = useState([]) //测试card数组
const [treeData, setTreeData] = useState([])
//树节点选中的值
const treeChange = (e) =>{
setTreeValue(e)
}
//用户搜索
const handleSearch = ()=>{
console.log('handleSearch')
setModalVisible(true)
}
//导入
const handleImport = () =>{
setModalVisible(true)
}
//搜索框时间
const inputSearch = (e) =>{
console.log(e,'inputSearch')
}
const DefaultComponent = () => {
const [treeValue, setTreeValue] = useState(null); // 树节点选中的值
const [tableData, setTableData] = useState([]); // table的值
const [selectedRowKeys, setSelectedRowKeys] = useState([]); // table表格checkbox配置
const [modalVisible, setModalVisible] = useState(false); // 展示Modal弹窗
const [testPeoList, setTestPeoList] = useState([]); // 测试card数组
const [treeData, setTreeData] = useState([]);
// 树节点选中的值
const treeChange = e => {
setTreeValue(e);
};
// 用户搜索
const handleSearch = () => {
console.log('handleSearch');
setModalVisible(true);
};
// 导入
const handleImport = () => {
setModalVisible(true);
};
// 搜索框时间
const inputSearch = e => {
console.log(e, 'inputSearch');
};
const columns = [
{
title:'用户ID',
dataIndex:"userID",
key:'userID'
title: '用户ID',
dataIndex: 'userID',
key: 'userID',
},
{
title:'登录名',
dataIndex:'loginName',
key:'loginName'
title: '登录名',
dataIndex: 'loginName',
key: 'loginName',
},
{
title:'用户姓名',
dataIndex:'userName',
key:'userName',
title: '用户姓名',
dataIndex: 'userName',
key: 'userName',
},
{
title:'手机号码',
dataIndex:'phone',
key:'phone'
title: '手机号码',
dataIndex: 'phone',
key: 'phone',
},
{
title:'钉钉账户',
dataIndex:'ddid',
key:'ddid',
title: '钉钉账户',
dataIndex: 'ddid',
key: 'ddid',
},
{
title:'微信账户',
dataIndex:'wxid',
key:'wxid',
title: '微信账户',
dataIndex: 'wxid',
key: 'wxid',
ellipsis: true,
}
]
useEffect( ()=>{
orgGet().then(res =>{
console.log(res,'orgGet')
if(res){
let arr = transTree(res)
console.log(transTree(res),'arr')
setTreeData(arr)
}
})
},[])
//处理返回的树形结构
const transTree = (value,isChild=false) =>{
let arr = value
if(arr.length< 0){
return
}
let obj = {}
return arr.map( item =>{
// item.title = item.text
// item.value = item.id
// if( item.children && item.children.length > 0){
// transTree(item.children)
// return obj=item
// }else{
// return item
// }
if(isChild){
item.title = item.userName
item.value = item.userID
}else{
item.title = item.text
item.value = item.id
},
];
useEffect(() => {
orgGet().then(res => {
console.log(res, 'orgGet');
if (res) {
let arr = transTree(res);
console.log(transTree(res), 'arr');
setTreeData(arr);
}
});
}, []);
// 处理返回的树形结构
const transTree = (value, isChild = false) => {
let arr = value;
if (arr.length < 0) {
return;
}
let obj = {};
return arr.map(item => {
if (isChild) {
item.title = item.userName;
item.value = item.userID;
} else {
item.title = item.text;
item.value = item.id;
}
if( item.children && item.children.length > 0){
transTree(item.children,false)
return obj=item
}else{
return item
}
})
}
useEffect( () =>{
get('/Cityinterface/rest/services/OMS.svc/U_GetOneOUUserListNew',{
OUID:24,
_version:9999,
_dc:new Date().getTime()
}).then(res =>{
if(res.success){
setTableData(res.root)
}
})
const testData =[]
const test2list = []
for( let i=1; i<10 ; i++){
if (item.children && item.children.length > 0) {
transTree(item.children, false);
return (obj = item);
}
return item;
});
};
useEffect(() => {
get('/Cityinterface/rest/services/OMS.svc/U_GetOneOUUserListNew', {
OUID: 24,
_version: 9999,
_dc: new Date().getTime(),
}).then(res => {
if (res.success) {
setTableData(res.root);
}
});
const testData = [];
const test2list = [];
for (let i = 1; i < 10; i++) {
testData.push({
key:i,
ID:i
})
key: i,
ID: i,
});
test2list.push({
label:i+"测试",
value:i+"测试",
})
label: `${i}测试`,
value: `${i}测试`,
});
}
console.log(test2list)
console.log(test2list);
setTestPeoList(test2list)
},[])
//table选中框的值
const selectChange = (e) =>{
console.log(e,'e')
setSelectedRowKeys(e)
}
const confirmModal = () =>{
setModalVisible(false)
}
//table复选的配置
const rowSelection ={
setTestPeoList(test2list);
}, []);
// table选中框的值
const selectChange = e => {
console.log(e, 'e');
setSelectedRowKeys(e);
};
const confirmModal = () => {
setModalVisible(false);
};
// table复选的配置
const rowSelection = {
selectedRowKeys,
onChange:selectChange,
}
onChange: selectChange,
};
const btnLable = [
{label:'查找用户',handle:handleSearch ,config:{ type:'primary',danger:true} },
{label:'用户导入',handle:handleImport,config:{ type:'info',}},
]
{
label: '查找用户',
handle: handleSearch,
config: { type: 'primary', danger: true },
},
{ label: '用户导入', handle: handleImport, config: { type: 'info' } },
];
return (
<>
<PageContainer>
<Card>
<Row>
<Col span ={1}>
<div style={{height:"30px",lineHeight:"30px"}}>
机构选择
</div>
<Col span={1}>
<div style={{ height: '30px', lineHeight: '30px' }}>机构选择</div>
</Col>
<Col span={12}>
<TreeSelect
style={{"width":"50%"}}
style={{ width: '50%' }}
treeData={treeData}
value={treeValue}
onChange={ (e) => { treeChange(e)}}
onChange={e => {
treeChange(e);
}}
/>
</Col>
<Col span={ 8}>
{/* <Search
placeholder="请输入"
onSearch={(e) =>{inputSearch(e)}}
style={{ width: "50%" }}
enterButton
/> */}
</Col>
<Col span={8} />
</Row>
<div style={{marginTop:'20px',textAlign:'center'}}>
<div style={{ marginTop: '20px', textAlign: 'center' }}>
<Space>
{
btnLable && btnLable.map( (item,index) => {
const { config} =item
{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>
)
})
}
<Button
key={index}
{...config}
onClick={() => {
item.handle &&
typeof item.handle === 'function' &&
item.handle();
}}
>
{item.label}
</Button>
);
})}
</Space>
</div>
<TestModal
title='用户选择'
visible = {modalVisible}
title="用户选择"
visible={modalVisible}
maskClosable
onOk={() => confirmModal()}
onCancel={() => setModalVisible(false)}
bodyStyle ={{width:"100%",height:"100%",}}
style= {{top:20}}
bodyStyle={{ width: '100%', height: '100%' }}
style={{ top: 20 }}
width="1000px"
destroyOnClose={true}
cancelText='取消'
okText='确认选择'
destroyOnClose
cancelText="取消"
okText="确认选择"
>
<ListCard optionsList ={testPeoList}></ListCard>
<ListCard optionsList={testPeoList} />
</TestModal>
</Card>
<Card className={styles.mgTop20}>
......@@ -245,15 +231,15 @@ const DefaultComponent = ()=> {
className={styles.mgTop20}
rowSelection={rowSelection}
columns={columns}
dataSource ={tableData}
dataSource={tableData}
bordered
rowKey='userID'
scroll={{y:400}}
></Table>
rowKey="userID"
scroll={{ y: 400 }}
/>
</Card>
</PageContainer>
</>
)
}
);
};
export default connect()(DefaultComponent)
\ No newline at end of file
export default connect()(DefaultComponent);
src/pages/orgnazation/ListCard.jsx
View file @ dd04561a
import React, { useState, useEffect, useCallback} from 'react';
import { Spin } from 'antd';
import React, { useState, useEffect, useCallback } from 'react';
import { Spin, Button } 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, 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)
setValueList(valueList[index]=value)
console.log(valueList,'valueList')
},[])
useEffect(()=>{
setLoading(true)
const defaultConfig ={
optionsList:[],
title:'默认组',
id:'',
}
get("/Cityinterface/rest/services/OMS.svc/U_GetUserListForBatchOper",{
OUID:ouid||'',
_version:9999,
_dc:new Date().getTime()
}).then(res =>{
setLoading(false)
const list = []
res && res.map(item =>{
list.push({...defaultConfig,...item})
const tip = 'loading...';
const ListCard = props => {
const { ouid, searchWord, valueCallback } = props;
const [valueList, setValueList] = useState([]);
const [dataList, setdataList] = useState([]);
const [loading, setLoading] = useState(true);
const { optionsList } = props;
const getValueCallback = useCallback((value, index) => {
console.log(value, index);
setValueList((valueList[index] = value));
console.log(valueList, 'valueList');
}, []);
useEffect(() => {
setLoading(true);
const defaultConfig = {
optionsList: [],
title: '默认组',
id: '',
};
// /Cityinterface/rest/services/OMS.svc/U_GetUserListForBatchOper
get('/Cityinterface/rest/services/OMS.svc/P_GetUserByStation', {
// OUID:ouid||'',
stationID: ouid || '',
_version: 9999,
_dc: new Date().getTime(),
})
setTestList(list)
}).catch(err =>{
console.error(err)
setLoading(false)
.then(res => {
setLoading(false);
const list = [];
res &&
res.map(item => {
list.push({ ...defaultConfig, ...item });
});
setdataList(list);
})
//多级嵌套测试
orgTest().then(res =>{
console.log(res,'res')
})
},[ouid])
.catch(err => {
console.error(err);
setLoading(false);
});
// 多级嵌套测试
// orgTest().then(res =>{
// console.log(res,'res')
// })
}, [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} searchWord ={ searchWord} {...props}></ListCardItem>)
})
}
</>
)
}
<div>
{loading ? (
<Spin
size="large"
spinning={loading}
tip={tip}
style={{
position: 'absolute',
top: '30%',
left: '0',
right: '0',
bottom: '0',
}}
/>
) : (
dataList &&
dataList.length > 0 &&
dataList.map((item, index) => (
<ListCardItem
{...item}
itemid={index}
key={`item${index}key`}
getValueCallback={getValueCallback}
searchWord={searchWord}
{...props}
/>
))
)}
{false && !loading && dataList && (
<Button
type="primary"
onClick={() => valueCallback(valueList)}
style={{ marginTop: '20px' }}
>
提交
</Button>
)}
</div>
);
};
export default ListCard
\ No newline at end of file
export default ListCard;
src/pages/orgnazation/ListCardItem.less
View file @ dd04561a
:global{
.spans span{
background-color: red !important;
}
}
.divBox {
display: flex;
flex-wrap: wrap;
border: 1px solid #b5b8c8;
margin-top: 20px;
min-height: 40px;
min-height: 50px;
.topCheckbox{
height: 20px;
background-color: #fff;
......@@ -20,17 +15,12 @@
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;
}
}
// margin: 10px 0 ;
// flex: 1;
}
}
}
.isSearch{
color: red;
background-color: yellow;
}
\ No newline at end of file
src/pages/orgnazation/listCardItem.jsx
View file @ dd04561a
import React,{ useState ,useEffect} from 'react'
import {
Checkbox,
Row,
Col
} from 'antd';
import styles from './ListCardItem.less'
import React, { useState, useEffect, useRef, useLayoutEffect } from 'react';
import { Checkbox, Row, Col } from 'antd';
import styles from './ListCardItem.less';
const CheckGroup = Checkbox.Group;
const ListCardItem = (props) =>{
console.log(props.searchWord)
const [ indeterminate, setIndeterminate ] = useState(false)
const [ allChecked, setAllChecked ] = useState(false) //全选状态
const [ checkList, setCheckList] = useState([]) //复选框列表
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
}) || []
const handleAllChecked = (e) =>{
const { checked } = e.target
setAllChecked(checked)
let arr = []
if(checked){
arr = defaultList.map(item =>{
item.isChecked=checked
return item
})
}else{
arr = []
const ListCardItem = props => {
const { getValueCallback, itemid, userList, OUName, searchWord } = props;
const [indeterminate, setIndeterminate] = useState(false);
const [allChecked, setAllChecked] = useState(false); // 全选状态
const [checkList, setCheckList] = useState([]); // 复选框列表选中的值
const [defaultList, setDefaultList] = useState([]); // 默认的选项
useEffect(() => {
console.log(userList, '执行了`````');
let arr = [];
userList.map((item, index) => {
let obj = { ...item };
obj.label = (
<span
className={
searchWord && obj.userName.includes(searchWord)
? styles.isSearch
: ''
}
setCheckList(arr)
setIndeterminate(false)
getValueCallback(arr,itemid)
>
{obj.userName}
</span>
);
obj.value = obj.userID;
arr.push(obj);
});
setDefaultList(arr);
}, [searchWord]);
useEffect(() => {
console.log(userList, '执行了`````');
let arr2 = [];
userList.map((item, index) => {
if (item.isChecked) {
arr2.push(item.userID);
}
const handleChecked = (e) =>{
setCheckList(e) ;
setAllChecked(e.length === defaultList.length)
setIndeterminate(!!e.length && e.length <defaultList.length)
getValueCallback(e,itemid)
});
setCheckList(arr2);
}, [userList]);
const handleAllChecked = e => {
const { checked } = e.target;
setAllChecked(checked);
let arr = [];
if (checked) {
arr = defaultList.map(item => item.value);
} else {
arr = [];
}
setCheckList(arr);
setIndeterminate(false);
getValueCallback(arr, itemid);
};
const handleChecked = e => {
console.log(e, 'e45');
setCheckList(e);
setAllChecked(e.length === defaultList.length);
setIndeterminate(!!e.length && e.length < defaultList.length);
getValueCallback(e, itemid);
};
return (
<>
<div className ={`${styles.divBox}`}>
<div className={ styles.topCheckbox}>
<div className={`${styles.divBox}`}>
<div className={styles.topCheckbox}>
<Checkbox
indeterminate = { indeterminate}
checked={ allChecked}
onChange= { (e) =>{ handleAllChecked(e)}}
>{OUName}</Checkbox>
indeterminate={indeterminate}
checked={allChecked}
onChange={e => {
handleAllChecked(e);
}}
>
{OUName}
</Checkbox>
</div>
<div style={{width:"100%"}} className = {styles.checkdiv}>
{/* {defaultList && defaultList.length>0 && <CheckGroup className = {`${styles.check} ${styles.span}`} onChange = {(e) => { handleChecked(e)}} value={checkList} options = {defaultList} /> } */}
<CheckGroup onChange = {(e) => { handleChecked(e)}}>
<div style={{ width: '100%' }} className={styles.checkdiv}>
{defaultList && defaultList.length > 0 && (
<CheckGroup
className={styles.check}
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>
return item.label.includes(searchWord) &&
<Checkbox key={index} value={item.value} >{item.label}{item.userID}{String(item.isChecked)}</Checkbox>
})
}
</CheckGroup>
</CheckGroup>} */}
</div>
</div>
</>
)
}
);
};
export default ListCardItem
\ No newline at end of file
export default ListCardItem;
src/pages/userCenter/RoleManage/AddModal.jsx 0 → 100644
View file @ dd04561a
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
cancelText="取消"
okText="确认选择"
onOk={() => onSubmit()}
confirmLoading={loading}
>
<Form form={form} layout={formLayout} onFinish={onFinish}>
<Item
label="角色名称"
name="stationName"
rules={[
{
required: true,
message: '请输入角色名称',
},
]}
>
<Input placeholder="请输入角色名称" />
</Item>
<Item label="角色类别">all</Item>
<Item label="角色描述" name="description">
<Input placeholder="请输入角色描述" />
</Item>
</Form>
</SiteModal>
);
};
export default AddModal;
src/pages/userCenter/RoleManage/DelModal.jsx 0 → 100644
View file @ dd04561a
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: 200 }}
width="400px"
destroyOnClose
cancelText="取消"
okText="确认删除"
onOk={() => onSubmit()}
confirmLoading={loading}
>
是否删除该角色?
</SiteModal>
);
};
export default DelModal;
src/pages/userCenter/RoleManage/EditModal.jsx 0 → 100644
View file @ dd04561a
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,
});
}, [stationObj]);
return (
<SiteModal
{...props}
title="编辑角色"
bodyStyle={{ width: '100%', minHeight: '100px' }}
style={{ top: 200, borderRadius: '20px' }}
width="600px"
destroyOnClose
cancelText="取消"
okText="确认编辑"
onOk={() => onSubmit()}
confirmLoading={loading}
>
<Form form={form} layout={formLayout}>
<Item
label="角色名称"
name="stationName"
rules={[
{
required: true,
message: '请输入角色名称',
},
]}
>
<Input placeholder="请输入角色名称" />
</Item>
<Item label="角色类别">all</Item>
<Item label="角色描述" name="description">
<Input placeholder="请输入角色描述" />
</Item>
</Form>
</SiteModal>
);
};
export default EditModal;
src/pages/userCenter/RoleManage/RoleManage.jsx 0 → 100644
View file @ dd04561a
import React, { useState, useEffect } from 'react';
import { Row, Col, Tree, Card, Input, Tooltip, Button } from 'antd';
import { FileAddTwoTone, EditTwoTone, DeleteTwoTone } from '@ant-design/icons';
import { PageContainer, GridContent } from '@ant-design/pro-layout';
import { getWebModuleTree } from '@/services/userCenter/RoleManage/api';
import ListCard from '@/pages/orgnazation/ListCard';
import styles from '@/pages/userCenter/RoleManage/RoleManage.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(''); // 保存点击回调的ird
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];
if (id) {
setSaveTreeId(id);
setOuid(id);
} else {
setOuid(saveTreeId);
}
};
useEffect(() => {
getWebModuleTree({
userMode: 'super',
select: '',
_version: 9999,
_dc: now,
node: -2,
})
.then(res => {
let arr = [];
if (res) {
arr.push(res.find(item => item.id === 'Web4StationRoot'));
console.log(arr, 'arr');
}
let arr2 = transTree(arr);
setTreeData(arr2);
})
.catch(err => {
console.error(err);
});
}, [flag]);
const Title = props => {
const { text } = props;
console.log(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 => {
console.log(val);
let arr = val;
return arr.map((item, index) => {
item.title = Title(item) || item.text;
item.key = item.stationID || '';
let obj = {};
if (Array.isArray(item.children) && item.children.length > 0) {
transTree(item.children);
obj = item;
return obj;
}
return item;
});
};
// 获取搜索框的值
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);
};
const valueCallback = props => {
console.log(props);
};
return (
<PageContainer>
<GridContent>
<Row gutter={12}>
<Col lg={6} md={24}>
<Card className={styles.cardBox}>
<Tree
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}>
<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}
valueCallback={valueCallback}
/>
)}
</Card>
</Col>
</Row>
</GridContent>
</PageContainer>
);
};
export default SiteManage;
src/pages/userCenter/RoleManage/RoleManage.less 0 → 100644
View file @ dd04561a
.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;
// flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
\ No newline at end of file
src/pages/userCenter/siteManage/AddModal.jsx
View file @ dd04561a
import React, { useState} from 'react';
import {
Form,
Input,
notification
} from 'antd'
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 { 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)
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()
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{
confirmModal();
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message,
});
}
}).catch(err =>{
setLoading(false)
})
.catch(err => {
setLoading(false);
notification.error({
message: '提示',
duration: 3,
description: err,
});
});
})
}).catch(err =>{
console.error(err)
})
}
.catch(err => {
console.error(err);
});
};
const onFinish = (value)=>{
}
return(
<SiteModal {...props} title='新增站点'
bodyStyle ={{width:"100%",minHeight:"100px"}}
style= {{top:200,borderRadius:"20px",}}
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()}
destroyOnClose
cancelText="取消"
okText="确认选择"
onOk={() => onSubmit()}
confirmLoading={loading}
>
<Form
form={form}
layout={formLayout}
onFinish={onFinish}
>
<Item label='站点名称' name='stationName'
<Form form={form} layout={formLayout} onFinish={onFinish}>
<Item
label="站点名称"
name="stationName"
rules={[
{
required: true,
......@@ -77,15 +77,15 @@ const AddModal = (props) =>{
},
]}
>
<Input placeholder='请输入站点名称'></Input>
<Input placeholder="请输入站点名称" />
</Item>
<Item label='站点类别'>all</Item>
<Item label='站点描述' name='description'>
<Input placeholder='请输入站点描述'></Input>
<Item label="站点类别">all</Item>
<Item label="站点描述" name="description">
<Input placeholder="请输入站点描述" />
</Item>
</Form>
</SiteModal>
)
}
);
};
export default AddModal
export default AddModal;
src/pages/userCenter/siteManage/DelModal.jsx
View file @ dd04561a
import React, { useState} from 'react';
import {
notification
} from 'antd'
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)
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){
_dc: new Date().getTime(),
})
.then(res => {
setLoading(false);
if (res.success) {
notification.success({
message: '通知',
duration: 3,
description: '删除成功',
});
confirmModal()
}else{
confirmModal();
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message,
});
}
}).catch(err =>{
setLoading(false)
})
.catch(err => {
setLoading(false);
notification.error({
message: '提示',
duration: 3,
description: err
description: err,
});
})
}
return(
<SiteModal {...props} title='删除站点'
bodyStyle ={{width:"100%",minHeight:"50px",}}
style= {{top:200}}
});
};
return (
<SiteModal
{...props}
title="删除站点"
bodyStyle={{ width: '100%', minHeight: '50px' }}
style={{ top: 200 }}
width="400px"
destroyOnClose={true}
cancelText='取消'
okText='确认删除'
onOk={()=>onSubmit()}
destroyOnClose
cancelText="取消"
okText="确认删除"
onOk={() => onSubmit()}
confirmLoading={loading}
>
是否删除该站点?
</SiteModal>
)
}
);
};
export default DelModal
export default DelModal;
src/pages/userCenter/siteManage/EditModal.jsx
View file @ dd04561a
import React, { useState, useEffect, useRef} from 'react';
import {
Form,
Input,
notification
} from 'antd'
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 { 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
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,
stationName: res.stationName,
description: res.description,
stationID: stationObj.stationID,
_version:9999,
_dc:new Date().getTime()
}).then(res =>{
setLoading(false)
if(res.success){
form.resetFields()
_version: 9999,
_dc: new Date().getTime(),
})
.then(res => {
setLoading(false);
if (res.success) {
form.resetFields();
notification.success({
message: '通知',
duration: 3,
description: '编辑成功',
});
confirmModal()
}else{
confirmModal();
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message,
});
}
}).catch(err =>{
setLoading(false)
})
.catch(err => {
setLoading(false);
notification.error({
message: '提示',
duration: 3,
description: err,
});
});
})
}).catch(err =>{
console.error(err)
})
}
useEffect( () =>{
.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",}}
stationName: stationObj.text,
description: stationObj.description,
});
}, [stationObj]);
return (
<SiteModal
{...props}
title="编辑站点"
bodyStyle={{ width: '100%', minHeight: '100px' }}
style={{ top: 200, borderRadius: '20px' }}
width="600px"
destroyOnClose={true}
cancelText='取消'
okText='确认编辑'
onOk={()=>onSubmit()}
destroyOnClose
cancelText="取消"
okText="确认编辑"
onOk={() => onSubmit()}
confirmLoading={loading}
>
<Form
form={form}
layout={formLayout}
>
<Item label='站点名称' name='stationName'
<Form form={form} layout={formLayout}>
<Item
label="站点名称"
name="stationName"
rules={[
{
required: true,
......@@ -85,15 +83,15 @@ const EditModal = (props) =>{
},
]}
>
<Input placeholder='请输入站点名称'></Input>
<Input placeholder="请输入站点名称" />
</Item>
<Item label='站点类别'>all</Item>
<Item label='站点描述' name='description'>
<Input placeholder='请输入站点描述'></Input>
<Item label="站点类别">all</Item>
<Item label="站点描述" name="description">
<Input placeholder="请输入站点描述" />
</Item>
</Form>
</SiteModal>
)
}
);
};
export default EditModal
export default EditModal;
src/pages/userCenter/siteManage/SiteManage.jsx
View file @ dd04561a
import React, { useState, useEffect} from 'react';
import { Row, Col, Tree, Card, Input, Tooltip} from 'antd';
import {
FileAddTwoTone,
EditTwoTone,
DeleteTwoTone,
} from '@ant-design/icons';
import React, { useState, useEffect } from 'react';
import { Row, Col, Tree, Card, Input, Tooltip, Button } from 'antd';
import { FileAddTwoTone, EditTwoTone, DeleteTwoTone } from '@ant-design/icons';
import { PageContainer, GridContent } from '@ant-design/pro-layout';
import { getOUTree, getWebModuleTree} from '@/services/userCenter/siteManage/api';
import { getWebModuleTree } from '@/services/userCenter/siteManage/api';
import ListCard from '@/pages/orgnazation/ListCard';
import styles from '@/pages/userCenter/siteManage/SiteManage.less';
import AddModal from './AddModal'
import DelModal from './DelModal'
import EditModal from './EditModal'
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]
if(id){
setSaveTreeId(id)
setOuid(id)
}else{
setOuid(saveTreeId)
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];
if (id) {
setSaveTreeId(id);
setOuid(id);
} else {
setOuid(saveTreeId);
}
}
useEffect(()=>{
};
useEffect(() => {
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')
userMode: 'super',
select: '',
_version: 9999,
_dc: now,
node: -2,
})
.then(res => {
let arr = [];
if (res) {
arr.push(res.find(item => item.id === 'Web4StationRoot'));
console.log(arr, 'arr');
}
let arr2 = transTree(arr)
setTreeData(arr2)
}).catch(err =>{
console.error(err)
let arr2 = transTree(arr);
setTreeData(arr2);
})
// getOUTree().then(res =>{
// let arr = transTree(res)
// setTreeData(arr)
// }).catch(err =>{
// console.error(err)
// })
},[flag])
const Title = (props) =>{
const { text } = props
.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>
<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 = 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)
return obj = item
}else{
return item
}
})
}
//获取搜索框的值
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)
);
};
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, index) => {
item.title = Title(item) || item.text;
item.key = item.stationID || '';
let obj = {};
if (Array.isArray(item.children) && item.children.length > 0) {
transTree(item.children);
obj = item;
return obj;
}
return item;
});
};
// 获取搜索框的值
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);
};
const valueCallback = props => {
console.log(props);
};
return (
<PageContainer>
<GridContent>
<Row gutter={12}>
<Col lg={6} md={24}>
<Card className={ styles.cardBox}>
<Card className={styles.cardBox}>
<Tree
showLine={{showLeafIcon:false}}
showLine={{ showLeafIcon: false }}
showIcon
onSelect={(e)=> handleTreeSelect(e)}
onSelect={e => handleTreeSelect(e)}
treeData={treeData}
/>
<AddModal
visible = {modalVisible}
visible={modalVisible}
onCancel={() => setModalVisible(false)}
confirmModal={confirmModal}
/>
......@@ -144,35 +154,42 @@ const SiteManage = ()=>{
visible={delVisible}
stationId={stationId}
onCancel={() => setDelVisible(false)}
confirmModal = { delModal}/>
confirmModal={delModal}
/>
<EditModal
visible={editVisible}
stationObj={stationObj}
onCancel={() => setEditVisible(false)}
confirmModal = { editModal}
confirmModal={editModal}
/>
</Card>
</Col>
<Col lg={18} md={24}>
<Card className={ styles.cardBox}>
<Row align='middle'>
<Card className={styles.cardBox}>
<Row align="middle">
<Col span={1}>搜索</Col>
<Col span={ 8}>
<Col span={8}>
<Search
allowClear
placeholder = {placeholder}
onSearch = { handleSearch}
placeholder={placeholder}
onSearch={handleSearch}
enterButton
/>
</Col>
</Row>
{ ouid && <ListCard ouid={ouid} searchWord = { searchWord }></ListCard>}
{ouid && (
<ListCard
ouid={ouid}
searchWord={searchWord}
valueCallback={valueCallback}
/>
)}
</Card>
</Col>
</Row>
</GridContent>
</PageContainer>
)
}
);
};
export default SiteManage
export default SiteManage;
src/pages/userCenter/siteManage/SiteManage.less
View file @ dd04561a
......@@ -19,9 +19,7 @@
}
.titleBox{
display: flex;
// flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.test{
border-radius: 200px;
}
\ No newline at end of file
src/routes/config.js
View file @ dd04561a
......@@ -17,7 +17,7 @@ import RequestTest from '../pages/testPages/request';
import InitDataBase from '../pages/database/InitDataBase';
import ManagementDataBase from '../pages/database/ManagementDataBase';
import UserManage from '../pages/userCenter/UserManage';
import RoleManage from '../pages/userCenter/RoleManage';
import RoleManage from '../pages/userCenter/RoleManage/RoleManage';
import SiteManage from '../pages/userCenter/siteManage/SiteManage';
// import DefaultComponent from '../pages/orgnazation/DefaultComponent';
import TestTable from '../pages/orgnazation/TestTable';
......
src/services/userCenter/RoleManage/api.js 0 → 100644
View file @ dd04561a
import { get, post } from '@/services/index';
// 获取站点信息
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