cx-chat 0.0.1

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

@@ -0,0 +1,266 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { getUserPageAPI } from '@/api/system/user'
+
+import {
+  createSelectTableConfig, SelectTableMulti,
+} from '@/components/table-view'
+import { useToast } from '@/contexts/ToastContext'
+import { CxModal, CxSelect, useCxModal } from '@cx-ui'
+
+export type UserSelectMultiModalUser = {
+  id: number
+  email?: string
+  name?: string
+  display_name?: string
+  status?: number
+}
+
+/** 部门成员角色：10=成员，20=管理员，30=负责人 */
+export type DepartmentMemberRole = 10 | 20 | 30
+
+type UserSelectMultiModalProps = {
+  onAfterAdd?: () => void | Promise<void>
+  /** 自定义 footer actions；不传则使用内置 select footer */
+  actions?: React.ReactNode
+  /** 确认添加后的回调（可选） */
+  onOk?: (data: {
+    departmentId?: number | string
+    role: DepartmentMemberRole
+    selectedUsers: UserSelectMultiModalUser[]
+  }) => boolean | void | Promise<boolean | void>
+}
+
+async function userSelectModalTableAPI(params: Record<string, unknown>) {
+  const res = await getUserPageAPI(params)
+  const body =
+    res && typeof res === 'object' && 'data' in res
+      ? (res as { data: unknown }).data
+      : res
+  const b = body && typeof body === 'object' ? (body as Record<string, unknown>) : {}
+  const rawList =
+    (Array.isArray(b.content) ? b.content : null) ??
+    (Array.isArray(b.items) ? b.items : null) ??
+    (Array.isArray(b.records) ? b.records : null) ??
+    []
+  const total =
+    Number(b.totalElements ?? b.total ?? (Array.isArray(rawList) ? rawList.length : 0)) ||
+    0
+  const list = Array.isArray(rawList) ? rawList : []
+  // 只过滤启用状态的用户
+  const content = list.filter((u: Record<string, unknown>) => {
+    const id = Number(u?.id ?? u?.user_id)
+    if (!Number.isFinite(id)) return false
+    if (u.status != null && Number(u.status) !== 1) return false
+    return true
+  })
+  return {
+    data: {
+      content,
+      totalElements: total,
+    },
+  }
+}
+
+const useSelectUserTablePageConfig = createSelectTableConfig({
+  tableAPI: userSelectModalTableAPI,
+  searchFields: [
+    {
+      prop: 'keyword',
+      label: 'system.user.search.keyword_label',
+      placeholder: 'system.user.search.keyword_placeholder',
+    },
+  ],
+  table: {
+    showPagination: true,
+  },
+  pagination: { page: 1, pageSize: 10, total: 0 },
+  pageInfo: {},
+  listQuery: { sort: 'createTime', order: 'desc' },
+  initialSearchFormData: {},
+})
+
+function pickUserId(u: UserSelectMultiModalUser | Record<string, unknown>): number | undefined {
+  const raw =
+    (u as { user_id?: number; userId?: number }).user_id ??
+    (u as { id?: number }).id
+  const n = Number(raw)
+  return Number.isFinite(n) ? n : undefined
+}
+
+type UserSelectModalTablePaneProps = {
+  value: UserSelectMultiModalUser[]
+  onChange: (next: UserSelectMultiModalUser[]) => void
+}
+
+/**
+ * 仅在弹层打开时挂载，避免未打开时触发列表请求。
+ */
+function UserSelectModalTablePane(props: UserSelectModalTablePaneProps) {
+  const { value, onChange } = props
+
+  const pageConfig = useSelectUserTablePageConfig()
+
+  const columns = useMemo(
+    () => [
+      {
+        title: 'system.department.fields.member',
+        key: 'member',
+        render: (_: unknown, data: UserSelectMultiModalUser) => (
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 text-sm font-bold uppercase">
+              {(data.display_name ?? data.name)?.[0] || data.email?.[0] || '?'}
+            </div>
+            <div>
+              <div className="text-sm font-medium text-gray-900 dark:text-white">
+                {data.display_name ?? data.name ?? data.email ?? '—'}
+              </div>
+              <div className="text-xs text-gray-500 dark:text-gray-400">
+                {data.email ?? ''}
+              </div>
+            </div>
+          </div>
+        ),
+      },
+      {
+        title: 'system.department.fields.role',
+        key: 'roleNames',
+        render: (value: unknown) =>
+          Array.isArray(value) ? value.join(', ') : String(value ?? '—'),
+      },
+    ],
+    [],
+  )
+
+  return (
+    <SelectTableMulti.Horizontal
+      columns={columns}
+      className="min-h-0 flex-1"
+      pageConfig={pageConfig}
+      value={value}
+      onChange={(next) => onChange(Array.isArray(next) ? next : [])}
+    />
+  )
+}
+
+const UserSelectMultiModal = forwardRef(function UserSelectMultiModal(
+  props: UserSelectMultiModalProps,
+  ref,
+) {
+  const { onAfterAdd, actions, onOk } = props
+  const { t } = useTranslation()
+  const { showToast } = useToast()
+  const [selectedUsers, setSelectedUsers] = useState<UserSelectMultiModalUser[]>([])
+  const [role, setRole] = useState<DepartmentMemberRole>(10)
+  const [submitting, setSubmitting] = useState(false)
+  const [departmentId, setDepartmentId] = useState<number | string | undefined>(undefined)
+  const modal = useCxModal({
+    onOpen: (payload) => {
+      setSelectedUsers([])
+      setRole(10)
+      setDepartmentId(payload.departmentId)
+    },
+  })
+
+  const { isOpen, close } = modal
+
+  useImperativeHandle(ref, () => ({
+    open: modal.open,
+    close,
+  }), [modal.open, close])
+
+  const roleOptions = useMemo(
+    () => [
+      { value: 10 as const, label: t('system.department.roles.member') },
+      { value: 20 as const, label: t('system.department.roles.manager') },
+      { value: 30 as const, label: t('system.department.roles.owner') },
+    ],
+    [t],
+  )
+
+  const handleConfirm = useCallback(async () => {
+    if (selectedUsers.length === 0) {
+      showToast(t('system.department.toast.add_member_select_first'), 'info')
+      return
+    }
+    setSubmitting(true)
+    try {
+      const result = await onOk?.({ selectedUsers, role, departmentId })
+      // 上级返回 false 表示不关闭（例如接口失败）
+      if (result === false) return
+      await onAfterAdd?.()
+      close()
+    } catch {
+    } finally {
+      setSubmitting(false)
+    }
+  }, [close, onAfterAdd, onOk, role, selectedUsers, departmentId, showToast, t])
+
+  const title = t('system.department.actions.add_member')
+
+  const footerRole = (
+    <div className="flex flex-wrap items-center gap-2">
+      <span className="text-sm text-gray-600 dark:text-gray-300">
+        {t('system.department.fields.role')}:
+      </span>
+      <CxSelect
+        className="min-w-[160px]"
+        value={role}
+        options={roleOptions}
+        onChange={(v) => {
+          const n = Number(v)
+          if (n === 10 || n === 20 || n === 30) setRole(n)
+          else setRole(10)
+        }}
+      />
+    </div>
+  )
+
+  return (
+    <CxModal
+      actions={actions}
+      footerExtra={footerRole}
+      title={title}
+      isOpen={isOpen}
+      onClose={close}
+      opeType="select"
+      onOk={handleConfirm}
+      submitting={submitting}
+      modalConfig={{
+        rootClassName: 'cx-modal-user-select-multi',
+        width: 900,
+        styles: {
+          container: {
+            height: '95vh',
+            maxHeight: '95vh',
+          },
+          body: {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: '1 1 0%',
+            minHeight: 0,
+            // 由表格局部滚动 + 表头固定；body 纵向滚动会把整张表滚走导致表头固定失效
+            overflowY: 'hidden',
+            overflowX: 'hidden',
+            maxHeight: 'none',
+          },
+        },
+      }}>
+      {isOpen && (
+        <UserSelectModalTablePane
+          value={selectedUsers}
+          onChange={setSelectedUsers}
+        />
+      )}
+    </CxModal>
+  )
+})
+
+export default UserSelectMultiModal