添加收藏页面

src/components/ShowFile/ShowFile.vue

@@ -173,7 +173,16 @@
           </template>
         </el-table-column>
 
-        <el-table-column v-if="index === 2" :key="index" :show-overflow-tooltip="true" max-width="200" :index="index" :prop="item.name" :label="item.label" :sortable="orderCustom?'custom':item.sortable" @click.stop="fileClick(scope.row)">
+        <el-table-column
+          v-if="index === 2"
+          :key="index"
+          :show-overflow-tooltip="true"
+          max-width="200"
+          :index="index"
+          :prop="item.name"
+          :label="item.label"
+          :sortable="item.sortable && orderCustom ?'custom':false"
+          @click.stop="fileClick(scope.row)">
           <template slot-scope="scope">
             <el-col v-if="scope.row.index === editingIndex" :span="10">
               <el-input v-focus v-model="renameFileName" placeholder="" size="small" :clearable="true" @keyup.enter.native="rowRename(renameFileName, scope.row)">
@@ -221,7 +230,7 @@
           :prop="item.name"
           :index="index"
           :label="item.label"
-          :sortable="orderCustom?'custom':item.sortable"
+          :sortable="item.sortable && orderCustom ?'custom':false"
           :show-overflow-tooltip="true"
           align="left"
           header-align="left"
@@ -238,7 +247,7 @@
           :prop="item.name"
           :index="index"
           :label="item.label"
-          :sortable="orderCustom?'custom':item.sortable"
+          :sortable="item.sortable && orderCustom ?'custom':false"
           :show-overflow-tooltip="true"
           align="left"
           header-align="left"
@@ -306,23 +315,7 @@
       :total="pagination.total"
       @current-change="currentChange">
     </el-pagination>
-
-    <!--<div class="drag-parent-class">-->
-    <!--<table id="drag-table" class="el-table" draggable="true">-->
-    <!--<tr class="el-table__row">-->
-    <!--<td rowspan="1" colspan="1" class="el-table_1_column_1  el-table-column&#45;&#45;selection"><div class="cell"><label class="el-checkbox"><span class="el-checkbox__input"><span class="el-checkbox__inner"></span><input type="checkbox" aria-hidden="false" class="el-checkbox__original" value=""></span>&lt;!&ndash;&ndash;&gt;</label></div></td>-->
-    <!--<td rowspan="1" colspan="1" class="el-table_1_column_2  "><div class="cell"><span data-v-038dedea="" data-v-5954443c="">&lt;!&ndash;&ndash;&gt; &lt;!&ndash;&ndash;&gt; <svg data-v-c8a70580="" data-v-038dedea="" aria-hidden="true" class="svg-icon"><use data-v-c8a70580="" href="#icon-folder"></use></svg></span></div></td>-->
-    <!--<td rowspan="1" colspan="1" class="el-table_1_column_3  " style=""><div class="cell el-tooltip" style="width: 397px;"><span data-v-5954443c="">超长名称7yuhqjadsyvguhqb3jfjivdycgzuhbjknldsafsbghyejhntcszvfhncszxzxcvsbfd</span></div></td>-->
-    <!--<td rowspan="1" colspan="1" class="el-table_1_column_4 is-center "><div class="cell"></div></td>-->
-    <!--<td rowspan="1" colspan="1" class="el-table_1_column_5 is-center "><div class="cell"></div></td>-->
-    <!--<td rowspan="1" colspan="1" class="el-table_1_column_6 is-center "><div class="cell el-tooltip"><span data-v-5954443c="">306.54M</span></div></td>-->
-    <!--<td rowspan="1" colspan="1" class="el-table_1_column_7 is-left "><div class="cell el-tooltip"><span data-v-5954443c="">&nbsp;&nbsp;&nbsp;15天前</span></div></td>-->
-    <!--</tr>-->
-    <!--</table>-->
-    <!--</div>-->
-
   </div>
-
 </template>
 
 <script>
@@ -369,6 +362,59 @@
         'default': function () {
           return {isFolder:null}
         }
