Skip to content

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

perf: a perf

parent ea962fac
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1043 additions and 510 deletions
src/components/Modal/SiteModa.jsx
View file @ dd04561a
import React from 'react' import React from 'react';
import { import { Modal } from 'antd';
Modal
} from 'antd'
const SiteModal = (props) =>{ const SiteModal = props => {
console.log(props)
const defaultCofig = { const defaultCofig = {
title:'测试', title: '提示',
visible:false, visible: false,
} };
const config = { ...defaultCofig, ...props} const config = { ...defaultCofig, ...props };
return ( return (
<Modal <Modal style={{ width: '1000px' }} {...config}>
style={{width:"1000px"}}
{...config}
>
{props.children} {props.children}
</Modal> </Modal>
) );
} };
export default SiteModal export default SiteModal;
\ No newline at end of file
src/pages/database/InitDataBase.jsx
View file @ dd04561a
...@@ -15,7 +15,7 @@ import { ...@@ -15,7 +15,7 @@ import {
import { PageContainer } from '@ant-design/pro-layout'; import { PageContainer } from '@ant-design/pro-layout';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { get, post } from '../../services'; import { get, post } from '../../services';
import { setTableSQLDirName, deleteConn } from '@/services/database/api' import { setTableSQLDirName, deleteConn } from '@/services/database/api';
import styles from './InitDataBase.less'; import styles from './InitDataBase.less';
const { Option } = Select; const { Option } = Select;
...@@ -39,8 +39,8 @@ const InitDataBase = props => { ...@@ -39,8 +39,8 @@ const InitDataBase = props => {
const [upData, setUpData] = useState(1); // 列表刷新标记 const [upData, setUpData] = useState(1); // 列表刷新标记
const [option, setOption] = useState([]); // 下拉列表数据 const [option, setOption] = useState([]); // 下拉列表数据
const [desc, setDesc] = useState(''); // 修改描述 const [desc, setDesc] = useState(''); // 修改描述
const [allSqlDir, setAllSqulDir] = useState([]) //修改产品方案 const [allSqlDir, setAllSqulDir] = useState([]); // 修改产品方案
const [defaultSqlDir, setDefaultSqlDir] = useState('') //修改产品方案默认值 const [defaultSqlDir, setDefaultSqlDir] = useState(''); // 修改产品方案默认值
const [modalVisible, setModalVisible] = useState(false); const [modalVisible, setModalVisible] = useState(false);
console.log(window.location.host); console.log(window.location.host);
// 获取数据库链接记录 // 获取数据库链接记录
...@@ -80,8 +80,8 @@ const InitDataBase = props => { ...@@ -80,8 +80,8 @@ const InitDataBase = props => {
}); });
form.setFieldsValue(obj); form.setFieldsValue(obj);
setDbForm(val => ({ ...val, ...obj })); setDbForm(val => ({ ...val, ...obj }));
setAllSqulDir(res.allSqlDir) setAllSqulDir(res.allSqlDir);
setDefaultSqlDir(res.tableSQLDirName) setDefaultSqlDir(res.tableSQLDirName);
} }
}) })
.catch(err => { .catch(err => {
...@@ -201,7 +201,7 @@ const InitDataBase = props => { ...@@ -201,7 +201,7 @@ const InitDataBase = props => {
}; };
// 点击表格回显到表单 // 点击表格回显到表单
const tableClick = item => { const tableClick = item => {
console.log(item) console.log(item);
let obj = { ...dbForm }; let obj = { ...dbForm };
Object.keys(obj).forEach(k => { Object.keys(obj).forEach(k => {
obj[k] = item[k]; obj[k] = item[k];
...@@ -209,29 +209,31 @@ const InitDataBase = props => { ...@@ -209,29 +209,31 @@ const InitDataBase = props => {
form.setFieldsValue(obj); form.setFieldsValue(obj);
}; };
// 产品方案选择框回调 // 产品方案选择框回调
const handleSelect = (value) =>{ const handleSelect = value => {
setTableSQLDirName({ setTableSQLDirName({
dirName:value, dirName: value,
_version:9999, _version: 9999,
_dc:new Date().getTime() _dc: new Date().getTime(),
}).then(res =>{
if(res.success){
notification.success({
message: '提示',
duration: 3,
description: `已切换初始化脚本为:${value}`,
});
}else{
notification.error({
message: '提示',
duration: 3,
description: res.message,
});
}
}).catch(err =>{
console.error(err)
}) })
} .then(res => {
if (res.success) {
notification.success({
message: '提示',
duration: 3,
description: `已切换初始化脚本为:${value}`,
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message,
});
}
})
.catch(err => {
console.error(err);
});
};
// 展示修改描述 // 展示修改描述
const changeDesc = () => { const changeDesc = () => {
setModalVisible(true); setModalVisible(true);
...@@ -265,34 +267,37 @@ const InitDataBase = props => { ...@@ -265,34 +267,37 @@ const InitDataBase = props => {
setModalVisible(false); setModalVisible(false);
}); });
}; };
//删除数据库连接记录 // 删除数据库连接记录
const delConn = (value)=>{ const delConn = value => {
setTableLoading(true) setTableLoading(true);
const { key='' } =value const { key = '' } = value;
deleteConn({ deleteConn({
rowIndex:key, rowIndex: key,
_version:9999, _version: 9999,
_dc:new Date().getTime() _dc: new Date().getTime(),
}).then(res =>{ })
setTableLoading(false) .then(res => {
if(res.success){ setTableLoading(false);
setUpData(upData + 1); if (res.success) {
notification.success({ setUpData(upData + 1);
message:'提示', notification.success({
duration:3, message: '提示',
description:'操作成功' duration: 3,
}) description: '操作成功',
}else{ });
notification.error({ } else {
message:'提示', notification.error({
duration:3, message: '提示',
description:res.message duration: 3,
}) description: res.message,
} });
}).catch(err => { }
setTableLoading(false) })
console.error(err)}) .catch(err => {
} setTableLoading(false);
console.error(err);
});
};
const columns = [ const columns = [
{ {
title: '服务器名或IP地址', title: '服务器名或IP地址',
...@@ -320,31 +325,24 @@ const InitDataBase = props => { ...@@ -320,31 +325,24 @@ const InitDataBase = props => {
key: 'desc', key: 'desc',
}, },
{ {
title: '修改描述', title: '操作',
dataIndex: 'name', dataIndex: 'action',
key: 'name', key: 'action',
render: () => ( render: (text, record) => (
<Button <Space>
type="primary" <Button
size="small" type="primary"
onClick={() => { size="small"
changeDesc(); onClick={() => {
}} changeDesc();
> }}
修改描述 >
</Button> 修改描述
), </Button>
}, <Button size="small" danger onClick={() => delConn(record)}>
{ 删除
title: '删除', </Button>
dataIndex: 'del', </Space>
key: 'del',
render: (text,record) => (
<Button size="small" danger
onClick={() => delConn(record)}
>
删除
</Button>
), ),
}, },
]; ];
...@@ -418,19 +416,27 @@ const InitDataBase = props => { ...@@ -418,19 +416,27 @@ const InitDataBase = props => {
> >
数据库初始化 数据库初始化
</Button> </Button>
{defaultSqlDir && <Select {defaultSqlDir && (
placeholder='请选择解决方案' <Select
style={ placeholder="请选择解决方案"
{width:'200px'} style={{ width: '200px' }}
} defaultValue={defaultSqlDir}
defaultValue={defaultSqlDir} onChange={e => {
onChange = { (e)=>{ handleSelect(e)}} handleSelect(e);
> }}
{allSqlDir && allSqlDir.map( (item, index) => { >
console.log(defaultSqlDir) {allSqlDir &&
return <Option value={item} key={index}> {item} </Option> allSqlDir.map((item, index) => {
}) } console.log(defaultSqlDir);
</Select>} return (
<Option value={item} key={index}>
{' '}
{item}{' '}
</Option>
);
})}
</Select>
)}
{/* <span>{dbForm.inUse}</span> */} {/* <span>{dbForm.inUse}</span> */}
</Space> </Space>
</div> </div>
...@@ -464,10 +470,9 @@ const InitDataBase = props => { ...@@ -464,10 +470,9 @@ const InitDataBase = props => {
bodyStyle={{ bodyStyle={{
minHeight: '100px', minHeight: '100px',
}} }}
cancelText="取消" cancelText="取消"
okText="确认修改" okText="确认修改"
destroyOnClose={true} destroyOnClose
> >
<Row> <Row>
<Col span={2} className={styles.decsBox}> <Col span={2} className={styles.decsBox}>
......
src/pages/database/ManagementDataBase.jsx
View file @ dd04561a
...@@ -2,13 +2,13 @@ import React, { useEffect, useState } from 'react'; ...@@ -2,13 +2,13 @@ import React, { useEffect, useState } from 'react';
import { Card, Button, Table, Space, Modal } from 'antd'; import { Card, Button, Table, Space, Modal } from 'antd';
import { PageContainer } from '@ant-design/pro-layout'; import { PageContainer } from '@ant-design/pro-layout';
import { get } from '../../services'; import { get } from '../../services';
import styles from './ManagementDataBase.less' import styles from './ManagementDataBase.less';
const ManagementDataBase = () => { const ManagementDataBase = () => {
const [autoCheckList, setAutoCheckList] = useState([]); const [autoCheckList, setAutoCheckList] = useState([]);
const [checkList, setCheckList] = useState([]); const [checkList, setCheckList] = useState([]);
const [logList, setLogList] = useState([]); const [logList, setLogList] = useState([]);
const [checkFlag, setCheckFlag] = useState(1) const [checkFlag, setCheckFlag] = useState(1);
const [checkLoading, setCheckLoading] = useState(false); const [checkLoading, setCheckLoading] = useState(false);
const [logLoading, setLogLoading] = useState(false); const [logLoading, setLogLoading] = useState(false);
const [modalVisible, setModalVisible] = useState(false); // 弹窗 const [modalVisible, setModalVisible] = useState(false); // 弹窗
...@@ -45,7 +45,7 @@ const ManagementDataBase = () => { ...@@ -45,7 +45,7 @@ const ManagementDataBase = () => {
console.error(err); console.error(err);
}); });
}, [checkFlag]); }, [checkFlag]);
//获取数据库升级记录 // 获取数据库升级记录
useEffect(() => { useEffect(() => {
setLogLoading(true); setLogLoading(true);
get(`/Cityinterface/rest/services/OMS.svc/DatabaseStandard_GetLog`, { get(`/Cityinterface/rest/services/OMS.svc/DatabaseStandard_GetLog`, {
...@@ -70,18 +70,15 @@ const ManagementDataBase = () => { ...@@ -70,18 +70,15 @@ const ManagementDataBase = () => {
}); });
}, []); }, []);
const handleCheck = () => { const handleCheck = () => {
setCheckFlag(checkFlag+1) setCheckFlag(checkFlag + 1);
}; };
const handleUpdate = () => { const handleUpdate = () => {
alert('updatedb') alert('updatedb');
console.log('updatedb'); console.log('updatedb');
}; };
const handleLog = text => { const handleLog = text => {
let arr = [] let arr = [];
arr.push( arr.push(text.split(/[(\r\n)\r\n]+/).map(item => <p>${item}</p>));
text.split(/[(\r\n)\r\n]+/).map(item =>{
return (<p>${item}</p>)
}))
setModalVisible(true); setModalVisible(true);
setContent(text); setContent(text);
}; };
...@@ -141,38 +138,33 @@ const ManagementDataBase = () => { ...@@ -141,38 +138,33 @@ const ManagementDataBase = () => {
title: '版本日志', title: '版本日志',
dataIndex: 'despersion', dataIndex: 'despersion',
key: 'despersion', key: 'despersion',
render: text => { render: text => (
return ( <Button
<Button size="small"
size='small' onClick={() => {
onClick={() => { handleLog(text);
handleLog(text); }}
}} >
> 日志
日志 </Button>
</Button> ),
);
},
}, },
{ {
title: '升级内容', title: '升级内容',
dataIndex: 'content', dataIndex: 'content',
key: 'content', key: 'content',
ellipsis: true, ellipsis: true,
render: text => { render: text => (
<Button
return ( size="small"
<Button type="primary"
size='small' onClick={() => {
type='primary' handleLog(text);
onClick={() => { }}
handleLog(text); >
}} 升级内容
> </Button>
升级内容 ),
</Button>
);
},
}, },
]; ];
...@@ -187,13 +179,21 @@ const ManagementDataBase = () => { ...@@ -187,13 +179,21 @@ const ManagementDataBase = () => {
dataSource={autoCheckList} dataSource={autoCheckList}
bordered bordered
loading={checkLoading} loading={checkLoading}
size='small' size="small"
/> />
<div className={ styles.tCenter}> <div className={styles.tCenter}>
<Space> <Space>
<Button type='primary' onClick={handleCheck} loading={checkLoading}>检查</Button> <Button
<Button danger type='primary' onClick={handleUpdate}>升级</Button> type="primary"
</Space> onClick={handleCheck}
loading={checkLoading}
>
检查
</Button>
<Button danger type="primary" onClick={handleUpdate}>
升级
</Button>
</Space>
</div> </div>
</Card> </Card>
<Card className={styles.mgTop20}> <Card className={styles.mgTop20}>
...@@ -207,7 +207,7 @@ const ManagementDataBase = () => { ...@@ -207,7 +207,7 @@ const ManagementDataBase = () => {
dataSource={checkList} dataSource={checkList}
bordered bordered
loading={checkLoading} loading={checkLoading}
size='small' size="small"
/> />
</Card> </Card>
<Card className={styles.mgTop20}> <Card className={styles.mgTop20}>
...@@ -218,7 +218,7 @@ const ManagementDataBase = () => { ...@@ -218,7 +218,7 @@ const ManagementDataBase = () => {
dataSource={logList} dataSource={logList}
bordered bordered
loading={logLoading} loading={logLoading}
size='small' size="small"
/> />
</Card> </Card>
</PageContainer> </PageContainer>
...@@ -232,13 +232,15 @@ const ManagementDataBase = () => { ...@@ -232,13 +232,15 @@ const ManagementDataBase = () => {
onCancel={() => setModalVisible(false)} onCancel={() => setModalVisible(false)}
width="1000px" width="1000px"
bodyStyle={{ bodyStyle={{
minHeight:'100px', minHeight: '100px',
maxHeight:'600px', maxHeight: '600px',
overflowY:'scroll' overflowY: 'scroll',
}} }}
style={{top:"40px"}} style={{ top: '40px' }}
footer={[ footer={[
<Button type='primary' onClick={() => setModalVisible(false)}>关闭窗口</Button>, <Button type="primary" onClick={() => setModalVisible(false)}>
关闭窗口
</Button>,
]} ]}
> >
{content} {content}
......
src/pages/orgnazation/DefaultComponent.jsx
View file @ dd04561a
This diff is collapsed.
src/pages/orgnazation/ListCard.jsx
View file @ dd04561a
import React, { useState, useEffect, useCallback} from 'react'; import React, { useState, useEffect, useCallback } from 'react';
import { Spin } from 'antd'; import { Spin, Button } from 'antd';
import ListCardItem from './listCardItem'; import ListCardItem from './listCardItem';
import { get, post } from '../../services'; import { get, post } from '../../services';
import { orgTest} from '../../services/orgnazation/api'; import { orgTest } from '@/services/orgnazation/api';
const tip ='loading...' const tip = 'loading...';
const ListCard = (props) =>{ const ListCard = props => {
const { ouid, searchWord } = props const { ouid, searchWord, valueCallback } = props;
const [valueList, setValueList]=useState([]) const [valueList, setValueList] = useState([]);
const [testList, setTestList] = useState([]) const [dataList, setdataList] = useState([]);
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true);
const { optionsList} = props const { optionsList } = props;
const getValueCallback = useCallback( const getValueCallback = useCallback((value, index) => {
(value,index) => { console.log(value, index);
console.log(value,index) setValueList((valueList[index] = value));
setValueList(valueList[index]=value) console.log(valueList, 'valueList');
console.log(valueList,'valueList') }, []);
},[]) useEffect(() => {
useEffect(()=>{ setLoading(true);
setLoading(true) const defaultConfig = {
const defaultConfig ={ optionsList: [],
optionsList:[], title: '默认组',
title:'默认组', id: '',
id:'', };
} // /Cityinterface/rest/services/OMS.svc/U_GetUserListForBatchOper
get("/Cityinterface/rest/services/OMS.svc/U_GetUserListForBatchOper",{ get('/Cityinterface/rest/services/OMS.svc/P_GetUserByStation', {
OUID:ouid||'', // OUID:ouid||'',
_version:9999, stationID: ouid || '',
_dc:new Date().getTime() _version: 9999,
}).then(res =>{ _dc: new Date().getTime(),
setLoading(false)
const list = []
res && res.map(item =>{
list.push({...defaultConfig,...item})
})
setTestList(list)
}).catch(err =>{
console.error(err)
setLoading(false)
})
//多级嵌套测试
orgTest().then(res =>{
console.log(res,'res')
}) })
},[ouid]) .then(res => {
setLoading(false);
const list = [];
res &&
res.map(item => {
list.push({ ...defaultConfig, ...item });
});
setdataList(list);
})
.catch(err => {
console.error(err);
setLoading(false);
});
// 多级嵌套测试
// orgTest().then(res =>{
// console.log(res,'res')
// })
}, [ouid]);
return ( return (
<> <div>
{ {loading ? (
loading? <Spin size="large" spinning = {loading} tip={tip} style={{position:'absolute',top:'30%',left:'0',right:'0',bottom:'0'}}/> : <Spin
testList && testList.map((item,index) =>{ size="large"
return (<ListCardItem {...item} itemid={index} key={index} spinning={loading}
getValueCallback={getValueCallback} searchWord ={ searchWord} {...props}></ListCardItem>) 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 export default ListCard;
\ No newline at end of file
src/pages/orgnazation/ListCardItem.less
View file @ dd04561a
:global{
.spans span{
background-color: red !important;
}
}
.divBox { .divBox {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
border: 1px solid #b5b8c8; border: 1px solid #b5b8c8;
margin-top: 20px; margin-top: 20px;
min-height: 40px; min-height: 50px;
.topCheckbox{ .topCheckbox{
height: 20px; height: 20px;
background-color: #fff; background-color: #fff;
...@@ -20,17 +15,12 @@ ...@@ -20,17 +15,12 @@
margin-left: 20px; margin-left: 20px;
justify-content: space-between; justify-content: space-between;
.check { .check {
margin: 10px 0 ; // margin: 10px 0 ;
flex: 1; // flex: 1;
.spans {
background-color: red !important;
span{
font-size: 200px;
display: none;
color: chartreuse !important;
}
}
} }
} }
} }
.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 React, { useState, useEffect, useRef, useLayoutEffect } from 'react';
import { import { Checkbox, Row, Col } from 'antd';
Checkbox, import styles from './ListCardItem.less';
Row,
Col
} from 'antd';
import styles from './ListCardItem.less'
const CheckGroup = Checkbox.Group; const CheckGroup = Checkbox.Group;
const ListCardItem = (props) =>{ const ListCardItem = props => {
console.log(props.searchWord) const { getValueCallback, itemid, userList, OUName, searchWord } = props;
const [ indeterminate, setIndeterminate ] = useState(false) const [indeterminate, setIndeterminate] = useState(false);
const [ allChecked, setAllChecked ] = useState(false) //全选状态 const [allChecked, setAllChecked] = useState(false); // 全选状态
const [ checkList, setCheckList] = useState([]) //复选框列表 const [checkList, setCheckList] = useState([]); // 复选框列表选中的值
const { getValueCallback, itemid, userList, OUName, searchWord } = props const [defaultList, setDefaultList] = useState([]); // 默认的选项
const defaultList = userList && userList.map( (item,index) =>{ useEffect(() => {
// if(!searchWord){ console.log(userList, '执行了`````');
// return let arr = [];
// }else{ userList.map((item, index) => {
// if(!item.userName.includes(searchWord))return let obj = { ...item };
// } obj.label = (
item.label = item.userName || item.label <span
item.value = item.userID || item.label className={
return item searchWord && obj.userName.includes(searchWord)
}) || [] ? styles.isSearch
: ''
const handleAllChecked = (e) =>{ }
const { checked } = e.target >
setAllChecked(checked) {obj.userName}
let arr = [] </span>
if(checked){ );
arr = defaultList.map(item =>{ obj.value = obj.userID;
item.isChecked=checked arr.push(obj);
return item });
}) setDefaultList(arr);
}else{ }, [searchWord]);
arr = [] useEffect(() => {
console.log(userList, '执行了`````');
let arr2 = [];
userList.map((item, index) => {
if (item.isChecked) {
arr2.push(item.userID);
}
});
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) setCheckList(arr);
setIndeterminate(false) setIndeterminate(false);
getValueCallback(arr,itemid) getValueCallback(arr, itemid);
} };
const handleChecked = (e) =>{ const handleChecked = e => {
setCheckList(e) ; console.log(e, 'e45');
setAllChecked(e.length === defaultList.length) setCheckList(e);
setIndeterminate(!!e.length && e.length <defaultList.length) setAllChecked(e.length === defaultList.length);
getValueCallback(e,itemid) setIndeterminate(!!e.length && e.length < defaultList.length);
} getValueCallback(e, itemid);
};
return ( return (
<> <>
<div className ={`${styles.divBox}`}> <div className={`${styles.divBox}`}>
<div className={ styles.topCheckbox}> <div className={styles.topCheckbox}>
<Checkbox <Checkbox
indeterminate = { indeterminate} indeterminate={indeterminate}
checked={ allChecked} checked={allChecked}
onChange= { (e) =>{ handleAllChecked(e)}} onChange={e => {
>{OUName}</Checkbox> handleAllChecked(e);
}}
>
{OUName}
</Checkbox>
</div> </div>
<div style={{width:"100%"}} className = {styles.checkdiv}> <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} /> } */} {defaultList && defaultList.length > 0 && (
<CheckGroup onChange = {(e) => { handleChecked(e)}}> <CheckGroup
{defaultList && defaultList.length>0 && className={styles.check}
defaultList.map( (item, index) =>{ onChange={e => {
return item.label.includes(searchWord) && <Checkbox key={index} checked={item.isChecked} className={ item.label.includes(searchWord)&&styles.spans} value={item.value} >{item.label}</Checkbox> 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} value={item.value} >{item.label}{item.userID}{String(item.isChecked)}</Checkbox>
}) })
} }
</CheckGroup> </CheckGroup>} */}
</div> </div>
</div> </div>
</> </>
) );
} };
export default ListCardItem export default ListCardItem;
\ No newline at end of file
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 React, { useState } from 'react';
import { import { Form, Input, notification } from 'antd';
Form,
Input,
notification
} from 'antd'
import SiteModal from '@/components/Modal/SiteModa'; import SiteModal from '@/components/Modal/SiteModa';
import { addStation } from '@/services/userCenter/siteManage/api'; import { addStation } from '@/services/userCenter/siteManage/api';
const { Item } = Form const { Item } = Form;
const AddModal = (props) =>{ const AddModal = props => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [formLayout, setFormLayout] = useState('horizontal'); const [formLayout, setFormLayout] = useState('horizontal');
const [loading,setLoading] = useState(false) const [loading, setLoading] = useState(false);
const { confirmModal } =props const { confirmModal } = props;
const onSubmit = () =>{ const onSubmit = () => {
form.validateFields().then(res =>{ form
console.log(res,'res') .validateFields()
setLoading(true) .then(res => {
addStation({ console.log(res, 'res');
stationName:res.stationName, setLoading(true);
description:res.description, addStation({
_version:9999, stationName: res.stationName,
_dc:new Date().getTime() description: res.description,
}).then(res =>{ _version: 9999,
setLoading(false) _dc: new Date().getTime(),
if(res.success){ })
form.resetFields() .then(res => {
notification.success({ setLoading(false);
message: '通知', if (res.success) {
duration: 3, form.resetFields();
description: '新增成功', 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,
});
}); });
confirmModal() })
}else{ .catch(err => {
notification.error({ console.error(err);
message: '提示', });
duration: 3, };
description: res.message,
}); const onFinish = value => {};
} return (
}).catch(err =>{ <SiteModal
setLoading(false) {...props}
notification.error({ title="新增站点"
message: '提示', bodyStyle={{ width: '100%', minHeight: '100px' }}
duration: 3, style={{ top: 200, borderRadius: '20px' }}
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" width="600px"
destroyOnClose={true} destroyOnClose
cancelText='取消' cancelText="取消"
okText='确认选择' okText="确认选择"
onOk={()=>onSubmit()} onOk={() => onSubmit()}
confirmLoading={loading} confirmLoading={loading}
> >
<Form <Form form={form} layout={formLayout} onFinish={onFinish}>
form={form} <Item
layout={formLayout} label="站点名称"
onFinish={onFinish} name="stationName"
rules={[
{
required: true,
message: '请输入站点名称',
},
]}
> >
<Item label='站点名称' name='stationName' <Input placeholder="请输入站点名称" />
rules={[ </Item>
{ <Item label="站点类别">all</Item>
required: true, <Item label="站点描述" name="description">
message: '请输入站点名称', <Input placeholder="请输入站点描述" />
}, </Item>
]} </Form>
>
<Input placeholder='请输入站点名称'></Input>
</Item>
<Item label='站点类别'>all</Item>
<Item label='站点描述' name='description'>
<Input placeholder='请输入站点描述'></Input>
</Item>
</Form>
</SiteModal> </SiteModal>
) );
} };
export default AddModal export default AddModal;
src/pages/userCenter/siteManage/DelModal.jsx
View file @ dd04561a
import React, { useState} from 'react'; import React, { useState } from 'react';
import { import { notification } from 'antd';
notification
} from 'antd'
import SiteModal from '@/components/Modal/SiteModa'; import SiteModal from '@/components/Modal/SiteModa';
import { deleteStation } from '@/services/userCenter/siteManage/api' import { deleteStation } from '@/services/userCenter/siteManage/api';
const DelModal = (props) =>{ const DelModal = props => {
const { confirmModal, stationId } =props const { confirmModal, stationId } = props;
const [loading,setLoading] = useState(false) const [loading, setLoading] = useState(false);
const onSubmit = (props) =>{ const onSubmit = props => {
setLoading(true) setLoading(true);
deleteStation({ deleteStation({
stationID: stationId, stationID: stationId,
_version: 9999, _version: 9999,
_dc: new Date().getTime() _dc: new Date().getTime(),
}).then(res =>{ })
setLoading(false) .then(res => {
if(res.success){ setLoading(false);
notification.success({ if (res.success) {
message: '通知', notification.success({
duration: 3, message: '通知',
description: '删除成功', duration: 3,
}); description: '删除成功',
confirmModal() });
}else{ confirmModal();
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message,
});
}
})
.catch(err => {
setLoading(false);
notification.error({ notification.error({
message: '提示', message: '提示',
duration: 3, duration: 3,
description: res.message, description: err,
}); });
}
}).catch(err =>{
setLoading(false)
notification.error({
message: '提示',
duration: 3,
description: err
}); });
}) };
} return (
return( <SiteModal
<SiteModal {...props} title='删除站点' {...props}
bodyStyle ={{width:"100%",minHeight:"50px",}} title="删除站点"
style= {{top:200}} bodyStyle={{ width: '100%', minHeight: '50px' }}
style={{ top: 200 }}
width="400px" width="400px"
destroyOnClose={true} destroyOnClose
cancelText='取消' cancelText="取消"
okText='确认删除' okText="确认删除"
onOk={()=>onSubmit()} onOk={() => onSubmit()}
confirmLoading={loading} confirmLoading={loading}
> >
是否删除该站点? 是否删除该站点?
</SiteModal> </SiteModal>
) );
} };
export default DelModal export default DelModal;
src/pages/userCenter/siteManage/EditModal.jsx
View file @ dd04561a
import React, { useState, useEffect, useRef} from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { import { Form, Input, notification } from 'antd';
Form,
Input,
notification
} from 'antd'
import SiteModal from '@/components/Modal/SiteModa'; import SiteModal from '@/components/Modal/SiteModa';
import { editStation } from '@/services/userCenter/siteManage/api'; import { editStation } from '@/services/userCenter/siteManage/api';
const { Item } = Form const { Item } = Form;
const EditModal = (props) =>{ const EditModal = props => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [formLayout, setFormLayout] = useState('horizontal'); const [formLayout, setFormLayout] = useState('horizontal');
const [loading,setLoading] = useState(false) const [loading, setLoading] = useState(false);
const flag = useRef() const flag = useRef();
const { confirmModal, stationObj } =props const { confirmModal, stationObj } = props;
const onSubmit = () =>{ const onSubmit = () => {
form.validateFields().then(res =>{ form
setLoading(true) .validateFields()
flag.current=res .then(res => {
editStation({ setLoading(true);
stationName:res.stationName, flag.current = res;
description:res.description, editStation({
stationID: stationObj.stationID, stationName: res.stationName,
_version:9999, description: res.description,
_dc:new Date().getTime() stationID: stationObj.stationID,
}).then(res =>{ _version: 9999,
setLoading(false) _dc: new Date().getTime(),
if(res.success){ })
form.resetFields() .then(res => {
notification.success({ setLoading(false);
message: '通知', if (res.success) {
duration: 3, form.resetFields();
description: '编辑成功', 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,
});
}); });
confirmModal() })
}else{ .catch(err => {
notification.error({ console.error(err);
message: '提示', });
duration: 3, };
description: res.message, useEffect(() => {
});
}
}).catch(err =>{
setLoading(false)
notification.error({
message: '提示',
duration: 3,
description: err,
});
})
}).catch(err =>{
console.error(err)
})
}
useEffect( () =>{
form.setFieldsValue({ form.setFieldsValue({
stationName:stationObj.text, stationName: stationObj.text,
description:stationObj.description description: stationObj.description,
}) });
return ()=>{ }, [stationObj]);
console.log(flag.current) return (
form.setFieldsValue(flag.current) <SiteModal
} {...props}
},[stationObj]) title="编辑站点"
return( bodyStyle={{ width: '100%', minHeight: '100px' }}
<SiteModal {...props} title='编辑站点' style={{ top: 200, borderRadius: '20px' }}
bodyStyle ={{width:"100%",minHeight:"100px"}}
style= {{top:200,borderRadius:"20px",}}
width="600px" width="600px"
destroyOnClose={true} destroyOnClose
cancelText='取消' cancelText="取消"
okText='确认编辑' okText="确认编辑"
onOk={()=>onSubmit()} onOk={() => onSubmit()}
confirmLoading={loading} confirmLoading={loading}
> >
<Form <Form form={form} layout={formLayout}>
form={form} <Item
layout={formLayout} label="站点名称"
name="stationName"
rules={[
{
required: true,
message: '请输入站点名称',
},
]}
> >
<Item label='站点名称' name='stationName' <Input placeholder="请输入站点名称" />
rules={[ </Item>
{ <Item label="站点类别">all</Item>
required: true, <Item label="站点描述" name="description">
message: '请输入站点名称', <Input placeholder="请输入站点描述" />
}, </Item>
]} </Form>
>
<Input placeholder='请输入站点名称'></Input>
</Item>
<Item label='站点类别'>all</Item>
<Item label='站点描述' name='description'>
<Input placeholder='请输入站点描述'></Input>
</Item>
</Form>
</SiteModal> </SiteModal>
) );
} };
export default EditModal export default EditModal;
src/pages/userCenter/siteManage/SiteManage.less
View file @ dd04561a
...@@ -19,9 +19,7 @@ ...@@ -19,9 +19,7 @@
} }
.titleBox{ .titleBox{
display: flex; display: flex;
// flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
align-items: center; 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'; ...@@ -17,7 +17,7 @@ import RequestTest from '../pages/testPages/request';
import InitDataBase from '../pages/database/InitDataBase'; import InitDataBase from '../pages/database/InitDataBase';
import ManagementDataBase from '../pages/database/ManagementDataBase'; import ManagementDataBase from '../pages/database/ManagementDataBase';
import UserManage from '../pages/userCenter/UserManage'; 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 SiteManage from '../pages/userCenter/siteManage/SiteManage';
// import DefaultComponent from '../pages/orgnazation/DefaultComponent'; // import DefaultComponent from '../pages/orgnazation/DefaultComponent';
import TestTable from '../pages/orgnazation/TestTable'; 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