pbl-teacher-table/src/components/pages/knowledge/fileBox.vue

<template>
  <div class="f_box" @dragover.prevent @drop="handleDrop">
    <div class="f_box_top">
      <div class="f_box_top_left">
        <div class="f_box_top_title">所有文件</div>
      </div>
      <div class="f_box_top_right">
        <div class="btn" @click="serchFile">刷新</div>
        <div class="btn" @click="addImg($event)">
          上传文件
          <input
            type="file"
            accept="*"
            style="display: none"
            multiple="multiple"
            @change="beforeUpload($event)"
          />
        </div>
        <div class="btn delBtn" @click="batchDelete">删除</div>
      </div>
    </div>
    <div class="f_box_top">
      <div class="f_box_top_left">
        <el-select v-model="checkFolderid" filterable @change="serchFile">
          <el-option v-for="item in myFolderArray"
            :key="item.folderid"
            :label="item.name"
            :value="item.folderid">
          </el-option>
        </el-select>
        
      </div>
      <div class="f_box_top_right">
        <div class="input">
          <input
            type="text"
            v-model="fileName"
            placeholder="请输入你需要搜索的文件名字"
            @keyup.enter="serchFile"
          />
          <div class="serch" @click="serchFile"></div>
        </div>
      </div>
    </div>
    <div class="none_box" v-if="fileArray.length == 0">暂无上传文件</div>
    <div
      class="f_box_file_list"
      v-else-if="stype == '2' && fileArray.length"
      v-loading.body="isLoading"
    >
      <div class="list_file_box">
        <el-table
          :data="fileArray"
          border
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :row-key="(row) => row.id"
          ref="myTable"
        >
          <el-table-column type="selection" width="50px" :reserve-selection="true"></el-table-column>
          <el-table-column prop="name" label="文件名" show-overflow-tooltip min-width="15"></el-table-column>
          <el-table-column prop="username" label="拥有者" show-overflow-tooltip min-width="20"></el-table-column>
          <el-table-column prop="folderName" label="所属文件夹" show-overflow-tooltip min-width="20"></el-table-column>
          <el-table-column label="处理状态" width="80px">
            <template slot-scope="scope">
              {{ getState(scope.row.ingestionStatus) }}
            </template>
          </el-table-column>
           <el-table-column label="是否已提取知识图谱" width="150px">
            <template slot-scope="scope">
              {{ getState2(scope.row.extractionStatus) }}
            </template>
          </el-table-column>
          <el-table-column prop="documentType" label="文件类型" show-overflow-tooltip min-width="10"></el-table-column>
          <!-- <el-table-column label="公开状态" show-overflow-tooltip width="80px"></el-table-column> -->
          <el-table-column prop="time" label="上传时间" show-overflow-tooltip min-width="20"></el-table-column>
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <div>
                <!-- <el-button type="primary" size="small">查看</el-button> -->
                <el-button type="danger" size="small"  v-if="scope.row.userid == userid"  @click="deleteFile(scope.row.id, scope.row.documentid)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        style="margin-top: 10px"
        background
        layout="prev, pager, next"
        :page-size="limit"
        :total="total"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <div v-if="proVisible" class="mask">
      <div class="progressBox">
        <div class="lbox">
          <img src="../../../assets/loading.gif" />上传中，请稍后
        </div>
      </div>
    </div>
    <wpdf :dialogVisiblePdf.sync="dialogVisiblePdf" :url="wurl"></wpdf>
    <wVideo :dialogVisibleVideo.sync="dialogVisibleVideo" :url="wurl"></wVideo>
    <wOffice
      :dialogVisibleOffice.sync="dialogVisibleOffice"
      :url="wurl"
    ></wOffice>
  </div>
</template>

<script>
import officeImg from "../../../assets/icon/sourceFile/office.png";
import pdfImg from "../../../assets/icon/sourceFile/pdf.png";
import videoImg from "../../../assets/icon/sourceFile/video.png";
import otherImg from "../../../assets/icon/sourceFile/other.png";
import checkImg from "../../../assets/icon/sourceFile/check.png";
import checkIsImg from "../../../assets/icon/sourceFile/check_is.png";

import wVideo from "../test/file/wVideo.vue";
import wpdf from "../test/file/wPdf2.vue";
import wOffice from "../test/file/wOffice.vue";

import { v4 as uuidv4 } from "uuid";

