From 69090d84caeddd7b6a5fc164b5323ac685078726 Mon Sep 17 00:00:00 2001
From: pushuo <229102104@qq.com>
Date: Thu, 25 Aug 2022 14:28:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=9B=BE=E7=89=87=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=99=A8=20->=20https://guangdagit.com/beike/beikesho?=
 =?UTF-8?q?p/issues/175?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Controllers/FileManagerController.php     |   3 +-
 beike/Admin/Services/FileManagerService.php   |   4 +-
 .../views/pages/file_manager/index.blade.php  | 873 +++++++++---------
 3 files changed, 460 insertions(+), 420 deletions(-)
diff --git a/beike/Admin/Http/Controllers/FileManagerController.php b/beike/Admin/Http/Controllers/FileManagerController.php
index a22386dd..506b563a 100644
--- a/beike/Admin/Http/Controllers/FileManagerController.php
+++ b/beike/Admin/Http/Controllers/FileManagerController.php
@@ -31,7 +31,8 @@ class FileManagerController extends Controller
     {
         $baseFolder = $request->get('base_folder');
         $page = (int)$request->get('page');
-        return (new FileManagerService)->getFiles($baseFolder, $page);
+        $perPage = (int)$request->get('per_page');
+        return (new FileManagerService)->getFiles($baseFolder, $page, $perPage);
     }
 
 
diff --git a/beike/Admin/Services/FileManagerService.php b/beike/Admin/Services/FileManagerService.php
index 052da2f9..d407d34c 100644
--- a/beike/Admin/Services/FileManagerService.php
+++ b/beike/Admin/Services/FileManagerService.php
@@ -57,7 +57,7 @@ class FileManagerService
      * @return array
      * @throws \Exception
      */
-    public function getFiles($baseFolder, int $page = 1): array
+    public function getFiles($baseFolder, int $page = 1, int $perPage = 20): array
     {
         $currentBasePath = rtrim($this->fileBasePath . $baseFolder, '/');
         $files = glob($currentBasePath . '/*');
@@ -75,7 +75,7 @@ class FileManagerService
         }
 
         $page = $page > 0 ? $page : 1;
