cx-chat 0.0.1

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

@@ -0,0 +1,440 @@
+import { Edit } from 'lucide-react'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import {
+  deleteDictCateAPI,
+  deleteDictDataAPI,
+  disableDictDataAPI,
+  enableDictDataAPI,
+  getDictCateTreeAPI,
+  getDictDataPageAPI,
+  setDictDataDefaultAPI,
+} from '@/api/system/dict'
+import ConfirmDialog from '@/components/common/modal/confirm-dialog'
+import { useAuth } from '@/contexts/AuthContext'
+import { useToast } from '@/contexts/ToastContext'
+import { ALIGN, ENUM_DATA } from '@/meta'
+import { loadCommonDictData, loadUnauthDictData } from '@/meta/index-dict'
+import ListPageView, {
+  createListPageConfig,
+  type SearchButtonSize,
+  toCxSearchButtonSize,
+  type TreeContext,
+} from '@components/table-view'
+import { CxButton, CxTag } from '@cx-ui'
+
+import DictCateSubmitModal from './modal/cate-submit-modal'
+import SubmitModal from './modal/submit-modal'
+
+/** 字典管理变更后：刷新免登录 + 登录 batch 字典缓存（与入口 / Auth 同源） */
+async function reloadMetaDictCaches() {
+  loadUnauthDictData()
+  await loadCommonDictData(true)
+}
+
+const useListPageConfig = createListPageConfig({
+  afterGetPageData: () => reloadMetaDictCaches(),
+  tableAPI: getDictDataPageAPI,
+  treeAPI: getDictCateTreeAPI,
+  tree: {
+    title: 'system.dict.tree_title',
+    fieldNames: { id: 'id', label: 'name', children: 'children' },
+    searchField: 'dictTypeId',
+    defaultSelectRoot: true,
+    defaultExpandAll: true,
+  },
+  deleteAPI: deleteDictDataAPI,
+  updateStatusAPI: ({ id, status }) =>
+    Number(status) === 1
+      ? enableDictDataAPI(id)
+      : disableDictDataAPI(id),
+  pageInfo: {
+    title: 'system.dict.page_title',
+    subTitle: 'system.dict.page_subtitle',
+    listTitle: 'system.dict.list_title',
+    searchButtonSize: 'small',
+  },
+  searchFields: [
+    {
+      prop: 'keyword',
+      label: 'system.dict.search_keyword',
+      placeholder: 'system.dict.ph_search_keyword',
+      width: '200px',
+    },
+    {
+      prop: 'status',
+      label: 'common.status',
+      type: 'select',
+      placeholder: 'common.status',
+      options: ENUM_DATA.commonStatus.option.map(({ label, value }) => ({
+        label,
+        value,
+      })),
+      width: '120px',
+    },
+  ],
+  listQuery: {
+    sort: 'sortOrder',
+    order: 'asc',
+  },
+  statusToggle: {
+    dangerOnDisable: true,
+    disableConfirm: {
+      cancelText: 'common.cancel',
+      content: 'system.dict.disable_confirm_content',
+      contentFields: 'name',
+      okText: 'common.confirm',
+      title: 'system.dict.disable_confirm_title',
+    },
+    enableConfirm: {
+      cancelText: 'common.cancel',
+      content: 'system.dict.enable_confirm_content',
+      contentFields: 'name',
+      okText: 'common.confirm',
+      title: 'system.dict.enable_confirm_title',
+    },
+  },
+  deleteConfirm: {
+    cancelText: 'common.cancel',
+    content: 'system.dict.data_delete_confirm',
+    contentFields: 'name',
+    okText: 'common.confirm',
+    title: 'common.confirm',
+  },
+  table: {
+    operationWidth: 300,
+  },
+})
+
+function renderTableActions(
+  {
+    tree,
+  }: {
+    searchButtonSize: SearchButtonSize
+    tree?: TreeContext
+  },
+  hasPermission: (p: string) => boolean,
+  cateModalRef: React.RefObject<{ open: (p?: unknown) => void } | null>,
+  onDeleteCate: (node: Record<string, unknown>) => void,
+) {
+  const { t } = useTranslation()
+  const selected = tree?.selectedNode as Record<string, unknown> | null
+  if (!selected) return null
+
+  const treeToolbarIconPx = 14
+  const outlineBtnClass =
+    'border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 shadow-sm'
+
+  return (
+    <>
+      <div>
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
+          {String(selected.name ?? '')}
+        </h1>
+        <div className="text-sm text-gray-500 dark:text-gray-400 mt-1 flex gap-4 flex-wrap">
+          {selected.code != null && String(selected.code) !== '' && (
+            <span>
+              {t('system.dict.field_code')}: {String(selected.code)}
+            </span>
+          )}
+        </div>
+        {selected.description != null && String(selected.description) !== '' && (
+          <p className="text-gray-600 dark:text-gray-400 mt-2 text-sm">
+            {String(selected.description)}
+          </p>
+        )}
+      </div>
+      <div className="flex gap-2 flex-wrap items-center">
+        {hasPermission('dict:cate:add') && (
+          <CxButton.Add
+            type="default"
+            height={34}
+            iconSize={treeToolbarIconPx}
+            onClick={() => {
+              cateModalRef.current?.open({
+                opeType: 'add',
+                data: selected,
+              })
+            }}
+            className={outlineBtnClass}>
+            {t('system.dict.cate_add_child')}
+          </CxButton.Add>
+        )}
+        {hasPermission('dict:cate:edit') && (
+          <CxButton
+            type="default"
+            height={34}
+            icon={<Edit size={treeToolbarIconPx} />}
+            className={outlineBtnClass}
+            onClick={() => {
+              cateModalRef.current?.open({
+                opeType: 'edit',
+                opeId: selected.id,
+                data: selected,
+              })
+            }}>
+            {t('system.dict.cate_edit')}
+          </CxButton>
+        )}
+        {hasPermission('dict:cate:delete') && (
+          <CxButton.Delete
+            height={34}
+            iconSize={treeToolbarIconPx}
+            onClick={() => onDeleteCate(selected)}>
+            {t('system.dict.cate_delete')}
+          </CxButton.Delete>
+        )}
+      </div>
+    </>
+  )
+}
+
+function IndexView() {
+  const { t } = useTranslation()
+  const { showToast } = useToast()
+  const { hasPermission } = useAuth()
+  const pageConfig = useListPageConfig()
+  const [treeReloadSignal, setTreeReloadSignal] = useState(0)
+
+  const cateModalRef = useRef<{ open: (p?: unknown) => void } | null>(null)
+  const dataModalRef = useRef<{ open: (p?: unknown) => void } | null>(null)
+
+  const [cateDeleteOpen, setCateDeleteOpen] = useState(false)
+  const [pendingCate, setPendingCate] = useState<Record<string, unknown> | null>(null)
+
+  const openCateDelete = (node: Record<string, unknown>) => {
+    setPendingCate(node)
+    setCateDeleteOpen(true)
+  }
+
+  const closeCateDelete = () => {
+    setCateDeleteOpen(false)
+    setPendingCate(null)
+  }
+
+  const confirmCateDelete = async () => {
+    if (!pendingCate?.id) return
+    try {
+      await deleteDictCateAPI(String(pendingCate.id))
+      showToast(t('common.table_view.delete_success'), 'success')
+      await pageConfig.fetchTableData?.()
+    } catch (e: any) {
+      console.log(
+        '删除分类失败',
+        e.message,
+      )
+    } finally {
+      closeCateDelete()
+      setTreeReloadSignal((n) => n + 1)
+    }
+  }
+
+  const handleDataEdit = useCallback(
+    (payload: { data?: any }) => {
+      const record = payload?.data
+      dataModalRef.current?.open({
+        opeType: 'edit',
+        opeId: record?.id,
+        data: { record, dictTypeId: record?.dictTypeId },
+      })
+    },
+    [],
+  )
+
+  const handleSetDictDefault = useCallback(
+    async (record: any) => {
+      const id = record?.id
+      if (id === undefined || id === null || String(id).trim() === '') return
+      try {
+        await setDictDataDefaultAPI(String(id))
+        showToast(t('system.dict.set_default_success'), 'success')
+        await pageConfig.fetchTableData?.()
+      } catch (e) {
+        console.log(
+          e instanceof Error ? e.message : t('system.dict.set_default_fail'),
+        )
+      }
+    },
+    [pageConfig, showToast, t],
+  )
+
+  const columns = useMemo(
+    () => [
+      {
+        title: 'system.dict.col_name',
+        key: 'name',
+        align: ALIGN.CENTER,
+      },
+      {
+        title: 'system.dict.field_value',
+        key: 'value',
+        align: ALIGN.CENTER,
+      },
+      {
+        title: 'common.sort_order',
+        key: 'sortOrder',
+        align: ALIGN.CENTER,
+        render: (_: unknown, data: any) =>
+          data?.sortOrder != null ? data.sortOrder : '-',
+      },
+      {
+        title: 'common.status',
+        key: 'status',
+        align: ALIGN.CENTER,
+        render: (status: unknown) => {
+          return (
+            <div className="flex justify-center">
+              <CxTag.Enabled value={status} />
+            </div>
+          )
+        },
+      },
+      {
+        title: 'system.dict.field_default_flag',
+        key: 'defaultFlag',
+        align: ALIGN.CENTER,
+        render: (_: unknown, data: any) => {
+          const isDefault = Boolean(data?.defaultFlag)
+          return (
+            <div className="flex justify-center">
+              <CxTag.YesNo value={isDefault ? 1 : 0} color={isDefault ? 'success' : 'default'} />
+            </div>
+          )
+        },
+      },
+      {
+        title: 'common.actions',
+        key: 'action',
+        align: ALIGN.LEFT,
+        render: (_: unknown, data: any) => {
+          const isEnabled = Number(data?.status) === 1
+          const isDefault = Boolean(data?.defaultFlag)
+          return (
+            <div className="flex flex-wrap justify-start gap-2 items-center">
+              {hasPermission('dict:enable') && !isEnabled && (
+                <CxButton.IconEnable
+                  onClick={() =>
+                    pageConfig.onStatusToggle?.({
+                      nextStatus: 1,
+                      data,
+                    })
+                  }
+                />
+              )}
+              {hasPermission('dict:disable') && isEnabled && (
+                <CxButton.IconDisable
+                  onClick={() =>
+                    pageConfig.onStatusToggle?.({
+                      nextStatus: 0,
+                      data,
+                    })
+                  }
+                />
+              )}
+              {hasPermission('dict:edit') && (
+                <CxButton.IconEdit
+                  onClick={() =>
+                    pageConfig.onEdit?.({
+                      type: 'edit',
+                      data,
+                    })
+                  }
+                />
+              )}
+              {hasPermission('dict:delete') && (
+                <CxButton.IconDelete onClick={() => pageConfig.onDelete?.(data)} />
+              )}
+              {hasPermission('dict:set-default') && !isDefault && (
+                <CxButton.IconSetDefault
+                  tooltipTitle={t('system.dict.action_set_default')}
+                  onClick={() => void handleSetDictDefault(data)}
+                />
+              )}
+            </div>
+          )
+        },
+      },
+    ],
+    [t, hasPermission, handleSetDictDefault],
+  )
+
+  // 与 system/role 一致：单一 pageConfig，列与 ListPageView 注入的 onDelete / onStatusToggle 同一引用
+  pageConfig.treeReloadSignal = treeReloadSignal
+  pageConfig.onEdit = handleDataEdit
+
+  return (
+    <>
+      <ListPageView
+        columns={columns}
+        headerActions={
+          hasPermission('dict:cate:add') ? (
+            <CxButton.Add
+              onClick={() => {
+                cateModalRef.current?.open({ opeType: 'add' })
+              }}>
+              {t('system.dict.cate_add_root')}
+            </CxButton.Add>
+          ) : null
+        }
+        pageConfig={pageConfig}
+        searchAreaExtra={({ tree, searchButtonSize }) => {
+          const node = tree?.selectedNode as { id?: string | number } | null
+          const dictTypeId = node?.id
+          if (dictTypeId === undefined || dictTypeId === null || String(dictTypeId) === '') {
+            return null
+          }
+          if (!hasPermission('dict:add')) return null
+          return (
+            <CxButton.Add
+              size={toCxSearchButtonSize(searchButtonSize)}
+              onClick={() =>
+                dataModalRef.current?.open({
+                  opeType: 'add',
+                  data: { dictTypeId: String(dictTypeId) },
+                })
+              }>
+              {t('system.dict.data_add')}
+            </CxButton.Add>
+          )
+        }}
+        tableActions={(ctx) =>
+          renderTableActions(ctx, hasPermission, cateModalRef, openCateDelete)
+        }
+      />
+      <DictCateSubmitModal
+        ref={cateModalRef}
+        onOk={async () => {
+          setTreeReloadSignal((n) => n + 1)
+          await pageConfig.fetchTableData?.()
+        }}
+        onCancel={() => {
+          // 取消时的清理逻辑(可选)
+        }}
+      />
+      <SubmitModal
+        ref={dataModalRef}
+        onOk={async () => {
+          await pageConfig.fetchTableData?.()
+        }}
+        onCancel={() => {
+          // 取消时的清理逻辑(可选)
+        }}
+      />
+      <ConfirmDialog
+        cancelText={t('common.cancel')}
+        confirmText={t('common.confirm')}
+        danger
+        isOpen={cateDeleteOpen}
+        message={t('system.dict.cate_delete_confirm', {
+          name: String(pendingCate?.name ?? ''),
+        })}
+        title={t('common.confirm')}
+        onClose={closeCateDelete}
+        onConfirm={confirmCateDelete}
+      />
+    </>
+  )
+}
+
+export default IndexView