import React,{ useState, useEffect, } from 'react' import { Card, TreeSelect, Space, Button, Table, Input, Row, Col } from 'antd'; import { PageContainer } from '@ant-design/pro-layout'; import { connect } from 'react-redux'; import TestModal from './ModalComponent'; import ListCard from './ListCard'; import { get, post } from '../../services'; import { orgGet,orgTest } from '../../services/orgnazation/api' import styles from './DefaultComponent.less' const { Search } = Input const { TreeNode } = TreeSelect; // const treeData = [ // { // title: 'Node1', // value: '0-0', // children: [ // { // title: 'Child Node1', // value: '0-0-1', // }, // { // title: 'Child Node2', // value: '0-0-2', // }, // ], // }, // { // title: 'Node2', // value: '0-1', // }, // ]; const DefaultComponent = ()=> { const [treeValue, setTreeValue] = useState(null)//树节点选中的值 const [tableData, setTableData] = useState([]) //table的值 const [selectedRowKeys, setSelectedRowKeys] = useState([]) //table表格checkbox配置 const [modalVisible, setModalVisible] = useState(false) //展示Modal弹窗 const [testPeoList, setTestPeoList] = useState([]) //测试card数组 const [treeData, setTreeData] = useState([]) //树节点选中的值 const treeChange = (e) =>{ setTreeValue(e) } //用户搜索 const handleSearch = ()=>{ console.log('handleSearch') setModalVisible(true) } //导入 const handleImport = () =>{ setModalVisible(true) } //搜索框时间 const inputSearch = (e) =>{ console.log(e,'inputSearch') } const columns = [ { title:'用户ID', dataIndex:"userID", key:'userID' }, { title:'登录名', dataIndex:'loginName', key:'loginName' }, { title:'用户姓名', dataIndex:'userName', key:'userName', }, { title:'手机号码', dataIndex:'phone', key:'phone' }, { title:'钉钉账户', dataIndex:'ddid', key:'ddid', }, { title:'微信账户', dataIndex:'wxid', key:'wxid', ellipsis: true, } ] useEffect( ()=>{ orgGet().then(res =>{ console.log(res,'orgGet') if(res){ let arr = transTree(res) console.log(transTree(res),'arr') setTreeData(arr) } }) },[]) //处理返回的树形结构 const transTree = (value,isChild=false) =>{ let arr = value if(arr.length< 0){ return } let obj = {} return arr.map( item =>{ // item.title = item.text // item.value = item.id // if( item.children && item.children.length > 0){ // transTree(item.children) // return obj=item // }else{ // return item // } if(isChild){ item.title = item.userName item.value = item.userID }else{ item.title = item.text item.value = item.id } if( item.children && item.children.length > 0){ transTree(item.children,false) return obj=item }else{ return item } }) } useEffect( () =>{ get('/Cityinterface/rest/services/OMS.svc/U_GetOneOUUserListNew',{ OUID:24, _version:9999, _dc:new Date().getTime() }).then(res =>{ if(res.success){ setTableData(res.root) } }) const testData =[] const test2list = [] for( let i=1; i<10 ; i++){ testData.push({ key:i, ID:i }) test2list.push({ label:i+"测试", value:i+"测试", }) } console.log(test2list) setTestPeoList(test2list) },[]) //table选中框的值 const selectChange = (e) =>{ console.log(e,'e') setSelectedRowKeys(e) } const confirmModal = () =>{ setModalVisible(false) } //table复选的配置 const rowSelection ={ selectedRowKeys, onChange:selectChange, } const btnLable = [ {label:'查找用户',handle:handleSearch ,config:{ type:'primary',danger:true} }, {label:'用户导入',handle:handleImport,config:{ type:'info',}}, <<<<<<< Updated upstream ======= {label:'新建用户',handle:'newHandle'}, {label:'批量关联',handle:'relHandle'} >>>>>>> Stashed changes ] return ( <> <PageContainer> <Card> <Row> <<<<<<< Updated upstream <Col span ={1}> ======= <Col span ={2}> >>>>>>> Stashed changes <div style={{height:"30px",lineHeight:"30px"}}> 机构选择 </div> </Col> <Col span={12}> <TreeSelect style={{"width":"50%"}} treeData={treeData} value={treeValue} onChange={ (e) => { treeChange(e)}} /> </Col> <Col span={ 8}> {/* <Search placeholder="请输入" onSearch={(e) =>{inputSearch(e)}} style={{ width: "50%" }} enterButton /> */} </Col> </Row> <<<<<<< Updated upstream <div style={{marginTop:'20px',textAlign:'center'}}> <Space> { btnLable && btnLable.map( (item,index) => { const { config} =item return ( <Button key={index} {...config} onClick ={ ()=>{ item.handle && typeof item.handle === 'function' && item.handle()}}>{item.label}</Button> ) }) } </Space> </div> ======= </Card> <Card> <Space> { btnLable && btnLable.map( (item,index) => { const { config} =item return ( <Button key={index} {...config} onClick ={ ()=>{ item.handle && typeof item.handle === 'function' && item.handle()}}>{item.label}</Button> ) }) } </Space> >>>>>>> Stashed changes <TestModal title='用户选择' visible = {modalVisible} maskClosable onOk={() => confirmModal()} onCancel={() => setModalVisible(false)} bodyStyle ={{width:"100%",height:"100%",}} style= {{top:20}} width="1000px" destroyOnClose={true} cancelText='取消' okText='确认选择' > <ListCard optionsList ={testPeoList}></ListCard> </TestModal> </Card> <Card className={styles.mgTop20}> <div classNam={styles.tableTitle}>一般用户的用户列表</div> <Table className={styles.mgTop20} rowSelection={rowSelection} columns={columns} dataSource ={tableData} bordered rowKey='userID' scroll={{y:400}} ></Table> </Card> </PageContainer> </> ) } export default connect()(DefaultComponent)