pbl-teacher-table/src/components/pages/library.vue

<template>
  <div class="l_box">
    <div class="l_type_box" v-loading="isLoading">
      <div class="header">
        <span class="title">我的资源库</span>
        <span class="add" @click="addClick" ref="divToHide3">添加分类</span>
      </div>
      <div class="nav">
        <div class="nav_b">
          <div class="nav_box" :class="{ active1: pid == 'wu' }" @click="checkType('wu')"><span
              class="icon no"></span><span class="name">未分类</span>
          </div>
        </div>
        <div class="nav_b" v-for="(item, index) in typeArray" :key="index">
          <div class="nav_box" :class="{ open: item.open, active2: pid.split('-')[0] == index }"
            @click="checkType(index + '')"><span class="icon" :class="{ haveL: item.child.length }"
              @click.stop="typeOpen(index)"></span>
            <input class="renameInput" v-model="renameInput" v-if="renameType == (index + '')" ref="renameInput"
              @change="rename" @keyup.enter="rename">
            <el-tooltip :content="item.name" placement="top" effect="dark" v-else>
              <span class="name">{{ item.name }}</span>
            </el-tooltip>
            <span ref="divToHide5" class="icon more" @click.stop="showActions($event, index + '')"></span>
          </div>
          <div class="nav_child_box" v-if="item.open && item.child.length">
            <div class="nav_box" :class="{ active: pid == index + '-' + index2 }" v-for="(item2, index2) in item.child"
              :key="index + '-' + index2" @click="checkType(index + '-' + index2)">
              <span class="icon"></span>
              <input class="renameInput" v-model="renameInput" v-if="renameType == (index + '-' + index2)"
                ref="renameInput" @change="rename" @keyup.enter="rename">
              <el-tooltip :content="item2.name" placement="top" effect="dark" v-else>
                <span class="name">{{ item2.name }}</span>
              </el-tooltip>
              <span ref="divToHide5" class="icon more" @click.stop="showActions($event, index + '-' + index2)"></span>
            </div>
          </div>
          <div class="add_box" v-if="addVisbile2 === index" ref="divToHide2">
            <input type="text" v-model="addInput" @change="addType" @keyup.enter="addType">
          </div>
        </div>
        <div class="add_box" v-if="addVisbile" ref="divToHide">
          <input type="text" v-model="addInput" @change="addType" @keyup.enter="addType">
        </div>
      </div>
      <div v-if="showActionDiv" ref="actionDiv" :style="actionDivStyle" class="action-div">
        <div @click="actionDelete">删除</div>
        <div @click="actionRename">重命名</div>
        <div class="move" v-if="pidArray.length">
          <span>移动</span>
          <div class="pid_box">
            <div v-for="(item, index) in pidArray" :key="index" @click="actionMove(item)">
              <!-- <el-tooltip :content="item.name" placement="right" effect="dark"> -->
                <span>{{ item.name }}</span>
              <!-- </el-tooltip> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="l_file_box">
      <div class="l_none" v-if="pid != 'wu' && pid.split('-').length == 1">请添加二级分类</div>
      <fileBox :userid="userid" :typeArray="typeArray" :pid="pid" :type='type' @addFile="addFile" ref="fileBox" v-else></fileBox>
    </div>
  </div>
</template>