const getFile = (url) => {
  return new Promise((resolve, reject) => {
    var credentials = {
      accessKeyId: "AKIATLPEDU37QV5CHLMH",
      secretAccessKey: "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",
    }; //秘钥形式的登录上传
    window.AWS.config.update(credentials);
    window.AWS.config.region = "cn-northwest-1"; //设置区域
    let url2 = url;
    let _url2 = "";
    if (
      url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
    ) {
      _url2 = url2.split(
        "https://view.officeapps.live.com/op/view.aspx?src="
      )[1];
    } else {
      _url2 = url2;
    }
    var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
    let name = decodeURIComponent(
      _url2
        .split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
        .replace(/\+/g, " ")
    );
    var params = {
      Bucket: "ccrb",
      Key: name,
    };
    s3.getObject(params, function (err, data) {
      if (err) {
        console.log(err, err.stack);
        resolve({ data: 1 });
      } else {
        resolve({ data: data.Body });
        console.log(data);
      } // sxuccessful response
    });
    // axios({
  });
};
export default {
  components: {
    wVideo,
    wpdf,
    wOffice,
  },
  props: {
    userid: {
      type: String,
    },
    typeArray: {
      type: Array,
    },
    pid: {
      type: String,
    },
    type: {
      type: String,
    },
    moFolderid: {
      type: String
    },
    myFolderArray: {
      type: Array,
    }
  },
  watch: {
    pid: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.fileArray = [];
        this.checkArray = [];
        this.fileName = "";
        this.checkFolderid = this.moFolderid
        // this.getData();
      },
    },
  },
  data() {
    return {
      isLoading: false,
      proVisible: false,
      stype: 2,
      fileArray: [],
      officeImg: officeImg,
      pdfImg: pdfImg,
      videoImg: videoImg,
      otherImg: otherImg,
      checkImg: checkImg,
      checkIsImg: checkIsImg,
      checkArray: [],
      checkArray2: [],
      dialogVisiblePdf: false,
      dialogVisibleVideo: false,
      dialogVisibleOffice: false,
      wurl: "",
      moveBox: false,
      checkTypeArray: [],
      moveChild: "",
      fileName: "",
      limit: 10,
      total: 0,
      page: 1,
      checkFolderid: "",
    };
  },
  computed: {
    getState() {
      return function (item) {
        if (item == "success") {
          return "成功";
        } else if (item == "failed") {
          return "失败";
        } else if (item == "augmenting") {
          return "上传中";
        } else if (item == "pending") {
          return "待处理";
        } else if (item == "enriched") {
          return "enriched";
        } else if(!item){
          return "上传中"
        } else {
          return item
        }
      };
    },
    getState2() {
      return function (item) {
        if (item == "success") {
          return "成功";
        } else if (item == "failed") {
          return "失败";
        } else if (item == "pending") {
          return "待处理";
        } else if (item == "processing") {
          return "处理中";
        } else if (item == "enriched") {
          return "enriched";
        } else if(!item){
          return "上传中"
        } else {
          return item
        }
      };
    },
  },
  methods: {
    handleCurrentChange(val) {
        this.page = val;
        this.getData();
    },
    getData() {
      this.isLoading = true;
      let params = {
        uid: this.userid,
        folderid: this.checkFolderid,
        n: this.fileName,
        page: this.page,
        num: this.limit,
      };
      this.ajax
        .post(this.$store.state.fileApi + "getFile", [params])
        .then((res) => {
          this.isLoading = false;
          console.log(res.data);
          this.total = res.data.result.length ? res.data.result[0].num : 0;
          this.fileArray = res.data.result;
          this.$parent.$refs.folder.getData();
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    handleSelectionChange(selectedRows) {
      this.checkArray = selectedRows.map((row) => row.id);
      this.checkArray2 = selectedRows.map(row => ({ id: row.id, documentid: row.documentid }));
    },
    addImg(e) {
      var el = e.currentTarget;
      el.getElementsByTagName("input")[0].click();
      e.target.value = "";
    },
    handleDrop(event) {
      event.preventDefault(); // 阻止默认的浏览器下载行为
      const files = event.dataTransfer.files;
      if (files.length) {
        this.beforeUpload({target:{files}});
      }
    },
    serchFile() {
      this.page = 1;
      this.getData();
    },
    async beforeUpload(event) {
      let file = "";
      let cfindex2 = 0;
      this.proVisible = true;
      const allowedExtensions = [
        "csv","xls","xlsx","md","pdf","txt","ppt","pptx","docx"
      ];
      
      const uploadFiles = async (files) => {
        for (let cfindex = 0; cfindex < files.length; cfindex++) {
          file = files[cfindex];
          const fileExtension = file.name.split('.').pop().toLowerCase();
          
          if (!allowedExtensions.includes(fileExtension)) {
            this.$message.error(`不支持的文件格式: ${file.name}`);
            cfindex2++;
            continue; // 跳过不支持的文件
          }
          let uuid = uuidv4();
          let formData = new FormData();
          const timestamp = Date.now();
          const baseName = file.name.slice(0, -(fileExtension.length + 1));
          formData.append('file', new File([file], `${baseName}${timestamp}.${fileExtension}`));
          formData.append('collection_ids', JSON.stringify([this.moFolderid]));
          formData.append('id', uuid);
          formData.append('metadata', JSON.stringify({title: file.name}));
          formData.append('ingestion_mode', "fast");

          // 使用同步方式上传文件
          await this.uploadFile(formData, file.name, uuid);
          cfindex2++;

          // 每5秒上传一次
          if (cfindex < files.length - 1) {
            await new Promise(resolve => setTimeout(resolve, 5000));
          }
        }
        this.proVisible = false;
        this.$message.success("上传成功");
        await this.getData(); // 在上传完文件后再调用getData
      };

      await uploadFiles(event.target.files);
    },
    async uploadFile(formData, name, uuid, bool) {
      try {
        // 确保formData是正确的格式
        // this.$store.state.fileApi + "upload"
        this.ajax.post("https://r2rserver.cocorobo.cn/v3/documents", formData, {
          headers: {
            'Content-Type': 'multipart/form-data' 
          }
        });

        let params = {
          n: name,
          did: uuid,
          uid: this.userid,
          fid: this.moFolderid,
          mofid: "",
        }
        const res2 = await this.ajax.post(this.$store.state.api + 'addFile', [params]);
      } catch (err) {
        console.error(err);
        this.$message.error("上传失败");
      }
    },
    formatFileSize(bytes) {
      if (bytes < 1024) {
        return bytes + "B";
      } else if (bytes < 1048576) {
        return (bytes / 1024).toFixed(2) + "KB";
      } else if (bytes < 1073741824) {
        return (bytes / 1048576).toFixed(2) + "MB";
      } else {
        return (bytes / 1073741824).toFixed(2) + "GB";
      }
    },
    deleteFile(fileid, documentid) {
      this.$confirm("确定删除该文件吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
       .then(() => {
          let params = [{ 
            ids: fileid,
            documentids: documentid,
          }];
          this.ajax
           .post(this.$store.state.fileApi + "deleteFile", params)
           .then((res) => {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.checkArray = []
              this.checkArray2 = []
              this.$refs.myTable.clearSelection();
              this.getData();
            })
           .catch((err) => {
              this.$message.error("删除失败");
              console.error(err);
            });
        })
       .catch(() => {});
    },
    batchDelete(){
      if(!this.checkArray.length){
        this.$message.warning("请选择要删除的文件")
        return;
      }
      let array = this.checkArray2.map(item => item.id);
      let array2 = this.checkArray2.map(item => item.documentid);
      this.deleteFile(array.join(","), array2.join(","))
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style scoped>
.f_box {
  width: 100%;
  /* height: 100%; */
  position: relative;
  min-height: 400px;
}

.f_box_top {
  display: flex;
  align-items: center;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}

.f_box_top_left {
  display: flex;
  align-items: center;
}

.f_box_top_title {
  font-size: 16px;
  /* font-weight: bold; */
}

.f_box_top .btn {
  display: flex;
  cursor: pointer;
  align-items: center;
  height: 30px;
  padding: 0 8px;
  background: rgb(0, 97, 255);
  color: #fff;
  box-sizing: border-box;
  border-radius: 4px;
  font-size: 14px;
  align-items: center;
}

.f_box_top .btn2 {
  display: flex;
  cursor: pointer;
  align-items: center;
  height: 30px;
  padding: 0 8px;
  background: #fff;
  color: rgb(0, 97, 255);
  border: 1px solid rgb(0, 97, 255);
  box-sizing: border-box;
  border-radius: 4px;
  font-size: 14px;
  align-items: center;
}

.f_box_top .delBtn {
  background: rgb(255, 0, 13);
}

.f_box_top .btn + .btn2,
.f_box_top .btn + .btn,
.f_box_top .btn2 + .btn2,
.f_box_top .btn2 + .delBtn {
  margin-left: 15px;
}

.f_box_top_right {
  margin-left: auto;
  max-width: calc(100% - 280px);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.f_box_top_right > .input {
  position: relative;
  width: 250px;
  height: 35px;
}

.f_box_top_right > .input > input {
  width: 100%;
  height: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  padding: 0 45px 0 10px;
  box-sizing: border-box;
  font-size: 12px;
  outline: none;
}

.f_box_top_right > .input > .serch {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("../../../assets/icon/sourceFile/search.png");
  background-size: 100% 100%;
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.f_box_top_right > .tab {
  height: 30px;
  width: 80px;
  margin-left: 15px;
  background: #e7e7e7;
  border: 2px solid #d9d9d9;
  border-radius: 5px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.f_box_top_right > .tab > .table,
.f_box_top_right > .tab > .list {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.f_box_top_right > .tab > .list::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("../../../assets/icon/sourceFile/list.png");
  background-size: 100% 100%;
}

.f_box_top_right > .tab > .list.active,
.f_box_top_right > .tab > .table.active {
  background: #fff;
}

.f_box_top_right > .tab > .table::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("../../../assets/icon/sourceFile/table.png");
  background-size: 100% 100%;
}

.mask {
  background-color: rgb(0 0 0 / 30%);
  /* position: fixed; */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progressBox {
  width: 300px;
  height: 150px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 6px 1px #bfbfbf;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  color: #6c6c6c;
}

.progressBox >>> .el-progress-bar__outer {
  background-color: #d1dfff !important;
}

.progressBox .lbox {
  height: 50px;
  font-size: 19px;
  display: flex;
  align-items: center;
  color: #747474;
}

.progressBox .lbox img {
  width: 40px;
  margin-right: 20px;
}

.closeCss {
  position: absolute;
  top: 8px;
  right: 8px;
  cursor: pointer;
  width: 20px;
  height: 20px;
}

.closeCss > img {
  width: 100%;
  height: 100%;
}

.f_box_file_square {
  height: calc(100% - 55px);
  overflow: auto;
  width: 100%;
  padding: 55px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  position: relative;
}

.f_box_file_square > .f_box_file {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  cursor: pointer;
  margin: 0 36px 36px 0;
  border-radius: 20px;
  position: relative;
}

.f_box_file_square > .f_box_file:hover {
  background: #f0f2f5;
}

.f_box_file_square > .f_box_file:hover > .check {
  display: block;
}

.f_box_file_square > .f_box_file.check {
  background: #e0eafb;
}

.f_box_file_square > .f_box_file.check > .check {
  display: block;
}

.f_box_file_square > .f_box_file > .check {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 16px;
  height: 16px;
  background-size: 100%;
  display: none;
}

.f_box_file_square > .f_box_file > .check > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.f_box_file_square > .f_box_file > img {
  width: 90px;
  height: 90px;
  object-fit: cover;
}

.f_box_file_square > .f_box_file > .name {
  white-space: nowrap;
  font-size: 14px;
  max-width: 80%;
  overflow: hidden;
  margin: 4px auto 0;
  text-overflow: ellipsis;
  text-align: center;
}

.f_box_file_list {
  /* height: calc(100% - 55px); */
  /* overflow: auto; */
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.f_box_file_list > .f_box_file {
}

.f_box_file_allCheck {
  display: flex;
  align-items: center;
  position: absolute;
  font-size: 14px;
  top: 20px;
  left: 10px;
  cursor: pointer;
}

.f_box_file_allCheck > img {
  width: 16px;
  height: 16px;
  object-fit: cover;
  margin-right: 5px;
}

.dialog >>> .el-dialog__body {
  padding: 10px 20px;
}

.type_nav_box {
}

.type_nav_box > .nav {
  height: 40px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
  font-size: 16px;
  color: #000;
}

.type_nav_box > .nav > .down {
  min-width: 14px;
  height: 14px;
  background-image: url("../../../assets/icon/sourceFile/icon_arrow.png");
  background-size: 100% 100%;
  margin-right: 10px;
  transition: all 0.3s;
  transform: rotate(-90deg);
}

.type_nav_box > .nav.active > .down {
  transform: rotate(0deg);
}

.type_nav_box > .nav > .file {
  min-width: 18px;
  height: 18px;
  background-image: url("../../../assets/icon/sourceFile/file.png");
  background-size: 100% 100%;
  margin-right: 10px;
}

.type_nav_box > .nav > .name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.type_nav_box > .child {
}

.type_nav_box > .child > .nav {
  height: 40px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 10px 0 50px;
  box-sizing: border-box;
  margin-bottom: 10px;
  font-size: 16px;
  color: #000;
}

.type_nav_box > .child > .nav.active {
  background: #e0eafb;
}

.type_nav_box > .child > .nav > .file {
  min-width: 18px;
  height: 18px;
  background-image: url("../../../assets/icon/sourceFile/file.png");
  background-size: 100% 100%;
  margin-right: 10px;
}

.type_nav_box > .child > .nav > .name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.none_box {
  height: calc(100% - 55px);
  overflow: auto;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.list_file_box {
  width: 100%;
}

.list_file_name {
  display: flex;
  align-items: center;
}

.list_file_name > img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  margin-right: 5px;
}

.list_file_name > div {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>