r2r_pbl/src/components/pages/knowledge/folder.vue

<template>
  <div
    class="f_box"
    :style="{
      background: stype2 == 2 ? '#fff' : '',
      padding: stype2 == 2 ? '10px' : '',
    }"
    v-loading="delLoading"
  >
    <!-- <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
          style="margin-right: 10px; width: 100px"
          v-loading="tagLoading1"
          v-model="check1"
          :placeholder="lang.subject"
          clearable
          filterable
          collapse-tags
          @change="serchFile()"
        >
          <el-option
            v-for="(item, index) in tagData1"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-select
          style="margin-right: 10px; width: 100px"
          v-loading="tagLoading2"
          v-model="check2"
          :placeholder="lang.grade"
          clearable
          filterable
          @change="serchFile()"
        >
          <el-option
            v-for="(item, index) in tagData2"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-select
          v-if="pid.split('/')[0] == '0'"
          style="width: 100px"
          v-loading="tagLoading3"
          v-model="check3"
          :placeholder="lang.customize"
          clearable
          filterable
          @change="serchFile()"
        >
          <el-option
            v-for="(item, index) in tagData3"
            :key="index"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
        <el-select
          v-if="pid.split('/')[0] == '1'"
          style="width: 120px"
          v-loading="isLoading"
          v-model="user"
          :placeholder="lang.owner"
          clearable
          filterable
          @change="serchFile()"
        >
          <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>
          <div
            class="left"
            style="display: flex; justify-content: flex-end; padding: 10px 16px"
          >
            <span
              class="list"
              :class="{ active: stype2 == 1 }"
              @click="checkStype2(1)"
            ></span>
            <span
              class="table"
              :class="{ active: stype2 == 2 }"
              @click="checkStype2(2)"
            ></span>
          </div>
        </div>
        <div class="input">
          <div class="serch"></div>
          <input
            type="text"
            v-model="fileName"
            :placeholder="lang.search"
            @input="debouncedSearch"
          />
        </div>
        <div class="f_box_top_right">
          <el-button
            v-if="pid.split('/')[0] == '0'"
            type="primary"
            style="background-color: #3370ff; height: 38px"
            size="small"
            @click="openAdd"
            icon="el-icon-plus"
            >{{ lang.newFolder }}</el-button
          >
          <el-button
            style="height: 38px; margin-right: 12px; background: #f56c6c"
            type="danger"
            v-if="checkArray.length && stype2 == 2"
            size="small"
            @click="deleteFolder"
            >{{ lang.delete }}</el-button
          >
          <span
            v-if="checkArray.length && stype2 == 2"
            style="
              margin-right: 10px;
              color: #b0b0b0;
              font-size: 14px;
              flex-shrink: 0;
            "
            >{{ lang.selectedFolders }}{{ checkArray.length
            }}{{ lang.piece }}</span
          >
        </div>
      </div>
    </div>

    <div
      class="none_box"
      v-if="fileArray.length == 0"
      v-loading.body="isLoading && showBool"
    >
      {{ lang.noFolder }}
    </div>
    <div
      class="f_box_file_list"
      v-else-if="stype == '2' && fileArray.length"
      v-loading.body="isLoading && showBool"
    >
      <!-- 切换样式 -->
      <!-- :style="{'grid-template-columns': `repeat(${lisTnum}, 1fr)`}" -->
      <div v-if="stype2 == 1" class="listBlockS">
        <div
          class="listBlock"
          @click="editFile(item.id, item.folderid)"
          v-for="(item, index) in fileArray"
          :key="index"
        >
          <div class="listBlockTit">
            <div class="listBlockTit">
              <img
                style="width: 28px; height: 28px"
                src="../../../assets/listfolder2.svg"
                alt=""
              />
              <div
                class="listBlockTitZ"
                style="margin-left: 5px; color: #111824"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="listDetail">
            <span v-if="!item.detail">{{ lang.noDesc }}~</span>
            <div class="listDetail2" v-else>
              {{ item.detail }}
            </div>
          </div>
          <div class="listBlockTit">
            <div class="owerCon">
              <div
                style="display: flex; align-items: center; margin-right: 14px"
              >
                <img src="../../../assets/owerlogo.png" alt="" />
                <div class="perName">{{ item.username }}</div>
              </div>
              <div
                style="
                  display: flex;
                  align-items: center;
                  margin-right: 10px;
                  flex-shrink: 0;
                "
              >
                <img
                  v-if="item.juri == 1"
                  style="width: 13px"
                  src="../../../assets/siyou1.svg"
                  alt=""
                />
                <img
                  v-if="item.juri == 2"
                  style="width: 13px"
                  src="../../../assets/siyou2.svg"
                  alt=""
                />
                <img
                  v-if="item.juri == 3"
                  style="width: 13px"
                  src="../../../assets/siyou3.svg"
                  alt=""
                />
                {{ getJuri(item.juri) }}
              </div>
              <div class="listTag">
                {{ item.subTagName }}
              </div>
            </div>
            <div>
              <el-popover
                placement="bottom-start"
                trigger="hover"
                popper-class="custom-popover"
                visible-arrow
                width="100px"
              >
                <div class="BtnHP">
                  <div class="BtnHPDel">
                    <!-- <el-button
                      @click="editFile(item.id, item.folderid)"
                      size="small"
                      type="text"
                      @mouseover="isHover = true"
                      @mouseleave="isHover = false"
                      > -->

                    <div
                      class="btnBh"
                      @click="editFile(item.id, item.folderid)"
                      @mouseover="isHover = true"
                      @mouseleave="isHover = false"
                    >
                      <img :src="isHover ? look2 : look1" />
                      <span :class="isHover ? 'lookHp2' : 'lookHp1'">{{
                        lang.view
                      }}</span>
                    </div>
                    <!-- </el-button
                    > -->
                    <!-- <el-button
                      @click="copyFolder(item)"
                      size="small"
                      type="text"
                      v-if="item.isMo == '2'"
                      > -->
                    <div
                      class="btnBh"
                      v-if="item.isMo == '2'"
                      @click="copyFolder(item)"
                      @mouseover="isHover2 = true"
                      @mouseleave="isHover2 = false"
                    >
                      <img :src="isHover2 ? copy1 : copy2" alt="" />
                      <span :class="isHover2 ? 'lookHp2' : 'lookHp1'">{{
                        lang.copy
                      }}</span>
                    </div>
                    <!-- </el-button > -->
                  </div>

                  <div
                    v-if="item.userid == userid && item.isMo == '2'"
                    style="
                      background-color: #e7e7e7;
                      width: 100%;
                      height: 0.5px;
                      margin: 5px 0;
                    "
                  ></div>

                  <div class="BtnHPDel1">
                    <!-- <el-button
                      @click="deleteFile(item.id, item.folderid)"
                      size="small"
                      type="text"
                      style="color: #DE4C41;"
                      v-if="item.userid == userid && item.isMo == '2'"
                      > -->
                    <div
                      class="btnBh2"
                      @click="deleteFile(item.id, item.folderid, 1)"
                      v-if="item.userid == userid && item.isMo == '2'"
                    >
                      <img src="../../../assets/listdel.svg" alt="" />
                      <span style="color: #de4c41">{{ lang.delete }}</span>
                    </div>
                    <!-- </el-button
                    > -->
                  </div>
                </div>
                <el-button
                  slot="reference"
                  class="BtnH"
                  style="border: none; padding: 5px"
                >
                  <i class="el-icon-more"></i>
                </el-button>
              </el-popover>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="list_file_box" v-loading.body="isLoading && showBool">
        <el-table
          ref="myTable"
          :data="fileArray"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
          max-height="800px"
          :row-key="(row) => row.id"
        >
          <el-table-column
            type="selection"
            width="50px"
            :reserve-selection="true"
            :selectable="isSelectable"
          ></el-table-column>
          <el-table-column
            prop="name"
            :label="lang.folderName"
            show-overflow-tooltip
            min-width="15"
          ></el-table-column>
          <el-table-column
            prop="detail"
            :label="lang.description"
            show-overflow-tooltip
            min-width="20"
          ></el-table-column>
          <el-table-column
            prop="fileCount"
            :label="lang.fileNumber"
            width="120px"
          ></el-table-column>
          <el-table-column
            prop="username"
            :label="lang.owner"
            show-overflow-tooltip
            width="120"
          ></el-table-column>
          <el-table-column
            :label="lang.tag"
            show-overflow-tooltip
            min-width="10"
          >
            <template slot-scope="scope">
              {{ getTag(scope.row) }}
            </template>
          </el-table-column>
          <el-table-column :label="lang.publicPermissions" width="120px">
            <template slot-scope="scope">
              {{ getJuri(scope.row.juri) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="time"
            :label="lang.editTime"
            min-width="15"
          ></el-table-column>
          <el-table-column align="center" width="100px">
            <template slot-scope="scope">
              <div>
                <el-popover
                  placement="bottom-start"
                  trigger="hover"
                  popper-class="custom-popover"
                  visible-arrow
                  width="100px"
                >
                  <div class="BtnHP">
                    <div class="BtnHPDel">
                      <div
                        class="btnBh"
                        @click="editFile(scope.row.id, scope.row.folderid)"
                        @mouseover="isHover = true"
                        @mouseleave="isHover = false"
                      >
                        <img :src="isHover ? look2 : look1" />
                        <span :class="isHover ? 'lookHp2' : 'lookHp1'">{{
                          lang.view
                        }}</span>
                      </div>
                      <!-- <el-button
                        @click="editFile(scope.row.id, scope.row.folderid)"
                        size="small"
                        type="text"
                        >查看</el-button
                      > -->

                      <div
                        class="btnBh"
                        v-if="scope.row.isMo == '2'"
                        @click="copyFolder(scope.row)"
                        @mouseover="isHover2 = true"
                        @mouseleave="isHover2 = false"
                      >
                        <img :src="isHover2 ? copy1 : copy2" alt="" />
                        <span :class="isHover2 ? 'lookHp2' : 'lookHp1'">{{
                          lang.copy
                        }}</span>
                      </div>
                      <!-- <el-button
                        @click="copyFolder(scope.row)"
                        size="small"
                        type="text"
                        v-if="scope.row.isMo == '2'"
                        >复制</el-button
                      > -->
                    </div>

                    <div
                      v-if="scope.row.userid == userid && scope.row.isMo == '2'"
                      style="
                        background-color: #e7e7e7;
                        width: 100%;
                        height: 0.5px;
                        margin: 5px 0;
                      "
                    ></div>

                    <div class="BtnHPDel1">
                      <div
                        class="btnBh2"
                        @click="deleteFile(scope.row.id, scope.row.folderid)"
                        v-if="
                          scope.row.userid == userid && scope.row.isMo == '2'
                        "
                      >
                        <img src="../../../assets/listdel.svg" alt="" />
                        <span style="color: #de4c41">{{ lang.delete }}</span>
                      </div>
                      <!-- <el-button
                        @click="deleteFile(scope.row.id, scope.row.folderid)"
                        size="small"
                        type="text"
                        style="color: #DE4C41;"
                        v-if="scope.row.userid == userid && scope.row.isMo == '2'"
                        >删除</el-button
                      > -->
                    </div>
                  </div>

                  <el-button
                    slot="reference"
                    class="BtnH"
                    style="border: none; background: none; padding: 5px"
                  >
                    <i class="el-icon-more"></i>
                  </el-button>
                </el-popover>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="paginationArea">
        <span>{{ lang.a_total_of_x_items.replace('${x}',total) }}</span>
        <el-pagination
          class="pageBox"
          style="margin-top: 10px"
          layout="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>
    </div>
    <el-dialog
      :title="lang.newFolder"
      :visible.sync="moveBox"
      width="550px"
      style="border-radius: 8px"
      @close="moveBox = false"
      class="canEditCss"
    >
      <div class="canEditTit" slot="title">
        <img src="../../../assets/listfolder2.svg" alt="" />
        <span>{{ lang.newFolder }}</span>
      </div>

      <div>
        <el-input
          v-model="folderName"
          :placeholder="lang.knowledgeName"
        ></el-input>
        <el-input
          v-model="folderDescription"
          type="textarea"
          rows="4"
          resize="none"
          :placeholder="lang.knowledgeDesc"
          style="margin-top: 10px"
        ></el-input>
      </div>
      <span slot="footer">
        <el-button @click="moveBox = false">{{ lang.cancel }}</el-button>
        <el-button type="primary" @click="createFolder(2)" v-loading="addLoading">{{
          lang.confirm
        }}</el-button>
      </span>
    </el-dialog>
  </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";

// 导入SVG组件
import look1 from "../../../assets/look1.svg";
import look2 from "../../../assets/look2.svg";
import copy2 from "../../../assets/copy2.svg";
import copy1 from "../../../assets/copy1.svg";

import JSZip from "jszip";
import FileSaver from "file-saver";

import _ from "lodash";

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,
    },
    showBool: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    pid: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.fileArray = [];
        this.checkArray = [];
        this.fileName = "";
        this.page = 1;
        this.getData();
        this.getTagArray(1);
        this.getTagArray(2);
        this.getTagArray(3);
      },
    },
  },
  data() {
    return {
      look1: look1,
      look2: look2,
      copy2: copy2,
      copy1: copy1,
      isHover: false,
      isHover2: false,
      delLoading: 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: "",
      folderName: "",
      folderDescription: "",
      page: 1,
      total: 0,
      limit: 20,
      tagLoading1: false,
      tagLoading2: false,
      tagLoading3: false,
      tagData1: [],
      tagData2: [],
      tagData3: [],
      check1: [],
      check2: [],
      check3: [],
      stype2: 1,
      userArray: [],
      user: "",
      addLoading: false,
    };
  },
  computed: {
    lisTnum() {
      if (this.fileArray.length >= 9 || this.fileArray.length > 2) {
        return 4;
      } else if (this.fileArray.length <= 2) {
        return 2;
      } else if (this.fileArray.length <= 1) {
        return 1;
      }
    },
    retrunType() {
      return function (item) {
        if (item.type == 1) {
          return this.lang.office;
        } else if (item.type == 2) {
          return this.lang.video;
        } else if (item.type == 3) {
          return this.lang.img;
        } else if (item.type == 4) {
          return this.lang.pdf;
        } else if (item.type == 5) {
          return this.lang.other;
        }
      };
    },
    getJuri() {
      return function (juri) {
        if (juri == 1) {
          return this.lang.private;
        } else if (juri == 2) {
          return this.lang.organization;
        } else if (juri == 3) {
          return this.lang.public;
        }
      };
    },
    getTag() {
      return function (row) {
        const tags = [row.classTagName, row.subTagName, row.tag]
          .filter((tag) => tag) // 过滤掉空值
          .flatMap((tag) => tag.split(",")); // 展开并分割
        return tags.length ? tags.join(",") : "-";
      };
    },
  },
  methods: {
    checkStype2(type) {
      if (this.stype2 != type) {
        this.checkArray = [];
        this.stype2 = type;
      }
    },
    getTagArray(type) {
      const tagLoadings = [
        this.tagLoading1,
        this.tagLoading2,
        this.tagLoading3,
      ];
      tagLoadings[type - 1] = true;

      let params = {
        type: type,
        uid: this.userid,
      };
      this.ajax
        .post(this.$store.state.api + "getKnowledgeTag", [params])
        .then((res) => {
          tagLoadings[type - 1] = false;
          let _data = res.data[0];
          _data.forEach((i) => {
            if (this.lang.lang == "en" && i.com) {
              i.name = i.com;
            } else if (this.lang.lang == "hk" && i.hk) {
              i.name = i.hk;
            }
          });
          this[`tagData${type}`] = _data;
          const checkKey = `check${type}`;
          // this[checkKey] = this[checkKey].filter(tag =>
          //   this[`tagData${type}`].some(item => item.id === tag)
          // );
        })
        .catch((err) => {
          tagLoadings[type - 1] = false;
          console.error(err);
        });
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    handleSizeChange(val) {
      this.page = 1;
      this.limit = val;
      this.getData();
    },
    getData() {
      let type = this.pid.split("/");
      let id = this.userid;
      this.isLoading = true;
      let params = {
        uid: id,
        n: this.fileName.trim(),
        sub: this.check1,
        class: this.check2,
        tag: type[0] == "0" ? this.check3 : this.user,
        page: this.page,
        num: this.limit,
      };
      if(!type[0] == "0"){
        params.juri2 = this.lang.lang == 'hk' ? 2 : this.lang.lang == 'en' ? 3 : 1;
      }
      this.ajax
        .post(
          this.$store.state.fileApi +
            (type[0] == "0" ? "getFolderPage3" : "getFolderPageOpen2"),
          [params]
        )
        .then((res) => {
          this.isLoading = false;
          this.total = res.data[0].length ? res.data[0][0].num : 0;
          let _fileArray = res.data[0];
          _fileArray.forEach((i) => {
            if (i.isMo == '1') {
              i.name = this.lang.defaultFolder;
              i.detail = this.lang.defaultFolderDesc;
            }
            if (this.lang.lang == "en" && i.subTagNameCom) {
              i.subTagName = i.subTagNameCom;
            } else if (this.lang.lang == "hk" && i.subTagNameHk) {
              i.subTagName = i.subTagNameHk;
            }
          });
          this.fileArray = _fileArray;
          if (type[0] == "0" && res.data[1].length == 0) {
            this.folderName = this.lang.defaultFolder;
            this.folderDescription = this.lang.defaultFolderDesc;
            this.createFolder(1);
          }
          if (res.data[2].length != 0) {
            this.userArray = res.data[2];
          }
          this.$parent.getData();
          this.$forceUpdate();
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    debouncedSearch() {
      clearTimeout(this.debounceTimeout);
      this.debounceTimeout = setTimeout(() => {
        this.serchFile();
      }, 300);
    },
    serchFile() {
      this.page = 1;
      this.getData();
    },
    handleSelectionChange(selectedRows) {
      this.checkArray = selectedRows.map((row) => row.id);
      this.checkArray2 = selectedRows.map((row) => ({
        id: row.id,
        folderid: row.folderid,
      }));
    },
    deleteFile(id, folderid, val) {
      this.$confirm(this.lang.confirmDelete, this.lang.prompt, {
        confirmButtonText: this.lang.confirm,
        cancelButtonText: this.lang.cancel,
        type: "warning",
      })
        .then(() => {
          this.delLoading = true;
          let params = [{ ids: id, folderids: folderid }];
          this.ajax
            .post(this.$store.state.fileApi + "deleteFolder", params)
            .then((res) => {
              this.delLoading = false;
              this.$message({
                message: this.lang.deleteSuccess,
                type: "success",
              });
              this.checkArray = [];
              this.checkArray2 = [];
              if (val != 1) {
                this.$refs.myTable.clearSelection();
              }
              this.getData();
            })
            .catch((err) => {
              this.delLoading = false;
              this.$message.error(this.lang.deleteFail);
              console.error(err);
            });
        })
        .catch(() => {});
    },
    copyFolder(data) {
      this.isLoading = true;
      let params = [
        {
          n: data.name,
          fd: data.detail,
          uid: this.userid,
          folderid: data.folderid,
        },
      ];
      this.ajax
        .post(this.$store.state.fileApi + "copyFolder", params)
        .then((res) => {
          this.isLoading = false;
          this.$message({
            message: this.lang.copySuccess,
            type: "success",
          });
          this.getData();
        })
        .catch((err) => {
          this.isLoading = false;
          this.$message.error(this.lang.copyFail);
          console.error(err);
        });
    },
    deleteFolder() {
      if (!this.checkArray.length) {
        this.$message.warning(this.lang.selectDeFolder);
        return;
      }
      let array = this.checkArray2.map((item) => item.id);
      let array2 = this.checkArray2.map((item) => item.folderid);
      this.deleteFile(array.join(","), array2.join(","));
    },
    checkMoveChild(item) {
      this.moveChild = item;
    },
    openAdd() {
      this.folderName = "";
      this.folderDescription = "";
      this.moveBox = true;
    },
    createFolder: _.debounce(function(im) {
      if (!this.folderName) {
        this.$message.error(this.lang.folderNameMust);
        return;
      }
      if (this.addLoading) {
        return;
      }
      this.addLoading = true;
      let params = [
        {
          n: this.folderName,
          fd: this.folderDescription,
          uid: this.userid,
          im: im ? im : 2,
        },
      ];
      this.ajax
        .post(this.$store.state.fileApi + "addFolder", params)
        .then((res) => {
          this.moveBox = false;
          this.addLoading = false;
          this.$message({
            message: this.lang.createSuccess,
            type: "success",
          });
          this.getData();
        })
        .catch((err) => {
          this.addLoading = false;
          this.$message.error(this.lang.createFail);
          console.error(err);
        });
    }, 500),
    editFile(id, folderid) {
      console.log(id);

      let array = [this.pid.split("/")[0], id];
      this.$emit("checkType", array.join("/"), folderid);
    },
    isSelectable(row) {
      return row.isMo == "2" && row.userid == this.userid;
    },
  },
  mounted() {
    // this.getData();
  },
};
</script>

<style scoped>
.listBlockS {
  display: grid;
  font-family: PingFang;
  gap: 20px;
  grid-template-columns: repeat(4, 1fr);
  -webkit-box-align: stretch;
  align-items: stretch;
}
.listBlock {
  flex: 1;
  min-width: 250px;
  user-select: none;
  height: 150px;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid #dfe2ea;
  /* margin-top: 1.25rem; */
  border-radius: 0.75rem;
  background-color: #fff;
  box-shadow: 0px 4px 4px 0px rgba(19, 51, 107, 0.05),
    0px 0px 1px 0px rgba(19, 51, 107, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 20px 12px;
}

.listBlock:hover {
  border-color: #94b5ff;
  box-shadow: 0px 1px 2px 0px rgba(19, 51, 107, 0.1),
    0px 0px 1px 0px rgba(19, 51, 107, 0.15);
}
.listBlockTit {
  display: flex;
  font-size: 16px;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}
.listBlockTitZ {
  min-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.owerCon {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #667085;
  width: 80%;
}

.owerCon img {
  width: 16px;
  margin-right: 5px;
}
.listDetail {
  /* height: 100%; */
  height: 45px;
  font-size: 12.8px;
  color: #667085;
  padding: 12px 0;
}
.listDetail2 {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.f_box {
  width: 100%;
  /* height: 100%; */
  height: calc(100% - 58px);
  margin-top: 16px;
  border-radius: 8px;
  padding-bottom: 0 !important;
  box-sizing: border-box;
  position: relative;
  overflow: auto;
}

.f_box_top {
  display: flex;
  align-items: center;
  padding: 0;
  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, 0.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 {
  height: 35px !important;
  font-size: 12.8px;
  background-color: #3370ff;
  border-radius: 6px;
  margin-left: 12px;
}
.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;
  display: flex;
  align-items: center;
}

.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 > .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: 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 0;
  padding-top: 0;
  margin-top: 10px;
  border-radius: 8px;
  box-sizing: border-box;
}

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

.canEditCss >>> .el-dialog__body {
  padding: 10px 20px;
}
.canEditCss >>> .el-dialog__header {
  background-color: rgb(251, 251, 252);
  border-radius: 8px 8px 0 0;
  font-family: Pingfang;
  border-bottom: 0.5px rgb(244, 246, 248) solid;
}
.canEditCss >>> .el-dialog {
  border-radius: 8px;
  width: 500px !important;
}

.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_box >>> .el-table {
  border-radius: 10px !important;
  overflow: hidden !important;
}

.list_file_box >>> table th {
  border: none !important;
  background-color: #f2f3f6 !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;
}
.BtnH >>> .el-button--small,
.el-button--small.is-round {
  border: none;
  padding: 0;
}

.BtnHP {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.BtnHP >>> .el-button:focus,
.BtnHP >>> .el-button:hover {
  background-color: #487fff;
}

.BtnHP >>> .el-popper .popper__arrow,
.el-popper .popper__arrow::after {
  display: none;
}
.BtnHP >>> .el-button--text {
  color: #667095;
}
.BtnHP img {
  width: 16px;
}

/* 删除 */
.BtnHPDel1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #de4c41 !important;
}
.BtnHPDel1 >>> .el-button:focus,
.BtnHPDel1 >>> .el-button:hover {
  background: #fbeae8;
  color: #de4c41 !important;
}
/* .BtnHPDel1{
  display: flex;
  flex-direction: column;
  justify-content: center;
} */

.BtnHPDel {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
}
.BtnHPDel >>> .el-button + .el-button {
  padding: 0;
}
.BtnHPDel >>> .el-button:focus,
.BtnHPDel >>> .el-button:hover {
  background: #e8ebf0 !important;
}
/* .BtnHPDel >>> .el-button:hover .lookHp{

} */
.lookHp2 {
  color: #6c6c6c;
}
.lookHp2 {
  color: #487fff;
}

.left {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.left > span {
  height: 25px;
  width: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  cursor: pointer;
}
.left > span + span {
  margin-left: 10px;
}
.left > span.active {
  background: #e0eafb;
}
.left > span::before {
  content: "";
  width: 12px;
  height: 12px;
  background-size: 100% 100%;
}
.left > span.list::before {
  background-image: url("../../../assets/test_list.png");
}
.left > span.table::before {
  background-image: url("../../../assets/test_table.png");
}

.left > span.table.active::before {
  background-image: url("../../../assets/test_table_active.png");
}
.left > span.list.active::before {
  background-image: url("../../../assets/test_list_active.png");
}
.pageBox {
  display: flex;
}
.pageBox >>> .el-pagination__total {
  margin-right: auto;
}

.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;
}
.listTag {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.f_box_file_list >>> .el-table-column--selection .cell {
  display: flex !important;
  align-items: center !important;
}
.perName {
  flex-shrink: 0;
  min-width: 30px;
  max-width: 47px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.btnBh2 {
  display: flex;
  /* align-items: center; */
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 6px;
  box-sizing: border-box;
}
.btnBh {
  display: flex;
  cursor: pointer;
  border-radius: 6px;
  padding: 5px 8px;
}
.canEditTit {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.canEditTit img {
  width: 25px;
  margin-right: 10px;
}

.paginationArea{
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.paginationArea>span{
  font-size: 13px;
  color: #606266;
}

</style>

<style>
.custom-popover {
  min-width: 70px !important;
  width: auto !important;
  padding: 8px 6px;
  border-radius: 8px;
}
/* .custom-popover2 {
  min-width: 18px !important;
  width: auto !important;
  padding: 8px;
  top: 414px !important;
  text-align: center;
} */


</style>