update

index.html

@@ -8,6 +8,12 @@
   <link rel="shortcut icon" type="image/x-icon" href="static/logo.ico">
   <style>
     @charset "utf-8";
+    @font-face {
+        font-family: 'Source Han Sans SC';
+        src: url('./static/SourceHanSans-Regular.otf') format('truetype');
+        font-weight: normal;
+        font-style: normal;
+      }
 
     div::-webkit-scrollbar {
       /*滚动条整体样式*/
@@ -34,6 +40,7 @@
       height: 100%;
       width: 100%;
       background: #e6eaf0;
+      font-family: 'Source Han Sans SC', sans-serif;
     }
   </style>
 </head>

package-lock.json

@@ -18544,8 +18544,8 @@
     },
     "node_modules/xlsx": {
       "version": "0.16.9",
-      "resolved": "https://registry.npm.taobao.org/xlsx/download/xlsx-0.16.9.tgz",
-      "integrity": "sha1-2s1btGvabdN0OUDJw9weIXGCYlY=",
+      "resolved": "https://registry.npmmirror.com/xlsx/-/xlsx-0.16.9.tgz",
+      "integrity": "sha512-gxi1I3EasYvgCX1vN9pGyq920Ron4NO8PNfhuoA3Hpq6Y8f0ECXiy4OLrK4QZBnj1jx3QD+8Fq5YZ/3mPZ5iXw==",
       "dependencies": {
         "adler-32": "~1.2.0",
         "cfb": "^1.1.4",
@@ -34181,8 +34181,8 @@
     },
     "xlsx": {
       "version": "0.16.9",
-      "resolved": "https://registry.npm.taobao.org/xlsx/download/xlsx-0.16.9.tgz",
-      "integrity": "sha1-2s1btGvabdN0OUDJw9weIXGCYlY=",
+      "resolved": "https://registry.npmmirror.com/xlsx/-/xlsx-0.16.9.tgz",
+      "integrity": "sha512-gxi1I3EasYvgCX1vN9pGyq920Ron4NO8PNfhuoA3Hpq6Y8f0ECXiy4OLrK4QZBnj1jx3QD+8Fq5YZ/3mPZ5iXw==",
       "requires": {
         "adler-32": "~1.2.0",
         "cfb": "^1.1.4",

src/App.vue

@@ -236,10 +236,10 @@ export default {
   margin: 0;
   padding: 0;
 }
-body {
+/* body {
   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
     "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-}
+} */
 #app {
   height: 100%;
   width: 100%;

src/components/pages/library.vue

@@ -1,572 +1,705 @@
 <template>
-  <div class="pb_content" style="overflow: auto">
-    <div class="pb_head top">
-      <span>素材库</span>
-      <div v-if="choose == 0" @click="addImg($event)">
-        <input type="file" accept="image/*" capture="camera" style="display: none" @change="beforeUpload1($event, 1)" />
-        <div class="uploadThing">上传图片</div>
+  <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 v-if="choose == 1" @click="addImg($event)">
-        <input type="file" accept="video/mp4,video/quicktime,video/x-msvideo" capture="camera" style="display: none"
-          @change="beforeUpload2($event, 2)" />
-        <div class="uploadThing">上传视频</div>
-      </div>
-      <div v-if="choose == 2" @click="addImg($event)">
-        <input type="file"
-          accept="application/pdf,.ppt,.pptx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-          style="display: none" @change="beforeUpload2($event, 3)" />
-        <div class="uploadThing">上传附件</div>
-      </div>
-    </div>
-    <div class="pb_content_body" style="height: 70%">
-      <div class="student_head">
-        <div class="three">
-          <div :class="choose == 0 ? 'choose' : ''" @click="sMtl(0)">图片</div>
-          <div :class="choose == 1 ? 'choose' : ''" @click="sMtl(1)">视频</div>
-          <div :class="choose == 2 ? 'choose' : ''" @click="sMtl(2)">附件</div>
-        </div>
-      </div>
-      <div class="student_table" v-loading="isLoading">
-        <div v-if="this.choose == 0" class="boxCss">
-          <div class="out_box" v-for="(item, index) in chapInfo" :key="index">
-            <div class="tup">
-              <img :src="item.chapdataInfo ? JSON.parse(item.chapdataInfo).url : mtp
-                " alt="" @click="
-    handlePictureCardPreview(JSON.parse(item.chapdataInfo).url)
-    " />
-              <div class="deleteWord" @click="deleteM(item.id)">
-                <img src="../../assets/icon/delete.png" alt="" />
-              </div>
-            </div>
-            <div class="bottom_box">
-              <el-tooltip :content="item.chapdataInfo
-                ? JSON.parse(item.chapdataInfo).name
-                : '暂无名称'" placement="top" effect="dark">
-                <div>
-                  {{
-                    item.chapdataInfo
-                    ? JSON.parse(item.chapdataInfo).name
-                    : "暂无名称"
-                  }}
-                </div>
-              </el-tooltip>
-            </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 v-if="this.choose == 1" class="boxCss">
-          <div class="out_box" v-for="(item, index) in chapInfo" :key="index">
-            <div class="tup">
-              <img :src="msp" alt="" @click="
-                handlePictureCardPreview1(JSON.parse(item.chapdataInfo).url)
-                " />
-              <div class="deleteWord" @click="deleteM(item.id)">
-                <img src="../../assets/icon/delete.png" alt="" />
-              </div>
-            </div>
-            <div class="bottom_box">
-              <el-tooltip :content="item.chapdataInfo
-                ? JSON.parse(item.chapdataInfo).name
-                : '暂无名称'" placement="top" effect="dark">
-                <div>
-                  {{
-                    item.chapdataInfo
-                    ? JSON.parse(item.chapdataInfo).name
-                    : "暂无名称"
-                  }}
-                </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 v-if="this.choose == 2" class="boxCss">
-          <div class="out_box" v-for="(item, index) in chapInfo" :key="index">
-            <div class="tup">
-              <img :src="mfj" alt="" @click="downFile(JSON.parse(item.chapdataInfo).url)" />
-              <div class="deleteWord" @click="deleteM(item.id)">
-                <img src="../../assets/icon/delete.png" alt="" />
-              </div>
-            </div>
-            <div class="bottom_box">
-              <el-tooltip :content="item.chapdataInfo
-                ? JSON.parse(item.chapdataInfo).name
-                : '暂无名称'" placement="top" effect="dark">
-                <div>
-                  {{
-                    item.chapdataInfo
-                    ? JSON.parse(item.chapdataInfo).name
-                    : "暂无名称"
-                  }}
-                </div>
-              </el-tooltip>
+        <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 class="student_page">
-        <el-pagination background layout="prev, pager, next" :page-size="10" :total="total" v-if="page && chapInfo.length"
-          @current-change="handleCurrentChange">
-        </el-pagination>
-      </div>
     </div>
-    <el-dialog :visible.sync="pictureDialog" size="tiny">
-      <img width="100%" :src="dialogImageUrl" alt="" />
-    </el-dialog>
-    <el-dialog :visible.sync="vedioDialog" size="tiny">
-      <video-player v-if="vedioDialog" class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true"
-        :options="playerO" @play="onPlayerPlay($event)" style="width: 100%; height: 100%"></video-player>
-    </el-dialog>
-    <div v-if="proVisible" class="mask">
-      <div class="progressBox">
-        <div class="lbox">
-          <img :src="require('../../assets/loading.gif')" />上传中，请稍后
-        </div>
-        <el-progress :text-inside="true" :stroke-width="20" :percentage="progress" style="width: 80%"></el-progress>
-      </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" v-else></fileBox>
     </div>
   </div>
 </template>
 
 <script>
+import fileBox from './library/fileBox.vue';
 export default {
+  components: {
+    fileBox,
+  },
   data() {
     return {
-      choose: 0,
-      chapInfo: [],
-      cImgInfo: [],
-      isLoading: false,
-      noneBtnImg: false,
-      mtp: require("../../assets/tup1.png"),
-      msp: require("../../assets/icon/fileIcon/isVideo.png"),
-      mfj: require("../../assets/icon/fileIcon/word2.png"),
-      page: 1,
-      total: 0,
-      dialogImageUrl: "",
       userid: this.$route.query.userid,
-      pictureDialog: false,
-      vedioDialog: false,
-      playerOptions: {
-        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
-        autoplay: false, //如果true,浏览器准备好时开始回放。
-        muted: false, // 默认情况下将会消除任何音频。
-        loop: false, // 导致视频一结束就重新开始。
-        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
-        language: "zh-CN",
-        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
-        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
-        sources: [
-          {
-            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
-            src: "", //url地址require("../../assets/media/aaa.mp4")
-          },
-        ],
-        // poster: require("../../assets/tu31.png"), //你的封面地址
-        // poster: dataRes.imgUrl, //你的封面地址
-        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
-        controlBar: {
-          timeDivider: true, //当前时间和持续时间的分隔符
-          durationDisplay: true, //显示持续时间
-          remainingTimeDisplay: false, //是否显示剩余时间功能
-          fullscreenToggle: true, //全屏按钮
-        },
+      pid: 'wu',
+      addInput: '',
+      addVisbile: false,
+      addVisbile2: '',
+      isLoading: false,
+      typeArray: [],
+      showActionDiv: false,
+      actionDivStyle: {
+        top: '0px',
+        left: '0px'
       },
-      playerO: {},
-      proVisible: false,
-      progress: 0,
-    };
+      actionType: '',
+      renameType: '',
+      renameInput: '',
+      pidArray: [],
+    }
   },
   methods: {
-    handleCurrentChange(val) {
-      this.page = val;
-      this.selectMtl();
-    },
-    addImg(e) {
-      var el = e.currentTarget;
-      el.getElementsByTagName("input")[0].click();
-      el.target.value = ''
-      
+    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++) {
+            pid[i].child = []
+            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) {
+                pid[i].child.push(child[j])
+              }
+            }
+          }
+
+          let _pid = this.pid.split('-')
+          if (_pid.length === 1 && this.pid != 'wu') {
+            pid[_pid[0]].open = true;
+            this.$forceUpdate()
+            this.checkType(this.pid + '-0');
+          }
+          this.typeArray = pid
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          console.error(err);
+        });
     },
-    imgChange(file, fileList, type) {
-      var _tmp = this.chapInfo;
-      this.noneBtnImg = _tmp.length >= 1;
+    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);
+      }
+
     },
