:sparkles:删除提示

dashboard/src/components/article/EditableTree.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useEffect } from "react";
-import { message, Tree } from "antd";
+import { message, Modal, Tree } from "antd";
 import type { DataNode, TreeProps } from "antd/es/tree";
 import { Key } from "antd/lib/table/interface";
 import { DeleteOutlined, SaveOutlined } from "@ant-design/icons";
@@ -160,6 +160,7 @@ const EditableTreeWidget = ({
 }: IWidget) => {
   const intl = useIntl();
   const [checkKeys, setCheckKeys] = useState<string[]>([]);
+  const [checkNodes, setCheckNodes] = useState<TreeNodeData[]>([]);
   const [gData, setGData] = useState<TreeNodeData[]>([]);
   const [listTreeData, setListTreeData] = useState<ListNodeData[]>();
   const [keys, setKeys] = useState<Key>("");
@@ -237,6 +238,7 @@ const EditableTreeWidget = ({
   const onCheck: TreeProps["onCheck"] = (checkedKeys, info) => {
     console.log("onCheck", checkedKeys, info);
     setCheckKeys(checkedKeys as string[]);
+    setCheckNodes(info.checkedNodes as TreeNodeData[]);
   };
 
   const onDragEnter: TreeProps["onDragEnter"] = (info) => {
@@ -364,13 +366,28 @@ const EditableTreeWidget = ({
               }
               return false;
             };
-            const tmp = [...gData];
-            const find = delTree(tmp);
 
-            console.log("delete", keys, find, tmp);
-            setGData(tmp);
-            const list = treeToList(tmp);
-            setListTreeData(list);
+            Modal.confirm({
+              title: "从文集移除下列文章吗？(文章不会被删除)",
+              content: (
+                <>
+                  {checkNodes.map((item, id) => (
+                    <div key={id}>
+                      {id + 1} {item.title}
+                    </div>
+                  ))}
+                </>
+              ),
+              onOk() {
+                const tmp = [...gData];
+                const find = delTree(tmp);
+
+                console.log("delete", keys, find, tmp);
+                setGData(tmp);
+                const list = treeToList(tmp);
+                setListTreeData(list);
+              },
+            });
           }}
         >
           {intl.formatMessage({ id: "buttons.remove" })}