+      },
+      singleMenus: {
+        'type': Array,
+        'default': function () {
+          return [
+            { iconClass: 'menu-open', label: '打开', operation: 'open' },
+            { iconClass: 'share', label: '分享', operation: 'share' },
+            { iconClass: 'menu-favorite', label: '收藏', operation: 'favorite' },
+            { iconClass: 'menu-edit1', label: '编辑', operation: 'edit' },
+            { iconClass: 'menu-details', label: '详细信息', operation: 'details' },
+            { iconClass: 'menu-rename', label: '重命名', operation: 'rename' },
+            { iconClass: 'menu-copy', label: '移动或复制', operation: 'copy' },
+            { iconClass: 'menu-download', label: '下载', operation: 'download' },
+            { iconClass: 'menu-remove', label: '删除', operation: 'remove' }
+          ]
+        }
+      },
+      singleMenusEdit: {
+        'type': Array,
+        'default': function () {
+          return [
+            { iconClass: 'menu-open', label: '打开', operation: 'open' },
+            { iconClass: 'share', label: '分享', operation: 'share' },
+            { iconClass: 'menu-favorite', label: '收藏', operation: 'favorite' },
+            { iconClass: 'menu-edit1', label: '编辑', operation: 'edit' },
+            { iconClass: 'menu-details', label: '详细信息', operation: 'details' },
+            { iconClass: 'menu-rename', label: '重命名', operation: 'rename' },
+            { iconClass: 'menu-copy', label: '移动或复制', operation: 'copy' },
+            { iconClass: 'menu-download', label: '下载', operation: 'download' },
+            { iconClass: 'menu-remove', label: '删除', operation: 'remove' }
+          ]
+        }
+      },
+      multipleMenus: {
+        'type': Array,
+        'default': function () {
+          return [
+            { iconClass: 'menu-copy', label: '移动或复制', operation: 'copy' },
+            { iconClass: 'menu-download', label: '下载', operation: 'download' },
+            { iconClass: 'menu-remove', label: '删除', operation: 'remove' }
+          ]
+        }
+      },
+      multipleRightMenus: {
+        'type': Array,
+        'default': function () {
+          return [
+            { iconClass: 'menu-deselect', label: '取消选定', operation: 'deselect' },
+            { iconClass: 'menu-copy', label: '移动或复制', operation: 'copy' },
+            { iconClass: 'menu-download', label: '下载', operation: 'download' },
+            { iconClass: 'menu-remove', label: '删除', operation: 'remove' }
+          ]
+        }
       }
     },
     data() {
@@ -424,38 +470,6 @@
         isJustHideMenus: false,
         menusIsMultiple: false,
         menus: [],
-        singleMenus: [
-          { iconClass: 'menu-open', label: '打开', operation: 'open' },
-          { iconClass: 'share', label: '分享', operation: 'share' },
-          { iconClass: 'menu-favorite', label: '收藏', operation: 'favorite' },
-          { iconClass: 'menu-details', label: '详细信息', operation: 'details' },
-          { iconClass: 'menu-rename', label: '重命名', operation: 'rename' },
-          { iconClass: 'menu-copy', label: '移动或复制', operation: 'copy' },
-          { iconClass: 'menu-download', label: '下载', operation: 'download' },
-          { iconClass: 'menu-remove', label: '删除', operation: 'remove' }
-        ],
-        singleMenusEdit: [
-          { iconClass: 'menu-open', label: '打开', operation: 'open' },
-          { iconClass: 'share', label: '分享', operation: 'share' },
-          { iconClass: 'menu-favorite', label: '收藏', operation: 'favorite' },
-          { iconClass: 'menu-edit1', label: '编辑', operation: 'edit' },
-          { iconClass: 'menu-details', label: '详细信息', operation: 'details' },
-          { iconClass: 'menu-rename', label: '重命名', operation: 'rename' },
-          { iconClass: 'menu-copy', label: '移动或复制', operation: 'copy' },
-          { iconClass: 'menu-download', label: '下载', operation: 'download' },
-          { iconClass: 'menu-remove', label: '删除', operation: 'remove' }
-        ],
-        multipleMenus: [
-          { iconClass: 'menu-copy', label: '移动或复制', operation: 'copy' },
-          { iconClass: 'menu-download', label: '下载', operation: 'download' },
-          { iconClass: 'menu-remove', label: '删除', operation: 'remove' }
-        ],
-        multipleRightMenus: [
-          { iconClass: 'menu-deselect', label: '取消选定', operation: 'deselect' },
-          { iconClass: 'menu-copy', label: '移动或复制', operation: 'copy' },
-          { iconClass: 'menu-download', label: '下载', operation: 'download' },
-          { iconClass: 'menu-remove', label: '删除', operation: 'remove' }
-        ],
         rowContextData: {},
         selectRowData: [],
         tableLoading: false,
@@ -472,7 +486,6 @@
           children: 'children',
           isLeaf: 'isLeaf'
         },
