r2r_pbl/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> -->
    <div class="f_box_top">
      <div class="f_box_top_left">
        <!-- <el-select v-model="checkFolderid" filterable multiple @change="serchFile">
          <el-option
            v-for="item in myFolderArray"
            :key="item.folderid"
            :label="item.name"
            :value="item.folderid"
          >
          </el-option>
        </el-select> -->
        <selectTag
          v-if="$parent.barNam == 1"
          v-model="checkFolderid"
          :options="myFolderArray2"
          :placeholder=lang.selectFolder
          style="width: 250px;"
          @change="serchFile()"
        />
        <el-select
          v-if="pid.split('/')[0] == '1'"
          style="width: 120px;margin-left: 10px"
          v-loading="!userArray.length"
          v-model="user"
          :placeholder=lang.owner
          clearable
          filterable
          @change="serchFile2()"
        >
          <el-option
            v-for="(item, index) in userArray"
            :key="index"
            :label="item.username"
            :value="item.userid"
          ></el-option>
        </el-select>
      </div>
      <div class="f_box_top_right">
        <div class="input">
          <div class="serch"></div>
          <input
            type="text"
            v-model="fileName"
            :placeholder=lang.selectFileName
            @input="debouncedSearch"
          />
        </div>
        <div class="f_box_top_right">
          <el-button type="primary" size="small" @click="serchFile"
          style="background-color: rgb(51, 112, 255);"
            >
          <img style="vertical-align: middle;transform: scale(1.1);padding-bottom: 2px;box-sizing: border-box;" src="../../../assets/shuax.svg" alt="">
            {{lang.flushed}}</el-button
          >
          <el-button v-if="pid.split('/')[0] == '0'" type="primary" size="small" @click="addImg($event)"
          icon="el-icon-plus"
          style="background-color: rgb(51, 112, 255);"
            >{{lang.uploadFile}}
            <input
              type="file"
              accept="*"
              style="display: none"
              multiple="multiple"
              @change="beforeUpload($event)"
          /></el-button>
          <el-button style="background: #F56C6C;" type="danger" size="small" v-if="checkArray.length" @click="batchDelete"
            >{{lang.delete}}</el-button
          >
          <span v-if="checkArray.length" style="margin-left: 12px;color: #b0b0b0;font-size: 14px;flex-shrink:0;line-height: 35px;">{{ lang.x_items_selected.replace("${x}",checkArray.length) }}</span>

      </div>
      </div>
    </div>
    <div class="none_box" v-if="fileArray.length == 0">{{lang.nouploadFiles}}</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
          style="width: 100%; cursor: pointer;"
          @selection-change="handleSelectionChange"
          :row-key="row => row.id"
          ref="myTable"
          max-height="800px"
          @row-click="checkFile"
        >
          <el-table-column
            type="selection"
            width="50px"
            :reserve-selection="true"
            :selectable="isSelectable"
          ></el-table-column>
          <el-table-column
            prop="name"
            :label=lang.fileName
            show-overflow-tooltip
            min-width="15"
          ></el-table-column>
          <el-table-column
            prop="folderName"
            :label=lang.folderBelongs
            show-overflow-tooltip
            min-width="20"
          ></el-table-column>
          <el-table-column
            prop="username"
            :label=lang.owner
            show-overflow-tooltip
            width="120"
          ></el-table-column>

          <el-table-column :label=lang.sliceClassification width="120px">
            <template slot-scope="scope">
              {{ getState(scope.row.ingestionStatus) }}
            </template>
          </el-table-column>
          <el-table-column :label=lang.graphExtraction width="120px">
            <template slot-scope="scope">
              {{ getState2(scope.row.extractionStatus) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="documentType"
            :label=lang.fileType
            show-overflow-tooltip
            width="120"
          ></el-table-column>
          <!-- <el-table-column label="公开状态" show-overflow-tooltip width="80px"></el-table-column> -->
          <el-table-column
            prop="time"
            :label=lang.uploadTime
            show-overflow-tooltip
            min-width="20"
          ></el-table-column>
          <el-table-column align="center" width="100px">
            <template slot-scope="scope">
              <el-popover
                  placement="bottom-end"
                  trigger="hover"
                  visible-arrow
                  popper-class="custom-popover"
                  width="100px"
                  >
                  <div class="BtnHP">
                    <div class="BtnHPDel1">

                      <!-- <el-button
                        type="text"
                        size="small"
                        @click="extractFile(scope.row)"
                        :disabled="scope.row.ingestionStatus == 'failed'"
                        >提取</el-button
                      > -->
                      <div class="btnBh"
                       @click="extractFile(scope.row)"
                        @mouseover="isHover = true"
                        :disabled="scope.row.ingestionStatus == 'failed'"
                        @mouseleave="isHover = false"
                        v-if="scope.row.userid == userid">
                        <img
                        style="width: 14px;"
                        :src="isHover ? tqList2 : tqList"
                         alt="">
                        <span :class="isHover ? 'lookHp2' : 'lookHp1'">{{lang.extract}}</span>
                      </div>
                      <!-- <el-button
                        type="text"
                        size="small"
                        @click="checkFile(scope.row)"
                        :disabled="scope.row.ingestionStatus == 'failed'"
                        >查看</el-button
                      > -->

                      <div class="btnBh"
                      @click="checkFile(scope.row)"
                        @mouseover="isHover2 = true"
                        :disabled="scope.row.ingestionStatus == 'failed'"
                        @mouseleave="isHover2 = false">
                        <img
                        :src="isHover2 ? look2 : look1"
                         alt="">
                        <span :class="isHover2 ? 'lookHp2' : 'lookHp1'">{{lang.view}}</span>
                      </div>
                      <div class="btnBh"
                      @click="downloadFile(scope.row)"
                        @mouseover="isHover3 = true"
                        :disabled="scope.row.ingestionStatus == 'failed'"
                        @mouseleave="isHover3 = false">
                        <img
                        :src="isHover3 ? download2 : download"
                         alt="">
                        <span :class="isHover3 ? 'lookHp2' : 'lookHp1'">{{lang.download}}</span>
                      </div>
                    </div>
                    <div style="background-color: #e7e7e7;width: 100%;height: .5px;margin: 5px 0;"></div>
                    <div class="BtnHPDel">
                      <!-- <el-button
                        type="text"
                        size="small"
                        v-if="scope.row.userid == userid"
                        @click="deleteFile(scope.row.id, scope.row.documentid)"
                        >删除</el-button
                      > -->
                      <div class="btnBh2"
                      @click="deleteFile(scope.row.id, scope.row.documentid)"
                      v-if="scope.row.userid == userid">
                        <img src="../../../assets/listdel.svg" alt="">
                        <span style="color: #DE4C41;">{{lang.delete}}</span>
                      </div>
                    </div>
              </div>
                <el-button slot="reference" class="BtnH" style="border: none;padding: 5px;" @click.stop="">
                    <i class="el-icon-more"></i>
                  </el-button>

                </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        class="pageBox"
        style="margin-top: 10px"
        layout="total,prev, pager, next,  slot"
        :page-size="limit"
        :total="total"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50, 100]"
      >
      <el-select v-model="limit" @change="handleSizeChange" class="file_mySelect">
          <el-option
              v-for="item in [10, 20, 50, 100]"
              :key="item"
              :label="item"
              :value="item"
              ></el-option>
          </el-select>
      </el-pagination>
      <div v-if="proVisible" class="mask">
        <div class="progressBox">
          <div class="lbox">
            {{lang.uploadWait}}<img src="../../../assets/KekeLoading.gif" />
          </div>
          <div class="lbox_count">{{ pcount }} / {{ ptotal }}</div>
        </div>
      </div>
    </div>
    <wpdf :dialogVisiblePdf.sync="dialogVisiblePdf" :url="wurl"></wpdf>
    <wVideo :dialogVisibleVideo.sync="dialogVisibleVideo" :url="wurl"></wVideo>
    <wOffice
      :dialogVisibleOffice.sync="dialogVisibleOffice"
      :url="wurl"
    ></wOffice>
    <checkDialog ref="checkDialog"></checkDialog>
  </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 selectTag from "./components/selectTag3.vue";

// 导入SVG组件
import look1 from '../../../assets/look1.svg';
import look2 from '../../../assets/look2.svg';
import tqList2 from '../../../assets/tqList2.svg';
import tqList from '../../../assets/tqList.svg';
import download from '../../../assets/download.svg';
import download2 from '../../../assets/download2.svg';


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";
import checkDialog from "./components/checkDialog";

export default {
  components: {
    wVideo,
    wpdf,
    wOffice,
    checkDialog,
    selectTag
  },
  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 = [];
        console.log(this.myFolderArray);
        this.page = 1
        this.getData();
      }
    },
  },
  data() {
    return {
      look1:look1,
      look2:look2,
      tqList2:tqList2,
      tqList:tqList,
      download: download,
      download2: download2,
      isHover:false,
      isHover2:false,
      isHover3:false,
      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: [],
      user: "",
      userArray: [],
      pcount: 0,
      ptotal: 0
    };
  },
  computed: {
    getState() {
      return function(item) {
        if (item == "success") {
          return this.lang.success;
        } else if (item == "failed") {
          return this.lang.fail;
        } else if (item == "augmenting") {
          return this.lang.sliced;
        } else if (item == "pending") {
          return this.lang.pending;
        } else if (item == "enriched") {
          return "enriched";
        } else if (!item) {
          return this.lang.sliced;
        } else {
          return item;
        }
      };
    },
    getState2() {
      return function(item) {
        if (item == "success") {
          return this.lang.success;
        } else if (item == "failed") {
          return this.lang.fail;
        } else if (item == "pending") {
          return this.lang.pending;
        } else if (item == "processing") {
          return this.lang.processing;
        } else if (item == "enriched") {
          return "enriched";
        } else if (!item) {
          return this.lang.uploading;
        } else {
          return item;
        }
      };
    },
    myFolderArray2() {
      if (this.user) {
        return this.myFolderArray.filter(e => e.userid == this.user);
      } else {
        return this.myFolderArray;
      }
    },
  },
  methods: {
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    handleSizeChange(val){
      this.limit = val
      this.getData()
    },
    getData() {
      let type = this.pid.split("/");
      this.isLoading = true;
      let params = {
        uid: this.userid,
        folderid: this.checkFolderid.join(","),
        n: this.fileName.trim(),
        page: this.page,
        num: this.limit
      };
      if(type[0] == '1'){
        params.userid = this.user
      }
      this.ajax
        .post(this.$store.state.fileApi + (type[0] == '0' ? "getFile" : "getFileOpen"), [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.userArray = res.data.user
          // 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 } });
      }
    },
    debouncedSearch() {
      clearTimeout(this.debounceTimeout);
      this.debounceTimeout = setTimeout(() => {
        this.serchFile();
      }, 300);
    },
    serchFile() {
      this.page = 1;
      this.getData();
    },
    serchFile2() {
      this.checkFolderid = ""
      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",
        "jpg",
        "jpeg",
        "png",
        "gif",
        "bmp"
      ];

      const uploadFiles = async files => {
        this.pcount = 0
        this.ptotal = files.length
        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(`${this.lang.unsupFileformats}: ${file.name}`);
            await new Promise(resolve => setTimeout(resolve, 1000)); // 延迟1秒再跳过
            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");
          formData.append("run_with_orchestration", "false");

          // 使用同步方式上传文件
          await this.uploadFile(formData, file.name, uuid);
          this.pcount = cfindex + 1
          // 每5秒上传一次
          if (cfindex < files.length - 1) {
            await new Promise(resolve => setTimeout(resolve, 5000));
          }
        }
        setTimeout(() => {
          this.proVisible = false;
          this.$message.success(this,lang.operComplete);
          this.getData(); // 在上传完所有文件后再调用getData
        }, 1000);
      };

      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"
          }
        }).then(res => {
          console.log(res, formData);
          const message = res.data.results && res.data.results.message;
          const status = message === 'Document created and ingested successfully.' ? 'success' : 'failed';
          const msg = message === 'Document created and ingested successfully.' ? this.lang.sliceSuccess : this.lang.sliceFail;
          this.$message({
            message: msg,
            type: status == 'success' ? status : 'error'
          })
          // setTimeout(() => {
            this.getData()
          // }, 1000)
          setTimeout(() => {
            this.fileArray.forEach(e => {
              if (e.documentid === uuid) {
                e.ingestionStatus = status;
              }
            });
          }, 1000);
        }).catch(err => {
          this.$message.error(this.lang.uploadFail)
          this.fileArray.forEach(e => {
            if (e.documentid === uuid) {
              e.ingestionStatus = 'failed';
            }
          });
          console.error(err);
        });

        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(this.lang.uploadFail);
      }
    },
    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(this.lang.deleteFile, this.lang.prompt, {
        confirmButtonText: this.lang.confirm,
        cancelButtonText: this.lang.cancel,
        type: "warning"
      })
        .then(() => {
          let params = [
            {
              ids: fileid,
              documentids: documentid
            }
          ];
          this.ajax
            .post(this.$store.state.fileApi + "deleteFile", params)
            .then(res => {
              this.$message({
                message: this.lang.deleteSuccess,
                type: "success"
              });
              this.checkArray = [];
              this.checkArray2 = [];
              this.$refs.myTable.clearSelection();
              this.getData();
            })
            .catch(err => {
              this.$message.error(this.lang.deleteFail);
              console.error(err);
            });
        })
        .catch(() => {});
    },
    batchDelete() {
      if (!this.checkArray.length) {
        this.$message.warning(this.lang.selectDeFile);
        return;
      }
      let array = this.checkArray2.map(item => item.id);
      let array2 = this.checkArray2.map(item => item.documentid);
      this.deleteFile(array.join(","), array2.join(","));
    },
    checkFile(row) {
      if (row.ingestionStatus != "success") return this.$message.info(this.lang.fileUploadFail)

      this.$refs.checkDialog.openG(row.documentid);
    },
    downloadFile(row) {
      let params = {
        documentid: row.documentid,
        filename: row.name,
      };
      // 使用axios发送GET请求下载文件
      this.ajax.post(`${this.$store.state.fileApi}downloadFile2`, [params],{responseType: 'blob'}).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', row.name); // 设置下载文件名
        document.body.appendChild(link);
        link.click();
        link.remove();
        this.$message({
          message: this.lang.downloadSuccess,
          type: "success"
        });
      }).catch(err => {
        this.$message.error(this.lang.downloadFail);
        console.error(err);
      });
    },

    extractFile(row) {
      if (row.ingestionStatus != "success") return this.$message.info(this.lang.fileUploadFail)

      let params = {
        documentid: row.documentid
      };
      // 获取切片
      try {
        const res = this.ajax.post(this.$store.state.fileApi + "extractFile2", [
          params
        ]).then(res => {
          console.log(res, row);
          const message = res.data.result && res.data.result.message;
          // const status = message === 'Document entities and relationships extracted successfully.' ? 'success' : 'failed';
          // const msg = message === 'Document entities and relationships extracted successfully.' ? '提取成功' : '提取失败';
          // this.$message({
          //   message: msg,
          //   type: status == 'success' ? status : 'error'
          // })
          // this.fileArray.forEach(e => {
          //   if (e.documentid === row.documentid) {
          //     e.extractionStatus = status;
          //   }
          // });
          setTimeout(() => {
            this.getData();
          }, 1000)
        }).catch(err => {
          this.$message.error(this.lang.extrFailed)
          this.fileArray.forEach(e => {
            if (e.documentid === row.documentid) {
              e.extractionStatus = 'failed';
            }
          });
          console.error(err);
        });
        console.log(res.data);
        this.$message.success(this.lang.extractingFile);
        this.getData();
      } catch (err) {
        console.error(err);
      }
    },
    isSelectable(row) {
      return row.userid == this.userid;
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style scoped>
.f_box {
  width: 100%;
  height: calc(100% - 58px);
  background-color: #fff;
  border-radius: 8px;
  position: relative;
  min-height: 400px;
  margin-top: 16px;
  box-shadow: 0px 4px 4px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08);
}

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

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

