添加分享历史页面

src/api/upload-api.js

@@ -130,6 +130,22 @@ export default {
       data: data
     })
   },
+  // 取消分享
+  cancelShareLink: function(params) {
+    return request({
+      url: 'share/cancel',
+      method: 'delete',
+      params
+    })
+  },
+  // 分享列表
+  sharelist: function(params) {
+    return request({
+      url: '/share/list',
+      method: 'get',
+      params
+    })
+  },
   // 访问分享链接
   accessShare: function(params) {
     return request({

src/components/Icon/IconFile.vue

@@ -19,12 +19,12 @@
     <svg-icon v-else-if="item.contentType.indexOf('audio') > -1" icon-class="audio"/>
     <svg-icon v-else-if="item.contentType.indexOf('text') > -1" icon-class="file-txt"/>
     <div v-else-if="item.contentType.indexOf('image') > -1">
-      <el-image v-if="grid" style="width: 80px;height: 80px;" fit="contain" :src="imageUrl+item.id">
+      <el-image v-if="grid" style="width: 80px;height: 80px;" fit="contain" :src="item.fileId ? (imageUrl+item.fileId) : (imageUrl+item.id)">
         <div slot="error" class="image-slot">
           <svg-icon icon-class="loading-image-error"/>
         </div>
       </el-image>
-      <el-avatar v-if="!grid" shape="square" :src="imageUrl+item.id"></el-avatar>
+      <el-avatar v-if="!grid" shape="square" :src="item.fileId ? (imageUrl+item.fileId) : (imageUrl+item.id)"></el-avatar>
     </div>
     <svg-icon v-else-if="item.contentType.indexOf('application/pdf') > -1" icon-class="file-pdf"/>
     <svg-icon v-else-if="item.contentType.indexOf('word') > -1" icon-class="file-word"/>
@@ -63,7 +63,9 @@
     },
     mounted() {
     },
-    methods: {}
+    methods: {
+
+    }
   }
 </script>
 <style lang="scss" scoped>

src/components/ShowFile/ShowFile.vue

@@ -314,7 +314,7 @@
       <el-divider class="grid-divider" content-position="center"><i class="el-icon-folder-opened"></i>&nbsp;{{summaries}}</el-divider>
     </div>
     <empty-file
-      v-if="this.fileList.length < 1"
+      v-if="this.fileList.length < 1 && !tableLoading"
       :emptyStatus="emptyStatus"
     >
     </empty-file>
@@ -1198,10 +1198,8 @@
           this.getFileList()
         }
       },
