|
|
|
|
@ -1,103 +1,139 @@
|
|
|
|
|
<template>
|
|
|
|
|
<el-card class="main-card">
|
|
|
|
|
<!-- 页面标题，使用当前路由名称 -->
|
|
|
|
|
<div class="title">{{ this.$route.name }}</div>
|
|
|
|
|
|
|
|
|
|
<!-- 相册信息区域 -->
|
|
|
|
|
<div class="album-info">
|
|
|
|
|
<!-- 相册封面图片 -->
|
|
|
|
|
<el-image fit="cover" class="album-cover" :src="albumInfo.albumCover" />
|
|
|
|
|
|
|
|
|
|
<!-- 相册详情信息 -->
|
|
|
|
|
<div class="album-detail">
|
|
|
|
|
<div style="margin-bottom: 0.6rem">
|
|
|
|
|
<!-- 相册名称 -->
|
|
|
|
|
<span class="album-name">{{ albumInfo.albumName }}</span>
|
|
|
|
|
<!-- 照片数量 -->
|
|
|
|
|
<span class="photo-count">{{ albumInfo.photoCount }}张</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<!-- 相册描述（存在时显示） -->
|
|
|
|
|
<span v-if="albumInfo.albumDesc" class="album-desc">
|
|
|
|
|
{{ albumInfo.albumDesc }}
|
|
|
|
|
</span>
|
|
|
|
|
<!-- 上传照片按钮，点击打开上传弹窗 -->
|
|
|
|
|
<el-button icon="el-icon-picture" type="primary" size="small" @click="uploadPhoto = true">
|
|
|
|
|
上传照片
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 操作区域：全选和批量操作按钮 -->
|
|
|
|
|
<div class="operation">
|
|
|
|
|
<div class="all-check">
|
|
|
|
|
<!-- 全选复选框，indeterminate表示半选状态 -->
|
|
|
|
|
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">
|
|
|
|
|
全选
|
|
|
|
|
</el-checkbox>
|
|
|
|
|
<!-- 显示已选择的照片数量 -->
|
|
|
|
|
<div class="check-count">已选择{{ selectphotoIds.length }}张</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 批量移动按钮：将选中照片移动到其他相册，选择为空时禁用 -->
|
|
|
|
|
<el-button
|
|
|
|
|
type="success"
|
|
|
|
|
@click="movePhoto = true"
|
|
|
|
|
:disabled="selectphotoIds.length == 0"
|
|
|
|
|
size="small"
|
|
|
|
|
icon="el-icon-deleteItem">
|
|
|
|
|
type="success"
|
|
|
|
|
@click="movePhoto = true"
|
|
|
|
|
:disabled="selectphotoIds.length == 0"
|
|
|
|
|
size="small"
|
|
|
|
|
icon="el-icon-deleteItem">
|
|
|
|
|
移动到
|
|
|
|
|
</el-button>
|
|
|
|
|
|
|
|
|
|
<!-- 批量删除按钮：将选中照片移至回收站，选择为空时禁用 -->
|
|
|
|
|
<el-button
|
|
|
|
|
type="danger"
|
|
|
|
|
@click="batchDeletePhoto = true"
|
|
|
|
|
:disabled="selectphotoIds.length == 0"
|
|
|
|
|
size="small"
|
|
|
|
|
icon="el-icon-deleteItem">
|
|
|
|
|
type="danger"
|
|
|
|
|
@click="batchDeletePhoto = true"
|
|
|
|
|
:disabled="selectphotoIds.length == 0"
|
|
|
|
|
size="small"
|
|
|
|
|
icon="el-icon-deleteItem">
|
|
|
|
|
批量删除
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 照片列表容器，加载状态时显示loading -->
|
|
|
|
|
<el-row class="photo-container" :gutter="10" v-loading="loading">
|
|
|
|
|
<!-- 当相册为空时显示空状态 -->
|
|
|
|
|
<el-empty v-if="photos.length == 0" description="暂无照片" />
|
|
|
|
|
|
|
|
|
|
<!-- 复选框组：用于选择照片进行批量操作 -->
|
|
|
|
|
<el-checkbox-group v-model="selectphotoIds" @change="handleCheckedPhotoChange">
|
|
|
|
|
<!-- 遍历照片列表生成照片项 -->
|
|
|
|
|
<el-col :md="4" v-for="item of photos" :key="item.id">
|
|
|
|
|
<el-checkbox :label="item.id">
|
|
|
|
|
<div class="photo-item">
|
|
|
|
|
<!-- 照片操作菜单（更多按钮） -->
|
|
|
|
|
<div class="photo-opreation">
|
|
|
|
|
<el-dropdown @command="handleCommand">
|
|
|
|
|
<i class="el-icon-more" style="color: #fff" />
|
|
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
|
|
<!-- 编辑照片信息的下拉项 -->
|
|
|
|
|
<el-dropdown-item :command="JSON.stringify(item)">
|
|
|
|
|
<i class="el-icon-edit" />编辑
|
|
|
|
|
</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 照片显示，支持预览 -->
|
|
|
|
|
<el-image fit="cover" class="photo-img" :src="item.photoSrc" :preview-photoSrc-list="photos" />
|
|
|
|
|
<!-- 照片名称 -->
|
|
|
|
|
<div class="photo-name">{{ item.photoName }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-checkbox>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-checkbox-group>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<!-- 分页组件 -->
|
|
|
|
|
<el-pagination
|
|
|
|
|
:hide-on-single-page="true"
|
|
|
|
|
class="pagination-container"
|
|
|
|
|
@current-change="currentChange"
|
|
|
|
|
:current-page="current"
|
|
|
|
|
:page-size="size"
|
|
|
|
|
:total="count"
|
|
|
|
|
layout="prev, pager, next" />
|
|
|
|
|
:hide-on-single-page="true"
|
|
|
|
|
class="pagination-container"
|
|
|
|
|
@current-change="currentChange"
|
|
|
|
|
:current-page="current"
|
|
|
|
|
:page-size="size"
|
|
|
|
|
:total="count"
|
|
|
|
|
layout="prev, pager, next" />
|
|
|
|
|
|
|
|
|
|
<!-- 上传照片弹窗 -->
|
|
|
|
|
<el-dialog :visible.sync="uploadPhoto" width="70%" top="10vh">
|
|
|
|
|
<div class="dialog-title-container" slot="title">上传照片</div>
|
|
|
|
|
<div class="upload-container">
|
|
|
|
|
<!-- 已选择文件列表模式（当有文件时显示） -->
|
|
|
|
|
<el-upload
|
|
|
|
|
v-show="uploads.length > 0"
|
|
|
|
|
action="/api/admin/photos/upload"
|
|
|
|
|
list-type="picture-card"
|
|
|
|
|
:file-list="uploads"
|
|
|
|
|
multiple
|
|
|
|
|
:headers="headers"
|
|
|
|
|
:before-upload="beforeUpload"
|
|
|
|
|
:on-success="upload"
|
|
|
|
|
:on-remove="handleRemove">
|
|
|
|
|
<i class="el-icon-plus" />
|
|
|
|
|
</el-upload>
|
|
|
|
|
<div class="upload">
|
|
|
|
|
<el-upload
|
|
|
|
|
v-show="uploads.length == 0"
|
|
|
|
|
drag
|
|
|
|
|
v-show="uploads.length > 0"
|
|
|
|
|
action="/api/admin/photos/upload"
|
|
|
|
|
list-type="picture-card"
|
|
|
|
|
:file-list="uploads"
|
|
|
|
|
multiple
|
|
|
|
|
:headers="headers"
|
|
|
|
|
:before-upload="beforeUpload"
|
|
|
|
|
:on-success="upload"
|
|
|
|
|
:show-file-list="false">
|
|
|
|
|
:on-remove="handleRemove">
|
|
|
|
|
<i class="el-icon-plus" />
|
|
|
|
|
</el-upload>
|
|
|
|
|
|
|
|
|
|
<!-- 拖拽上传模式（当无文件时显示） -->
|
|
|
|
|
<div class="upload">
|
|
|
|
|
<el-upload
|
|
|
|
|
v-show="uploads.length == 0"
|
|
|
|
|
drag
|
|
|
|
|
action="/api/admin/photos/upload"
|
|
|
|
|
multiple
|
|
|
|
|
:headers="headers"
|
|
|
|
|
:before-upload="beforeUpload"
|
|
|
|
|
:on-success="upload"
|
|
|
|
|
:show-file-list="false">
|
|
|
|
|
<i class="el-icon-upload"></i>
|
|
|
|
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
|
|
|
|
<div class="el-upload__tip" slot="tip">支持上传jpg/png文件</div>
|
|
|
|
|
@ -106,6 +142,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div slot="footer">
|
|
|
|
|
<div class="upload-footer">
|
|
|
|
|
<!-- 显示已上传的照片数量 -->
|
|
|
|
|
<div class="upload-count">共上传{{ uploads.length }}张照片</div>
|
|
|
|
|
<div style="margin-left: auto">
|
|
|
|
|
<el-button @click="uploadPhoto = false">取 消</el-button>
|
|
|
|
|
@ -114,6 +151,8 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
<!-- 编辑照片信息弹窗 -->
|
|
|
|
|
<el-dialog :visible.sync="editPhoto" width="30%">
|
|
|
|
|
<div class="dialog-title-container" slot="title">修改信息</div>
|
|
|
|
|
<el-form label-width="80px" size="medium" :model="photoForm">
|
|
|
|
|
@ -129,6 +168,8 @@
|
|
|
|
|
<el-button type="primary" @click="updatePhoto"> 确 定 </el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
<!-- 批量删除确认弹窗 -->
|
|
|
|
|
<el-dialog :visible.sync="batchDeletePhoto" width="30%">
|
|
|
|
|
<div class="dialog-title-container" slot="title"><i class="el-icon-warning" style="color: #ff9900" />提示</div>
|
|
|
|
|
<div style="font-size: 1rem">是否删除选中照片？</div>
|
|
|
|
|
@ -137,13 +178,19 @@
|
|
|
|
|
<el-button type="primary" @click="updatePhotoDelete(null)"> 确 定 </el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
<!-- 移动照片弹窗（选择目标相册） -->
|
|
|
|
|
<el-dialog :visible.sync="movePhoto" width="30%">
|
|
|
|
|
<div class="dialog-title-container" slot="title">移动照片</div>
|
|
|
|
|
<!-- 当没有其他相册时显示空状态 -->
|
|
|
|
|
<el-empty v-if="albumList.length < 2" description="暂无其他相册" />
|
|
|
|
|
|
|
|
|
|
<!-- 相册选择表单（当存在其他相册时显示） -->
|
|
|
|
|
<el-form v-else label-width="80px" size="medium" :model="photoForm">
|
|
|
|
|
<el-radio-group v-model="albumId">
|
|
|
|
|
<div class="album-check-item">
|
|
|
|
|
<template v-for="item of albumList">
|
|
|
|
|
<!-- 排除当前相册，只显示其他相册选项 -->
|
|
|
|
|
<el-radio v-if="item.id != albumInfo.id" :key="item.id" :label="item.id" style="margin-bottom: 1rem">
|
|
|
|
|
<div class="album-check">
|
|
|
|
|
<el-image fit="cover" class="album-check-cover" :src="item.albumCover" />
|
|
|
|
|
@ -163,163 +210,186 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// 导入图片压缩工具
|
|
|
|
|
import * as imageConversion from 'image-conversion'
|
|
|
|
|
export default {
|
|
|
|
|
// 组件创建时初始化数据
|
|
|
|
|
created() {
|
|
|
|
|
// 获取当前相册ID
|
|
|
|
|
this.albumId = this.$route.params.albumId
|
|
|
|
|
// 从状态管理中获取分页状态（保持分页位置）
|
|
|
|
|
if (this.albumId == this.$store.state.pageState.photo.albumId) {
|
|
|
|
|
this.current = this.$store.state.pageState.photo.current
|
|
|
|
|
} else {
|
|
|
|
|
this.current = 1
|
|
|
|
|
// 更新状态管理中的分页信息
|
|
|
|
|
this.$store.commit('updatePhotoPageState', {
|
|
|
|
|
albumId: this.$route.params.albumId,
|
|
|
|
|
current: this.current
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
// 加载相册信息、相册列表和照片列表
|
|
|
|
|
this.getAlbumInfo()
|
|
|
|
|
this.listAlbums()
|
|
|
|
|
this.listPhotos()
|
|
|
|
|
},
|
|
|
|
|
data: function () {
|
|
|
|
|
return {
|
|
|
|
|
loading: true,
|
|
|
|
|
checkAll: false,
|
|
|
|
|
isIndeterminate: false,
|
|
|
|
|
uploadPhoto: false,
|
|
|
|
|
editPhoto: false,
|
|
|
|
|
movePhoto: false,
|
|
|
|
|
batchDeletePhoto: false,
|
|
|
|
|
uploads: [],
|
|
|
|
|
photos: [],
|
|
|
|
|
photoIds: [],
|
|
|
|
|
selectphotoIds: [],
|
|
|
|
|
albumList: [],
|
|
|
|
|
albumInfo: {
|
|
|
|
|
loading: true, // 加载状态标识
|
|
|
|
|
checkAll: false, // 全选框选中状态
|
|
|
|
|
isIndeterminate: false, // 全选框半选状态
|
|
|
|
|
uploadPhoto: false, // 上传照片弹窗显示状态
|
|
|
|
|
editPhoto: false, // 编辑照片弹窗显示状态
|
|
|
|
|
movePhoto: false, // 移动照片弹窗显示状态
|
|
|
|
|
batchDeletePhoto: false, // 批量删除弹窗显示状态
|
|
|
|
|
uploads: [], // 上传的照片列表
|
|
|
|
|
photos: [], // 当前相册的照片列表
|
|
|
|
|
photoIds: [], // 所有照片ID集合（用于全选）
|
|
|
|
|
selectphotoIds: [], // 选中的照片ID集合
|
|
|
|
|
albumList: [], // 相册列表（用于移动照片时选择目标相册）
|
|
|
|
|
albumInfo: { // 当前相册信息
|
|
|
|
|
id: null,
|
|
|
|
|
albumName: '',
|
|
|
|
|
albumDesc: '',
|
|
|
|
|
albumCover: '',
|
|
|
|
|
photoCount: 0
|
|
|
|
|
},
|
|
|
|
|
photoForm: {
|
|
|
|
|
photoForm: { // 照片表单（用于编辑照片信息）
|
|
|
|
|
id: null,
|
|
|
|
|
photoName: '',
|
|
|
|
|
photoDesc: ''
|
|
|
|
|
},
|
|
|
|
|
albumId: null,
|
|
|
|
|
current: 1,
|
|
|
|
|
size: 18,
|
|
|
|
|
count: 0,
|
|
|
|
|
headers: { Authorization: 'Bearer ' + sessionStorage.getItem('token') }
|
|
|
|
|
albumId: null, // 当前相册ID
|
|
|
|
|
current: 1, // 当前页码
|
|
|
|
|
size: 18, // 每页条数
|
|
|
|
|
count: 0, // 总条数
|
|
|
|
|
headers: { Authorization: 'Bearer ' + sessionStorage.getItem('token') } // 请求头（包含认证信息）
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 获取当前相册详情信息
|
|
|
|
|
getAlbumInfo() {
|
|
|
|
|
this.axios.get('/api/admin/photos/albums/' + this.$route.params.albumId + '/info').then(({ data }) => {
|
|
|
|
|
this.albumInfo = data.data
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 获取所有相册列表（用于移动照片）
|
|
|
|
|
listAlbums() {
|
|
|
|
|
this.axios.get('/api/admin/photos/albums/info').then(({ data }) => {
|
|
|
|
|
this.albumList = data.data
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 获取当前相册的照片列表
|
|
|
|
|
listPhotos() {
|
|
|
|
|
this.axios
|
|
|
|
|
.get('/api/admin/photos', {
|
|
|
|
|
params: {
|
|
|
|
|
current: this.current,
|
|
|
|
|
size: this.size,
|
|
|
|
|
albumId: this.$route.params.albumId,
|
|
|
|
|
isDelete: 0
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.then(({ data }) => {
|
|
|
|
|
this.photos = data.data.records
|
|
|
|
|
this.count = data.data.count
|
|
|
|
|
this.loading = false
|
|
|
|
|
})
|
|
|
|
|
.get('/api/admin/photos', {
|
|
|
|
|
params: {
|
|
|
|
|
current: this.current, // 当前页
|
|
|
|
|
size: this.size, // 每页条数
|
|
|
|
|
albumId: this.$route.params.albumId, // 当前相册ID
|
|
|
|
|
isDelete: 0 // 0表示查询未删除的照片
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.then(({ data }) => {
|
|
|
|
|
this.photos = data.data.records // 照片列表数据
|
|
|
|
|
this.count = data.data.count // 总条数
|
|
|
|
|
this.loading = false // 关闭加载状态
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 页码变化时触发
|
|
|
|
|
currentChange(current) {
|
|
|
|
|
this.current = current
|
|
|
|
|
// 更新状态管理中的分页信息
|
|
|
|
|
this.$store.commit('updatePhotoPageState', {
|
|
|
|
|
albumId: this.$route.params.albumId,
|
|
|
|
|
current: this.current
|
|
|
|
|
})
|
|
|
|
|
this.listPhotos()
|
|
|
|
|
this.listPhotos() // 重新加载照片列表
|
|
|
|
|
},
|
|
|
|
|
// 保存上传的照片（将上传的照片关联到当前相册）
|
|
|
|
|
savePhotos() {
|
|
|
|
|
var photoUrls = []
|
|
|
|
|
// 收集上传成功的照片URL
|
|
|
|
|
this.uploads.forEach((item) => {
|
|
|
|
|
photoUrls.push(item.url)
|
|
|
|
|
})
|
|
|
|
|
this.axios
|
|
|
|
|
.post('/api/admin/photos', {
|
|
|
|
|
albumId: this.$route.params.albumId,
|
|
|
|
|
photoUrls: photoUrls
|
|
|
|
|
})
|
|
|
|
|
.then(({ data }) => {
|
|
|
|
|
if (data.flag) {
|
|
|
|
|
this.$notify.success({
|
|
|
|
|
title: '成功',
|
|
|
|
|
message: data.message
|
|
|
|
|
})
|
|
|
|
|
this.uploads = []
|
|
|
|
|
this.listPhotos()
|
|
|
|
|
this.getAlbumInfo()
|
|
|
|
|
} else {
|
|
|
|
|
this.$notify.error({
|
|
|
|
|
title: '失败',
|
|
|
|
|
message: data.message
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.uploadPhoto = false
|
|
|
|
|
.post('/api/admin/photos', {
|
|
|
|
|
albumId: this.$route.params.albumId, // 当前相册ID
|
|
|
|
|
photoUrls: photoUrls // 照片URL列表
|
|
|
|
|
})
|
|
|
|
|
.then(({ data }) => {
|
|
|
|
|
if (data.flag) {
|
|
|
|
|
// 操作成功提示
|
|
|
|
|
this.$notify.success({
|
|
|
|
|
title: '成功',
|
|
|
|
|
message: data.message
|
|
|
|
|
})
|
|
|
|
|
this.uploads = [] // 清空上传列表
|
|
|
|
|
this.listPhotos() // 重新加载照片列表
|
|
|
|
|
this.getAlbumInfo() // 更新相册信息（照片数量变化）
|
|
|
|
|
} else {
|
|
|
|
|
// 操作失败提示
|
|
|
|
|
this.$notify.error({
|
|
|
|
|
title: '失败',
|
|
|
|
|
message: data.message
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.uploadPhoto = false // 关闭上传弹窗
|
|
|
|
|
},
|
|
|
|
|
// 更新照片信息（名称和描述）
|
|
|
|
|
updatePhoto() {
|
|
|
|
|
// 校验照片名称不能为空
|
|
|
|
|
if (this.photoForm.photoName.trim() == '') {
|
|
|
|
|
this.$message.error('照片名称不能为空')
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
this.axios.put('/api/admin/photos', this.photoForm).then(({ data }) => {
|
|
|
|
|
if (data.flag) {
|
|
|
|
|
// 操作成功提示
|
|
|
|
|
this.$notify.success({
|
|
|
|
|
title: '成功',
|
|
|
|
|
message: data.message
|
|
|
|
|
})
|
|
|
|
|
this.listPhotos()
|
|
|
|
|
this.listPhotos() // 重新加载照片列表
|
|
|
|
|
} else {
|
|
|
|
|
// 操作失败提示
|
|
|
|
|
this.$notify.error({
|
|
|
|
|
title: '失败',
|
|
|
|
|
message: data.message
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
this.editPhoto = false
|
|
|
|
|
this.editPhoto = false // 关闭编辑弹窗
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 移动照片到目标相册
|
|
|
|
|
updatePhotoAlbum() {
|
|
|
|
|
this.axios
|
|
|
|
|
.put('/api/admin/photos/album', {
|
|
|
|
|
albumId: this.albumId,
|
|
|
|
|
photoIds: this.selectphotoIds
|
|
|
|
|
})
|
|
|
|
|
.then(({ data }) => {
|
|
|
|
|
if (data.flag) {
|
|
|
|
|
this.$notify.success({
|
|
|
|
|
title: '成功',
|
|
|
|
|
message: data.message
|
|
|
|
|
})
|
|
|
|
|
this.getAlbumInfo()
|
|
|
|
|
this.listPhotos()
|
|
|
|
|
} else {
|
|
|
|
|
this.$notify.error({
|
|
|
|
|
title: '失败',
|
|
|
|
|
message: data.message
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
this.movePhoto = false
|
|
|
|
|
})
|
|
|
|
|
.put('/api/admin/photos/album', {
|
|
|
|
|
albumId: this.albumId, // 目标相册ID
|
|
|
|
|
photoIds: this.selectphotoIds // 要移动的照片ID集合
|
|
|
|
|
})
|
|
|
|
|
.then(({ data }) => {
|
|
|
|
|
if (data.flag) {
|
|
|
|
|
// 操作成功提示
|
|
|
|
|
this.$notify.success({
|
|
|
|
|
title: '成功',
|
|
|
|
|
message: data.message
|
|
|
|
|
})
|
|
|
|
|
this.getAlbumInfo() // 更新当前相册信息（照片数量减少）
|
|
|
|
|
this.listPhotos() // 重新加载照片列表
|
|
|
|
|
} else {
|
|
|
|
|
// 操作失败提示
|
|
|
|
|
this.$notify.error({
|
|
|
|
|
title: '失败',
|
|
|
|
|
message: data.message
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
this.movePhoto = false // 关闭移动弹窗
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 移除上传的照片（从上传列表中删除）
|
|
|
|
|
handleRemove(file) {
|
|
|
|
|
this.uploads.forEach((item, index) => {
|
|
|
|
|
if (item.url == file.url) {
|
|
|
|
|
@ -327,57 +397,75 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 照片上传成功回调
|
|
|
|
|
upload(response) {
|
|
|
|
|
this.uploads.push({ url: response.data })
|
|
|
|
|
this.uploads.push({ url: response.data }) // 将上传成功的照片URL添加到上传列表
|
|
|
|
|
},
|
|
|
|
|
// 上传前处理（压缩图片）
|
|
|
|
|
beforeUpload(file) {
|
|
|
|
|
return new Promise((resolve) => {
|
|
|
|
|
// 如果文件大小小于限制，直接上传
|
|
|
|
|
if (file.size / 1024 < this.config.UPLOAD_SIZE) {
|
|
|
|
|
resolve(file)
|
|
|
|
|
} else {
|
|
|
|
|
// 否则压缩图片到限制大小
|
|
|
|
|
imageConversion.compressAccurately(file, this.config.UPLOAD_SIZE).then((res) => {
|
|
|
|
|
resolve(res)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
imageConversion.compressAccurately(file, this.config.UPLOAD_SIZE).then((res) => {
|
|
|
|
|
resolve(res)
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 全选/取消全选事件
|
|
|
|
|
handleCheckAllChange(val) {
|
|
|
|
|
// 全选时选中所有照片ID，取消全选时清空选中
|
|
|
|
|
this.selectphotoIds = val ? this.photoIds : []
|
|
|
|
|
this.isIndeterminate = false
|
|
|
|
|
this.isIndeterminate = false // 取消半选状态
|
|
|
|
|
},
|
|
|
|
|
// 单个复选框选择变化事件
|
|
|
|
|
handleCheckedPhotoChange(value) {
|
|
|
|
|
let checkedCount = value.length
|
|
|
|
|
const checkedCount = value.length
|
|
|
|
|
// 全选状态：选中数量等于总数量
|
|
|
|
|
this.checkAll = checkedCount === this.photoIds.length
|
|
|
|
|
// 半选状态：选中数量大于0且小于总数量
|
|
|
|
|
this.isIndeterminate = checkedCount > 0 && checkedCount < this.photoIds.length
|
|
|
|
|
},
|
|
|
|
|
// 照片操作菜单命令处理（编辑）
|
|
|
|
|
handleCommand(command) {
|
|
|
|
|
// 将选中的照片信息填入表单，打开编辑弹窗
|
|
|
|
|
this.photoForm = JSON.parse(command)
|
|
|
|
|
this.editPhoto = true
|
|
|
|
|
},
|
|
|
|
|
// 删除照片（单个或批量，移至回收站）
|
|
|
|
|
updatePhotoDelete(id) {
|
|
|
|
|
var param = {}
|
|
|
|
|
if (id == null) {
|
|
|
|
|
// 批量删除：使用选中的照片ID集合，isDelete=1表示移至回收站
|
|
|
|
|
param = { ids: this.selectphotoIds, isDelete: 1 }
|
|
|
|
|
} else {
|
|
|
|
|
// 单个删除：使用传入的照片ID，isDelete=1表示移至回收站
|
|
|
|
|
param = { ids: [id], isDelete: 1 }
|
|
|
|
|
}
|
|
|
|
|
this.axios.put('/api/admin/photos/delete', param).then(({ data }) => {
|
|
|
|
|
if (data.flag) {
|
|
|
|
|
// 操作成功提示
|
|
|
|
|
this.$notify.success({
|
|
|
|
|
title: '成功',
|
|
|
|
|
message: data.message
|
|
|
|
|
})
|
|
|
|
|
this.listPhotos()
|
|
|
|
|
this.getAlbumInfo()
|
|
|
|
|
this.listPhotos() // 重新加载照片列表
|
|
|
|
|
this.getAlbumInfo() // 更新相册信息（照片数量减少）
|
|
|
|
|
} else {
|
|
|
|
|
// 操作失败提示
|
|
|
|
|
this.$notify.error({
|
|
|
|
|
title: '失败',
|
|
|
|
|
message: data.message
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.batchDeletePhoto = false
|
|
|
|
|
this.batchDeletePhoto = false // 关闭删除弹窗
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 监听photos变化，同步更新所有照片ID集合（用于全选功能）
|
|
|
|
|
watch: {
|
|
|
|
|
photos() {
|
|
|
|
|
this.photoIds = []
|
|
|
|
|
@ -390,86 +478,104 @@ export default {
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
/* 相册信息区域样式 */
|
|
|
|
|
.album-info {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-top: 2.25rem;
|
|
|
|
|
margin-bottom: 2rem;
|
|
|
|
|
}
|
|
|
|
|
/* 相册封面样式 */
|
|
|
|
|
.album-cover {
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
width: 5rem;
|
|
|
|
|
height: 5rem;
|
|
|
|
|
}
|
|
|
|
|
/* 相册选择项中的封面样式 */
|
|
|
|
|
.album-check-cover {
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
width: 4rem;
|
|
|
|
|
height: 4rem;
|
|
|
|
|
}
|
|
|
|
|
/* 相册详情区域样式 */
|
|
|
|
|
.album-detail {
|
|
|
|
|
padding-top: 0.4rem;
|
|
|
|
|
margin-left: 0.8rem;
|
|
|
|
|
}
|
|
|
|
|
/* 相册描述样式 */
|
|
|
|
|
.album-desc {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-right: 0.8rem;
|
|
|
|
|
}
|
|
|
|
|
/* 操作按钮区域样式 */
|
|
|
|
|
.operation {
|
|
|
|
|
padding-top: 1.5rem;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
}
|
|
|
|
|
/* 全选区域样式 */
|
|
|
|
|
.all-check {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-right: 1rem;
|
|
|
|
|
}
|
|
|
|
|
/* 已选数量样式 */
|
|
|
|
|
.check-count {
|
|
|
|
|
margin-left: 1rem;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
/* 相册名称样式 */
|
|
|
|
|
.album-name {
|
|
|
|
|
font-size: 1.25rem;
|
|
|
|
|
}
|
|
|
|
|
/* 照片数量样式 */
|
|
|
|
|
.photo-count {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
margin-left: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
/* 照片项样式 */
|
|
|
|
|
.photo-item {
|
|
|
|
|
width: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
}
|
|
|
|
|
/* 照片图片样式 */
|
|
|
|
|
.photo-img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 7rem;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
/* 照片名称样式 */
|
|
|
|
|
.photo-name {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-top: 0.3rem;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
/* 上传容器样式 */
|
|
|
|
|
.upload-container {
|
|
|
|
|
height: 400px;
|
|
|
|
|
}
|
|
|
|
|
/* 拖拽上传区域样式 */
|
|
|
|
|
.upload {
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
/* 上传弹窗底部样式 */
|
|
|
|
|
.upload-footer {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
/* 照片操作菜单样式 */
|
|
|
|
|
.photo-opreation {
|
|
|
|
|
position: absolute;
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
top: 0.3rem;
|
|
|
|
|
right: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
/* 相册选择项样式 */
|
|
|
|
|
.album-check {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</style>
|
