feat: 添加字典详情

src/pages/system/dict/config.tsx

@@ -13,6 +13,7 @@ export const baseDictTypeColumns: ProColumns<DictTypeVO>[] = [
     dataIndex: 'id',
     width: 80,
     align: 'left',
+    hideInSearch: true,
   },
   {
     title: '字典名称',
@@ -41,6 +42,7 @@ export const baseDictTypeColumns: ProColumns<DictTypeVO>[] = [
     title: '备注',
     dataIndex: 'remark',
     width: 120,
+    hideInSearch: true, // 在搜索表单中隐藏
   },
   {
     title: '创建时间',
@@ -63,7 +65,7 @@ export const baseDictTypeColumns: ProColumns<DictTypeVO>[] = [
   },
 ];
 
-export const formColumns = (_type: string): ProFormColumnsType[] => [
+export const formColumns = (type: string): ProFormColumnsType[] => [
   {
     title: '字典名称',
     dataIndex: 'name',
@@ -84,6 +86,9 @@ export const formColumns = (_type: string): ProFormColumnsType[] => [
     title: '字典类型',
     dataIndex: 'type',
     valueType: 'text',
+    fieldProps: {
+      disabled: type === 'update',
+    },
     colProps: {
       span: 12,
     },

src/pages/system/dict/data/config.tsx

@@ -0,0 +1,189 @@
+import type {
+  ProColumns,
+  ProFormColumnsType,
+} from '@ant-design/pro-components';
+import { Tag } from 'antd';
+import dayjs from 'dayjs';
+import { tenantStatus } from '@/constants';
+import type { DictDataVO } from '@/services/system/dict/dict.data';
+import { getStatusLabel } from '@/utils/constant';
+
+export const baseDictDataColumns: ProColumns<DictDataVO>[] = [
+  {
+    title: '字典编码',
+    dataIndex: 'id',
+    width: 80,
+    hideInSearch: true,
+  },
+  {
+    title: '字典标签',
+    dataIndex: 'label',
+    width: 120,
+  },
+  {
+    title: '字典键值',
+    dataIndex: 'value',
+    width: 120,
+  },
+  {
+    title: '字典排序',
+    dataIndex: 'sort',
+    width: 80,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 80,
+    render: (_, record) => (
+      <Tag color={record.status === 1 ? 'red' : 'green'}>
+        {getStatusLabel(tenantStatus, record.status)}
+      </Tag>
+    ),
+  },
+  {
+    title: '颜色类型',
+    dataIndex: 'colorType',
+    width: 80,
+  },
+  {
+    title: 'CSS Class',
+    dataIndex: 'cssClass',
+    width: 120,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    width: 120,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    valueType: 'dateRange',
+    search: {
+      transform: (value) => {
+        return {
+          'createTime[0]': dayjs(value[0])
+            .startOf('day')
+            .format('YYYY-MM-DD HH:mm:ss'),
+          'createTime[1]': dayjs(value[1])
+            .endOf('day')
+            .format('YYYY-MM-DD HH:mm:ss'),
+        };
+      },
+    },
+    render: (_, record: DictDataVO) =>
+      dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
+  },
+];
+
+export const formColumns = (_type: string): ProFormColumnsType[] => [
+  {
+    title: '字典类型',
+    dataIndex: 'dictType',
+    fieldProps: {
+      disabled: true,
+    },
+  },
+  {
+    title: '字典标签',
+    dataIndex: 'label',
+    formItemProps: {
+      rules: [
+        {
+          required: true,
+          message: '请输入字典标签',
+        },
+      ],
+    },
+  },
+  {
+    title: '字典键值',
+    dataIndex: 'value',
+    formItemProps: {
+      rules: [
+        {
+          required: true,
+          message: '请输入字典键值',
+        },
+      ],
+    },
+  },
+  {
+    title: '显示排序',
+    dataIndex: 'sort',
+    valueType: 'digit',
+    fieldProps: {
+      min: 0,
+      max: 9999,
+    },
+    formItemProps: {
+      rules: [
+        {
+          required: true,
+          message: '请输入排序',
+        },
+      ],
+    },
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    valueType: 'select',
+    fieldProps: {
+      options: [
+        {
+          label: '启用',
+          value: 1,
+        },
+        {
+          label: '禁用',
+          value: 0,
+        },
+      ],
+    },
+    formItemProps: {
+      rules: [
+        {
+          required: true,
+        },
+      ],
+    },
+  },
+  {
+    title: '颜色类型',
+    dataIndex: 'colorType',
+    valueType: 'select',
+    fieldProps: {
+      options: [
+        {
+          label: '默认(waiting)',
+          value: 'waiting',
+        },
+        {
+          label: '成功(success)',
+          value: 'success',
+        },
+        {
+          label: '信息(processing)',
+          value: 'processing',
+        },
+        {
+          label: '失败(error)',
+          value: 'error',
+        },
+        {
+          label: '警告(warning)',
+          value: 'warning',
+        },
+      ],
+    },
+  },
+  {
+    title: 'CSS Class',
+    dataIndex: 'cssClass',
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+  },
+];

src/pages/system/dict/data/index.tsx

@@ -0,0 +1,139 @@
+import { PlusOutlined } from '@ant-design/icons';
+import type { ActionType, ProColumns } from '@ant-design/pro-components';
+import { useParams } from '@umijs/max';
+import { Popconfirm } from 'antd';
+import React, { useCallback, useRef, useState } from 'react';
+import ConfigurableDrawerForm, {
+  type ConfigurableDrawerFormRef,
+} from '@/components/DrawerForm';
+import EnhancedProTable from '@/components/EnhancedProTable';
+import type { ToolbarAction } from '@/components/EnhancedProTable/types';
+import { formStatusType } from '@/constants';
+import {
+  createDictData,
+  type DictDataVO,
+  deleteDictData,
+  getDictDataPage,
+  updateDictData,
+} from '@/services/system/dict/dict.data';
+import { baseDictDataColumns, formColumns } from './config';
+
+const SyStemDictData = () => {
+  const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
+  const tableRef = useRef<ActionType>(null);
+
+  const [type, setType] = useState<'create' | 'update'>('create');
+  const [id, setId] = useState<number>(0);
+
+  const routerParams = useParams();
+
+  console.log(routerParams);
+
+  const handleEdit = (record: DictDataVO) => {
+    setType('update');
+    setId(record.id);
+
+    configurableDrawerRef.current?.open(record);
+  };
+
+  const onFetch = async (params: { pageSize?: number; current?: number }) => {
+    const data = await getDictDataPage({
+      ...params,
+      dictType: routerParams.type,
+      pageNo: params.current,
+      pageSize: params.pageSize,
+    });
+    return {
+      data: data.list,
+      success: true,
+      total: data.total,
+    };
+  };
+
+  const handleAdd = () => {
+    setType('create');
+    configurableDrawerRef.current?.open({
+      dictType: routerParams.type,
+    });
+  };
+
+  const handleSubmit = useCallback(
+    async (values: DictDataVO) => {
+      if (type === 'create') {
+        await createDictData(values);
+      } else {
+        await updateDictData({
+          ...values,
+          id,
+        });
+      }
+      tableRef.current?.reload();
+      return true;
+    },
+    [type, id],
+  );
+
+  const toolbarActions: ToolbarAction[] = [
+    {
+      key: 'add',
+      label: '新建',
+      type: 'primary',
+      icon: <PlusOutlined />,
+      onClick: handleAdd,
+    },
+  ];
+
+  const actionColumns: ProColumns<DictDataVO> = {
+    title: '操作',
+    dataIndex: 'option',
+    valueType: 'option',
+    fixed: 'right',
+    width: 120,
+    render: (
+      _text: React.ReactNode,
+      record: DictDataVO,
+      _: any,
+      action: any,
+    ) => [
+      <a key="editable" onClick={() => handleEdit(record)}>
+        编辑
+      </a>,
+      <Popconfirm
+        title="是否删除?"
+        key="delete"
+        onConfirm={async () => {
+          await deleteDictData(record.id);
+          action?.reload();
+        }}
+        okText="是"
+        cancelText="否"
+      >
+        <a>删除</a>
+      </Popconfirm>,
+    ],
+  };
+
+  const columns = [...baseDictDataColumns, actionColumns];
+  return (
+    <>
+      <EnhancedProTable<DictDataVO>
+        ref={tableRef}
+        columns={columns}
+        request={onFetch}
+        toolbarActions={toolbarActions}
+        headerTitle="租户列表"
+        showIndex={false}
+        showSelection={false}
+      />
+
+      <ConfigurableDrawerForm
+        ref={configurableDrawerRef}
+        title={formStatusType[type]}
+        columns={formColumns(type)}
+        onSubmit={handleSubmit}
+      />
+    </>
+  );
+};
+
+export default SyStemDictData;

src/pages/system/dict/index.tsx

@@ -1,5 +1,6 @@
 import { PlusOutlined } from '@ant-design/icons';
 import type { ActionType, ProColumns } from '@ant-design/pro-components';
+import { history } from '@umijs/max';
 import { Popconfirm } from 'antd';
 import React, { useCallback, useRef, useState } from 'react';
 import ConfigurableDrawerForm, {
@@ -24,6 +25,8 @@ const SyStemDict = () => {
   const [type, setType] = useState<'create' | 'update'>('create');
   const [id, setId] = useState<number>(0);
 
+  //获取路由数据
+
   const handleEdit = (record: DictTypeVO) => {
     setType('update');
     setId(record.id);
@@ -102,6 +105,16 @@ const SyStemDict = () => {
       >
         <a>删除</a>
       </Popconfirm>,
+      <a
+        key="data"
+        onClick={() =>
+          history.push({
+            pathname: '/system/dict/data/' + record.type,
+          })
+        }
+      >
+        数据
+      </a>,
     ],
   };