文件管理器

public/build/beike/admin/css/filemanager.css

@@ -14,23 +14,31 @@ body.page-filemanager .filemanager-wrap {
 body.page-filemanager .filemanager-wrap .filemanager-navbar {
   width: 20%;
 }
-body.page-filemanager .filemanager-wrap .filemanager-divider {
-  position: absolute;
-  top: 0;
-  height: 100%;
-  left: 20%;
-  width: 10px;
+body.page-filemanager .filemanager-wrap .filemanager-navbar .tree-wrap .el-tree-node__content {
+  height: 36px;
+}
+body.page-filemanager .filemanager-wrap .filemanager-navbar .tree-wrap .custom-tree-node {
+  width: 100%;
   display: flex;
-  justify-content: center;
   align-items: center;
-  cursor: move;
+  justify-content: space-between;
+}
+body.page-filemanager .filemanager-wrap .filemanager-navbar .tree-wrap .custom-tree-node .right span {
+  margin-right: 8px;
+}
+body.page-filemanager .filemanager-wrap .filemanager-navbar .tree-wrap .custom-tree-node .right span:hover {
+  color: #fd560f;
+}
+body.page-filemanager .filemanager-wrap .filemanager-divider {
+  top: 0;
+  width: 3px;
+  cursor: col-resize;
 }
 body.page-filemanager .filemanager-wrap .filemanager-divider:hover {
-  background: red;
+  background: #fd560f;
 }
 body.page-filemanager .filemanager-wrap .filemanager-content {
-  width: 80%;
-  padding-left: 10px;
+  flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -39,6 +47,7 @@ body.page-filemanager .filemanager-wrap .filemanager-content .content-head {
   height: 56px;
   position: relative;
   display: flex;
+  background-color: #fff;
   align-items: center;
   justify-content: space-between;
   padding: 0 16px;
@@ -54,16 +63,16 @@ body.page-filemanager .filemanager-wrap .filemanager-content .content-center {
   flex-wrap: wrap;
   background: #f9fafa;
   padding: 20px;
-  margin-right: -10px;
+  margin-right: -20px;
   overflow-y: auto;
 }
 body.page-filemanager .filemanager-wrap .filemanager-content .content-center .image-list {
-  width: calc(20% - 10px);
+  width: calc(20% - 20px);
   display: flex;
   flex-direction: column;
   margin-bottom: 20px;
   background: #fff;
-  margin-right: 10px;
+  margin-right: 20px;
   box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
   cursor: pointer;
 }
@@ -91,8 +100,9 @@ body.page-filemanager .filemanager-wrap .filemanager-content .content-center .im
 body.page-filemanager .filemanager-wrap .filemanager-content .content-footer {
   height: 56px;
   padding: 0 16px;
+  background-color: #fff;
   display: flex;
   box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
 }

resources/beike/admin/css/filemanager/app.scss

@@ -17,28 +17,44 @@ body.page-filemanager {
 
     .filemanager-navbar {
       width: 20%;
+
+      .tree-wrap {
+        .el-tree-node__content {
+          height: 36px;
+        }
+
+        .custom-tree-node {
+          width: 100%;
+          display: flex;
+          align-items: center; // flex-start | center
+          justify-content: space-between; // flex-end | center | space-between
+
+          .right {
+            span {
+              margin-right: 8px;
+              &:hover {
+                color: $primary;
+              }
+            }
+          }
+        }
+      }
     }
 
     .filemanager-divider {
-      position: absolute;
       top: 0;
-      height: 100%;
-      left: 20%;
-      width: 10px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      // cursor: col-resize;
-      cursor: move;
+      width: 3px;
+      cursor: col-resize;
 
       &:hover {
-        background: red;
+        background: $primary;
       }
     }
 
     .filemanager-content {
-      width: 80%;
-      padding-left: 10px;
+      // width: 80%;
+      flex: 1;
+      // padding-left: 10px;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
@@ -47,6 +63,7 @@ body.page-filemanager {
         height: 56px;
         position: relative;
         display: flex;
+        background-color: #fff;
         align-items: center; // flex-start | center
         justify-content: space-between; // flex-end | center | space-between
         // flex-wrap: wrap;
@@ -70,17 +87,17 @@ body.page-filemanager {
         padding: 20px;
         // justify-content: space-between; // flex-end | center | space-between
         // flex-wrap: wrap;
-        margin-right: -10px;
+        margin-right: -20px;
         overflow-y: auto;
 
         .image-list {
-          width: calc(20% - 10px);
+          width: calc(20% - 20px);
           display: flex;
           flex-direction: column;
           // align-items: center;
           margin-bottom: 20px;
           background: #fff;
-          margin-right: 10px;
+          margin-right: 20px;
           box-shadow: 0 0 2px 1px rgba(0, 0, 0, .1);
           cursor: pointer;
           // border: 1px solid transparent;
@@ -114,10 +131,11 @@ body.page-filemanager {
       .content-footer {
         height: 56px;
         padding: 0 16px;
+        background-color: #fff;
         display: flex;
         box-shadow: 0 -2px 4px rgba(0, 0, 0, .1);
         align-items: center; // flex-start | center
-        justify-content: center; // flex-end | center | space-between
+        justify-content: space-between;
       }
     }
   }

resources/beike/admin/views/pages/filemanager/index.blade.php

@@ -15,19 +15,39 @@
   <title>beike filemanager</title>
 </head>
 <body class="page-filemanager">
-  <div class="filemanager-wrap" id="filemanager-wrap-app" v-cloak>
-    <div class="filemanager-navbar" ref='letfDom'>
-      <el-tree :data="tree" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+  <div class="filemanager-wrap" id="filemanager-wrap-app" v-cloak ref="splitPane">
+    <div class="filemanager-navbar" :style="'width:' + paneLengthValue">
+      <el-tree
+        :data="tree"
+        :props="defaultProps"
+        @node-click="handleNodeClick"
+        class="tree-wrap">
+        <div class="custom-tree-node" slot-scope="{ node, data }">
+          <div>@{{ node.label }}</div>
+          <div class="right">
+            <el-tooltip class="item" effect="dark" content="创建文件夹" placement="top">
+              <span><i class="el-icon-circle-plus-outline"></i></span>
+            </el-tooltip>
+
+            <el-tooltip class="item" effect="dark" content="重命名" placement="top">
+              <span><i class="el-icon-edit"></i></span>
+            </el-tooltip>
+
+            <el-tooltip class="item" effect="dark" content="删除" placement="top">
+              <span><i class="el-icon-delete"></i></span>
+            </el-tooltip>
+
+          </div>
+        </div>
+      </el-tree>
     </div>
-    <div class="filemanager-divider" draggable="true" @dragstart="myFunction(event)" ref='moveDom'></div>
-    <div class="filemanager-content">
+    <div class="filemanager-divider" @mousedown="handleMouseDown"></div>
+    <div class="filemanager-content" v-loading="loading" element-loading-background="rgba(255, 255, 255, 0.5)">
       <div class="content-head">
         <div class="left">
-          <el-link :underline="false" icon="el-icon-edit">下载</el-link>
-          <el-link :underline="false" icon="el-icon-edit">删除</el-link>
-          <el-link :underline="false" icon="el-icon-edit">重命名</el-link>
-          {{-- <el-link :underline="false" icon="el-icon-edit">无下划线</el-link> --}}
-          {{-- <el-link :underline="false" icon="el-icon-edit">无下划线</el-link> --}}
+          <el-link :underline="false" :disabled="editingFileIndex === null" icon="el-icon-edit">下载</el-link>
+          <el-link :underline="false" :disabled="editingFileIndex === null" icon="el-icon-edit">删除</el-link>
+          <el-link :underline="false" :disabled="editingFileIndex === null" icon="el-icon-edit">重命名</el-link>
         </div>
         <div class="right"><el-button size="mini" type="primary">上传文件</el-button></div>
       </div>
@@ -41,12 +61,14 @@
         </div>
       </div>
       <div class="content-footer">
+        <div class="right"></div>
         <div class="pagination-wrap">
           <el-pagination
             layout="prev, pager, next"
             :total="50">
           </el-pagination>
         </div>
+        <div class="right"><el-button size="mini" type="primary" @click="fileChecked" :disabled="editingFileIndex === null">选择</el-button></div>
       </div>
     </div>
   </div>
@@ -56,8 +78,14 @@
     el: '#filemanager-wrap-app',
     components: {},
     data: {
-      letfDom: null,
-      clientStartX: 0,
+      min: 10,
+      max: 40,
+      paneLengthPercent: 20,
+      triggerLength: 10,
+
+      loading: false,
+
+      editingFileIndex: null,
 
       tree: [
         {
@@ -99,6 +127,8 @@
         label: 'label'
       },
 
+      triggerLeftOffset: 0,
+
       files: [
         {type: 'image', src: 'https://via.placeholder.com/140x140.png/eeeeee', name: '文件名称', selected: false},
         {type: 'image', src: 'https://via.placeholder.com/140x140.png/eeeeee', name: '文件名称', selected: false},
@@ -131,36 +161,71 @@
       ]
     },
     // 计算属性
-    computed: {},
+    computed: {
+      // isFileSelected() {
+      //   return this.files.some(file => file.selected);
+      // },
+
+      paneLengthValue() {
+        return `calc(${this.paneLengthPercent}% - ${this.triggerLength / 2 + 'px'})`
+      },
+    },
     // 侦听器
     watch: {},
     // 组件方法
     methods: {
       handleNodeClick(e) {
         console.log(e)
+        this.loading = true
+
+        setTimeout(() => {
+          this.loading = false
+        },1000)
       },
 
-      moveHandle(nowClientX, letfDom) {
-        let computedX = nowClientX - this.clientStartX;
-        let leftBoxWidth = parseInt(letfDom.style.width);
-        let changeWidth = leftBoxWidth + computedX;
+      loadNode(node, resolve) {
+        console.log(node, resolve)
+        resolve(this.tree)
+      },
 
-        if (changeWidth < 280) {
-          changeWidth = 280;
+      // 按下滑动器
+      handleMouseDown(e) {
+        document.addEventListener('mousemove', this.handleMouseMove)
+        document.addEventListener('mouseup', this.handleMouseUp)
+
+        this.triggerLeftOffset = e.pageX - e.srcElement.getBoundingClientRect().left
+      },
+
+      // 按下滑动器后移动鼠标
+      handleMouseMove(e) {
+        const clientRect = this.$refs.splitPane.getBoundingClientRect()
+        let paneLengthPercent = 0
+
+        const offset = e.pageX - clientRect.left - this.triggerLeftOffset + this.triggerLength / 2
+        paneLengthPercent = (offset / clientRect.width) * 100
+
+        if (paneLengthPercent < this.min) {
+          paneLengthPercent = this.min
         }
-
-        if (changeWidth > 400) {
-          changeWidth = 400;
+        if (paneLengthPercent > this.max) {
+          paneLengthPercent = this.max
         }
+        this.paneLengthPercent = paneLengthPercent;
+      },
 
-        letfDom.style.width = changeWidth + "px";
-
-        this.clientStartX = nowClientX;
+      // 松开滑动器
+      handleMouseUp() {
+        document.removeEventListener('mousemove', this.handleMouseMove)
       },
 
       checkedImage(index) {
+        this.editingFileIndex = index;
         this.files.map(e => !e.index ? e.selected = false : '')
         this.files[index].selected = !this.files[index].selected
+      },
+
+      fileChecked() {
+        console.log(this.editingFileIndex)
       }
     },
     // 在实例初始化之后，组件属性计算之前，如data属性等
@@ -174,27 +239,17 @@
     },
     // 实例被挂载后调用
     mounted () {
-      this.letfDom = this.$refs.letfDom;
-      let moveDom = this.$refs.moveDom;
-
-      moveDom.onmousedown = e => {
-        this.clientStartX = e.clientX;
-        e.preventDefault();
-
-        document.onmousemove = e => {
-          this.moveHandle(e.clientX, this.letfDom);
-        };
-
-        document.onmouseup = e => {
-          document.onmouseup = null;
-          document.onmousemove = null;
-        };
-      };
     },
   })
-document.ondragover=function(e){
-  e.preventDefault();
-}
+
+  $(document).ready(function() {
+    $(document).on('click', function (e) {
+      if ($(e.target).closest('.content-center .image-list').length === 0) {
+        app.editingFileIndex = null;
+        app.files.map(e => e.selected = false)
+      }
+    })
+  });
   </script>
 </body>
 </html>