线上课列表初步

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;
-      const new_arr: Option[] = [
+
-        {
+      if (JSON.stringify(departments) !== "{}") {
-          key: "",
+        const new_arr: Option[] = checkArr(departments, 0);
-          title: "全部",
+        setTreeData(new_arr);
-          children: checkArr(departments, 0),
+      } else {
-        },
+        const new_arr: Option[] = [
-      ];
+          {
-      setTreeData(new_arr);
+            key: "",
+            title: "全部",
+            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: "1",
-      key: "id",
+      label: `分类`,
-      dataIndex: "id",
+      children: (
-    },
+        <div className="float-left">
-    {
+          <TreeCategory
-      title: "封面",
+            text={"课程"}
-      dataIndex: "thumb",
+            onUpdate={(keys: any) => setCategoryIds(keys)}
-      render: (thumb: string) => (
+          />
-        <Image preview={false} width={120} height={80} src={thumb}></Image>
+        </div>
       ),
     },
     {
-      title: "课程标题",
+      key: "2",
-      dataIndex: "title",
+      label: `部门`,
-      render: (text: string) => <span>{text}</span>,
+      children: (
+        <div className="float-left">
+          <TreeDepartment
+            text={"部门"}
+            onUpdate={(keys: any) => setDepIds(keys)}
+          />
+        </div>
+      ),
     },
+  ];
+
+  const columns: ColumnsType<DataType> = [
     {
-      title: "时间",
+      title: "课程名称",
-      dataIndex: "created_at",
+      render: (_, record: any) => (
-      render: (text: string) => <span>{dateFormat(text)}</span>,
+        <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,43 +109,49 @@ 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
+          <div className="form-column"></div>
-            title="警告"
+          <PerButton
-            description="即将删除此课程，确认操作？"
+            type="link"
-            onConfirm={() => removeItem(record.id)}
+            text="删除"
-            okText="确定"
+            class="b-link c-red"
-            cancelText="取消"
+            icon={null}
-          >
+            p="course"
-            <PerButton
+            onClick={() => removeItem(record.id)}
-              type="link"
+            disabled={null}
-              text="删除"
+          />
-              class="b-link c-red"
-              icon={null}
-              p="course"
-              onClick={() => null}
-              disabled={null}
-            />
-          </Popconfirm>
         </Space>
       ),
     },
   ];
 
-  // 删除图片
+  // 删除课程
   const removeItem = (id: number) => {
     if (id === 0) {
       return;
     }
-    course.destroyCourse(id).then(() => {
+    confirm({
-      message.success("删除成功");
+      title: "操作确认",
-      resetList();
+      icon: <ExclamationCircleFilled />,
+      content: "确认删除此课程？",
+      okText: "确认",
+      okType: "danger",
+      cancelText: "取消",
+      onOk() {
+        course.destroyCourse(id).then(() => {
+          message.success("删除成功");
+          resetList();
+        });
+      },
+      onCancel() {
+        console.log("Cancel");
+      },
     });
   };
 
@@ -165,65 +199,27 @@ 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">
+            <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
-              <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>
           </div>
         </Col>
         <Col span={20}>
-          <div className="playedu-main-top mb-24">
+          <div className="playedu-main-body">
-            <div className="float-left d-flex">
+            <div className="playedu-main-title float-left mb-24">后端课程</div>
-              <div className="d-flex mr-24">
-                <Typography.Text>课程名称：</Typography.Text>
-                <Input
-                  value={title}
-                  onChange={(e) => {
-                    setTitle(e.target.value);
-                  }}
-                  style={{ width: 160 }}
-                  placeholder="请输入课程名称"
-                />
-              </div>
-              <div className="d-flex mr-24">
-                <Button className="mr-16" onClick={resetList}>
-                  重 置
-                </Button>
-                <Button
-                  type="primary"
-                  onClick={() => {
-                    setPage(1);
-                    setRefresh(!refresh);
-                  }}
-                >
-                  查 询
-                </Button>
-              </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="新建"
+                    text="新建课程"
                     class="mr-16"
                     icon={<PlusOutlined />}
                     p="course"
@@ -233,14 +229,31 @@ export const CoursePage = () => {
                 </Link>
               </div>
               <div className="d-flex">
-                <Button
+                <div className="d-flex mr-24">
-                  type="link"
+                  <Typography.Text>课程名称：</Typography.Text>
-                  icon={<ReloadOutlined />}
+                  <Input
-                  style={{ color: "#333333" }}
+                    value={title}
-                  onClick={() => {
+                    onChange={(e) => {
-                    setRefresh(!refresh);
+                      setTitle(e.target.value);
-                  }}
+                    }}
-                ></Button>
+                    style={{ width: 160 }}
+                    placeholder="请输入名称关键字"
+                  />
+                </div>
+                <div className="d-flex">
+                  <Button className="mr-16" onClick={resetList}>
+                    重 置
+                  </Button>
+                  <Button
+                    type="primary"
+                    onClick={() => {
+                      setPage(1);
+                      setRefresh(!refresh);
+                    }}
+                  >
+                    查 询
+                  </Button>
+                </div>
               </div>
             </div>
             <div className="float-left">

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}>