<script>
import fileBox from './library/fileBox.vue';
export default {
  components: {
    fileBox,
  },
  props: {
    type: {
      type: String,
      default: '1'
    },
  },
  data() {
    return {
      userid: this.$route.query.userid,
      pid: 'wu',
      addInput: '',
      addVisbile: false,
      addVisbile2: '',
      isLoading: false,
      typeArray: [],
      showActionDiv: false,
      actionDivStyle: {
        top: '0px',
        left: '0px'
      },
      actionType: '',
      renameType: '',
      renameInput: '',
      pidArray: [],
    }
  },
  methods: {
    getData() {
      this.isLoading = true;
      let params = {
        uid: this.userid,
      };
      this.ajax
        .get(this.$store.state.api + "getSourceFileType", params)
        .then((res) => {
          this.isLoading = false;
          let pid = res.data[0];
          let child = res.data[1];
          for (var i = 0; i < pid.length; i++) {
            let pidChild = []
            pid[i].open = (this.typeArray.length && this.typeArray[i]) ? this.typeArray[i].open : false
            for (var j = 0; j < child.length; j++) {
              if (pid[i].id == child[j].pid) {
                pidChild.push(child[j])
              }
            }
            pid[i].child = pidChild
          }
          this.typeArray = pid
          this.$forceUpdate()

          let _pid = this.pid.split('-')
          if (_pid.length === 1 && this.pid != 'wu') {
            if(pid[_pid[0]]){
              pid[_pid[0]].open = true
              this.pid = this.pid + '-0'
            }else {
              this.pid = 'wu'
            };
            this.checkType(this.pid);
          }else if(_pid.length > 1){
            if (this.typeArray[_pid[0]].child.length > 0 && (parseInt(_pid[1])+1) > this.typeArray[_pid[0]].child.length) {
              this.pid = _pid[0] + '-0';
              this.checkType(this.pid);
            }else if((parseInt(_pid[1])+1) > this.typeArray[_pid[0]].child.length){
              this.checkType(_pid[0]);
            }
          }
          this.$refs['fileBox'].getData()
          console.log(this.$refs['fileBox']);
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    addClick() {
      if (this.pid == 'wu') {
        this.addVisbile = true;
        this.addInput = '一级分类标签'
        setTimeout(() => {
          this.$refs.divToHide.children[0].select()
        }, 500);
      } else {
        let check = this.pid.split('-')
        this.addVisbile2 = parseInt(check[0]);
        this.addInput = '二级分类标签'
        setTimeout(() => {
          this.$refs.divToHide2[0].children[0].select()
        }, 500);
      }

    },
    addType() {
      let pid = ''
      if (!this.addInput) {
        this.$message.error('请输入分类名字');
        return
      }
      if (this.addVisbile) {
        pid = '0'
      } else if (this.addVisbile2 === 0 || this.addVisbile2) {
        let check = this.pid.split('-')
        pid = this.typeArray[check[0]].id
      }
      let params = [{
        pid: pid,
        name: encodeURIComponent(this.addInput),
        uid: this.userid
      }];
      this.ajax
        .post(this.$store.state.api + "addSourceFileType", params)
        .then((res) => {
          this.$message.success('添加成功');
          this.addVisbile = false
          this.addVisbile2 = ''
          this.getData()
        })
        .catch((err) => {
          console.error(err);
        });
    },
    typeOpen(index) {
      if (this.typeArray[index].child.length > 0) {
        this.typeArray[index].open = !this.typeArray[index].open
      }
    },
    checkType(pid) {
      if (this.pid == pid) {
        return
      }
      let _pid = pid.split('-')
      if (_pid.length === 1 && pid != 'wu') {
        if (this.typeArray[_pid[0]].child.length > 0) {
          this.pid = pid + '-0';
          this.typeArray[_pid[0]].open = true;
        } else {
          this.pid = pid;
        }
      } else {
        this.pid = pid;
      }
    },
    handleClickOutside(event) {
      const target = event.target;
      const divToHide = this.$refs.divToHide; // 获取需要隐藏的 div 的引用
      const divToHide2 = this.$refs.divToHide2; // 获取需要隐藏的 div 的引用
      const divToHide3 = this.$refs.divToHide3; // 获取需要隐藏的 div 的引用
      const divToHide4 = this.$refs.actionDiv; // 获取需要隐藏的 div 的引用
      const divToHide5 = this.$refs.divToHide5; // 获取需要隐藏的 div 的引用
      const renameInput = this.$refs.renameInput; // 获取需要隐藏的 div 的引用
      console.log('1')
      if (divToHide && !divToHide.contains(target) && divToHide3 && !divToHide3.contains(target)) {
        // 点击的不是需要隐藏的 div，则隐藏它
        this.addVisbile = false
      }
      if (divToHide2 && divToHide2[0] && !divToHide2[0].contains(target) && divToHide3 && !divToHide3.contains(target)) {
        // 点击的不是需要隐藏的 div，则隐藏它
        this.addVisbile2 = ''
      }

      if (divToHide4 && !divToHide4.contains(target) && divToHide5 && !divToHide5[0].contains(target)) {
        // 点击的不是需要隐藏的 div，则隐藏它
        this.showActionDiv = false;
      }

      if (renameInput && renameInput[0] && !renameInput[0].contains(target) && (!divToHide4 || (divToHide4 && !divToHide4.contains(target)))) {
        // 点击的不是需要隐藏的 div，则隐藏它
        this.renameType = ''
      }
    },
    showActions(event, type) {
      this.showActionDiv = true;
      const buttonRect = event.target.getBoundingClientRect();
      this.actionDivStyle.top = `${buttonRect.bottom - 30}px`;
      this.actionDivStyle.left = `${buttonRect.left + 25}px`;
      this.pidArray = []
      let _type = type.split('-')
      if (_type.length > 1) {
        let pid = this.typeArray[_type[0]].child[_type[1]].pid
        this.typeArray.forEach(item => {
          item.id != pid && this.pidArray.push(item)
        })
      }
      this.actionType = type;
      this.$forceUpdate();
    },
    actionMove(pid) {
      let type = this.actionType.split('-')
      let id = this.typeArray[type[0]].child[type[1]].id
      this
        .$confirm('确定移动到'+pid.name+'吗？并且此分类的底下的文件也会跟随！', "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          let params = [{
            id: id,
            pid: pid.id
          }];
          this.ajax
            .post(this.$store.state.api + "updateSourceFileTypePid", params)
            .then((res) => {
              this.$message.success('移动成功');
              this.showActionDiv = false
              this.getData()
            })
            .catch((err) => {
              console.error(err);
            });
        })
        .catch(() => {
        });
    },
    actionRename() {
      let type = this.actionType.split('-')
      if (type.length == 1) {
        this.renameInput = this.typeArray[type[0]].name
      } else {
        this.renameInput = this.typeArray[type[0]].child[type[1]].name
      }
      this.renameType = this.actionType
      if (this.pid != this.renameType) {
        this.checkType(this.renameType)
      }
      console.log(this.renameType);
      setTimeout(() => {
        this.$refs.renameInput[0].select();
        this.showActionDiv = false
      }, 500);
    },
    rename() {
      if (!this.renameInput) {
        this.$message.error('请输入分类名字');
        return
      }
      let type = this.renameType.split('-')
      let id = ''
      if (type.length == 1) {
        id = this.typeArray[type[0]].id
      } else {
        id = this.typeArray[type[0]].child[type[1]].id
      }
      let params = [{
        id: id,
        name: encodeURIComponent(this.renameInput)
      }];
      this.ajax
        .post(this.$store.state.api + "updateSourceFileName", params)
        .then((res) => {
          this.$message.success('修改成功');
          this.renameType = ''
          this.getData()
        })
        .catch((err) => {
          console.error(err);
        });
    },
    actionDelete() {
      let type = this.actionType.split('-')
      let id = ''
      let msg = ''
      if (type.length == 1) {
        if (this.typeArray[type[0]].child.length) {
          msg = '删除此分类后，该分类下的所有子分类将全部删除，确定删除此分类吗？'
        } else {
          msg = '确定删除此分类吗？'
        }
        id = this.typeArray[type[0]].id
      } else {
        msg = '确定删除此分类吗？'
        id = this.typeArray[type[0]].child[type[1]].id
      }
      this
        .$confirm(msg, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          let params = [{
            id: id,
          }];
          this.ajax
            .post(this.$store.state.api + "deleteSoureFileType", params)
            .then((res) => {
              this.$message.success('删除成功');
              this.showActionDiv = false
              this.getData()
            })
            .catch((err) => {
              console.error(err);
            });
        })
        .catch(() => {
        });
    },
    addFile(file){
      this.$emit('addFile', file)
    }
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleClickOutside);
  },
  mounted() {
    document.addEventListener('click', this.handleClickOutside);
    this.getData();
  },
}
</script>

