cx-chat 0.0.1

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

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

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