import React, { useState, useEffect, useCallback, useRef } from 'react'; import { Modal, Input, Button, message, Spin, Pagination, Table, Tooltip, Space } from 'antd'; import { GetGroupUserTree } from '@/services/messagemanage/messagemanage'; import { getStationUsers, chooseUserToStation } from '@/services/siteManage/api'; import { DeleteOutlined } from '@ant-design/icons'; import styles from './SelectUser.less'; import CardCheck from './CardCheck'; const NewSelectUser = props => { const { confirmModal, onCancel, visible, itemObj } = props; const [allList, setAllist] = useState([]); // 用于展示得数据 const [checkList, setCheckList] = useState([]); // 选中得数据集合 const [loading, setLoading] = useState(false); const [total, setTotal] = useState(); const [currentPage, setCurrentPage] = useState(1); const [pageSize, setPageSize] = useState(10); const [searchName, setSearchName] = useState(); const [deleKey, setDeleKey] = useState(); // 删除用户的key值 const [delFlag, setDelFlag] = useState(0); // 删除标识每次删除后加一 useEffect(() => { console.log(itemObj); console.log(visible); setCheckList([]); setSearchName(''); setCurrentPage(1); getInitialData(); // getData(searchName, 1, pageSize); }, [itemObj]); // 选中后得回调函数 const checkCallBack = useCallback(newCheckList => { if (newCheckList) { setCheckList(newCheckList); } }); // 监听分页 const paginationChange = (page, pageSizes) => { setCurrentPage(page); setPageSize(pageSizes); getData(searchName, page, pageSizes); }; // 获取初始数据 const getInitialData = () => { console.log(itemObj); let p1 = getStationUsers({ stationId: itemObj.roleID }); let p2 = GetGroupUserTree({ key: '', pageSize: 10, PageIndex: 1, }); setLoading(true); Promise.all([p1, p2]).then(res => { setLoading(false); if (res[0].code === 0 && res[1].code === 0) { setTotal(res[1].data.count); let listCheck = res[0].data.map(item => ({ label: item.userName, value: item.userID, groupName: item.OUName, })); console.log(listCheck, 'listCheck'); setCheckList(listCheck); // 数据处理成checkbox组件需要得形式 let list = res[1].data.data.map(item => { let indeterminate = false; let checkedList = []; let checkAll = false; let options = item.users.map(val => { listCheck.forEach(ele => { if (val.userId === ele.value) { checkedList.push(ele.value); } }); return { label: val.userName, value: val.userId, groupName: item.groupName, level: item.level, }; }); if (checkedList.length === options.length && checkedList.length > 0) { checkAll = true; } if (checkedList.length < options.length && checkedList.length > 0) { indeterminate = true; } return { groupName: item.groupName, level: item.level, groupId: item.groupId, indeterminate, checkAll, checkedList, plainOptions: options, }; }); setAllist(list); } // else if (res[0].code !== 0) { // message.error(res[0].msg); // } else { // message.error(res[1].msg); // } }); }; // 提交勾选人员 const onFinish = () => { chooseUserToStation({ userList: String(checkList.map(item => item.value)), stationID: itemObj.roleID, }) .then(res => { if (res.code === 0) { // confirmModal(); message.success('关联成功'); } else { message.error(res.msg); } }) .catch(() => { message.error('网络异常,请稍后再试'); }); }; // 搜索 const onSearch = () => { setCurrentPage(1); getData(searchName, 1, pageSize); }; // 重置 const onReset = () => { setCurrentPage(1); getData('', 1, pageSize); setSearchName(''); }; // 搜索框监听 const searchChange = e => { setSearchName(e.target.value); }; // 获取数据 const getData = (username, page, pageSizes) => { setLoading(true); GetGroupUserTree({ key: username, pageSize: pageSizes, PageIndex: page, }) .then(res => { setLoading(false); if (res.code === 0) { setTotal(res.data.count); // 数据处理成checkbox组件需要得形式 let list = res.data.data.map(item => { let indeterminate = false; let checkedList = []; let checkAll = false; let options = item.users.map(val => { checkList.forEach(ele => { if (val.userId === ele.value) { checkedList.push(ele.value); } }); return { label: val.userName, value: val.userId, groupName: item.groupName, level: item.level, }; }); if (checkedList.length === options.length && checkedList.length > 0) { checkAll = true; } if (checkedList.length < options.length && checkedList.length > 0) { indeterminate = true; } return { groupName: item.groupName, level: item.level, groupId: item.groupId, indeterminate, checkAll, checkedList, plainOptions: options, }; }); setAllist(list); } else { message.error(res.msg); } }) .catch(() => { setLoading(false); message.error('网络异常,请稍后再试'); }); }; // 删除角色 const deleteRol = key => { const dataSource = [...checkList]; setCheckList(dataSource.filter(item => item.value !== key)); setDeleKey(key); setDelFlag(delFlag + 1); }; const columns = [ { title: '已选用户', dataIndex: 'label', key: 'label', width: 220, ellipsis: { showTitle: true, }, render: (text, record) => ( <span> <Tooltip placement="topLeft" title={`${record.label}(${record.groupName})`}> {record.label}({record.groupName}) </Tooltip> </span> ), }, { title: '操作', align: 'center', ellipsis: true, width: 80, render: record => ( <> <Space> <Tooltip title="清除关联用户"> <DeleteOutlined onClick={() => deleteRol(record.value)} style={{ fontSize: '16px', color: '#e86060' }} /> </Tooltip> </Space> </> ), }, ]; return ( <> {/* <Modal title="关联用户" visible={visible} onOk={onFinish} width="900px" onCancel={onCancel} maskClosable={false} destroyOnClose centered > */} {/* 头部搜索框 */} <div className={styles.searchHeader}> <Input.Search value={searchName} placeholder="请输入部门或用户" onChange={searchChange} onSearch={onSearch} enterButton style={{ width: '300px', marginRight: '15px' }} allowClear /> <Button onClick={onFinish} type="primary" htmlType="submit"> 提交 </Button> </div> <div className={styles.pushTestContent}> <div className={styles.leftContent}> {/* 复选框模块 */} <div className={styles.checkScrollBox}> <Spin spinning={loading}> <div className={styles.checkContainer}> {allList.map((item, index) => ( <div className={styles.checkBoxContent} key={item.groupId}> <CardCheck cardMsg={item} cardIndex={index} callback={(val, newCheckList) => checkCallBack(val, newCheckList)} checkList={checkList} deleKey={deleKey} delFlag={delFlag} /> </div> ))} </div> </Spin> </div> </div> <div className={styles.tableRight}> <Table bordered style={{ width: '400px', height: '100%' }} rowKey={record => record.value} columns={columns} dataSource={checkList} pagination={false} size="small" scroll={{ y: 'calc(100% - 40px)' }} /> </div> </div> {/* 分页 */} <Pagination total={total} showTotal={(totals, range) => `第${range[0]}-${range[1]} 条/共 ${totals} 条`} defaultPageSize={pageSize} pageSizeOptions={[10, 20]} defaultCurrent={1} current={currentPage} onChange={paginationChange} style={{ marginBottom: '10px', width: '70%' }} size="small" showQuickJumper /> {/* </Modal> */} </> ); }; export default NewSelectUser;