-    downFile(url) {
-      window.open( "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/"+encodeURIComponent(url.split(
-          "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/"
-        )[1]));
+    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);
+        });
     },
-    beforeUpload1(event, type) {
-      var file = event.target.files[0];
-      var credentials = {
-        accessKeyId: "AKIATLPEDU37QV5CHLMH",
-        secretAccessKey: "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",
-      }; //秘钥形式的登录上传
-      window.AWS.config.update(credentials);
-      window.AWS.config.region = "cn-northwest-1"; //设置区域
-
-      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
-      var _this = this;
-      if (file) {
-        _this.progress = 0;
-        _this.proVisible = true;
-        var params = {
-          Key:
-            file.name.split(".")[0] +
-            new Date().getTime() +
-            "." +
-            file.name.split(".")[file.name.split(".").length - 1],
-          ContentType: file.type,
-          Body: file,
-          "Access-Control-Allow-Credentials": "*",
-          ACL: "public-read",
-        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
-        var options = {
-          partSize: 2048 * 1024 * 1024,
-          queueSize: 2,
-          leavePartsOnError: true,
-        };
-        bucket
-          .upload(params, options)
-          .on("httpUploadProgress", function (evt) {
-            //这里可以写进度条
-            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
-            _this.progress = parseInt((evt.loaded * 80) / evt.total);
-          })
-          .send(function (err, data) {
-            _this.progress = 100;
-            setTimeout(() => {
-              _this.proVisible = false;
-            }, 1000);
-            if (err) {
-              var a = _this.$refs.upload1.uploadFiles;
-              a.splice(a.length - 1, a.length);
-              _this.$message.error("上传失败");
-            } else {
-              _this.cImgInfo.push({
-                name: file.name,
-                url: data.Location,
-              });
-              _this.addMtl();
-              _this.cImgInfo = [];
-              _this.imgChange(null, null, type);
-              console.log(data.Location);
-            }
-          });
+    typeOpen(index) {
+      if (this.typeArray[index].child.length > 0) {
+        this.typeArray[index].open = !this.typeArray[index].open
       }
     },
-    handlePictureCardPreview(url) {
-      this.dialogImageUrl = url;
-      this.pictureDialog = true;
+    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;
+      }
     },
-    handlePictureCardPreview1(url) {
-      this.playerO = {};
-      this.playerOptions.poster = "";
-      this.playerOptions.sources[0].src = url;
-      this.playerO = this.playerOptions;
-      // this.dialogImageUrl = url;
-      this.vedioDialog = true;
+    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 = ''
+      }
     },
-    beforeUpload2(event, type) {
-      var file = event.target.files[0];
-      var credentials = {
-        accessKeyId: "AKIATLPEDU37QV5CHLMH",
-        secretAccessKey: "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",
-      }; //秘钥形式的登录上传
-      window.AWS.config.update(credentials);
-      window.AWS.config.region = "cn-northwest-1"; //设置区域
-
-      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
-      var _this = this;
-      if (file) {
-        _this.progress = 0;
-      _this.proVisible = true;
-        var params = {
-          Key:
-            file.name.split(".")[0] +
-            new Date().getTime() +
-            "." +
-            file.name.split(".")[file.name.split(".").length - 1],
-          ContentType: file.type,
-          Body: file,
-          "Access-Control-Allow-Credentials": "*",
-          ACL: "public-read",
-        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
-        var options = {
-          partSize: 2048 * 1024 * 1024,
-          queueSize: 2,
-          leavePartsOnError: true,
-        };
-        bucket
-          .upload(params, options)
-          .on("httpUploadProgress", function (evt) {
-            //这里可以写进度条
-            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
-            _this.progress = parseInt((evt.loaded * 80) / evt.total);
-          })
-          .send(function (err, data) {
-            _this.progress = 100;
-            setTimeout(() => {
-              _this.proVisible = false;
-            }, 1000);
-            if (err) {
-              var a = _this.$refs.upload1.uploadFiles;
-              a.splice(a.length - 1, a.length);
-              _this.$message.error("上传失败");
-            } else {
-              if (type == 2) {
-                _this.cImgInfo.push({
-                  name: file.name,
-                  url: data.Location,
-                });
-                _this.addMtl();
-                _this.cImgInfo = [];
-                _this.imgChange(null, null, type);
-              } else if (type == 3) {
-                _this.cImgInfo.push({
-                  name: file.name,
-                  url: data.Location,
-                });
-                _this.addMtl();
-                _this.cImgInfo = [];
-                _this.imgChange(null, null, type);
-              }
-              console.log(data.Location);
-            }
-          });
+    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();
     },
-    addMtl() {
-      let params = {
-        cInfo: this.cImgInfo[0],
-        t: this.choose,
-        cBy: this.userid,
-      };
-      this.ajax
-        .get(this.$store.state.api + "addMtl", params)
-        .then((res) => {
-          this.$message.success("上传素材成功");
-          this.selectMtl();
+    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",
         })
-        .catch((err) => {
-          console.error(err);
+        .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(() => {
         });
     },
-    sMtl(type) {
-      this.choose = type;
-      this.selectMtl();
+    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);
     },
-    selectMtl() {
-      this.isLoading = true;
-      let params = {
-        t: parseInt(this.choose),
-        uid: this.userid,
-        page: this.page,
-      };
+    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
-        .get(this.$store.state.api + "selectMtl2", params)
+        .post(this.$store.state.api + "updateSourceFileName", params)
         .then((res) => {
-          this.isLoading = false;
-          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
-          this.chapInfo = res.data[0];
+          this.$message.success('修改成功');
+          this.renameType = ''
+          this.getData()
         })
         .catch((err) => {
-          this.isLoading = false;
           console.error(err);
         });
     },
-    deleteM(id) {
+    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("确定删除吗", "提示", {
+        .$confirm(msg, "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning",
         })
         .then(() => {
-          let params = {
+          let params = [{
             id: id,
-          };
+          }];
           this.ajax
-            .get(this.$store.state.api + "deleteM", params)
+            .post(this.$store.state.api + "deleteSoureFileType", params)
             .then((res) => {
-              this.$message.success("删除成功");
-              this.selectMtl();
+              this.$message.success('删除成功');
+              this.showActionDiv = false
+              this.getData()
             })
             .catch((err) => {
-              this.isLoading = false;
               console.error(err);
             });
         })
         .catch(() => {
-
         });
-
-    },
-    onPlayerPlay() { },
+    }
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.handleClickOutside);
   },
-  created() {
-    this.selectMtl();
+  mounted() {
+    document.addEventListener('click', this.handleClickOutside);
+    this.getData();
   },
-};
+}
 </script>
 
 <style scoped>
-/* .student_button {
-																														display: flex;
-																														overflow: hidden;
-																														height: 40px;
-																													} */
-.student_head>>>.el-button--primary {
-  background-color: #2268bc;
+.l_box {
+  width: 100%;
+  height: 100%;
+  background: #f0f2f5;
+  box-sizing: border-box;
+  display: flex;
+  padding: 20px;
 }
 
-.student_head {
-  display: flex;
-  justify-content: space-between;
+.l_type_box {
+  width: 300px;
+  height: 100%;
+  background: #fff;
+  border-radius: 5px;
 }
 
-.three {
+.l_type_box>.header {
+  width: 100%;
+  padding: 15px 15px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #E7E7E7;
   display: flex;
-  flex-direction: row;
   justify-content: space-between;
-  width: 200px;
-  height: 30px;
+  align-items: center;
 }
 
-.three>div {
+.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;
 }
 
-.choose {
-  border-bottom: 5px solid #3994fd;
+.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%;
 }
 
-.student_table {
+.l_type_box>.nav {
   width: 100%;
-  height: 100%;
-  background: #f2f2f2;
+  height: calc(100% - 62px);
+  box-sizing: border-box;
+  padding: 15px;
+  overflow: auto;
+}
+
+.l_type_box>.nav>.nav_b {
   margin-top: 10px;
 }
 
-.tup {
-  width: calc(100% - 20px);
-  height: 120px;
-  margin: 0 auto;
-  position: relative;
+.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;
 }
 
-.out_box:hover .deleteWord {
+.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;
 }
 
-.deleteWord {
-  width: 25px;
-  height: 25px;
-  position: absolute;
-  right: -25px;
-  top: -10px;
+.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.active>.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');
 }
 
-.tup>img,
-.deleteWord>img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+.l_type_box>.nav>.nav_b>.nav_box>.haveL {
+  transform: rotate(-90deg);
+  background-image: url('../../assets/icon/sourceFile/icon_arrow.png');
 }
 
-.out_box {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  width: 235px;
-  padding: 10px 0;
-  background: #fff;
-  margin: 0 20px 20px 0;
-  height: fit-content;
+.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;
 }
 
-.bottom_box {
+.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;
-  text-align: center;
-  margin: 0 auto;
-  padding: 10px 0 5px 0;
+  align-items: center;
+  border-radius: 5px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  cursor: pointer;
 }
 
-.bottom_box>div:nth-child(1) {
+
+.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box>.name {
+  font-size: 16px;
+  color: #000000e6;
   white-space: nowrap;
-  text-overflow: ellipsis;
   overflow: hidden;
-  word-break: break-all;
-  width: 200px;
+  text-overflow: ellipsis;
 }
 
-.uploadThing {
-  background: #2268bc;
-  width: 90px;
-  height: 35px;
-  color: #fff;
-  font-size: 12px;
-  text-align: center;
-  line-height: 35px;
-  cursor: pointer;
-  border-radius: 4px;
+.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box:hover {
+  background: #e0eafb;
 }
 
-.top {
-  display: flex;
-  justify-content: space-between;
+.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box.active:hover {
+  background: #5E9AFC;
 }
 
-.student_page {
-  margin-top: 30px;
+
+.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box:hover .more {
+  display: block;
 }
 
-.boxCss {
-  padding: 15px 5px;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  min-height: 250px;
+.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;
 }
 
-.mask {
-  background-color: rgba(0, 0, 0, 0);
-  position: fixed;
-  top: 0;
-  left: 0;
+.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%;
-  height: 100%;
-  z-index: 20000;
   display: flex;
   align-items: center;
-  justify-content: center;
+  border-radius: 5px;
+  padding: 0 3px 0 10px;
+  box-sizing: border-box;
+  cursor: pointer;
+  background: #E1EDFD;
+  margin-top: 10px;
 }
 
-.progressBox {
-  width: 500px;
-  height: 180px;
-  background: #fff;
-  border-radius: 10px;
-  box-shadow: 0 0 6px 1px #bfbfbf;
+.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;
-  align-items: center;
-  justify-content: center;
   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;
 }
 
-.progressBox .lbox {
-  height: 100px;
-  font-size: 19px;
+.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;
-  align-items: center;
 }
 
-.progressBox .lbox img {
-  width: 40px;
-  margin-right: 20px;
+.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;
 }
 
-.progressBox>>>.el-progress-bar__outer {
-  background-color: #d1dfff !important;
+.l_none{
+  color: #00000069;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-</style>
+</style>

src/components/pages/library/fileBox.vue

@@ -0,0 +1,1306 @@
+<template>
+    <div class="f_box">
+        <div class="f_box_top">
+            <div class="f_box_top_left">
+                <div class="btn" @click="addImg($event)">
+                    上传本地文件
+                    <input type="file" accept="*" style="display: none" multiple="multiple"
+                        @change="beforeUpload($event)" />
+                </div>
+                <div class="btn2" v-if="checkArray.length" @click="openMoveBox">移动到</div>
+                <div class="btn2" v-if="checkArray.length" @click="downPan">下载</div>
+                <div class="delBtn" v-if="checkArray.length" @click="deleteFile"></div>
+            </div>
+            <div class="f_box_top_right">
+                <div class="input">
+                    <input type="text" v-model="fileName" placeholder="请输入你需要搜索的文件名字" @keyup.enter="serchFile">
+                    <div class="serch" @click="serchFile"></div>
+                </div>
+                <div class="tab">
+                    <div class="list" :class="{ active: stype == '2' }" @click="stype = '2'"></div>
+                    <div class="table" :class="{ active: stype == '1' }" @click="stype = '1'"></div>
+                </div>
+            </div>
+        </div>
+        <div class="none_box" v-if="fileArray.length == 0">
+            暂无上传文件
+        </div>
+        <div class="f_box_file_square" v-if="stype == '1' && fileArray.length" v-loading.body="isLoading">
+            <div class="f_box_file_allCheck" @click="checkAll" v-if="fileArray.length">
+                <img :src="checkImg" alt="" v-if="checkArray.length != fileArray.length">
+                <img :src="checkIsImg" alt="" v-else>
+                <span>全部文件</span>
+            </div>
+            <div class="f_box_file" v-for="(item, index) in fileArray" :key="index"
+                :class="{ check: checkArray.indexOf(item.id) != -1 }" @click.stop="selectFile(item)">
+                <img :src="officeImg" alt="" v-if="item.type == 1">
+                <img :src="pdfImg" alt="" v-if="item.type == 4">
+                <img :src="videoImg" alt="" v-if="item.type == 2">
+                <img :src="otherImg" alt="" v-if="item.type == 5">
+                <img :src="item.file" alt="" v-if="item.type == 3">
+                <el-tooltip :content="item.name" placement="top" effect="dark">
+                    <!-- content to trigger tooltip here -->
+                    <div class="name">{{ item.name }}</div>
+                </el-tooltip>
+                <div class="check" @click.stop="checkFile(item.id)">
+                    <img :src="checkImg" alt="" v-if="checkArray.indexOf(item.id) == -1">
+                    <img :src="checkIsImg" alt="" v-else>
+                </div>
+            </div>
+        </div>
+        <div class="f_box_file_list" v-else-if="stype == '2' && fileArray.length" v-loading.body="isLoading">
+            <div class="list_file_box">
+                <div class="list_top">
+                    <div class="check">
+                        <div class="list_allcheck" @click="checkAll" v-if="fileArray.length">
+                            <img :src="checkImg" alt="" v-if="checkArray.length != fileArray.length">
+                            <img :src="checkIsImg" alt="" v-else>
+                        </div>
+                    </div>
+                    <div class="name">文件名</div>
+                    <div class="size">大小</div>
+                    <div class="type">类型</div>
+                    <div class="time">上传时间</div>
+                </div>
+                <div class="list_content" :class="{ active: checkArray.indexOf(item.id) != -1 }"
+                    @click="checkFile(item.id)" v-for="(item, index) in fileArray" :key="index">
+                    <div class="check">
+                        <div class="list_allcheck">
+                            <img :src="checkImg" alt="" v-if="checkArray.indexOf(item.id) == -1">
+                            <img :src="checkIsImg" alt="" v-else>
+                        </div>
+                    </div>
+                    <div class="name">
+                        <div class="list_file_name">
+                            <img :src="officeImg" alt="" v-if="item.type == 1">
+                            <img :src="pdfImg" alt="" v-if="item.type == 4">
+                            <img :src="videoImg" alt="" v-if="item.type == 2">
+                            <img :src="otherImg" alt="" v-if="item.type == 5">
+                            <img :src="item.file" alt="" v-if="item.type == 3">
+                            <el-tooltip :content="item.name" placement="top" effect="dark">
+                                <div>{{ item.name }}</div>
+                            </el-tooltip>
+                        </div>
+                    </div>
+                    <div class="size">
+                        {{ item.size }}
+                    </div>
+                    <div class="type">
+                        {{ retrunType(item) }}
+                    </div>
+                    <div class="time">
+                        {{ item.time }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div v-if="proVisible" class="mask">
+            <div class="progressBox">
+                <div class="lbox">
+                    <img src="../../../assets/loading.gif" />上传中，请稍后
+                </div>
+                <!-- <div style="margin-bottom: 10px">
+                                <span>{{
+                                    isFinishSize
+                                }}M</span>
+                                /
+                                <span>{{
+                                    isAllSize
+                                }}M</span>
+                            </div> -->
+                <!-- <el-progress :text-inside="true" :stroke-width="20" :percentage="progress
+                                ? progress
+                                : 0
+                                " style="width: 80%"></el-progress> -->
+            </div>
+        </div>
+        <wpdf :dialogVisiblePdf.sync="dialogVisiblePdf" :url="wurl"></wpdf>
+        <wVideo :dialogVisibleVideo.sync="dialogVisibleVideo" :url="wurl"></wVideo>
+        <wOffice :dialogVisibleOffice.sync="dialogVisibleOffice" :url="wurl"></wOffice>
+        <el-dialog title="移动至" :visible.sync="moveBox" width="400px" @close="moveBox = false" class="dialog">
+            <div>
+                <div class="type_nav_box" v-for="(item, index) in checkTypeArray" :key="index">
+                    <div class="nav" :class="{ active: item.open }" @click.stop="openChild(index)">
+                        <span class="down"></span>
+                        <span class="file"></span>
+                        <el-tooltip :content="item.name" placement="top" effect="dark">:
+                            <!-- content to trigger tooltip here -->
+                            <span class="name">{{ item.name }}</span>
+                        </el-tooltip>
+                    </div>
+                    <div class="child" v-if="item.open">
+                        <div class="nav" v-for="(item2, index2) in item.child" :key="index + '-' + index2"
+                            :class="{ active: moveChild.id == item2.id }" @click.stop="checkMoveChild(item2)">
+                            <span class="file"></span>
+                            <el-tooltip :content="item2.name" placement="top" effect="dark">:
+                                <!-- content to trigger tooltip here -->
+                                <span class="name">{{ item2.name }}</span>
+                            </el-tooltip>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <span slot="footer">
+                <el-button @click="moveBox = false">取 消</el-button>
+                <el-button type="primary" @click="confirmMove">确 定</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";
+
+import JSZip from "jszip";
+import FileSaver from "file-saver";
+
+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])
+        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,
+        },
+    },
+    watch: {
+        pid: {
+            immediate: true,
+            deep: true,
+            handler(newValue, oldValue) {
+                this.fileArray = []
+                this.checkArray = []
+                this.fileName = ''
+                this.getData()
+            },
+        },
+    },
+    data() {
+        return {
+            isLoading: false,
+            proVisible: false,
+            stype: 1,
+            fileArray: [],
+            officeImg: officeImg,
+            pdfImg: pdfImg,
+            videoImg: videoImg,
+            otherImg: otherImg,
+            checkImg: checkImg,
+            checkIsImg: checkIsImg,
+            checkArray: [],
+            dialogVisiblePdf: false,
+            dialogVisibleVideo: false,
+            dialogVisibleOffice: false,
+            wurl: '',
+            moveBox: false,
+            checkTypeArray: [],
+            moveChild: '',
+            fileName: '',
+        }
+    },
+    computed: {
+        retrunType() {
+            return function (item) {
+                if (item.type == 1) {
+                    return 'OFFICE文件'
+                } else if (item.type == 2) {
+                    return '视频文件'
+                } else if (item.type == 3) {
+                    return '图片'
+                } else if (item.type == 4) {
+                    return 'PDF文件'
+                } else if (item.type == 5) {
+                    return '其他文件'
+                }
+            };
+        }
+    },
+    methods: {
+        getData() {
+            let type = this.pid.split('-')
+            let id = ''
+            if (type.length == 1) {
+                if (type[0] == 'wu') {
+                    id = '0'
+                } else {
+                    id = this.typeArray[type[0]].id
+                }
+            } else {
+                id = this.typeArray[type[0]].child[type[1]].id
+            }
+            this.isLoading = true;
+            let params = {
+                uid: this.userid,
+                pid: id,
+                n: this.fileName
+            };
+            this.ajax
+                .get(this.$store.state.api + "getSourceFile", params)
+                .then((res) => {
+                    this.isLoading = false;
+                    this.fileArray = res.data[0];
+                })
+                .catch((err) => {
+                    this.isLoading = false;
+                    console.error(err);
+                });
+        },
+        addImg(e) {
+            var el = e.currentTarget;
+            el.getElementsByTagName("input")[0].click();
+            e.target.value = "";
+        },
+        serchFile() {
+            this.getData();
+        },
+        beforeUpload(event) {
+            // const loading = this.openLoading();
+            let file = "";
+            let cfindex2 = 0;
+            for (var cfindex = 0; cfindex < event.target.files.length; cfindex++) {
+                file = event.target.files[cfindex];
+
+                var credentials = {
+                    accessKeyId: "AKIATLPEDU37QV5CHLMH",
+                    secretAccessKey: "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",
+                }; //秘钥形式的登录上传
+                window.AWS.config.update(credentials);
+                window.AWS.config.region = "cn-northwest-1"; //设置区域
+
+                var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
+                var _this = this;
+                let _name = file.name;
+                // _this.progress = 0;
+                _this.proVisible = true;
+                // _this.isFinishSize = 0;
+                // _this.isAllSize = (file.size / 1024 / 1024).toFixed(2);
+                let size = file.size;
+                _this.$forceUpdate();
+                if (file) {
+                    var params = {
+                        Key:
+                            file.name.split(".")[0] +
+                            new Date().getTime() +
+                            "." +
+                            file.name.split(".")[file.name.split(".").length - 1],
+                        ContentType: file.type,
+                        Body: file,
+                        "Access-Control-Allow-Credentials": "*",
+                        ACL: "public-read",
+                    }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
+                    var options = {
+                        partSize: 2048 * 1024 * 1024,
+                        queueSize: 2,
+                        leavePartsOnError: true,
+                    };
+                    bucket
+                        .upload(params, options)
+                        .on("httpUploadProgress", function (evt) {
+                            //这里可以写进度条
+                            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+                            // _this.progress = parseInt((evt.loaded / evt.total) * 100);
+                            // _this.isFinishSize = (evt.loaded / 1024 / 1024).toFixed(2);
+                            // _this.$forceUpdate();
+                        })
+                        .send(function (err, data) {
+                            cfindex2++;
+
+                            // _this.progress = 100;
+                            // _this.isFinishSize = _this.isAllSize;
+                            // _this.$forceUpdate();
+                            // setTimeout(() => {
+                            //     _this.proVisible = false;
+                            //     _this.$forceUpdate();
+                            // }, 1000);
+                            setTimeout(() => {
+                                if (
+                                    cfindex2 == event.target.files.length ||
+                                    cfindex2 > event.target.files.length
+                                ) {
+                                    _this.proVisible = false;
+                                }
+                            }, 1000);
+                            // loading.close();
+                            if (err) {
+                                _this.$message.error("上传失败");
+                            } else {
+                                let _type = 2;
+                                var imgA = [
+                                    "png",
+                                    "jpg",
+                                    "jpeg",
+                                    "bmp",
+                                    "gif",
+                                    "webp",
+                                    "psd",
+                                    "svg",
+                                    "tiff",
+                                ];
+                                var fileA = [
+                                    "DOC",
+                                    "DOCX",
+                                    "DOCM",
+                                    "DOTM",
+                                    "DOTX",
+                                    "PPTX",
+                                    "PPSX",
+                                    "PPT",
+                                    "PPS",
+                                    "PPTM",
+                                    "POTM",
+                                    "PPAM",
+                                    "POTX",
+                                    "PPSM",
+                                    "XLSX",
+                                    "XLS",
+                                ];
+                                var videoA = [
+                                    "AVI",
+                                    "NAVI",
+                                    "MPEG",
+                                    "ASF",
+                                    "MOV",
+                                    "WMV",
+                                    "3GP",
+                                    "RM",
+                                    "RMVB",
+                                    "FLV",
+                                    "F4V",
+                                    "H.264",
+                                    "H.265",
+                                    "REAL VIDEO",
+                                    "MKV",
+                                    "WebM",
+                                    "HDDVD",
+                                    "MP4",
+                                    "MPG",
+                                    "M4V",
+                                    "MGV",
+                                    "OGV",
+                                    "QTM",
+                                    "STR",
+                                    "AMC",
+                                    "DVX",
+                                    "EVO",
+                                    "DAT",
+                                    "OGG",
+                                    "OGM",
+                                ];
+                                if (
+                                    fileA.indexOf(
+                                        data.Location.split(".")[
+                                            data.Location.split(".").length - 1
+                                        ].toLocaleUpperCase()
+                                    ) != -1
+                                ) {
+                                    _type = 1; //word 文件
+                                } else if (
+                                    videoA.indexOf(
+                                        data.Location.split(".")[
+                                            data.Location.split(".").length - 1
+                                        ].toLocaleUpperCase()
+                                    ) != -1
+                                ) {
+                                    _type = 2; //视频
+                                } else if (
+                                    imgA.indexOf(
+                                        data.Location.split(".")[
+                                            data.Location.split(".").length - 1
+                                        ].toLocaleLowerCase()
+                                    ) != -1
+                                ) {
+                                    _type = 3; //图片
+                                } else if (
+                                    'pdf'.indexOf(
+                                        data.Location.split(".")[
+                                            data.Location.split(".").length - 1
+                                        ].toLocaleLowerCase()
+                                    ) != -1
+                                ) {
+                                    _type = 4; //pdf
+                                } else {
+                                    _type = 5; //文件
+                                }
+                                let _file = {
+                                    name: _name,
+                                    url: data.Location,
+                                    type: _type,
+                                    size: _this.formatFileSize(size)
+                                }
+                                // if (_this.checkJson.file) {
+                                //     _this.checkJson.file.push({
+                                //         name: file.name,
+                                //         url: data.Location,
+                                //         type: _type,
+                                //     });
+                                // } else {
+                                //     _this.checkJson.file = []
+                                //     _this.checkJson.file.push({
+                                //         name: file.name,
+                                //         url: data.Location,
+                                //         type: _type,
+                                //     });
+                                // }
+                                let type = 1
+                                if (
+                                    cfindex2 == event.target.files.length ||
+                                    cfindex2 > event.target.files.length
+                                ) {
+                                    type = 2
+                                }
+                                _this.addSource(_file, type)
+                                _this.$forceUpdate();
+
+                                console.log(_file);
+                                console.log(data.Location);
+                            }
+                        });
+                }
+            }
+        },
+        addSource(file, ctype) {
+            let _ctype = ctype
+            let type = this.pid.split('-')
+            let id = ''
+            if (type.length == 1) {
+                if (type[0] == 'wu') {
+                    id = '0'
+                } else {
+                    id = this.typeArray[type[0]].id
+                }
+            } else {
+                id = this.typeArray[type[0]].child[type[1]].id
+            }
+            let params = [{
+                n: encodeURIComponent(file.name),
+                file: encodeURIComponent(file.url),
+                type: file.type,
+                pid: id,
+                uid: this.userid,
+                size: file.size,
+            }];
+            this.ajax
+                .post(this.$store.state.api + "addSourceFile", params)
+                .then((res) => {
+                    if (_ctype == 2) {
+                        this.$message.success('上传成功');
+                        this.getData()
+                    }
+                })
+                .catch((err) => {
+                    console.error(err);
+                });
+        },
+        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";
+            }
+        },
+        checkFile(id) {
+            if (this.checkArray.indexOf(id) == -1) {
+                this.checkArray.push(id)
+            } else {
+                this.checkArray.splice(this.checkArray.indexOf(id), 1)
+            }
+        },
+        selectFile(item) {
+            if (item.type == 3) {
+                this.$hevueImgPreview(item.file);
+            } else if (item.type == 5) {
+                this.downloadFile(item);
+            } else if (item.type == 1) {
+                this.dialogVisibleOffice = true
+                this.wurl = item.file
+            } else if (item.type == 2) {
+                this.dialogVisibleVideo = true
+                this.wurl = item.file
+            } else if (item.type == 4) {
+                this.dialogVisiblePdf = true
+                this.wurl = item.file
+            }
+        },
+        downloadFile(f) {
+            this.isLoading = true;
+            var credentials = {
+                accessKeyId: "AKIATLPEDU37QV5CHLMH",
+                secretAccessKey: "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",
+            }; //秘钥形式的登录上传
+            window.AWS.config.update(credentials);
+            window.AWS.config.region = "cn-northwest-1"; //设置区域
+            let url2 = f.file;
+            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;
+            }
+            let _this = this;
+
+            var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
+            let name = decodeURIComponent(_url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1])
+            var params = {
+                Bucket: "ccrb",
+                Key: name
+            };
+            s3.getObject(params, function (err, data) {
+                _this.isLoading = false
+                if (err) console.log(err, err.stack); // an error occurred
+                else {
+                    let url = window.URL.createObjectURL(new Blob([data.Body]));
+                    let a = document.createElement("a");
+                    a.name = f.name;
+                    a.href = url;
+                    a.download = f.name;
+                    a.click();
+                    console.log(data);
+                }          // sxuccessful response
+
+            });
+        },
+        checkAll() {
+            if (this.checkArray.length === this.fileArray.length) {
+                this.checkArray = []
+            } else {
+                this.checkArray = []
+                this.fileArray.forEach(item => {
+                    this.checkArray.push(item.id)
+                });
+            }
+        },
+        deleteFile() {
+            this.$confirm("确定删除这些文件吗?", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+                .then(() => {
+                    let params = [
+                        { ids: this.checkArray.join(",") }
+                    ]
+                    this.ajax
+                        .post(this.$store.state.api + "deleteSourceFile", params)
+                        .then((res) => {
+                            this.$message({
+                                message: "删除成功",
+                                type: "success",
+                            });
+                            this.checkArray = []
+                            this.getData();
+                        })
+                        .catch((err) => {
+                            this.$message.error("删除失败");
+                            console.error(err);
+                        });
+                })
+                .catch(() => { });
+        },
+        openMoveBox() {
+            if (this.checkArray.length == 0) {
+                this.$message.error("请添加分类再移动");
+                return
+            }
+            let type = this.pid.split('-')
+            let id = ''
+            if (type.length == 1) {
+                if (type[0] == 'wu') {
+                    id = '0'
+                } else {
+                    id = this.typeArray[type[0]].id
+                }
+            } else {
+                id = this.typeArray[type[0]].child[type[1]].id
+            }
+            let array = JSON.parse(JSON.stringify(this.typeArray)).filter((item) => {
+                item.open = false
+                return item.child.length > 0
+            })
+
+            array = array.filter((item) => {
+                item.child = item.child.filter((item2) => {
+                    return item2.id != id
+                })
+                return item.child.length > 0
+            })
+            this.moveChild = ''
+            this.checkTypeArray = array
+            this.moveBox = true
+        },
+        openChild(index) {
+            this.checkTypeArray[index].open = !this.checkTypeArray[index].open
+        },
+        checkMoveChild(item) {
+            this.moveChild = item
+        },
+        confirmMove() {
+            if (!this.moveChild) {
+                this.$message.error("请选择移动的分类");
+                return
+            }
+            this.$confirm("确定将文件移动到" + this.moveChild.name + "下吗?", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+                .then(() => {
+                    let params = [
+                        {
+                            ids: this.checkArray.join(","),
+                            pid: this.moveChild.id
+                        }
+                    ]
+                    this.ajax
+                        .post(this.$store.state.api + "updateSourceFilePid", params)
+                        .then((res) => {
+                            this.$message({
+                                message: "移动成功",
+                                type: "success",
+                            });
+                            this.checkArray = []
+                            this.moveChild = ''
+                            this.moveBox = false
+                            this.getData();
+                        })
+                        .catch((err) => {
+                            this.$message.error("删除失败");
+                            console.error(err);
+                        });
+                })
+                .catch(() => { });
+        },
+        downPan() {
+            let array = []
+            this.fileArray.forEach(item => {
+                if (this.checkArray.includes(item.id)) {
+                    array.push(item)
+                }
+            })
+            if (array.length == 1) {
+                this.downloadFile(array[0])
+            } else {
+                this.uploadCourse(array)
+            }
+        },
+        uploadCourse(item) {
+            this.isLoading = true;
+            const _chapInfo = item;
+            let url = [];
+            for (let i = 0; i < _chapInfo.length; i++) {
+                url.push({
+                    name: _chapInfo[i].name,
+                    url: _chapInfo[i].file,
+                });
+            }
+            console.log(url);
+            this.downLoadAll(url);
+        },
+        downLoadAll(url) {
+            const data = url; // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
+            const zip = new JSZip();
+            const cache = {};
+            const promises = [];
+            data.forEach((item) => {
+                const promise = getFile(item.url).then((data) => {
+                    if (data.data != 1) {
+                        // 下载文件, 并存成ArrayBuffer对象
+                        const file_name = item.name; // 获取文件名
+                        zip.file(file_name, data.data, { binary: true }); // 逐个添加文件
+                        cache[file_name] = data.data;
+                    }
+                });
+                promises.push(promise);
+            });
+            Promise.all(promises).then(() => {
+                zip.generateAsync({ type: "blob" }).then((content) => {
+                    // 生成二进制流
+                    FileSaver.saveAs(content, "附件.zip"); // 利用file-saver保存文件  自定义文件名
+                    setTimeout(() => {
+                        this.isLoading = false;
+                    }, 2000);
+                });
+            });
+        },
+    },
+    mounted() {
+        this.getData();
+    },
+}
+</script>
+
+<style scoped>
+.f_box {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.f_box_top {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.f_box_top_left {
+    display: flex;
+    align-items: center;
+}
+
+.f_box_top_left .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_left .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_left .delBtn {
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    display: block;
+    background-image: url('../../../assets/icon/sourceFile/delete.png');
+    background-size: 100% 100%;
+}
+
+.f_box_top_left .btn+.btn2,
+.f_box_top_left .btn2+.btn2,
+.f_box_top_left .btn2+.delBtn {
+    margin-left: 15px;
+}
+
+.f_box_top_right {
+    margin-left: auto;
+    max-width: calc(100% - 280px);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+}
+
+.f_box_top_right>.input {
+    position: relative;
+    width: 250px;
+    height: 35px;
+}
+
+.f_box_top_right>.input>input {
+    width: 100%;
+    height: 100%;
+    border: 1px solid #D9D9D9;
+    border-radius: 5px;
+    padding: 0 45px 0 10px;
+    box-sizing: border-box;
+    font-size: 12px;
+    outline: none;
+}
+
+.f_box_top_right>.input>.serch {
+    content: '';
+    display: block;
+    width: 20px;
+    height: 20px;
+    background-image: url('../../../assets/icon/sourceFile/search.png');
+    background-size: 100% 100%;
+    position: absolute;
+    right: 13px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+}
+
+.f_box_top_right>.tab {
+    height: 30px;
+    width: 80px;
+    margin-left: 15px;
+    background: #e7e7e7;
+    border: 2px solid #D9D9D9;
+    border-radius: 5px;
+    box-sizing: border-box;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+}
+
+.f_box_top_right>.tab>.table,
+.f_box_top_right>.tab>.list {
+    width: 50%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.f_box_top_right>.tab>.list::before {
+    content: '';
+    display: block;
+    width: 20px;
+    height: 20px;
+    background-image: url('../../../assets/icon/sourceFile/list.png');
+    background-size: 100% 100%;
+}
+
+.f_box_top_right>.tab>.list.active,
+.f_box_top_right>.tab>.table.active {
+    background: #fff;
+}
+
+.f_box_top_right>.tab>.table::before {
+    content: '';
+    display: block;
+    width: 20px;
+    height: 20px;
+    background-image: url('../../../assets/icon/sourceFile/table.png');
+    background-size: 100% 100%;
+}
+
+.mask {
+    background-color: rgb(0 0 0 / 30%);
+    /* position: fixed; */
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 90;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.progressBox {
+    width: 300px;
+    height: 150px;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 6px 1px #bfbfbf;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    position: relative;
+    color: #6c6c6c;
+}
+
+.progressBox>>>.el-progress-bar__outer {
+    background-color: #d1dfff !important;
+}
+
+.progressBox .lbox {
+    height: 50px;
+    font-size: 19px;
+    display: flex;
+    align-items: center;
+    color: #747474;
+}
+
+.progressBox .lbox img {
+    width: 40px;
+    margin-right: 20px;
+}
+
+.closeCss {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+}
+
+.closeCss>img {
+    width: 100%;
+    height: 100%;
+}
+
+
+.f_box_file_square {
+    height: calc(100% - 55px);
+    overflow: auto;
+    width: 100%;
+    padding: 55px;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    position: relative;
+}
+
+.f_box_file_square>.f_box_file {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 160px;
+    height: 160px;
+    cursor: pointer;
+    margin: 0 36px 36px 0;
+    border-radius: 20px;
+    position: relative;
+}
+
+.f_box_file_square>.f_box_file:hover {
+    background: #F0F2F5;
+}
+
+.f_box_file_square>.f_box_file:hover>.check {
+    display: block;
+}
+
+.f_box_file_square>.f_box_file.check {
+    background: #E0EAFB;
+}
+
+.f_box_file_square>.f_box_file.check>.check {
+    display: block;
+}
+
+.f_box_file_square>.f_box_file>.check {
+    position: absolute;
+    left: 15px;
+    top: 15px;
+    width: 16px;
+    height: 16px;
+    background-size: 100%;
+    display: none;
+}
+
+.f_box_file_square>.f_box_file>.check>img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.f_box_file_square>.f_box_file>img {
+    width: 90px;
+    height: 90px;
+    object-fit: cover;
+}
+
+.f_box_file_square>.f_box_file>.name {
+    white-space: nowrap;
+    font-size: 14px;
+    max-width: 80%;
+    overflow: hidden;
+    margin: 4px auto 0;
+    text-overflow: ellipsis;
+    text-align: center;
+}
+
+.f_box_file_list {
+    height: calc(100% - 55px);
+    overflow: auto;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.f_box_file_list>.f_box_file {}
+
+
+.f_box_file_allCheck {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    font-size: 14px;
+    top: 20px;
+    left: 10px;
+    cursor: pointer;
+}
+
+.f_box_file_allCheck>img {
+    width: 16px;
+    height: 16px;
+    object-fit: cover;
+    margin-right: 5px;
+}
+
+.dialog>>>.el-dialog__body {
+    padding: 10px 20px;
+}
+
+.type_nav_box {}
+
+.type_nav_box>.nav {
+    height: 40px;
+    border-radius: 5px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 0 10px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+    font-size: 16px;
+    color: #000;
+}
+
+.type_nav_box>.nav>.down {
+    min-width: 14px;
+    height: 14px;
+    background-image: url('../../../assets/icon/sourceFile/icon_arrow.png');
+    background-size: 100% 100%;
+    margin-right: 10px;
+    transition: all 0.3s;
+    transform: rotate(-90deg);
+}
+
+.type_nav_box>.nav.active>.down {
+    transform: rotate(0deg);
+}
+
+.type_nav_box>.nav>.file {
+    min-width: 18px;
+    height: 18px;
+    background-image: url('../../../assets/icon/sourceFile/file.png');
+    background-size: 100% 100%;
+    margin-right: 10px;
+}
+
+.type_nav_box>.nav>.name {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.type_nav_box>.child {}
+
+.type_nav_box>.child>.nav {
+    height: 40px;
+    border-radius: 5px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 0 10px 0 50px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+    font-size: 16px;
+    color: #000;
+}
+
+.type_nav_box>.child>.nav.active {
+    background: #e0eafb;
+}
+
+.type_nav_box>.child>.nav>.file {
+    min-width: 18px;
+    height: 18px;
+    background-image: url('../../../assets/icon/sourceFile/file.png');
+    background-size: 100% 100%;
+    margin-right: 10px;
+}
+
+.type_nav_box>.child>.nav>.name {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.none_box {
+    height: calc(100% - 55px);
+    overflow: auto;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+
+.list_file_box {
+    width: 100%;
+}
+
+.list_file_box>.list_top {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    height: 50px;
+}
+
+.list_file_box .check {
+    width: 21px;
+    margin: 0 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.list_allcheck {
+    cursor: pointer;
+    width: 14px;
+    height: 14px;
+}
+
+.list_allcheck>img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.list_file_box .name {
+    width: calc(100% - 21px - 100px - 100px - 200px - 50px);
+    margin-right: 10px;
+}
+
+.list_file_box .size {
+    width: 100px;
+    margin-right: 10px;
+}
+
+.list_file_box .type {
+    width: 100px;
+    margin-right: 10px;
+}
+
+.list_file_box .time {
+    width: 200px;
+}
+
+.list_top>.check,
+.list_top>.name,
+.list_top>.size,
+.list_top>.type,
+.list_top>.time {
+    font-size: 16px;
+}
+
+.list_content {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    height: 50px;
+    cursor: pointer;
+}
+
+.list_content:hover {
+    background: #f0f2f5;
+}
+
+.list_content.active {
+    background: #e0eafb;
+}
+
+.list_content>.name {
+    font-size: 14px;
+    color: #000000e6;
+}
+
+.list_content>.size,
+.list_content>.type,
+.list_content>.time {
+    font-size: 12px;
+    color: #00000099;
+}
+
+.list_file_name {
+    display: flex;
+    align-items: center;
+}
+
+.list_file_name>img {
+    width: 24px;
+    height: 24px;
+    object-fit: cover;
+    margin-right: 5px;
+}
+
+.list_file_name>div {
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+</style>

src/components/pages/libraryJiu.vue

@@ -0,0 +1,572 @@
+<template>
+  <div class="pb_content" style="overflow: auto">
+    <div class="pb_head top">
+      <span>素材库</span>
+      <div v-if="choose == 0" @click="addImg($event)">
+        <input type="file" accept="image/*" capture="camera" style="display: none" @change="beforeUpload1($event, 1)" />
+        <div class="uploadThing">上传图片</div>
+      </div>
+      <div v-if="choose == 1" @click="addImg($event)">
+        <input type="file" accept="video/mp4,video/quicktime,video/x-msvideo" capture="camera" style="display: none"
+          @change="beforeUpload2($event, 2)" />
+        <div class="uploadThing">上传视频</div>
+      </div>
+      <div v-if="choose == 2" @click="addImg($event)">
+        <input type="file"
+          accept="application/pdf,.ppt,.pptx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+          style="display: none" @change="beforeUpload2($event, 3)" />
+        <div class="uploadThing">上传附件</div>
+      </div>
+    </div>
+    <div class="pb_content_body" style="height: 70%">
+      <div class="student_head">
+        <div class="three">
+          <div :class="choose == 0 ? 'choose' : ''" @click="sMtl(0)">图片</div>
+          <div :class="choose == 1 ? 'choose' : ''" @click="sMtl(1)">视频</div>
+          <div :class="choose == 2 ? 'choose' : ''" @click="sMtl(2)">附件</div>
+        </div>
+      </div>
+      <div class="student_table" v-loading="isLoading">
+        <div v-if="this.choose == 0" class="boxCss">
+          <div class="out_box" v-for="(item, index) in chapInfo" :key="index">
+            <div class="tup">
+              <img :src="item.chapdataInfo ? JSON.parse(item.chapdataInfo).url : mtp
+                " alt="" @click="
+    handlePictureCardPreview(JSON.parse(item.chapdataInfo).url)
+    " />
+              <div class="deleteWord" @click="deleteM(item.id)">
+                <img src="../../assets/icon/delete.png" alt="" />
+              </div>
+            </div>
+            <div class="bottom_box">
+              <el-tooltip :content="item.chapdataInfo
+                ? JSON.parse(item.chapdataInfo).name
+                : '暂无名称'" placement="top" effect="dark">
+                <div>
+                  {{
+                    item.chapdataInfo
+                    ? JSON.parse(item.chapdataInfo).name
+                    : "暂无名称"
+                  }}
+                </div>
+              </el-tooltip>
+            </div>
+          </div>
+        </div>
+        <div v-if="this.choose == 1" class="boxCss">
+          <div class="out_box" v-for="(item, index) in chapInfo" :key="index">
+            <div class="tup">
+              <img :src="msp" alt="" @click="
+                handlePictureCardPreview1(JSON.parse(item.chapdataInfo).url)
+                " />
+              <div class="deleteWord" @click="deleteM(item.id)">
+                <img src="../../assets/icon/delete.png" alt="" />
+              </div>
+            </div>
+            <div class="bottom_box">
+              <el-tooltip :content="item.chapdataInfo
+                ? JSON.parse(item.chapdataInfo).name
+                : '暂无名称'" placement="top" effect="dark">
+                <div>
+                  {{
+                    item.chapdataInfo
+                    ? JSON.parse(item.chapdataInfo).name
+                    : "暂无名称"
+                  }}
+                </div>
+              </el-tooltip>
+            </div>
+          </div>
+        </div>
+        <div v-if="this.choose == 2" class="boxCss">
+          <div class="out_box" v-for="(item, index) in chapInfo" :key="index">
+            <div class="tup">
+              <img :src="mfj" alt="" @click="downFile(JSON.parse(item.chapdataInfo).url)" />
+              <div class="deleteWord" @click="deleteM(item.id)">
+                <img src="../../assets/icon/delete.png" alt="" />
+              </div>
+            </div>
+            <div class="bottom_box">
+              <el-tooltip :content="item.chapdataInfo
+                ? JSON.parse(item.chapdataInfo).name
+                : '暂无名称'" placement="top" effect="dark">
+                <div>
+                  {{
+                    item.chapdataInfo
+                    ? JSON.parse(item.chapdataInfo).name
+                    : "暂无名称"
+                  }}
+                </div>
+              </el-tooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="student_page">
+        <el-pagination background layout="prev, pager, next" :page-size="10" :total="total" v-if="page && chapInfo.length"
+          @current-change="handleCurrentChange">
+        </el-pagination>
+      </div>
+    </div>
+    <el-dialog :visible.sync="pictureDialog" size="tiny">
+      <img width="100%" :src="dialogImageUrl" alt="" />
+    </el-dialog>
+    <el-dialog :visible.sync="vedioDialog" size="tiny">
+      <video-player v-if="vedioDialog" class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true"
+        :options="playerO" @play="onPlayerPlay($event)" style="width: 100%; height: 100%"></video-player>
+    </el-dialog>
+    <div v-if="proVisible" class="mask">
+      <div class="progressBox">
+        <div class="lbox">
+          <img :src="require('../../assets/loading.gif')" />上传中，请稍后
+        </div>
+        <el-progress :text-inside="true" :stroke-width="20" :percentage="progress" style="width: 80%"></el-progress>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      choose: 0,
+      chapInfo: [],
+      cImgInfo: [],
+      isLoading: false,
+      noneBtnImg: false,
+      mtp: require("../../assets/tup1.png"),
+      msp: require("../../assets/icon/fileIcon/isVideo.png"),
+      mfj: require("../../assets/icon/fileIcon/word2.png"),
+      page: 1,
+      total: 0,
+      dialogImageUrl: "",
+      userid: this.$route.query.userid,
+      pictureDialog: false,
+      vedioDialog: false,
+      playerOptions: {
+        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+        autoplay: false, //如果true,浏览器准备好时开始回放。
+        muted: false, // 默认情况下将会消除任何音频。
+        loop: false, // 导致视频一结束就重新开始。
+        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+        language: "zh-CN",
+        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+        sources: [
+          {
+            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
+            src: "", //url地址require("../../assets/media/aaa.mp4")
+          },
+        ],
+        // poster: require("../../assets/tu31.png"), //你的封面地址
+        // poster: dataRes.imgUrl, //你的封面地址
+        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+        controlBar: {
+          timeDivider: true, //当前时间和持续时间的分隔符
+          durationDisplay: true, //显示持续时间
+          remainingTimeDisplay: false, //是否显示剩余时间功能
+          fullscreenToggle: true, //全屏按钮
+        },
+      },
+      playerO: {},
+      proVisible: false,
+      progress: 0,
+    };
+  },
+  methods: {
+    handleCurrentChange(val) {
+      this.page = val;
+      this.selectMtl();
+    },
+    addImg(e) {
+      var el = e.currentTarget;
+      el.getElementsByTagName("input")[0].click();
+      el.target.value = ''
+      
+    },
+    imgChange(file, fileList, type) {
+      var _tmp = this.chapInfo;
+      this.noneBtnImg = _tmp.length >= 1;
+    },
+    downFile(url) {
+      window.open( "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/"+encodeURIComponent(url.split(
+          "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/"
+        )[1]));
+    },
+    beforeUpload1(event, type) {
+      var file = event.target.files[0];
+      var credentials = {
+        accessKeyId: "AKIATLPEDU37QV5CHLMH",
+        secretAccessKey: "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",
+      }; //秘钥形式的登录上传
+      window.AWS.config.update(credentials);
+      window.AWS.config.region = "cn-northwest-1"; //设置区域
+
+      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
+      var _this = this;
+      if (file) {
+        _this.progress = 0;
+        _this.proVisible = true;
+        var params = {
+          Key:
+            file.name.split(".")[0] +
+            new Date().getTime() +
+            "." +
+            file.name.split(".")[file.name.split(".").length - 1],
+          ContentType: file.type,
+          Body: file,
+          "Access-Control-Allow-Credentials": "*",
+          ACL: "public-read",
+        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
+        var options = {
+          partSize: 2048 * 1024 * 1024,
+          queueSize: 2,
+          leavePartsOnError: true,
+        };
+        bucket
+          .upload(params, options)
+          .on("httpUploadProgress", function (evt) {
+            //这里可以写进度条
+            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+            _this.progress = parseInt((evt.loaded * 80) / evt.total);
+          })
+          .send(function (err, data) {
+            _this.progress = 100;
+            setTimeout(() => {
+              _this.proVisible = false;
+            }, 1000);
+            if (err) {
+              var a = _this.$refs.upload1.uploadFiles;
+              a.splice(a.length - 1, a.length);
+              _this.$message.error("上传失败");
+            } else {
+              _this.cImgInfo.push({
+                name: file.name,
+                url: data.Location,
+              });
+              _this.addMtl();
+              _this.cImgInfo = [];
+              _this.imgChange(null, null, type);
+              console.log(data.Location);
+            }
+          });
+      }
+    },
+    handlePictureCardPreview(url) {
+      this.dialogImageUrl = url;
+      this.pictureDialog = true;
+    },
+    handlePictureCardPreview1(url) {
+      this.playerO = {};
+      this.playerOptions.poster = "";
+      this.playerOptions.sources[0].src = url;
+      this.playerO = this.playerOptions;
+      // this.dialogImageUrl = url;
+      this.vedioDialog = true;
+    },
+    beforeUpload2(event, type) {
+      var file = event.target.files[0];
+      var credentials = {
+        accessKeyId: "AKIATLPEDU37QV5CHLMH",
+        secretAccessKey: "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",
+      }; //秘钥形式的登录上传
+      window.AWS.config.update(credentials);
+      window.AWS.config.region = "cn-northwest-1"; //设置区域
+
+      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
+      var _this = this;
+      if (file) {
+        _this.progress = 0;
+      _this.proVisible = true;
+        var params = {
+          Key:
+            file.name.split(".")[0] +
+            new Date().getTime() +
+            "." +
+            file.name.split(".")[file.name.split(".").length - 1],
+          ContentType: file.type,
+          Body: file,
+          "Access-Control-Allow-Credentials": "*",
+          ACL: "public-read",
+        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
+        var options = {
+          partSize: 2048 * 1024 * 1024,
+          queueSize: 2,
+          leavePartsOnError: true,
+        };
+        bucket
+          .upload(params, options)
+          .on("httpUploadProgress", function (evt) {
+            //这里可以写进度条
+            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+            _this.progress = parseInt((evt.loaded * 80) / evt.total);
+          })
+          .send(function (err, data) {
+            _this.progress = 100;
+            setTimeout(() => {
+              _this.proVisible = false;
+            }, 1000);
+            if (err) {
+              var a = _this.$refs.upload1.uploadFiles;
+              a.splice(a.length - 1, a.length);
+              _this.$message.error("上传失败");
+            } else {
+              if (type == 2) {
+                _this.cImgInfo.push({
+                  name: file.name,
+                  url: data.Location,
+                });
+                _this.addMtl();
+                _this.cImgInfo = [];
+                _this.imgChange(null, null, type);
+              } else if (type == 3) {
+                _this.cImgInfo.push({
+                  name: file.name,
+                  url: data.Location,
+                });
+                _this.addMtl();
+                _this.cImgInfo = [];
+                _this.imgChange(null, null, type);
+              }
+              console.log(data.Location);
+            }
+          });
+      }
+    },
+    addMtl() {
+      let params = {
+        cInfo: this.cImgInfo[0],
+        t: this.choose,
+        cBy: this.userid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "addMtl", params)
+        .then((res) => {
+          this.$message.success("上传素材成功");
+          this.selectMtl();
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    sMtl(type) {
+      this.choose = type;
+      this.selectMtl();
+    },
+    selectMtl() {
+      this.isLoading = true;
+      let params = {
+        t: parseInt(this.choose),
+        uid: this.userid,
+        page: this.page,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectMtl2", params)
+        .then((res) => {
+          this.isLoading = false;
+          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
+          this.chapInfo = res.data[0];
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    deleteM(id) {
+      this
+        .$confirm("确定删除吗", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+        .then(() => {
+          let params = {
+            id: id,
+          };
+          this.ajax
+            .get(this.$store.state.api + "deleteM", params)
+            .then((res) => {
+              this.$message.success("删除成功");
+              this.selectMtl();
+            })
+            .catch((err) => {
+              this.isLoading = false;
+              console.error(err);
+            });
+        })
+        .catch(() => {
+
+        });
+
+    },
+    onPlayerPlay() { },
+  },
+  created() {
+    this.selectMtl();
+  },
+};
+</script>
+
+<style scoped>
+/* .student_button {
+																														display: flex;
+																														overflow: hidden;
+																														height: 40px;
+																													} */
+.student_head>>>.el-button--primary {
+  background-color: #2268bc;
+}
+
+.student_head {
+  display: flex;
+  justify-content: space-between;
+}
+
+.three {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 200px;
+  height: 30px;
+}
+
+.three>div {
+  cursor: pointer;
+}
+
+.choose {
+  border-bottom: 5px solid #3994fd;
+}
+
+.student_table {
+  width: 100%;
+  height: 100%;
+  background: #f2f2f2;
+  margin-top: 10px;
+}
+
+.tup {
+  width: calc(100% - 20px);
+  height: 120px;
+  margin: 0 auto;
+  position: relative;
+}
+
+.out_box:hover .deleteWord {
+  display: block;
+}
+
+.deleteWord {
+  width: 25px;
+  height: 25px;
+  position: absolute;
+  right: -25px;
+  top: -10px;
+  cursor: pointer;
+  display: none;
+}
+
+.tup>img,
+.deleteWord>img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.out_box {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  width: 235px;
+  padding: 10px 0;
+  background: #fff;
+  margin: 0 20px 20px 0;
+  height: fit-content;
+}
+
+.bottom_box {
+  display: flex;
+  text-align: center;
+  margin: 0 auto;
+  padding: 10px 0 5px 0;
+}
+
+.bottom_box>div:nth-child(1) {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  width: 200px;
+}
+
+.uploadThing {
+  background: #2268bc;
+  width: 90px;
+  height: 35px;
+  color: #fff;
+  font-size: 12px;
+  text-align: center;
+  line-height: 35px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.top {
+  display: flex;
+  justify-content: space-between;
+}
+
+.student_page {
+  margin-top: 30px;
+}
+
+.boxCss {
+  padding: 15px 5px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  min-height: 250px;
+}
+
+.mask {
+  background-color: rgba(0, 0, 0, 0);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 20000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.progressBox {
+  width: 500px;
+  height: 180px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 0 6px 1px #bfbfbf;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.progressBox .lbox {
+  height: 100px;
+  font-size: 19px;
+  display: flex;
+  align-items: center;
+}
+
+.progressBox .lbox img {
+  width: 40px;
+  margin-right: 20px;
+}
+
+.progressBox>>>.el-progress-bar__outer {
+  background-color: #d1dfff !important;
+}
+</style>

src/components/pages/libraryXin.vue

@@ -1,680 +0,0 @@
-<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>
-  </div>
-</template>
-
-<script>
-export default {
-  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++) {
-            pid[i].child = []
-            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) {
-                pid[i].child.push(child[j])
-              }
-            }
-          }
-          this.typeArray = pid
-        })
-        .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(() => {
-        });
-    }
-  },
-  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.active>.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;
-}
-
-.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;
-}
-</style>

src/components/pages/student.vue

@@ -441,29 +441,29 @@ export default {
           // console.log(res.data.uid, res.data.ph, res.data.oid, res.data.cid);
           // this.isLoading = false;
 
-          let params = [
-            {
-              userid: res.data.uid,
-              username: this.sName,
-              sid: this.sId,
-              type: 2,
-              oid: res.data.oid,
-              phone: res.data.ph,
-              cid: res.data.cid,
-              intro: "",
-              sex: "0",
-              org: this.org,
-            },
-          ];
-          this.ajax
-            // .post(this.$store.state.api + "updateUser", params)
-            .post(this.$store.state.api + "updateUserByEduOrg", params)
-            .then((res) => {
-              console.log(res);
-            })
-            .catch((err) => {
-              console.error(err);
-            });
+          // let params = [
+          //   {
+          //     userid: res.data.uid,
+          //     username: this.sName,
+          //     sid: this.sId,
+          //     type: 2,
+          //     oid: res.data.oid,
+          //     phone: res.data.ph,
+          //     cid: res.data.cid,
+          //     intro: "",
+          //     sex: "0",
+          //     org: this.org,
+          //   },
+          // ];
+          // this.ajax
+          //   // .post(this.$store.state.api + "updateUser", params)
+          //   .post(this.$store.state.api + "updateUserByEduOrg", params)
+          //   .then((res) => {
+          //     console.log(res);
+          //   })
+          //   .catch((err) => {
+          //     console.error(err);
+          //   });
           this.$message({
             message: "新增成功",
             type: "success",

src/components/pages/studentManage/student.vue

@@ -460,29 +460,29 @@ export default {
           // console.log(res.data.uid, res.data.ph, res.data.oid, res.data.cid);
           // this.isLoading = false;
 
-          let params = [
-            {
-              userid: res.data.uid,
-              username: this.sName,
-              sid: this.sId,
-              type: 2,
-              oid: res.data.oid,
-              phone: res.data.ph,
-              cid: res.data.cid,
-              intro: "",
-              sex: "0",
-              org: this.org,
-            },
-          ];
-          this.ajax
-            // .post(this.$store.state.api + "updateUser", params)
-            .post(this.$store.state.api + "updateUserByEduOrg", params)
-            .then((res) => {
-              console.log(res);
-            })
-            .catch((err) => {
-              console.error(err);
-            });
+          // let params = [
+          //   {
+          //     userid: res.data.uid,
+          //     username: this.sName,
+          //     sid: this.sId,
+          //     type: 2,
+          //     oid: res.data.oid,
+          //     phone: res.data.ph,
+          //     cid: res.data.cid,
+          //     intro: "",
+          //     sex: "0",
+          //     org: this.org,
+          //   },
+          // ];
+          // this.ajax
+          //   // .post(this.$store.state.api + "updateUser", params)
+          //   .post(this.$store.state.api + "updateUserByEduOrg", params)
+          //   .then((res) => {
+          //     console.log(res);
+          //   })
+          //   .catch((err) => {
+          //     console.error(err);
+          //   });
           this.$message({
             message: "新增成功",
             type: "success",