更新 DiskAlbumEdit.vue 和 DiskAlbumView.vue 这两个文件合集相关的页面

src/api/disk.js

@@ -12,7 +12,7 @@ const diskApi = {
   editAlbumApi: '/api/content/disk/album/edit',
   getAlbumKeyValueApi: '/api/content/disk/album/kv',
   getAlbumListApi: '/api/content/disk/album/list',
-  getAlbumImageApi: '/api/content/disk/album/image',
+  getAlbumExcludeFilesApi: '/api/content/disk/album/exclude',
   getAlbumDetailApi: '/api/content/disk/album/detail',
   getCamKeyValueApi: '/api/content/disk/cam/kv',
   getCamDetailApi: '/api/content/disk/cam/detail',
@@ -70,8 +70,8 @@ export function getAlbumList(pn) {
   return get(diskApi.getAlbumListApi + '?pn=' + pn)
 }
 
-export function getAlbumImage(pn) {
-  return get(diskApi.getAlbumImageApi + '?pn=' + pn)
+export function getAlbumExcludeFiles(fileType, pn) {
+  return get(diskApi.getAlbumExcludeFilesApi + '?fileType=' + fileType + '&pn=' + pn)
 }
 
 export function getAlbumDetail(albumId, pn) {

src/views/disk/DiskAlbumEdit.vue

@@ -4,7 +4,7 @@
       <span style="color: red">
         点击图片可选中要删除的图片
       </span>
-      <span style="color: #0a84ff">
+      <span style="color: green">
         拖拽图片可改变图片显示的顺序
       </span>
     </el-row>
@@ -14,7 +14,7 @@
         icon="el-icon-plus"
         type="text"
         @click="onAddImage"
-      >添加照片</el-button>
+      >添加图片</el-button>
       <el-button
         v-if="dragged"
         style="float: left; padding: 5px"
@@ -50,13 +50,20 @@
             <el-image
               lazy
               fit="cover"
-              class="coverImg"
+              class="coverImg240"
               :src="album.url"
             />
           </div>
         </el-col>
       </draggable>
     </el-row>
+    <el-row>
+      <div v-if="hasMore" style="display: flex; justify-content: center;">
+        <el-button link size="mini" type="text" icon="el-icon-bottom" @click="loadMore">
+          加载更多
+        </el-button>
+      </div>
+    </el-row>
 
     <el-dialog
       title="添加图片"
@@ -65,9 +72,9 @@
       center
     >
       <div>
-        <el-row v-if="imageList.length !== 0">
+        <el-row v-if="dataListImage.length !== 0">
           <el-col
-            v-for="(album, index) in imageList"
+            v-for="(album, index) in dataListImage"
             :key="index"
             :md="6"
             :sm="12"
@@ -90,11 +97,11 @@
             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"
+            :current-page="currentPageImage"
+            :total="totalSizeImage"
+            @current-change="handleCurrentChangeImage"
+            @prev-click="handleCurrentChangeImage"
+            @next-click="handleCurrentChangeImage"
           />
           <el-button
             type="primary"
@@ -114,7 +121,7 @@
 
 <script>
 import draggable from 'vuedraggable'
-import { editAlbum, createAlbum, getAlbumDetail, getAlbumImage } from '@/api/disk'
+import { editAlbum, createAlbum, getAlbumDetail, getAlbumExcludeFiles } from '@/api/disk'
 
 export default {
   name: 'DiskAlbumEdit',
@@ -128,18 +135,19 @@ export default {
       pageSize: 12,
       totalSize: 0,
       dataList: [],
+      hasMore: false,
       // ****************************************************************************************************************
       deleteList: [],
       // ****************************************************************************************************************
       dragged: false,
       // ****************************************************************************************************************
       showAddImageDialog: false,
-      imageList: [],
+      currentPageImage: 1,
+      pageSizeImage: 12,
+      totalSizeImage: 0,
+      dataListImage: [],
       addList: [],
       // ****************************************************************************************************************
-      showEditAlbumDialog: false,
-      albumImageList: [],
-      // ****************************************************************************************************************
       showCreateAlbumDialog: false,
       createAlbumForm: {
         albumName: null
@@ -166,12 +174,9 @@ export default {
     this.getData()
   },
   methods: {
-    handleCurrentChange(pageNumber) {
-      this.currentPage = pageNumber
-      this.dataList = []
+    loadMore() {
+      this.currentPage += 1
       this.getData()
-      // 回到顶部
-      scrollTo(0, 0)
     },
     getData() {
       getAlbumDetail(this.albumId, this.currentPage).then(resp => {
@@ -179,7 +184,9 @@ export default {
           const respData = resp.data
           document.title = '管理相册 ' + respData.albumName
 
-          this.dataList = respData.diskFileList
+          this.dataList = this.dataList.concat(respData.pageList.list)
+          this.totalSize = respData.pageList.totalSize
+          this.hasMore = respData.pageList.hasNext
         } else {
           this.$message.error(resp.msg)
         }
@@ -206,26 +213,26 @@ export default {
       })
       this.$router.go(0)
     },
-    onEditAlbum() {
-      this.showEditAlbumDialog = true
-      getAlbumImage(1).then(resp => {
+    handleCurrentChangeImage(pageNumber) {
+      this.currentPageImage = pageNumber
+      this.dataListImage = []
+      this.getDataImage()
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    getDataImage() {
+      const fileType = 1001
+      getAlbumExcludeFiles(fileType, this.currentPageImage).then(resp => {
         if (resp.code === 0) {
-          this.albumImageList = resp.data.list
+          const respData = resp.data
+          this.dataListImage = respData.list
+          this.totalSizeImage = respData.totalSize
         }
       })
     },
-    onEditSubmit() {
-      this.showEditAlbumDialog = false
-    },
     onAddImage() {
       this.showAddImageDialog = true
-      getAlbumImage(this.currentPage).then(resp => {
-        if (resp.code === 0) {
-          const respData = resp.data
-          this.imageList = respData.list
-          this.totalSize = respData.totalSize
-        }
-      })
+      this.getDataImage()
     },
     onAddSelectedImage() {
       this.showAddImageDialog = false
@@ -259,10 +266,15 @@ export default {
       this.dragged = true
     },
     onSaveDragResult() {
+      var fileIds = []
+      for (const item of this.dataList) {
+        fileIds.push(item.fileId)
+      }
+
       const jsonData = {}
       jsonData.albumId = this.albumId
       jsonData.operation = 2
-      jsonData.fileIds = this.dataList
+      jsonData.fileIds = fileIds
       this.editAlbumWrapper(jsonData)
     },
     onDeleteImage() {
@@ -329,6 +341,12 @@ export default {
   display: block;
 }
 
+.coverImg240 {
+  width: 100%;
+  height: 240px;
+  display: block;
+}
+
 .coverImg180 {
   width: 100%;
   height: 180px;

src/views/disk/DiskAlbumView.vue

@@ -18,12 +18,18 @@
         />
       </el-col>
     </el-row>
-    <el-row v-if="!loading && dataList.length === 0">
-      <span style="color: #007bff">这是一个空相册, 快去添加点照片到相册中吧!</span>
+    <el-row v-if="!loading && dataList.length === 0" style="display: flex; justify-content: center;">
+      <span style="color: #007bff">
+        这是一个空相册, 快去
+        <router-link style="text-decoration-line: none; color: red" :to="`/disk/album/edit/${albumId}`">
+          添加
+        </router-link>
+        点照片到相册中吧!
+      </span>
     </el-row>
     <el-row>
       <div v-if="hasMore" style="display: flex; justify-content: center;">
-        <el-button link type="plain" icon="el-icon-bottom" @click="loadMore">
+        <el-button link size="mini" type="text" icon="el-icon-bottom" @click="loadMore">
           加载更多
         </el-button>
       </div>