update views/disk

src/api/disk.js

@@ -1,8 +1,8 @@
 import { get, post } from '@/utils/request'
 
 const diskApi = {
-  diskFileApi: '/api/content/disk/file',
-  filePreviewApi: '/api/content/disk/preview',
+  diskFileApi: '/api/content/disk/file/list',
+  filePreviewApi: '/api/content/disk/file/preview',
   createAlbumApi: '/api/content/disk/album/create',
   addToAlbumApi: '/api/content/disk/album/add',
   getAlbumKeyValueApi: '/api/content/disk/album/kv',
@@ -39,21 +39,21 @@ export function addToAlbum(data) {
 }
 
 export function getAlbumKeyValues() {
-  return post(diskApi.getAlbumKeyValueApi)
+  return get(diskApi.getAlbumKeyValueApi)
 }
 
 export function getAlbumList() {
-  return post(diskApi.getAlbumListApi)
+  return get(diskApi.getAlbumListApi)
 }
 
 export function getAlbumDetail(albumId) {
-  return post(diskApi.getAlbumDetailApi + '/' + albumId)
+  return get(diskApi.getAlbumDetailApi + '/' + albumId)
 }
 
 export function getCamKeyValue() {
-  return post(diskApi.getCamKeyValueApi)
+  return get(diskApi.getCamKeyValueApi)
 }
 
 export function getRecordByMonth(query) {
-  return post(diskApi.getCamRecordByMonthAPi, query)
+  return get(diskApi.getCamRecordByMonthAPi, query)
 }

src/router/disk.js

@@ -1,4 +1,5 @@
 const Disk = () => import('views/disk/Disk')
+const DiskAlbumIndex = () => import('views/disk/DiskAlbumIndex')
 const DiskAlbum = () => import('views/disk/DiskAlbum')
 const DiskFile = () => import('views/disk/DiskFile')
 const DiskShare = () => import('views/disk/DiskShare')
@@ -19,6 +20,12 @@ export default {
     },
     {
       path: '/disk/album',
+      name: 'DiskAlbumIndex',
+      component: DiskAlbumIndex,
+      meta: { needAuth: true }
+    },
+    {
+      path: '/disk/album/:albumId',
       name: 'DiskAlbum',
       component: DiskAlbum,
       meta: { needAuth: true }

src/views/disk/DiskAlbum.vue

@@ -1,31 +1,21 @@
 <template>
   <div>
     <el-row>
-      <el-col
-        style="padding: 5px;"
-      >
-        <el-image
-          class="img240"
-          @click.native="onCreateAlbum"
-        />
-      </el-col>
       <el-col
         v-for="(album, index) in dataList"
         :key="index"
         :md="6"
         :sm="12"
         :xs="12"
-        style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px"
+        style="padding: 5px"
       >
-        <div class="imgs">
-          <el-image
-            lazy
-            fit="cover"
-            class="coverImg"
-            :src="album.coverUrl"
-            @click="getAlbum(album.albumId)"
-          />
-        </div>
+        <el-image
+          lazy
+          fit="cover"
+          class="coverImg"
+          :src="album.url"
+          @click="showImages(index)"
+        />
       </el-col>
     </el-row>
     <el-row>
@@ -41,40 +31,12 @@
         @next-click="handleCurrentChange"
       />
     </el-row>
-
-    <el-dialog
-      :visible.sync="showCreateAlbumDialog"
-      width="30%"
-      center
-    >
-      <div>
-        <el-form ref="createAlbumForm" :model="createAlbumForm">
-          <el-form-item label="相册名" label-width="120px" prop="title">
-            <el-input
-              v-model="createAlbumForm.albumName"
-              style="margin-left: 5px"
-              clearable
-            />
-          </el-form-item>
-          <el-button
-            type="primary"
-            plain
-            size="small"
-            icon="el-icon-plus"
-            style="margin-left: 10px"
-            @click="createAlbum"
-          >
-            创建相册
-          </el-button>
-        </el-form>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
 
-import { createAlbum } from '@/api/disk'
+import { createAlbum, getAlbumDetail } from '@/api/disk'
 
 export default {
   name: 'DiskAlbum',
@@ -103,17 +65,26 @@ export default {
     }
   },
   created() {
-    this.getData()
+    const albumId = this.$route.params.albumId
+    if (albumId === undefined) {
+      return
+    }
+    this.getData(albumId)
   },
   methods: {
     handleCurrentChange(pageNumber) {
       this.currentPage = pageNumber
       this.dataList = []
-      this.getData()
+      this.getData(albumId)
       // 回到顶部
       scrollTo(0, 0)
     },
-    getData() {
+    getData(albumId) {
+      getAlbumDetail(albumId).then(resp => {
+        if (resp.code === 0) {
+          this.dataList = resp.data.list
+        }
+      })
     },
     onCreateAlbum() {
       this.showCreateAlbumDialog = true
@@ -124,14 +95,42 @@ export default {
         this.$message.info(resp.msg)
       })
     },
-    getAlbum(albumId) {
-      this.$message.info('get ' + albumId)
+    showImages(index) {
+      const imageUrls = []
+      for (const item of this.dataList) {
+        imageUrls.push(item.url)
+      }
+      this.$viewerApi({
+        images: imageUrls,
+        options: {
+          initialViewIndex: index,
+          movable: true,
+          fullscreen: false,
+          keyboard: true
+        }
+      })
     }
   }
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px){
+  .coverImg {
+    height: 120px !important;
+  }
+}
+
+.coverImg {
+  width: 100%;
+  height: 320px;
+  display: block;
+}
+
+.imgs {
+  position: relative;
+}
 .img320 {
   width: 320px;
   height: 240px

src/views/disk/DiskAlbumIndex.vue

@@ -0,0 +1,166 @@
+<template>
+  <div>
+    <el-row>
+      <el-col
+        :md="6"
+        :sm="12"
+        :xs="12"
+        style="padding: 5px;"
+      >
+        <el-image
+          fit="cover"
+          class="coverImg"
+          @click.native="onCreateAlbum"
+        />
+      </el-col>
+      <el-col
+        v-for="(album, index) in dataList"
+        :key="index"
+        :md="6"
+        :sm="12"
+        :xs="12"
+        style="padding: 5px"
+      >
+        <el-image
+          lazy
+          fit="cover"
+          class="coverImg"
+          :src="album.coverUrl"
+          @click="getAlbum(album.albumId)"
+        />
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-pagination
+        :small="screenWidth <= 768"
+        hide-on-single-page
+        layout="prev, pager, next"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        :total="totalSize"
+        @current-change="handleCurrentChange"
+        @prev-click="handleCurrentChange"
+        @next-click="handleCurrentChange"
+      />
+    </el-row>
+
+    <el-dialog
+      :visible.sync="showCreateAlbumDialog"
+      width="30%"
+      center
+    >
+      <div>
+        <el-form ref="createAlbumForm" :model="createAlbumForm">
+          <el-form-item label="相册名" label-width="120px" prop="title">
+            <el-input
+              v-model="createAlbumForm.albumName"
+              style="margin-left: 5px"
+              clearable
+            />
+          </el-form-item>
+          <el-button
+            type="primary"
+            plain
+            size="small"
+            icon="el-icon-plus"
+            style="margin-left: 10px"
+            @click="createAlbum"
+          >
+            创建相册
+          </el-button>
+        </el-form>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+import { createAlbum, getAlbumList } from '@/api/disk'
+
+export default {
+  name: 'DiskAlbumIndex',
+  data() {
+    return {
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 12,
+      totalSize: 0,
+      dataList: [],
+      albumId: null,
+      showCreateAlbumDialog: false,
+      createAlbumForm: {
+        albumName: null
+      }
+    }
+  },
+  mounted() {
+    // 当窗口宽度改变时获取屏幕宽度
+    window.onresize = () => {
+      return () => {
+        window.screenWidth = document.body.clientWidth
+        this.screenWidth = window.screenWidth
+      }
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    handleCurrentChange(pageNumber) {
+      this.currentPage = pageNumber
+      this.dataList = []
+      this.getData()
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    getData() {
+      getAlbumList().then(resp => {
+        if (resp.code === 0) {
+          this.dataList = resp.data
+        }
+      })
+    },
+    onCreateAlbum() {
+      this.showCreateAlbumDialog = true
+    },
+    createAlbum() {
+      this.showCreateAlbumDialog = false
+      createAlbum(this.createAlbumForm).then(resp => {
+        this.$message.info(resp.msg)
+      })
+    },
+    getAlbum(albumId) {
+      this.$router.push({
+        path: '/disk/album/' + albumId
+      })
+      this.$router.go(0)
+    }
+  }
+}
+</script>
+
+<style scoped>
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px){
+  .coverImg {
+    height: 120px !important;
+  }
+}
+
+.coverImg {
+  width: 100%;
+  height: 320px;
+  display: block;
+}
+
+.img320 {
+  width: 320px;
+  height: 240px
+}
+.img240 {
+  width: 240px;
+  height: 180px
+}
+</style>

src/views/disk/DiskFile.vue

@@ -1,9 +1,7 @@
 <template>
   <div style="padding-right: 5px">
     <el-row style="padding: 5px">
-      <el-dropdown style="padding-right: 5px">
-        <el-button size="small" type="primary" icon="el-icon-upload" round @click="onClickUpload">上传</el-button>
-      </el-dropdown>
+      <el-button size="small" type="primary" icon="el-icon-upload" round @click="onClickUpload">上传</el-button>
       <el-button size="small" type="primary" icon="el-icon-folder-add" round @click="onCreateFolder">新建文件夹</el-button>
       <el-input
         v-model="inputData"
@@ -26,15 +24,6 @@
         >
           {{ item.name }}
         </el-breadcrumb-item>
-        <!--<el-breadcrumb-item style="padding: 1px" :to="{ path: '/disk/file' }">文件夹2</el-breadcrumb-item>
-        <el-breadcrumb-item style="padding: 1px" :to="{ path: '/disk/file' }">文件夹3</el-breadcrumb-item>
-        <el-breadcrumb-item style="padding: 1px" :to="{ path: '/disk/file' }">文件夹4</el-breadcrumb-item>
-        <el-breadcrumb-item style="padding: 1px" :to="{ path: '/disk/file' }">文件夹5</el-breadcrumb-item>
-        <el-breadcrumb-item style="padding: 1px" :to="{ path: '/disk/file' }">文件夹6</el-breadcrumb-item>
-        <el-breadcrumb-item style="padding: 1px" :to="{ path: '/disk/file' }">文件夹7</el-breadcrumb-item>
-        <el-breadcrumb-item style="padding: 1px" :to="{ path: '/disk/file' }">文件夹8</el-breadcrumb-item>
-        <el-breadcrumb-item style="padding: 1px" :to="{ path: '/disk/file' }">文件夹9</el-breadcrumb-item>
-        <el-breadcrumb-item style="padding: 1px" :to="{ path: '/disk/file' }">文件夹10</el-breadcrumb-item>-->
       </el-breadcrumb>
       <el-divider />
       <el-table
@@ -75,7 +64,7 @@
         />
       </el-table>
       <div style="margin-top: 20px">
-        <el-button v-if="selectedTable.length !== 0" @click="addToAlbum">添加到相册</el-button>
+        <el-button v-if="selectedTable.length !== 0" @click="addToAlbum">添加 {{ selectedTable.length }} 到相册</el-button>
       </div>
       <el-pagination
         background
@@ -198,6 +187,34 @@
         </uploader>
       </div>
     </el-dialog>
+    <el-dialog
+      :visible.sync="showAddToAlbumUploadDialog"
+      width="50%"
+      center
+    >
+      <el-table
+        :data="albumKeyValues"
+        :show-header="true"
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="value"
+          label="相册 ID"
+        />
+        <el-table-column
+          prop="label"
+          label="相册名"
+        />
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="onAddToAlbum(scope.row)"
+            >选择</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
   </div>
 </template>
 
@@ -222,14 +239,9 @@ export default {
       fileDetail: null,
       fileType: 0,
       videoProp: null,
-      pathList: [
-        { path: '/disk', name: '全部文件' },
-        { path: '/disk?path=/1', name: '1' },
-        { path: '/disk?path=/1/2', name: '2' },
-        { path: '/disk?path=/1/2/3', name: '3' }
-      ],
+      pathList: [],
       queryForm: {
-        pn: this.currentPage,
+        pn: 1,
         path: '/',
         fileType: null
       },
@@ -265,7 +277,7 @@ export default {
     }
 
     const path = this.$route.query.path
-    if (path === undefined) {
+    if (path !== undefined) {
       this.queryForm.path = path
     }
     document.title = '所有文件'
@@ -392,12 +404,21 @@ export default {
       this.fileType = row.fileType
       if (this.fileType === 1000) {
         const filename = row.filename
-        const nextPath = this.pathList[this.pathList.length - 1].path + '/' + filename
-        console.log(nextPath)
-        this.currentPage = 1
-        this.queryForm.pn = this.currentPage
-        this.queryForm.path = '/pv'
-        this.getData()
+        const url = this.pathList[this.pathList.length - 1].path
+        const arr = url.split('?')
+        let path = ''
+        if (arr.length === 1) {
+          path = '/' + filename
+        } else {
+          path = arr[1].split('=')[1] + '/' + filename
+        }
+        this.$router.push({
+          path: '/disk',
+          query: {
+            path: path
+          }
+        })
+        this.$router.go(0)
       } else {
         getFileDetail(row.fileId).then(resp => {
           if (resp.code === 0) {
@@ -437,11 +458,11 @@ export default {
 
           this.dataList = pageList.list
           this.totalSize = pageList.totalSize
-          if (this.pathList.length === 0) {
+          if (namePathList.length === 0) {
             this.pathList.push({ path: '/disk', name: '全部文件' })
           } else {
             for (const namePath of namePathList) {
-              this.pathList.push({ path: '/disk?path=' + namePath.path, name: namePath.name })
+              this.pathList.push({ path: '/disk?path=' + namePath.path, name: namePath.filename })
             }
           }
         }
@@ -456,13 +477,24 @@ export default {
       getAlbumKeyValues().then(resp => {
         if (resp.code === 0) {
           this.albumKeyValues = resp.data
+          this.showAddToAlbumUploadDialog = true
         }
       })
-
-      console.log(this.selectedTable)
+    },
+    onAddToAlbum(row) {
+      const albumId = row.value
+      const fileIds = []
+      for (const item of this.selectedTable) {
+        fileIds.push(item.fileId)
+      }
       const jsonData = {}
+      jsonData.albumId = albumId
+      jsonData.fileIds = fileIds
       addToAlbum(jsonData).then(resp => {
         this.$message.info(resp.msg)
+      }).finally(() => {
+        this.showAddToAlbumUploadDialog = false
+        this.selectedTable = []
       })
     },
     onSearchFile() {