Skip to content

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

perf: a perf

parent ea962fac
Hide whitespace changes
Inline Side-by-side
Showing with 1365 additions and 830 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
import React,{ useState, useEffect, } from 'react' import React, { useState, useEffect } from 'react';
import { import { Card, TreeSelect, Space, Button, Table, Input, Row, Col } from 'antd';
Card,
TreeSelect,
Space,
Button,
Table,
Input,
Row,
Col
} from 'antd';
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 TestModal from './ModalComponent'; import TestModal from './ModalComponent';
import ListCard from './ListCard'; import ListCard from './ListCard';
import { get, post } from '../../services'; import { get, post } from '../../services';
import { orgGet,orgTest } from '../../services/orgnazation/api' import { orgGet, orgTest } from '../../services/orgnazation/api';
import styles from './DefaultComponent.less' import styles from './DefaultComponent.less';
const { Search } = Input const { Search } = Input;
const { TreeNode } = TreeSelect; const { TreeNode } = TreeSelect;
// const treeData = [ // const treeData = [
// { // {
...@@ -39,221 +30,216 @@ const { TreeNode } = TreeSelect; ...@@ -39,221 +30,216 @@ const { TreeNode } = TreeSelect;
// }, // },
// ]; // ];
const DefaultComponent = () => {
const DefaultComponent = ()=> { const [treeValue, setTreeValue] = useState(null); // 树节点选中的值
const [treeValue, setTreeValue] = useState(null)//树节点选中的值 const [tableData, setTableData] = useState([]); // table的值
const [tableData, setTableData] = useState([]) //table的值 const [selectedRowKeys, setSelectedRowKeys] = useState([]); // table表格checkbox配置
const [selectedRowKeys, setSelectedRowKeys] = useState([]) //table表格checkbox配置 const [modalVisible, setModalVisible] = useState(false); // 展示Modal弹窗
const [modalVisible, setModalVisible] = useState(false) //展示Modal弹窗 const [testPeoList, setTestPeoList] = useState([]); // 测试card数组
const [testPeoList, setTestPeoList] = useState([]) //测试card数组 const [treeData, setTreeData] = useState([]);
const [treeData, setTreeData] = useState([]) // 树节点选中的值
//树节点选中的值 const treeChange = e => {
const treeChange = (e) =>{ setTreeValue(e);
setTreeValue(e) };
} // 用户搜索
//用户搜索 const handleSearch = () => {
const handleSearch = ()=>{ console.log('handleSearch');
console.log('handleSearch') setModalVisible(true);
setModalVisible(true) };
} // 导入
//导入 const handleImport = () => {
const handleImport = () =>{ setModalVisible(true);
setModalVisible(true) };
} // 搜索框时间
//搜索框时间 const inputSearch = e => {
const inputSearch = (e) =>{ console.log(e, 'inputSearch');
console.log(e,'inputSearch') };
}
const columns = [ const columns = [
{ {
title:'用户ID', title: '用户ID',
dataIndex:"userID", dataIndex: 'userID',
key:'userID' key: 'userID',
}, },
{ {
title:'登录名', title: '登录名',
dataIndex:'loginName', dataIndex: 'loginName',
key:'loginName' key: 'loginName',
}, },
{ {
title:'用户姓名', title: '用户姓名',
dataIndex:'userName', dataIndex: 'userName',
key:'userName', key: 'userName',
}, },
{ {
title:'手机号码', title: '手机号码',
dataIndex:'phone', dataIndex: 'phone',
key:'phone' key: 'phone',
}, },
{ {
title:'钉钉账户', title: '钉钉账户',
dataIndex:'ddid', dataIndex: 'ddid',
key:'ddid', key: 'ddid',
}, },
{ {
title:'微信账户', title: '微信账户',
dataIndex:'wxid', dataIndex: 'wxid',
key:'wxid', key: 'wxid',
ellipsis: true, ellipsis: true,
} },
] ];
useEffect( ()=>{ useEffect(() => {
orgGet().then(res =>{ orgGet().then(res => {
console.log(res,'orgGet') console.log(res, 'orgGet');
if(res){ if (res) {
let arr = transTree(res) let arr = transTree(res);
console.log(transTree(res),'arr') console.log(transTree(res), 'arr');
setTreeData(arr) setTreeData(arr);
} }
}) });
},[]) }, []);
//处理返回的树形结构 // 处理返回的树形结构
const transTree = (value,isChild=false) =>{ const transTree = (value, isChild = false) => {
let arr = value let arr = value;
if(arr.length< 0){ if (arr.length < 0) {
return return;
} }
let obj = {} let obj = {};
return arr.map( item =>{ return arr.map(item => {
// item.title = item.text if (isChild) {
// item.value = item.id item.title = item.userName;
// if( item.children && item.children.length > 0){ item.value = item.userID;
// transTree(item.children) } else {
// return obj=item item.title = item.text;
// }else{ item.value = item.id;
// return 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){ if (item.children && item.children.length > 0) {
transTree(item.children,false) transTree(item.children, false);
return obj=item return (obj = item);
}else{ }
return item return item;
} });
}) };
} useEffect(() => {
useEffect( () =>{ get('/Cityinterface/rest/services/OMS.svc/U_GetOneOUUserListNew', {
get('/Cityinterface/rest/services/OMS.svc/U_GetOneOUUserListNew',{ OUID: 24,
OUID:24, _version: 9999,
_version:9999, _dc: new Date().getTime(),
_dc:new Date().getTime() }).then(res => {
}).then(res =>{ if (res.success) {
if(res.success){ setTableData(res.root);
setTableData(res.root)
} }
}) });
const testData =[] const testData = [];
const test2list = [] const test2list = [];
for( let i=1; i<10 ; i++){ for (let i = 1; i < 10; i++) {
testData.push({ testData.push({
key:i, key: i,
ID:i ID: i,
}) });
test2list.push({ test2list.push({
label:i+"测试", label: `${i}测试`,
value:i+"测试", value: `${i}测试`,
}) });
} }
console.log(test2list) console.log(test2list);
setTestPeoList(test2list) setTestPeoList(test2list);
},[]) }, []);
//table选中框的值 // table选中框的值
const selectChange = (e) =>{ const selectChange = e => {
console.log(e,'e') console.log(e, 'e');
setSelectedRowKeys(e) setSelectedRowKeys(e);
} };
const confirmModal = () =>{ const confirmModal = () => {
setModalVisible(false) setModalVisible(false);
} };
//table复选的配置 // table复选的配置
const rowSelection ={ const rowSelection = {
selectedRowKeys, selectedRowKeys,
onChange:selectChange, onChange: selectChange,
} };
const btnLable = [ 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 ( return (
<> <>
<PageContainer> <PageContainer>
<Card> <Card>
<Row> <Row>
<Col span ={1}> <Col span={1}>
<div style={{height:"30px",lineHeight:"30px"}}> <div style={{ height: '30px', lineHeight: '30px' }}>机构选择</div>
机构选择
</div>
</Col> </Col>
<Col span={12}> <Col span={12}>
<TreeSelect <TreeSelect
style={{"width":"50%"}} style={{ width: '50%' }}
treeData={treeData} treeData={treeData}
value={treeValue} 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>
<Col span={8} />
</Row> </Row>
<div style={{marginTop:'20px',textAlign:'center'}}> <div style={{ marginTop: '20px', textAlign: 'center' }}>
<Space> <Space>
{ {btnLable &&
btnLable && btnLable.map( (item,index) => { btnLable.map((item, index) => {
const { config} =item const { config } = item;
return ( 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> </Space>
</div> </div>
<TestModal <TestModal
title='用户选择' title="用户选择"
visible = {modalVisible} visible={modalVisible}
maskClosable maskClosable
onOk={() => confirmModal()} onOk={() => confirmModal()}
onCancel={() => setModalVisible(false)} onCancel={() => setModalVisible(false)}
bodyStyle ={{width:"100%",height:"100%",}} bodyStyle={{ width: '100%', height: '100%' }}
style= {{top:20}} style={{ top: 20 }}
width="1000px" width="1000px"
destroyOnClose={true} destroyOnClose
cancelText='取消' cancelText="取消"
okText='确认选择' okText="确认选择"
> >
<ListCard optionsList ={testPeoList}></ListCard> <ListCard optionsList={testPeoList} />
</TestModal> </TestModal>
</Card> </Card>
<Card className={styles.mgTop20}> <Card className={styles.mgTop20}>
<div classNam={styles.tableTitle}>一般用户的用户列表</div> <div classNam={styles.tableTitle}>一般用户的用户列表</div>
<Table <Table
className={styles.mgTop20} className={styles.mgTop20}
rowSelection={rowSelection} rowSelection={rowSelection}
columns={columns} columns={columns}
dataSource ={tableData} dataSource={tableData}
bordered bordered
rowKey='userID' rowKey="userID"
scroll={{y:400}} scroll={{ y: 400 }}
></Table> />
</Card> </Card>
</PageContainer> </PageContainer>
</> </>
) );
} };
export default connect()(DefaultComponent) export default connect()(DefaultComponent);
\ No newline at end of file
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.jsx
View file @ dd04561a
import React, { useState, useEffect} from 'react'; import React, { useState, useEffect } from 'react';
import { Row, Col, Tree, Card, Input, Tooltip} from 'antd'; import { Row, Col, Tree, Card, Input, Tooltip, Button } from 'antd';
import { import { FileAddTwoTone, EditTwoTone, DeleteTwoTone } from '@ant-design/icons';
FileAddTwoTone,
EditTwoTone,
DeleteTwoTone,
} from '@ant-design/icons';
import { PageContainer, GridContent } from '@ant-design/pro-layout'; 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 ListCard from '@/pages/orgnazation/ListCard';
import styles from '@/pages/userCenter/siteManage/SiteManage.less'; import styles from '@/pages/userCenter/siteManage/SiteManage.less';
import AddModal from './AddModal' import AddModal from './AddModal';
import DelModal from './DelModal' import DelModal from './DelModal';
import EditModal from './EditModal' import EditModal from './EditModal';
const { Search } = Input; const { Search } = Input;
const placeholder = '请输入人员姓名' const placeholder = '请输入人员姓名';
const SiteManage = ()=>{ const SiteManage = () => {
const [ treeData, setTreeData ] = useState([]) const [treeData, setTreeData] = useState([]);
const [ searchWord, setSearchWord] = useState( '') const [searchWord, setSearchWord] = useState('');
const [ ouid, setOuid ] = useState('') const [ouid, setOuid] = useState('');
const [saveTreeId, setSaveTreeId] = useState('')//保存点击回调的id const [saveTreeId, setSaveTreeId] = useState(''); // 保存点击回调的id
const [modalVisible, setModalVisible] = useState(false) //新增弹窗 const [modalVisible, setModalVisible] = useState(false); // 新增弹窗
const [flag, setFlag] = useState(1) const [flag, setFlag] = useState(1);
const [ stationId, setStationId] = useState('') //选择的站点 const [stationId, setStationId] = useState(''); // 选择的站点
const [ stationObj, setStationObj] = useState({}) //选择的站点 const [stationObj, setStationObj] = useState({}); // 选择的站点
const [delVisible, setDelVisible] = useState(false) //删除弹窗 const [delVisible, setDelVisible] = useState(false); // 删除弹窗
const [editVisible, setEditVisible] = useState(false) //修改弹窗 const [editVisible, setEditVisible] = useState(false); // 修改弹窗
const now = new Date().getTime() const now = new Date().getTime();
//点击树的回调 // 点击树的回调
const handleTreeSelect = (e) =>{ const handleTreeSelect = e => {
console.log(e) console.log(e);
let id = e[0] let id = e[0];
if(id){ if (id) {
setSaveTreeId(id) setSaveTreeId(id);
setOuid(id) setOuid(id);
}else{ } else {
setOuid(saveTreeId) setOuid(saveTreeId);
} }
} };
useEffect(()=>{ useEffect(() => {
getWebModuleTree({ getWebModuleTree({
userMode:"super", userMode: 'super',
select:'', select: '',
_version:9999, _version: 9999,
_dc:now , _dc: now,
node:-2 node: -2,
}).then(res =>{
let arr =[]
if(res){
arr.push( res.find(item =>{
return item.id==='Web4StationRoot'
}))
console.log(arr,'arr')
}
let arr2 = transTree(arr)
setTreeData(arr2)
}).catch(err =>{
console.error(err)
}) })
// getOUTree().then(res =>{ .then(res => {
// let arr = transTree(res) let arr = [];
// setTreeData(arr) if (res) {
// }).catch(err =>{ arr.push(res.find(item => item.id === 'Web4StationRoot'));
// console.error(err) console.log(arr, 'arr');
// }) }
},[flag]) let arr2 = transTree(arr);
const Title = (props) =>{ setTreeData(arr2);
const { text } = props })
return ( .catch(err => {
<div className={styles.treeTitle}> console.error(err);
});
}, [flag]);
const Title = props => {
const { text } = props;
return (
<div className={styles.treeTitle}>
{text} {text}
<div className={styles.titleBox}> <div className={styles.titleBox}>
<Tooltip title='新增站点'><FileAddTwoTone onClick={()=>{ handleAdd(props)}} /></Tooltip> <Tooltip title="新增站点">
<Tooltip title='编辑站点'><EditTwoTone onClick={()=>{ handleEdit(props)}} /></Tooltip> <FileAddTwoTone
<Tooltip title='删除站点'><DeleteTwoTone onClick={()=>{ handleDel(props)}}/></Tooltip> onClick={() => {
handleAdd(props);
}}
/>
</Tooltip>
<Tooltip title="编辑站点">
<EditTwoTone
onClick={() => {
handleEdit(props);
}}
/>
</Tooltip>
<Tooltip title="删除站点">
<DeleteTwoTone
onClick={() => {
handleDel(props);
}}
/>
</Tooltip>
</div> </div>
</div> </div>
) );
} };
const handleAdd = (e) =>{ const handleAdd = e => {
console.log(e) console.log(e);
setModalVisible(true) setModalVisible(true);
} };
//站点删除 // 站点删除
const handleDel = (e) =>{ const handleDel = e => {
setStationId(e.stationID) setStationId(e.stationID);
setDelVisible(true) setDelVisible(true);
} };
//编辑站点 // 编辑站点
const handleEdit =(e) =>{ const handleEdit = e => {
setStationObj(e) setStationObj(e);
setEditVisible(true) setEditVisible(true);
} };
//树形数据转换 // 树形数据转换
const transTree = (val) =>{ const transTree = val => {
let arr = val let arr = val;
return arr.map( item =>{ return arr.map((item, index) => {
item.title = Title(item) || item.text item.title = Title(item) || item.text;
item.key = item.id item.key = item.stationID || '';
// item.icon = (<img src={user_green} style={{marginBottom:'2px'}}/>) let obj = {};
let obj = {} if (Array.isArray(item.children) && item.children.length > 0) {
if(Array.isArray(item.children) && item.children.length > 0){ transTree(item.children);
transTree(item.children) obj = item;
return obj = item return obj;
}else{
return item
} }
}) return item;
} });
//获取搜索框的值 };
const handleSearch = (value) =>{ // 获取搜索框的值
setSearchWord(value) const handleSearch = value => {
} setSearchWord(value);
const confirmModal = (e) =>{ };
setModalVisible(false) const confirmModal = e => {
setFlag(flag+1) setModalVisible(false);
} setFlag(flag + 1);
const delModal = ()=>{ };
setDelVisible(false) const delModal = () => {
setFlag(flag+1) setDelVisible(false);
} setFlag(flag + 1);
const editModal = () =>{ };
setEditVisible(false) const editModal = () => {
setFlag(flag+1) setEditVisible(false);
} setFlag(flag + 1);
};
const valueCallback = props => {
console.log(props);
};
return ( return (
<PageContainer> <PageContainer>
<GridContent> <GridContent>
<Row gutter={12}> <Row gutter={12}>
<Col lg={6} md={24}> <Col lg={6} md={24}>
<Card className={ styles.cardBox}> <Card className={styles.cardBox}>
<Tree <Tree
showLine={{showLeafIcon:false}} showLine={{ showLeafIcon: false }}
showIcon showIcon
onSelect={(e)=> handleTreeSelect(e)} onSelect={e => handleTreeSelect(e)}
treeData={treeData} treeData={treeData}
/> />
<AddModal <AddModal
visible = {modalVisible} visible={modalVisible}
onCancel={() => setModalVisible(false)} onCancel={() => setModalVisible(false)}
confirmModal={confirmModal} confirmModal={confirmModal}
/>
<DelModal
visible={delVisible}
stationId={stationId}
onCancel={() => setDelVisible(false)}
confirmModal={delModal}
/> />
<DelModal
visible={delVisible}
stationId={stationId}
onCancel={() => setDelVisible(false)}
confirmModal = { delModal}/>
<EditModal <EditModal
visible={editVisible} visible={editVisible}
stationObj={stationObj} stationObj={stationObj}
onCancel={() => setEditVisible(false)} onCancel={() => setEditVisible(false)}
confirmModal = { editModal} confirmModal={editModal}
/> />
</Card> </Card>
</Col> </Col>
<Col lg={18} md={24}> <Col lg={18} md={24}>
<Card className={ styles.cardBox}> <Card className={styles.cardBox}>
<Row align='middle'> <Row align="middle">
<Col span={1}>搜索</Col> <Col span={1}>搜索</Col>
<Col span={ 8}> <Col span={8}>
<Search <Search
allowClear allowClear
placeholder = {placeholder} placeholder={placeholder}
onSearch = { handleSearch} onSearch={handleSearch}
enterButton enterButton
/> />
</Col> </Col>
</Row> </Row>
{ ouid && <ListCard ouid={ouid} searchWord = { searchWord }></ListCard>} {ouid && (
<ListCard
ouid={ouid}
searchWord={searchWord}
valueCallback={valueCallback}
/>
)}
</Card> </Card>
</Col> </Col>
</Row> </Row>
</GridContent> </GridContent>
</PageContainer> </PageContainer>
) );
} };
export default SiteManage export default SiteManage;
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