<style scoped>
.l_box {
  width: 100%;
  height: 100%;
  background: #f0f2f5;
  box-sizing: border-box;
  display: flex;
  padding: 20px;
}

.l_type_box {
  width: 300px;
  height: 100%;
  background: #fff;
  border-radius: 5px;
}

.l_type_box>.header {
  width: 100%;
  padding: 15px 15px;
  box-sizing: border-box;
  border-bottom: 1px solid #E7E7E7;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.l_type_box>.header>.title {
  font-size: 24px;
  font-weight: bold;
}

.l_type_box>.header>.add {
  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;
}

.l_type_box>.header>.add::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  margin-right: 7px;
  background-image: url('../../assets/icon/sourceFile/icon_add.png');
  background-size: 100% 100%;
}

.l_type_box>.nav {
  width: 100%;
  height: calc(100% - 62px);
  box-sizing: border-box;
  padding: 15px;
  overflow: auto;
}

.l_type_box>.nav>.nav_b {
  margin-top: 10px;
}

.l_type_box>.nav>.nav_b>.nav_box {
  height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 5px;
  padding: 0 10px;
  box-sizing: border-box;
  cursor: pointer;
}

.l_type_box>.nav>.nav_b>.nav_box>.name {
  font-size: 16px;
  color: #000000e6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.l_type_box .active2 {
  background: #fff;
}

