import React, { useState, useEffect } from 'react'; import { Card, TreeSelect, Space, Button, Table, Input, Row, Col } from 'antd'; import PageContainer from '@/components/BasePageContainer'; import { connect } from 'react-redux'; import TestModal from './ModalComponent'; import ListCard from './ListCard'; import { get, post, CITY_SERVICE } 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 => { 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); } return item; }); }; useEffect(() => { get('${CITY_SERVICE}/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' } }, ]; return ( <> <PageContainer> <Card> <Row> <Col span={1}> <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} /> </Row> <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> <TestModal title="用户选择" visible={modalVisible} maskClosable onOk={() => confirmModal()} onCancel={() => setModalVisible(false)} bodyStyle={{ width: '100%', height: '100%' }} style={{ top: 20 }} width="1000px" destroyOnClose cancelText="取消" okText="确认选择" > <ListCard optionsList={testPeoList} /> </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 }} /> </Card> </PageContainer> </> ); }; export default connect()(DefaultComponent);