qjkankan_v1.1.1/packages/qjkankan-editor/src/views/material/folderMixinFactory.js

import CreateFolder from "./popup/CreateFolder";
import RenameFolder from "./popup/RenameFolder";
import MoveFolder from "./popup/MoveFolder";
import {
  nodeIdList2nodeInfoListByNodeTree,
  preOrderTraversalSearch,
} from "@/utils/other.js";
import {
  getFolderTree,
  createFolder as createFolderApi,
  renameFolder as renameFolderApi,
  moveToFolder,
  delFolder,
} from "@/api";
import { i18n } from "@/lang";

export default function (materialType) {
  return {
    components: {
      CreateFolder,
      RenameFolder,
      MoveFolder,
    },
    data() {
      return {
        selectedList: [],
        isShowNewFolder: false,
        isShowRenameFolder: false,
        isShowMoveFolder: false,
        folderTree: null,
        folderPath: [
          {
            name: i18n.t(`gather.${materialType}`),
            id: 1,
          },
        ],
      };
    },
    computed: {
      currentFolderId() {
        return this.folderPath[this.folderPath.length - 1].id;
      },
      folderListInPath() {
        if (this.list) {
          return this.list.filter((item) => {
            return item.type === "dir";
          });
        } else {
          return [];
        }
      },
    },
    mounted() {},
    watch: {
      folderPath: {
        handler: function () {
          this.refreshListDebounced();
        },
        deep: true,
      },
    },
    methods: {
      validateNewFolderName(name) {
        const isUnique =
          this.folderListInPath.findIndex((item) => {
            return item.name === name;
          }) === -1;
        if (isUnique) {
          return {
            isValid: true,
            tip: "",
          };
        } else {
          return {
            isValid: false,
            tip: this.$i18n.t("gather.folder_name_already_used"),
          };
        }
      },
      onSubmitNewFolder(v) {
        this.isShowNewFolder = false;
        createFolderApi(
          {
            ancestors: this.folderPath
              .map((item) => {
                return item.id;
              })
              .join(","),
            name: v,
            parentId: this.currentFolderId,
            type: materialType,
          },
          () => {
            this.$msg.success(this.$i18n.t("gather.success"));
            this.refreshListDebounced();
          },
          (error) => {
            if (error && error.code !== 3104) {
              debugger
              this.$msg.error(this.$i18n.t("tips.network_error"));
            }
          }
        );
      },
      onSubmitRenameFolder(newName) {
        this.isShowRenameFolder = false;
        renameFolderApi(
          {
            id: this.popupItem.id,
            name: newName,
            // parentId: this.currentFolderId,
            type: materialType,
          },
          () => {
            this.$msg.success(this.$i18n.t("gather.edit_success"));
            const index = this.list.findIndex((eachItem) => {
              return eachItem.id === this.popupItem.id;
            });
            if (index >= 0) {
              this.list[index].name = newName;
            } else {
              console.error("在素材列表里没找到要重命名的那一项！");
            }
            this.popupItem = null;
          },
          (error) => {
            if (error && error.code !== 3104) {
              this.$msg.error(this.$i18n.t("tips.network_error"));
            }
            this.popupItem = null;
          }
        );
      },
      validateRenameFolderName(oldName, newName) {
        if (oldName === newName) {
          return {
            isValid: true,
            tip: "",
          };
        }
        const isUnique =
          this.folderListInPath.findIndex((item) => {
            return item.name === newName;
          }) === -1;
        if (isUnique) {
          return {
            isValid: true,
            tip: "",
          };
        } else {
          return {
            isValid: false,
            tip: this.$i18n.t("gather.folder_name_already_used"),
          };
        }
      },
      onClickMoveFolder() {
        getFolderTree({
          type: materialType,
        }).then((res) => {
          this.folderTree = res.data;
          console.log("onClickMoveFolder->>", res.data, this.folderTree);
          if (this.folderTree.children.length === 0) {
            this.$confirm({
              title: this.$i18n.t("gather.move_folder_to"),
              content: this.$i18n.t("gather.no_folder_need_create"),
            });
          } else {
            this.isShowMoveFolder = true;
          }
        });
      },
      filterAncestors(ancestors) {
        if (ancestors && ancestors.length > 0) {
          const array = ancestors.split(",").map((item) => item);
          return array.join(",");
        } else {
          return "";
        }
      },
      async onSubmitMoveFolder(targetFolderId) {
        // const ancestors = this.folderPath.map((item) => {
        //   return item.id
        // }).join(',')
        const target = this.findFolderTreeById(this.folderTree, targetFolderId);
        let targetAncestors =
          target && target.ancestors && target.ancestors.length > 0
            ? this.filterAncestors(target.ancestors) + "," + target.id
            : "1";
        console.log("filter-targetAncestors", targetAncestors);
        const res = await moveToFolder(
          this.selectedList,
          targetFolderId,
          targetAncestors
        );
        // console.log('res', res.code === 0);
        if (res) {
          this.$msg.success(this.$i18n.t("gather.success"));
          this.$nextTick(() => {
            this.isShowMoveFolder = false;
            this.selectedList = [];
            this.refreshListDebounced();
          });
        }
      },

      findFolderTreeById(folderTree, id) {
        if (folderTree.id == id) {
          return folderTree;
        } else if (folderTree.children != null) {
          var i;
          var result = null;
          for (i = 0; result == null && i < folderTree.children.length; i++) {
            result = this.findFolderTreeById(folderTree.children[i], id);
          }
          return result;
        }
        return null;
      },

      delFolder(id, onSuccess) {
        if (this.uploadListForUI.length > 0) {
          this.$confirm({
            title: i18n.t("tips.title"),
            content: i18n.t("gather.can_not_delete_folder_when_uploading"),
          });
        } else {
          this.$confirm({
            title: i18n.t("gather.delete_folder"),
            content: i18n.t("gather.comfirm_delete_folder"),
            okText: i18n.t("gather.delete"),
            ok: () => {
              delFolder(id).then(() => {
                this.$msg.success(i18n.t("gather.delete_success"));
                this.isRequestingMoreData = true;
                const lastestUsedSearchKey = this.searchKey;
                onSuccess(lastestUsedSearchKey);
              });
            },
          });
        }
      },
      onClickPath(idx) {
        this.searchKey = "";
        this.folderPath = this.folderPath.slice(0, idx + 1);
        this.selectedList = [];
      },

      onClickFolder(folder) {
        getFolderTree({
          type: materialType,
        }).then((res) => {
          this.folderTree = res.data;
          const targetPathIdList = folder.ancestors
            .split(",")
            .map((item) => {
              return Number(item);
            })
            .filter((i) => i);
          console.log("targetPathIdList", targetPathIdList);
          targetPathIdList.push(folder.id);
          this.folderPath = nodeIdList2nodeInfoListByNodeTree(
            targetPathIdList,
            this.folderTree
          );
          this.searchKey = "";
          this.selectedList = [];
        });
      },
      onClickParentFolder(clickedItem) {
        getFolderTree({
          type: materialType,
        }).then((res) => {
          this.folderTree = res.data;

          console.log("clickedItem", clickedItem);

          if (clickedItem.type === "dir") {
            const targetPathIdList = clickedItem.ancestors
              .split(",")
              .map((item) => {
                return Number(item);
              });

            this.folderPath = nodeIdList2nodeInfoListByNodeTree(
              targetPathIdList,
              this.folderTree
            );
          } else {
            let targetNodePath = [];
            preOrderTraversalSearch(
              this.folderTree,
              (node) => {
                if (node.id === clickedItem.dirId) {
                  return true;
                } else {
                  return false;
                }
              },
              targetNodePath
            );

            this.folderPath = targetNodePath.map((item) => {
              return {
                id: item.id,
                name: item.name,
              };
            });
          }
          this.searchKey = "";
          this.selectedList = [];
        });
      },
    },
  };
}