cx-chat 0.0.1

package/src/views/page-menus/knowledge/modal/detail-modal.tsx

@@ -0,0 +1,618 @@
+import {
+  deleteKnowSharedAPI,
+  editKnowledgePermissionAPI,
+  getKnowledgeDetailAPI,
+  getKnowledgePermissionListAPI,
+  getKnowSharedUserPageAPI,
+} from '@/api/menus/knowledge'
+import { getDepartmentTreeAPI } from '@/api/system/department'
+import ConfirmDialog from '@/components/common/modal/confirm-dialog'
+import { createSelectTableConfig, SelectTableView } from '@/components/table-view'
+import { useAuth } from '@/contexts/AuthContext'
+import { useToast } from '@/contexts/ToastContext'
+import { CxButton, CxCheckbox, CxModal, CxTable, CxTabs, CxTag, useCxModal } from '@cx-ui'
+import { Form, Spin } from 'antd'
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useState
+} from 'react'
+import { useTranslation } from 'react-i18next'
+
+interface OpenPayload {
+  opeId?: string | number
+  record?: any
+}
+
+const DetailModal = forwardRef<any, unknown>(function DetailModal(_props, ref) {
+  const { t } = useTranslation()
+  const { hasPermission } = useAuth()
+  const { showToast } = useToast()
+  const [loading, setLoading] = useState(false)
+  const [activeTab, setActiveTab] = useState('permission')
+  const [permissionList, setPermissionList] = useState<any[]>([])
+  const [permissionDraftList, setPermissionDraftList] = useState<any[]>([])
+  const [permissionEditing, setPermissionEditing] = useState(false)
+  const [permissionSubmitting, setPermissionSubmitting] = useState(false)
+  const [shareSelectedRows, setShareSelectedRows] = useState<any[]>([])
+  const [shareRemoving, setShareRemoving] = useState(false)
+  const [shareRemovingSubmitting, setShareRemovingSubmitting] = useState(false)
+  const [shareRemoveSubmitConfirmOpen, setShareRemoveSubmitConfirmOpen] = useState(false)
+  const [shareTreeCheckedKeys, setShareTreeCheckedKeys] = useState<Set<string>>(
+    () => new Set(),
+  )
+  const canViewPermissionList = hasPermission('knowledge:data-permission-list')
+  const canEditPermission = hasPermission('knowledge:manage-permission-edit')
+  const canViewSharePage = hasPermission('knowledge:data-permission-page')
+  const canDeleteShare = hasPermission('knowledge:data-permission-delete')
+
+  const modal = useCxModal({
+    onOpen: async (payload) => {
+      const opeId = payload.opeId ?? payload.data?.id
+      setLoading(true)
+      modal.setFormData({})
+      setPermissionList([])
+      setPermissionDraftList([])
+      setPermissionEditing(false)
+      setPermissionSubmitting(false)
+      setShareSelectedRows([])
+      setShareRemoving(false)
+      setShareRemovingSubmitting(false)
+      setShareRemoveSubmitConfirmOpen(false)
+      setShareTreeCheckedKeys(new Set())
+      setActiveTab('permission')
+
+      if (opeId != null && opeId !== '') {
+        try {
+          // 获取知识库详情
+          const res = await getKnowledgeDetailAPI(opeId)
+          const detail = res?.data ?? {}
+          modal.setFormData({
+            id: opeId,
+            code: detail.code ?? '',
+            name: detail.name ?? '',
+            description: detail.description ?? '',
+            type: detail.type,
+            status: detail.status,
+            userId: detail.userId ?? '',
+            createTime: detail.createTime ?? '',
+            updateTime: detail.updateTime ?? '',
+          })
+
+          // 获取权限列表
+          if (canViewPermissionList) {
+            try {
+              const permRes = await getKnowledgePermissionListAPI(opeId)
+              const permData = permRes?.data?.data ?? permRes?.data ?? []
+              const list = Array.isArray(permData) ? permData : []
+              setPermissionList(list)
+              setPermissionDraftList(list)
+            } catch (e) {
+              console.error('获取权限列表失败', e)
+              setPermissionList([])
+              setPermissionDraftList([])
+            }
+          }
+        } finally {
+          setLoading(false)
+        }
+      } else {
+        setLoading(false)
+      }
+    },
+    onClose: () => {
+    },
+  })
+
+  const { isOpen, close } = modal
+  const detailData = (modal.formData ?? {}) as Record<string, any>
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: modal.open,
+      close,
+    }),
+    [modal.open, close],
+  )
+
+  const clearShareCheckedRows = useCallback(() => {
+    setShareSelectedRows([])
+  }, [])
+
+  const startShareRemoving = useCallback(() => {
+    setShareRemoving(true)
+  }, [])
+
+  const cancelShareRemoving = useCallback(() => {
+    setShareRemoving(false)
+    setShareTreeCheckedKeys(new Set())
+    clearShareCheckedRows()
+  }, [clearShareCheckedRows])
+
+  const openShareRemoveSubmitConfirm = useCallback(() => {
+    setShareRemoveSubmitConfirmOpen(true)
+  }, [])
+
+  const closeShareRemoveSubmitConfirm = useCallback(() => {
+    setShareRemoveSubmitConfirmOpen(false)
+  }, [])
+
+  // submitShareRemoving 需在 shareTableConfig 声明之后（见下方）
+
+  const handleShareTreeCheck = useCallback(
+    (key: string | number, checked: boolean) => {
+      const k = String(key)
+      setShareTreeCheckedKeys((prev) => {
+        const next = new Set(prev)
+        if (checked) next.add(k)
+        else next.delete(k)
+        return next
+      })
+    },
+    [],
+  )
+
+  const handlePermissionEditStart = useCallback(() => {
+    setPermissionDraftList(permissionList.map((x) => ({ ...x })))
+    setPermissionEditing(true)
+  }, [permissionList])
+
+  const handlePermissionEditCancel = useCallback(() => {
+    setPermissionDraftList(permissionList.map((x) => ({ ...x })))
+    setPermissionEditing(false)
+  }, [permissionList])
+
+  const handleTogglePermission = useCallback(
+    (row: any, field: 'knowledgePermission' | 'knowledgeDocPermission', checked: boolean) => {
+      const rowId = row?.userId ?? row?.id
+      setPermissionDraftList((prev) =>
+        prev.map((item) => {
+          const itemId = item?.userId ?? item?.id
+          if (String(itemId) !== String(rowId)) return item
+          return {
+            ...item,
+            [field]: checked,
+          }
+        }),
+      )
+    },
+    [],
+  )
+
+  const handlePermissionSubmit = useCallback(async () => {
+    const knowledgeId = detailData.id
+    if (!knowledgeId) return
+    setPermissionSubmitting(true)
+    try {
+      const knowledgeUserIdList = permissionDraftList
+        .filter((x) => x?.knowledgePermission === true)
+        .map((x) => x?.userId ?? x?.id)
+        .filter((x) => x != null && String(x) !== '')
+      const knowledgeDocumentUserIdList = permissionDraftList
+        .filter((x) => x?.knowledgeDocPermission === true)
+        .map((x) => x?.userId ?? x?.id)
+        .filter((x) => x != null && String(x) !== '')
+      await editKnowledgePermissionAPI({
+        knowledgeId,
+        knowledgeUserIdList,
+        knowledgeDocumentUserIdList,
+      })
+      setPermissionList(permissionDraftList.map((x) => ({ ...x })))
+      setPermissionEditing(false)
+      showToast(t('common.operation_success'), 'success')
+    } catch (error) {
+      console.error('更新知识库权限失败', error)
+    } finally {
+      setPermissionSubmitting(false)
+    }
+  }, [detailData.id, permissionDraftList, showToast, t])
+
+  // 权限表格列定义
+  const permissionColumns = useMemo(
+    () => [
+      {
+        title: t('menus.knowledge.share.user_name'),
+        dataIndex: 'userName',
+        key: 'userName',
+        width: 120,
+      },
+      {
+        title: t('menus.knowledge.permission_kb_manage'),
+        dataIndex: 'knowledgePermission',
+        key: 'knowledgePermission',
+        width: 100,
+        render: (value: boolean, row: any) =>
+          permissionEditing ? (
+            <CxCheckbox
+              checked={value === true}
+              onChange={(checked) =>
+                handleTogglePermission(row, 'knowledgePermission', checked)
+              }
+            />
+          ) : (
+            <CxTag.YesNo value={value ? 1 : 0} />
+          ),
+      },
+      {
+        title: t('menus.knowledge.permission_doc_manage'),
+        dataIndex: 'knowledgeDocPermission',
+        key: 'knowledgeDocPermission',
+        width: 100,
+        render: (value: boolean, row: any) =>
+          permissionEditing ? (
+            <CxCheckbox
+              checked={value === true}
+              onChange={(checked) =>
+                handleTogglePermission(row, 'knowledgeDocPermission', checked)
+              }
+            />
+          ) : (
+            <CxTag.YesNo value={value ? 1 : 0} />
+          ),
+      },
+    ],
+    [handleTogglePermission, permissionEditing, t],
+  )
+
+  // 共享表格配置 Hook
+  const useShareTableConfig = createSelectTableConfig({
+    tableAPI: canViewSharePage
+      ? (queryParams) => {
+          const knowledgeId = detailData.id
+          if (!knowledgeId) {
+            return Promise.resolve({ data: { content: [], totalElements: 0 } })
+          }
+          if (queryParams.departmentId === '0') {
+            queryParams.departmentId = null
+          }
+          return getKnowSharedUserPageAPI({
+            ...queryParams,
+            knowledgeId,
+          })
+        }
+      : undefined,
+    treeAPI: hasPermission('knowledge:manage-permission-dep-list')
+      ? getDepartmentTreeAPI
+      : undefined,
+    tree: {
+      fieldNames: {
+        id: 'id',
+        label: 'name',
+        children: 'children',
+      },
+      searchField: 'departmentId',
+    },
+    searchFields: [
+      {
+        prop: 'userName',
+        label: 'menus.knowledge.share.user_name',
+        placeholder: 'menus.knowledge.share.user_name_placeholder',
+      },
+      {
+        prop: 'grantUserName',
+        label: 'menus.knowledge.share.grant_user',
+        placeholder: 'menus.knowledge.share.grant_user_placeholder',
+      },
+    ],
+    pageInfo: {
+      searchButtonSize: 'small',
+    },
+    table: {
+      showPagination: true,
+      showSelection: canDeleteShare && shareRemoving,
+    },
+    pagination: { page: 1, pageSize: 10, total: 0 },
+  })
+
+  // 调用 Hook 获取配置
+  const shareTableConfig = useShareTableConfig()
+
+  const submitShareRemoving = useCallback(async () => {
+    const knowledgeId = detailData.id
+    if (!knowledgeId) return
+
+    const idList = (Array.isArray(shareSelectedRows) ? shareSelectedRows : [])
+      .map((row: any) => row?.id)
+      .filter((x: any) => x != null && String(x).trim() !== '')
+      .map((x: any) => String(x))
+
+    const departmentIdList = Array.from(shareTreeCheckedKeys)
+      .filter((x) => x != null && String(x).trim() !== '' && String(x) !== '0')
+      .map((x) => String(x))
+
+    if (idList.length === 0 && departmentIdList.length === 0) return
+
+    setShareRemovingSubmitting(true)
+    try {
+      await deleteKnowSharedAPI({
+        knowledgeId,
+        idList,
+        departmentIdList,
+      })
+      showToast(t('common.operation_success'), 'success')
+      cancelShareRemoving()
+      closeShareRemoveSubmitConfirm()
+      await shareTableConfig?.fetchTableData?.()
+    } catch (e) {
+      console.error('remove knowledge share failed:', e)
+    } finally {
+      setShareRemovingSubmitting(false)
+    }
+  }, [
+    cancelShareRemoving,
+    closeShareRemoveSubmitConfirm,
+    detailData.id,
+    shareSelectedRows,
+    shareTableConfig,
+    shareTreeCheckedKeys,
+    showToast,
+    t,
+  ])
+
+  // 共享表格列定义：checkbox 由 SelectTableView 的 selectionMode 控制（避免出现两个选择列）
+  const shareColumns = useMemo(
+    () => [
+      {
+        title: 'menus.knowledge.share.user_name',
+        dataIndex: 'userName',
+        key: 'userName',
+        width: 120,
+      },
+      {
+        title: 'menus.knowledge.share.department',
+        dataIndex: 'departmentName',
+        key: 'departmentName',
+        width: 150,
+      },
+    ],
+    [],
+  )
+
+  const tabActions = useMemo(() => {
+    if (activeTab === 'permission' && canEditPermission) {
+      if (permissionEditing) {
+        return (
+          <>
+            <CxButton
+              size="small"
+              type="default"
+              onClick={handlePermissionEditCancel}
+              disabled={permissionSubmitting}
+            >
+              {t('common.cancel')}
+            </CxButton>
+            <CxButton
+              size="small"
+              type="primary"
+              loading={permissionSubmitting}
+              onClick={handlePermissionSubmit}
+            >
+              {t('common.submit')}
+            </CxButton>
+          </>
+        )
+      }
+      return (
+        <CxButton
+          size="small"
+          type="primary"
+          onClick={handlePermissionEditStart}
+        >
+          {t('common.edit')}
+        </CxButton>
+      )
+    }
+
+    if (activeTab === 'share' && canDeleteShare) {
+      if (shareRemoving) {
+        return (
+          <>
+            <CxButton.Cancel
+              size="small"
+              type="default"
+              disabled={shareRemovingSubmitting}
+              onClick={cancelShareRemoving}
+            >
+              {t('common.cancel')}
+            </CxButton.Cancel>
+            <CxButton.Delete
+              size="small"
+              icon={false}
+              loading={shareRemovingSubmitting}
+              disabled={
+                shareRemovingSubmitting ||
+                (shareSelectedRows.length === 0 && shareTreeCheckedKeys.size === 0)
+              }
+              onClick={openShareRemoveSubmitConfirm}
+            >
+              {t('selectTable.remove_selected')}
+            </CxButton.Delete>
+          </>
+        )
+      }
+      return (
+        <CxButton.Delete
+          size="small"
+          icon={false}
+          onClick={startShareRemoving}
+        >
+          {t('selectTable.batch_remove')}
+        </CxButton.Delete>
+      )
+    }
+    return null
+  }, [
+    activeTab,
+    canEditPermission,
+    canDeleteShare,
+    permissionEditing,
+    permissionSubmitting,
+    shareSelectedRows.length,
+    shareTreeCheckedKeys.size,
+    shareRemoving,
+    shareRemovingSubmitting,
+    handlePermissionEditCancel,
+    handlePermissionEditStart,
+    handlePermissionSubmit,
+    cancelShareRemoving,
+    openShareRemoveSubmitConfirm,
+    startShareRemoving,
+    submitShareRemoving,
+    t,
+  ])
+
+  return (
+    <CxModal
+      title={t('menus.knowledge.detail_title')}
+      isOpen={isOpen}
+      onClose={close}
+      opeType="detail"
+      modalConfig={{
+        width: 1200,
+        styles: {
+          container: {
+            display: 'flex',
+            flexDirection: 'column' as const,
+            overflow: 'hidden',
+            height: 'min(95dvh, 95vh)',
+            maxHeight: 'min(95dvh, 95vh)',
+          },
+          body: {
+            flex: '1 1 0%',
+            minHeight: 0,
+            display: 'flex',
+            flexDirection: 'column' as const,
+            overflow: 'hidden',
+          },
+        },
+        rootClassName: 'cx-modal-content-fill',
+      }}>
+      {loading ? (
+        <div className="flex justify-center py-20">
+          <Spin size="large" />
+        </div>
+      ) : (
+        <div className="flex h-full min-h-0 flex-1 flex-col overflow-hidden">
+          {/* 顶部表单信息区 */}
+          <div className="shrink-0 grid grid-cols-1 md:grid-cols-4">
+            <Form.Item label={t('menus.knowledge.code')} className="!mb-0">
+              <div className="text-sm text-gray-900 dark:text-gray-100">
+                {detailData.code || '-'}
+              </div>
+            </Form.Item>
+
+            <Form.Item label={t('menus.knowledge.name')} className="!mb-0">
+              <div className="text-sm text-gray-900 dark:text-gray-100">
+                {detailData.name || '-'}
+              </div>
+            </Form.Item>
+
+            <Form.Item label={t('menus.knowledge.type')} className="!mb-0">
+              <div className="text-sm text-gray-900 dark:text-gray-100">
+                <CxTag.Enum value={detailData.type} enumKey="knowledgeType" />
+              </div>
+            </Form.Item>
+
+            <Form.Item label={t('common.status')} className="!mb-0">
+              <div className="text-sm text-gray-900 dark:text-gray-100">
+                <CxTag.Enabled value={detailData.status} />
+              </div>
+            </Form.Item>
+
+            <Form.Item label={t('common.description')} className="!mb-0 md:col-span-4">
+              <div className="text-sm text-gray-900 dark:text-gray-100 break-words">
+                {detailData.description || '-'}
+              </div>
+            </Form.Item>
+          </div>
+
+          {/* Tabs 区域 */}
+          <div className="relative flex min-h-0 flex-1 flex-col overflow-hidden">
+            {tabActions ? (
+              <div className="absolute right-0 top-0 z-10 flex items-center gap-2">
+                {tabActions}
+              </div>
+            ) : null}
+            <CxTabs
+              activeKey={activeTab}
+              onChange={setActiveTab}
+              className="flex-1 flex flex-col min-h-0 [&_.ant-tabs-nav]:pr-[220px]"
+              items={[
+                {
+                  key: 'permission',
+                  label: t('menus.knowledge.tab_permission'),
+                  children: (
+                    <div className="h-full overflow-auto">
+                      <CxTable
+                        columns={permissionColumns}
+                        dataSource={permissionEditing ? permissionDraftList : permissionList}
+                        rowKey="userId"
+                        pagination={false}
+                        scroll={{ y: 300 }}
+                      />
+                    </div>
+                  ),
+                },
+                {
+                  key: 'share',
+                  label: t('menus.knowledge.tab_share'),
+                  children: (
+                    <div className="min-h-0 flex-1 flex flex-col overflow-hidden h-full">
+                      {shareTableConfig ? (
+                        <div className="flex h-full min-h-0 flex-col overflow-hidden">
+                          <div className="min-h-0 flex-1">
+                            <SelectTableView
+                              expectTree
+                              noPadding
+                              pageConfig={shareTableConfig}
+                              columns={shareColumns as any}
+                              rowKey="userId"
+                              selectionMode={shareRemoving ? 'multiple' : 'none'}
+                              showSelectedPanel={false}
+                              treeCheckable={canDeleteShare && shareRemoving}
+                              treeCheckedKeys={shareTreeCheckedKeys}
+                              onTreeCheck={(_key, checked, node) => {
+                                const nodeKey = node?.id ?? node?.key ?? _key
+                                handleShareTreeCheck(nodeKey, checked)
+                              }}
+                              treeRenderLabel={(node: any) => node?.name ?? node?.title ?? '-'}
+                              value={shareSelectedRows}
+                              onChange={(next) => {
+                                setShareSelectedRows(Array.isArray(next) ? next : [])
+                              }}
+                            />
+                          </div>
+                        </div>
+                      ) : (
+                        <div className="flex h-full items-center justify-center text-gray-400">
+                          {t('common.no_data')}
+                        </div>
+                      )}
+                    </div>
+                  ),
+                },
+              ]}
+            />
+          </div>
+        </div>
+      )}
+      <ConfirmDialog
+        isOpen={shareRemoveSubmitConfirmOpen}
+        danger
+        title={t('common.confirm')}
+        message={t('selectTable.remove_selected_confirm')}
+        confirmText={t('common.confirm')}
+        cancelText={t('common.cancel')}
+        onClose={closeShareRemoveSubmitConfirm}
+        onConfirm={() => void submitShareRemoving()}
+      />
+    </CxModal>
+  )
+})
+
+DetailModal.displayName = 'DetailModal'
+
+export default DetailModal