add: dict-data&dict-type

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

@@ -0,0 +1,143 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Space, Table, Button, Image, Divider, Card, Input, Form } from 'antd';
+import type { InputRef } from 'antd';
+import type { ColumnType, ColumnsType } from 'antd/es/table';
+import type { FilterConfirmProps, TableRowSelection } from 'antd/es/table/interface';
+import { t } from '@/utils/i18n';
+import { PlusOutlined, ExclamationCircleFilled, DeleteOutlined, SearchOutlined } from '@ant-design/icons';
+import { antdUtils } from '@/utils/antd';
+import { useRequest } from '@/hooks/use-request';
+import type { DictTypeVO, DictDataVO, DictDataPageReqVO } from '@/models'
+import dictDataService from '@/request/service/system-dictdata';
+
+const { Search } = Input;
+
+interface DictDataProps {
+    data?: DictTypeVO | null;
+}
+
+export default (props: DictDataProps) => {
+
+    const showDeleteConfirm = (item: DictDataVO) => {
+        antdUtils.modal?.confirm({
+            title: `确认删除值为: ${item.value} 的字典吗?`,
+            icon: <ExclamationCircleFilled />,
+            content: '请注意删除以后不可恢复！',
+            okText: '删除',
+            okType: 'danger',
+            cancelText: '取消',
+            onOk() {
+                return new Promise(async (resolve) => {
+                    const [error, { code, msg }] = await deleteDictDataApi(item.id);
+                    if (error || code !== 0) {
+                        antdUtils.message?.open({ type: 'error', content: msg ?? '操作失败' })
+                    } else {
+                        antdUtils.message?.open({ type: 'success', content: '删除成功' })
+                    }
+                    await load();
+                    resolve('')
+                }).catch(() => antdUtils.message?.open({
+                    type: 'error',
+                    content: '操作失败',
+                }));
+            },
+            onCancel() {
+            },
+        });
+    };
+
+    const [editorVisable, seEditorVisable] = useState<boolean>(false);
+    const [editData, seEditData] = useState<DictDataVO>();
+    const [dataSource, setDataSource] = useState<DictDataVO[]>([]);
+    const [total, setTotal] = useState(0);
+
+    const { runAsync: getDictDataPageApi } = useRequest(dictDataService.getDictDataPageApi, { manual: true });
+    const { runAsync: deleteDictDataApi } = useRequest(dictDataService.deleteDictDataApi, { manual: true });
+
+    const load = async () => {
+        const [error, { data }] = await getDictDataPageApi({
+            dictType: props.data?.type,
+            pageSize:10,
+            pageNo:1
+        });
+        if (!error) {
+            setDataSource(data.list);
+            setTotal(data.total);
+        }
+    };
+
+
+    const columns: ColumnsType<DictDataVO> = [
+        {
+            title: '数据标签',
+            dataIndex: 'label',
+            key: 'label',
+            align: 'center',
+            width: 150,
+        },
+        {
+            title: '数据键值',
+            dataIndex: 'value',
+            key: 'value',
+            align: 'center',
+            width: 120,
+        },
+
+        {
+            title: '状态',
+            key: 'status',
+            dataIndex: 'status',
+            align: 'center',
+            width: 120,
+        },
+        {
+            title: t("QkOmYwne" /* 操作 */),
+            key: 'action',
+            align: 'center',
+            render: (_, record) => (
+                <Space size="middle" split={(
+                    <Divider type='vertical' />
+                )}>
+                    <a
+                        onClick={() => {
+                            // setCreateVisible(true);
+                            // setCurRowData(record);
+                        }}>
+                        编辑
+                    </a>
+                    <a
+                        onClick={() => {
+                            showDeleteConfirm(record)
+                        }}>
+                        删除
+                    </a>
+                </Space>
+            ),
+            width: 150,
+        },
+    ];
+
+    useEffect(() => {
+        load();
+    }, [props]);
+
+    return (
+        <div>
+            <div className="py-[8px] flex flex-row-reverse">
+                <Button className="ml-5" type='primary' size='middle' icon={<PlusOutlined />}> 添加字典数据 </Button>
+            </div>
+            <Table rowKey="id"
+                scroll={{ x: true }}
+                columns={columns}
+                dataSource={dataSource}
+                className='bg-transparent'
+                pagination={{
+                    pageSize: 10,
+                    current: 1,
+                    total,
+                    position: ['bottomRight']
+                }}
+            />
+        </div>
+    );
+};

