成员选择器优化，显示选中值

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<ModalProps, 'open'> {
@@ -25,6 +27,8 @@ export interface UserModelProps extends Pick<ModalProps, 'open'> {
     //多选
     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<IUser[]>([])
-    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 <span onClick={() => setOpen(true)}>
-            {children ?? <Button type={'primary'}>{t('component.UserPicker.targetText', '选择成员')}</Button>}
+            {children ?? <Button type={'primary'} >{t('component.UserPicker.targetText', '选择成员')}</Button>}
         </span>
     }
 
+    const renderValue = () => {
+        const dom = selectUserRef.current?.map(user => {
+            return <Tag key={user.id} color={'blue'} closable onClose={() => {
+                const newVal = innerValue?.filter(val => val !== user.id)
+                setValue(newVal)
+                onChange?.(newVal)
+            }}>{user.name}</Tag>
+        })
+        if (props.renderValue) {
+            return props.renderValue(selectUserRef.current, dom)
+        }
+        return dom
+    }
+
     return (
             <>
-                {renderTarget()}
+                <div>
+                    {renderTarget()}
+                </div>
+                <div className={styles.values}>
+                    {renderValue()}
+                </div>
+
                 <Modal
                         className={styles.modal}
                         title={t('component.UserPicker.title', '成员选择')}

src/components/user-picker/style.ts

@@ -80,8 +80,13 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
     padding: 8px;
   `
 
+  const values = css`
+    margin-top: 10px;
+  `
+
   return {
     container: cx(prefix),
+    values,
     modal,
     usersPanel,
     draggablePanel,

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 = () => {
                             </Form.Item>
                             <Form.Item label={t('system.departments.form.manager_user_id', '负责人')}
                                        name={'manager_user_id'}>
-                                <UserPicker/>
+                                <UserPicker />
                             </Form.Item>
 
                             <Form.Item label={t('system.departments.form.phone', '联系电话')}