部门批量添加课程

src/pages/manage/addCur/addCur.module.scss

@@ -0,0 +1,30 @@
+.curBox {
+  display: flex;
+  align-items: center;
+  padding: 30rpx 0;
+  width: 100%;
+  border-bottom: 1px solid #F5F8F7;
+}
+
+.image {
+  width: 280rpx;
+  height: 164rpx;
+  border-radius: 10px;
+  margin-right: 10rpx;
+}
+
+.fixed {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  background: #f1f8f6;
+  width: 100%;
+}
+
+.addAll {
+  padding: 20rpx;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

src/pages/manage/addCur/addCur.tsx

@@ -1,19 +1,16 @@
-import {View} from "@tarojs/components";
+import {Image, Radio, View} from "@tarojs/components";
 import {getCurrentInstance} from "@tarojs/runtime";
 import {ManageApi} from "@/api/manage";
 import React, {FC, useCallback, useEffect, useState} from "react";
 import Taro from "@tarojs/taro";
-import VideoCover from "@/components/videoCover/videoCover";
+import styles from './addCur.module.scss'
 import Empty from "@/components/empty/empty";
+import MyButton from "@/components/button/MyButton";
 
-interface AddProps {
-  cur_id: number,
-  name: string,
-  index: number
-}
 
-const AddCur = () => {
+const AddCur: FC = () => {
   const {id} = getCurrentInstance()?.router?.params as { id: string }
+  const [courseId, setCourseId] = useState<number[]>([])
   const [data, setData] = useState<Curriculum[]>([])
   const [page] = useState(1)
 
@@ -33,50 +30,77 @@ const AddCur = () => {
     getData()
   }, [])
 
-  const Add: FC<AddProps> = ({cur_id, name, index}) => {
-    function addCur() {
-      Taro.showModal({
-        title: "请选择" + name + '课程类型',
-        cancelText: '选修',
-        confirmText: '必修',
-        async success({confirm}) {
-          try {
-            const is_required = confirm ? 1 : 0
-            Taro.showLoading()
-            await ManageApi.addCur({course_id: [cur_id], dep_id: [Number(id)], is_required:[is_required]})
-            const oldData: Curriculum[] = JSON.parse(JSON.stringify(data))
-            oldData.splice(index, 1)
-            setData(oldData)
-            Taro.showToast({title: "添加成功"})
-          } catch (e) {
-          }
-          Taro.hideLoading()
-        }
-      })
 
-      event?.stopImmediatePropagation()
+  function addCur(id: number) {
+    const index = courseId.indexOf(id)
+    if (index === -1) {
+      setCourseId([...courseId, id])
+    } else {
+      const old: number[] = JSON.parse(JSON.stringify(courseId))
+      old.splice(index, 1)
+      setCourseId(old)
     }
+  }
 
-    return (
-      <View className='text-center mt-1' onClick={addCur}>添加课程</View>
-    )
+  function addAll() {
+    if (courseId.length === data.length) {
+      setCourseId([])
+    } else {
+      const courseIds = data.map(d => d.id)
+      setCourseId(courseIds)
+    }
+  }
+
+  function addCourses() {
+    console.log(courseId)
+    if (!courseId.length) return;
+
+    Taro.showModal({
+      title: "请选择课程类型",
+      cancelText: '选修',
+      confirmText: '必修',
+      async success({confirm}) {
+        try {
+          Taro.showLoading()
+          const is_required = confirm ? 1 : 0
+          await ManageApi.addCur({course_id: courseId, dep_id: [Number(id)], is_required: [is_required]})
+
+          const newData = data.reduce((pre, cur) => {
+            if (!courseId.includes(cur.id)) {
+              pre.push(cur)
+            }
+            return pre
+          }, [] as Curriculum[])
+          setData(newData)
+          Taro.showToast({title: "添加成功"})
+        } catch (e) {
+        }
+        Taro.hideLoading()
+      }
+    })
   }
 
   return (
     <>
       {
         data.length ?
-          <View className='flex flex-wrap'>
-            {data?.map((d, index) => (
-              <VideoCover
-                key={d.id}
-                thumb={d.thumb}
-                title={<Add cur_id={d.id} name={d.title} index={index}/>}
-                id={d.id}
-                depId={Number(id)}
-                content={d.title}
-              />
-            ))}
+          <View className='flex flex-wrap bg-white'>
+            {data?.map((d) =>
+              <View key={d.id} className={styles.curBox} onClick={() => addCur(d.id)}>
+                <Radio checked={courseId.includes(d.id)} onClick={() => addCur(d.id)}/>
+                <View className='flex'>
+                  <Image src={d.thumb} className={styles.image}/>
+                  <View>{d.title}</View>
+                </View>
+              </View>
+            )}
+
+            <View className={styles.fixed}>
+              <View className={styles.addAll}>
+                <Radio checked={courseId.length === data.length} onClick={addAll}>全选</Radio>
+                <MyButton size='mini' onClick={addCourses}>添加{courseId.length}</MyButton>
+              </View>
+            </View>
           </View>
           : <Empty name='无更多课程'/>
       }