cx-chat 0.0.2 → 0.0.4

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

@@ -1,266 +0,0 @@
-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