|
|
@@ -0,0 +1,344 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-row style="padding: 5px">
|
|
|
+ <span style="color: red">
|
|
|
+ 点击图片可选中要删除的图片
|
|
|
+ </span>
|
|
|
+ <span style="color: #0a84ff">
|
|
|
+ 拖拽图片可改变图片显示的顺序
|
|
|
+ </span>
|
|
|
+ </el-row>
|
|
|
+ <el-row style="padding: 5px">
|
|
|
+ <el-button
|
|
|
+ style="float: left; padding: 5px"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ type="text"
|
|
|
+ @click="onAddImage"
|
|
|
+ >添加照片</el-button>
|
|
|
+ <el-button
|
|
|
+ v-if="dragged"
|
|
|
+ style="float: left; padding: 5px"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ type="text"
|
|
|
+ @click="onSaveDragResult"
|
|
|
+ >保存拖拽</el-button>
|
|
|
+ <el-button
|
|
|
+ v-if="deleteList.length !== 0"
|
|
|
+ style="float: left; padding: 5px"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ type="text"
|
|
|
+ @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="coverImg"
|
|
|
+ :src="album.url"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </draggable>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ title="添加图片"
|
|
|
+ :visible.sync="showAddImageDialog"
|
|
|
+ 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: checkAddElement(album.fileId) }" @click="changeAddList(album.fileId)">
|
|
|
+ <el-image
|
|
|
+ lazy
|
|
|
+ fit="cover"
|
|
|
+ class="coverImg180"
|
|
|
+ :src="album.url"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </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-button
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ size="small"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ style="margin-left: 10px"
|
|
|
+ @click="onAddSelectedImage"
|
|
|
+ >
|
|
|
+ 添加选择的图片
|
|
|
+ </el-button>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import draggable from 'vuedraggable'
|
|
|
+import { editAlbum, createAlbum, getAlbumDetail, getAlbumImage } from '@/api/disk'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'DiskAlbumEdit',
|
|
|
+ components: { draggable },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ albumId: null,
|
|
|
+ // 屏幕宽度, 为了控制分页条的大小
|
|
|
+ screenWidth: document.body.clientWidth,
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 12,
|
|
|
+ totalSize: 0,
|
|
|
+ dataList: [],
|
|
|
+ // ****************************************************************************************************************
|
|
|
+ deleteList: [],
|
|
|
+ // ****************************************************************************************************************
|
|
|
+ dragged: false,
|
|
|
+ // ****************************************************************************************************************
|
|
|
+ showAddImageDialog: false,
|
|
|
+ imageList: [],
|
|
|
+ addList: [],
|
|
|
+ // ****************************************************************************************************************
|
|
|
+ showEditAlbumDialog: false,
|
|
|
+ albumImageList: [],
|
|
|
+ // ****************************************************************************************************************
|
|
|
+ showCreateAlbumDialog: false,
|
|
|
+ createAlbumForm: {
|
|
|
+ albumName: null
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 当窗口宽度改变时获取屏幕宽度
|
|
|
+ window.onresize = () => {
|
|
|
+ return () => {
|
|
|
+ window.screenWidth = document.body.clientWidth
|
|
|
+ this.screenWidth = window.screenWidth
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ const albumId = this.$route.params.albumId
|
|
|
+ if (!albumId) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ this.albumId = albumId
|
|
|
+ document.title = '管理相册'
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleCurrentChange(pageNumber) {
|
|
|
+ this.currentPage = pageNumber
|
|
|
+ this.dataList = []
|
|
|
+ this.getData()
|
|
|
+ // 回到顶部
|
|
|
+ scrollTo(0, 0)
|
|
|
+ },
|
|
|
+ getData() {
|
|
|
+ getAlbumDetail(this.albumId, this.currentPage).then(resp => {
|
|
|
+ if (resp.code === 0) {
|
|
|
+ const respData = resp.data
|
|
|
+ document.title = '管理相册 ' + respData.albumName
|
|
|
+
|
|
|
+ this.dataList = respData.diskFileList
|
|
|
+ } else {
|
|
|
+ this.$message.error(resp.msg)
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.$message.error(error.message)
|
|
|
+ }).finally(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onCreateAlbum() {
|
|
|
+ this.showCreateAlbumDialog = true
|
|
|
+ },
|
|
|
+ createAlbum() {
|
|
|
+ this.showCreateAlbumDialog = false
|
|
|
+ createAlbum(this.createAlbumForm).then(resp => {
|
|
|
+ this.$message.info(resp.msg)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getAlbum(albumId) {
|
|
|
+ const path = '/disk/album/' + albumId
|
|
|
+ console.log(path)
|
|
|
+ this.$router.push({
|
|
|
+ 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
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onAddSelectedImage() {
|
|
|
+ this.showAddImageDialog = false
|
|
|
+ if (this.albumId === 0) {
|
|
|
+ this.$message.error('albumId error')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const jsonData = {}
|
|
|
+ jsonData.albumId = this.albumId
|
|
|
+ jsonData.operation = 1
|
|
|
+ jsonData.fileIds = this.addList
|
|
|
+ this.editAlbumWrapper(jsonData)
|
|
|
+ },
|
|
|
+ editAlbumWrapper(payload) {
|
|
|
+ editAlbum(payload).then(resp => {
|
|
|
+ if (resp.code === 0) {
|
|
|
+ this.$router.go(0)
|
|
|
+ } else {
|
|
|
+ this.$message.info(resp.msg)
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.$message.error(error.message)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onDragStart() {
|
|
|
+ this.$message.info('drag start')
|
|
|
+ },
|
|
|
+ onDragEnd() {
|
|
|
+ this.$message.info('drag end')
|
|
|
+ this.dragged = true
|
|
|
+ },
|
|
|
+ onSaveDragResult() {
|
|
|
+ const jsonData = {}
|
|
|
+ jsonData.albumId = this.albumId
|
|
|
+ jsonData.operation = 2
|
|
|
+ jsonData.fileIds = this.dataList
|
|
|
+ this.editAlbumWrapper(jsonData)
|
|
|
+ },
|
|
|
+ onDeleteImage() {
|
|
|
+ this.$confirm('确定要删除选中的 ' + this.deleteList.length + ' 张图片?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.$message.info('handleDelete')
|
|
|
+ const jsonData = {}
|
|
|
+ jsonData.albumId = this.albumId
|
|
|
+ jsonData.operation = 3
|
|
|
+ jsonData.fileIds = this.deleteList
|
|
|
+ this.editAlbumWrapper(jsonData)
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ changeDeleteList(val) {
|
|
|
+ var result = this.deleteList.some(ele => ele === val)
|
|
|
+ if (!result) {
|
|
|
+ this.deleteList.push(val)
|
|
|
+ } else {
|
|
|
+ this.deleteList = this.deleteList.filter(function(ele) {
|
|
|
+ return ele !== val
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkDeleteElement(val) {
|
|
|
+ return this.deleteList.some(ele => ele === val)
|
|
|
+ },
|
|
|
+ changeAddList(val) {
|
|
|
+ var result = this.addList.some(ele => ele === val)
|
|
|
+ if (!result) {
|
|
|
+ this.addList.push(val)
|
|
|
+ } else {
|
|
|
+ this.addList = this.addList.filter(function(ele) {
|
|
|
+ return ele !== val
|
|
|
+ })
|
|
|
+ }
|
|
|
+ console.log(this.addList)
|
|
|
+ },
|
|
|
+ checkAddElement(val) {
|
|
|
+ return this.addList.some(ele => ele === val)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/*处于手机屏幕时*/
|
|
|
+@media screen and (max-width: 768px){
|
|
|
+ .coverImg {
|
|
|
+ height: 120px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.coverImg {
|
|
|
+ width: 100%;
|
|
|
+ height: 320px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.coverImg180 {
|
|
|
+ width: 100%;
|
|
|
+ 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>
|