-        $perPage = 20;
+        // $perPage = $perPage;
         $imageCollection = collect($images);
         $data = [
             'images' => $imageCollection->forPage($page, $perPage)->values()->toArray(),
diff --git a/resources/beike/admin/views/pages/file_manager/index.blade.php b/resources/beike/admin/views/pages/file_manager/index.blade.php
index 8defc1ab..ca2d3f4f 100644
--- a/resources/beike/admin/views/pages/file_manager/index.blade.php
+++ b/resources/beike/admin/views/pages/file_manager/index.blade.php
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <base href="{{ $admin_base_url }}">
@@ -18,36 +19,31 @@
   <script src="{{ mix('build/beike/admin/js/app.js') }}"></script>
   <title>beike filemanager</title>
 </head>
+
 <body class="page-filemanager">
   <div class="filemanager-wrap" id="filemanager-wrap-app" v-cloak ref="splitPane">
     <div class="filemanager-navbar" :style="'width:' + paneLengthValue">
-      <el-tree
-        :props="defaultProps"
-        node-key="path"
-        :data="treeData"
-        :current-node-key="folderCurrent"
-        :default-expanded-keys="defaultkeyarr"
-        :expand-on-click-node="false"
-        highlight-current
-        ref="tree"
-        @node-click="handleNodeClick"
-        @node-expand="(node) => {updateDefaultExpandedKeys(node, 'expand')}"
-        @node-collapse="(node) => {updateDefaultExpandedKeys(node, 'collapse')}"
-        class="tree-wrap">
+      <el-tree :props="defaultProps" node-key="path" :data="treeData" :current-node-key="folderCurrent"
+        :default-expanded-keys="defaultkeyarr" :expand-on-click-node="false" highlight-current ref="tree"
+        @node-click="handleNodeClick" @node-expand="(node) => {updateDefaultExpandedKeys(node, 'expand')}"
+        @node-collapse="(node) => {updateDefaultExpandedKeys(node, 'collapse')}" class="tree-wrap">
         <div class="custom-tree-node" slot-scope="{ node, data }">
           <div>@{{ node.label }}</div>
           {{-- v-if="node.isCurrent" --}}
-          <div class="right" >
+          <div class="right">
             <el-tooltip class="item" effect="dark" content="创建文件夹" placement="top">
-              <span @click.stop="() => {openInputBox('addFolder', node, data)}"><i class="el-icon-circle-plus-outline"></i></span>
+              <span @click.stop="() => {openInputBox('addFolder', node, data)}"><i
+                  class="el-icon-circle-plus-outline"></i></span>
             </el-tooltip>
 
             <el-tooltip class="item" effect="dark" content="重命名" placement="top">
-              <span v-if="node.level != 1" @click.stop="() => {openInputBox('renameFolder', node, data)}"><i class="el-icon-edit"></i></span>
+              <span v-if="node.level != 1" @click.stop="() => {openInputBox('renameFolder', node, data)}"><i
+                  class="el-icon-edit"></i></span>
             </el-tooltip>
 
             <el-tooltip class="item" effect="dark" content="删除" placement="top">
-              <span v-if="node.level != 1" @click.stop="() => {deleteFolder(node, data)}"><i class="el-icon-delete"></i></span>
+              <span v-if="node.level != 1" @click.stop="() => {deleteFolder(node, data)}"><i
+                  class="el-icon-delete"></i></span>
             </el-tooltip>
 
           </div>
@@ -57,18 +53,25 @@
     <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" :disabled="!!!selectImageIndex.length" icon="el-icon-download" @click="downloadImages">下载</el-link>
-          <el-link :underline="false" :disabled="!!!selectImageIndex.length" @click="deleteFile" icon="el-icon-delete">删除</el-link>
-          <el-link :underline="false" :disabled="selectImageIndex.length == 1 ? false : true" @click="openInputBox('image')" icon="el-icon-edit">重命名</el-link>
-          <el-link :underline="false" :disabled="!!!images.length && !!!selectImageIndex.length" @click="selectAll()" icon="el-icon-finished">全选</el-link>
+        <div class="left d-flex">
+          <el-button class="me-5" size="small" icon="el-icon-check" type="primary" @click="fileChecked" :disabled="!!!selectImageIndex.length">选择</el-button>
+          <el-link :underline="false" :disabled="!!!selectImageIndex.length" icon="el-icon-download"
+            @click="downloadImages">下载</el-link>
+          <el-link :underline="false" :disabled="!!!selectImageIndex.length" @click="deleteFile"
+            icon="el-icon-delete">删除</el-link>
+          <el-link :underline="false" :disabled="selectImageIndex.length == 1 ? false : true"
+            @click="openInputBox('image')" icon="el-icon-edit">重命名</el-link>
+          <el-link :underline="false" :disabled="!!!images.length && !!!selectImageIndex.length"
+            @click="selectAll()" icon="el-icon-finished">全选</el-link>
         </div>
         <div class="right">
-          <el-button size="small" type="primary" @click="openUploadFile" icon="el-icon-upload2">上传文件</el-button>
+          <el-button size="small" plain type="primary" @click="openUploadFile" icon="el-icon-upload2">上传文件</el-button>
         </div>
       </div>
-      <div v-if="images.length" class="content-center" v-batch-select="{ className: '.image-list', selectImageIndex, setSelectStatus: updateSelectStatus }">
-        <div :class="['image-list', file.selected ? 'active' : '']" v-for="file, index in images" :key="index" @click="checkedImage(index)">
+      <div v-if="images.length" class="content-center"
+        v-batch-select="{ className: '.image-list', selectImageIndex, setSelectStatus: updateSelectStatus }">
+        <div :class="['image-list', file.selected ? 'active' : '']" v-for="file, index in images"
+          :key="index" @click="checkedImage(index)">
           <div class="img"><img :src="file.url"></div>
           <div class="text">
             <span :title="file.name">@{{ file.name }}</span>
@@ -80,455 +83,491 @@
       <div class="content-footer">
         <div class="right"></div>
         <div class="pagination-wrap">
+          {{-- <el-pagination @current-change="pageCurrentChange" :page-size="20" layout="prev, pager, next"
+            :total="image_total">
+          </el-pagination> --}}
+
           <el-pagination
+            @size-change="pageSizeChange"
             @current-change="pageCurrentChange"
+            :current-page="image_page"
+            :page-sizes="[20, 40, 60, 80, 100]"
             :page-size="20"
-            layout="prev, pager, next"
+            layout="total, sizes, prev, pager, next, jumper"
             :total="image_total">
           </el-pagination>
+
+        </div>
+        <div class="right">
+
         </div>
-        <div class="right"><el-button size="small" icon="el-icon-check" type="primary" @click="fileChecked" :disabled="!!!selectImageIndex.length">选择</el-button></div>
       </div>
     </div>
 
-    <el-dialog
-      title="上传文件"
-      top="12vh"
-      :visible.sync="uploadFileDialog.show"
-      width="500px"
-      @close="uploadFileDialogClose"
-      custom-class="upload-wrap">
-        <el-upload
-          class="photos-upload"
-          target="photos-upload"
-          id="photos-upload"
-          element-loading-text="图片上传中..."
-          element-loading-background="rgba(0, 0, 0, 0.6)"
-          drag
-          action=""
-          :show-file-list="false"
-          accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG,.mp4,.MP4"
-          :before-upload="beforePhotoUpload"
-          :on-success="handlePhotoSuccess"
-          :on-change="handleUploadChange"
-          :http-request="uploadFile"
-          :multiple="true">
-          <i class="el-icon-upload"></i>
-          <div class="el-upload__text">点击上传，或将图片拖到此处</div>
-        </el-upload>
-        <div class="upload-image">
-          <div v-for="image, index in uploadFileDialog.images" :key="index" class="list">
-            <div class="info">
-              <div class="name">@{{ index + 1 }}. @{{ image.name }}</div>
-              <div class="status">@{{ image.status == 'complete' ? '完成' : '上传中' }}</div>
-            </div>
-            <el-progress :percentage="image.progre" :show-text="false" :stroke-width="4"></el-progress>
+    <el-dialog title="上传文件" top="12vh" :visible.sync="uploadFileDialog.show" width="500px"
+      @close="uploadFileDialogClose" custom-class="upload-wrap">
+      <el-upload class="photos-upload" target="photos-upload" id="photos-upload" element-loading-text="图片上传中..."
+        element-loading-background="rgba(0, 0, 0, 0.6)" drag action="" :show-file-list="false"
+        accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG,.mp4,.MP4" :before-upload="beforePhotoUpload"
+        :on-success="handlePhotoSuccess" :on-change="handleUploadChange" :http-request="uploadFile"
+        :multiple="true">
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">点击上传，或将图片拖到此处</div>
+      </el-upload>
+      <div class="upload-image">
+        <div v-for="image, index in uploadFileDialog.images" :key="index" class="list">
+          <div class="info">
+            <div class="name">@{{ index + 1 }}. @{{ image.name }}</div>
+            <div class="status">@{{ image.status == 'complete' ? '完成' : '上传中' }}</div>
           </div>
+          <el-progress :percentage="image.progre" :show-text="false" :stroke-width="4"></el-progress>
         </div>
+      </div>
     </el-dialog>
   </div>
 
   <script>
-  var callback = null;
+    var callback = null;
 
-  var app = new Vue({
-    el: '#filemanager-wrap-app',
-    components: {},
-    data: {
-      min: 10,
-      max: 40,
-      paneLengthPercent: 26,
-      triggerLength: 10,
-      isShift: false,
+    var app = new Vue({
+      el: '#filemanager-wrap-app',
+      components: {},
+      data: {
+        min: 10,
+        max: 40,
+        paneLengthPercent: 26,
+        triggerLength: 10,
+        isShift: false,
 
-      ssss:[],
-      loading: false,
-      isBatchSelect: false,
+        ssss: [],
+        loading: false,
+        isBatchSelect: false,
 
-      selectImageIndex: [],
+        selectImageIndex: [],
 
-      treeData: [{name: '图片空间', path: '/', children: @json($directories)}],
+        treeData: [{
+          name: '图片空间',
+          path: '/',
+          children: @json($directories)
+        }],
 
-      defaultProps: {
-        children: 'children',
-        label: 'name',
-        isLeaf: 'leaf'
-      },
-      selectIdxs: [],
-
-      uploadFileDialog: {
-        show: false,
-        total: 0,
-        images: []
-      },
-
-      folderCurrent: '/',
-      defaultkeyarr: ['/'],
-
-      triggerLeftOffset: 0,
-
-      images: [],
-      image_total: 0,
-      image_page: 1,
-    },
-    // 计算属性
-    computed: {
-      paneLengthValue() {
-        return `calc(${this.paneLengthPercent}% - ${this.triggerLength / 2 + 'px'})`
-      },
-    },
-    // 侦听器
-    watch: {
-      images: {
-        handler(val) {
-          if (this.isBatchSelect) return;
-          // 将选中的图片索引放入 selectImageIndex，未选中则清空
-          this.selectImageIndex = val.filter(item => item.selected).map(e => this.images.indexOf(e));
+        defaultProps: {
+          children: 'children',
+          label: 'name',
+          isLeaf: 'leaf'
         },
-        deep: true
-      },
+        selectIdxs: [],
 
-      selectImageIndex(indexs) {
-        this.images.forEach((item, index) => {
-          item.selected = indexs.includes(index);
-        });
-      },
-    },
-    // 组件方法
-    methods: {
-      handleNodeClick(e, node) {
-        if (e.path == this.folderCurrent) {
-          return;
-        }
+        uploadFileDialog: {
+          show: false,
+          total: 0,
+          images: []
+        },
 
-        this.folderCurrent = e.path
-        this.image_page = 1;
-        sessionStorage.setItem('folderCurrent', this.folderCurrent);
-        this.loadData(e, node)
-      },
+        folderCurrent: '/',
+        defaultkeyarr: ['/'],
 
-      updateSelectStatus(status) {
-        this.isBatchSelect = status
-      },
+        triggerLeftOffset: 0,
 
-      pageCurrentChange(e) {
-        this.image_page = e
-        this.loadData()
+        images: [],
+        image_total: 0,
+        image_page: 1,
+        per_page: 20,
       },
+      // 计算属性
+      computed: {
+        paneLengthValue() {
+          return `calc(${this.paneLengthPercent}% - ${this.triggerLength / 2 + 'px'})`
+        },
+      },
+      // 侦听器
+      watch: {
+        images: {
+          handler(val) {
+            if (this.isBatchSelect) return;
+            // 将选中的图片索引放入 selectImageIndex，未选中则清空
+            this.selectImageIndex = val.filter(item => item.selected).map(e => this.images.indexOf(e));
+          },
+          deep: true
+        },
 
-      uploadFileDialogClose() {
-        if (this.uploadFileDialog.images.length) {
+        selectImageIndex(indexs) {
+          this.images.forEach((item, index) => {
+            item.selected = indexs.includes(index);
+          });
+        },
+      },
+      // 组件方法
+      methods: {
+        handleNodeClick(e, node) {
+          if (e.path == this.folderCurrent) {
+            return;
+          }
+
+          this.folderCurrent = e.path
+          this.image_page = 1;
+          sessionStorage.setItem('folderCurrent', this.folderCurrent);
+          this.loadData(e, node)
+        },
+
+        updateSelectStatus(status) {
+          this.isBatchSelect = status
+        },
+
+        pageCurrentChange(e) {
+          this.image_page = e
           this.loadData()
-        }
+        },
 
-        this.uploadFileDialog.images = [];
-      },
+        pageSizeChange(e) {
+          this.per_page = e
+          this.loadData()
+        },
 
-      openUploadFile() {
-        this.uploadFileDialog.show = true
-      },
-
-      beforePhotoUpload(file) {
-        // this.editing.photoLoading = true;
-      },
-
-      handlePhotoSuccess(data) {
-        // this.editing.photoLoading = false;
-
-        // if (data.images) {
-        //   this.images.push(data.images);
-        // }
-      },
-
-      // 文件上传
-      uploadFile(file) {
-        const that = this;
-        let newFile = {};
-        if (file.file.type != 'image/png' && file.file.type != 'image/jpeg') {
-          return;
-        }
-
-        var formData = new FormData();
-        formData.append("file", file.file, file.file.name);
-        formData.append("path", this.folderCurrent);
-
-        newFile = {
-          // index: this.images.length,
-          name: file.file.name,
-          progre: 0,
-          status: 'padding'
-        };
-
-        this.uploadFileDialog.images.push(newFile);
-
-        let index = this.uploadFileDialog.images.length - 1;
-
-        $http.post('file_manager/upload', formData).then((res) => {
-          this.uploadFileDialog.images[index].status = 'complete';
-          this.uploadFileDialog.images[index].progre = 100;
-        }).finally(() => {index += 1})
-      },
-
-      handleUploadChange(e) {
-        console.log(e);
-        // console.log('handleUploadChange');
-      },
-
-      updateDefaultExpandedKeys(node, type) {
-        const isExist = this.defaultkeyarr.some(item => item === node.path)
-
-        if (type == 'expand') {
-          if (!isExist) {
-            this.defaultkeyarr.push(node.path)
+        uploadFileDialogClose() {
+          if (this.uploadFileDialog.images.length) {
+            this.loadData()
           }
-        } else {
-          const index = this.defaultkeyarr.findIndex(e => e == node.path);
-          if (index > -1) {
-            this.defaultkeyarr.splice(index, 1);
+
+          this.uploadFileDialog.images = [];
+        },
+
+        openUploadFile() {
+          this.uploadFileDialog.show = true
+        },
+
+        beforePhotoUpload(file) {
+          // this.editing.photoLoading = true;
+        },
+
+        handlePhotoSuccess(data) {
+          // this.editing.photoLoading = false;
+
+          // if (data.images) {
+          //   this.images.push(data.images);
+          // }
+        },
+
+        // 文件上传
+        uploadFile(file) {
+          const that = this;
+          let newFile = {};
+          if (file.file.type != 'image/png' && file.file.type != 'image/jpeg') {
+            return;
           }
-        }
 
-        sessionStorage.setItem('defaultkeyarr', this.defaultkeyarr);
-      },
+          var formData = new FormData();
+          formData.append("file", file.file, file.file.name);
+          formData.append("path", this.folderCurrent);
 
-      loadData(e, node) {
-        this.loading = true;
+          newFile = {
+            // index: this.images.length,
+            name: file.file.name,
+            progre: 0,
+            status: 'padding'
+          };
 
-        $http.get(`file_manager/files?base_folder=${this.folderCurrent}`, {page: this.image_page}, {hload: true}).then((res) => {
-          this.images = res.images
-          this.image_page = res.image_page
-          this.image_total = res.image_total
+          this.uploadFileDialog.images.push(newFile);
 
-          if (node) {
-            node.expanded = true
-            this.updateDefaultExpandedKeys(node.data, 'expand')
+          let index = this.uploadFileDialog.images.length - 1;
+
+          $http.post('file_manager/upload', formData).then((res) => {
+            this.uploadFileDialog.images[index].status = 'complete';
+            this.uploadFileDialog.images[index].progre = 100;
+          }).finally(() => {
+            index += 1
+          })
+        },
+
+        handleUploadChange(e) {
+          console.log(e);
+          // console.log('handleUploadChange');
+        },
+
+        updateDefaultExpandedKeys(node, type) {
+          const isExist = this.defaultkeyarr.some(item => item === node.path)
+
+          if (type == 'expand') {
+            if (!isExist) {
+              this.defaultkeyarr.push(node.path)
+            }
+          } else {
+            const index = this.defaultkeyarr.findIndex(e => e == node.path);
+            if (index > -1) {
+              this.defaultkeyarr.splice(index, 1);
+            }
           }
-        }).finally(() => this.loading = false);
-      },
 
-      // 按下滑动器
-      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 (paneLengthPercent > this.max) {
-          paneLengthPercent = this.max
-        }
-        this.paneLengthPercent = paneLengthPercent;
-      },
-
-      // 松开滑动器
-      handleMouseUp() {
-        document.removeEventListener('mousemove', this.handleMouseMove)
-      },
-
-      checkedImage(index) {
-        // 获取当前选中的 index
-        const selectedIndex = this.images.findIndex(e => e.selected);
-
-        if (this.isShift) {
-          // 获取 selectedIndex 与 index 之间的所有图片
-          let selectedImages = this.images.slice(Math.min(selectedIndex, index), Math.max(selectedIndex, index) + 1);
-          selectedImages.map(e => e.selected = true)
-          return;
-        }
-
-        if (this.isCtrl) {
-          this.images[index].selected = !this.images[index].selected;
-          return;
-        }
-
-        if (this.selectImageIndex.length > 1) {
-          this.images.map((e,i) => i != index ? e.selected = false : e.selected = true)
-          return;
-        }
-
-        this.images.map((e,i) => i != index ? e.selected = false : '')
-        this.images[index].selected = !this.images[index].selected
-      },
-
-      // 选取
-      fileChecked() {
-        let typedFiles = this.images.filter(e => e.selected)
-
-        if (callback !== null) {
-          callback(typedFiles);
-        }
-
-        // 关闭弹窗
-        var index = parent.layer.getFrameIndex(window.name);
-        parent.layer.close(index);
-      },
-
-      deleteFile() {
-        this.$confirm('是否要删除选中文件', '提示', {
-          type: 'warning'
-        }).then(() => {
-          const selectImageIndex = this.selectImageIndex;
-            // 获取images中下标与selectImageIndex相同的图片
-          const images = this.images.filter(e => selectImageIndex.includes(this.images.indexOf(e)));
-          // images 取 path 组成数组 然后用 | 分割成字符串
-          const files = images.map(e => e.name);
+          sessionStorage.setItem('defaultkeyarr', this.defaultkeyarr);
+        },
 
+        loadData(e, node) {
           this.loading = true;
 
-          $http.delete('file_manager/files',  {path: this.folderCurrent, files: files}, {hload: true}).then((res) => {
-            layer.msg(res.message)
-            this.loadData()
-          })
-        }).catch(_=>{});
-      },
+          $http.get(`file_manager/files?base_folder=${this.folderCurrent}`, {
+            page: this.image_page,
+            per_page: this.per_page
+          }, {
+            hload: true
+          }).then((res) => {
+            this.images = res.images
+            this.image_page = res.image_page
+            this.image_total = res.image_total
 
-      deleteFolder(node, data) {
-        if (data.path) {
-          this.$confirm('正在进行删除文件夹操作，文件夹内所有文件都将被删除，是否确认？', '提示', {
+            if (node) {
+              node.expanded = true
+              this.updateDefaultExpandedKeys(node.data, 'expand')
+            }
+          }).finally(() => this.loading = false);
+        },
+
+        // 按下滑动器
+        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 (paneLengthPercent > this.max) {
+            paneLengthPercent = this.max
+          }
+          this.paneLengthPercent = paneLengthPercent;
+        },
+
+        // 松开滑动器
+        handleMouseUp() {
+          document.removeEventListener('mousemove', this.handleMouseMove)
+        },
+
+        checkedImage(index) {
+          // 获取当前选中的 index
+          const selectedIndex = this.images.findIndex(e => e.selected);
+
+          if (this.isShift) {
+            // 获取 selectedIndex 与 index 之间的所有图片
+            let selectedImages = this.images.slice(Math.min(selectedIndex, index), Math.max(selectedIndex, index) +
+            1);
+            selectedImages.map(e => e.selected = true)
+            return;
+          }
+
+          if (this.isCtrl) {
+            this.images[index].selected = !this.images[index].selected;
+            return;
+          }
+
+          if (this.selectImageIndex.length > 1) {
+            this.images.map((e, i) => i != index ? e.selected = false : e.selected = true)
+            return;
+          }
+
+          this.images.map((e, i) => i != index ? e.selected = false : '')
+          this.images[index].selected = !this.images[index].selected
+        },
+
+        // 选取
+        fileChecked() {
+          let typedFiles = this.images.filter(e => e.selected)
+
+          if (callback !== null) {
+            callback(typedFiles);
+          }
+
+          // 关闭弹窗
+          var index = parent.layer.getFrameIndex(window.name);
+          parent.layer.close(index);
+        },
+
+        deleteFile() {
+          this.$confirm('是否要删除选中文件', '提示', {
             type: 'warning'
           }).then(() => {
-            $http.delete(`file_manager/directories`, {name: this.folderCurrent}).then((res) => {
+            const selectImageIndex = this.selectImageIndex;
+            // 获取images中下标与selectImageIndex相同的图片
+            const images = this.images.filter(e => selectImageIndex.includes(this.images.indexOf(e)));
+            // images 取 path 组成数组 然后用 | 分割成字符串
+            const files = images.map(e => e.name);
+
+            this.loading = true;
+
+            $http.delete('file_manager/files', {
+              path: this.folderCurrent,
+              files: files
+            }, {
+              hload: true
+            }).then((res) => {
               layer.msg(res.message)
-              this.$refs.tree.setCurrentKey(node.parent.data.path)
-              this.folderCurrent = node.parent.data.path;
-              this.$refs.tree.remove(data.path)
-            }).finally(() => this.loadData())
-          }).catch(_=>{});
-        }
-      },
-
-      selectAll() {
-        // 获取 this.images 中的 selected 是否全部为 true
-        const isAllSelected = this.images.every(e => e.selected);
-        this.images.map(e => e.selected = !isAllSelected)
-      },
-
-      downloadImages() {
-        // 获取选中的图片
-        const selectedImages = this.images.filter(e => e.selected);
-        // 创建 a 标签
-        selectedImages.forEach(e => {
-          const a = document.createElement('a');
-          // 设置 a 标签的 href 属性
-          a.href = e.origin_url;
-          // 设置 a 标签的 download 属性
-          a.download = e.name;
-          // 触发 a 标签的 click 事件
-          a.click();
-        });
-      },
-
-      openInputBox(type, node, data) {
-        this.$prompt('', type == 'addFolder' ? '新建文件夹' : '重命名', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          inputPattern: /^.+$/,
-          closeOnClickModal: false,
-          inputValue: type == 'image' ? this.images[this.selectImageIndex].name : (type == 'renameFolder' ? data.name : '新建文件夹'),
-          inputErrorMessage: '不能为空'
-        }).then(({ value }) => {
-          if (type == 'addFolder') {
-            let fileAllPathName = this.folderCurrent + '/' + value;
-            $http.post(`file_manager/directories`, {name: fileAllPathName}).then((res) => {
-              layer.msg(res.message)
-              node.expanded = true
-              this.$refs.tree.append({name: value, path: fileAllPathName, leaf: true}, node);
-              this.$refs.tree.setCurrentKey(fileAllPathName)
-              this.folderCurrent = fileAllPathName;
-              this.updateDefaultExpandedKeys(node.data, 'expand')
+              this.loadData()
             })
+          }).catch(_ => {});
+        },
+
+        deleteFolder(node, data) {
+          if (data.path) {
+            this.$confirm('正在进行删除文件夹操作，文件夹内所有文件都将被删除，是否确认？', '提示', {
+              type: 'warning'
+            }).then(() => {
+              $http.delete(`file_manager/directories`, {
+                name: this.folderCurrent
+              }).then((res) => {
+                layer.msg(res.message)
+                this.$refs.tree.setCurrentKey(node.parent.data.path)
+                this.folderCurrent = node.parent.data.path;
+                this.$refs.tree.remove(data.path)
+              }).finally(() => this.loadData())
+            }).catch(_ => {});
           }
+        },
 
-          if (type == 'renameFolder') {
-            $http.post(`file_manager/rename`, {origin_name: this.folderCurrent, new_name: value}).then((res) => {
-              layer.msg(res.message)
-              data.name = value;
-              data.path = data.path.replace(/\/[^\/]*$/, '/' + value);
-              this.folderCurrent = this.folderCurrent.replace(/\/[^\/]*$/, '/' + value);
-              // 递归修改 data 内所有 children -> path 的对应 level = value
-              this.changeChildren(data, node, value);
-            })
-          }
+        selectAll() {
+          // 获取 this.images 中的 selected 是否全部为 true
+          const isAllSelected = this.images.every(e => e.selected);
+          this.images.map(e => e.selected = !isAllSelected)
+        },
 
-          if (type == 'image') {
-            const name = this.images[this.selectImageIndex].name;
-            const origin_name = this.folderCurrent == '/' ? '/' + name : this.folderCurrent + '/' + name;
+        downloadImages() {
+          // 获取选中的图片
+          const selectedImages = this.images.filter(e => e.selected);
+          // 创建 a 标签
+          selectedImages.forEach(e => {
+            const a = document.createElement('a');
+            // 设置 a 标签的 href 属性
+            a.href = e.origin_url;
+            // 设置 a 标签的 download 属性
+            a.download = e.name;
+            // 触发 a 标签的 click 事件
+            a.click();
+          });
+        },
 
-            $http.post(`file_manager/rename`, {origin_name: origin_name, new_name: value}).then((res) => {
-              layer.msg(res.message)
-            })
-          }
-        }).catch(() => {});
-      },
-
-      changeChildren(data, node, value) {
-        if (data.children) {
-          data.children.map(e => {
-            if (e.path) {
-              // 将字符串转换为数组
-              let path = e.path.split('/')
-              path[node.level - 1] = value
-              // 将数组转换为字符串
-              e.path = path.join('/')
+        openInputBox(type, node, data) {
+          this.$prompt('', type == 'addFolder' ? '新建文件夹' : '重命名', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            inputPattern: /^.+$/,
+            closeOnClickModal: false,
+            inputValue: type == 'image' ? this.images[this.selectImageIndex].name : (type == 'renameFolder' ? data
+              .name : '新建文件夹'),
+            inputErrorMessage: '不能为空'
+          }).then(({
+            value
+          }) => {
+            if (type == 'addFolder') {
+              let fileAllPathName = this.folderCurrent + '/' + value;
+              $http.post(`file_manager/directories`, {
+                name: fileAllPathName
+              }).then((res) => {
+                layer.msg(res.message)
+                node.expanded = true
+                this.$refs.tree.append({
+                  name: value,
+                  path: fileAllPathName,
+                  leaf: true
+                }, node);
+                this.$refs.tree.setCurrentKey(fileAllPathName)
+                this.folderCurrent = fileAllPathName;
+                this.updateDefaultExpandedKeys(node.data, 'expand')
+              })
             }
 
-            if (e.children) {
-              this.changeChildren(e, node, value)
+            if (type == 'renameFolder') {
+              $http.post(`file_manager/rename`, {
+                origin_name: this.folderCurrent,
+                new_name: value
+              }).then((res) => {
+                layer.msg(res.message)
+                data.name = value;
+                data.path = data.path.replace(/\/[^\/]*$/, '/' + value);
+                this.folderCurrent = this.folderCurrent.replace(/\/[^\/]*$/, '/' + value);
+                // 递归修改 data 内所有 children -> path 的对应 level = value
+                this.changeChildren(data, node, value);
+              })
             }
-          })
+
+            if (type == 'image') {
+              const name = this.images[this.selectImageIndex].name;
+              const origin_name = this.folderCurrent == '/' ? '/' + name : this.folderCurrent + '/' + name;
+
+              $http.post(`file_manager/rename`, {
+                origin_name: origin_name,
+                new_name: value
+              }).then((res) => {
+                layer.msg(res.message)
+              })
+            }
+          }).catch(() => {});
+        },
+
+        changeChildren(data, node, value) {
+          if (data.children) {
+            data.children.map(e => {
+              if (e.path) {
+                // 将字符串转换为数组
+                let path = e.path.split('/')
+                path[node.level - 1] = value
+                // 将数组转换为字符串
+                e.path = path.join('/')
+              }
+
+              if (e.children) {
+                this.changeChildren(e, node, value)
+              }
+            })
+          }
         }
-      }
-    },
+      },
 
-    created () {
-      const defaultkeyarr = sessionStorage.getItem('defaultkeyarr');
-      const folderCurrent = sessionStorage.getItem('folderCurrent');
+      created() {
+        const defaultkeyarr = sessionStorage.getItem('defaultkeyarr');
+        const folderCurrent = sessionStorage.getItem('folderCurrent');
 
-      if (defaultkeyarr) {
-        this.defaultkeyarr = defaultkeyarr.split(',');
-      }
-
-      if (folderCurrent) {
-        this.folderCurrent = folderCurrent;
-      }
-    },
-    // 实例被挂载后调用
-    mounted () {
-      this.loadData()
-      // 获取键盘事件 是否按住 shift/ctrl 键 兼容 mac 和 windows
-      document.addEventListener('keydown', (e) => {
-        this.isShift = e.shiftKey;
-        this.isCtrl = e.ctrlKey || e.metaKey;
-      })
-
-      // 获取键盘事件 是否松开 shift/ctrl 键
-      document.addEventListener('keyup', (e) => {
-        this.isShift = e.shiftKey;
-        this.isCtrl = e.ctrlKey || e.metaKey;
-      })
-
-      // 判断鼠标是否点击 .image-list 元素
-      document.addEventListener('click', (e) => {
-        if (this.isBatchSelect) return;
-        const targets = ['filemanager-navbar', 'content-center']
-        if (targets.indexOf(e.target.className) > -1) {
-          this.selectImageIndex = [];
-          this.images.map(e => e.selected = false)
+        if (defaultkeyarr) {
+          this.defaultkeyarr = defaultkeyarr.split(',');
         }
-      })
-    },
-  })
+
+        if (folderCurrent) {
+          this.folderCurrent = folderCurrent;
+        }
+      },
+      // 实例被挂载后调用
+      mounted() {
+        this.loadData()
+        // 获取键盘事件 是否按住 shift/ctrl 键 兼容 mac 和 windows
+        document.addEventListener('keydown', (e) => {
+          this.isShift = e.shiftKey;
+          this.isCtrl = e.ctrlKey || e.metaKey;
+        })
+
+        // 获取键盘事件 是否松开 shift/ctrl 键
+        document.addEventListener('keyup', (e) => {
+          this.isShift = e.shiftKey;
+          this.isCtrl = e.ctrlKey || e.metaKey;
+        })
+
+        // 判断鼠标是否点击 .image-list 元素
+        document.addEventListener('click', (e) => {
+          if (this.isBatchSelect) return;
+          const targets = ['filemanager-navbar', 'content-center']
+          if (targets.indexOf(e.target.className) > -1) {
+            this.selectImageIndex = [];
+            this.images.map(e => e.selected = false)
+          }
+        })
+      },
+    })
   </script>
 </body>
+
 </html>
