diff --git a/src/components/user-picker/UserPicker.tsx b/src/components/user-picker/UserPicker.tsx index ce492ae..e849ac2 100644 --- a/src/components/user-picker/UserPicker.tsx +++ b/src/components/user-picker/UserPicker.tsx @@ -1,4 +1,4 @@ -import { Button, Input, Modal, ModalProps, Select, SelectProps, Spin } from 'antd' +import { Button, Input, Modal, ModalProps, Select, SelectProps, Spin, Tag } from 'antd' import { memo, ReactNode, useEffect, useRef, useState } from 'react' import { Flexbox } from 'react-layout-kit' import { useStyle } from './style.ts' @@ -15,7 +15,9 @@ export interface UserSelectProps extends SelectProps { value?: any[] onChange?: (value: any[]) => void //多选 - multiple?: boolean + multiple?: boolean, + renderValue?: (value: any[], def: ReactNode) => ReactNode + } export interface UserModelProps extends Pick { @@ -25,6 +27,8 @@ export interface UserModelProps extends Pick { //多选 multiple?: boolean + renderValue?: (value: any[], def: ReactNode) => ReactNode + } export type UserPickerProps = @@ -59,7 +63,7 @@ const UserModel = memo(({ multiple, children, value, onChange, ...props }: UserM const { data: users, isPending } = useAtomValue(userListAtom) const [ open, setOpen ] = useState(false) const selectUserRef = useRef([]) - const [, update ] = useState({}) + const [ , update ] = useState({}) useEffect(() => { if (value === undefined) return @@ -89,13 +93,33 @@ const UserModel = memo(({ multiple, children, value, onChange, ...props }: UserM const renderTarget = () => { return setOpen(true)}> - {children ?? } + {children ?? } } + const renderValue = () => { + const dom = selectUserRef.current?.map(user => { + return { + const newVal = innerValue?.filter(val => val !== user.id) + setValue(newVal) + onChange?.(newVal) + }}>{user.name} + }) + if (props.renderValue) { + return props.renderValue(selectUserRef.current, dom) + } + return dom + } + return ( <> - {renderTarget()} +
+ {renderTarget()} +
+
+ {renderValue()} +
+ { padding: 8px; ` + const values = css` + margin-top: 10px; + ` + return { container: cx(prefix), + values, modal, usersPanel, draggablePanel, diff --git a/src/pages/system/departments/index.tsx b/src/pages/system/departments/index.tsx index e558ecb..3f6f384 100644 --- a/src/pages/system/departments/index.tsx +++ b/src/pages/system/departments/index.tsx @@ -1,6 +1,4 @@ -import { PageContainer, ProCard } from '@ant-design/pro-components' -import { Flexbox } from 'react-layout-kit' -import { DraggablePanel } from '@/components/draggable-panel' +import { ProCard } from '@ant-design/pro-components' import { useTranslation } from '@/i18n.ts' import { useStyle } from './style.ts' import DepartmentTree from './components/DepartmentTree.tsx' @@ -115,7 +113,7 @@ const Departments = () => { - +