.f_box_top_title {
  /* font-size: 16px; */
  color: rgba(8, 13, 30, .9);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  /* line-height: 32px; */
  /* 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 >>> .el-icon-plus:before {
  font-size: 14px;
  font-weight: 600;
  /* vertical-align: middle;  */
}
.f_box_top_right >>>.el-button--primary:focus,.f_box_top_right>>> .el-button--primary:hover{
  filter: brightness(120%);
}
.f_box_top_right > .input {
  position: relative;
  height: 40px;
}

.f_box_top_right > .input > input {
  width: 100%;
  height: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  padding: 0 15px 0 45px;
  box-sizing: border-box;
  font-size: 14px;
  width: 250px;
  height: 36px;
  font-size: 12.8px;
  border-radius: 6px;
  outline: none;
}

.f_box_top_right >>> .el-button{
  height: 35px !important;
  font-size: 12.8px;
  background-color: #3370FF;
  border-radius: 6px;
  margin-left: 12px;
}
.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;
  left: 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: 100px;
  background: #fff;
  border-radius: 5px;
  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: 16px;
  display: flex;
  align-items: center;
  color: #747474;
}

.progressBox .lbox img {
  width: 50px;
  margin-right: 0px;
}

.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 {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
}
.f_box_file_list >>> .el-table-column--selection .cell{
    display: flex !important;
    align-items: center !important;
}


