|
|
@@ -1,388 +0,0 @@
|
|
|
-<template>
|
|
|
- <div>
|
|
|
- <el-row style="padding: 5px">
|
|
|
- <span style="color: red">
|
|
|
- 点击图片可选中要删除的图片
|
|
|
- </span>
|
|
|
- <span style="color: green">
|
|
|
- 拖拽图片可改变图片显示的顺序
|
|
|
- </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>
|
|
|
- <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-row>
|
|
|
- </el-scrollbar>
|
|
|
- </div>
|
|
|
-
|
|
|
- <el-dialog
|
|
|
- title="添加图片"
|
|
|
- :visible.sync="showAddImageDialog"
|
|
|
- width="100%"
|
|
|
- center
|
|
|
- >
|
|
|
- <div>
|
|
|
- <el-row v-if="dataListImage.length !== 0">
|
|
|
- <el-col
|
|
|
- v-for="(album, index) in dataListImage"
|
|
|
- :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="currentPageImage"
|
|
|
- :total="totalSizeImage"
|
|
|
- @current-change="handleCurrentChangeImage"
|
|
|
- @prev-click="handleCurrentChangeImage"
|
|
|
- @next-click="handleCurrentChangeImage"
|
|
|
- />
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- plain
|
|
|
- size="small"
|
|
|
- icon="el-icon-plus"
|
|
|
- style="margin-left: 10px"
|
|
|
- @click="onAddSelectedImage"
|
|
|
- >
|
|
|
- 添加选择的图片
|
|
|
- </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>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import draggable from 'vuedraggable'
|
|
|
-import { editAlbum, createAlbum, getAlbumDetail, getAlbumExcludeFiles } from '@/api/disk'
|
|
|
-
|
|
|
-export default {
|
|
|
- name: 'DiskAlbumEdit',
|
|
|
- components: { draggable },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- albumId: null,
|
|
|
- // 屏幕宽度, 为了控制分页条的大小
|
|
|
- screenWidth: document.body.clientWidth,
|
|
|
- currentPage: 1,
|
|
|
- pageSize: 12,
|
|
|
- totalSize: 0,
|
|
|
- dataList: [],
|
|
|
- loading: false,
|
|
|
- hasMore: false,
|
|
|
- // ****************************************************************************************************************
|
|
|
- deleteList: [],
|
|
|
- // ****************************************************************************************************************
|
|
|
- dragged: false,
|
|
|
- // ****************************************************************************************************************
|
|
|
- showAddImageDialog: false,
|
|
|
- currentPageImage: 1,
|
|
|
- pageSizeImage: 12,
|
|
|
- totalSizeImage: 0,
|
|
|
- dataListImage: [],
|
|
|
- addList: [],
|
|
|
- // ****************************************************************************************************************
|
|
|
- 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: {
|
|
|
- loadMore() {
|
|
|
- this.currentPage += 1
|
|
|
- this.getData()
|
|
|
- },
|
|
|
- getData() {
|
|
|
- this.loading = true
|
|
|
- getAlbumDetail(this.albumId, this.currentPage).then(resp => {
|
|
|
- if (resp.code === 0) {
|
|
|
- const respData = resp.data
|
|
|
- document.title = '管理相册 ' + respData.albumName
|
|
|
-
|
|
|
- this.dataList = this.dataList.concat(respData.pageList.list)
|
|
|
- this.totalSize = respData.pageList.totalSize
|
|
|
- this.hasMore = respData.pageList.hasNext
|
|
|
- } else {
|
|
|
- this.$message.error(resp.msg)
|
|
|
- }
|
|
|
- }).catch(error => {
|
|
|
- this.$message.error(error.message)
|
|
|
- }).finally(() => {
|
|
|
- this.loading = false
|
|
|
- // 滚动条始终保持在底部
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs['myScrollbar'].wrap.scrollTop = this.$refs['myScrollbar'].wrap.scrollHeight
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- 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)
|
|
|
- },
|
|
|
- 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) {
|
|
|
- const respData = resp.data
|
|
|
- this.dataListImage = respData.list
|
|
|
- this.totalSizeImage = respData.totalSize
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- onAddImage() {
|
|
|
- this.showAddImageDialog = true
|
|
|
- this.getDataImage()
|
|
|
- },
|
|
|
- onAddSelectedImage() {
|
|
|
- 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)
|
|
|
- },
|
|
|
- onAddImageComplete() {
|
|
|
- this.showAddImageDialog = false
|
|
|
- },
|
|
|
- editAlbumWrapper(payload) {
|
|
|
- editAlbum(payload).then(resp => {
|
|
|
- /* 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)
|
|
|
- })
|
|
|
- },
|
|
|
- onDragStart() {
|
|
|
- this.$message.info('drag start')
|
|
|
- },
|
|
|
- onDragEnd() {
|
|
|
- this.$message.info('drag end')
|
|
|
- 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 = fileIds
|
|
|
- this.editAlbumWrapper(jsonData)
|
|
|
- },
|
|
|
- onDeleteImage() {
|
|
|
- this.$confirm('确定要删除选中的 ' + this.deleteList.length + ' 张图片?', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- 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;
|
|
|
-}
|
|
|
-
|
|
|
-.coverImg240 {
|
|
|
- width: 100%;
|
|
|
- height: 240px;
|
|
|
- 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>
|