src/pages/system/dict/index.tsx

@@ -0,0 +1,166 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Space, Table, Button, Image, Divider, Card, Input, Form } from 'antd';
+import type { InputRef } from 'antd';
+import type { ColumnType, ColumnsType } from 'antd/es/table';
+import type { FilterConfirmProps, TableRowSelection } from 'antd/es/table/interface';
+import { t } from '@/utils/i18n';
+import { PlusOutlined, ExclamationCircleFilled, DeleteOutlined, SearchOutlined } from '@ant-design/icons';
+import { antdUtils } from '@/utils/antd';
+import { useRequest } from '@/hooks/use-request';
+import type { DictTypeVO, DictTypePageReqVO, DictDataVO, DictDataPageReqVO } from '@/models'
+import dictDataService from '@/request/service/system-dictdata';
+import dictTypeService from '@/request/service/system-dicttype';
+import DictData from './dict-data'
+
+const { Search } = Input;
+
+
+export default () => {
+
+    const showDeleteConfirm = (item: DictTypeVO) => {
+        antdUtils.modal?.confirm({
+            title: `确认删除名称为: ${item.name} 的字典吗?`,
+            icon: <ExclamationCircleFilled />,
+            content: '请注意删除以后不可恢复！',
+            okText: '删除',
+            okType: 'danger',
+            cancelText: '取消',
+            onOk() {
+                return new Promise((resolve, reject) => {
+                    setTimeout(() => {
+                        antdUtils.message?.open({
+                            type: 'success',
+                            content: '删除成功',
+                        });
+                        resolve(null)
+                    }, 1000);
+
+                }).catch(() => antdUtils.message?.open({
+                    type: 'error',
+                    content: '操作失败',
+                }));
+            },
+            onCancel() {
+            },
+        });
+    };
+
+    const [editorVisable, seEditorVisable] = useState<boolean>(false);
+    const [editData, seEditData] = useState<DictTypeVO>();
+    const [dataSource, setDataSource] = useState<DictTypeVO[]>([]);
+    const [total, setTotal] = useState(0);
+    const [searchFrom] = Form.useForm();
+
+    const { runAsync: getDictTypePageApi } = useRequest(dictTypeService.getDictTypePageApi, { manual: true });
+    const { runAsync: deleteDictTypeApi } = useRequest(dictTypeService.deleteDictTypeApi, { manual: true });
+
+    const { runAsync: getDictDataPageApi } = useRequest(dictDataService.getDictDataPageApi, { manual: true });
+    const { runAsync: deleteDictDataApi } = useRequest(dictDataService.deleteDictDataApi, { manual: true });
+
+    const load = async () => {
+        const [error, { data }] = await getDictTypePageApi(searchFrom.getFieldsValue());
+        if (!error) {
+            setDataSource(data.list);
+            setTotal(data.total);
+        }
+    };
+
+    const columns: ColumnsType<DictTypeVO> = [
+        {
+            title: '字典名称',
+            dataIndex: 'name',
+            key: 'name',
+            align: 'center',
+            width: 150,
+        },
+        {
+            title: '字典类型',
+            dataIndex: 'type',
+            key: 'type',
+            align: 'center',
+            width: 120,
+        },
+
+        {
+            title: '状态',
+            key: 'status',
+            dataIndex: 'status',
+            align: 'center',
+            width: 120,
+        },
+        {
+            title: t("QkOmYwne" /* 操作 */),
+            key: 'action',
+            align: 'center',
+            render: (_, record) => (
+                <Space size="middle" split={(
+                    <Divider type='vertical' />
+                )}>
+                    <a
+                        onClick={() => {
+                            // setCreateVisible(true);
+                            // setCurRowData(record);
+                        }}>
+                        编辑
+                    </a>
+                    <a
+                        onClick={() => {
+                            showDeleteConfirm(record)
+                        }}>
+                        删除
+                    </a>
+                </Space>
+            ),
+            width: 150,
+        },
+    ];
+
+
+    const [isDisableDelete, setDisableDelete] = useState<boolean>(true)
+    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+
+    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
+        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
+        setSelectedRowKeys(newSelectedRowKeys);
+        setDisableDelete(newSelectedRowKeys.length === 0)
+    };
+
+    useEffect(() => {
+        load();
+    }, []);
+
+    return (
+        <>
+            <div className='flex flex-row'>
+                <Card className='basis-1/2  w-[100px] mb-[10px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]'
+                    bodyStyle={{
+                        paddingTop: 0,
+                        paddingBottom: 0
+                    }}>
+                    <div className="py-[8px] flex flex-row-reverse">
+                        <Button className="ml-5" type='primary' size='middle' icon={<PlusOutlined />}> 新增字典 </Button>
+                    </div>
+                    <Table rowKey="id"
+                        scroll={{ x: true }}
+                        columns={columns}
+                        dataSource={dataSource}
+                        className='bg-transparent'
+                        pagination={{
+                            pageSize: 10,
+                            current: 1,
+                            total,
+                            position: ['bottomRight']
+                        }}
+                    />
+                </Card>
+                <Card className='basis-1/2 mb-[10px] ml-[10px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]' bodyStyle={{
+                    paddingTop: 0,
+                    paddingBottom: 0
+                }}>
+                    <DictData 
+                    data={dataSource[0]}/>
+                </Card>
+            </div>
+        </>
+    );
+};

