资源视频列表

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 (
+    <>
+      <span>
+        {hour === 0 ? null : hour + ":"}
+        {minute >= 10 ? minute : "0" + minute}:
+        {second >= 10 ? second : "0" + second}
+      </span>
+    </>
+  );
+};

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";
+export * from "./tree-category";
+export * from "./duration-text";

src/compenents/upload-image-button/index.tsx

@@ -103,7 +103,7 @@ export const UploadImageButton = (props: PropsInterface) => {
               <Row style={{ marginBottom: 24 }}>
                 <Col span={24}>
                   <UploadImageSub
-                    categoryIds={[]}
+                    categoryIds={category_ids}
                     onUpdate={() => {
                       resetImageList();
                     }}

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";
 

src/pages/member/index.tsx

@@ -35,7 +35,7 @@ export const MemberPage: React.FC = () => {
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [page, setPage] = useState(1);
-  const [size, setSize] = useState(10);
+  const [size, setSize] = useState(12);
   const [list, setList] = useState<any>([]);
   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);
   };

src/pages/resource/images/index.tsx

@@ -37,7 +37,7 @@ export const ResourceImagesPage = () => {
   const [category_ids, setCategoryIds] = useState<any>([]);
 
   // 删除图片
-  const removeCategory = (id: number) => {
+  const removeResource = (id: number) => {
     if (id === 0) {
       return;
     }
@@ -116,7 +116,7 @@ export const ResourceImagesPage = () => {
                     <Popconfirm
                       title="警告"
                       description="即将删除此图片，确认操作？"
-                      onConfirm={() => removeCategory(item.id)}
+                      onConfirm={() => removeResource(item.id)}
                       okText="确定"
                       cancelText="取消"
                     >

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<any>([]);
+  const [videosExtra, setVideoExtra] = useState<any>([]);
+  const [refresh, setRefresh] = useState(false);
+  const [page, setPage] = useState(1);
+  const [size, setSize] = useState(12);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [category_ids, setCategoryIds] = useState<any>([]);
+
+  const columns: ColumnsType<DataType> = [
+    {
+      title: "ID",
+      key: "id",
+      dataIndex: "id",
+    },
+    {
+      title: "封面",
+      dataIndex: "id",
+      render: (id: string) => (
+        <Image
+          preview={false}
+          width={120}
+          height={80}
+          src={videosExtra[id].poster}
+        ></Image>
+      ),
+    },
+    {
+      title: "名称",
+      dataIndex: "name",
+      render: (text: string) => <span>{text}</span>,
+    },
+    {
+      title: "时长",
+      dataIndex: "id",
+      render: (id: string) => (
+        <DurationText duration={videosExtra[id].duration}></DurationText>
+      ),
+    },
+    {
+      title: "注册时间",
+      dataIndex: "created_at",
+      render: (text: string) => <span>{dateFormat(text)}</span>,
+    },
+    {
+      title: "操作",
+      key: "action",
+      fixed: "right",
+      width: 100,
+      render: (_, record: any) => (
+        <Space size="small">
+          <Popconfirm
+            title="警告"
+            description="即将删除此账号，确认操作？"
+            onConfirm={() => removeResource(record.id)}
+            okText="确定"
+            cancelText="取消"
+          >
+            <Button type="link" className="c-red" onClick={() => null}>
+              删除
+            </Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ];
+
+  // 删除图片
+  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 (
+    <>
+      <Row>
+        <Col span={4}>
+          <div className="playedu-main-body" style={{ marginLeft: -24 }}>
+            <TreeCategory onUpdate={(keys: any) => setCategoryIds(keys)} />
+          </div>
+        </Col>
+        <Col span={20}>
+          <div className="playedu-main-body">
+            <div className="float-left mb-24">
+              <UploadVideoButton
+                categoryIds={category_ids}
+                onUpdate={() => {
+                  resetVideoList();
+                }}
+              ></UploadVideoButton>
+            </div>
+            <div className="float-left">
+              <Table
+                columns={columns}
+                dataSource={videoList}
+                loading={loading}
+                pagination={paginationProps}
+                rowKey={(record) => record.id}
+              />
+            </div>
+          </div>
+        </Col>
+      </Row>
+    </>
+  );
+};

src/pages/system/administrator/index.tsx

@@ -27,10 +27,10 @@ interface DataType {
 export const SystemAdministratorPage: React.FC = () => {
   const navigate = useNavigate();
   const [loading, setLoading] = useState<boolean>(true);
-  const [page, setPage] = useState<number>(1);
-  const [size, setSize] = useState<number>(10);
+  const [page, setPage] = useState(1);
+  const [size, setSize] = useState(12);
   const [list, setList] = useState<any>([]);
-  const [total, setTotal] = useState<number>(0);
+  const [total, setTotal] = useState(0);
   const [refresh, setRefresh] = useState(false);
 
   const [name, setName] = useState<string>("");
@@ -120,7 +120,7 @@ export const SystemAdministratorPage: React.FC = () => {
   const resetData = () => {
     setName("");
     setPage(1);
-    setSize(10);
+    setSize(12);
     setList([]);
     setRefresh(!refresh);
   };

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: <ResourceImagesPage />,
       },
+      {
+        path: "/videos",
+        element: <ResourceVideosPage />,
+      },
       {
         path: "/vod",
         element: <VodListPage />,