update views/disk, 添加 el-scrollbar 滚动显示

src/views/disk/DiskAlbumEdit.vue

@@ -30,40 +30,44 @@
         @click="onDeleteImage"
       >删除图片</el-button>
     </el-row>
-    <el-row v-if="dataList.length !== 0">
-      <draggable
-        v-model="dataList"
-        :scroll="true"
-        animation="500"
-        @start="onDragStart"
-        @end="onDragEnd"
-      >
-        <el-col
-          v-for="(album, index) in dataList"
-          :key="index"
-          :md="6"
-          :sm="12"
-          :xs="12"
-          style="padding: 5px"
-        >
-          <div :class="{ selected: checkDeleteElement(album.fileId) }" @click="changeDeleteList(album.fileId)">
-            <el-image
-              lazy
-              fit="cover"
-              class="coverImg240"
-              :src="album.url"
-            />
+    <div v-loading="loading" style="height: 80vh;">
+      <el-scrollbar ref="myScrollbar" style="width: 100%; height: 100%;">
+        <el-row v-if="dataList.length !== 0">
+          <draggable
+            v-model="dataList"
+            :scroll="true"
+            animation="500"
+            @start="onDragStart"
+            @end="onDragEnd"
+          >
+            <el-col
+              v-for="(album, index) in dataList"
+              :key="index"
+              :md="6"
+              :sm="12"
+              :xs="12"
+              style="padding: 5px"
+            >
+              <div :class="{ selected: checkDeleteElement(album.fileId) }" @click="changeDeleteList(album.fileId)">
+                <el-image
+                  lazy
+                  fit="cover"
+                  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-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-row>
+      </el-scrollbar>
+    </div>
 
     <el-dialog
       title="添加图片"
@@ -113,6 +117,16 @@
           >
             添加选择的图片
           </el-button>
+          <el-button
+            type="primary"
+            plain
+            size="small"
+            icon="el-icon-check"
+            style="margin-left: 10px"
+            @click="onAddImageComplete"
+          >
+            完成添加
+          </el-button>
         </el-row>
       </div>
     </el-dialog>
@@ -135,6 +149,7 @@ export default {
       pageSize: 12,
       totalSize: 0,
       dataList: [],
+      loading: false,
       hasMore: false,
       // ****************************************************************************************************************
       deleteList: [],
@@ -179,6 +194,7 @@ export default {
       this.getData()
     },
     getData() {
+      this.loading = true
       getAlbumDetail(this.albumId, this.currentPage).then(resp => {
         if (resp.code === 0) {
           const respData = resp.data
@@ -194,6 +210,10 @@ export default {
         this.$message.error(error.message)
       }).finally(() => {
         this.loading = false
+        // 滚动条始终保持在底部
+        this.$nextTick(() => {
+          this.$refs['myScrollbar'].wrap.scrollTop = this.$refs['myScrollbar'].wrap.scrollHeight
+        })
       })
     },
     onCreateAlbum() {
@@ -215,7 +235,7 @@ export default {
     },
     handleCurrentChangeImage(pageNumber) {
       this.currentPageImage = pageNumber
-      this.dataListImage = []
+      // this.dataListImage = []
       this.getDataImage()
       // 回到顶部
       scrollTo(0, 0)
@@ -235,7 +255,6 @@ export default {
       this.getDataImage()
     },
     onAddSelectedImage() {
-      this.showAddImageDialog = false
       if (this.albumId === 0) {
         this.$message.error('albumId error')
         return
@@ -247,12 +266,20 @@ export default {
       jsonData.fileIds = this.addList
       this.editAlbumWrapper(jsonData)
     },
+    onAddImageComplete() {
+      this.showAddImageDialog = false
+    },
     editAlbumWrapper(payload) {
       editAlbum(payload).then(resp => {
-        if (resp.code === 0) {
+        /* if (resp.code === 0) {
           this.$router.go(0)
         } else {
           this.$message.info(resp.msg)
+        }*/
+        this.$message.info(resp.msg)
+        if (payload.operation === 1) {
+          this.addList = []
+          this.getDataImage()
         }
       }).catch(error => {
         this.$message.error(error.message)
@@ -283,7 +310,6 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        this.$message.info('handleDelete')
         const jsonData = {}
         jsonData.albumId = this.albumId
         jsonData.operation = 3

src/views/disk/DiskAlbumIndex.vue

@@ -109,7 +109,8 @@ export default {
       // ****************************************************************************************************************
       showCreateAlbumDialog: false,
       createAlbumForm: {
-        albumName: null
+        albumName: null,
+        fileType: 1001
       }
     }
   },

src/views/disk/DiskAlbumView.vue

@@ -1,39 +1,41 @@
 <template>
-  <div v-loading="loading">
-    <el-row v-if="dataList.length !== 0">
-      <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.url"
-          @click="showImages(index)"
-        />
-      </el-col>
-    </el-row>
-    <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 size="mini" type="text" icon="el-icon-bottom" @click="loadMore">
-          加载更多
-        </el-button>
-      </div>
-    </el-row>
+  <div v-loading="loading" style="height: 80vh;">
+    <el-scrollbar ref="myScrollbar" style="width: 100%; height: 100%;">
+      <el-row v-if="dataList.length !== 0">
+        <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.url"
+            @click="showImages(index)"
+          />
+        </el-col>
+      </el-row>
+      <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 size="mini" type="text" icon="el-icon-bottom" @click="loadMore">
+            加载更多
+          </el-button>
+        </div>
+      </el-row>
+    </el-scrollbar>
   </div>
 </template>
 
@@ -78,6 +80,10 @@ export default {
         this.$message.error(error.message)
       }).finally(() => {
         this.loading = false
+        // 滚动条始终保持在底部
+        this.$nextTick(() => {
+          this.$refs['myScrollbar'].wrap.scrollTop = this.$refs['myScrollbar'].wrap.scrollHeight
+        })
       })
     },
     loadMore() {

src/views/disk/DiskFile.vue

@@ -581,7 +581,7 @@ export default {
       for (const item of this.selectedTable) {
         fileIds.push(item.fileId)
       }
-      const jsonData = {}
+      /* const jsonData = {}
       jsonData.albumId = albumId
       jsonData.operation = 1
       jsonData.fileIds = fileIds
@@ -589,7 +589,8 @@ export default {
         this.$message.info(resp.msg)
       }).catch(error => {
         this.$message.error(error.message)
-      })
+      })*/
+      this.$message.info('添加到合集')
 
       this.showAddToAlbumUploadDialog = false
       this.toggleSelection()