-      sortChange(column, prop, order) {
-        // console.log(this.listModeSearch)
+      sortChange(column) {
         if(this.orderCustom || this.listModeSearch){
-          console.log('sortChange',column)
           this.sortable.prop = column.prop
           this.sortable.order = column.order
 
@@ -1314,7 +1312,7 @@
           item_date.label = '修改日期'
           item_date.sortable = true
         }
-        if(this.indexList.length == this.fileList.length){
+        if(this.indexList.length === this.fileList.length){
           this.allChecked = true
         }else{
           this.allChecked = false
@@ -1751,7 +1749,7 @@
         api.generate({
           userId: row.userId,
           fileId: row.id,
-          isFile: !row.isFolder
+          isFolder: row.isFolder
         }).then(res => {
           if (res.data) {
             this.shareLink = 'http://'+window.location.host+'/s?s='+res.data

src/icons/svg/cancel-share.svg

@@ -0,0 +1 @@
+<svg t="1585300356226" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3346" width="32" height="32"><path d="M392.2 517.2c0-13.8-2.4-26.9-5.9-39.6l280-168c27.6 34.6 69.6 57.1 117.2 57.1 83.1 0 150.4-67.4 150.4-150.4S866.5 65.8 783.5 65.8s-150.4 67.4-150.4 150.4c0 13.8 2.4 26.9 5.9 39.6l-280 168c-27.6-34.6-69.6-57.1-117.2-57.1-83.1 0-150.4 67.4-150.4 150.4s67.4 150.4 150.4 150.4c47.6 0 89.6-22.6 117.2-57.1l160.2 96.1 30.9-51.6-163.8-98.2c3.5-12.7 5.9-25.8 5.9-39.5z m391.3-391.3c49.8 0 90.3 40.5 90.3 90.3s-40.5 90.3-90.3 90.3-90.3-40.5-90.3-90.3 40.5-90.3 90.3-90.3zM241.8 607.4c-49.8 0-90.3-40.5-90.3-90.3s40.5-90.3 90.3-90.3 90.3 40.5 90.3 90.3c0 49.9-40.5 90.3-90.3 90.3z m640.7 69l-99 99-99.1-99-42.6 42.5 99.1 99.1-99.1 99.1 42.6 42.6 99.1-99.1 99 99.1 42.6-42.6L826 818l99-99.1-42.5-42.5z" p-id="3347"></path></svg>

src/views/share/index.vue

@@ -1,10 +1,145 @@
 <template>
   <div class="container">
-    <el-table v-if="this.shareList.length > 0">
-
+    <!--分享-->
+    <el-dialog :title="'分享:'+shareFileName" :visible.sync="shareDialog" center>
+      <div v-loading="generateShareLinkLoading">
+        <el-input readonly="readonly" v-model="shareLink"></el-input>
+        <div slot="footer" class="dialog-footer share-dialog-footer">
+          <el-button type="primary" class="tag-share-link" @click="copyShareLink" :data-clipboard-text="shareLink">复制链接</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!--list布局-->
+    <el-table
+      v-show="fileList.length > 0"
+      ref="fileListTable"
+      v-loading="tableLoading"
+      :max-height="clientHeight"
+      :default-sort="sortable"
+      style="width: 100%;margin: 20px 0 0 0;"
+      empty-text="无文件"
+      :data="fileList"
+      row-key="id"
+      :cell-style="rowRed"
+      :row-class-name="tableRowClassName"
+      element-loading-text="文件加载中"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="#f6f7fa88"
+      @selection-change="handleSelectionChange"
+      @cell-click="cellClick"
+      @cell-mouse-enter="cellMouseEnter"
+      @cell-mouse-leave="cellMouseLeave"
+      @sort-change="sortChange"
+    >
+      <template v-for="(item,index) in tableHead">
+        <!--索引-->
+        <el-table-column
+          v-if="index === 0"
+          :key="index"
+          :index="index"
+          type="selection"
+          min-width="50"
+        >
+        </el-table-column>
+        <!--图标-->
+        <el-table-column
+          v-if="index === 1"
+          :prop="item.name"
+          :label="item.label"
+          :key="index"
+          :index="index"
+          width="60"
+          header-align="right"
+        >
+          <template slot="header">
+            <div v-if="item.label !== ''">
+              <span class="header-font">{{item.label}}</span>
+            </div>
+          </template>
+          <template slot-scope="scope">
+            <icon-file :item="scope.row" :image-url="imageUrl"></icon-file>
+          </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"
+          :sort-orders="['ascending', 'descending']"
+          :sortable="item.sortable"
+          @click.stop="fileClick(scope.row)"
+          header-align="left"
+        >
+          <template slot="header">
+            <div v-if="item.label === ''" class="cancel-share-header">
+              <span class="header-font">{{sumFileAndFolder}}</span><el-button icon="el-icon-my-export">取消分享</el-button>
+            </div>
+          </template>
+          <template slot-scope="scope">
+            <span class="table-file-name">{{ scope.row.fileName }}</span>
+          </template>
+        </el-table-column>
+        <!--取消分享-->
+        <el-table-column v-if="index === 4" :key="index" width="50" :index="index" align="center" header-align="center" tooltip-effect="dark">
+          <template slot-scope="scope">
+              <svg-icon title="分享" v-if="scope.row.index === cellMouseIndex" class="button-class" icon-class="cancel-share" @click="cancelShare(scope.row)"/>
+          </template>
+        </el-table-column>
+        <!--时间-->
+        <el-table-column
+          v-if="index === 5"
+          :key="index"
+          width="250"
+          :prop="item.name"
+          :index="index"
+          :label="item.label"
+          :sort-orders="['ascending', 'descending']"
+          :sortable="item.sortable"
+          :show-overflow-tooltip="true"
+          align="center"
+          header-align="center"
+        >
+          <template slot-scope="scope">
+            <span>{{scope.row.createDate}}</span>
+          </template>
+        </el-table-column>
+        <!--修改时间-->
+        <el-table-column
+          v-if="index === 6"
+          :key="index"
+          width="250"
+          :prop="item.name"
+          :label="item.label"
+          :index="index"
+          :sort-orders="['ascending', 'descending']"
+          :sortable="item.sortable"
+          :show-overflow-tooltip="true"
+          align="left"
+          header-align="left"
+        >
+          <template slot-scope="scope">
+            <span>{{scope.row.expireDate?scope.row.expireDate:'永久有效'}}</span>
+          </template>
+        </el-table-column>
+      </template>
     </el-table>
+
+    <el-pagination
+      background
+      layout="prev, pager, next"
+      :hide-on-single-page="true"
+      :current-page.sync="pagination.pageIndex"
+      :page-sizes="pagination.pageSizes"
+      :page-size="pagination.pageSize"
+      :total="pagination.total"
+      @current-change="currentChange">
+    </el-pagination>
     <empty-file
-      v-if="this.shareList.length < 1"
+      v-if="fileList.length < 1 && !tableLoading"
       emptyStatus="您还没有分享历史哦~"
       :emptyShare="true"
     >
@@ -15,16 +150,367 @@
 <script>
   import ShowFile from "@/components/ShowFile/ShowFile";
   import EmptyFile from "@/components/EmptyFile";
+  import IconFile from "@/components/Icon/IconFile";
+  import { strlen, substring10, formatTime, formatSize } from '@/utils/number'
+  import api from '@/api/upload-api'
+  import Clipboard from 'clipboard';
   export default {
-    components: {ShowFile,EmptyFile},
+    components: { ShowFile, EmptyFile, IconFile },
+    props: {
+      emptyStatus: {
+        'type': String,
+        'default': '空空如也~',
+      },
+      singleFileType: {
+        'type': String,
+        'default': '',
+      },
+      showNavigation: {
+        'type': Boolean,
+        'default': true,
+      },
+      queryFileType: {
+        'type': String,
+        'default': null
+      },
+      defaultGrid: {
+        'type': Boolean,
+        'default': true
+      },
+      orderCustom: {
+        'type': Boolean,
+        'default': true
+      },
+      sortable: {
+        'type': Object,
+        'default': function () {
+          return { prop: 'createDate', order: 'descending'}
+        }
+      },
+      queryCondition: {
+        'type': Object,
+        'default': function () {
+          return {isFolder:null}
+        }
+      },
+    },
     data() {
       return {
-        shareList:[]
+        imageUrl: process.env.VUE_APP_BASE_API + '/view/thumbnail?jmal-token=' + this.$store.state.user.token + '&id=',
+        // imageUrl: 'http://localhost:8088/view?username=' + this.$store.state.user.name + '&id=',
+        fileMenuActive: '',
+        path: this.$route.query.path,
+        showNewFolder: false,
+        isShowNewFolder: false,
+        listModeSearch: false,
+        listModeSearchOpenDir: false,
+        newFolderName: '新建文件夹',
+        renameFileName: '',
+        searchFileName: '',
+        pathList: [
+          { 'folder': '', index: 0 },
+          { 'folder': '+', index: 1 }
+        ],
+        fileList: [],
+        pagination: {
+          pageIndex: 1,
+          pageSize: 25,
+          total: 0,
+          pageSizes: [10,20,30,40,50]
+        },
+        indexList: [],
+        clientHeight: 500,
+        // 表头数据
+        tableHead: [
+          {
+            name: '', label: '', index: 0
+          },
+          {
+            name: 'icon', label: '', index: 1
+          },
+          {
+            name: 'fileName', label: '分享文件', sortable: 'custom', index: 2
+          },
+          {
+            name: '', label: '', index: 3
+          },
+          {
+            name: '', label: '', more: true, index: 4
+          },
+          {
+            name: 'createDate', label: '时间', sortable: 'custom', index: 5
+          },
+          {
+            name: 'expireDate', label: '过期时间', sortable: 'custom', index: 6
+          }
+        ],
+        isJustHideMenus: false,
+        menusIsMultiple: false,
+        menus: [],
+        rowContextData: {},
+        selectRowData: [],
+        tableLoading: false,
+        newFolderLoading: false,
+        renameLoading: false,
+        menuTriangle: '', // 三角菜单
+        cellMouseIndex: -1,
+        editingIndex: -1,
+        directoryTreeProps: {
+          label: 'name',
+          children: 'children',
+          isLeaf: 'isLeaf'
+        },
+        allChecked: false,
+        shareDialog: false,
+        shareLink: '',
+        shareFileName: '',
+        generateShareLinkLoading: true,
+        sumFileAndFolder: ''
       }
     },
+    mounted() {
+      this.getFileList()
+    },
+    methods: {
+      getFileList() {
+        this.tableLoading = true
+        api.sharelist({
+          userId: this.$store.state.user.userId,
+          sortableProp: this.sortable.prop,
+          order: this.sortable.order,
+          pageIndex: this.pagination.pageIndex,
+          pageSize: this.pagination.pageSize
+        }).then(res => {
+          this.fileList = res.data
+          this.fileList.map((item,index) => {
+            item.index = index
+          })
+          this.clientHeight = document.documentElement.clientHeight - 165
+          this.pagination['total'] = res.count
+          this.$nextTick(()=>{
+            this.tableLoading = false
+          })
+        }).catch(e => {})
+      },
+      currentChange(pageIndex) {
+        this.pagination.pageIndex = pageIndex
+        if (this.listModeSearch) {
+          if(this.listModeSearchOpenDir){
+            this.searchFileAndOpenDir(this.listModeSearchOpenDir)
+          }else{
+            this.searchFile(this.searchFileName)
+          }
+        } else {
+          this.getFileList()
+        }
+      },
+      sortChange(column) {
+        console.log('sortChange',column)
+        this.sortable.prop = column.prop
+        this.sortable.order = column.order
+        this.pagination.pageIndex = 1
+        this.getFileList();
+      },
+      // 收集选中的index值作为数组 传递给rowRed判断变换样式
+      handleSelectionChange(row) {
+        // 选中的值
+        this.selectRowData = row
+        let selectTotalSize = 0
+        this.indexList = []
+        for (const item of row) {
+          selectTotalSize += item.size
+          this.indexList.push(item.index)
+        }
+        row.forEach(r => {
+          this.$refs.fileListTable.toggleRowSelection(r,true)
+        });
+        const itemIcon = this.tableHead[1]
+        const itemName = this.tableHead[2]
+        const itemSize = this.tableHead[5]
+        const itemDate = this.tableHead[6]
+        if (this.selectRowData.length > 0) {
+          this.sumFileAndFolder = this.getShowSumFileAndFolder(row)
+          itemIcon.label = '已选中'
+          itemName.label = ''
+          itemName.sortable = false
+          itemSize.label = ''
+          itemSize.sortable = false
+          itemDate.label = ''
+          itemDate.sortable = false
+        } else {
+          itemIcon.label = ''
+          itemName.label = '分享文件'
+          itemName.sortable = 'custom'
+          itemSize.label = '时间'
+          itemSize.sortable = 'custom'
+          itemDate.label = '过期时间'
+          itemDate.sortable = 'custom'
+        }
+        if(this.indexList.length === this.fileList.length){
+          this.allChecked = true
+        }else{
+          this.allChecked = false
+        }
+      },
+      // 统计文件和文件夹
+      getShowSumFileAndFolder(fileList) {
+        let folderSize = 0
+        let fileSize = 0
+        fileList.forEach((fileInfo) => {
+          if (fileInfo.isFolder) {
+            folderSize += 1
+          } else {
+            fileSize += 1
+          }
+        })
+        let folderSum = ''
+        if (folderSize > 0) {
+          folderSum = folderSize + '个文件夹'
+        }
+        let fileSum = ''
+        if (fileSize > 0) {
+          fileSum = fileSize + '个文件'
+        }
+        return folderSum + ' ' + fileSum
+      },
+      // cell-style 通过返回值可以实现样式变换利用传递过来的数组index循环改变样式
+      rowRed({ row, column, rowIndex, columnIndex }) {
+        if (this.indexList.length < 1 && columnIndex === 2 && this.cellMouseIndex === rowIndex) {
+          return { cursor: 'pointer', color: "#19ACF9" }
+        }
+        for (let i = 0; i < this.indexList.length; i++) {
+          if (rowIndex === this.indexList[i]) {
+            return { backgroundColor: '#EBEEF5', color: '#b7b5b6', cursor: 'default' }
+          }
+        }
+      },
+      // 动态添加index到row里面去
+      tableRowClassName({ row, rowIndex }) {
+        row.index = rowIndex
+      },
+      // 选择某行预备数据
+      preliminaryRowData(row) {
+        if (row) {
+          this.selectRowData[0] = row
+          this.rowContextData = row
+        }
+        const isFavorite = this.selectRowData[0].isFavorite
+        this.highlightFavorite(isFavorite, false)
+      },
+      // 单元格hover进入时时间
+      cellMouseEnter(row) {
+        if(this.editingIndex === -1){
+          if (this.indexList.length < 1) {
+            this.cellMouseIndex = row.index
+          }
+        }
+      },
+      // 单元格hover退出时时间
+      cellMouseLeave() {
+        this.cellMouseIndex = -1
+      },
+      // 单元格点击事件
+      cellClick(row, column) {
+        clearTimeout(this.Loop);
+        if(this.editingIndex === -1) {
+          const columnIndex = column.index
+          if (columnIndex === 0) {
+            // 点击选中
+            this.$refs.fileListTable.toggleRowSelection(row)
+          }
+          if (columnIndex === 2) {
+            if (this.indexList.length < 1) {
+              if (row.index !== this.editingIndex) {
+                this.fileClick(row)
+                this.editingIndex = -1
+              }
+            }
+          }
+          if (columnIndex === 4) {
+            // // 单个操作
+          }
+          if (this.indexList.length > 0 && columnIndex > 0) {
+            this.$refs.fileListTable.toggleRowSelection(row)
+          }
+        }
+      },
+      // 取消分享
+      cancelShare(row) {
+        console.log(row)
+        this.fileList.splice(row.index,1)
+        // api.cancelShareLink({
+        //   userId: this.$store.state.user.userId,
+        //   shareId: row.id
+        // }).then(() => {
+        //   this.fileList.splice(row.index,1)
+        // })
+      },
+      // 点击文件或文件夹
+      fileClick(row) {
+        this.shareDialog = true
+        this.shareFileName = row.fileName
+        this.shareLink = 'http://'+window.location.host+'/s?s='+row.id
+        this.generateShareLinkLoading = false
+      },
+      // 复制分享链接
+      copyShareLink() {
+        var clipboard = new Clipboard('.tag-share-link')
+        clipboard.on('success', e => {
+          this.$message({
+            message: '复制成功',
+            type: 'success',
+            duration: 1000
+          });
+          this.shareDialog = false
+          // 释放内存
+          clipboard.destroy()
+        })
+        clipboard.on('error', e => {
+          // 不支持复制
+          this.$message({
+            message: '该浏览器不支持自动复制',
+            type: 'warning',
+            duration: 1000
+          });
+          // 释放内存
+          clipboard.destroy()
+        })
+      },
+    }
   }
 </script>
 
 <style lang="scss" scoped>
+  @import "src/styles/home-index";
+  .cancel-share-header {
+    margin-left: -10px;
+  }
+  .table-header-icon {
+    font-size: 18px;
+  }
+  .header-font {
+    color: #606266;
+    font-size: 14px;
+    font-weight: 500;
+  }
+  /deep/.el-icon-my-export{
+    background: url('~@/assets/img/cancel-share.png') center no-repeat;
+    background-size: cover;
+  }
+  /deep/.el-icon-my-export:before{
+    content: "替";
+    font-size: 16px;
+    visibility: hidden;
+  }
+  //如果直接使用字体图片
+  //直接在before属性设置对应的content就行
+  /deep/.el-icon-my-export{
+    font-size: 16px;
+  }
+  /deep/.el-icon-my-export:before{
+    content: "\66ff";
+    font-size: 16px;
+    visibility: hidden;
+  }
 </style>