.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;
}


.pageBox{
  display: flex;
}
.pageBox >>> .el-pagination__total{
  margin-right: auto;
}
.list_file_box >>>table th{
  border:none !important;
  background-color: #F0F2F5 !important; /* 浅灰色背景 */
  color: #00000099 !important;
}
.list_file_box >>>table tr td{
  border:none !important;
  border-bottom: 1px solid #EBEEF5 !important;
}

.list_file_box >>>table tr {
  border:1px #000 solid !important;
}

.list_file_box >>> .el-table__header-wrapper{
  margin-bottom: 10px !important;
}

.list_file_box >>> .el-table__row{
  border: 1px #ccc solid;
}
.list_file_box >>>table tr td:nth-child(1){
  border-radius: 10px 0 0 10px !important;
}
.list_file_box >>>table tr td:nth-last-child(1){
  border-radius: 0 10px 10px 0 !important;
}

.list_file_box >>>table tr th:nth-child(1){
  border-radius: 10px 0 0 10px;
}

.list_file_box >>>table tr th:nth-last-child(2){
  border-radius: 0 10px 10px 0 !important;
}
.list_file_box >>>.el-table::before{
  background-color: #fff;
}
.list_file_box >>>.el-table--border::after{
  background-color: #fff;
}
.list_file_box >>> .el-table--border{
  border: none;
  border-bottom: 1px solid #EBEEF5;
}
.BtnH >>> .el-button{
  padding: 5px !important;
  width: 30px !important;
  color: #4C5567;
}
.BtnH >>> .el-button:focus,.BtnH >>> .el-button:hover{
  background: #E8EBF0 !important;
  color: #487FFF !important;
}


