moliparty/peko-admin-web
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成相册管理后台

Browse Source
This commit is contained in:
Dragon
2023-10-17 09:11:50 +08:00
parent d808a1e99f
commit 7a9eab4a73
3 changed files with 301 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/api/roomAlbumPower/roomAlbumPower.js Normal file
View File

@@ -0,0 +1,76 @@
import request from '@/utils/request';
import qs from 'qs';
// 获取房间权限列表
export const albumPage = query => {
return request({
url: '/admin/room/album/page',
method: 'get',
params: query
});
};
// 房间相册管理权限分页列表
export const userPage = query => {
return request({
url: '/admin/room/album/userPage',
method: 'get',
params: query
});
};
// 删除权限
export const delUserRoomAlbum = query => {
return request({
url: '/admin/room/album/delUserRoomAlbum',
method: 'get',
params: query
});
};
// 删除房间权限
export const delRoomAlbum = query => {
return request({
url: '/admin/room/album/delRoomAlbum',
method: 'get',
params: query
});
};
// 清空该房间相册
export const clearRoomAlbum = query => {
return request({
url: '/admin/room/album/clearRoomAlbum',
method: 'get',
params: query
});
};
// 增加房间权限接口
export const albumSave = query => {
return request({
url: '/admin/room/album/save',
method: 'post',
params: query
});
};
// 保存房间相册管理权限
export const saveManager = query => {
return request({
url: '/admin/room/album/saveManager',
method: 'post',
params: query
});
};
// =========图片管理============
// 分页列表
export const photoPage = query => {
return request({
url: '/admin/room/photo/page',
method: 'get',
params: query
});
};
// 删除照片
export const photoDel = query => {
return request({
url: '/admin/room/photo/del',
method: 'get',
params: query
});
};

197
src/views/room/RoomAlbumPower.vue
View File

