线上课列表初步

src/compenents/tree-department/index.tsx

@@ -9,24 +9,32 @@ interface Option {
 }
 
 interface PropInterface {
+  text: string;
   onUpdate: (keys: any) => void;
 }
 
 export const TreeDepartment = (props: PropInterface) => {
   const [treeData, setTreeData] = useState<any>([]);
   const [loading, setLoading] = useState<boolean>(true);
+  const [selectKey, setSelectKey] = useState<any>([]);
   useEffect(() => {
     setLoading(true);
     department.departmentList().then((res: any) => {
       const departments = res.data.departments;
+
+      if (JSON.stringify(departments) !== "{}") {
+        const new_arr: Option[] = checkArr(departments, 0);
+        setTreeData(new_arr);
+      } else {
         const new_arr: Option[] = [
           {
             key: "",
             title: "全部",
-          children: checkArr(departments, 0),
+            children: [],
           },
         ];
         setTreeData(new_arr);
+      }
       setLoading(false);
     });
   }, []);
@@ -53,7 +61,22 @@ export const TreeDepartment = (props: PropInterface) => {
 
   const onSelect = (selectedKeys: any, info: any) => {
     props.onUpdate(selectedKeys);
+    setSelectKey(selectedKeys);
   };
 
-  return <Tree onSelect={onSelect} treeData={treeData} />;
+  return (
+    <div>
+      <div
+        className={
+          selectKey.length === 0
+            ? "mb-8 category-label active"
+            : "mb-8 category-label"
+        }
+        onClick={() => onSelect([], "")}
+      >
+        全部{props.text}
+      </div>
+      <Tree onSelect={onSelect} treeData={treeData} />
+    </div>
+  );
 };

src/pages/course/index.tsx

@@ -3,21 +3,25 @@ import {
   Button,
   Row,
   Col,
-  Popconfirm,
+  Modal,
   Image,
   Table,
   Typography,
   Input,
   message,
   Space,
+  Tabs,
 } from "antd";
 import { course } from "../../api";
 import styles from "./index.module.less";
-import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
+import { PlusOutlined, ExclamationCircleFilled } from "@ant-design/icons";
 import type { ColumnsType } from "antd/es/table";
 import { dateFormat } from "../../utils/index";
 import { Link, useNavigate } from "react-router-dom";
 import { TreeDepartment, TreeCategory, PerButton } from "../../compenents";
+import type { TabsProps } from "antd";
+
+const { confirm } = Modal;
 
 interface DataType {
   id: React.Key;
@@ -40,28 +44,47 @@ export const CoursePage = () => {
   const [title, setTitle] = useState<string>("");
   const [dep_ids, setDepIds] = useState<any>([]);
 
-  const columns: ColumnsType<DataType> = [
+  const items: TabsProps["items"] = [
     {
-      title: "ID",
-      key: "id",
-      dataIndex: "id",
-    },
-    {
-      title: "封面",
-      dataIndex: "thumb",
-      render: (thumb: string) => (
-        <Image preview={false} width={120} height={80} src={thumb}></Image>
+      key: "1",
+      label: `分类`,
+      children: (
+        <div className="float-left">
+          <TreeCategory
+            text={"课程"}
+            onUpdate={(keys: any) => setCategoryIds(keys)}
+          />
+        </div>
       ),
     },
     {
-      title: "课程标题",
-      dataIndex: "title",
-      render: (text: string) => <span>{text}</span>,
+      key: "2",
+      label: `部门`,
+      children: (
+        <div className="float-left">
+          <TreeDepartment
+            text={"部门"}
+            onUpdate={(keys: any) => setDepIds(keys)}
+          />
+        </div>
+      ),
     },
+  ];
+
+  const columns: ColumnsType<DataType> = [
     {
-      title: "时间",
-      dataIndex: "created_at",
-      render: (text: string) => <span>{dateFormat(text)}</span>,
+      title: "课程名称",
+      render: (_, record: any) => (
+        <div className="d-flex">
+          <Image
+            preview={false}
+            width={80}
+            height={60}
+            src={record.thumb}
+          ></Image>
+          <span className="ml-8">{record.title}</span>
+        </div>
+      ),
     },
     {
       title: "是否显示",
@@ -72,6 +95,11 @@ export const CoursePage = () => {
         </span>
       ),
     },
+    {
+      title: "创建时间",
+      dataIndex: "created_at",
+      render: (text: string) => <span>{dateFormat(text)}</span>,
+    },
     {
       title: "操作",
       key: "action",
@@ -81,44 +109,50 @@ export const CoursePage = () => {
         <Space size="small">
           <PerButton
             type="link"
-            text="详情"
+            text="编辑"
             class="b-link c-red"
             icon={null}
             p="course"
             onClick={() => navigate(`/course/update/${record.id}`)}
             disabled={null}
           />
-          <Popconfirm
-            title="警告"
-            description="即将删除此课程，确认操作？"
-            onConfirm={() => removeItem(record.id)}
-            okText="确定"
-            cancelText="取消"
-          >
+          <div className="form-column"></div>
           <PerButton
             type="link"
             text="删除"
             class="b-link c-red"
             icon={null}
             p="course"
-              onClick={() => null}
+            onClick={() => removeItem(record.id)}
             disabled={null}
           />
-          </Popconfirm>
         </Space>
       ),
     },
   ];
 
-  // 删除图片
+  // 删除课程
   const removeItem = (id: number) => {
     if (id === 0) {
       return;
     }
+    confirm({
+      title: "操作确认",
+      icon: <ExclamationCircleFilled />,
+      content: "确认删除此课程？",
+      okText: "确认",
+      okType: "danger",
+      cancelText: "取消",
+      onOk() {
         course.destroyCourse(id).then(() => {
           message.success("删除成功");
           resetList();
         });
+      },
+      onCancel() {
+        console.log("Cancel");
+      },
+    });
   };
 
   // 获取视频列表
@@ -165,31 +199,36 @@ export const CoursePage = () => {
     setSize(pageSize);
   };
 
+  const onChange = (key: string) => {
+    console.log(key);
+  };
+
   return (
     <>
       <Row>
         <Col span={4}>
           <div className="playedu-main-body" style={{ marginLeft: -24 }}>
-            <div className="float-left mb-24">
-              <div className="d-flex mb-24">
-                <Typography.Text>资源分类：</Typography.Text>
-              </div>
-              <TreeCategory
-                text={"资源"}
-                onUpdate={(keys: any) => setCategoryIds(keys)}
-              />
-            </div>
-            <div className="float-left">
-              <div className="d-flex mb-24">
-                <Typography.Text>部门：</Typography.Text>
-              </div>
-              <TreeDepartment onUpdate={(keys: any) => setDepIds(keys)} />
-            </div>
+            <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
           </div>
         </Col>
         <Col span={20}>
-          <div className="playedu-main-top mb-24">
-            <div className="float-left d-flex">
+          <div className="playedu-main-body">
+            <div className="playedu-main-title float-left mb-24">后端课程</div>
+            <div className="float-left j-b-flex mb-24">
+              <div className="d-flex">
+                <Link style={{ textDecoration: "none" }} to={`/course/create`}>
+                  <PerButton
+                    type="primary"
+                    text="新建课程"
+                    class="mr-16"
+                    icon={<PlusOutlined />}
+                    p="course"
+                    onClick={() => null}
+                    disabled={null}
+                  />
+                </Link>
+              </div>
+              <div className="d-flex">
                 <div className="d-flex mr-24">
                   <Typography.Text>课程名称：</Typography.Text>
                   <Input
@@ -198,10 +237,10 @@ export const CoursePage = () => {
                       setTitle(e.target.value);
                     }}
                     style={{ width: 160 }}
-                  placeholder="请输入课程名称"
+                    placeholder="请输入名称关键字"
                   />
                 </div>
-              <div className="d-flex mr-24">
+                <div className="d-flex">
                   <Button className="mr-16" onClick={resetList}>
                     重 置
                   </Button>
@@ -217,32 +256,6 @@ export const CoursePage = () => {
                 </div>
               </div>
             </div>
-          <div className="playedu-main-body only">
-            <div className="float-left j-b-flex mb-24">
-              <div className="d-flex">
-                <Link style={{ textDecoration: "none" }} to={`/course/create`}>
-                  <PerButton
-                    type="primary"
-                    text="新建"
-                    class="mr-16"
-                    icon={<PlusOutlined />}
-                    p="course"
-                    onClick={() => null}
-                    disabled={null}
-                  />
-                </Link>
-              </div>
-              <div className="d-flex">
-                <Button
-                  type="link"
-                  icon={<ReloadOutlined />}
-                  style={{ color: "#333333" }}
-                  onClick={() => {
-                    setRefresh(!refresh);
-                  }}
-                ></Button>
-              </div>
-            </div>
             <div className="float-left">
               <Table
                 columns={columns}

src/pages/member/index.tsx

@@ -90,6 +90,7 @@ export const MemberPage: React.FC = () => {
             onClick={() => navigate(`/member/update/${record.id}`)}
             disabled={null}
           />
+          <div className="form-column"></div>
           <Popconfirm
             title="警告"
             description="即将删除此账号，确认操作？"
@@ -181,7 +182,10 @@ export const MemberPage: React.FC = () => {
       <Row>
         <Col span={4}>
           <div className="playedu-main-body" style={{ marginLeft: -24 }}>
-            <TreeDepartment onUpdate={(keys: any) => setDepIds(keys)} />
+            <TreeDepartment
+              text={"部门"}
+              onUpdate={(keys: any) => setDepIds(keys)}
+            />
           </div>
         </Col>
         <Col span={20}>