.BtnHPDel1 >>> .el-button:focus, .BtnHPDel1 >>> .el-button:hover{
  background: #F0F4FF ;
  color: #082e86 !important;
}

.BtnHPDel >>> .el-button:focus,.BtnHPDel >>> .el-button:hover{
  background: #FBEAE8 !important;
  color: #DE4C41 !important;
}

.BtnH >>> .el-button--small, .el-button--small.is-round{
  border: none;
  padding: 0;
}
.BtnHP{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.BtnHPDel{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.BtnHPDel1{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.BtnHP >>> .el-button{
  color: #4C5567;
  margin-left: 0 !important;
}
.BtnHP >>>.el-popper .popper__arrow, .el-popper .popper__arrow::after{
  display: none;
}

.btnBh:hover{
  background: #F0F4FF;
}
.btnBh img{
  margin-right: 5px;
  width: 17px;
}

.btnBh2 img{
  width: 17px;
  margin-right: 5px;
  padding: 1.5px;
  box-sizing: border-box;
}
.btnBh2:hover{
  background: #FBEAE8;
}
.lookHp2{
  color: #6c6c6c;
}
.lookHp2{
  color: #487FFF;
}
.btnBh2{
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 5px;
  box-sizing: border-box;
}
.btnBh{
  display: flex;
  cursor: pointer;
  border-radius: 6px;
  padding: 5px 8px;
  align-items: center;
}
</style>

<style>
.custom-popover {
  min-width: 70px !important;
  width: auto !important;
  padding: 8px 6px;
  border-radius: 8px;
}
</style>