87 lines
3.0 KiB
TypeScript
87 lines
3.0 KiB
TypeScript
import { message, Modal, Pagination } from "antd";
|
|
import ShareCodeList from "./ShareCodeList";
|
|
import { useCodeManageContext } from "../CodeManageContext";
|
|
import { useEffect, useState } from "react";
|
|
import { ExclamationCircleFilled } from "@ant-design/icons";
|
|
import CodeManageEdit from "./CodeManageEdit";
|
|
import dayjs from "dayjs";
|
|
export default function CodeMangeDisplay() {
|
|
const { isLoading, currentShareCodes, pageSize, currentPage,
|
|
setCurrentPage, deletShareCode, editForm,
|
|
updateCode, setCurrentCodeId, setCurrentCode, currentCode
|
|
} = useCodeManageContext();
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
const [formLoading, setFormLoading] = useState(false);
|
|
const { confirm } = Modal;
|
|
const handleEdit = (id: string, expiresAt: Date, canUseTimes: number, code: string) => {
|
|
console.log('编辑分享码:', id);
|
|
setCurrentCodeId(id)
|
|
setModalOpen(true);
|
|
setCurrentCode(code)
|
|
editForm.setFieldsValue({
|
|
expiresAt: dayjs(expiresAt),
|
|
canUseTimes: canUseTimes
|
|
});
|
|
};
|
|
const handleEditOk = () => {
|
|
const expiresAt = editForm.getFieldsValue().expiresAt.tz('Asia/Shanghai').toDate()
|
|
const canUseTimes = Number(editForm.getFieldsValue().canUseTimes)
|
|
updateCode(expiresAt, canUseTimes)
|
|
message.success('分享码已更新')
|
|
setModalOpen(false)
|
|
}
|
|
const handleDelete = (id: string) => {
|
|
console.log('删除分享码:', id);
|
|
confirm({
|
|
title: '确定删除该分享码吗',
|
|
icon: <ExclamationCircleFilled />,
|
|
content: '',
|
|
okText: '删除',
|
|
okType: 'danger',
|
|
cancelText: '取消',
|
|
async onOk() {
|
|
deletShareCode(id)
|
|
message.success('分享码已删除')
|
|
},
|
|
onCancel() {
|
|
},
|
|
});
|
|
};
|
|
useEffect(() => {
|
|
console.log('currentShareCodes:', currentShareCodes);
|
|
}, [currentShareCodes]);
|
|
return <>
|
|
<div className="w-full min-h-[720px] mx-auto">
|
|
<ShareCodeList
|
|
data={currentShareCodes?.items}
|
|
loading={isLoading}
|
|
onEdit={handleEdit}
|
|
onDelete={handleDelete}
|
|
/>
|
|
</div>
|
|
<div className="py-4 mt-10 w-2/3 mx-auto flex justify-center">
|
|
<Pagination
|
|
defaultCurrent={currentPage}
|
|
total={currentShareCodes?.totalPages * pageSize}
|
|
pageSize={pageSize}
|
|
onChange={(page, pageSize) => {
|
|
setCurrentPage(page);
|
|
}}
|
|
/>
|
|
</div>
|
|
<Modal
|
|
width={550}
|
|
onOk={() => {
|
|
handleEditOk()
|
|
}}
|
|
centered
|
|
open={modalOpen}
|
|
confirmLoading={formLoading}
|
|
onCancel={() => {
|
|
setModalOpen(false);
|
|
}}
|
|
title={`编辑分享码：${currentCode}`}>
|
|
<CodeManageEdit></CodeManageEdit>
|
|
</Modal>
|
|
</>
|
|
} |