-
         dragLoop: null,
         positionX:0,
         positionY:0,
@@ -1079,6 +1092,8 @@
           sortableProp: this.sortable.prop,
           order: this.sortable.order,
           isFolder: this.queryCondition.isFolder,
+          isFavorite: this.queryCondition.isFavorite,
+          queryCondition: this.queryCondition,
           pageIndex: this.pagination.pageIndex,
           pageSize: this.pagination.pageSize
         }).then(res => {
@@ -1818,9 +1833,9 @@
             setPath(this.path, this.pathList)
             this.pagination.pageIndex = 1
             const path = encodeURIComponent(this.path);
-            console.log(this.vmode)
             this.$router.push(`?vmode=${this.vmode}&path=${path}`)
-            this.getFileList()
+            this.searchFileAndOpenDir(row)
+            // this.getFileList()
           }
         } else {
           if(row.contentType.includes('text')){

src/router/index.js

@@ -156,9 +156,9 @@ export const constantRoutes = [
     component: Layout,
     children: [
       {
-        path: 'index',
+        path: '',
         name: 'share',
-        component: () => import('@/views/form/index'),
+        component: () => import('@/views/share/index'),
         meta: { title: '分享', icon: 'gongxiangzhongxin' }
       }
     ]

src/views/favorite/index.vue

@@ -1,6 +1,16 @@
 <template>
   <div>
-    <show-file :defaultGrid="false" :sortable="sortable" :queryCondition="queryCondition" :orderCustom="true"></show-file>
+    <show-file
+      :defaultGrid="false"
+      :sortable="sortable"
+      :queryCondition="queryCondition"
+      :orderCustom="true"
+      :singleMenus="singleMenus"
+      :singleMenusEdit="singleMenusEdit"
+      :multipleMenus="multipleMenus"
+      :multipleRightMenus="multipleRightMenus"
+    >
+    </show-file>
   </div>
 </template>
 
@@ -15,8 +25,36 @@
           prop: 'updateDate', order: 'descending'
         },
         queryCondition: {
-          isFavorite: false
+          isFavorite: true
-        }
+        },
+        singleMenus: [
+          { iconClass: 'menu-open', label: '打开', operation: 'open' },
+          { iconClass: 'share', label: '分享', operation: 'share' },
+          { iconClass: 'menu-favorite', label: '收藏', operation: 'favorite' },
+          { iconClass: 'menu-details', label: '详细信息', operation: 'details' },
+          { iconClass: 'menu-rename', label: '重命名', operation: 'rename' },
+          { iconClass: 'menu-copy', label: '移动或复制', operation: 'copy' },
+          { iconClass: 'menu-download', label: '下载', operation: 'download' },
+          // { iconClass: 'menu-favorite-hover', label: '取消收藏', operation: 'unFavorite' }
+        ],
+        singleMenusEdit: [
+          { iconClass: 'menu-open', label: '打开', operation: 'open' },
+          { iconClass: 'share', label: '分享', operation: 'share' },
+          { iconClass: 'menu-favorite', label: '收藏', operation: 'favorite' },
+          { iconClass: 'menu-edit1', label: '编辑', operation: 'edit' },
+          { iconClass: 'menu-details', label: '详细信息', operation: 'details' },
+          { iconClass: 'menu-rename', label: '重命名', operation: 'rename' },
+          { iconClass: 'menu-download', label: '下载', operation: 'download' },
+          // { iconClass: 'menu-favorite-hover', label: '取消收藏', operation: 'unFavorite' }
+        ],
+        multipleMenus: [
+          { iconClass: 'menu-download', label: '下载', operation: 'download' },
+          { iconClass: 'menu-favorite-hover', label: '取消收藏', operation: 'unFavorite' }
+        ],
+        multipleRightMenus: [
+          { iconClass: 'menu-download', label: '下载', operation: 'download' },
+          { iconClass: 'menu-favorite-hover', label: '取消收藏', operation: 'unFavorite' }
+        ],
       }
     },
   }

