资源分类页面初步

src/index.less

@@ -16,6 +16,30 @@ code {
     monospace;
 }
 
+.w-250px {
+  width: 250px;
+}
+
+.w-300px {
+  width: 300px;
+}
+
+.w-350px {
+  width: 350px;
+}
+
+.w-400px {
+  width: 200px;
+}
+
+.w-450px {
+  width: 200px;
+}
+
+.w-500px {
+  width: 200px;
+}
+
 .ml-8 {
   margin-left: 8px;
 }

src/pages/resource/resource-category/index.module.less

@@ -0,0 +1 @@
+

src/pages/resource/resource-category/index.tsx

@@ -1,19 +1,20 @@
 import React, { useState, useEffect } from "react";
-import { Button, Space, Table, Popconfirm, message } from "antd";
+import { Button, Space, Tree, Modal, message } from "antd";
 import type { ColumnsType } from "antd/es/table";
 import styles from "./index.module.less";
-import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
+import { PlusOutlined, ExclamationCircleFilled } from "@ant-design/icons";
 import { resourceCategory } from "../../../api/index";
 import { dateFormat } from "../../../utils/index";
 import { Link, useNavigate } from "react-router-dom";
 import { PerButton } from "../../../compenents";
+import type { DataNode, TreeProps } from "antd/es/tree";
+
+const { confirm } = Modal;
 
 interface Option {
-  id: string | number;
+  key: string | number;
-  name: string;
+  title: any;
-  created_at: string;
   children?: Option[];
-  sort: number;
 }
 
 interface DataType {
@@ -26,71 +27,28 @@ interface DataType {
 export const ResourceCategoryPage: React.FC = () => {
   const navigate = useNavigate();
   const [loading, setLoading] = useState<boolean>(true);
-  const [list, setList] = useState<any>([]);
   const [refresh, setRefresh] = useState(false);
-  const [tableKey, setTableKey] = useState<number>(0);
+  const [treeData, setTreeData] = useState<any>([]);
-
+  const [selectKey, setSelectKey] = useState<any>([]);
-  const columns: ColumnsType<DataType> = [
-    {
-      title: "分类名",
-      dataIndex: "name",
-      render: (text: string) => <span>{text}</span>,
-    },
-
-    {
-      title: "操作",
-      key: "action",
-      fixed: "right",
-      width: 160,
-      render: (_, record) => (
-        <Space size="small">
-          <PerButton
-            type="link"
-            text="编辑"
-            class="b-link c-red"
-            icon={null}
-            p="resource-category"
-            onClick={() => navigate(`/resource-category/update/${record.id}`)}
-            disabled={null}
-          />
-          <Popconfirm
-            title="警告"
-            description="即将删除此分类，确认操作？"
-            onConfirm={() => delUser(record.id)}
-            okText="确定"
-            cancelText="取消"
-          >
-            <PerButton
-              type="link"
-              text="删除"
-              class="b-link c-red"
-              icon={null}
-              p="resource-category"
-              onClick={() => null}
-              disabled={null}
-            />
-          </Popconfirm>
-        </Space>
-      ),
-    },
-  ];
 
   useEffect(() => {
     getData();
   }, [refresh]);
 
+  const onSelect = (selectedKeys: any, info: any) => {
+    setSelectKey(selectedKeys);
+    console.log(selectedKeys);
+  };
+
   const getData = () => {
     setLoading(true);
     resourceCategory.resourceCategoryList().then((res: any) => {
       const categories = res.data.categories;
-      let num = tableKey;
       if (JSON.stringify(categories) !== "{}") {
         const new_arr: Option[] = checkArr(categories, 0);
-        setList(new_arr);
+        setTreeData(new_arr);
       }
-
       setLoading(false);
-      setTableKey(num + 1);
     });
   };
 
@@ -99,18 +57,72 @@ export const ResourceCategoryPage: React.FC = () => {
     for (let i = 0; i < categories[id].length; i++) {
       if (!categories[categories[id][i].id]) {
         arr.push({
-          name: categories[id][i].name,
+          title: (
-          id: categories[id][i].id,
+            <div className="d-flex">
-          sort: categories[id][i].sort,
+              <div className="w-250px mr-24">{categories[id][i].name}</div>
-          created_at: categories[id][i].created_at,
+              <Space size="small">
+                <PerButton
+                  type="link"
+                  text="编辑"
+                  class="b-link c-red"
+                  icon={null}
+                  p="resource-category"
+                  onClick={() =>
+                    navigate(
+                      `/resource-category/update/${categories[id][i].id}`
+                    )
+                  }
+                  disabled={null}
+                />
+
+                <PerButton
+                  type="link"
+                  text="删除"
+                  class="b-link c-red"
+                  icon={null}
+                  p="resource-category"
+                  onClick={() => delUser(categories[id][i].id)}
+                  disabled={null}
+                />
+              </Space>
+            </div>
+          ),
+          key: categories[id][i].id,
         });
       } else {
         const new_arr: Option[] = checkArr(categories, categories[id][i].id);
         arr.push({
-          name: categories[id][i].name,
+          title: (
-          id: categories[id][i].id,
+            <div className="d-flex">
-          created_at: categories[id][i].created_at,
+              <div className="w-250px mr-24">{categories[id][i].name}</div>
-          sort: categories[id][i].sort,
+              <Space size="small">
+                <PerButton
+                  type="link"
+                  text="编辑"
+                  class="b-link c-red"
+                  icon={null}
+                  p="resource-category"
+                  onClick={() =>
+                    navigate(
+                      `/resource-category/update/${categories[id][i].id}`
+                    )
+                  }
+                  disabled={null}
+                />
+
+                <PerButton
+                  type="link"
+                  text="删除"
+                  class="b-link c-red"
+                  icon={null}
+                  p="resource-category"
+                  onClick={() => delUser(categories[id][i].id)}
+                  disabled={null}
+                />
+              </Space>
+            </div>
+          ),
+          key: categories[id][i].id,
           children: new_arr,
         });
       }
@@ -119,59 +131,75 @@ export const ResourceCategoryPage: React.FC = () => {
   };
 
   const resetData = () => {
-    setList([]);
+    setTreeData([]);
     setRefresh(!refresh);
   };
 
   const delUser = (id: any) => {
-    resourceCategory.destroyResourceCategory(id).then((res: any) => {
+    if (id === 0) {
-      message.success("操作成功");
+      return;
-      resetData();
+    }
+
+    confirm({
+      title: "操作确认",
+      icon: <ExclamationCircleFilled />,
+      content: "确认删除选中图片？",
+      okText: "确认",
+      okType: "danger",
+      cancelText: "取消",
+      onOk() {
+        resourceCategory.destroyResourceCategory(id).then((res: any) => {
+          message.success("操作成功");
+          resetData();
+        });
+      },
+      onCancel() {
+        console.log("Cancel");
+      },
     });
   };
 
+  const onDragEnter: TreeProps["onDragEnter"] = (info) => {
+    console.log(info);
+    // expandedKeys 需要受控时设置
+    // setExpandedKeys(info.expandedKeys)
+  };
+
+  const onDrop: TreeProps["onDrop"] = (info) => {
+    console.log(info);
+    // expandedKeys 需要受控时设置
+    // setExpandedKeys(info.expandedKeys)
+  };
+
   return (
     <>
+      <div className="playedu-main-top mb-24">
+        <div className="d-flex">
+          <Link
+            style={{ textDecoration: "none" }}
+            to={`/resource-category/create`}
+          >
+            <PerButton
+              type="primary"
+              text="新建分类"
+              class="mr-16"
+              icon={<PlusOutlined />}
+              p="resource-category"
+              onClick={() => null}
+              disabled={null}
+            />
+          </Link>
+        </div>
+      </div>
       <div className="playedu-main-body">
-        <div className="float-left j-b-flex mb-24">
+        <Tree
-          <div className="d-flex">
+          onSelect={onSelect}
-            <Link
+          treeData={treeData}
-              style={{ textDecoration: "none" }}
+          draggable
-              to={`/resource-category/create`}
+          blockNode
-            >
+          onDragEnter={onDragEnter}
-              <PerButton
+          onDrop={onDrop}
-                type="primary"
+        />
-                text="新建分类"
-                class="mr-16"
-                icon={<PlusOutlined />}
-                p="resource-category"
-                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
-            pagination={false}
-            key={tableKey}
-            columns={columns}
-            dataSource={list}
-            loading={loading}
-            rowKey={(record) => record.id}
-            defaultExpandAllRows={true}
-          />
-        </div>
       </div>
     </>
   );