PL姐姐的成果

import React, { useRef, useEffect, useState, forwardRef } from 'react'; import { CloseCircleFilled, MoreOutlined, PlusOutlined, } from '@ant-design/icons'; import { Badge, Avatar, Button, Tooltip } from 'antd'; import SelectModal from './SelectModal'; //添加删除审批人显示个数组件 const MyBadge = (props) => { const { objArr, setObjList, free } = props; //点击删除一个 const delOne = (k) => { const res = objArr.filter((_item, index) => index !== k); setObjList(res); }; return ( <> {objArr.map((item, index) => ( <span key={index}> <Tooltip title={item.user_name + '-' + item.department_name}> <Badge count={ free ? ( <CloseCircleFilled style={{ cursor: 'pointer' }} onClick={() => delOne(index)} /> ) : null } > <Avatar shape="square" size="large"> {item.user_name} </Avatar> </Badge> </Tooltip> <MoreOutlined rotate={90} style={{ marginLeft: 8, marginRight: 8, color: '#ccc' }} // onClick={() => getState('aaaaa')} /> </span> ))} </> ); }; const App = (props, _ref) => { const selectModalRef = useRef(); const { onChange, selected, noFixed } = props; const free = noFixed ? false : true; const [objList, setObjList] = useState([]); // function triggleCreate() { selectModalRef.current.showModal(); } function handleSubmit(item) { const ind = objList.findIndex(function (elem) { return elem.uid === item.uid; }); if (ind === -1) { setObjList((prevState) => [...prevState, item]); } } useEffect(() => { if (onChange) { const uids = objList.map((item, index) => item.uid); onChange(uids, objList); } }, [objList]); useEffect(() => { //是否设置了已选择的审批人 if (selected && selected.toString() != '') { setObjList(selected); } }, [selected]); return ( <> <SelectModal onSubmit={handleSubmit} ref={selectModalRef} /> <MyBadge objArr={objList} setObjList={setObjList} free={free} /> {free && ( <Button type="dashed" style={{ width: 40, height: 40, position: 'relative', top: 2, color: '#ccc', }} icon={<PlusOutlined />} onClick={triggleCreate} ></Button> )} </> ); }; export default forwardRef(App); import React, { useState, useRef, forwardRef, useImperativeHandle, useMemo, useEffect, } from 'react'; import { AppstoreOutlined } from '@ant-design/icons'; import { Modal, Menu, Row, Col, Radio, Input, Empty } from 'antd'; import * as Service from './service'; import styles from './styles'; // 获取部门 const useDepartments = () => { const [departments, setDepartments] = useState([]); useEffect(() => { Service.queryDepartments().then((data) => { const { list } = data; setDepartments(list); }); }, []); return departments; }; const radioStyle = { display: 'block', height: '28px', lineHeight: '28px', }; const ModalApp = (props, ref) => { const modalRef = useRef(); const [visible, setVisible] = useState(false); const departments = useDepartments(); const [users, setUsers] = useState([]); const [keyword, setKeyword] = useState(); const [depart, setDepart] = useState(''); //成员的整个对象 const fetchDepartments = React.useCallback(async () => { const { list } = await Service.queryUsers(); setUsers(list); }, []); useEffect(() => { fetchDepartments(); }, [fetchDepartments]); const filteredUsers = useMemo(() => { if (!keyword) { return users; } else { return users.filter((user) => user.user_name.toLowerCase().includes(keyword.toLowerCase()) ); } }, [keyword, users]); function showModal() { setVisible(true); } function hideModal() { setVisible(false); } //切换员工 function changeEmploy(name, user) { setDepart(user); } //确定 function handleSubmit() { const { onSubmit } = props; onSubmit(depart); setVisible(false); } //搜索 function handleKeyword(e) { const { value } = e.target; setKeyword(value); } async function handleSelect(e) { const { key } = e; if (key === 'all') { fetchDepartments(); } else { const { list } = await Service.queryUsersByDepartment(key); setUsers(list); } } useImperativeHandle(ref, () => ({ showModal, hideModal, })); return ( <Modal destroyOnClose ref={modalRef} onOk={handleSubmit} onCancel={hideModal} title="请选择" visible={visible} width={600} bodyStyle={{ padding: 8 }} > <Row style={{ display: 'flex' }}> <Col> <Menu style={{ width: 256 }} mode="vertical" onClick={handleSelect}> <Menu.Item key="all" className={styles['menu-item']}> <span> <AppstoreOutlined /> <span>全部</span> </span> </Menu.Item> {departments.map((item) => ( <Menu.Item key={item.did} className={styles['menu-item']}> <span> <AppstoreOutlined /> <span>{item.name}</span> </span> </Menu.Item> ))} </Menu> </Col> <Col style={{ paddingLeft: 8, flex: 1 }}> <Input placeholder="Search" style={{ marginBottom: 8 }} onChange={handleKeyword} /> {filteredUsers.length === 0 && ( <section style={{ display: 'flex', justifyContent: 'center' }}> <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> </section> )} <Radio.Group style={{ width: '100%' }}> {filteredUsers.map((user) => { return ( <Radio style={radioStyle} value={user.uid} key={user.uid} onChange={() => changeEmploy(user.user_name, user)} > {user.user_name} </Radio> ); })} </Radio.Group> </Col> </Row> </Modal> ); }; export default forwardRef(ModalApp);