src/views/form/index.vue

@@ -1,133 +0,0 @@
-<template>
-  <div id="demo">
-    <!-- 遮罩层 -->
-    <div class="container" v-show="panel">
-      <div class="xx">
-        <img id="image" :src="headerImage"/>
-      </div>
-      <button type="button" id="button" @click="crop">确定</button>
-    </div>
-
-    <div style="padding:20px;">
-      <div class="show">
-        <div class="picture" :style="'backgroundImage:url('+headerImage+')'">
-        </div>
-      </div>
-      <div style="margin-top:20px;">
-        <input type="file" id="change" accept="image" @change="change">
-        <label for="change"></label>
-      </div>
-
-    </div>
-
-  </div>
-</template>
-
-<script>
-  import "@/assets/css/cropper.css"
-  import Cropper from 'cropperjs'
-  export default {
-    components: {
-
-    },
-    data () {
-      return {
-        headerImage:'',
-        picValue:'',
-        cropper:'',
-        croppable:false,
-        panel:false,
-        url:''
-      }
-    },
-    mounted () {
-      //初始化这个裁剪框
-      var self = this;
-      var image = document.getElementById('image');
-      this.cropper = new Cropper(image, {
-        aspectRatio: 1,
-        viewMode: 1,
-        background:false,
-        zoomable:false,
-        ready: function () {
-          self.croppable = true;
-        }
-      });
-    },
-    methods: {
-      getObjectURL (file) {
-        var url = null ;
-        if (window.createObjectURL!=undefined) { // basic
-          url = window.createObjectURL(file) ;
-        } else if (window.URL!=undefined) { // mozilla(firefox)
-          url = window.URL.createObjectURL(file) ;
-        } else if (window.webkitURL!=undefined) { // webkit or chrome
-          url = window.webkitURL.createObjectURL(file) ;
-        }
-        return url ;
-      },
-      change (e) {
-        let files = e.target.files || e.dataTransfer.files;
-        if (!files.length) return;
-        this.panel = true;
-        this.picValue = files[0];
-
-        this.url = this.getObjectURL(this.picValue);
-        //每次替换图片要重新得到新的url
-        if(this.cropper){
-          this.cropper.replace(this.url);
-        }
-        this.panel = true;
-
-      },
-      crop () {
-        this.panel = false;
-        var croppedCanvas;
-        var roundedCanvas;
-
-        if (!this.croppable) {
-          return;
-        }
-        // Crop
-        croppedCanvas = this.cropper.getCroppedCanvas();
-        console.log(this.cropper)
-        // Round
-        roundedCanvas = this.getRoundedCanvas(croppedCanvas);
-
-        this.headerImage = roundedCanvas.toDataURL();
-        this.postImg()
-
-      },
-      getRoundedCanvas (sourceCanvas) {
-
-        var canvas = document.createElement('canvas');
-        var context = canvas.getContext('2d');
-        var width = sourceCanvas.width;
-        var height = sourceCanvas.height;
-
-        canvas.width = width;
-        canvas.height = height;
-
-        context.imageSmoothingEnabled = true;
-        context.drawImage(sourceCanvas, 0, 0, width, height);
-        context.globalCompositeOperation = 'destination-in';
-        context.beginPath();
-        context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
-        context.fill();
-
-        return canvas;
-      },
-      postImg () {
-        //这边写图片的上传
-      }
-    }
-  }
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss">
-  img {
-    display: block;
-    max-width: 100%;
-  }
-</style>

src/views/home/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <show-file :defaultGrid="false" :sortable="sortable"></show-file>
+    <show-file :defaultGrid="false"></show-file>
   </div>
 </template>
 
@@ -11,9 +11,6 @@ export default {
   components: {ShowFile},
   data() {
     return {
-      sortable: {
-        prop: 'updateDate', order: 'descending'
-      },
     }
   },
 }