From 7cb408a1cbdc361273c3aeda49a549efbf61c5d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A6=BA=E7=8B=A8?= <18119604035@163.com> Date: Tue, 13 Jun 2023 09:57:47 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B5=84=E6=BA=90=E8=A7=86=E9=A2=91=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E5=A2=9E=E5=8A=A0=E6=89=B9=E9=87=8F=E5=88=A0=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/resource.ts | 4 + src/pages/resource/videos/index.tsx | 198 ++++++++++++++++++++++------ 2 files changed, 159 insertions(+), 43 deletions(-) diff --git a/src/api/resource.ts b/src/api/resource.ts index 0867008..a96f8d6 100644 --- a/src/api/resource.ts +++ b/src/api/resource.ts @@ -61,3 +61,7 @@ export function destroyResourceMulti(ids: number[]) { ids: ids, }); } + +export function videoUpdate(id: number, params: any) { + return client.put(`/backend/v1/resource/${id}`, params); +} diff --git a/src/pages/resource/videos/index.tsx b/src/pages/resource/videos/index.tsx index 71bb695..bd58e6b 100644 --- a/src/pages/resource/videos/index.tsx +++ b/src/pages/resource/videos/index.tsx @@ -1,9 +1,10 @@ import { useEffect, useState } from "react"; -import { Modal, Table, message, Space } from "antd"; +import { Modal, Table, message, Space, Dropdown, Button } from "antd"; +import type { MenuProps } from "antd"; import { resource } from "../../../api"; // import styles from "./index.module.less"; import { useLocation } from "react-router-dom"; -import { ExclamationCircleFilled } from "@ant-design/icons"; +import { DownOutlined, ExclamationCircleFilled } from "@ant-design/icons"; import type { ColumnsType } from "antd/es/table"; import { dateFormat } from "../../../utils/index"; import { TreeCategory, DurationText, PerButton } from "../../../compenents"; @@ -29,10 +30,15 @@ const ResourceVideosPage = () => { const [total, setTotal] = useState(0); const [loading, setLoading] = useState(true); const [category_ids, setCategoryIds] = useState([]); + const [selectedRowKeys, setSelectedRowKeys] = useState([]); const [selLabel, setLabel] = useState( result.get("label") ? String(result.get("label")) : "全部视频" ); const [cateId, setCateId] = useState(Number(result.get("cid"))); + const [updateVisible, setUpdateVisible] = useState(false); + const [playVisible, setPlayeVisible] = useState(false); + const [multiConfig, setMultiConfig] = useState(false); + const [updateId, setUpdateId] = useState(0); useEffect(() => { setCateId(Number(result.get("cid"))); @@ -44,18 +50,6 @@ const ResourceVideosPage = () => { }, [result.get("cid")]); const columns: ColumnsType = [ - // { - // title: "封面", - // dataIndex: "id", - // render: (id: string) => ( - // - // ), - // }, { title: "视频名称", dataIndex: "name", @@ -94,20 +88,70 @@ const ResourceVideosPage = () => { title: "操作", key: "action", fixed: "right", - width: 100, - render: (_, record: any) => ( - - removeResource(record.id)} - disabled={null} - /> - - ), + width: 160, + render: (_, record: any) => { + const items: MenuProps["items"] = [ + { + key: "1", + label: ( + { + setUpdateId(record.id); + setUpdateVisible(true); + }} + disabled={null} + /> + ), + }, + { + key: "2", + label: ( + removeResource(record.id)} + disabled={null} + /> + ), + }, + ]; + + return ( + + +
+ + + +
+ ); + }, }, ]; @@ -119,7 +163,7 @@ const ResourceVideosPage = () => { confirm({ title: "操作确认", icon: , - content: "确认删除此视频?", + content: "删除前请检查选中视频文件无关联课程,确认删除?", centered: true, okText: "确认", cancelText: "取消", @@ -135,6 +179,29 @@ const ResourceVideosPage = () => { }); }; + const removeResourceMulti = () => { + if (selectedRowKeys.length === 0) { + return; + } + confirm({ + title: "操作确认", + icon: , + content: "删除前请检查选中视频文件无关联课程,确认删除?", + centered: true, + okText: "确认", + cancelText: "取消", + onOk() { + resource.destroyResourceMulti(selectedRowKeys).then(() => { + message.success("删除成功"); + resetVideoList(); + }); + }, + onCancel() { + console.log("Cancel"); + }, + }); + }; + // 获取视频列表 const getVideoList = () => { setLoading(true); @@ -152,11 +219,13 @@ const ResourceVideosPage = () => { console.log("错误,", err); }); }; + // 重置列表 const resetVideoList = () => { setPage(1); setSize(10); setVideoList([]); + setSelectedRowKeys([]); setRefresh(!refresh); }; @@ -179,6 +248,12 @@ const ResourceVideosPage = () => { setSize(pageSize); }; + const rowSelection = { + onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => { + setSelectedRowKeys(selectedRowKeys); + }, + }; + return ( <>
@@ -202,22 +277,59 @@ const ResourceVideosPage = () => {
视频 | {selLabel}
-
- { - resetVideoList(); - }} - > +
+
+ { + resetVideoList(); + }} + > +
+
+ + removeResourceMulti()} + disabled={selectedRowKeys.length === 0} + /> +
- record.id} - /> + {multiConfig ? ( +
record.id} + /> + ) : ( +
record.id} + /> + )}