263 lines
9.7 KiB
TypeScript
263 lines
9.7 KiB
TypeScript
"use client";
|
|
import { Button, Card, Drawer, Form, Image, Input, InputNumber, message, Modal, Popconfirm, Space, Table } from "antd";
|
|
import { useRef, useState } from "react";
|
|
import { useAntdTable } from "ahooks";
|
|
import { mRequest } from "@/app/_lib/request";
|
|
import { LinkTypeItem } from "@/app/_lib/types";
|
|
import LinkTable from "./LinkTable";
|
|
import ImageUpload from "@/app/_ui/ImageUpload";
|
|
import { useForm } from "antd/es/form/Form";
|
|
import { LinkType } from "@/app/_lib/data/linkType";
|
|
import '@ant-design/v5-patch-for-react-19';
|
|
|
|
export default function Page() {
|
|
const { tableProps, refresh } = useAntdTable(
|
|
async ({ current, pageSize }) => {
|
|
return mRequest<{
|
|
total: number;
|
|
data: LinkTypeItem[]
|
|
}>(
|
|
"GET",
|
|
`/api/linkType?page=${current}&pageSize=${pageSize}`
|
|
).then((res: any) => {
|
|
return {
|
|
total: res?.total || 0,
|
|
list: res?.list || [],
|
|
}
|
|
})
|
|
},
|
|
|
|
)
|
|
const [selectedType, setSelectedType] = useState<undefined | null | LinkType>(
|
|
undefined
|
|
)
|
|
return (
|
|
<>
|
|
|
|
<Card
|
|
title="新链接管理"
|
|
extra={
|
|
<Space>
|
|
<Button onClick={() => {
|
|
refresh()
|
|
}}>刷新</Button>
|
|
<Button
|
|
type="primary"
|
|
onClick={() => {
|
|
setSelectedType(null)
|
|
}}
|
|
>
|
|
添加分类
|
|
</Button>
|
|
</Space>
|
|
}
|
|
>
|
|
<Table<LinkType>
|
|
{...tableProps}
|
|
rowKey="_id"
|
|
expandable={{
|
|
expandedRowRender: (row) => <LinkTable id={row._id} />,
|
|
}}
|
|
columns={[
|
|
{
|
|
title: "名称",
|
|
dataIndex: "label",
|
|
},
|
|
|
|
{
|
|
title: "图标",
|
|
dataIndex: "icon",
|
|
render: (_, item) => (
|
|
<>
|
|
<Image src={item.icon} width={70} ></Image>
|
|
</>
|
|
)
|
|
},
|
|
{
|
|
title: "操作",
|
|
render: (_, item) => (
|
|
<Space>
|
|
<Button
|
|
type="primary"
|
|
ghost
|
|
size="small"
|
|
onClick={() => {
|
|
setSelectedType(item)
|
|
}}
|
|
>
|
|
修改分类
|
|
</Button>
|
|
|
|
<Popconfirm
|
|
title={`确认要删除${item.label}么？`}
|
|
onConfirm={() => {
|
|
mRequest("DELETE", "/api/linkType/" + item._id, {
|
|
returnType: "text",
|
|
}).then(() => {
|
|
refresh()
|
|
message.success("删除成功")
|
|
})
|
|
}}
|
|
>
|
|
<Button type="primary" danger size="small">
|
|
删除
|
|
</Button>
|
|
</Popconfirm>
|
|
</Space>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
</Card>
|
|
|
|
<Drawer
|
|
destroyOnClose
|
|
title={selectedType !== undefined ? selectedType === null ? "添加分类" : "修改分类" : ""}
|
|
open={selectedType !== undefined}
|
|
width={500}
|
|
onClose={() => {
|
|
setSelectedType(undefined)
|
|
}}
|
|
>
|
|
<Form
|
|
labelCol={{ span: 4 }}
|
|
initialValues={selectedType ?
|
|
selectedType
|
|
: {
|
|
priority: 0
|
|
}
|
|
}
|
|
onFinish={async (res) => {
|
|
if (selectedType) {
|
|
await mRequest("PUT", "/api/linkType", {
|
|
_id: selectedType._id, ...res
|
|
})
|
|
} else {
|
|
await mRequest("POST", "/api/linkType", {
|
|
...res,
|
|
})
|
|
}
|
|
refresh()
|
|
setSelectedType(undefined)
|
|
message.success("操作成功")
|
|
}}
|
|
>
|
|
<Form.Item
|
|
name="label"
|
|
label="名称"
|
|
rules={[{ required: true, message: "请输入名称" }]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="icon"
|
|
label="图标"
|
|
rules={[{ required: true, message: "请输入" }]}
|
|
>
|
|
<ImageUpload
|
|
accept="image/*"
|
|
width={80}
|
|
height={80}
|
|
></ImageUpload>
|
|
|
|
</Form.Item>
|
|
<Form.Item
|
|
rules={[{ required: true, message: "请输入优先级" }]}
|
|
name="priority"
|
|
label="优先级"
|
|
>
|
|
<InputNumber min={0} max={99999999} />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="location"
|
|
label="显示位置"
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item className="flex justify-end">
|
|
<Space>
|
|
<Button>
|
|
重置
|
|
</Button>
|
|
<Button type="primary" htmlType="submit">
|
|
确认
|
|
</Button>
|
|
</Space>
|
|
|
|
</Form.Item>
|
|
</Form>
|
|
</Drawer>
|
|
|
|
{/* <Drawer
|
|
forceRender
|
|
title={'添加图标'}
|
|
open={selectedType !== undefined}
|
|
width={500}
|
|
onClose={() => {
|
|
setSelectedType(undefined)
|
|
}}
|
|
|
|
>
|
|
<Form
|
|
form={fo}
|
|
labelCol={{ span: 4 }}
|
|
onFinish={async (res) => {
|
|
if (selectedType) {
|
|
await mRequest("PUT", "/api/linkType", {
|
|
_id: selectedType._id, ...res
|
|
})
|
|
} else {
|
|
await mRequest("POST", "/api/linkType", {
|
|
...res,
|
|
})
|
|
}
|
|
refresh()
|
|
setSelectedType(undefined)
|
|
message.success("操作成功")
|
|
}}
|
|
>
|
|
<Form.Item
|
|
name="label"
|
|
label="名称"
|
|
rules={[{ required: true, message: "请输入名称" }]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="icon"
|
|
label="图标"
|
|
rules={[{ required: true, message: "请输入" }]}
|
|
>
|
|
<ImageUpload
|
|
accept="image/*"
|
|
width={60}
|
|
height={60}
|
|
background={fo?.getFieldValue("icon ")}
|
|
></ImageUpload>
|
|
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="location"
|
|
label="显示位置"
|
|
rules={[{ required: true, message: "请输入链接" }]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item className="flex justify-end">
|
|
<Space>
|
|
<Button>
|
|
重置
|
|
</Button>
|
|
<Button type="primary" htmlType="submit">
|
|
确认
|
|
</Button>
|
|
</Space>
|
|
|
|
</Form.Item>
|
|
</Form>
|
|
|
|
</Drawer> */}
|
|
|
|
</>
|
|
)
|
|
} |