feat: 新增对象储存管理页面以及 api 对接

src/locales/lang/en_US/sys.json

@@ -160,6 +160,10 @@
             "base": {
                 "index": "Base",
                 "area": "Area"
+            },
+            "resource": {
+                "index": "Resource",
+                "ossc": "Oss"
             }
         }
     }

src/locales/lang/zh_CN/sys.json

@@ -158,6 +158,10 @@
             "base": {
                 "index": "基础配置",
                 "area": "行政区划"
+            },
+            "resource": {
+                "index": "资源管理",
+                "ossc": "对象存储"
             }
         }
     }

src/pages/resource/index.page.tsx

@@ -0,0 +1,3 @@
+export default function Resource() {
+    return <div>resource</div>;
+}

src/pages/resource/osscs/constants.tsx

@@ -0,0 +1,170 @@
+import { DeleteOutlined, DiffOutlined, EditOutlined } from '@ant-design/icons';
+import { Button, Space, Tag, Tooltip } from 'antd';
+import { ColumnsType } from 'antd/es/table';
+
+import { dayjsFormat } from '@/utils/helpers';
+
+export interface InputType {
+    name?: string;
+    orgId?: number;
+    timeRange?: string;
+    rangePicker?: string;
+    state?: boolean;
+    workDescribe?: string;
+    page?: number;
+    limit?: number;
+}
+
+export interface OutputType {
+    id?: number;
+    code?: string;
+    category?: string;
+    bucketName?: string;
+    accessKey?: string;
+    secretKey?: string;
+    endpoint?: string;
+    describe?: string;
+    state?: boolean;
+    deletedAt?: Date;
+    createdAt?: Date;
+    createdBy?: number;
+    updatedAt?: Date;
+    updatedBy?: number;
+}
+
+interface IProps {
+    onOpenFormHandler: (clickOne: OutputType) => void;
+    onDelHandler: (ids: number[]) => void;
+    onOpenDetailHanler: (clickOne: OutputType) => void;
+}
+
+export const translateSex = (sex: string | undefined) => {
+    if (sex === 'M') {
+        return '男';
+    }
+    if (sex === 'W') {
+        return '女';
+    }
+    return '未知';
+};
+
+export const columns: ({
+    onOpenFormHandler,
+    onDelHandler,
+    onOpenDetailHanler,
+}: IProps) => ColumnsType<OutputType> = ({
+    onOpenFormHandler,
+    onDelHandler,
+    onOpenDetailHanler,
+}) => [
+    {
+        title: '种类',
+        dataIndex: 'osscEchoDto',
+        key: 'category',
+        render: (osscEchoDto) => <Tag color="blue">{osscEchoDto?.category}</Tag>,
+        width: 100,
+        fixed: 'left',
+    },
+    {
+        title: '资源编码',
+        dataIndex: 'code',
+        width: 150,
+    },
+    {
+        title: '资源地址',
+        dataIndex: 'endpoint',
+        render: (endpoint) => (
+            <Tooltip placement="topLeft" title={endpoint}>
+                {endpoint}
+            </Tooltip>
+        ),
+        ellipsis: {
+            showTitle: false,
+        },
+        width: 250,
+    },
+    {
+        title: '空间名',
+        dataIndex: 'bucketName',
+        render: (bucketName) => (
+            <Tooltip placement="topLeft" title={bucketName}>
+                {bucketName}
+            </Tooltip>
+        ),
+        ellipsis: {
+            showTitle: false,
+        },
+        width: 130,
+    },
+    {
+        title: 'accessKey',
+        dataIndex: 'accessKey',
+        render: (accessKey) => (
+            <Tooltip placement="topLeft" title={accessKey}>
+                {accessKey}
+            </Tooltip>
+        ),
+        ellipsis: {
+            showTitle: false,
+        },
+        width: 200,
+    },
+    {
+        title: 'secretKey',
+        dataIndex: 'secretKey',
+        render: (secretKey) => (
+            <Tooltip placement="topLeft" title={secretKey}>
+                {secretKey}
+            </Tooltip>
+        ),
+        ellipsis: {
+            showTitle: false,
+        },
+        width: 200,
+    },
+    {
+        title: '描述',
+        dataIndex: 'description',
+        width: 175,
+    },
+    {
+        title: '创建时间',
+        dataIndex: 'createdAt',
+        render: (createdAt) => dayjsFormat(createdAt),
+    },
+    {
+        title: '状态',
+        dataIndex: 'state',
+        render: (state) => <Tag color={state ? 'green' : 'volcano'}>{state ? '启用' : '禁用'}</Tag>,
+        fixed: 'right',
+        width: 80,
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 180,
+        render: (_, record) => (
+            <Space size="small">
+                <Button
+                    key="detail"
+                    type="text"
+                    icon={<DiffOutlined />}
+                    onClick={() => onOpenDetailHanler(record)}
+                />
+                <Button
+                    key="edit"
+                    type="text"
+                    icon={<EditOutlined />}
+                    onClick={() => onOpenFormHandler(record)}
+                />
+                <Button
+                    key="del"
+                    type="text"
+                    icon={<DeleteOutlined />}
+                    onClick={() => onDelHandler([record.id!])}
+                />
+            </Space>
+        ),
+    },
+];

src/pages/resource/osscs/detail.page.tsx

