fad_oa/ruoyi-ui/src/components/FileManager/index.vue

<!-- FileManager.vue -->
<template>
  <div class="file-manager">
    <FileManagerHeader
      :config="headerConfig"
      :search-text.sync="searchText"
      :filter-type.sync="filterType"
      :view-mode.sync="viewMode"
      @new-file="$emit('new-file')"
    />

    <FileList
      :files="currentFiles"
      :view-mode="viewMode"
      :selected-files="selectedFiles"
      @select="handleSelect"
      @preview="handlePreview"
      @download="handleDownload"
      @delete="$emit('delete', $event)"
    />

    <FileManagerPager
      v-if="pagerConfig.enable"
      :page-num.sync="pager.pageNum"
      :page-size.sync="pager.pageSize"
      :total="totalFiles"
    />

    <el-dialog
      :visible.sync="previwFileVisible"
      title="文件预览"
      @close="previewFileVisible = false"
    >
      <FilePreviewer :fileUrl="previewFileUrl"></FilePreviewer>
    </el-dialog>
  </div>
</template>

<script>
import FileManagerHeader from "./components/header/index.vue";
import FileList from "./components/list/index.vue";
import FileManagerPager from "./components/pager/index.vue";
import FilePreviewer from "./components/previewer/index.vue";

export default {
  components: {
    FileManagerHeader,
    FileList,
    FileManagerPager,
    FilePreviewer,
  },
  props: {
    files: Array,
    pagerConfig: {
      default: () => ({
        enable: true,
        // 分页实现方式：前端实现 / 后端实现
        type: "front",
      }),
      type: Object,
    },
    headerConfig: {
      default: () => ({
        search: false,
        filter: false,
        view: true,
        // 搜索实现方式
        searchType: "front",
      }),
      type: Object,
    },
  },
  data() {
    return {
      searchText: "",
      filterType: "all",
      viewMode: "grid",
      selectedFiles: [],
      previwFileVisible: false,
      previewFileUrl: "",
      pager: {
        pageNum: 1,
        pageSize: 20,
      },
    };
  },
  computed: {
    totalFiles() {
      return this.filteredFiles.length;
    },
    filteredFiles() {
      return this.pipe([this.searchTextPipe], this.files);
    },
    currentFiles() {
      return this.pagerPipe(this.filteredFiles);
    },
  },
  watch: {
    pager: {
      handler(newVal) {
        this.$emit("pagerChange", newVal);
      },
      deep: true,
    },
    searchText(newVal) {
      this.$emit("searchChange", newVal);
    },
    filterType(newVal) {
      this.$emit("filterChange", newVal);
    },
    viewMode(newVal) {
      this.$emit("viewChange", newVal);
    },
  },
  methods: {
    // 搜索管道，文件一次经过文件名（搜索文本）过滤、文件类型过滤和分页过滤
    // 管道组装函数
    pipe(pipes, files) {
      return pipes.reduce((prev, curr) => curr(prev), files);
    },
    searchTextPipe(files) {
      if (this.searchText === "") {
        return files;
      }
      console.log(files, this.searchText);
      return files.filter((file) => {
        return file.name.includes(this.searchText);
      });
    },
    pagerPipe(files) {
      if (!this.pagerConfig.enable) {
        return files;
      }
      if (this.pagerConfig.type === "front") {
        const start = (this.pager.pageNum - 1) * this.pager.pageSize;
        const end = start + this.pager.pageSize;
        return files.slice(start, end);
      }
      return files;
    },
    handleSelect(files) {
      this.selectedFiles = files;
    },
    handlePreview(files) {
      if (files.length === 0) {
        this.$message.warning("请选择进行预览");
        return;
      }
      if (files.length > 1) {
        this.$message.warning("一次只能预览一个文件");
        return;
      }
      if (this.previwFileVisible) {
        this.previwFileVisible = false;
        return;
      }
      console.log(files, "文件预览");
      this.previwFileVisible = true;
      this.previewFileUrl = files[0].url;
    },
    handleDownload(files) {
      const a = document.createElement("a");
      a.href = files[0].url;
      a.download = files[0].name;
      a.click();
      a.remove();
      console.log(files, "文件下载");
    },
  },
};
</script>

<style scoped>
.file-manager {
  position: relative;
  padding: 20px;
}
</style>