src/request/service/system-dictdata.ts

@@ -0,0 +1,41 @@
+import request from '@/request';
+import { DictDataVO, DictDataPageReqVO, DictDataExportReqVO, PageData } from '@/models';
+
+const BASE_URL = '/admin-api/system/dict-data';
+
+export default {
+
+    // 查询字典数据（精简)列表
+    listSimpleDictDataApi: () => {
+        return request.get(`${BASE_URL}/list-all-simple`)
+    },
+
+    // 查询字典数据列表
+    getDictDataPageApi: (params: DictDataPageReqVO) => {
+        return request.get<PageData<DictDataVO>>(`${BASE_URL}/page`, { params })
+    },
+
+    // 查询字典数据详情
+    getDictDataApi: (id: number) => {
+        return request.get(`${BASE_URL}/get?id=${id}`)
+    },
+
+    // 新增字典数据
+    createDictDataApi: (data: DictDataVO) => {
+        return request.post(`${BASE_URL}/create`, data)
+    },
+
+    // 修改字典数据
+    updateDictDataApi: (data: DictDataVO) => {
+        return request.put(`${BASE_URL}/update`, data)
+    },
+
+    // 删除字典数据
+    deleteDictDataApi: (id: number) => {
+        return request.delete(`${BASE_URL}/delete?id=${id}`)
+    },
+    // 导出字典类型数据
+    exportDictDataApi: (params: DictDataExportReqVO) => {
+        return request.get(`${BASE_URL}/export`, { params })
+    }
+};

src/request/service/system-dicttype.ts

@@ -0,0 +1,43 @@
+import request from '@/request';
+import { DictTypeVO, DictTypePageReqVO, DictTypeExportReqVO, PageData } from '@/models';
+
+const BASE_URL = '/admin-api/system/dict-type';
+
+export default {
+
+    // 查询字典（精简)列表
+    listSimpleDictTypeApi: () => {
+        return request.get(`${BASE_URL}/list-all-simple`)
+    },
+
+    // 查询字典列表
+    getDictTypePageApi: (params: DictTypePageReqVO) => {
+        return request.get<PageData<DictTypeVO>>(`${BASE_URL}/page`, { params })
+    },
+
+    // 查询字典详情
+    getDictTypeApi: (id: number) => {
+        return request.get(`${BASE_URL}/get?id=${id}`)
+    },
+
+    // 新增字典
+    createDictTypeApi: (data: DictTypeVO) => {
+        return request.post(`${BASE_URL}/create`, data)
+    },
+
+    // 修改字典
+    updateDictTypeApi: (data: DictTypeVO) => {
+        return request.put(`${BASE_URL}/update`, data)
+    },
+
+    // 删除字典
+    deleteDictTypeApi: (id: number) => {
+        return request.delete(`${BASE_URL}/delete?id=${id}`)
+    },
+    // 导出字典类型
+    exportDictTypeApi: (params: DictTypeExportReqVO) => {
+        return request.get(`${BASE_URL}/export`, { params })
+    }
+};
+
+