部门页面初步

src/pages/department/index.tsx

@@ -1,19 +1,19 @@
 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 { department } 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,68 +26,14 @@ interface DataType {
 export const DepartmentPage: 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> = [
+  const onSelect = (selectedKeys: any, info: any) => {
-    {
+    setSelectKey(selectedKeys);
-      title: "部门名",
+    console.log(selectedKeys);
-      dataIndex: "name",
+  };
-      render: (text: string) => <span>{text}</span>,
-    },
-    {
-      title: "ID",
-      key: "id",
-      dataIndex: "id",
-    },
-    {
-      title: "Sort",
-      key: "sort",
-      dataIndex: "sort",
-    },
-    {
-      title: "时间",
-      dataIndex: "created_at",
-      render: (text: string) => <span>{text && dateFormat(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="department-cud"
-            onClick={() => navigate(`/department/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="department-cud"
-              onClick={() => null}
-              disabled={null}
-            />
-          </Popconfirm>
-        </Space>
-      ),
-    },
-  ];
 
   useEffect(() => {
     getData();
@@ -99,11 +45,10 @@ export const DepartmentPage: React.FC = () => {
       const departments = res.data.departments;
       if (JSON.stringify(departments) !== "{}") {
         const new_arr: Option[] = checkArr(departments, 0);
-        setList(new_arr);
+        setTreeData(new_arr);
       }
-      let num = tableKey;
+
       setLoading(false);
-      setTableKey(num + 1);
     });
   };
 
@@ -112,18 +57,68 @@ export const DepartmentPage: React.FC = () => {
     for (let i = 0; i < departments[id].length; i++) {
       if (!departments[departments[id][i].id]) {
         arr.push({
-          name: departments[id][i].name,
+          title: (
-          id: departments[id][i].id,
+            <div className="d-flex">
-          sort: departments[id][i].sort,
+              <div className="w-250px mr-24">{departments[id][i].name}</div>
-          created_at: departments[id][i].created_at,
+              <Space size="small">
+                <PerButton
+                  type="link"
+                  text="编辑"
+                  class="b-link c-red"
+                  icon={null}
+                  p="department-cud"
+                  onClick={() =>
+                    navigate(`/department/update/${departments[id][i].id}`)
+                  }
+                  disabled={null}
+                />
+                <div className="form-column"></div>
+                <PerButton
+                  type="link"
+                  text="删除"
+                  class="b-link c-red"
+                  icon={null}
+                  p="department-cud"
+                  onClick={() => delUser(departments[id][i].id)}
+                  disabled={null}
+                />
+              </Space>
+            </div>
+          ),
+          key: departments[id][i].id,
         });
       } else {
         const new_arr: Option[] = checkArr(departments, departments[id][i].id);
         arr.push({
-          name: departments[id][i].name,
+          title: (
-          id: departments[id][i].id,
+            <div className="d-flex">
-          created_at: departments[id][i].created_at,
+              <div className="w-250px mr-24">{departments[id][i].name}</div>
-          sort: departments[id][i].sort,
+              <Space size="small">
+                <PerButton
+                  type="link"
+                  text="编辑"
+                  class="b-link c-red"
+                  icon={null}
+                  p="department-cud"
+                  onClick={() =>
+                    navigate(`/department/update/${departments[id][i].id}`)
+                  }
+                  disabled={null}
+                />
+                <div className="form-column"></div>
+                <PerButton
+                  type="link"
+                  text="删除"
+                  class="b-link c-red"
+                  icon={null}
+                  p="department-cud"
+                  onClick={() => delUser(departments[id][i].id)}
+                  disabled={null}
+                />
+              </Space>
+            </div>
+          ),
+          key: departments[id][i].id,
           children: new_arr,
         });
       }
@@ -132,56 +127,131 @@ export const DepartmentPage: React.FC = () => {
   };
 
   const resetData = () => {
-    setList([]);
+    setTreeData([]);
     setRefresh(!refresh);
   };
 
   const delUser = (id: any) => {
-    department.destroyDepartment(id).then((res: any) => {
+    if (id === 0) {
-      message.success("操作成功");
+      return;
-      resetData();
+    }
+
+    confirm({
+      title: "操作确认",
+      icon: <ExclamationCircleFilled />,
+      content: "确认删除此部门？",
+      okText: "确认",
+      okType: "danger",
+      cancelText: "取消",
+      onOk() {
+        department.destroyDepartment(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) => {
+    const dropKey = info.node.key;
+    const dragKey = info.dragNode.key;
+    const dropPos = info.node.pos.split("-");
+    const dropPosition =
+      info.dropPosition - Number(dropPos[dropPos.length - 1]);
+
+    const loop = (
+      data: DataNode[],
+      key: React.Key,
+      callback: (node: DataNode, i: number, data: DataNode[]) => void
+    ) => {
+      for (let i = 0; i < data.length; i++) {
+        if (data[i].key === key) {
+          return callback(data[i], i, data);
+        }
+        if (data[i].children) {
+          loop(data[i].children!, key, callback);
+        }
+      }
+    };
+    const data = [...treeData];
+
+    // Find dragObject
+    let dragObj: DataNode;
+    loop(data, dragKey, (item, index, arr) => {
+      arr.splice(index, 1);
+      dragObj = item;
+    });
+
+    if (!info.dropToGap) {
+      // Drop on the content
+      loop(data, dropKey, (item) => {
+        item.children = item.children || [];
+        // where to insert 示例添加到头部，可以是随意位置
+        item.children.unshift(dragObj);
+      });
+    } else if (
+      ((info.node as any).props.children || []).length > 0 && // Has children
+      (info.node as any).props.expanded && // Is expanded
+      dropPosition === 1 // On the bottom gap
+    ) {
+      loop(data, dropKey, (item) => {
+        item.children = item.children || [];
+        // where to insert 示例添加到头部，可以是随意位置
+        item.children.unshift(dragObj);
+        // in previous version, we use item.children.push(dragObj) to insert the
+        // item to the tail of the children
+      });
+    } else {
+      let ar: DataNode[] = [];
+      let i: number;
+      loop(data, dropKey, (_item, index, arr) => {
+        ar = arr;
+        i = index;
+      });
+      if (dropPosition === -1) {
+        ar.splice(i!, 0, dragObj!);
+      } else {
+        ar.splice(i! + 1, 0, dragObj!);
+      }
+    }
+    setTreeData(data);
+  };
+
   return (
     <>
+      <div className="playedu-main-top mb-24">
+        <div className="d-flex">
+          <Link style={{ textDecoration: "none" }} to={`/department/create`}>
+            <PerButton
+              type="primary"
+              text="新建"
+              class="mr-16"
+              icon={<PlusOutlined />}
+              p="department-cud"
+              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 style={{ textDecoration: "none" }} to={`/department/create`}>
+          treeData={treeData}
-              <PerButton
+          draggable
-                type="primary"
+          blockNode
-                text="新建"
+          onDragEnter={onDragEnter}
-                class="mr-16"
+          onDrop={onDrop}
-                icon={<PlusOutlined />}
+        />
-                p="department-cud"
-                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>
     </>
   );