cx-chat 0.0.2 → 0.0.4

package/src/views/page-system/department/index.tsx

@@ -1,541 +0,0 @@
-import ConfirmDialog from '@/components/common/modal/confirm-dialog'
-import UserSelectMultiModal from '@/components/common/modal/user-select-multi'
-import { useAuth } from '@/contexts/AuthContext'
-import {
-  bindUserDepartmentsAPI,
-  deleteDepartmentAPI,
-  getDepartmentTreeAPI,
-  getDepartmentUsersAPI,
-  unbindUserDepartmentsAPI
-} from '@api/system/department'
-import type { SearchButtonSize, TreeContext } from '@components/table-view'
-import ListPageView, {
-  createListPageConfig,
-  toCxSearchButtonSize,
-} from '@components/table-view'
-import { CxButton, CxEmptyState } from '@cx-ui'
-import { Edit, UserPlus } from 'lucide-react'
-import React, { useEffect, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import DetailModal from './modal/detail-modal'
-import MemberRoleModal from './modal/member-role-modal'
-import SubmitModal from './modal/submit-modal'
-
-const useListPageConfig = createListPageConfig({
-  /** 不自动选根：挂载即拉成员表，避免未选部门时仍走「等选根」逻辑；点选部门后再带条件刷新 */
-  tree: { defaultSelectRoot: false ,searchField: 'departmentId'},
-  deleteAPI: deleteDepartmentAPI,
-  tableAPI: getDepartmentUsersAPI,
-  treeAPI: getDepartmentTreeAPI,
-  pageInfo: {
-    title: 'system.department.title',
-    subTitle: 'system.department.subtitle',
-    listTitle: 'system.department.list.members_title',
-    searchButtonSize: 'small',
-  },
-  searchFields: [
-    {
-      prop: 'keyword',
-      label: 'system.department.search.member_placeholder',
-      placeholder: 'system.department.search.member_placeholder',
-    },
-  ],
-  table: {
-    showPagination: true,
-  },
-  submitAction: {
-    permission: 'department:add',
-    submitType: 'modal',
-    labelKey: 'system.department.actions.create',
-  },
-  detailAction: {
-    detailType: 'modal',
-    labelKey: 'system.department.actions.detail',
-    permission: 'department:detail',
-  },
-})
-
-/**
- * 部门管理页面的表格工具栏渲染函数
- */
-function renderTableActions(
-  {
-    tree,
-  }: {
-    searchButtonSize: SearchButtonSize
-    tree?: TreeContext
-  },
-  pageConfig: ReturnType<typeof useListPageConfig>,
-  hasPermission: (permission: string) => boolean,
-  submitModalRef: React.RefObject<{ open: (p?: any) => void } | null>,
-) {
-  const { t } = useTranslation()
-  const selectedDept = tree?.selectedNode as any | null
-  if (!selectedDept) return null
-  /** 有树列表中间工具栏：固定 34px，与默认 small(32) 区分 */
-  const treeToolbarIconPx = 14
-  const outlineBtnClass =
-    'border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 shadow-sm'
-
-  // 通过部门编码在 treeData 中定位，并回溯组装路径；tree 的第一级不计入显示/level
-  const getPathInfoByCode = (
-    departments: any[],
-    code: string | undefined,
-  ): { names: string; level: number } => {
-    const targetCode = String(code ?? '').trim()
-    if (!targetCode) return { names: '', level: 0 }
-
-    const walk = (nodes: any[], acc: any[] = []): any[] | null => {
-      for (const n of nodes || []) {
-        const nextAcc = [...acc, n]
-        if (String(n?.code ?? '').trim() === targetCode) return nextAcc
-        const children = n?.children
-        if (Array.isArray(children) && children.length) {
-          const found = walk(children, nextAcc)
-          if (found) return found
-        }
-      }
-      return null
-    }
-
-    const pathNodes = walk(departments, []) || []
-    // 不记录第一级
-    const effectiveNodes = pathNodes.slice(1)
-    const names = effectiveNodes.map((n) => n?.name ?? n?.code ?? '').filter(Boolean)
-    return {
-      names: names.join(' > '),
-      level: effectiveNodes.length,
-    }
-  }
-
-  const pathInfo = getPathInfoByCode(tree?.treeData ?? [], selectedDept.code)
-
-  return (
-    <>
-      <div>
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
-          {selectedDept.name}
-          {/* {!selectedDept.is_active && (
-            <span className="text-xs bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 px-2 py-0.5 rounded-full">
-              {t('system.department.inactive')}
-            </span>
-          )} */}
-        </h1>
-        <div className="text-sm text-gray-500 dark:text-gray-400 mt-1 flex gap-4">
-          {selectedDept.code && (
-            <span>
-              {t('system.department.fields.code')}: {selectedDept.code}
-            </span>
-          )}
-          <span>
-            {t('system.department.fields.level')}: {pathInfo.level}
-          </span>
-          <span>
-            {t('system.department.fields.path')}:{' '}
-            {pathInfo.names}
-          </span>
-        </div>
-        {selectedDept.description && (
-          <p className="text-gray-600 dark:text-gray-400 mt-2 text-sm">
-            {selectedDept.description}
-          </p>
-        )}
-      </div>
-      <div className="flex gap-2 flex-wrap items-center">
-        {/* 新增子部门按钮 */}
-        {hasPermission('department:add') && (
-          <CxButton.Add
-            type="default"
-            height={34}
-            iconSize={treeToolbarIconPx}
-            onClick={() => {
-              submitModalRef.current?.open({
-                opeType: 'add',
-                data: selectedDept,
-              })
-            }}
-            className={outlineBtnClass}>
-            {t('system.department.actions.add_child')}
-          </CxButton.Add>
-        )}
-        {/* 编辑部门按钮 */}
-        {hasPermission('department:edit') && (
-          <CxButton
-            type="default"
-            height={34}
-            icon={<Edit size={treeToolbarIconPx} />}
-            className={outlineBtnClass}
-            onClick={() => {
-              submitModalRef.current?.open({
-                opeType: 'edit',
-                opeId: selectedDept.id,
-                data: selectedDept,
-              })
-            }}>
-            {t('system.department.actions.edit')}
-          </CxButton>
-        )}
-        {/* 删除部门按钮 */}
-        {hasPermission('department:delete') && (
-          <CxButton.Delete
-            height={34}
-            iconSize={treeToolbarIconPx}
-            onClick={() => pageConfig.onDelete?.(selectedDept)}>
-            {t('system.department.actions.delete')}
-          </CxButton.Delete>
-        )}
-      </div>
-    </>
-  )
-}
-
-function IndexView() {
-  const { t } = useTranslation()
-  const { hasPermission, user, refreshUser } = useAuth()
-  const canViewTree = hasPermission('department:tree')
-  const canViewMemberPage = hasPermission('department:page')
-  const canAddDepartment = hasPermission('department:add')
-  const canAddMember = hasPermission('department:member-add')
-  const submitModalRef = React.useRef<{ open: (p?: any) => void } | null>(null)
-  const memberRoleModalRef =
-    React.useRef<{ open: (p?: any) => void; close: () => void } | null>(null)
-  const userSelectModalRef =
-    React.useRef<{ open: (p: { departmentId: number | string }) => void } | null>(
-      null,
-    )
-  const [treeReloadSignal, setTreeReloadSignal] = useState(0)
-  const basePageConfig = useListPageConfig()
-  const pageConfig = {
-    ...basePageConfig,
-    treeReloadSignal,
-    // treeAPI: canViewTree ? getDepartmentTreeAPI : undefined,
-    // tableAPI: canViewMemberPage ? getDepartmentUsersAPI : undefined,
-  }
-  const [removeConfirmOpen, setRemoveConfirmOpen] = useState(false)
-  const [pendingRemoveRow, setPendingRemoveRow] = useState<any>(null)
-  const [roleConfirmOpen, setRoleConfirmOpen] = useState(false)
-  const [pendingRoleRow, setPendingRoleRow] = useState<any>(null)
-
-  /**
-   * 页面加载后打印当前用户的部门信息列表。
-   */
-  // useEffect(() => {
-  //   console.log(
-  //     '[department] 当前用户 departmentUserInfoVOList:',
-  //     (user as any)?.departmentUserInfoVOList,
-  //   )
-  // }, [])
-
-  /**
-   * 获取当前选中部门 ID。
-   */
-  const getSelectedDepartmentId = () => {
-    const searchDepartmentId = (pageConfig as any)?.searchFormData?.departmentId
-    if (searchDepartmentId !== undefined && searchDepartmentId !== null && searchDepartmentId !== '') {
-      return searchDepartmentId
-    }
-    const treeCtx = (pageConfig as any)?.treeContext as TreeContext | undefined
-    return treeCtx?.selectedNode?.id
-  }
-
-  /**
-   * 根据部门 ID 获取当前用户在该部门的角色。
-   */
-  const getCurrentUserDepartmentRole = (departmentId: any) => {
-    const departmentUserInfoVOList = (user as any)?.departmentUserInfoVOList || []
-    const matched = departmentUserInfoVOList.find(
-      (item: any) => item?.departmentId == departmentId,
-    )
-    return matched?.departmentRole
-  }
-
-  /**
-   * 判断当前用户是否可设置部门角色（仅管理员/负责人）。
-   */
-  const canSetDepartmentRole = (departmentId: any) => {
-    const role = getCurrentUserDepartmentRole(departmentId)
-    return role === 20 || role === 30 || role === '20' || role === '30'
-  }
-
-  if (!canViewTree) {
-    return <CxEmptyState message={t('common.page_error.401.message')} />
-  }
-
-  const columns = useMemo(
-    () => [
-      {
-        title: 'system.department.fields.member',
-        key: 'userName',
-        render: (_: any, data: any) => (
-          <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 font-bold uppercase">
-              {data.userName?.[0] || data.userEmail?.[0]}
-            </div>
-            <div>
-              <div className="text-sm font-medium">
-                {data.userName || data.userEmail}
-              </div>
-              <div className="text-xs text-gray-500 dark:text-gray-400">
-                {data.userEmail}
-              </div>
-            </div>
-          </div>
-        ),
-      },
-      {
-        title: 'system.department.fields.role',
-        key: 'departmentRole',
-        render: (value: any, data: any) => {
-          const v = Number(value)
-          if (v === 10) return '成员'
-          if (v === 20) return '管理员'
-          if (v === 30) return '负责人'
-          return value ?? '-'
-        },
-      },
-      {
-        title: 'system.department.fields.joined',
-        key: 'joinTime',
-        render: (value: string, data: any) =>
-          value ? new Date(value).toLocaleDateString() : '',
-      },
-      {
-        title: '操作',
-        key: 'action',
-        width: 180,
-        render: (_: any, data: any) => {
-          const departmentId = getSelectedDepartmentId()
-          const canRemoveMember = hasPermission('department:member-remove')
-          const canSetMemberRole = canSetDepartmentRole(departmentId)
-          if (!canRemoveMember && !canSetMemberRole) return null
-          return (
-            <div className="flex gap-2">
-              {canSetMemberRole && (
-                <CxButton
-                  type="link"
-                  onClick={() => {
-                    openRoleConfirm(data)
-                  }}>
-                  设置部门角色
-                </CxButton>
-              )}
-              {canRemoveMember && (
-                <CxButton
-                  type="link"
-                  className="!text-[#ef4444] hover:!text-[#b91c1c]"
-                  onClick={() => openRemoveConfirm(data)}>
-                  移除
-                </CxButton>
-              )}
-            </div>
-          )
-        },
-      },
-    ],
-    [t, pageConfig, hasPermission, user],
-  )
-
-  // 添加成员
-  const handleAddMembersOk = async (data: any) => {
-    const deptId = data?.departmentId
-    if (deptId == null || deptId === '') return false
-    const users = Array.isArray(data?.selectedUsers) ? data.selectedUsers : []
-    if (users.length === 0) return false
-
-    const userItems = users
-      .map((u: any) => ({ userId: u?.id, departmentRole: data?.role }))
-      .filter((x: any) => x.userId !== undefined && x.userId !== null && x.userId !== '')
-
-    if (userItems.length === 0) return false
-
-    await bindUserDepartmentsAPI({
-      departmentId: deptId,
-      userItems,
-    })
-  }
-  // 移除成员
-  const handleRemoveMember = async (row: any) => {
-    const treeCtx = (pageConfig as any)?.treeContext as TreeContext | undefined
-    const dept = treeCtx?.selectedNode as any | null
-    const deptId = dept?.id
-    if (deptId == null || String(deptId).trim() === '') return false
-
-    const userId = row?.userId
-    if (userId == null || String(userId).trim() === '') return false
-
-    await unbindUserDepartmentsAPI({
-      departmentId: deptId,
-      userIds: [ userId ],
-    })
-
-    await pageConfig.fetchTableData?.()
-  }
-
-  /**
-   * 设置成员角色后刷新列表；若改的是当前登录用户则同步刷新用户信息以更新按钮权限。
-   */
-  const handleAfterSetMemberRole = async (payload?: {
-    row?: any
-    role?: number
-    departmentId?: number | string
-  }) => {
-    await pageConfig.fetchTableData?.()
-    const targetUserId = payload?.row?.userId
-    const currentUserId = (user as any)?.id
-    if (
-      targetUserId != null &&
-      targetUserId !== '' &&
-      currentUserId != null &&
-      currentUserId !== '' &&
-      targetUserId == currentUserId
-    ) {
-      await refreshUser()
-    }
-  }
-
-  const openRemoveConfirm = (row: any) => {
-    setPendingRemoveRow(row)
-    setRemoveConfirmOpen(true)
-  }
-
-  /**
-   * 打开设置部门角色前的确认弹框。
-   */
-  const openRoleConfirm = (row: any) => {
-    setPendingRoleRow(row)
-    setRoleConfirmOpen(true)
-  }
-
-  const closeRemoveConfirm = () => {
-    setRemoveConfirmOpen(false)
-    setPendingRemoveRow(null)
-  }
-
-  /**
-   * 关闭设置部门角色前的确认弹框。
-   */
-  const closeRoleConfirm = () => {
-    setRoleConfirmOpen(false)
-    setPendingRoleRow(null)
-  }
-
-  const confirmRemove = async () => {
-    if (!pendingRemoveRow) return
-    await handleRemoveMember(pendingRemoveRow)
-    closeRemoveConfirm()
-  }
-
-  /**
-   * 确认后再打开设置部门角色弹框。
-   */
-  const confirmRoleSetting = () => {
-    if (!pendingRoleRow) return
-    const departmentId = getSelectedDepartmentId()
-    memberRoleModalRef.current?.open({ row: pendingRoleRow, departmentId })
-    closeRoleConfirm()
-  }
-
-  pageConfig.onAdd = () => {
-    submitModalRef.current?.open({ opeType: 'add' })
-  }
-  pageConfig.afterDelete = async (record: any) => {
-    if (typeof basePageConfig.afterDelete === 'function') {
-      await basePageConfig.afterDelete(record)
-    }
-    setTreeReloadSignal((n) => n + 1)
-  }
-
-  return (
-    <>
-      <ListPageView
-        columns={columns}
-        headerActions={
-          <div>
-            {/* 新增部门 */}
-            {canAddDepartment && (
-              <CxButton.Add
-                onClick={() => {
-                  submitModalRef.current?.open({ opeType: 'add' })
-                }}
-              >
-                {t('system.department.actions.create')}
-              </CxButton.Add>
-            )}
-          </div>
-        }
-        pageConfig={pageConfig}
-        searchAreaExtra={({ tree, searchButtonSize }) => {
-          const dept = tree?.selectedNode as {
-            id?: number | string
-            _id?: number | string
-          } | null
-          const deptId = dept?.id
-          if (
-            deptId === undefined ||
-            deptId === null ||
-            String(deptId).trim() === ''
-          ) {
-            return null
-          }
-          if (!canAddMember) return null
-          return (
-            <CxButton.Add
-              size={toCxSearchButtonSize(searchButtonSize)}
-              icon={<UserPlus size={14} />}
-              onClick={() =>
-                userSelectModalRef.current?.open({ departmentId: deptId })
-              }>
-              {t('system.department.actions.add_member')}
-            </CxButton.Add>
-          )
-        }}
-        tableActions={(ctx) =>
-          renderTableActions(ctx, pageConfig, hasPermission, submitModalRef)
-        }
-        detailModalComponent={DetailModal as any}
-      />
-      <SubmitModal
-        ref={submitModalRef}
-        onOk={async () => {
-          await pageConfig.fetchTableData?.()
-          setTreeReloadSignal((n) => n + 1)
-        }}
-        onCancel={() => {
-          // 取消时的清理逻辑(可选)
-        }}
-      />
-      <UserSelectMultiModal
-        onOk={handleAddMembersOk}
-        ref={userSelectModalRef}
-        onAfterAdd={async () => {
-          await pageConfig.fetchTableData?.()
-        }}
-      />
-      <MemberRoleModal
-        ref={memberRoleModalRef}
-        onOk={handleAfterSetMemberRole}
-      />
-      <ConfirmDialog
-        isOpen={roleConfirmOpen}
-        title={t('common.confirm')}
-        message="确认设置该成员部门角色吗？"
-        confirmText={t('common.confirm')}
-        cancelText={t('common.cancel')}
-        onClose={closeRoleConfirm}
-        onConfirm={confirmRoleSetting}
-      />
-      <ConfirmDialog
-        isOpen={removeConfirmOpen}
-        title={t('common.confirm')}
-        message="确认移除该成员吗？"
-        confirmText={t('common.confirm')}
-        cancelText={t('common.cancel')}
-        onClose={closeRemoveConfirm}
-        onConfirm={confirmRemove}
-        danger
-      />
-    </>
-  )
-}
-
-export default IndexView

package/src/views/page-system/department/modal/detail-modal.tsx

@@ -1,94 +0,0 @@
-import React, { forwardRef, useImperativeHandle, useState } from 'react'
-import { Descriptions } from 'antd'
-import { useTranslation } from 'react-i18next'
-
-import { CxModal, CxTag, useCxModal } from '@cx-ui'
-import { getDepartmentDetailAPI } from '@/api/system/department'
-import { Spin } from 'antd'
-
-const DetailModal = forwardRef(function DetailModal(_props, ref) {
-  const { t } = useTranslation()
-  const [loading, setLoading] = useState(false)
-
-  const modal = useCxModal({
-    onOpen: async (payload) => {
-      const opeId = payload.opeId ?? payload.data?.id
-      setLoading(true)
-      modal.setFormData(undefined)
-      if (opeId == null || `${opeId}`.trim() === '') {
-        setLoading(false)
-        return
-      }
-      try {
-        const res = await getDepartmentDetailAPI({ id: opeId })
-        modal.setFormData(res?.data)
-      } finally {
-        setLoading(false)
-      }
-    },
-    onClose: () => {
-      setLoading(false)
-    },
-  })
-  
-  const { isOpen, close } = modal
-  const record = modal.formData
-
-  useImperativeHandle(ref, () => ({
-    open: modal.open,
-    close,
-  }), [modal.open, close])
-
-  return (
-    <CxModal
-      title={`${t('system.department.title')} - ${t('system.department.actions.detail')}`}
-      isOpen={isOpen}
-      onClose={close}
-      opeType="detail">
-      {loading ? (
-        <div className="flex justify-center py-10">
-          <Spin />
-        </div>
-      ) : (
-        <Descriptions column={1} size="small" bordered>
-          <Descriptions.Item label={t('system.department.fields.name')}>
-            {record?.name || '-'}
-          </Descriptions.Item>
-          <Descriptions.Item label={t('system.department.fields.code')}>
-            {record?.code || '-'}
-          </Descriptions.Item>
-          <Descriptions.Item label={t('common.status')}>
-            {(() => {
-              const active = record?.is_active
-              if (active === undefined || active === null) return '-'
-              const v = active === true || Number(active) === 1 ? 1 : 0
-              return <CxTag.Enabled value={v} />
-            })()}
-          </Descriptions.Item>
-          <Descriptions.Item label={t('system.department.fields.level')}>
-            {record?.level ?? '-'}
-          </Descriptions.Item>
-          <Descriptions.Item label={t('system.department.fields.path')}>
-            {record?.path || '-'}
-          </Descriptions.Item>
-          <Descriptions.Item label={t('common.description')}>
-            {record?.description || '-'}
-          </Descriptions.Item>
-          {record?.created_at && (
-            <Descriptions.Item label={t('common.created_at')}>
-              {new Date(record.created_at).toLocaleString()}
-            </Descriptions.Item>
-          )}
-          {record?.updated_at && (
-            <Descriptions.Item label={t('common.updated_at')}>
-              {new Date(record.updated_at).toLocaleString()}
-            </Descriptions.Item>
-          )}
-        </Descriptions>
-      )}
-    </CxModal>
-  )
-})
-
-export default DetailModal
-