inl-ui 0.0.37 → 0.0.39

package/src/pageComponent/views/fileManager/fileManager.tsx

@@ -1,769 +1,769 @@
-import {
-  defineComponent,
-  onMounted,
-  ref,
-  reactive,
-  createVNode,
-  watch,
-  withModifiers,
-  nextTick,
-  computed,
-} from "vue";
-import { Modal, message } from "ant-design-vue";
-import useTableList from "@/pageComponent/hooks/useTableList";
-import CreateFolder from "./components/CreateFolder";
-import Rename from "./components/Rename";
-import MoveToFolder from "./components/MoveToFolder";
-import UploadFiles from "./components/UploadFiles";
-
-import {
-  MenuUnfoldOutlined,
-  MenuFoldOutlined,
-  ExclamationCircleOutlined,
-  EditOutlined,
-} from "@ant-design/icons-vue";
-
-import dayjs from "dayjs";
-
-import fmApi from "@/api/fileManager";
-
-type Type = "tree" | "table" | "btn" | "folderBox";
-
-export default defineComponent({
-  setup() {
-    // table
-    const {
-      currPage,
-      isLoading,
-      refresh,
-      tableList,
-      handlePageChange,
-      total,
-      hanldePageSizeChange,
-      pageSize,
-      pagination,
-    } = useTableList(
-      () =>
-        fmApi.getFileByGroupUuid({
-          groupUuid: currentTreeNode.value.uuid,
-          pageNum: currPage.value,
-          pageSize: pageSize.value,
-        }),
-      "list",
-      "total"
-    );
-
-    const tableConfig: any = reactive({
-      dataSource: [{}],
-      columns: [
-        {
-          dataIndex: "fullName",
-          title: "名称",
-          key: "fullName",
-        },
-        {
-          dataIndex: "createUser",
-          title: "创建人",
-          width: 150,
-        },
-        {
-          dataIndex: "updataTime",
-          title: "创建时间",
-          key: "updataTime",
-          width: 150,
-        },
-        {
-          title: "操作",
-          key: "operation",
-          fixed: "right",
-          width: 260,
-        },
-      ],
-    });
-
-    const collapsed = ref(false);
-
-    const search = ref("");
-
-    const treeData: any = ref([]);
-
-    const currentTreeNode: any = ref(null);
-
-    const familyTreeList = computed(() => {
-      return currentTreeNode.value ? getFamilyTree(currentTreeNode.value) : [];
-    });
-
-    // watch(familyTreeList, (nval) => {}, { deep: true });
-
-    // 设置选中的树节点
-    const selectedKeys: any = ref([]);
-    // 展开指定的树节点
-    const expandedKeys: any = ref([]);
-
-    const selectTree = (selectedKey, e) => {
-      // e: { selected: bool; selectedNodes; node; event }
-      // console.log(selectedKey, e);
-      if (selectedKey.length > 0) {
-        if (e.node.type === "group") {
-          selectedKeys.value = selectedKey;
-          currentTreeNode.value = e.node;
-          refresh();
-        } else {
-          message.warning("请选中文件夹！");
-        }
-      }
-    };
-
-    const getTree = async () => {
-      const { data } = await fmApi.getTree(search.value);
-      treeData.value = data;
-    };
-
-    const initTree = async () => {
-      await getTree();
-
-      // 初始化数据
-      if (selectedKeys.value.length === 0) {
-        selectedKeys.value = [treeData.value[0].uuid];
-        currentTreeNode.value = treeData.value[0];
-        expandedKeys.value = [treeData.value[0].uuid];
-      } else {
-        currentTreeNode.value =
-          familyTreeList.value[familyTreeList.value.length - 1];
-      }
-
-      refresh();
-    };
-
-    onMounted(() => {
-      initTree();
-    });
-
-    // 查找节点的父元素
-    const getFamilyTree = (rootNode: any) => {
-      let temp: any = [];
-
-      const forFn = (uuid: any, arr) => {
-        for (var i = 0; i < arr.length; i++) {
-          var item = arr[i];
-          if (item.uuid === uuid) {
-            // 查找到指定节点加入集合
-            temp.unshift(item);
-            // 查找其父节点
-            forFn(item.parentUuid, treeData.value);
-            // 不必向下遍历，跳出循环
-            break;
-          } else {
-            if (item.children) {
-              // 向下查找到id
-              forFn(uuid, item.children);
-            }
-          }
-        }
-      };
-
-      forFn(rootNode.uuid, treeData.value);
-      return temp;
-    };
-
-    // 调用节点
-    const callNode: any = ref(null);
-
-    const showCreateFolder = ref(false);
-
-    // 新建文件夹
-    const toCreateFolder = (type: Type, node: any) => {
-      callNode.value = node;
-
-      showCreateFolder.value = true;
-    };
-
-    const showUploadFiles = ref(false);
-    const directory = ref(false);
-    // 上传文件
-    const toUploadFiles = (type: Type, node: any) => {
-      callNode.value = node;
-
-      directory.value = false;
-      showUploadFiles.value = true;
-    };
-
-    // 上传文件夹
-    const toUploadFolder = (type: Type, node: any) => {
-      callNode.value = node;
-
-      directory.value = true;
-      showUploadFiles.value = true;
-    };
-
-    // 下载
-    const toDownload = async (type: Type, node: any) => {
-      let a = document.createElement("a");
-      a.setAttribute("target", "_blank");
-
-      if (type === "table" || (type === "tree" && node.type === "file")) {
-        a.href = `/api/document/v1/file/downOneFile?uuid=${node.uuid}`;
-      } else {
-        // 下载文件夹下文件
-        a.href = `/api/document/v1/group/downMultipleFile?groupUuid=${node.uuid}`;
-      }
-
-      a.click();
-    };
-
-    const showRename = ref(false);
-    // 重命名
-    const toRename = (type: Type, node: any) => {
-      callNode.value = node;
-
-      showRename.value = true;
-    };
-
-    const showMoveToFolder = ref(false);
-    const refreshMoveToFolder = ref(false);
-    // 移动到文件夹
-    const toMoveToFolder = (type: Type, node: any) => {
-      callNode.value = node;
-
-      showMoveToFolder.value = true;
-    };
-
-    // 删除文件夹
-    const delFolder = (type: Type, node: any) => {
-      Modal.confirm({
-        title: `删除 “${node.fullName}”?`,
-        icon: createVNode(ExclamationCircleOutlined),
-        content: "确定删除吗",
-        async onOk() {
-          let oldParentNode: any;
-          if (node.uuid === currentTreeNode.value.uuid) {
-            oldParentNode =
-              familyTreeList.value[familyTreeList.value.length - 2];
-          }
-
-          const resp = await fmApi.deleteGroupByUuid(node.uuid);
-          if (resp.message === "OK") {
-            message.success("删除成功");
-
-            if (oldParentNode) {
-              currentTreeNode.value = oldParentNode;
-              selectedKeys.value = [oldParentNode.uuid];
-            }
-
-            initTree();
-          }
-        },
-        onCancel() {
-          console.log("Cancel");
-        },
-      });
-    };
-
-    // 删除文件
-    const del = async (type: Type, node: any) => {
-      let param;
-      if (type === "tree") {
-        param = {
-          uuid: node.uuid,
-          groupUuid: node.parentUuid,
-        };
-      } else if (type === "table") {
-        param = {
-          uuid: node.uuid,
-          groupUuid: currentTreeNode.value.uuid,
-        };
-      }
-
-      const resp = await fmApi.deleteByUuid(param);
-      if (resp.message === "OK") {
-        message.success("删除成功");
-
-        initTree();
-      }
-    };
-
-    const contextMenuList = ref([
-      { key: 1, name: "新建文件夹", func: toCreateFolder, type: "folder" },
-      { key: 2, name: "上传文件", func: toUploadFiles, type: "folder" },
-      { key: 3, name: "上传文件夹", func: toUploadFolder, type: "folder" },
-      { key: 4, name: "下载", func: toDownload, type: "folder file" },
-      { key: 5, name: "重命名", func: toRename, type: "folder" },
-      {
-        key: 6,
-        name: "移动到文件夹",
-        func: toMoveToFolder,
-        type: "folder file",
-      },
-      { key: 7, name: "删除", func: delFolder, type: "folder" },
-      { key: 8, name: "删除", func: del, type: "file" },
-    ]);
-
-    const clickFolder = (folder: any) => {
-      if (!expandedKeys.value.includes(currentTreeNode.value.uuid)) {
-        expandedKeys.value.push(currentTreeNode.value.uuid);
-      }
-
-      selectedKeys.value = [folder.uuid];
-      currentTreeNode.value = folder;
-
-      refresh();
-    };
-
-    const getIMG = (suffix: string) => {
-      let img = "UNKONW";
-
-      if (suffix) {
-        const flieArr = suffix.split(".") || [];
-
-        if (flieArr.length > 1) {
-          const suf = flieArr[flieArr.length - 1].toLocaleUpperCase();
-
-          if ("DOC、DOCX".includes(suf)) {
-            img = "WORD";
-          } else if ("XLS、XLSX".includes(suf)) {
-            img = "EXCEL";
-          } else if ("BMP、JPG、JPEG、PNG、GIF".includes(suf)) {
-            img = "IMG";
-          } else if ("PDF".includes(suf)) {
-            img = "PDF";
-          } else if ("PPT、PPTX".includes(suf)) {
-            img = "PPT";
-          } else if ("ZIP、RAR".includes(suf)) {
-            img = "ZIP";
-          }
-        }
-      }
-
-      return <img src={`/micro-assets/inl/fileManager/${img}.png`} />;
-    };
-
-    return () => (
-      <div class="fileManager">
-        <a-layout class="layout">
-          <a-layout-sider
-            v-model={[collapsed.value, "collapsed"]}
-            class={["layout-sider flex", !collapsed.value && "show"]}
-            width="220"
-            theme="light"
-            breakpoint="lg"
-            collapsed-width="0"
-            trigger={null}
-          >
-            <a-input-search
-              v-model={[search.value, "value"]}
-              placeholder="请输入搜索内容"
-              onSearch={initTree}
-              class="search"
-              allow-clear
-            />
-
-            {treeData.value.length > 0 && (
-              <a-tree
-                v-models={[
-                  // 展开指定的树节点
-                  [expandedKeys.value, "expandedKeys"],
-                  // [selectedKeys.value, "selectedKeys"]
-                ]}
-                class="siderTree"
-                treeData={treeData.value}
-                selectedKeys={selectedKeys.value}
-                show-icon
-                // 默认展开
-                defaultExpandAll={false}
-                fieldNames={{
-                  children: "children",
-                  title: "name",
-                  key: "uuid",
-                }}
-                onSelect={selectTree}
-                v-slots={{
-                  // icon: ({ uuid, name, suffix, selected, type }) => {
-                  //   if (type === "group") {
-                  //     return (
-                  //       <img src={"/micro-assets/inl/fileManager/FOLDER.png"} />
-                  //     );
-                  //   } else {
-                  //     return getIMG(suffix);
-                  //   }
-                  // },
-                  title: (TreeProps) => {
-                    // console.log("TreeProps", TreeProps);
-                    const { uuid, name, suffix, selected, type, parentUuid } =
-                      TreeProps;
-
-                    return (
-                      // 右键点击
-                      // <a-dropdown
-                      //   trigger={["contextmenu"]}
-                      //   v-slots={{
-                      //     overlay: () => (
-                      //       <a-menu>
-                      //         {contextMenuList.value
-                      //           .filter((contextMenu: any) =>
-                      //             contextMenu.type.includes(
-                      //               type === "file" ? "file" : "folder"
-                      //             )
-                      //           )
-                      //           .map((menu: any) => (
-                      //             <a-menu-item key={menu.key} onClick={menu.func}>
-                      //               {menu.name}
-                      //             </a-menu-item>
-                      //           ))}
-                      //       </a-menu>
-                      //     ),
-                      //   }}
-                      // >
-                      //   <span>{name}</span>
-                      // </a-dropdown>
-
-                      <div class="treeName flex-center">
-                        <div class="left flex-center">
-                          {type === "group" ? (
-                            <img
-                              src={"/micro-assets/inl/fileManager/FOLDER.png"}
-                            />
-                          ) : (
-                            getIMG(suffix)
-                          )}
-
-                          <div v-html={name}></div>
-                        </div>
-
-                        <a-dropdown
-                          trigger={["click"]}
-                          v-slots={{
-                            overlay: () => (
-                              <a-menu>
-                                {contextMenuList.value
-                                  .filter(
-                                    (contextMenu: any) =>
-                                      contextMenu.type.includes(
-                                        type === "file" ? "file" : "folder"
-                                      ) &&
-                                      // 根文件夹不能删除
-                                      (type === "file"
-                                        ? true
-                                        : parentUuid === "-1"
-                                        ? contextMenu.name !== "删除"
-                                        : true)
-                                  )
-                                  .map((menu: any) => (
-                                    <a-menu-item
-                                      key={menu.key}
-                                      onClick={() => {
-                                        menu.func("tree", TreeProps);
-                                      }}
-                                    >
-                                      {menu.name}
-                                    </a-menu-item>
-                                  ))}
-                              </a-menu>
-                            ),
-                          }}
-                        >
-                          <div
-                            class="treeDropdown"
-                            style={{
-                              display: selected ? "block" : "",
-                            }}
-                            onClick={withModifiers(() => {}, ["stop"])}
-                          >
-                            · · ·
-                          </div>
-                        </a-dropdown>
-                      </div>
-                    );
-                  },
-                }}
-              ></a-tree>
-            )}
-          </a-layout-sider>
-
-          <a-layout-content class="layout-content flex">
-            <div class="topLine flex gap">
-              <div class="flex gap flex1">
-                {collapsed.value ? (
-                  <MenuUnfoldOutlined
-                    class="trigger"
-                    onClick={() => (collapsed.value = !collapsed.value)}
-                  />
-                ) : (
-                  <MenuFoldOutlined
-                    class="trigger"
-                    onClick={() => (collapsed.value = !collapsed.value)}
-                  />
-                )}
-
-                <a-breadcrumb>
-                  {familyTreeList.value.map((breadcrumb: any, idx: number) => (
-                    <a-breadcrumb-item
-                      key={idx}
-                      onClick={() => {
-                        selectedKeys.value = [breadcrumb.uuid];
-                        currentTreeNode.value = breadcrumb;
-                        refresh();
-                      }}
-                    >
-                      <a>{breadcrumb.fullName}</a>
-                    </a-breadcrumb-item>
-                  ))}
-                </a-breadcrumb>
-              </div>
-
-              <div class="flex gap">
-                <a-button
-                  type="primary"
-                  onClick={() => {
-                    toUploadFiles("btn", currentTreeNode.value);
-                  }}
-                >
-                  上传文件
-                </a-button>
-
-                <a-button
-                  type="primary"
-                  ghost
-                  onClick={() => {
-                    toUploadFolder("btn", currentTreeNode.value);
-                  }}
-                >
-                  上传文件夹
-                </a-button>
-
-                <a-button
-                  type="primary"
-                  ghost
-                  onClick={() => {
-                    toCreateFolder("btn", currentTreeNode.value);
-                  }}
-                >
-                  新建文件夹
-                </a-button>
-              </div>
-            </div>
-
-            <div class="contentBottom flex flex1">
-              <div class="left flex flex1">
-                <div class="folderBox flex">
-                  {familyTreeList.value.length > 0 &&
-                    familyTreeList.value[
-                      familyTreeList.value.length - 1
-                    ]?.children
-                      .filter((child: any) => child.type === "group")
-                      .map((folder: any, index: number) => {
-                        const childFileList = folder.children.filter(
-                          (child: any) => child.type === "file"
-                        );
-                        const childFolderList = folder.children.filter(
-                          (child: any) => child.type === "group"
-                        );
-                        return (
-                          <div
-                            class="folder flex-center"
-                            onClick={() => {
-                              // if (childFolderList.length) {
-                              clickFolder(folder);
-                              // }
-                            }}
-                          >
-                            <img
-                              src={"/micro-assets/inl/fileManager/FOLDER.png"}
-                            />
-                            <div class="title">{folder.fullName}</div>
-                            <div class="text">
-                              {childFileList.length}
-                              个文件
-                            </div>
-
-                            <a-dropdown
-                              trigger={["click"]}
-                              v-slots={{
-                                overlay: () => (
-                                  <a-menu>
-                                    {contextMenuList.value
-                                      .filter((contextMenu: any) =>
-                                        contextMenu.type.includes("folder")
-                                      )
-                                      .map((menu: any) => (
-                                        <a-menu-item
-                                          key={menu.key}
-                                          onClick={() => {
-                                            menu.func("folderBox", folder);
-                                          }}
-                                        >
-                                          {menu.name}
-                                        </a-menu-item>
-                                      ))}
-                                  </a-menu>
-                                ),
-                              }}
-                            >
-                              <div
-                                class="folderDropdown"
-                                onClick={withModifiers(() => {}, ["stop"])}
-                              >
-                                · · ·
-                              </div>
-                            </a-dropdown>
-                          </div>
-                        );
-                      })}
-                </div>
-
-                <div class="tableBox flex1">
-                  <a-table
-                    //   scroll={{ x: 1300 }}
-                    dataSource={tableList.value}
-                    columns={tableConfig.columns}
-                    pagination={pagination}
-                    loading={isLoading.value}
-                    rowKey="id"
-                    class="fileTable"
-                    v-slots={{
-                      bodyCell: ({ column, record, index }: any) => {
-                        // console.log(column, record, index);
-                        if (column.key === "fullName") {
-                          return (
-                            <div class="flex tableColName">
-                              {getIMG(record?.suffix)}
-                              <span>{record.fullName}</span>
-                            </div>
-                          );
-                        }
-
-                        // 创建时间
-                        if (column.key === "updataTime") {
-                          return (
-                            <span>
-                              {record.updataTime &&
-                                dayjs(record.updataTime).format(
-                                  "YYYY-MM-DD HH:mm:ss"
-                                )}
-                            </span>
-                          );
-                        }
-
-                        // 操作
-                        if (column.key === "operation") {
-                          return (
-                            <div class="operation gap">
-                              <a-button
-                                type="link"
-                                onClick={() => {
-                                  toDownload("table", record);
-                                }}
-                              >
-                                下载
-                              </a-button>
-
-                              <a-button
-                                type="link"
-                                onClick={() => {
-                                  toMoveToFolder("table", {
-                                    ...record,
-                                    parentUuid: currentTreeNode.value.uuid,
-                                  });
-                                }}
-                              >
-                                移动到文件夹
-                              </a-button>
-                              <a-popconfirm
-                                title="确认删除？"
-                                onConfirm={() => {
-                                  del("table", record);
-                                }}
-                              >
-                                <a-button type="link">删除</a-button>
-                              </a-popconfirm>
-                            </div>
-                          );
-                        }
-                      },
-                    }}
-                  ></a-table>
-                </div>
-              </div>
-
-              {currentTreeNode.value && (
-                <div class="right flex">
-                  <div class="nameBox flex gap">
-                    <div class="flex flex1">
-                      <div class="label">名称：</div>
-                      <div
-                        class="value"
-                        title={currentTreeNode.value?.fullName}
-                      >
-                        {currentTreeNode.value?.fullName}
-                      </div>
-                    </div>
-
-                    <EditOutlined
-                      onClick={() => {
-                        toRename("btn", currentTreeNode.value);
-                      }}
-                    />
-                  </div>
-
-                  <div class="imgBox flex-center">
-                    <img src={"/micro-assets/inl/fileManager/FOLDER.png"} />
-                  </div>
-
-                  <div class="remakeBox">
-                    <div class="label">描述：</div>
-                    <div class="value">{currentTreeNode.value?.remake}</div>
-                  </div>
-                </div>
-              )}
-            </div>
-          </a-layout-content>
-        </a-layout>
-
-        <CreateFolder
-          v-model={[showCreateFolder.value, "showCreateFolder"]}
-          node={callNode.value}
-          onRefresh={() => {
-            initTree();
-
-            // 移动文件夹中 新建文件夹后刷新树
-            refreshMoveToFolder.value = true;
-
-            nextTick(() => {
-              refreshMoveToFolder.value = false;
-            });
-          }}
-        />
-
-        <Rename
-          v-model={[showRename.value, "showRename"]}
-          node={callNode.value}
-          onRefresh={() => {
-            initTree();
-          }}
-        />
-
-        <MoveToFolder
-          v-models={[
-            [showMoveToFolder.value, "showMoveToFolder"],
-            [refreshMoveToFolder.value, "refreshMoveToFolder"],
-          ]}
-          node={callNode.value}
-          onRefresh={() => {
-            initTree();
-          }}
-          onCreateFolder={(node) => {
-            toCreateFolder("btn", node);
-          }}
-        />
-
-        <UploadFiles
-          v-model={[showUploadFiles.value, "showUploadFiles"]}
-          directory={directory.value}
-          node={callNode.value}
-          onRefresh={() => {
-            initTree();
-          }}
-        />
-      </div>
-    );
-  },
-});
+import {
+  defineComponent,
+  onMounted,
+  ref,
+  reactive,
+  createVNode,
+  watch,
+  withModifiers,
+  nextTick,
+  computed,
+} from "vue";
+import { Modal, message } from "ant-design-vue";
+import useTableList from "@/pageComponent/hooks/useTableList";
+import CreateFolder from "./components/CreateFolder";
+import Rename from "./components/Rename";
+import MoveToFolder from "./components/MoveToFolder";
+import UploadFiles from "./components/UploadFiles";
+
+import {
+  MenuUnfoldOutlined,
+  MenuFoldOutlined,
+  ExclamationCircleOutlined,
+  EditOutlined,
+} from "@ant-design/icons-vue";
+
+import dayjs from "dayjs";
+
+import fmApi from "@/api/fileManager";
+
+type Type = "tree" | "table" | "btn" | "folderBox";
+
+export default defineComponent({
+  setup() {
+    // table
+    const {
+      currPage,
+      isLoading,
+      refresh,
+      tableList,
+      handlePageChange,
+      total,
+      hanldePageSizeChange,
+      pageSize,
+      pagination,
+    } = useTableList(
+      () =>
+        fmApi.getFileByGroupUuid({
+          groupUuid: currentTreeNode.value.uuid,
+          pageNum: currPage.value,
+          pageSize: pageSize.value,
+        }),
+      "list",
+      "total"
+    );
+
+    const tableConfig: any = reactive({
+      dataSource: [{}],
+      columns: [
+        {
+          dataIndex: "fullName",
+          title: "名称",
+          key: "fullName",
+        },
+        {
+          dataIndex: "createUser",
+          title: "创建人",
+          width: 150,
+        },
+        {
+          dataIndex: "updataTime",
+          title: "创建时间",
+          key: "updataTime",
+          width: 150,
+        },
+        {
+          title: "操作",
+          key: "operation",
+          fixed: "right",
+          width: 260,
+        },
+      ],
+    });
+
+    const collapsed = ref(false);
+
+    const search = ref("");
+
+    const treeData: any = ref([]);
+
+    const currentTreeNode: any = ref(null);
+
+    const familyTreeList = computed(() => {
+      return currentTreeNode.value ? getFamilyTree(currentTreeNode.value) : [];
+    });
+
+    // watch(familyTreeList, (nval) => {}, { deep: true });
+
+    // 设置选中的树节点
+    const selectedKeys: any = ref([]);
+    // 展开指定的树节点
+    const expandedKeys: any = ref([]);
+
+    const selectTree = (selectedKey, e) => {
+      // e: { selected: bool; selectedNodes; node; event }
+      // console.log(selectedKey, e);
+      if (selectedKey.length > 0) {
+        if (e.node.type === "group") {
+          selectedKeys.value = selectedKey;
+          currentTreeNode.value = e.node;
+          refresh();
+        } else {
+          message.warning("请选中文件夹！");
+        }
+      }
+    };
+
+    const getTree = async () => {
+      const { data } = await fmApi.getTree(search.value);
+      treeData.value = data;
+    };
+
+    const initTree = async () => {
+      await getTree();
+
+      // 初始化数据
+      if (selectedKeys.value.length === 0) {
+        selectedKeys.value = [treeData.value[0].uuid];
+        currentTreeNode.value = treeData.value[0];
+        expandedKeys.value = [treeData.value[0].uuid];
+      } else {
+        currentTreeNode.value =
+          familyTreeList.value[familyTreeList.value.length - 1];
+      }
+
+      refresh();
+    };
+
+    onMounted(() => {
+      initTree();
+    });
+
+    // 查找节点的父元素
+    const getFamilyTree = (rootNode: any) => {
+      let temp: any = [];
+
+      const forFn = (uuid: any, arr) => {
+        for (var i = 0; i < arr.length; i++) {
+          var item = arr[i];
+          if (item.uuid === uuid) {
+            // 查找到指定节点加入集合
+            temp.unshift(item);
+            // 查找其父节点
+            forFn(item.parentUuid, treeData.value);
+            // 不必向下遍历，跳出循环
+            break;
+          } else {
+            if (item.children) {
+              // 向下查找到id
+              forFn(uuid, item.children);
+            }
+          }
+        }
+      };
+
+      forFn(rootNode.uuid, treeData.value);
+      return temp;
+    };
+
+    // 调用节点
+    const callNode: any = ref(null);
+
+    const showCreateFolder = ref(false);
+
+    // 新建文件夹
+    const toCreateFolder = (type: Type, node: any) => {
+      callNode.value = node;
+
+      showCreateFolder.value = true;
+    };
+
+    const showUploadFiles = ref(false);
+    const directory = ref(false);
+    // 上传文件
+    const toUploadFiles = (type: Type, node: any) => {
+      callNode.value = node;
+
+      directory.value = false;
+      showUploadFiles.value = true;
+    };
+
+    // 上传文件夹
+    const toUploadFolder = (type: Type, node: any) => {
+      callNode.value = node;
+
+      directory.value = true;
+      showUploadFiles.value = true;
+    };
+
+    // 下载
+    const toDownload = async (type: Type, node: any) => {
+      let a = document.createElement("a");
+      a.setAttribute("target", "_blank");
+
+      if (type === "table" || (type === "tree" && node.type === "file")) {
+        a.href = `/api/document/v1/file/downOneFile?uuid=${node.uuid}`;
+      } else {
+        // 下载文件夹下文件
+        a.href = `/api/document/v1/group/downMultipleFile?groupUuid=${node.uuid}`;
+      }
+
+      a.click();
+    };
+
+    const showRename = ref(false);
+    // 重命名
+    const toRename = (type: Type, node: any) => {
+      callNode.value = node;
+
+      showRename.value = true;
+    };
+
+    const showMoveToFolder = ref(false);
+    const refreshMoveToFolder = ref(false);
+    // 移动到文件夹
+    const toMoveToFolder = (type: Type, node: any) => {
+      callNode.value = node;
+
+      showMoveToFolder.value = true;
+    };
+
+    // 删除文件夹
+    const delFolder = (type: Type, node: any) => {
+      Modal.confirm({
+        title: `删除 “${node.fullName}”?`,
+        icon: createVNode(ExclamationCircleOutlined),
+        content: "确定删除吗",
+        async onOk() {
+          let oldParentNode: any;
+          if (node.uuid === currentTreeNode.value.uuid) {
+            oldParentNode =
+              familyTreeList.value[familyTreeList.value.length - 2];
+          }
+
+          const resp = await fmApi.deleteGroupByUuid(node.uuid);
+          if (resp.message === "OK") {
+            message.success("删除成功");
+
+            if (oldParentNode) {
+              currentTreeNode.value = oldParentNode;
+              selectedKeys.value = [oldParentNode.uuid];
+            }
+
+            initTree();
+          }
+        },
+        onCancel() {
+          console.log("Cancel");
+        },
+      });
+    };
+
+    // 删除文件
+    const del = async (type: Type, node: any) => {
+      let param;
+      if (type === "tree") {
+        param = {
+          uuid: node.uuid,
+          groupUuid: node.parentUuid,
+        };
+      } else if (type === "table") {
+        param = {
+          uuid: node.uuid,
+          groupUuid: currentTreeNode.value.uuid,
+        };
+      }
+
+      const resp = await fmApi.deleteByUuid(param);
+      if (resp.message === "OK") {
+        message.success("删除成功");
+
+        initTree();
+      }
+    };
+
+    const contextMenuList = ref([
+      { key: 1, name: "新建文件夹", func: toCreateFolder, type: "folder" },
+      { key: 2, name: "上传文件", func: toUploadFiles, type: "folder" },
+      { key: 3, name: "上传文件夹", func: toUploadFolder, type: "folder" },
+      { key: 4, name: "下载", func: toDownload, type: "folder file" },
+      { key: 5, name: "重命名", func: toRename, type: "folder" },
+      {
+        key: 6,
+        name: "移动到文件夹",
+        func: toMoveToFolder,
+        type: "folder file",
+      },
+      { key: 7, name: "删除", func: delFolder, type: "folder" },
+      { key: 8, name: "删除", func: del, type: "file" },
+    ]);
+
+    const clickFolder = (folder: any) => {
+      if (!expandedKeys.value.includes(currentTreeNode.value.uuid)) {
+        expandedKeys.value.push(currentTreeNode.value.uuid);
+      }
+
+      selectedKeys.value = [folder.uuid];
+      currentTreeNode.value = folder;
+
+      refresh();
+    };
+
+    const getIMG = (suffix: string) => {
+      let img = "UNKONW";
+
+      if (suffix) {
+        const flieArr = suffix.split(".") || [];
+
+        if (flieArr.length > 1) {
+          const suf = flieArr[flieArr.length - 1].toLocaleUpperCase();
+
+          if ("DOC、DOCX".includes(suf)) {
+            img = "WORD";
+          } else if ("XLS、XLSX".includes(suf)) {
+            img = "EXCEL";
+          } else if ("BMP、JPG、JPEG、PNG、GIF".includes(suf)) {
+            img = "IMG";
+          } else if ("PDF".includes(suf)) {
+            img = "PDF";
+          } else if ("PPT、PPTX".includes(suf)) {
+            img = "PPT";
+          } else if ("ZIP、RAR".includes(suf)) {
+            img = "ZIP";
+          }
+        }
+      }
+
+      return <img src={`/micro-assets/inl/fileManager/${img}.png`} />;
+    };
+
+    return () => (
+      <div class="fileManager">
+        <a-layout class="layout">
+          <a-layout-sider
+            v-model={[collapsed.value, "collapsed"]}
+            class={["layout-sider flex", !collapsed.value && "show"]}
+            width="220"
+            theme="light"
+            breakpoint="lg"
+            collapsed-width="0"
+            trigger={null}
+          >
+            <a-input-search
+              v-model={[search.value, "value"]}
+              placeholder="请输入搜索内容"
+              onSearch={initTree}
+              class="search"
+              allow-clear
+            />
+
+            {treeData.value.length > 0 && (
+              <a-tree
+                v-models={[
+                  // 展开指定的树节点
+                  [expandedKeys.value, "expandedKeys"],
+                  // [selectedKeys.value, "selectedKeys"]
+                ]}
+                class="siderTree"
+                treeData={treeData.value}
+                selectedKeys={selectedKeys.value}
+                show-icon
+                // 默认展开
+                defaultExpandAll={false}
+                fieldNames={{
+                  children: "children",
+                  title: "name",
+                  key: "uuid",
+                }}
+                onSelect={selectTree}
+                v-slots={{
+                  // icon: ({ uuid, name, suffix, selected, type }) => {
+                  //   if (type === "group") {
+                  //     return (
+                  //       <img src={"/micro-assets/inl/fileManager/FOLDER.png"} />
+                  //     );
+                  //   } else {
+                  //     return getIMG(suffix);
+                  //   }
+                  // },
+                  title: (TreeProps) => {
+                    // console.log("TreeProps", TreeProps);
+                    const { uuid, name, suffix, selected, type, parentUuid } =
+                      TreeProps;
+
+                    return (
+                      // 右键点击
+                      // <a-dropdown
+                      //   trigger={["contextmenu"]}
+                      //   v-slots={{
+                      //     overlay: () => (
+                      //       <a-menu>
+                      //         {contextMenuList.value
+                      //           .filter((contextMenu: any) =>
+                      //             contextMenu.type.includes(
+                      //               type === "file" ? "file" : "folder"
+                      //             )
+                      //           )
+                      //           .map((menu: any) => (
+                      //             <a-menu-item key={menu.key} onClick={menu.func}>
+                      //               {menu.name}
+                      //             </a-menu-item>
+                      //           ))}
+                      //       </a-menu>
+                      //     ),
+                      //   }}
+                      // >
+                      //   <span>{name}</span>
+                      // </a-dropdown>
+
+                      <div class="treeName flex-center">
+                        <div class="left flex-center">
+                          {type === "group" ? (
+                            <img
+                              src={"/micro-assets/inl/fileManager/FOLDER.png"}
+                            />
+                          ) : (
+                            getIMG(suffix)
+                          )}
+
+                          <div v-html={name}></div>
+                        </div>
+
+                        <a-dropdown
+                          trigger={["click"]}
+                          v-slots={{
+                            overlay: () => (
+                              <a-menu>
+                                {contextMenuList.value
+                                  .filter(
+                                    (contextMenu: any) =>
+                                      contextMenu.type.includes(
+                                        type === "file" ? "file" : "folder"
+                                      ) &&
+                                      // 根文件夹不能删除
+                                      (type === "file"
+                                        ? true
+                                        : parentUuid === "-1"
+                                        ? contextMenu.name !== "删除"
+                                        : true)
+                                  )
+                                  .map((menu: any) => (
+                                    <a-menu-item
+                                      key={menu.key}
+                                      onClick={() => {
+                                        menu.func("tree", TreeProps);
+                                      }}
+                                    >
+                                      {menu.name}
+                                    </a-menu-item>
+                                  ))}
+                              </a-menu>
+                            ),
+                          }}
+                        >
+                          <div
+                            class="treeDropdown"
+                            style={{
+                              display: selected ? "block" : "",
+                            }}
+                            onClick={withModifiers(() => {}, ["stop"])}
+                          >
+                            · · ·
+                          </div>
+                        </a-dropdown>
+                      </div>
+                    );
+                  },
+                }}
+              ></a-tree>
+            )}
+          </a-layout-sider>
+
+          <a-layout-content class="layout-content flex">
+            <div class="topLine flex gap">
+              <div class="flex gap flex1">
+                {collapsed.value ? (
+                  <MenuUnfoldOutlined
+                    class="trigger"
+                    onClick={() => (collapsed.value = !collapsed.value)}
+                  />
+                ) : (
+                  <MenuFoldOutlined
+                    class="trigger"
+                    onClick={() => (collapsed.value = !collapsed.value)}
+                  />
+                )}
+
+                <a-breadcrumb>
+                  {familyTreeList.value.map((breadcrumb: any, idx: number) => (
+                    <a-breadcrumb-item
+                      key={idx}
+                      onClick={() => {
+                        selectedKeys.value = [breadcrumb.uuid];
+                        currentTreeNode.value = breadcrumb;
+                        refresh();
+                      }}
+                    >
+                      <a>{breadcrumb.fullName}</a>
+                    </a-breadcrumb-item>
+                  ))}
+                </a-breadcrumb>
+              </div>
+
+              <div class="flex gap">
+                <a-button
+                  type="primary"
+                  onClick={() => {
+                    toUploadFiles("btn", currentTreeNode.value);
+                  }}
+                >
+                  上传文件
+                </a-button>
+
+                <a-button
+                  type="primary"
+                  ghost
+                  onClick={() => {
+                    toUploadFolder("btn", currentTreeNode.value);
+                  }}
+                >
+                  上传文件夹
+                </a-button>
+
+                <a-button
+                  type="primary"
+                  ghost
+                  onClick={() => {
+                    toCreateFolder("btn", currentTreeNode.value);
+                  }}
+                >
+                  新建文件夹
+                </a-button>
+              </div>
+            </div>
+
+            <div class="contentBottom flex flex1">
+              <div class="left flex flex1">
+                <div class="folderBox flex">
+                  {familyTreeList.value.length > 0 &&
+                    familyTreeList.value[
+                      familyTreeList.value.length - 1
+                    ]?.children
+                      .filter((child: any) => child.type === "group")
+                      .map((folder: any, index: number) => {
+                        const childFileList = folder.children.filter(
+                          (child: any) => child.type === "file"
+                        );
+                        const childFolderList = folder.children.filter(
+                          (child: any) => child.type === "group"
+                        );
+                        return (
+                          <div
+                            class="folder flex-center"
+                            onClick={() => {
+                              // if (childFolderList.length) {
+                              clickFolder(folder);
+                              // }
+                            }}
+                          >
+                            <img
+                              src={"/micro-assets/inl/fileManager/FOLDER.png"}
+                            />
+                            <div class="title">{folder.fullName}</div>
+                            <div class="text">
+                              {childFileList.length}
+                              个文件
+                            </div>
+
+                            <a-dropdown
+                              trigger={["click"]}
+                              v-slots={{
+                                overlay: () => (
+                                  <a-menu>
+                                    {contextMenuList.value
+                                      .filter((contextMenu: any) =>
+                                        contextMenu.type.includes("folder")
+                                      )
+                                      .map((menu: any) => (
+                                        <a-menu-item
+                                          key={menu.key}
+                                          onClick={() => {
+                                            menu.func("folderBox", folder);
+                                          }}
+                                        >
+                                          {menu.name}
+                                        </a-menu-item>
+                                      ))}
+                                  </a-menu>
+                                ),
+                              }}
+                            >
+                              <div
+                                class="folderDropdown"
+                                onClick={withModifiers(() => {}, ["stop"])}
+                              >
+                                · · ·
+                              </div>
+                            </a-dropdown>
+                          </div>
+                        );
+                      })}
+                </div>
+
+                <div class="tableBox flex1">
+                  <a-table
+                    //   scroll={{ x: 1300 }}
+                    dataSource={tableList.value}
+                    columns={tableConfig.columns}
+                    pagination={pagination}
+                    loading={isLoading.value}
+                    rowKey="id"
+                    class="fileTable"
+                    v-slots={{
+                      bodyCell: ({ column, record, index }: any) => {
+                        // console.log(column, record, index);
+                        if (column.key === "fullName") {
+                          return (
+                            <div class="flex tableColName">
+                              {getIMG(record?.suffix)}
+                              <span>{record.fullName}</span>
+                            </div>
+                          );
+                        }
+
+                        // 创建时间
+                        if (column.key === "updataTime") {
+                          return (
+                            <span>
+                              {record.updataTime &&
+                                dayjs(record.updataTime).format(
+                                  "YYYY-MM-DD HH:mm:ss"
+                                )}
+                            </span>
+                          );
+                        }
+
+                        // 操作
+                        if (column.key === "operation") {
+                          return (
+                            <div class="operation gap">
+                              <a-button
+                                type="link"
+                                onClick={() => {
+                                  toDownload("table", record);
+                                }}
+                              >
+                                下载
+                              </a-button>
+
+                              <a-button
+                                type="link"
+                                onClick={() => {
+                                  toMoveToFolder("table", {
+                                    ...record,
+                                    parentUuid: currentTreeNode.value.uuid,
+                                  });
+                                }}
+                              >
+                                移动到文件夹
+                              </a-button>
+                              <a-popconfirm
+                                title="确认删除？"
+                                onConfirm={() => {
+                                  del("table", record);
+                                }}
+                              >
+                                <a-button type="link">删除</a-button>
+                              </a-popconfirm>
+                            </div>
+                          );
+                        }
+                      },
+                    }}
+                  ></a-table>
+                </div>
+              </div>
+
+              {currentTreeNode.value && (
+                <div class="right flex">
+                  <div class="nameBox flex gap">
+                    <div class="flex flex1">
+                      <div class="label">名称：</div>
+                      <div
+                        class="value"
+                        title={currentTreeNode.value?.fullName}
+                      >
+                        {currentTreeNode.value?.fullName}
+                      </div>
+                    </div>
+
+                    <EditOutlined
+                      onClick={() => {
+                        toRename("btn", currentTreeNode.value);
+                      }}
+                    />
+                  </div>
+
+                  <div class="imgBox flex-center">
+                    <img src={"/micro-assets/inl/fileManager/FOLDER.png"} />
+                  </div>
+
+                  <div class="remakeBox">
+                    <div class="label">描述：</div>
+                    <div class="value">{currentTreeNode.value?.remake}</div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </a-layout-content>
+        </a-layout>
+
+        <CreateFolder
+          v-model={[showCreateFolder.value, "showCreateFolder"]}
+          node={callNode.value}
+          onRefresh={() => {
+            initTree();
+
+            // 移动文件夹中 新建文件夹后刷新树
+            refreshMoveToFolder.value = true;
+
+            nextTick(() => {
+              refreshMoveToFolder.value = false;
+            });
+          }}
+        />
+
+        <Rename
+          v-model={[showRename.value, "showRename"]}
+          node={callNode.value}
+          onRefresh={() => {
+            initTree();
+          }}
+        />
+
+        <MoveToFolder
+          v-models={[
+            [showMoveToFolder.value, "showMoveToFolder"],
+            [refreshMoveToFolder.value, "refreshMoveToFolder"],
+          ]}
+          node={callNode.value}
+          onRefresh={() => {
+            initTree();
+          }}
+          onCreateFolder={(node) => {
+            toCreateFolder("btn", node);
+          }}
+        />
+
+        <UploadFiles
+          v-model={[showUploadFiles.value, "showUploadFiles"]}
+          directory={directory.value}
+          node={callNode.value}
+          onRefresh={() => {
+            initTree();
+          }}
+        />
+      </div>
+    );
+  },
+});