cx-chat 0.0.1

package/src/components/common/modal/dep-user-select-multi.tsx

@@ -0,0 +1,324 @@
+// i18n 中文：locales/zh/common.ts（common.selectTable · 部门树 + 多选用户）
+
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { TreeSelectTableMulti } from '@/components/table-view'
+import { useToast } from '@/contexts/ToastContext'
+import { CxModal, useCxModal } from '@cx-ui'
+
+import {
+  pickUserId,
+  useDepUserSelectPageConfig,
+  type DepUserSelectUser,
+} from './dep-user-select'
+
+export { pickUserId } from './dep-user-select'
+export type { DepUserSelectUser } from './dep-user-select'
+
+export type DepUserSelectMultiKind = 'user' | 'dept'
+
+export type DepUserSelectMultiPicked = {
+  kind: DepUserSelectMultiKind
+  id: string | number
+  name?: string
+  email?: string
+}
+
+/** open(...) 入参；context 由业务传入，确认时原样回传 onOk */
+export type DepUserSelectMultiOpenPayload = {
+  title?: string
+  /** 是否允许勾选部门 */
+  deptSelectable?: boolean
+  context?: Record<string, any>
+}
+
+export type DepUserSelectMultiColumn = {
+  title?: ReactNode
+  key?: string
+  width?: number
+  render?: (value: unknown, row: DepUserSelectUser) => ReactNode
+}
+
+type DepUserSelectMultiModalProps = {
+  onAfterOk?: () => void | Promise<void>
+  onOk?: (data: {
+    users: DepUserSelectUser[]
+    deptIds: (string | number)[]
+    picked: DepUserSelectMultiPicked[]
+    payload?: DepUserSelectMultiOpenPayload
+  }) => boolean | void | Promise<boolean | void>
+  /** 用户列表列；不传则默认成员头像列 */
+  userColumns?: DepUserSelectMultiColumn[]
+  /** 已选面板列；不传则与 userColumns 相同 */
+  selectedPanelColumns?: DepUserSelectMultiColumn[]
+  /** 已选用户变更（便于业务侧同步扩展状态，如权限勾选） */
+  onUsersChange?: (users: DepUserSelectUser[]) => void
+  /**
+   * 确认前校验；返回 i18n 键则 toast 并阻止提交，返回 null 表示通过。
+   * 不传则：不可选部门时至少一名用户；可选部门时至少一名用户或一个部门。
+   */
+  onValidate?: (data: {
+    users: DepUserSelectUser[]
+    deptIds: (string | number)[]
+    payload?: DepUserSelectMultiOpenPayload
+  }) => string | null
+  opeType?: string
+  rootClassName?: string
+  width?: number
+}
+
+/** 默认成员列（头像 + 姓名 + 邮箱） */
+export function useDefaultDepUserMemberColumns(): DepUserSelectMultiColumn[] {
+  return useMemo(
+    () => [
+      {
+        title: 'system.department.fields.member',
+        key: 'member',
+        render: (_: unknown, data: DepUserSelectUser) => {
+          const name = data.display_name ?? data.userName ?? data.name
+          const mail = data.email ?? data.userEmail
+          return (
+            <div className="flex items-center gap-3">
+              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 text-sm font-bold uppercase text-blue-600 dark:bg-blue-900/30 dark:text-blue-400">
+                {name?.[0] || mail?.[0] || '?'}
+              </div>
+              <div>
+                <div className="text-sm font-medium text-gray-900 dark:text-white">
+                  {name ?? mail ?? '—'}
+                </div>
+                <div className="text-xs text-gray-500 dark:text-gray-400">{mail ?? ''}</div>
+              </div>
+            </div>
+          )
+        },
+      },
+    ],
+    [],
+  )
+}
+
+const DepUserSelectMultiModal = forwardRef(function DepUserSelectMultiModal(
+  props: DepUserSelectMultiModalProps,
+  ref,
+) {
+  const {
+    onAfterOk,
+    onOk,
+    userColumns: userColumnsProp,
+    selectedPanelColumns: selectedPanelColumnsProp,
+    onUsersChange,
+    onValidate,
+    opeType = 'select',
+    rootClassName = 'cx-modal-dep-user-select-multi',
+    width = 1340,
+  } = props
+  const { t } = useTranslation()
+  const { showToast } = useToast()
+
+  const defaultUserColumns = useDefaultDepUserMemberColumns()
+  const userColumns = userColumnsProp ?? defaultUserColumns
+  const selectedPanelColumns = selectedPanelColumnsProp ?? userColumns
+
+  const [payload, setPayload] = useState<DepUserSelectMultiOpenPayload | undefined>(undefined)
+  const payloadRef = useRef<DepUserSelectMultiOpenPayload | undefined>(undefined)
+  const [checkedDeptKeys, setCheckedDeptKeys] = useState<Set<string>>(() => new Set())
+  const [selectedUsers, setSelectedUsers] = useState<DepUserSelectUser[]>([])
+  const [submitting, setSubmitting] = useState(false)
+
+  const modal = useCxModal({
+    onOpen: (p) => {
+      const nextPayload = ((p as any) ?? {}) as DepUserSelectMultiOpenPayload
+      payloadRef.current = nextPayload
+      setPayload(nextPayload)
+      setCheckedDeptKeys(new Set())
+      setSelectedUsers([])
+      onUsersChange?.([])
+    },
+  })
+
+  const { isOpen, close } = modal
+  const effectivePayload = payload ?? payloadRef.current
+  const deptSelectable = effectivePayload?.deptSelectable === true
+  const title =
+    effectivePayload?.title ?? t('common.selectTable.single_tree_default_title') // 选择用户
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: modal.open,
+      close,
+    }),
+    [modal.open, close],
+  )
+
+  const pageConfigWithTree = useDepUserSelectPageConfig()
+
+  const handleDeptCheck = useCallback((key: any, checked: boolean) => {
+    const k = String(key)
+    setCheckedDeptKeys((prev) => {
+      const next = new Set(prev)
+      if (checked) next.add(k)
+      else next.delete(k)
+      return next
+    })
+  }, [])
+
+  const handleUsersChange = useCallback(
+    (next: DepUserSelectUser[]) => {
+      setSelectedUsers(next)
+      onUsersChange?.(next)
+    },
+    [onUsersChange],
+  )
+
+  const buildPicked = useCallback(
+    (users: DepUserSelectUser[], deptIds: (string | number)[]): DepUserSelectMultiPicked[] => {
+      return [
+        ...deptIds.map((id) => ({ kind: 'dept' as const, id })),
+        ...users
+          .map((u) => {
+            const id = pickUserId(u)
+            if (id == null) return null
+            return {
+              kind: 'user' as const,
+              id,
+              name: u?.display_name ?? u?.name ?? u?.userName,
+              email: u?.email ?? u?.userEmail,
+            }
+          })
+          .filter(Boolean),
+      ] as DepUserSelectMultiPicked[]
+    },
+    [],
+  )
+
+  const handleConfirm = useCallback(async () => {
+    const users = selectedUsers
+    const deptIds = Array.from(checkedDeptKeys)
+    const currentPayload = payload ?? payloadRef.current
+
+    const validateKey =
+      onValidate?.({ users, deptIds, payload: currentPayload }) ??
+      (() => {
+        const hasUser = users.length > 0
+        const hasDept = deptIds.length > 0
+        if (deptSelectable) {
+          if (!hasUser && !hasDept) return 'common.selectTable.multi_tree_pick_user_or_dept_required'
+        } else if (!hasUser) {
+          return 'common.selectTable.multi_tree_pick_user_required'
+        }
+        return null
+      })()
+
+    if (validateKey) {
+      showToast(t(validateKey), 'error')
+      return
+    }
+
+    setSubmitting(true)
+    try {
+      const picked = buildPicked(users, deptIds)
+      const result = await onOk?.({
+        users,
+        deptIds,
+        picked,
+        payload: currentPayload,
+      })
+      if (result === false) return
+      await onAfterOk?.()
+      close()
+    } catch {
+      // 业务 onOk 抛错：不关闭
+    } finally {
+      setSubmitting(false)
+    }
+  }, [
+    buildPicked,
+    checkedDeptKeys,
+    close,
+    deptSelectable,
+    onAfterOk,
+    onOk,
+    onValidate,
+    payload,
+    selectedUsers,
+    showToast,
+    t,
+  ])
+
+  const modalBody = isOpen ? (
+    <TreeSelectTableMulti.Horizontal
+      key={deptSelectable ? 'dept' : 'user'}
+      leftWidth="45%"
+      className="min-h-0 flex-1"
+      columns={userColumns as any}
+      pageConfig={pageConfigWithTree}
+      rowKey="userId"
+      treeCheckable={deptSelectable}
+      treeCheckedKeys={checkedDeptKeys}
+      onTreeCheck={(key, checked) => handleDeptCheck(key, checked)}
+      treeRenderLabel={(node: any) => node?.name ?? node?.title ?? '-'}
+      selectedPanelTitleKey="selectTable.selected_panel"
+      selectedPanelColumns={selectedPanelColumns as any}
+      value={selectedUsers}
+      onChange={(next) => handleUsersChange(Array.isArray(next) ? next : [])}
+    />
+  ) : null
+
+  const modalConfig = {
+    width,
+    rootClassName,
+    styles: {
+      container: { height: '95vh', maxHeight: '95vh' },
+      body: {
+        display: 'flex',
+        flexDirection: 'column',
+        flex: '1 1 0%',
+        minHeight: 0,
+        overflowY: 'hidden',
+        overflowX: 'hidden',
+        padding: 0,
+        maxHeight: 'none',
+      },
+    },
+  }
+
+  if (opeType === 'add') {
+    return (
+      <CxModal
+        title={title}
+        isOpen={isOpen}
+        onClose={close}
+        opeType="add"
+        onSubmit={handleConfirm}
+        submitting={submitting}
+        modalConfig={modalConfig}>
+        {modalBody}
+      </CxModal>
+    )
+  }
+
+  return (
+    <CxModal
+      title={title}
+      isOpen={isOpen}
+      onClose={close}
+      opeType="select"
+      onOk={handleConfirm}
+      submitting={submitting}
+      modalConfig={modalConfig}>
+      {modalBody}
+    </CxModal>
+  )
+})
+
+export default DepUserSelectMultiModal