@@ -0,0 +1,87 @@
+import { Descriptions, DescriptionsProps, Modal, Radio } from 'antd';
+
+import { DictMapListType } from '@/pages/setting/dictionaries/constants';
+import { dayjsFormat } from '@/utils/helpers';
+
+import { OutputType } from './constants';
+
+interface OsscDetailPageProps {
+    clickOne?: OutputType;
+    dictListTypes: DictMapListType | undefined;
+    onClose: () => void;
+}
+
+export const OsscDetailPage: React.FC<OsscDetailPageProps> = ({
+    clickOne,
+    dictListTypes,
+    onClose,
+}) => {
+    const items: DescriptionsProps['items'] = [
+        {
+            key: 'category',
+            label: '种类',
+            children: (
+                <Radio.Group disabled buttonStyle="solid" value={clickOne?.category}>
+                    {dictListTypes &&
+                        dictListTypes?.OSSC_CATEGORY.map((item) => (
+                            <Radio key={item.id?.toString()} value={item.code}>
+                                {item.name}
+                            </Radio>
+                        ))}
+                </Radio.Group>
+            ),
+        },
+        {
+            key: 'code',
+            label: '资源编码',
+            children: clickOne?.code,
+        },
+        {
+            key: 'endpoint',
+            label: '资源地址',
+            children: clickOne?.endpoint,
+        },
+        {
+            key: 'bucketName',
+            label: '空间名',
+            children: clickOne?.bucketName,
+        },
+        {
+            key: 'accessKey',
+            label: 'accessKey',
+            children: clickOne?.accessKey,
+        },
+        {
+            key: 'secretKey',
+            label: 'secretKey',
+            children: clickOne?.secretKey,
+        },
+        {
+            key: 'describe',
+            label: '描述',
+            children: clickOne?.describe,
+        },
+        {
+            key: 'createdAt',
+            label: '创建时间',
+            children: dayjsFormat(clickOne?.createdAt),
+        },
+        {
+            key: 'updatedAt',
+            label: '修改时间',
+            children: dayjsFormat(clickOne?.updatedAt),
+        },
+    ];
+    return (
+        <Modal width={820} onCancel={() => onClose()} open footer={null}>
+            <Descriptions
+                labelStyle={{ textAlign: 'right', width: '100px' }}
+                title="用户详情"
+                bordered
+                column={1}
+                layout="horizontal"
+                items={items}
+            />
+        </Modal>
+    );
+};

src/pages/resource/osscs/edit.page.tsx

@@ -0,0 +1,114 @@
+import { Form, Input, Modal, Radio } from 'antd';
+
+import { DictMapListType } from '@/pages/setting/dictionaries/constants';
+import { useCreateOssc, useUpdateOssc } from '@/services/ossc';
+
+import { OutputType } from './constants';
+
+interface OsscEditFormProps {
+    clickOne?: OutputType;
+    onClose: () => void;
+    dictListTypes: DictMapListType | undefined;
+}
+
+export const OsscEditForm: React.FC<OsscEditFormProps> = ({ clickOne, onClose, dictListTypes }) => {
+    const [form] = Form.useForm();
+    const { mutateAsync: updateMutate } = useUpdateOssc();
+    const { mutateAsync: createMutate } = useCreateOssc();
+    // 表单提交处理
+    const submitHandle = async () => {
+        const values = await form.validateFields();
+        if (clickOne?.id) {
+            updateMutate(values);
+        } else {
+            createMutate(values);
+        }
+        onClose();
+    };
+    return (
+        <Modal
+            width={820}
+            open
+            title={clickOne?.id ? '编辑' : '新建'}
+            okText="提交"
+            cancelText="取消"
+            onCancel={() => onClose()}
+            onOk={submitHandle}
+        >
+            <Form
+                form={form}
+                labelCol={{ span: 4 }}
+                wrapperCol={{ span: 18 }}
+                layout="horizontal"
+                name="form_in_edit"
+                initialValues={clickOne}
+            >
+                <Form.Item name="id" hidden>
+                    <Input />
+                </Form.Item>
+                <Form.Item
+                    name="category"
+                    label="种类"
+                    rules={[{ required: true, message: '种类不能为空' }]}
+                >
+                    <Radio.Group buttonStyle="solid">
+                        {dictListTypes &&
+                            dictListTypes?.OSSC_CATEGORY.map((item) => (
+                                <Radio key={item.id?.toString()} value={item.code}>
+                                    {item.name}
+                                </Radio>
+                            ))}
+                    </Radio.Group>
+                </Form.Item>
+                <Form.Item
+                    name="code"
+                    label="资源编码"
+                    rules={[{ required: true, message: '资源编码不能为空' }]}
+                >
+                    <Input />
+                </Form.Item>
+                <Form.Item
+                    name="endpoint"
+                    label="资源地址"
+                    rules={[{ required: true, message: '资源地址不能为空' }]}
+                >
+                    <Input />
+                </Form.Item>
+                <Form.Item
+                    name="bucketName"
+                    label="空间名"
+                    rules={[{ required: true, message: '空间名不能为空' }]}
+                >
+                    <Input />
+                </Form.Item>
+                <Form.Item
+                    name="accessKey"
+                    label="accessKey"
+                    rules={[{ required: true, message: 'accessKey 不能为空' }]}
+                >
+                    <Input />
+                </Form.Item>
+                <Form.Item
+                    name="secretKey"
+                    label="secretKey"
+                    rules={[{ required: true, message: 'secretKey 不能为空' }]}
+                >
+                    <Input />
+                </Form.Item>
+                <Form.Item
+                    name="state"
+                    label="状态"
+                    rules={[{ required: true, message: '状态不能为空' }]}
+                >
+                    <Radio.Group buttonStyle="solid">
+                        <Radio.Button value>启用</Radio.Button>
+                        <Radio.Button value={false}>禁用</Radio.Button>
+                    </Radio.Group>
+                </Form.Item>
+                <Form.Item name="describe" label="描述">
+                    <Input />
+                </Form.Item>
+            </Form>
+        </Modal>
+    );
+};