diff --git a/src/compenents/duration-text/index.module.less b/src/compenents/duration-text/index.module.less new file mode 100644 index 0000000..e69de29 diff --git a/src/compenents/duration-text/index.tsx b/src/compenents/duration-text/index.tsx new file mode 100644 index 0000000..719adfa --- /dev/null +++ b/src/compenents/duration-text/index.tsx @@ -0,0 +1,32 @@ +import { useEffect, useState } from "react"; + +interface PropInterface { + duration: number; +} + +export const DurationText = (props: PropInterface) => { + const [hour, setHour] = useState(0); + const [minute, setMinute] = useState(0); + const [second, setSecond] = useState(0); + const duration = props.duration; + + useEffect(() => { + let h = Math.trunc(duration / 3600); + let m = Math.trunc((duration % 3600) / 60); + let s = Math.trunc((duration % 3600) % 60); + + setHour(h); + setMinute(m); + setSecond(s); + }, []); + + return ( + <> + + {hour === 0 ? null : hour + ":"} + {minute >= 10 ? minute : "0" + minute}: + {second >= 10 ? second : "0" + second} + + + ); +}; diff --git a/src/compenents/index.ts b/src/compenents/index.ts index cf684f3..14e38c4 100644 --- a/src/compenents/index.ts +++ b/src/compenents/index.ts @@ -5,4 +5,5 @@ export * from "./upload-image-button"; export * from "./tree-department"; export * from "./back-bar"; export * from "./permission-button"; -export * from "./tree-category"; \ No newline at end of file +export * from "./tree-category"; +export * from "./duration-text"; \ No newline at end of file diff --git a/src/compenents/upload-image-button/index.tsx b/src/compenents/upload-image-button/index.tsx index f4e78a6..6e36056 100644 --- a/src/compenents/upload-image-button/index.tsx +++ b/src/compenents/upload-image-button/index.tsx @@ -103,7 +103,7 @@ export const UploadImageButton = (props: PropsInterface) => { { resetImageList(); }} diff --git a/src/pages/index.ts b/src/pages/index.ts index 95c70e7..703385e 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -22,4 +22,5 @@ export * from "./resource/images"; export * from "./resource/resource-category/index"; export * from "./resource/resource-category/create"; export * from "./resource/resource-category/update"; +export * from "./resource/videos"; diff --git a/src/pages/member/index.tsx b/src/pages/member/index.tsx index d9009bc..bd83210 100644 --- a/src/pages/member/index.tsx +++ b/src/pages/member/index.tsx @@ -35,7 +35,7 @@ export const MemberPage: React.FC = () => { const [selectedRowKeys, setSelectedRowKeys] = useState([]); const [loading, setLoading] = useState(true); const [page, setPage] = useState(1); - const [size, setSize] = useState(10); + const [size, setSize] = useState(12); const [list, setList] = useState([]); const [total, setTotal] = useState(0); const [refresh, setRefresh] = useState(false); @@ -142,7 +142,7 @@ export const MemberPage: React.FC = () => { setEmail(""); setIdCard(""); setPage(1); - setSize(10); + setSize(12); setList([]); setRefresh(!refresh); }; diff --git a/src/pages/resource/images/index.tsx b/src/pages/resource/images/index.tsx index 22d65d5..afb6dec 100644 --- a/src/pages/resource/images/index.tsx +++ b/src/pages/resource/images/index.tsx @@ -37,7 +37,7 @@ export const ResourceImagesPage = () => { const [category_ids, setCategoryIds] = useState([]); // 删除图片 - const removeCategory = (id: number) => { + const removeResource = (id: number) => { if (id === 0) { return; } @@ -116,7 +116,7 @@ export const ResourceImagesPage = () => { removeCategory(item.id)} + onConfirm={() => removeResource(item.id)} okText="确定" cancelText="取消" > diff --git a/src/pages/resource/videos/index.module.less b/src/pages/resource/videos/index.module.less new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/resource/videos/index.tsx b/src/pages/resource/videos/index.tsx new file mode 100644 index 0000000..da74936 --- /dev/null +++ b/src/pages/resource/videos/index.tsx @@ -0,0 +1,182 @@ +import { useEffect, useState } from "react"; +import { + Button, + Row, + Col, + Popconfirm, + Image, + Empty, + Table, + message, + Space, +} from "antd"; +import { resource } from "../../../api"; +import styles from "./index.module.less"; +import { CloseOutlined } from "@ant-design/icons"; +import { UploadImageSub } from "../../../compenents/upload-image-button/upload-image-sub"; +import type { ColumnsType } from "antd/es/table"; +import { dateFormat } from "../../../utils/index"; +import { TreeCategory, DurationText } from "../../../compenents"; +import { UploadVideoButton } from "../../../compenents/upload-video-button"; + +interface DataType { + id: React.Key; + name: string; + created_at: string; + duration: string; +} + +export const ResourceVideosPage = () => { + const [videoList, setVideoList] = useState([]); + const [videosExtra, setVideoExtra] = useState([]); + const [refresh, setRefresh] = useState(false); + const [page, setPage] = useState(1); + const [size, setSize] = useState(12); + const [total, setTotal] = useState(0); + const [loading, setLoading] = useState(true); + const [category_ids, setCategoryIds] = useState([]); + + const columns: ColumnsType = [ + { + title: "ID", + key: "id", + dataIndex: "id", + }, + { + title: "封面", + dataIndex: "id", + render: (id: string) => ( + + ), + }, + { + title: "名称", + dataIndex: "name", + render: (text: string) => {text}, + }, + { + title: "时长", + dataIndex: "id", + render: (id: string) => ( + + ), + }, + { + title: "注册时间", + dataIndex: "created_at", + render: (text: string) => {dateFormat(text)}, + }, + { + title: "操作", + key: "action", + fixed: "right", + width: 100, + render: (_, record: any) => ( + + removeResource(record.id)} + okText="确定" + cancelText="取消" + > + + + + ), + }, + ]; + + // 删除图片 + const removeResource = (id: number) => { + if (id === 0) { + return; + } + resource.destroyResource(id).then(() => { + message.success("删除成功"); + resetVideoList(); + }); + }; + + // 获取视频列表 + const getVideoList = () => { + setLoading(true); + let categoryIds = category_ids.join(","); + resource + .resourceList(page, size, "", "", "", "VIDEO", categoryIds) + .then((res: any) => { + setTotal(res.data.result.total); + setVideoList(res.data.result.data); + setVideoExtra(res.data.videos_extra); + setLoading(false); + }) + .catch((err: any) => { + console.log("错误,", err); + }); + }; + // 重置列表 + const resetVideoList = () => { + setPage(1); + setVideoList([]); + setRefresh(!refresh); + }; + + // 加载视频列表 + useEffect(() => { + getVideoList(); + }, [category_ids, refresh, page, size]); + + const paginationProps = { + current: page, //当前页码 + pageSize: size, + total: total, // 总条数 + onChange: (page: number, pageSize: number) => + handlePageChange(page, pageSize), //改变页码的函数 + showSizeChanger: true, + }; + + const handlePageChange = (page: number, pageSize: number) => { + setPage(page); + setSize(pageSize); + }; + + return ( + <> + + +
+ setCategoryIds(keys)} /> +
+ + +
+
+ { + resetVideoList(); + }} + > +
+
+ record.id} + /> + + + + + + ); +}; diff --git a/src/pages/system/administrator/index.tsx b/src/pages/system/administrator/index.tsx index 69ceb29..20ee8d3 100644 --- a/src/pages/system/administrator/index.tsx +++ b/src/pages/system/administrator/index.tsx @@ -27,10 +27,10 @@ interface DataType { export const SystemAdministratorPage: React.FC = () => { const navigate = useNavigate(); const [loading, setLoading] = useState(true); - const [page, setPage] = useState(1); - const [size, setSize] = useState(10); + const [page, setPage] = useState(1); + const [size, setSize] = useState(12); const [list, setList] = useState([]); - const [total, setTotal] = useState(0); + const [total, setTotal] = useState(0); const [refresh, setRefresh] = useState(false); const [name, setName] = useState(""); @@ -120,7 +120,7 @@ export const SystemAdministratorPage: React.FC = () => { const resetData = () => { setName(""); setPage(1); - setSize(10); + setSize(12); setList([]); setRefresh(!refresh); }; diff --git a/src/router/routes.tsx b/src/router/routes.tsx index 33aad90..8e78822 100644 --- a/src/router/routes.tsx +++ b/src/router/routes.tsx @@ -24,6 +24,7 @@ import { ResourceCategoryPage, ResourceCategoryCreatePage, ResourceCategoryUpdatePage, + ResourceVideosPage } from "../pages"; const routes: RouteObject[] = [ @@ -55,6 +56,10 @@ const routes: RouteObject[] = [ path: "/images", element: , }, + { + path: "/videos", + element: , + }, { path: "/vod", element: ,