package/src/components/common/modal/dep-user-select.tsx

@@ -0,0 +1,249 @@
+// i18n 中文：locales/zh/common.ts（common.selectTable · 部门树 + 单选用户）
+
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { getDepartmentTreeAPI, getDepartmentUsersAPI } from '@/api/system/department'
+import { TreeSelectTableSingle, createSelectTableConfig } from '@/components/table-view'
+import { useToast } from '@/contexts/ToastContext'
+import { CxModal, useCxModal } from '@cx-ui'
+
+export type DepUserSelectUser = {
+  id?: string | number
+  user_id?: string | number
+  userId?: string | number
+  name?: string
+  userName?: string
+  display_name?: string
+  email?: string
+  userEmail?: string
+  status?: number
+}
+
+/** open(...) 入参；context 由业务传入，确认时原样回传 onOk */
+export type DepUserSelectOpenPayload = {
+  title?: string
+  excludeUserId?: string | number | null
+  context?: Record<string, any>
+}
+
+type DepUserSelectModalProps = {
+  onAfterAdd?: () => void | Promise<void>
+  onOk?: (data: {
+    user: DepUserSelectUser
+    userId: string
+    payload: DepUserSelectOpenPayload | undefined
+  }) => boolean | void | Promise<boolean | void>
+}
+
+export function pickUserId(u: DepUserSelectUser | Record<string, any>): string | number | undefined {
+  return (
+    (u as any)?.id ??
+    (u as any)?.userId ??
+    (u as any)?.user_id
+  )
+}
+
+const excludeUserIdRef: { current: string | number | null | undefined } = {
+  current: undefined,
+}
+
+/** 与部门管理一致：顶级部门不传 departmentId；子部门才带部门条件查人 */
+const omitDepartmentIdRef: { current: boolean } = { current: true }
+
+function isTopLevelDepartmentNode(node: Record<string, any> | null | undefined): boolean {
+  if (node == null) return true
+  const p = node.parentId ?? node.parent_id
+  return p == null || p === '' || p === 0
+}
+
+/** 顶级不传 departmentId，其余与部门成员列表同一接口、原样返回 */
+async function departmentUsersTableAPI(params: Record<string, any>) {
+  const req = { ...params }
+  if (omitDepartmentIdRef.current) delete req.departmentId
+  return getDepartmentUsersAPI(req)
+}
+
+export const useDepUserSelectPageConfig = createSelectTableConfig({
+  tableAPI: departmentUsersTableAPI,
+  treeAPI: getDepartmentTreeAPI,
+  tree: {
+    title: 'system.department.title',
+    fieldNames: {
+      id: 'id',
+      label: 'name',
+      children: 'children',
+    },
+    searchField: 'departmentId',
+    autoSearch: true,
+    defaultSelectRoot: true,
+    unselectText: 'common.unselect_tree',
+    onSelect: (node: any) => {
+      omitDepartmentIdRef.current = isTopLevelDepartmentNode(node)
+    },
+  },
+  searchFields: [
+    {
+      prop: 'keyword',
+      label: 'system.department.search.member_placeholder', // 成员关键字
+      placeholder: 'system.department.search.member_placeholder',
+    },
+  ],
+  table: {
+    showPagination: true,
+    scrollX: false,
+  },
+  pagination: { page: 1, pageSize: 10, total: 0 },
+  pageInfo: {},
+  listQuery: { sort: 'createTime', order: 'desc' },
+  initialSearchFormData: {},
+})
+
+type DepUserSelectPaneProps = {
+  value: DepUserSelectUser | null
+  onChange: (next: DepUserSelectUser | null) => void
+}
+
+function DepUserSelectPane(props: DepUserSelectPaneProps) {
+  const { value, onChange } = props
+  const pageConfigWithTree = useDepUserSelectPageConfig()
+
+  const userColumns = useMemo(
+    () => [
+      {
+        title: 'system.department.fields.member',
+        key: 'member',
+        render: (_: unknown, data: DepUserSelectUser) => {
+          const name = data.display_name ?? data.userName ?? data.name
+          const mail = data.email ?? data.userEmail
+          return (
+          <div className="flex items-center gap-3">
+            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 text-sm font-bold uppercase text-blue-600 dark:bg-blue-900/30 dark:text-blue-400">
+              {name?.[0] || mail?.[0] || '?'}
+            </div>
+            <div>
+              <div className="text-sm font-medium text-gray-900 dark:text-white">
+                {name ?? mail ?? '—'}
+              </div>
+              <div className="text-xs text-gray-500 dark:text-gray-400">{mail ?? ''}</div>
+            </div>
+          </div>
+          )
+        },
+      },
+    ],
+    [],
+  )
+
+  return (
+    <TreeSelectTableSingle
+      className="min-h-0 flex-1"
+      columns={userColumns as any}
+      pageConfig={pageConfigWithTree}
+      rowKey="userId"
+      value={value}
+      onChange={(next) => onChange(next && typeof next === 'object' ? next : null)}
+    />
+  )
+}
+
+const DepUserSelectModal = forwardRef(function DepUserSelectModal(
+  props: DepUserSelectModalProps,
+  ref,
+) {
+  const { onAfterAdd, onOk } = props
+  const { t } = useTranslation()
+  const { showToast } = useToast()
+  const [selectedUser, setSelectedUser] = useState<DepUserSelectUser | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+  const payloadRef = useRef<DepUserSelectOpenPayload | undefined>(undefined)
+  const [title, setTitle] = useState<string>('')
+
+  const modal = useCxModal({
+    onOpen: (p) => {
+      const next = ((p as any) ?? {}) as DepUserSelectOpenPayload
+      payloadRef.current = next
+      excludeUserIdRef.current = next?.excludeUserId
+      omitDepartmentIdRef.current = true // 树重挂载前默认按「不传部门」直到 onSelect 刷新
+      setSelectedUser(null)
+      setTitle(next?.title ?? t('common.selectTable.single_tree_default_title')) // 选择用户
+    },
+  })
+
+  const { isOpen, close } = modal
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: modal.open,
+      close,
+    }),
+    [modal.open, close],
+  )
+
+  const handleConfirm = useCallback(async () => {
+    const id = selectedUser ? pickUserId(selectedUser) : undefined
+    if (id == null || String(id).trim() === '') {
+      showToast(t('common.selectTable.single_tree_pick_required'), 'error') // 请先选择一名用户
+      return
+    }
+    const ex = excludeUserIdRef.current
+    if (ex != null && String(id) === String(ex)) {
+      showToast(t('common.selectTable.single_tree_pick_excluded'), 'error') // 该用户不可选
+      return
+    }
+    setSubmitting(true)
+    try {
+      const result = await onOk?.({
+        user: selectedUser as DepUserSelectUser,
+        userId: String(id),
+        payload: payloadRef.current,
+      })
+      if (result === false) return
+      await onAfterAdd?.()
+      close()
+    } catch {
+      // 业务 onOk 抛错：不关闭
+    } finally {
+      setSubmitting(false)
+    }
+  }, [close, onAfterAdd, onOk, selectedUser, showToast, t])
+
+  return (
+    <CxModal
+      title={title}
+      isOpen={isOpen}
+      onClose={close}
+      opeType="select"
+      onOk={handleConfirm}
+      submitting={submitting}
+      modalConfig={{
+        width: 960,
+        rootClassName: 'cx-modal-dep-user-select',
+        styles: {
+          container: { height: '88vh', maxHeight: '88vh' },
+          body: {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: '1 1 0%',
+            minHeight: 0,
+            overflowY: 'hidden',
+            overflowX: 'hidden',
+            padding: 0,
+            maxHeight: 'none',
+          },
+        },
+      }}>
+      {isOpen ? <DepUserSelectPane value={selectedUser} onChange={setSelectedUser} /> : null}
+    </CxModal>
+  )
+})
+
+export default DepUserSelectModal