diff --git a/src/api/internal/httpClient.ts b/src/api/internal/httpClient.ts index db55e9d..b3856ef 100644 --- a/src/api/internal/httpClient.ts +++ b/src/api/internal/httpClient.ts @@ -8,7 +8,7 @@ const GoLogin = () => { }; const GoError = (code: number) => { - window.location.href = "/error?code=" + code; + // window.location.href = "/error?code=" + code; }; export class HttpClient { diff --git a/src/compenents/select-attachment/index.tsx b/src/compenents/select-attachment/index.tsx index 2129965..8739670 100644 --- a/src/compenents/select-attachment/index.tsx +++ b/src/compenents/select-attachment/index.tsx @@ -1,16 +1,9 @@ import { useEffect, useState } from "react"; -import { Button, Row, Modal, message, Tabs } from "antd"; +import { Row, Modal, Tabs } from "antd"; import styles from "./index.module.less"; import { UploadCoursewareSub } from "../../compenents"; import type { TabsProps } from "antd"; -interface VideoItem { - id: number; - category_id: number; - name: string; - duration: number; -} - interface PropsInterface { defaultKeys: any[]; open: boolean; @@ -24,6 +17,10 @@ export const SelectAttachment = (props: PropsInterface) => { const [selectKeys, setSelectKeys] = useState([]); const [selectVideos, setSelectVideos] = useState([]); + useEffect(() => { + setRefresh(!refresh); + }, [props.open]); + const items: TabsProps["items"] = [ { key: "1", diff --git a/src/compenents/select-resource/index.tsx b/src/compenents/select-resource/index.tsx index e7f9525..017cf30 100644 --- a/src/compenents/select-resource/index.tsx +++ b/src/compenents/select-resource/index.tsx @@ -1,16 +1,9 @@ import { useEffect, useState } from "react"; -import { Button, Row, Modal, message, Tabs } from "antd"; +import { Row, Modal, Tabs } from "antd"; import styles from "./index.module.less"; import { UploadVideoSub } from "../../compenents"; import type { TabsProps } from "antd"; -interface VideoItem { - id: number; - category_id: number; - name: string; - duration: number; -} - interface PropsInterface { defaultKeys: any[]; open: boolean; @@ -24,6 +17,10 @@ export const SelectResource = (props: PropsInterface) => { const [selectKeys, setSelectKeys] = useState([]); const [selectVideos, setSelectVideos] = useState([]); + useEffect(() => { + setRefresh(!refresh); + }, [props.open]); + const items: TabsProps["items"] = [ { key: "1", diff --git a/src/compenents/upload-courseware-sub/index.tsx b/src/compenents/upload-courseware-sub/index.tsx index 23d7985..0222640 100644 --- a/src/compenents/upload-courseware-sub/index.tsx +++ b/src/compenents/upload-courseware-sub/index.tsx @@ -1,17 +1,32 @@ import { useEffect, useState } from "react"; -import { Checkbox, Row, Col, Empty, message, Pagination } from "antd"; +import { Row, Col, Empty, Table, Pagination } from "antd"; +import type { ColumnsType } from "antd/es/table"; import { resource } from "../../api"; import styles from "./index.module.less"; import { TreeCategory, UploadCoursewareButton } from "../../compenents"; -import type { CheckboxChangeEvent } from "antd/es/checkbox"; -import type { CheckboxValueType } from "antd/es/checkbox/Group"; - -const CheckboxGroup = Checkbox.Group; interface VideoItem { id: number; - category_id: number; name: string; + created_at: string; + type: string; + url: string; + path: string; + size: number; + extension: string; + admin_id: number; +} + +interface DataType { + id: React.Key; + name: string; + created_at: string; + type: string; + url: string; + path: string; + size: number; + extension: string; + admin_id: number; } interface PropsInterface { @@ -30,14 +45,21 @@ export const UploadCoursewareSub = (props: PropsInterface) => { const [page, setPage] = useState(1); const [size, setSize] = useState(10); const [total, setTotal] = useState(0); + const [selectedRowKeys, setSelectedRowKeys] = useState([]); - const [plainOptions, setPlainOptions] = useState([]); - const [checkedList, setCheckedList] = useState([]); - const [indeterminate, setIndeterminate] = useState(false); - const [checkAll, setCheckAll] = useState(false); + // 加载列表 + useEffect(() => { + getvideoList(); + }, [props.open, category_ids, refresh, page, size]); + + useEffect(() => { + if (props.defaultCheckedList.length > 0) { + setSelectedRowKeys(props.defaultCheckedList); + } + }, [props.defaultCheckedList]); // 获取列表 - const getvideoList = (defaultKeys: any[]) => { + const getvideoList = () => { let categoryIds = category_ids.join(","); resource .resourceList( @@ -53,42 +75,12 @@ export const UploadCoursewareSub = (props: PropsInterface) => { setTotal(res.data.result.total); setExistingTypes(res.data.existing_types); setVideoList(res.data.result.data); - let data = res.data.result.data; - const arr = []; - for (let i = 0; i < data.length; i++) { - arr.push({ - label: ( -
- -
{data[i].name}
-
{data[i].type}
-
- ), - value: data[i].id, - disabled: false, - }); - } - if (defaultKeys.length > 0 && arr.length > 0) { - for (let i = 0; i < defaultKeys.length; i++) { - for (let j = 0; j < arr.length; j++) { - if (arr[j].value === defaultKeys[i]) { - arr[j].disabled = true; - } - } - } - } - setPlainOptions(arr); }) .catch((err) => { console.log("错误,", err); }); }; + // 重置列表 const resetVideoList = () => { setPage(1); @@ -96,76 +88,64 @@ export const UploadCoursewareSub = (props: PropsInterface) => { setRefresh(!refresh); }; - // 加载列表 - useEffect(() => { - const arr = [...props.defaultCheckedList]; - setCheckedList(arr); - if (arr.length === 0) { - setIndeterminate(false); - setCheckAll(false); - } - getvideoList(arr); - }, [props.open, props.defaultCheckedList, category_ids, refresh, page, size]); - - const onChange = (list: CheckboxValueType[]) => { - setCheckedList(list); - setIndeterminate(!!list.length && list.length < plainOptions.length); - setCheckAll(list.length === plainOptions.length); - const defalut = [...props.defaultCheckedList]; - let localKeys: any = []; - list.map((item: any) => { - if (defalut.indexOf(item) === -1) { - localKeys.push(item); - } - }); - - let arrVideos: any = []; - - for (let i = 0; i < localKeys.length; i++) { - videoList.map((item: any, index: number) => { - if (item.id === localKeys[i]) { - arrVideos.push({ - name: item.name, - type: item.type, - rid: item.id, - disabled: plainOptions[index].disabled, - }); - } - }); - } - props.onSelected(localKeys, arrVideos); + const paginationProps = { + current: page, //当前页码 + pageSize: size, + total: total, // 总条数 + onChange: (page: number, pageSize: number) => + handlePageChange(page, pageSize), //改变页码的函数 + showSizeChanger: true, }; - const onCheckAllChange = (e: CheckboxChangeEvent) => { - const arr = plainOptions.map((item: any) => item.value); - setCheckedList(e.target.checked ? arr : []); - setIndeterminate(false); - setCheckAll(e.target.checked); - const defalut = [...props.defaultCheckedList]; - let localKeys: any = []; - arr.map((item: any) => { - if (defalut.indexOf(item) === -1) { - localKeys.push(item); - } - }); - let arrVideos: any = []; - for (let i = 0; i < localKeys.length; i++) { - videoList.map((item: any, index: number) => { - if (item.id === localKeys[i]) { - arrVideos.push({ - name: item.name, - type: item.type, - rid: item.id, - disabled: plainOptions[index].disabled, - }); + const handlePageChange = (page: number, pageSize: number) => { + setPage(page); + setSize(pageSize); + }; + + const columns: ColumnsType = [ + { + title: "课件", + render: (_, record: any) => ( +
+ +
{record.name}
+
+ ), + }, + { + title: "类型", + render: (_, record: any) => {record.type}, + }, + ]; + + const rowSelection = { + selectedRowKeys: selectedRowKeys, + onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => { + let row: any = selectedRows; + let arrVideos: any = []; + if (row) { + for (var i = 0; i < row.length; i++) { + if (props.defaultCheckedList.indexOf(row[i].id) === -1) { + arrVideos.push({ + name: row[i].name, + type: row[i].type, + rid: row[i].id, + }); + } } - }); - } - if (e.target.checked) { - props.onSelected(localKeys, arrVideos); - } else { - props.onSelected([], []); - } + props.onSelected(selectedRowKeys, arrVideos); + } + setSelectedRowKeys(selectedRowKeys); + }, + getCheckboxProps: (record: any) => ({ + disabled: props.defaultCheckedList.indexOf(record.id) !== -1, //禁用的条件 + }), }; return ( @@ -198,18 +178,16 @@ export const UploadCoursewareSub = (props: PropsInterface) => { )} {videoList.length > 0 && (
- - 全选 - - record.id} />
)} diff --git a/src/compenents/upload-video-sub/index.tsx b/src/compenents/upload-video-sub/index.tsx index 530e63c..547b9a9 100644 --- a/src/compenents/upload-video-sub/index.tsx +++ b/src/compenents/upload-video-sub/index.tsx @@ -1,19 +1,33 @@ import { useEffect, useState } from "react"; -import { Checkbox, Row, Col, Empty, message, Pagination } from "antd"; +import { Row, Col, Empty, Table, Pagination } from "antd"; +import type { ColumnsType } from "antd/es/table"; import { resource } from "../../api"; import styles from "./index.module.less"; import { UploadVideoButton } from "../upload-video-button"; import { DurationText, TreeCategory } from "../../compenents"; -import type { CheckboxChangeEvent } from "antd/es/checkbox"; -import type { CheckboxValueType } from "antd/es/checkbox/Group"; - -const CheckboxGroup = Checkbox.Group; interface VideoItem { id: number; - category_id: number; name: string; - duration: number; + created_at: string; + type: string; + url: string; + path: string; + size: number; + extension: string; + admin_id: number; +} + +interface DataType { + id: React.Key; + name: string; + created_at: string; + type: string; + url: string; + path: string; + size: number; + extension: string; + admin_id: number; } interface PropsInterface { @@ -32,14 +46,21 @@ export const UploadVideoSub = (props: PropsInterface) => { const [page, setPage] = useState(1); const [size, setSize] = useState(10); const [total, setTotal] = useState(0); + const [selectedRowKeys, setSelectedRowKeys] = useState([]); - const [plainOptions, setPlainOptions] = useState([]); - const [checkedList, setCheckedList] = useState([]); - const [indeterminate, setIndeterminate] = useState(false); - const [checkAll, setCheckAll] = useState(false); + // 加载列表 + useEffect(() => { + getvideoList(); + }, [props.open, category_ids, refresh, page, size]); + + useEffect(() => { + if (props.defaultCheckedList.length > 0) { + setSelectedRowKeys(props.defaultCheckedList); + } + }, [props.defaultCheckedList]); // 获取列表 - const getvideoList = (defaultKeys: any[]) => { + const getvideoList = () => { let categoryIds = category_ids.join(","); resource .resourceList(page, size, "", "", "", "VIDEO", categoryIds) @@ -47,46 +68,12 @@ export const UploadVideoSub = (props: PropsInterface) => { setTotal(res.data.result.total); setVideoExtra(res.data.videos_extra); setVideoList(res.data.result.data); - let data = res.data.result.data; - const arr = []; - for (let i = 0; i < data.length; i++) { - arr.push({ - label: ( -
- -
{data[i].name}
-
- -
-
- ), - value: data[i].id, - disabled: false, - }); - } - if (defaultKeys.length > 0 && arr.length > 0) { - for (let i = 0; i < defaultKeys.length; i++) { - for (let j = 0; j < arr.length; j++) { - if (arr[j].value === defaultKeys[i]) { - arr[j].disabled = true; - } - } - } - } - setPlainOptions(arr); }) .catch((err) => { console.log("错误,", err); }); }; + // 重置列表 const resetVideoList = () => { setPage(1); @@ -94,78 +81,71 @@ export const UploadVideoSub = (props: PropsInterface) => { setRefresh(!refresh); }; - // 加载列表 - useEffect(() => { - const arr = [...props.defaultCheckedList]; - setCheckedList(arr); - if (arr.length === 0) { - setIndeterminate(false); - setCheckAll(false); - } - getvideoList(arr); - }, [props.open, props.defaultCheckedList, category_ids, refresh, page, size]); - - const onChange = (list: CheckboxValueType[]) => { - setCheckedList(list); - setIndeterminate(!!list.length && list.length < plainOptions.length); - setCheckAll(list.length === plainOptions.length); - const defalut = [...props.defaultCheckedList]; - let localKeys: any = []; - list.map((item: any) => { - if (defalut.indexOf(item) === -1) { - localKeys.push(item); - } - }); - - let arrVideos: any = []; - - for (let i = 0; i < localKeys.length; i++) { - videoList.map((item: any, index: number) => { - if (item.id === localKeys[i]) { - arrVideos.push({ - name: item.name, - type: item.type, - rid: item.id, - duration: videosExtra[item.id].duration, - disabled: plainOptions[index].disabled, - }); - } - }); - } - props.onSelected(localKeys, arrVideos); + const paginationProps = { + current: page, //当前页码 + pageSize: size, + total: total, // 总条数 + onChange: (page: number, pageSize: number) => + handlePageChange(page, pageSize), //改变页码的函数 + showSizeChanger: true, }; - const onCheckAllChange = (e: CheckboxChangeEvent) => { - const arr = plainOptions.map((item: any) => item.value); - setCheckedList(e.target.checked ? arr : []); - setIndeterminate(false); - setCheckAll(e.target.checked); - const defalut = [...props.defaultCheckedList]; - let localKeys: any = []; - arr.map((item: any) => { - if (defalut.indexOf(item) === -1) { - localKeys.push(item); - } - }); - let arrVideos: any = []; - for (let i = 0; i < localKeys.length; i++) { - videoList.map((item: any, index: number) => { - if (item.id === localKeys[i]) { - arrVideos.push({ - name: item.name, - type: item.type, - rid: item.id, - duration: videosExtra[item.id].duration, - disabled: plainOptions[index].disabled, - }); + const handlePageChange = (page: number, pageSize: number) => { + setPage(page); + setSize(pageSize); + }; + + const columns: ColumnsType = [ + { + title: "视频", + render: (_, record: any) => ( +
+ +
{record.name}
+
+ ), + }, + { + title: "时长", + render: (_, record: any) => ( +
+ +
+ ), + }, + ]; + + const rowSelection = { + selectedRowKeys: selectedRowKeys, + onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => { + let row: any = selectedRows; + let arrVideos: any = []; + if (row) { + for (var i = 0; i < row.length; i++) { + if (props.defaultCheckedList.indexOf(row[i].id) === -1) { + arrVideos.push({ + name: row[i].name, + type: row[i].type, + rid: row[i].id, + duration: videosExtra[row[i].id].duration, + }); + } } - }); - } - if (e.target.checked) { - props.onSelected(localKeys, arrVideos); - } else { - props.onSelected([], []); - } + props.onSelected(selectedRowKeys, arrVideos); + } + setSelectedRowKeys(selectedRowKeys); + }, + getCheckboxProps: (record: any) => ({ + disabled: props.defaultCheckedList.indexOf(record.id) !== -1, //禁用的条件 + }), }; return ( @@ -198,18 +178,16 @@ export const UploadVideoSub = (props: PropsInterface) => { )} {videoList.length > 0 && (
- - 全选 - - record.id} />
)} diff --git a/src/index.less b/src/index.less index e9f6e6d..5251d39 100644 --- a/src/index.less +++ b/src/index.less @@ -593,23 +593,18 @@ textarea.ant-input { } .list-select-column-box { - .ant-checkbox-wrapper { - display: flex; - height: 38px !important; - align-items: center; + width: 100%; + height: auto; + float: left; + .ant-table-cell { + padding: 0px 0px; } - .video-title { - width: 390px; + width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - .video-time { - width: 80px; - display: flex; - flex-direction: row-reverse; - } } .image-list-box { diff --git a/src/pages/course/compenents/attachment-update.tsx b/src/pages/course/compenents/attachment-update.tsx index a21cde4..8b1ccb1 100644 --- a/src/pages/course/compenents/attachment-update.tsx +++ b/src/pages/course/compenents/attachment-update.tsx @@ -69,19 +69,19 @@ export const CourseAttachmentUpdate: React.FC = ({ const selectAttachmentData = (arr: any, videos: any) => { const hours: any = []; for (let i = 0; i < videos.length; i++) { - if (videos[i].disabled === false) { - hours.push({ - sort: attachmentData.length + i, - title: videos[i].name, - type: videos[i].type, - rid: videos[i].rid, - }); - } + hours.push({ + sort: attachmentData.length + i, + title: videos[i].name, + type: videos[i].type, + rid: videos[i].rid, + }); } if (hours.length === 0) { - message.error("请选择视频"); + message.error("请选择课件"); return; } + console.log(hours); + courseAttachment .storeCourseAttachmentMulti(id, hours) .then((res: any) => { diff --git a/src/pages/course/compenents/hour-update.tsx b/src/pages/course/compenents/hour-update.tsx index 2c91660..d4b8b9f 100644 --- a/src/pages/course/compenents/hour-update.tsx +++ b/src/pages/course/compenents/hour-update.tsx @@ -100,16 +100,14 @@ export const CourseHourUpdate: React.FC = ({ const selectData = (arr: any, videos: any) => { const hours: any = []; for (let i = 0; i < videos.length; i++) { - if (videos[i].disabled === false) { - hours.push({ - chapter_id: 0, - sort: treeData.length + i, - title: videos[i].name, - type: videos[i].type, - duration: videos[i].duration, - rid: videos[i].rid, - }); - } + hours.push({ + chapter_id: 0, + sort: treeData.length + i, + title: videos[i].name, + type: videos[i].type, + duration: videos[i].duration, + rid: videos[i].rid, + }); } if (hours.length === 0) { message.error("请选择视频"); @@ -135,16 +133,14 @@ export const CourseHourUpdate: React.FC = ({ } const hours: any = []; for (let i = 0; i < videos.length; i++) { - if (videos[i].disabled === false) { - hours.push({ - chapter_id: data[addvideoCurrent].id, - sort: data[addvideoCurrent].hours.length + i, - title: videos[i].name, - type: videos[i].type, - duration: videos[i].duration, - rid: videos[i].rid, - }); - } + hours.push({ + chapter_id: data[addvideoCurrent].id, + sort: data[addvideoCurrent].hours.length + i, + title: videos[i].name, + type: videos[i].type, + duration: videos[i].duration, + rid: videos[i].rid, + }); } if (hours.length === 0) { message.error("请选择视频");