|
|
@@ -24,12 +24,14 @@ import {
|
|
|
MoreOutlined,
|
|
|
PlusOutlined,
|
|
|
} from "@ant-design/icons";
|
|
|
-import { GetDataModelList } from "@/api";
|
|
|
+import { GetDataModelList, SaveDataModel } from "@/api";
|
|
|
import ProjectCard from "./ProjectCard";
|
|
|
import DragItem from "./DragItem";
|
|
|
import DropItem from "./DropItem";
|
|
|
import { TableType } from "@/enum";
|
|
|
import AddModel from "@/components/AddModel";
|
|
|
+import { uuid } from "@/utils";
|
|
|
+import { ProjectInfo } from "@/type";
|
|
|
|
|
|
type BreadcrumbItem = {
|
|
|
title: React.ReactNode;
|
|
|
@@ -47,6 +49,7 @@ export default function All({
|
|
|
type: TableType;
|
|
|
}) {
|
|
|
const [display, setDisplay] = useState("card");
|
|
|
+ // 文件夹数据
|
|
|
const [folderData, setFolderData] = useState<any[]>([]);
|
|
|
const [dataSource, setDataSource] = useState<any[]>([]);
|
|
|
const [total, setTotal] = useState(0);
|
|
|
@@ -54,12 +57,12 @@ export default function All({
|
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
|
const [pageSize, setPageSize] = useState(12);
|
|
|
const [open, setOpen] = useState(false);
|
|
|
- const currentFolder = useRef("root");
|
|
|
+ const [currentFolder, setCurrentFolder] = useState("");
|
|
|
const { confirm } = Modal;
|
|
|
- const moveSource = useRef<{ id: string; type: string }>();
|
|
|
- const [folderList, setFolderList] = useState<any[]>([]);
|
|
|
+ const moveSource = useRef<{ data: any; type: string }>();
|
|
|
+
|
|
|
const [selectFolder, setSelectFolder] = useState("");
|
|
|
- const addModelRef = useRef<{ open: (type: TableType) => void }>();
|
|
|
+ const addModelRef = useRef<{ open: (type: TableType, folder: string) => void }>();
|
|
|
|
|
|
const { loading, run, refresh } = useRequest(GetDataModelList, {
|
|
|
defaultParams: [
|
|
|
@@ -72,37 +75,41 @@ export default function All({
|
|
|
onSuccess: (res) => {
|
|
|
const result = res?.result || {};
|
|
|
setDataSource(result);
|
|
|
- // setFolderData(result?.folders || []);
|
|
|
+ // 创建文件夹数据
|
|
|
+ const list = new Set((result || [])
|
|
|
+ .map((item: ProjectInfo) => item.directory)
|
|
|
+ .filter((name: string) => name));
|
|
|
+
|
|
|
+ setFolderData(
|
|
|
+ [...list].map((item) => {
|
|
|
+ return {
|
|
|
+ id: uuid(),
|
|
|
+ name: item,
|
|
|
+ };
|
|
|
+ })
|
|
|
+ );
|
|
|
setTotal(result.length || 0);
|
|
|
},
|
|
|
});
|
|
|
|
|
|
- // const { refresh: refreshFolderAll } = useRequest(GetAllFolders, {
|
|
|
- // onSuccess: (res) => {
|
|
|
- // setFolderList(res?.result || []);
|
|
|
- // },
|
|
|
- // });
|
|
|
-
|
|
|
useEffect(() => {
|
|
|
updateKey && getData(1, pageSize);
|
|
|
}, [updateKey]);
|
|
|
|
|
|
useEffect(() => {
|
|
|
- onChangeCurrentFolder(currentFolder.current);
|
|
|
- }, [currentFolder.current]);
|
|
|
+ onChangeCurrentFolder(currentFolder);
|
|
|
+ }, [currentFolder]);
|
|
|
|
|
|
// 面包屑点击
|
|
|
const handleBreadcrumbClick = (index: number) => {
|
|
|
const folderItem = breadcrumbDataRef.current[index];
|
|
|
- if (currentFolder.current === folderItem.id) return;
|
|
|
- currentFolder.current = folderItem.id;
|
|
|
+ setCurrentFolder(folderItem.name);
|
|
|
|
|
|
const newData = breadcrumbDataRef.current.slice(0, index + 1);
|
|
|
setBreadcrumbData(newData);
|
|
|
breadcrumbDataRef.current = newData;
|
|
|
-
|
|
|
- updateCurrentFolderAndGetData(folderItem.id);
|
|
|
};
|
|
|
+
|
|
|
const defultData = [
|
|
|
{
|
|
|
title: (
|
|
|
@@ -110,6 +117,7 @@ export default function All({
|
|
|
<a>{type === TableType.BusinessTable ? "业务模型" : "流程模型"}</a>
|
|
|
</span>
|
|
|
),
|
|
|
+ name: "",
|
|
|
index: 0,
|
|
|
id: "root",
|
|
|
onClick: () => {
|
|
|
@@ -118,9 +126,10 @@ export default function All({
|
|
|
},
|
|
|
];
|
|
|
|
|
|
+ type BreadcrumbItemType = BreadcrumbItem & { name: string };
|
|
|
const [breadcrumbData, setBreadcrumbData] =
|
|
|
- useState<BreadcrumbItem[]>(defultData);
|
|
|
- const breadcrumbDataRef = useRef<BreadcrumbItem[]>(breadcrumbData);
|
|
|
+ useState<BreadcrumbItemType[]>(defultData);
|
|
|
+ const breadcrumbDataRef = useRef<BreadcrumbItemType[]>(breadcrumbData);
|
|
|
|
|
|
const getData = (page: number, pageSize: number) => {
|
|
|
setCurrentPage(page);
|
|
|
@@ -129,7 +138,7 @@ export default function All({
|
|
|
name: searchName,
|
|
|
folder: "",
|
|
|
type,
|
|
|
- },);
|
|
|
+ });
|
|
|
};
|
|
|
|
|
|
const FolderIcon = function () {
|
|
|
@@ -142,12 +151,12 @@ export default function All({
|
|
|
|
|
|
const root = {
|
|
|
id: "root",
|
|
|
- name: "我的文件",
|
|
|
+ name: "",
|
|
|
key: "root",
|
|
|
title: (
|
|
|
<span>
|
|
|
- 我的文件
|
|
|
- {currentFolder.current === "root" ? (
|
|
|
+ {type === TableType.BusinessTable ? "业务模型" : "流程模型"}
|
|
|
+ {currentFolder === "" ? (
|
|
|
<span className="text-12px color-#999">(当前)</span>
|
|
|
) : null}
|
|
|
</span>
|
|
|
@@ -160,14 +169,14 @@ export default function All({
|
|
|
// 构建文件夹树
|
|
|
const folderTreeData = useMemo((): TreeDataNode[] => {
|
|
|
return [
|
|
|
- folderList.map((item) => {
|
|
|
+ folderData.map((item) => {
|
|
|
return {
|
|
|
...item,
|
|
|
key: item.id,
|
|
|
title: (
|
|
|
<span>
|
|
|
{item.name}
|
|
|
- {currentFolder.current === item.id ? (
|
|
|
+ {currentFolder === item.name ? (
|
|
|
<span className="text-12px color-#999">(当前)</span>
|
|
|
) : null}
|
|
|
</span>
|
|
|
@@ -176,10 +185,10 @@ export default function All({
|
|
|
};
|
|
|
}, root),
|
|
|
] as unknown as TreeDataNode[];
|
|
|
- }, [folderList, currentFolder.current]);
|
|
|
+ }, [folderData, currentFolder]);
|
|
|
|
|
|
- const contextMenu: MenuProps["items"] = [
|
|
|
- {
|
|
|
+ const contextMenu: MenuProps["items"] = useMemo(() => {
|
|
|
+ const folder = {
|
|
|
key: "1",
|
|
|
label: <span className="ml-4px">文件夹</span>,
|
|
|
icon: <FolderIcon />,
|
|
|
@@ -198,30 +207,32 @@ export default function All({
|
|
|
/>
|
|
|
),
|
|
|
onOk: async () => {
|
|
|
- // await AddFolder({
|
|
|
- // parentId: currentFolder.current,
|
|
|
- // name,
|
|
|
- // });
|
|
|
- message.success("添加成功");
|
|
|
- refresh();
|
|
|
+ // 添加文件夹
|
|
|
+ setFolderData([...folderData, { id: uuid(), name }]);
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
- },
|
|
|
- {
|
|
|
+ };
|
|
|
+ const model = {
|
|
|
key: "2",
|
|
|
label: <span className="ml-4px">添加模型</span>,
|
|
|
onClick: async () => {
|
|
|
- addModelRef.current?.open(type);
|
|
|
+ addModelRef.current?.open(type, currentFolder);
|
|
|
},
|
|
|
- },
|
|
|
- ];
|
|
|
+ icon: (
|
|
|
+ <svg className="iconfont w-14px h-14px m-r-4px">
|
|
|
+ <use xlinkHref="#icon-shujumoxing" />
|
|
|
+ </svg>
|
|
|
+ ),
|
|
|
+ };
|
|
|
|
|
|
- // 更新当前文件夹并获取数据
|
|
|
- const updateCurrentFolderAndGetData = (folderId: string) => {
|
|
|
- currentFolder.current = folderId;
|
|
|
- getData(1, pageSize);
|
|
|
- };
|
|
|
+ return !currentFolder ? [folder, model] : [model];
|
|
|
+ }, [currentFolder]);
|
|
|
+
|
|
|
+ // 计算模型数据
|
|
|
+ const getDataSource = useMemo(() => {
|
|
|
+ return dataSource.filter((item) => item.directory === currentFolder);
|
|
|
+ }, [dataSource, currentFolder]);
|
|
|
|
|
|
// 打开文件夹
|
|
|
const handleOpenFolder = (folderItem: { id: string; name: string }) => {
|
|
|
@@ -233,6 +244,7 @@ export default function All({
|
|
|
<a>{folderItem.name}</a>
|
|
|
</span>
|
|
|
),
|
|
|
+ name: folderItem.name,
|
|
|
index: breadcrumbData.length,
|
|
|
id: folderItem.id,
|
|
|
onClick: () => {
|
|
|
@@ -242,7 +254,7 @@ export default function All({
|
|
|
];
|
|
|
setBreadcrumbData(newData);
|
|
|
breadcrumbDataRef.current = newData;
|
|
|
- updateCurrentFolderAndGetData(folderItem.id);
|
|
|
+ setCurrentFolder(folderItem.name);
|
|
|
};
|
|
|
|
|
|
// 搜索文件
|
|
|
@@ -251,50 +263,59 @@ export default function All({
|
|
|
getData(1, pageSize);
|
|
|
};
|
|
|
|
|
|
- const handleOpenFolderModal = (id: string, type: "folder" | "chart") => {
|
|
|
+ const handleOpenFolderModal = (data: any, type: "folder" | "model") => {
|
|
|
moveSource.current = {
|
|
|
- id,
|
|
|
+ data,
|
|
|
type,
|
|
|
};
|
|
|
setOpen(true);
|
|
|
};
|
|
|
|
|
|
- const setMoveSource = (id: string, type: "folder" | "chart") => {
|
|
|
+ const setMoveSource = (data: any, type: "folder" | "model") => {
|
|
|
moveSource.current = {
|
|
|
- id,
|
|
|
+ data,
|
|
|
type,
|
|
|
};
|
|
|
setOpen(false);
|
|
|
};
|
|
|
|
|
|
- const handleAddChange = (id: string) => {
|
|
|
+ const handleAddChange = (id: any) => {
|
|
|
refresh();
|
|
|
const { origin, pathname } = window.location;
|
|
|
const enterpriseCode = sessionStorage.getItem("enterpriseCode");
|
|
|
window.open(
|
|
|
`${origin}${pathname}#/detail/${id}?enterpriseCode=${enterpriseCode}`
|
|
|
);
|
|
|
- }
|
|
|
+ };
|
|
|
|
|
|
- const handleMove = (targetFolderId: string) => {
|
|
|
- if (!moveSource.current || targetFolderId === moveSource.current?.id)
|
|
|
+ const handleMove = (targetFolder: string) => {
|
|
|
+ if (
|
|
|
+ !moveSource.current ||
|
|
|
+ targetFolder === moveSource.current?.data?.directory
|
|
|
+ ) {
|
|
|
return;
|
|
|
- // Move({
|
|
|
- // fileType: moveSource.current.type,
|
|
|
- // fileId: moveSource.current.id,
|
|
|
- // targetFolderId,
|
|
|
- // }).then(() => {
|
|
|
- // message.success("移动成功");
|
|
|
- // refresh();
|
|
|
- // setOpen(false);
|
|
|
- // });
|
|
|
- if (moveSource.current?.type === "folder") {
|
|
|
- // refreshFolderAll();
|
|
|
+ }
|
|
|
+ if (moveSource.current?.type === "model") {
|
|
|
+ const newData = {
|
|
|
+ ...moveSource.current.data,
|
|
|
+ directory: targetFolder,
|
|
|
+ };
|
|
|
+ SaveDataModel(newData).then((res) => {
|
|
|
+ setDataSource(
|
|
|
+ dataSource.map((item) => {
|
|
|
+ return item.id === newData.id ? newData : item;
|
|
|
+ })
|
|
|
+ );
|
|
|
+ message.success("移动成功");
|
|
|
+ });
|
|
|
}
|
|
|
};
|
|
|
|
|
|
- const handleCopy = (targetFolderId: string) => {
|
|
|
- if (!moveSource.current || targetFolderId === moveSource.current?.id)
|
|
|
+ const handleCopy = (targetFolder: string) => {
|
|
|
+ if (
|
|
|
+ !moveSource.current ||
|
|
|
+ targetFolder === moveSource.current?.data?.directory
|
|
|
+ )
|
|
|
return;
|
|
|
// Copy({
|
|
|
// fileType: moveSource.current.type,
|
|
|
@@ -324,13 +345,13 @@ export default function All({
|
|
|
>
|
|
|
<div className="flex justify-between items-center m-b-12px">
|
|
|
<Breadcrumb items={breadcrumbData} />
|
|
|
- <AddModel ref={addModelRef} onChange={handleAddChange}/>
|
|
|
+ <AddModel ref={addModelRef} onChange={handleAddChange} />
|
|
|
<div className="right flex items-center gap-12px">
|
|
|
<Button
|
|
|
type="primary"
|
|
|
icon={<PlusOutlined />}
|
|
|
onClick={() => {
|
|
|
- addModelRef.current?.open(type);
|
|
|
+ addModelRef.current?.open(type, currentFolder);
|
|
|
}}
|
|
|
>
|
|
|
新建
|
|
|
@@ -367,7 +388,7 @@ export default function All({
|
|
|
<div>
|
|
|
{display === "card" ? (
|
|
|
<>
|
|
|
- {folderData.length ? (
|
|
|
+ {folderData.length && !currentFolder ? (
|
|
|
<>
|
|
|
<div className="flex gap-12px flex-wrap">
|
|
|
{folderData.map((item, index) => {
|
|
|
@@ -376,7 +397,7 @@ export default function All({
|
|
|
key={index}
|
|
|
title={item.name}
|
|
|
onDragStart={() => {
|
|
|
- setMoveSource(item.id, "folder");
|
|
|
+ setMoveSource(item, "folder");
|
|
|
}}
|
|
|
onDragEnd={() => {
|
|
|
clearMoveSource();
|
|
|
@@ -384,7 +405,7 @@ export default function All({
|
|
|
>
|
|
|
<DropItem
|
|
|
onDrop={() => {
|
|
|
- handleMove(item.id);
|
|
|
+ handleMove(item.name);
|
|
|
}}
|
|
|
>
|
|
|
<Card
|
|
|
@@ -408,80 +429,6 @@ export default function All({
|
|
|
{item.name}
|
|
|
</span>
|
|
|
</span>
|
|
|
- <Dropdown
|
|
|
- menu={{
|
|
|
- items: [
|
|
|
- {
|
|
|
- key: "1",
|
|
|
- label: "重命名",
|
|
|
- onClick: () => {
|
|
|
- let name = item.name;
|
|
|
- confirm({
|
|
|
- title: "重命名",
|
|
|
- centered: true,
|
|
|
- icon: <></>,
|
|
|
- content: (
|
|
|
- <Input
|
|
|
- defaultValue={name}
|
|
|
- onChange={(e) => {
|
|
|
- name = e.target.value;
|
|
|
- }}
|
|
|
- />
|
|
|
- ),
|
|
|
- onOk: async () => {
|
|
|
- // await EditFolder({
|
|
|
- // id: item.id,
|
|
|
- // name,
|
|
|
- // });
|
|
|
- // refresh();
|
|
|
- // refreshFolderAll;
|
|
|
- message.success(
|
|
|
- "重命名成功"
|
|
|
- );
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- key: "2",
|
|
|
- label: "移动/复制",
|
|
|
- onClick: () => {
|
|
|
- handleOpenFolderModal(
|
|
|
- item.id,
|
|
|
- "folder"
|
|
|
- );
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- key: "3",
|
|
|
- label: "删除",
|
|
|
- onClick: () => {
|
|
|
- confirm({
|
|
|
- title: "删除",
|
|
|
- content: "确定删除该文件夹？",
|
|
|
- centered: true,
|
|
|
- onOk: async () => {
|
|
|
- // await DeleteFolder({
|
|
|
- // id: item.id,
|
|
|
- // });
|
|
|
- // message.success("删除成功");
|
|
|
- // refresh();
|
|
|
- // refreshFolderAll();
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- onClick: (e) => {
|
|
|
- e.domEvent.stopPropagation();
|
|
|
- },
|
|
|
- }}
|
|
|
- >
|
|
|
- <MoreOutlined
|
|
|
- className="hidden group-hover/item:inline-block"
|
|
|
- onClick={(e) => e.stopPropagation()}
|
|
|
- />
|
|
|
- </Dropdown>
|
|
|
</span>
|
|
|
}
|
|
|
/>
|
|
|
@@ -494,7 +441,7 @@ export default function All({
|
|
|
</>
|
|
|
) : null}
|
|
|
<Row gutter={[8, 16]}>
|
|
|
- {dataSource.map((item, index) => {
|
|
|
+ {getDataSource.map((item, index) => {
|
|
|
return (
|
|
|
<Col
|
|
|
xs={12}
|
|
|
@@ -508,7 +455,7 @@ export default function All({
|
|
|
<DragItem
|
|
|
title={item.name}
|
|
|
onDragStart={() => {
|
|
|
- setMoveSource(item.id, "chart");
|
|
|
+ setMoveSource(item, "model");
|
|
|
}}
|
|
|
onDragEnd={() => {
|
|
|
clearMoveSource();
|
|
|
@@ -519,7 +466,7 @@ export default function All({
|
|
|
onFresh={refresh}
|
|
|
onDelete={refresh}
|
|
|
onChangeLocation={() =>
|
|
|
- handleOpenFolderModal(item.id, "chart")
|
|
|
+ handleOpenFolderModal(item.id, "model")
|
|
|
}
|
|
|
/>
|
|
|
</DragItem>
|
|
|
@@ -542,7 +489,7 @@ export default function All({
|
|
|
hideOnSinglePage
|
|
|
/>
|
|
|
</div>
|
|
|
- {dataSource.length == 0 ? (
|
|
|
+ {getDataSource.length == 0 ? (
|
|
|
<Empty description="暂无数据" />
|
|
|
) : null}
|
|
|
</>
|
|
|
@@ -564,7 +511,7 @@ export default function All({
|
|
|
sorter: (a, b) => a.updateTime - b.updateTime,
|
|
|
},
|
|
|
]}
|
|
|
- dataSource={dataSource}
|
|
|
+ dataSource={getDataSource}
|
|
|
rowKey={"id"}
|
|
|
search={false}
|
|
|
pagination={{
|
|
|
@@ -600,7 +547,7 @@ export default function All({
|
|
|
className="m-r-8px"
|
|
|
type="primary"
|
|
|
onClick={() => handleMove(selectFolder)}
|
|
|
- disabled={selectFolder === currentFolder.current}
|
|
|
+ disabled={selectFolder === currentFolder}
|
|
|
>
|
|
|
移动
|
|
|
</Button>
|
|
|
@@ -612,7 +559,7 @@ export default function All({
|
|
|
>
|
|
|
<div className="min-h-300px">
|
|
|
<Tree
|
|
|
- treeData={folderTreeData}
|
|
|
+ // treeData={folderTreeData}
|
|
|
selectedKeys={[selectFolder]}
|
|
|
onSelect={(keys) => setSelectFolder(keys[0] as string)}
|
|
|
showIcon
|
liaojiaxing