线上课新建无章节课时选择逻辑优化

src/compenents/select-resource/index.tsx

@@ -12,8 +12,9 @@ interface VideoItem {
 }
 
 interface PropsInterface {
+  defaultKeys: any[];
   open: boolean;
-  onSelected: (arr: any[], label: any[]) => void;
+  onSelected: (arr: any[], videos: any[]) => void;
   onCancel: () => void;
 }
 
@@ -21,7 +22,7 @@ export const SelectResource = (props: PropsInterface) => {
   const [refresh, setRefresh] = useState(true);
   const [tabKey, setTabKey] = useState(1);
   const [selectKeys, setSelectKeys] = useState<any>([]);
-  const [selectLabel, setSelectLabel] = useState<any>([]);
+  const [selectVideos, setSelectVideos] = useState<any>([]);
 
   const items: TabsProps["items"] = [
     {
@@ -31,11 +32,11 @@ export const SelectResource = (props: PropsInterface) => {
         <div className="float-left">
           <UploadVideoSub
             label="视频"
-            defaultCheckedList={[]}
+            defaultCheckedList={props.defaultKeys}
             open={refresh}
-            onSelected={(arr: any[], label: any[]) => {
+            onSelected={(arr: any[], videos: any[]) => {
               setSelectKeys(arr);
-              setSelectLabel(label);
+              setSelectVideos(videos);
             }}
           />
         </div>
@@ -60,7 +61,7 @@ export const SelectResource = (props: PropsInterface) => {
         open={props.open}
         width={800}
         maskClosable={false}
-        onOk={() => props.onSelected(selectKeys, selectLabel)}
+        onOk={() => props.onSelected(selectKeys, selectVideos)}
       >
         <Row>
           <Tabs defaultActiveKey="1" items={items} onChange={onChange} />

src/compenents/upload-video-sub/index.tsx

@@ -20,7 +20,7 @@ interface PropsInterface {
   defaultCheckedList: any[];
   label: string;
   open: boolean;
-  onSelected: (arr: any[], label: any) => void;
+  onSelected: (arr: any[], videos: []) => void;
 }
 
 export const UploadVideoSub = (props: PropsInterface) => {
@@ -36,9 +36,7 @@ export const UploadVideoSub = (props: PropsInterface) => {
   const [categoryCount, setCategoryCount] = useState<any>({});
 
   const [plainOptions, setPlainOptions] = useState<any>([]);
-  const [checkedList, setCheckedList] = useState<CheckboxValueType[]>(
-    props.defaultCheckedList
-  );
+  const [checkedList, setCheckedList] = useState<CheckboxValueType[]>([]);
   const [indeterminate, setIndeterminate] = useState(false);
   const [checkAll, setCheckAll] = useState(false);
 
@@ -89,6 +87,10 @@ export const UploadVideoSub = (props: PropsInterface) => {
     setVideoList([]);
     setRefresh(!refresh);
   };
+  //重置选中的key
+  useEffect(() => {
+    setCheckedList(props.defaultCheckedList);
+  }, [props.defaultCheckedList]);
 
   // 加载列表
   useEffect(() => {
@@ -99,16 +101,21 @@ export const UploadVideoSub = (props: PropsInterface) => {
     setCheckedList(list);
     setIndeterminate(!!list.length && list.length < plainOptions.length);
     setCheckAll(list.length === plainOptions.length);
-    let arrLabel: any = [];
+    let arrVideos: any = [];
     for (let i = 0; i < list.length; i++) {
       videoList.map((item: any) => {
         if (item.id === list[i]) {
-          arrLabel.push(item.name);
+          arrVideos.push({
+            name: item.name,
+            type: item.type,
+            rid: item.id,
+            duration: videosExtra[item.id].duration,
+          });
         }
       });
     }
 
-    props.onSelected(list, arrLabel);
+    props.onSelected(list, arrVideos);
   };
 
   const onCheckAllChange = (e: CheckboxChangeEvent) => {
@@ -116,9 +123,17 @@ export const UploadVideoSub = (props: PropsInterface) => {
     setCheckedList(e.target.checked ? arr : []);
     setIndeterminate(false);
     setCheckAll(e.target.checked);
-    const arrLabel = videoList.map((item: any) => item.name);
+    let arrVideos: any = [];
+    videoList.map((item: any) => {
+      arrVideos.push({
+        name: item.name,
+        type: item.type,
+        rid: item.id,
+        duration: videosExtra[item.id].duration,
+      });
+    });
     if (e.target.checked) {
-      props.onSelected(arr, arrLabel);
+      props.onSelected(arr, arrVideos);
     } else {
       props.onSelected([], []);
     }