DiskAlbumIndex.vue

1.引入 vuedraggable 组件实现对图片的拖拽
2.使用 css 实现对图片的复选

package.json

@@ -40,6 +40,7 @@
     "vue-meta": "^2.4.0",
     "vue-router": "^3.4.5",
     "vue-simple-uploader": "^0.7.6",
+    "vuedraggable": "^2.24.3",
     "vuex": "^3.4.0"
   },
   "devDependencies": {

src/api/disk.js

@@ -12,6 +12,7 @@ const diskApi = {
   addToAlbumApi: '/api/content/disk/album/add',
   getAlbumKeyValueApi: '/api/content/disk/album/kv',
   getAlbumListApi: '/api/content/disk/album/list',
+  getAlbumImageApi: '/api/content/disk/album/image',
   getAlbumDetailApi: '/api/content/disk/album/detail',
   getCamKeyValueApi: '/api/content/disk/cam/kv',
   getCamDetailApi: '/api/content/disk/cam/detail',
@@ -69,6 +70,10 @@ export function getAlbumList() {
   return get(diskApi.getAlbumListApi)
 }
 
+export function getAlbumImage(pn) {
+  return get(diskApi.getAlbumImageApi + '?pn=' + pn)
+}
+
 export function getAlbumDetail(albumId) {
   return get(diskApi.getAlbumDetailApi + '/' + albumId)
 }

src/views/disk/DiskAlbumIndex.vue

@@ -41,12 +41,15 @@
             </div>
           </router-link>
           <div style="padding: 14px">
+            <span style="color: black">{{ album.albumName }}</span>
+            <span style="color: black">
+              <i class="el-icon-picture-outline">{{ album.num }}</i>
+            </span>
             <router-link style="text-decoration-line: none" target="_blank" :to="`/disk/album/${album.albumId}`">
-              <span style="color: black">{{ album.albumName }}</span>
-              <span style="color: black">
-                <i class="el-icon-picture-outline">{{ album.num }}</i>
-              </span>
+              <el-button style="float: right; padding: 5px" icon="el-icon-view" type="text" @click="true">查看</el-button>
             </router-link>
+            <el-button style="float: right; padding: 5px" icon="el-icon-edit" type="text" @click="onEditAlbum">管理</el-button>
+            <el-button style="float: right; padding: 5px" icon="el-icon-plus" type="text" @click="onAddImages(album.albumId)">添加</el-button>
           </div>
         </el-card>
       </el-col>
@@ -91,15 +94,99 @@
         </el-form>
       </div>
     </el-dialog>
+    <el-dialog
+      title="管理相册"
+      :visible.sync="showEditAlbumDialog"
+      width="100%"
+      center
+    >
+      <div>
+        <el-row v-if="albumImageList.length !== 0">
+          <draggable
+            v-model="dataList"
+            :scroll="true"
+            animation="500"
+            @start="onDragStart"
+            @end="onDragEnd"
+          >
+            <el-col
+              v-for="(album, index) in albumImageList"
+              :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>
+          </draggable>
+          <el-button
+            type="primary"
+            plain
+            size="small"
+            icon="el-icon-plus"
+            style="margin-left: 10px"
+            @click="onEditSubmit"
+          >
+            确定调整
+          </el-button>
+        </el-row>
+      </div>
+    </el-dialog>
+    <el-dialog
+      title="添加图片"
+      :visible.sync="showAddImagesDialog"
+      width="100%"
+      center
+    >
+      <div>
+        <el-row v-if="imageList.length !== 0">
+          <el-col
+            v-for="(album, index) in imageList"
+            :key="index"
+            :md="6"
+            :sm="12"
+            :xs="12"
+            style="padding: 5px"
+          >
+            <div :class="{ selected: checkElement(album.fileId) }" @click="changeList(album.fileId)">
+              <el-image
+                lazy
+                fit="cover"
+                class="coverImg"
+                :src="album.url"
+              />
+            </div>
+          </el-col>
+          <el-button
+            type="primary"
+            plain
+            size="small"
+            icon="el-icon-plus"
+            style="margin-left: 10px"
+            @click="onAddSelectedImages"
+          >
+            添加选择的图片到相册
+          </el-button>
+        </el-row>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-
-import { createAlbum, getAlbumList } from '@/api/disk'
+import draggable from 'vuedraggable'
+import { addToAlbum, createAlbum, getAlbumImage, getAlbumList } from '@/api/disk'
 
 export default {
   name: 'DiskAlbumIndex',
+  components: { draggable },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
@@ -109,6 +196,16 @@ export default {
       totalSize: 0,
       dataList: [],
       albumId: null,
+      // ****************************************************************************************************************
+      showAddImagesDialog: false,
+      currentAlbumId: 0,
+      imageList: [],
+      selectedImages: [],
+      // ****************************************************************************************************************
+      showEditAlbumDialog: false,
+      albumImageList: [],
+      // selectedImages: [],
+      // ****************************************************************************************************************
       showCreateAlbumDialog: false,
       createAlbumForm: {
         albumName: null
@@ -159,6 +256,64 @@ export default {
         path: path
       })
       this.$router.go(0)
+    },
+    onEditAlbum() {
+      this.showEditAlbumDialog = true
+      getAlbumImage(1).then(resp => {
+        if (resp.code === 0) {
+          this.albumImageList = resp.data.list
+        }
+      })
+    },
+    onEditSubmit() {
+      this.showEditAlbumDialog = false
+      console.log(this.albumImageList)
+    },
+    onAddImages(albumId) {
+      this.currentAlbumId = albumId
+      this.showAddImagesDialog = true
+      getAlbumImage(1).then(resp => {
+        if (resp.code === 0) {
+          this.imageList = resp.data.list
+        }
+      })
+    },
+    onAddSelectedImages() {
+      this.showAddImagesDialog = false
+      if (this.currentAlbumId === 0) {
+        this.$message.error('albumId error')
+        return
+      }
+
+      const jsonData = {}
+      jsonData.albumId = this.currentAlbumId
+      jsonData.fileIds = this.selectedImages
+      addToAlbum(jsonData).then(resp => {
+        this.$message.info(resp.msg)
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    onDragStart() {
+      this.$message.info('drag start')
+    },
+    onDragEnd() {
+      this.$message.info('drag end')
+      console.log(this.dataList)
+    },
+    changeList(val) {
+      var result = this.selectedImages.some(ele => ele === val)
+      if (!result) {
+        this.selectedImages.push(val)
+      } else {
+        this.selectedImages = this.selectedImages.filter(function(ele) {
+          return ele !== val
+        })
+      }
+      console.log(this.selectedImages)
+    },
+    checkElement(val) {
+      return this.selectedImages.some(ele => ele === val)
     }
   }
 }
@@ -174,7 +329,14 @@ export default {
 
 .coverImg {
   width: 100%;
-  height: 240px;
+  height: 180px;
   display: block;
 }
+
+.selected {
+  color: #4abe84;
+  box-shadow: 0 2px 7px 0 rgba(85, 110, 97, 0.35);
+  border-radius: 1px;
+  border: 3px solid rgba(74, 190, 132, 1);
+}
 </style>