线上课课时编辑优化

src/index.less

@@ -81,6 +81,10 @@ code {
   margin-left: 15px;
 }
 
+.ml-42 {
+  margin-left: 42px;
+}
+
 .ml-120 {
   margin-left: 120px;
 }

src/pages/course/compenents/hour-update.module.less

@@ -1,13 +1,13 @@
 .top-content {
   width: 502px;
-  height: 80px;
+  height: auto;
   background: rgba(255, 77, 79, 0.1);
   border-radius: 6px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   box-sizing: border-box;
-  padding: 16px;
+  padding: 8px 16px;
   margin: 0 auto;
   p {
     font-size: 14px;

src/pages/course/compenents/hour-update.tsx

@@ -158,24 +158,37 @@ export const CourseHourUpdate: React.FC<PropInterface> = ({
 
   const delHour = (hid: number) => {
     const data = [...treeData];
-    const index = data.findIndex((i: any) => i.rid === hid);
+    confirm({
-    let delId = data[index].id;
+      title: "操作确认",
-    if (index >= 0) {
+      icon: <ExclamationCircleFilled />,
-      data.splice(index, 1);
+      content: "确认删除此课时？",
-    }
+      centered: true,
-    if (data.length > 0) {
+      okText: "确认",
-      setTreeData(data);
+      cancelText: "取消",
-      const keys = data.map((item: any) => item.rid);
+      onOk() {
-      setHours(keys);
+        const index = data.findIndex((i: any) => i.rid === hid);
-    } else {
+        let delId = data[index].id;
-      setTreeData([]);
+        if (index >= 0) {
-      setHours([]);
+          data.splice(index, 1);
-    }
+        }
-    if (delId) {
+        if (data.length > 0) {
-      courseHour.destroyCourseHour(id, delId).then((res: any) => {
+          setTreeData(data);
-        console.log("ok");
+          const keys = data.map((item: any) => item.rid);
-      });
+          setHours(keys);
-    }
+        } else {
+          setTreeData([]);
+          setHours([]);
+        }
+        if (delId) {
+          courseHour.destroyCourseHour(id, delId).then((res: any) => {
+            console.log("ok");
+          });
+        }
+      },
+      onCancel() {
+        console.log("Cancel");
+      },
+    });
   };
 
   const transHour = (arr: any) => {
@@ -270,27 +283,40 @@ export const CourseHourUpdate: React.FC<PropInterface> = ({
   const delChapterHour = (index: number, hid: number) => {
     const keys = [...chapterHours];
     const data = [...chapters];
-    const current = data[index].hours.findIndex((i: any) => i.rid === hid);
+    confirm({
-    let delId = data[index].hours.map((item: any) => item.id);
+      title: "操作确认",
-    if (current >= 0) {
+      icon: <ExclamationCircleFilled />,
-      data[index].hours.splice(current, 1);
+      content: "确认删除此课时？",
-    }
+      centered: true,
-    if (data[index].hours.length > 0) {
+      okText: "确认",
-      setChapters(data);
+      cancelText: "取消",
-      keys[index] = data[index].hours.map((item: any) => item.rid);
+      onOk() {
-      setChapterHours(keys);
+        const current = data[index].hours.findIndex((i: any) => i.rid === hid);
-    } else {
+        let delId = data[index].hours.map((item: any) => item.id);
-      keys[index] = [];
+        if (current >= 0) {
-      data[index].hours = [];
+          data[index].hours.splice(current, 1);
-      setChapters(data);
+        }
-      setChapterHours(keys);
+        if (data[index].hours.length > 0) {
-    }
+          setChapters(data);
+          keys[index] = data[index].hours.map((item: any) => item.rid);
+          setChapterHours(keys);
+        } else {
+          keys[index] = [];
+          data[index].hours = [];
+          setChapters(data);
+          setChapterHours(keys);
+        }
 
-    if (delId) {
+        if (delId) {
-      courseHour.destroyCourseHour(id, delId).then((res: any) => {
+          courseHour.destroyCourseHour(id, delId).then((res: any) => {
-        console.log("ok");
+            console.log("ok");
-      });
+          });
-    }
+        }
+      },
+      onCancel() {
+        console.log("Cancel");
+      },
+    });
   };
 
   const transChapterHour = (index: number, arr: any) => {
@@ -359,7 +385,7 @@ export const CourseHourUpdate: React.FC<PropInterface> = ({
             {chapterType === 0 && (
               <div className="c-flex">
                 <Form.Item>
-                  <div className="ml-120">
+                  <div className="ml-42">
                     <Button
                       onClick={() => setVideoVisible(true)}
                       type="primary"
@@ -448,7 +474,7 @@ export const CourseHourUpdate: React.FC<PropInterface> = ({
                     );
                   })}
                 <Form.Item>
-                  <div className="ml-120">
+                  <div className="ml-42">
                     <Button onClick={() => addNewChapter()}>添加章节</Button>
                   </div>
                 </Form.Item>