.l_type_box .active2 .name {
  color: #3681FC !important;
}

.l_type_box .active {
  background: #3681fc;
}

.l_type_box .active1 {
  background: #3681fc !important;
}

.l_type_box .active .name,
.l_type_box .active1 .name {
  color: #fff !important;
}


.l_type_box>.nav>.nav_b>.nav_box:hover {
  background: #e0eafb;
}

.l_type_box>.nav>.nav_b>.nav_box:hover .more {
  display: block;
}

.l_type_box>.nav>.nav_b>.nav_box>.icon {
  min-width: 16px;
  height: 16px;
  background-size: 100% 100%;
  margin-right: 10px;
  /* background: #000; */
  transition: all 0.3s;
}

.l_type_box>.nav>.nav_b>.nav_box>.no {
  background-image: url('../../assets/icon/sourceFile/icon_no.png');
}


.l_type_box>.nav>.nav_b>.nav_box.active1>.no {
  background-image: url('../../assets/icon/sourceFile/icon_no_active.png');
}

.l_type_box>.nav>.nav_b>.nav_box>.more {
  cursor: pointer;
  margin: 0 0 0 auto;
  display: none;
  background-image: url('../../assets/icon/sourceFile/icon_select.png');
}

.l_type_box>.nav>.nav_b>.nav_box>.haveL {
  transform: rotate(-90deg);
  background-image: url('../../assets/icon/sourceFile/icon_arrow.png');
}

.l_type_box>.nav>.nav_b>.nav_box.active2>.haveL {
  transform: rotate(-90deg);
  background-image: url('../../assets/icon/sourceFile/icon_arrow_active.png');
}


.l_type_box>.nav>.nav_b>.nav_box.open>.haveL {
  transform: rotate(0deg);
}

.l_type_box>.nav>.nav_b>.nav_child_box {
  margin-top: 10px;
}

.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box+.nav_box {
  margin-top: 10px;
}

.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box {
  height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 5px;
  padding: 0 10px;
  box-sizing: border-box;
  cursor: pointer;
}


.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box>.name {
  font-size: 16px;
  color: #000000e6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box:hover {
  background: #e0eafb;
}

.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box.active:hover {
  background: #5E9AFC;
}


.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box:hover .more {
  display: block;
}

.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box>.icon {
  min-width: 16px;
  height: 16px;
  background-size: 100% 100%;
  margin-right: 10px;
  transition: all 0.3s;
}

.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box>.more {
  margin: 0 0 0 auto;
  display: none;
  background-image: url('../../assets/icon/sourceFile/icon_select.png');
}

.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box.active>.more {
  background-image: url('../../assets/icon/sourceFile/icon_select_active.png');
}



.add_box {
  height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 5px;
  padding: 0 3px 0 10px;
  box-sizing: border-box;
  cursor: pointer;
  background: #E1EDFD;
  margin-top: 10px;
}

.add_box>input {
  width: calc(100% - 16px);
  height: calc(100% - 6px);
  box-sizing: border-box;
  border: none;
  margin-left: 16px;
  border-radius: 5px;
  padding: 0 12px;
  font-size: 16px;
  outline: none;
}

.renameInput {
  width: calc(100% - 16px);
  height: calc(100% - 6px);
  box-sizing: border-box;
  border: none;
  border-radius: 5px;
  padding: 0 12px;
  font-size: 16px;
  outline: none;
}

.action-div {
  position: absolute;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  /* overflow: hidden; */
  padding: 5px 0;
  box-shadow: 0 0 2px 0px #00000021;
}

.action-div>div {
  width: 115px;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 14px;
  position: relative;
  z-index: 999;
}

.action-div>div:hover {
  background: #e0eafb;
}

.action-div>.move::after {
  content: '';
  position: absolute;
  display: block;
  width: 14px;
  height: 14px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  background-image: url('../../assets/icon/sourceFile/icon_arrow.png');
}

.action-div>.move:hover .pid_box {
  display: flex;
}

.pid_box {
  position: absolute;
  right: 0;
  transform: translateX(100%);
  background: #ffffff;
  flex-direction: column;
  border-radius: 5px;
  /* overflow: hidden; */
  padding: 5px 0;
  box-shadow: 0 0 2px 0px #00000021;
  top: 0;
  display: none;
}

.pid_box>div {
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pid_box>div:hover {
  background: #e0eafb;
}


.l_file_box {
  width: calc(100% - 320px);
  margin-left: 20px;
  background: #fff;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
}

.l_none{
  color: #00000069;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>