@@ -32,7 +32,9 @@
style="margin-right: 10px"
>增加权限</el-button
>
<el-button class="primary" type="primary" size="default">查询</el-button>
<el-button class="primary" type="primary" size="default" @click="search()"
>查询</el-button
>
</div>
<!-- 增加权限弹窗 -->
<el-dialog v-model="authority" title="增加房间相册权限" width="30%" center>
@@ -54,10 +56,14 @@
</el-dialog>
<!-- 表格 -->
<el-table :data="tableData" border style="width: 100%; margin-top: 25px">
<el-table-column prop="roomId" align="center" label="权限房间号" />
<el-table-column prop="roomName" align="center" label="权限房间名称" />
<el-table-column prop="time" align="center" label="房间获得权限时间" />
<el-table-column prop="roomNum" align="center" label="该房间的房间相册仅限用户数" />
<el-table-column prop="roomErBanNo" align="center" label="权限房间号" />
<el-table-column prop="title" align="center" label="权限房间名称" />
<el-table-column prop="createTime" align="center" label="房间获得权限时间" />
<el-table-column
prop="userCount"
align="center"
label="该房间的房间相册仅限用户数"
/>
<el-table-column align="center" label="操作" width="400">
<template v-slot="scope">
<el-button
@@ -75,7 +81,7 @@
>管理权限用户</el-button
>
<el-button
@click="delRoomAlbum(scope.row)"
@click="delRoomAlbumClick(scope.row)"
class="danger"
type="danger"
size="default"
@@ -111,43 +117,69 @@
<el-table style="width: 100%" :data="authorityData">
<el-table-column
align="center"
property="userId"
property="userErBanNo"
label="用户id"
min-width="100px"
/>
<el-table-column
align="center"
property="userName"
property="nick"
label="用户昵称"
min-width="100px"
/>
<el-table-column
align="center"
property="time"
property="createTime"
label="获得权限时间"
min-width="100px"
/>
<el-table-column align="center" label="操作" width="400">
<template v-slot="scope">
<el-button
v-if="scope.row.roomUid === scope.row.uid"
@click="delTablePower(scope.row)"
class="danger"
type="danger"
size="default"
:disabled="true"
>删除权限</el-button
>
<el-button
v-if="!(scope.row.roomUid === scope.row.uid)"
@click="delTablePower(scope.row)"
class="danger"
type="danger"
size="default"
:disabled="false"
>删除权限</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 分页2 -->
<el-pagination
style="margin-top: 10px"
class="paginationClass"
v-model:current-page="currentPage3"
v-model:page-size="pageSize3"
:page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500]"
:small="small"
:disabled="disabled"
:background="background"
layout="sizes, prev, pager, next"
:total="totals3"
@size-change="handleSizeChange2"
@current-change="handleCurrentChange2"
/>
</el-dialog>
<!-- 增加房间相册管理权限弹窗 -->
<el-dialog v-model="authorityLimits" title="增加房间相册管理权限" width="30%" center>
<div class="authorityBox">
<span class="authoritySpan">房间ID</span>
<span class="authoritySpan">用户ID</span>
<el-input
v-model="addLimits"
size="default"
placeholder="输入房间ID多个请用英文 , 来分别"
placeholder="输入用户ID多个请用英文 , 来分别"
class="authorityInpput"
></el-input>
</div>
@@ -163,7 +195,7 @@
<span> {{ delDialogText }}</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="delDialog = false;">取消</el-button>
<el-button @click="delDialog = false">取消</el-button>
<el-button type="primary" @click="delClick()"> 确认 </el-button>
</span>
</template>
@@ -172,6 +204,15 @@
</template>
<script>
import {
albumPage,
albumSave,
delRoomAlbum,
clearRoomAlbum,
userPage,
saveManager,
delUserRoomAlbum,
} from "@/api/roomAlbumPower/roomAlbumPower";
export default {
name: "RoomAlbumPower",
data() {
@@ -179,6 +220,9 @@ export default {
totals: 100, //总页数
currentPage2: 1, //页码
pageSize2: 10, //条数
totals3: 100, //总页数
currentPage3: 1, //页码
pageSize3: 10, //条数
roomId: "", //房间号
userId: "", //用户id
addRoomId: "", //新增房间id
@@ -189,63 +233,144 @@ export default {
dialogTableVisibleTitle: "房间ID:123 的房间相册管理权限",
delDialog: false, //公共删除控制弹窗
delDialogText: "确定要删除吗?", //公共删除内容文案
tableData: [
{
roomId: "123",
roomName: "迪迦",
time: "2023-1-1",
roomNum: "1",
},
], //表单数据存放
authorityData: [
{
userId: "123",
userName: "迪迦",
time: "2023-1-1",
},
], //权限管理弹窗表单数据存放
tableData: [], //表单数据存放
authorityData: [], //权限管理弹窗表单数据存放
arr: [], //暂存公共数据
delType: null, //存放删除类型
saveManagerRoomUid: null, //暂存管理弹窗roomUid
};
},
setup() {
return {};
},
created() {},
created() {
this.getData();
},
methods: {
// 查询
search() {
this.getData();
},
getData() {
albumPage({
roomErBanNo: this.roomId,
userErBanNo: this.userId,
page: this.currentPage2,
pageSize: this.pageSize2,
}).then((res) => {
console.log(res);
this.totals = res.total;
this.tableData = res.rows;
});
},
// 公共二次确认删除按钮
delClick() {},
delClick() {
console.log(this.arr);
if (this.delType == 1) {
//delType:1 删除房间权限;
delRoomAlbum({
roomUid: this.arr.roomUid,
}).then((res) => {
this.getData();
});
this.delDialog = false;
} else if (this.delType == 2) {
//delType:2 清空该房间相册;
clearRoomAlbum({
roomUid: this.arr.roomUid,
}).then((res) => {
this.getData();
});
this.delDialog = false;
} else if (this.delType == 3) {
//delType:3 删除权限弹窗;
delUserRoomAlbum({
roomUid: this.arr.roomUid,
uid: this.arr.uid,
}).then((res) => {
this.getUserPage(this.saveManagerRoomUid);
});
this.delDialog = false;
}
},
// 增加房间相册权限
addAuthority() {},
addAuthority() {
albumSave({
roomErBanNoStr: this.addRoomId,
}).then((res) => {
this.getData();
});
this.authority = false;
},
// 新增权限管理弹窗
addAuthorityLimits(row) {
console.log(row);
saveManager({
roomUid: this.saveManagerRoomUid,
userErBanNoStr: this.addLimits,
page: this.currentPage3,
pageSize: this.pageSize3,
}).then((res) => {
this.getUserPage(this.saveManagerRoomUid);
});
this.authorityLimits = false;
this.dialogTableVisible = false;
},
// 删除房间权限
delRoomPower(row) {
console.log(row);
this.arr = row;
this.delType = 1;
this.delDialogText = "确认要删除房间权限吗?";
this.delDialog = true;
},
getUserPage(roomUid) {
userPage({
roomUid,
page: this.currentPage3,
pageSize: this.pageSize3,
}).then((res) => {
console.log(res);
this.totals3 = res.total;
this.authorityData = res.rows;
this.dialogTableVisible = true;
});
},
// 管理权限用户
modifyUserPower(row) {
console.log(row);
this.dialogTableVisible = true;
this.saveManagerRoomUid = row.roomUid;
this.dialogTableVisibleTitle = `房间ID:${row.roomErBanNo} 的房间相册管理权限`;
this.getUserPage(this.saveManagerRoomUid);
},
// 清除房间相册
delRoomAlbum(row) {
delRoomAlbumClick(row) {
this.arr = row;
this.delType = 1;
this.delDialogText = "确认要清除该房间相册吗?";
this.delDialog = true;
},
// 删除弹窗权限按钮
delTablePower(row) {
console.log(row);
this.arr = row;
this.delType = 3;
this.delDialogText = "确认要删除权限吗?";
this.delDialog = true;
},
// 分页导航
handleSizeChange(val) {},
handleCurrentChange(val) {},
handleSizeChange(val) {
this.getData();
},
handleCurrentChange(val) {
this.getData();
},
// 分页导航
handleSizeChange2(val) {
this.getUserPage(this.saveManagerRoomUid);
},
handleCurrentChange2(val) {
this.getUserPage(this.saveManagerRoomUid);
},
},
};
</script>

95
src/views/room/RoomAlbums.vue
View File

@@ -24,41 +24,52 @@
</div>
<!-- 按钮 -->
<div class="buttonBox">
<el-button class="primary" type="primary" size="default">查询</el-button>
<el-button class="primary" type="primary" size="default" @click="search()"
>查询</el-button
>
</div>
<!-- 表格 -->
<el-table :data="tableData" border style="width: 100%; margin-top: 25px">
<el-table-column align="center" prop="roomId" label="房间号" />
<el-table-column align="center" prop="roomName" label="房间名称" />
<el-table-column align="center" prop="userId" label="上传用户ID" />
<el-table-column align="center" prop="time" label="上传时间" />
<el-table-column align="center" prop="roomErBanNo" label="房间号" />
<el-table-column align="center" prop="title" label="房间名称" />
<el-table-column align="center" prop="userErBanNo" label="上传用户ID" />
<el-table-column align="center" prop="createTime" label="上传时间" />
<el-table-column align="center" label="图片">
<template v-slot="scope">
<el-image
style="width: 100px; height: 100px"
:src="scope.row.img"
:src="scope.row.photoUrl"
:zoom-rate="1.1"
:preview-src-list="[scope.row.img]"
:preview-src-list="[scope.row.photoUrl]"
fit="cover"
preview-teleported="true"
hide-on-click-modal="true"
/></template>
</el-table-column>
<el-table-column align="center" prop="type" label="类型" />
<el-table-column
align="center"
prop="type"
:formatter="typeFormatter"
label="类型"
/>
<el-table-column align="center" prop="unlockGift" label="解锁礼物" class="">
<template v-slot="scope">
<el-image
style="width: 30px; height: 30px;vertical-align: middle;margin-right: 6px;"
:src="scope.row.img2"
style="width: 30px; height: 30px; vertical-align: middle; margin-right: 6px"
:src="scope.row.picUrl"
:zoom-rate="1"
fit="cover"
preview-teleported="true"
/>
<img src="../../assets/images/zs.png" alt="" style="width: 20px; height: 16px;vertical-align: middle;margin-right: 4px;">
<span>{{ scope.row.unlockGift }}</span>
<img
src="../../assets/images/zs.png"
alt=""
style="width: 20px; height: 16px; vertical-align: middle; margin-right: 4px"
/>
<span>{{ scope.row.goldPrice }}</span>
</template>
</el-table-column>
<el-table-column align="center" prop="unlockAllNum" label="累计解锁次数" />
<el-table-column align="center" prop="unLockNum" label="累计解锁次数" />
<el-table-column align="center" label="操作">
<template v-slot="scope">
<el-button
@@ -71,7 +82,7 @@
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<!-- 分页 -->
<el-pagination
style="margin-top: 10px"
class="paginationClass"
@@ -100,6 +111,7 @@
</template>
<script>
import { photoPage, photoDel } from "@/api/roomAlbumPower/roomAlbumPower";
export default {
name: "RoomAlbums",
data() {
@@ -111,35 +123,56 @@ export default {
userId: "", //用户id
delDialog: false,
delDialogText: "确认要删除照片吗?",
tableData: [
{
roomId: "123",
roomName: "迪迦",
userId: "123",
time: "2023-1-1",
img: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
img2: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
type: "普通照片",
unlockGift: "100",
unlockAllNum: "2",
},
], //表单数据存放
tableData: [], //表单数据存放
delArr: null, //暂存公共数据
};
},
setup() {
return {};
},
created() {},
created() {
this.getData();
},
methods: {
delClick() {},
search() {
this.getData();
},
typeFormatter(row, col, val) {
return `${row.type == 1 ? "普通照片" : "解锁照片"}`;
},
getData() {
photoPage({
roomErBanNo: this.roomId,
userErBanNo: this.userId,
page: this.currentPage2,
pageSize: this.pageSize2,
}).then((res) => {
console.log(res);
this.totals = res.total;
this.tableData = res.rows;
});
},
delClick() {
photoDel({
id: this.delArr,
}).then((res) => {
this.getData();
this.delDialog = false;
});
},
// 清除相册
delAlbum(row) {
console.log(row);
this.delArr = row.id;
this.delDialog = true;
},
// 分页导航
handleSizeChange(val) {},
handleCurrentChange(val) {},
handleSizeChange(val) {
this.getData();
},
handleCurrentChange(val) {
this.getData();
},
},
};
</script>