Skip to content

V
vue-kwan-admin

Kwan的解忧杂货铺@新空间代码工作室 / vue-kwan-admin

通知 38
Star 6
Fork 3
V
vue-kwan-admin
提交 c222f0bb 编写于 作者: Kwan的解忧杂货铺@新空间代码工作室's avatar Kwan的解忧杂货铺@新空间代码工作室 🐭
浏览文件
操作

fix:更新前端

上级 231cfdce
展开全部 隐藏空白更改
内联 并排
Showing with 1359 addition and 1267 deletion
src/api/ApiService.js
浏览文件 @ c222f0bb
import axios from 'axios'
const BASE_URL = 'http://localhost:80'
// 创建一个名为 ApiService 的对象，包含您的异步方法
const ApiService = {
......@@ -107,19 +108,26 @@ const ApiService = {
return await axios.get(BASE_URL + '/csdn/followFans/deleteFollow')
},
//我的图片
async queryPic(currentPage, pageSize, picType) {
return await axios.get(BASE_URL + '/picInfo/page', {
params: {
page: currentPage,
pageSize: pageSize,
picType: picType,
},
async queryPic(currentPage, pageSize, formInline) {
return await axios.post(BASE_URL + '/picInfo/page', {
page: currentPage,
pageSize: pageSize,
type: formInline.type == '全部' ? '' : formInline.type,
picName: formInline.picName,
})
},
async editPicConfirm(currentRowId, type) {
async editPicConfirm(currentRowId, type, picName) {
return await axios.post(BASE_URL + '/picInfo/update', {
id: currentRowId,
type: type,
picName: picName,
})
},
async batchUpdatePic(ids, type) {
return await axios.post(BASE_URL + '/picInfo/batchUpdatePic', {
ids: ids,
type: type,
})
},
//余额管理
......@@ -149,5 +157,38 @@ const ApiService = {
endDate: formInline.accountDate != null ? formInline.accountDate[1] : '',
})
},
//用户管理
async multiTriplet(userNames) {
return await axios.post(BASE_URL + '/csdn/multiTriplet', userNames)
},
async autoReply() {
return await axios.get(BASE_URL + '/csdn/autoReply')
},
async singleTriplet(userName) {
return await axios.get(BASE_URL + '/csdn/singleTriplet?username=' + userName)
},
//私信管理
async dealMessageOne(userName) {
return await axios.get(BASE_URL + '/csdn/message/dealMessageOne?userName=' + userName)
},
async dealMessage() {
return await axios.get(BASE_URL + '/csdn/message/dealMessage')
},
async dealLikeCollect() {
return await axios.get(BASE_URL + '/csdn/likeCollect/dealLikeCollect')
},
async acquireMessage() {
return await axios.get(BASE_URL + '/csdn/message/acquireMessage')
},
async messagePage(currentPage, pageSize, formInline) {
return await axios.post('http://localhost:80/csdn/message/page', {
page: currentPage,
pageSize: pageSize,
userName: formInline.userName,
nickName: formInline.nickName,
hasReplied: formInline.hasRepliedInfo == -1 ? null : formInline.hasRepliedInfo,
})
},
}
export default ApiService
src/components/MyLogin.vue
浏览文件 @ c222f0bb
<template>
<div class="login-container">
<div class="login-box">
<!-- 头像区域 -->
<div class="text-center avatar-box">
<img src="../assets/kwan.png" class="img-thumbnail avatar" alt="kwan的解忧杂货铺" />
</div>
<div class="login-container">
<div class="login-box">
<!-- 头像区域 -->
<div class="text-center avatar-box">
<img src="../assets/kwan.png" class="img-thumbnail avatar" alt="kwan的解忧杂货铺"/>
</div>
<!-- 表单区域 -->
<div class="form-login p-4">
<!-- 登录名称 -->
<div class="form-group form-inline">
<label for="username">登录名称</label>
<input type="text" class="form-control ml-2" id="username" placeholder="请输入登录名称" autocomplete="off" v-model.trim="username" />
</div>
<!-- 登录密码 -->
<div class="form-group form-inline">
<label for="password">登录密码</label>
<input type="password" class="form-control ml-2" id="password" placeholder="请输入登录密码" v-model.trim="password" />
</div>
<!-- 登录和重置按钮 -->
<div class="form-group form-inline d-flex justify-content-end">
<button type="button" class="btn btn-secondary mr-2" @click="reset">重置</button>
<button type="button" class="btn btn-primary" @click="login">登录</button>
</div>
</div>
</div>
</div>
<!-- 表单区域 -->
<div class="form-login p-4">
<!-- 登录名称 -->
<div class="form-group form-inline">
<label for="username">登录名称</label>
<input type="text" class="form-control ml-2" id="username" placeholder="请输入登录名称" autocomplete="off"
v-model.trim="username"/>
</div>
<!-- 登录密码 -->
<div class="form-group form-inline">
<label for="password">登录密码</label>
<input type="password" class="form-control ml-2" id="password" placeholder="请输入登录密码" v-model.trim="password"/>
</div>
<!-- 登录和重置按钮 -->
<div class="form-group form-inline d-flex justify-content-end">
<button type="button" class="btn btn-secondary mr-2" @click="reset">重置</button>
<button type="button" class="btn btn-primary" @click="login">登录</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'MyLogin',
data() {
return {
username: '',
password: '',
}
name: 'MyLogin',
data() {
return {
username: '',
password: '',
}
},
methods: {
reset() {
this.username = ''
this.password = ''
},
methods: {
reset() {
this.username = ''
this.password = ''
},
login() {
if (this.username === 'admin' && this.password === '888888') {
// 登录成功
// 1. 存储 token
localStorage.setItem('token', 'Bearer xxxx')
// 2. 跳转到后台主页
this.$router.push('/home')
} else {
// 登录失败
localStorage.removeItem('token')
this.errorMsg('登录失败，请检查您的用户名或密码；由于用户名密码是写死的，需要在项目中查看！！！')
}
},
errorMsg(msg) {
this.$message({
showClose: true,
message: msg,
type: 'error',
})
},
login() {
if (this.username === 'admin' && this.password === '716288') {
// 登录成功
// 1. 存储 token
localStorage.setItem('token', 'Bearer xxxx')
// 2. 跳转到后台主页
this.$router.push('/home')
} else {
// 登录失败
localStorage.removeItem('token')
this.errorMsg('登录失败，请检查您的用户名或密码；由于用户名密码是写死的，需要在项目中查看！！！')
}
},
errorMsg(msg) {
this.$message({
showClose: true,
message: msg,
type: 'error',
})
},
},
}
</script>
<style lang="less" scoped>
.login-container {
background-color: #35495e;
height: 100%;
.login-box {
width: 400px;
height: 250px;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
.form-login {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
}
}
background-color: #35495e;
height: 100%;
.login-box {
width: 400px;
height: 250px;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
.form-login {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
}
}
}
.form-control {
flex: 1;
flex: 1;
}
.avatar-box {
position: absolute;
width: 100%;
top: -65px;
left: 0;
.avatar {
width: 120px;
height: 120px;
border-radius: 50% !important;
box-shadow: 0 0 6px #efefef;
}
position: absolute;
width: 100%;
top: -65px;
left: 0;
.avatar {
width: 120px;
height: 120px;
border-radius: 50% !important;
box-shadow: 0 0 6px #efefef;
}
}
</style>
\ No newline at end of file
src/components/menus/MyArticleInfo.vue
浏览文件 @ c222f0bb
......@@ -124,7 +124,7 @@
</el-dialog>
</el-form-item>
</el-form>
<el-table ref="multipleTable" v-loading="loading" :data="articleInfoList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
<el-table border ref="multipleTable" v-loading="loading" :data="articleInfoList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column prop="articleId" label="文章id" show-overflow-tooltip></el-table-column>
<el-table-column prop="userName" label="用户名称" show-overflow-tooltip></el-table-column>
......@@ -282,7 +282,7 @@ export default {
{ type: 2, name: '评论已满' },
{ type: 3, name: '禁言' },
{ type: 4, name: '评论太快' },
{ type: 5, name: '评论已经到了40条' },
{ type: 5, name: '评论已到40条' },
{ type: 8, name: '其他错误' },
{ type: 9, name: '评论成功' },
],
......@@ -605,7 +605,7 @@ export default {
return 'info'
} else if (statusName == '已经点过赞' || statusName == '已经收藏过' || statusName == '已经评论过') {
return 'success'
} else if (statusName == '文章状态不能点赞' || statusName == '收藏已满' || statusName == '收藏夹不存在' || statusName == '评论已满' || statusName == '禁言' || statusName == '评论已经到了40条') {
} else if (statusName == '文章状态不能点赞' || statusName == '收藏已满' || statusName == '收藏夹不存在' || statusName == '评论已满' || statusName == '禁言' || statusName == '评论已到40条') {
return 'danger'
} else if (statusName == '点赞成功' || statusName == '收藏成功' || statusName == '评论成功') {
return 'success'
......
src/components/menus/MyCsdnUser.vue
浏览文件 @ c222f0bb
此差异已折叠。
src/components/menus/MyMessage.vue
浏览文件 @ c222f0bb
<template>
<div>
<el-container>
<el-main>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item>
<el-input size="small" clearable v-model="formInline.userName" placeholder="请输入用户名" @keydown.enter.native="messagePage"></el-input>
</el-form-item>
<el-form-item>
<el-input size="small" clearable v-model="formInline.nickName" placeholder="请输入用户昵称" @keydown.enter.native="messagePage"></el-input>
</el-form-item>
<el-form-item>
<el-select size="small" v-model="formInline.hasRepliedInfo" placeholder="请选择收藏状态" @change="messagePage">
<el-option v-for="item in hasRepliedInfo" :key="item.type" :label="item.name" :value="item.type"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" @click="messagePage">查询</el-button>
</el-form-item>
<div>
<el-container>
<el-main>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item>
<el-input size="small" clearable v-model="formInline.userName" placeholder="请输入用户名"
@keydown.enter.native="messagePage"></el-input>
</el-form-item>
<el-form-item>
<el-input size="small" clearable v-model="formInline.nickName" placeholder="请输入用户昵称"
@keydown.enter.native="messagePage"></el-input>
</el-form-item>
<el-form-item>
<el-select size="small" v-model="formInline.hasRepliedInfo" placeholder="请选择收藏状态" @change="messagePage">
<el-option v-for="item in hasRepliedInfo" :key="item.type" :label="item.name"
:value="item.type"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" @click="messagePage">查询</el-button>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" @click="prepareRefreshMessage">刷新私信列表</el-button>
<el-dialog title="提示" :visible.sync="refreshMessageDialogVisible" width="30%" :before-close="handleClose">
<span>确认刷新私信列表吗?</span>
<span slot="footer" class="dialog-footer">
<el-form-item>
<el-button size="small" type="primary" @click="prepareRefreshMessage">刷新私信列表</el-button>
<el-dialog title="提示" :visible.sync="refreshMessageDialogVisible" width="30%" :before-close="handleClose">
<span>确认刷新私信列表吗?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="refreshMessageDialogVisible = false">取 消</el-button>
<el-button type="primary" @click.prevent="refreshMessage()">确 定</el-button>
<el-button type="primary" @click.prevent="acquireMessage()">确 定</el-button>
</span>
</el-dialog>
</el-form-item>
</el-dialog>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" @click="prepareMeaasge">私信点赞收藏</el-button>
<el-dialog title="提示" :visible.sync="messageDialogVisible" width="30%" :before-close="handleClose">
<span>确认处理私信点赞收藏吗?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="messageDialogVisible = false">取 消</el-button>
<el-button type="primary" @click.prevent="messageDeal()">确 定</el-button>
</span>
</el-dialog>
</el-form-item>
</el-form>
<el-table ref="multipleTable" v-loading="loading" :data="csdnMessageList" tooltip-effect="dark" style="width: 100%">
<el-table-column prop="id" label="序号" width="100" sortable></el-table-column>
<el-table-column prop="userName" label="用户名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="nickName" label="用户昵称" show-overflow-tooltip>
<template slot-scope="scope">
<a :href="scope.row.messageUrl" target="_blank">{{ scope.row.nickName }}</a>
</template>
</el-table-column>
<el-form-item>
<el-button size="small" type="primary" @click="messageDeal">私信点赞收藏</el-button>
</el-form-item>
</el-form>
<el-table border ref="multipleTable" v-loading="loading" :data="csdnMessageList" tooltip-effect="dark"
style="width: 100%">
<el-table-column prop="id" label="序号" width="100" sortable></el-table-column>
<el-table-column prop="userName" label="用户名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="nickName" label="用户昵称" show-overflow-tooltip>
<template slot-scope="scope">
<a :href="scope.row.messageUrl" target="_blank">{{ scope.row.nickName }}</a>
</template>
</el-table-column>
<el-table-column prop="hasRepliedName" label="是否回复" show-overflow-tooltip>
<template slot-scope="scope">
<el-tag :type="getTagType(scope.row.hasRepliedName)">{{ scope.row.hasRepliedName }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="hasRepliedName" label="是否回复" show-overflow-tooltip>
<template slot-scope="scope">
<el-tag :type="getTagType(scope.row.hasRepliedName)">{{ scope.row.hasRepliedName }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="content" label="回复内容" show-overflow-tooltip></el-table-column>
<el-table-column prop="content" label="回复内容" show-overflow-tooltip></el-table-column>
<el-table-column label="更新时间">
<template slot-scope="props">
{{ props.row.updateTime | dateFormat }}
</template>
</el-table-column>
<el-table-column prop="操作" label="操作" width="380px">
<template slot-scope="props">
<el-button type="primary" @click="prepareDealMessageOne(props.row.userName)" size="small">私信</el-button>
<el-dialog title="提示" :visible.sync="dealMessageOneVisible" width="30%" :before-close="handleClose">
<span>确认私信吗?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dealMessageOneVisible = false">取 消</el-button>
<el-button type="primary" @click.prevent="dealMessageOne(currentUserName)">确 定</el-button>
</span>
</el-dialog>
<el-button type="danger" @click="prepareDelete(props.row.id)" size="small">删除</el-button>
<el-dialog title="提示" :visible.sync="deleteDialogVisible" width="30%" :before-close="handleClose">
<span>确认删除?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="deleteDialogVisible = false">取 消</el-button>
<el-button type="primary" @click.prevent="onDelete(currentRowId)">确 定</el-button>
</span>
</el-dialog>
</template>
</el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[8, 50, 100, 200, 400]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
</el-main>
<el-backtop class="backtop"></el-backtop>
</el-container>
</div>
<el-table-column label="更新时间">
<template slot-scope="props">
{{ props.row.updateTime | dateFormat }}
</template>
</el-table-column>
<el-table-column prop="操作" label="操作" width="380px">
<template slot-scope="props">
<el-button type="primary" @click="dealMessageOne(props.row.userName)" size="small">私信</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
:page-sizes="[8, 50, 100, 200, 400]" :page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
</el-main>
<el-backtop class="backtop"></el-backtop>
</el-container>
</div>
</template>
<script>
import axios from 'axios'
import ApiService from '../../api/ApiService'
export default {
name: 'MyMessage',
name: 'MyMessage',
data() {
return {
formInline: {
userName: '',
nickName: '',
hasRepliedInfo: null,
},
hasRepliedInfo: [
{
type: -1,
name: '全部',
},
{
type: 0,
name: '未回复',
},
{ type: 1, name: '已回复' },
],
deleteDialogVisible: false,
dealMessageOneVisible: false,
messageDialogVisible: false,
refreshMessageDialogVisible: false,
// 用户列表数据
csdnMessageList: [],
loading: false,
elementui_page_component_key: 0,
currentPage: Number(localStorage.getItem('csdnUserPage')) || 1,
pageSize: 8,
total: 0,
currentRowId: null,
currentUserName: null,
}
},
watch: {
'formInline.userName'(newVal, oldVal) {
if (newVal !== oldVal) {
this.currentPage = 1
localStorage.setItem('csdnUserPage', this.currentPage)
this.messagePage()
}
},
'formInline.nickName'(newVal, oldVal) {
if (newVal !== oldVal) {
this.currentPage = 1
localStorage.setItem('csdnUserPage', this.currentPage)
this.messagePage()
}
},
// 监听currentPage的变化，将新值保存到localStorage中
currentPage(newPage) {
localStorage.setItem('csdnUserPage', newPage.toString())
},
},
created() {
//获取问题类型的枚举
this.messagePage()
},
mounted() {
this.currentPage = 1
},
methods: {
prepareMeaasge() {
this.messageDialogVisible = true
},
prepareRefreshMessage() {
this.refreshMessageDialogVisible = true
},
prepareDelete(id) {
this.currentRowId = id
this.deleteDialogVisible = true
},
prepareDealMessageOne(userName) {
this.currentUserName = userName
this.dealMessageOneVisible = true
},
data() {
return {
formInline: {
userName: '',
nickName: '',
hasRepliedInfo: null,
},
hasRepliedInfo: [
{
type: -1,
name: '全部',
},
{
type: 0,
name: '未回复',
},
{type: 1, name: '已回复'},
],
refreshMessageDialogVisible: false,
// 用户列表数据
csdnMessageList: [],
loading: false,
elementui_page_component_key: 0,
currentPage: Number(localStorage.getItem('csdnUserPage')) || 1,
pageSize: 8,
total: 0,
currentRowId: null,
currentUserName: null,
}
},
watch: {
'formInline.userName'(newVal, oldVal) {
if (newVal !== oldVal) {
this.currentPage = 1
localStorage.setItem('csdnUserPage', this.currentPage)
this.messagePage()
}
},
'formInline.nickName'(newVal, oldVal) {
if (newVal !== oldVal) {
this.currentPage = 1
localStorage.setItem('csdnUserPage', this.currentPage)
this.messagePage()
}
},
// 监听currentPage的变化，将新值保存到localStorage中
currentPage(newPage) {
localStorage.setItem('csdnUserPage', newPage.toString())
},
},
created() {
//获取问题类型的枚举
this.messagePage()
},
mounted() {
this.currentPage = 1
},
methods: {
prepareRefreshMessage() {
this.refreshMessageDialogVisible = true
},
handleClose(done) {
this.$confirm('确认关闭？')
.then((_) => {
done()
})
.catch((_) => {})
},
handleConfirm(addType) {
this.dialogFormVisible = false // 关闭对话框
this.dialogMutiFormVisible = false
this.addUser(addType) // 发送请求
},
async messagePage() {
this.loading = true
const { data: res } = await axios.post('http://localhost:80/csdn/message/page', {
page: this.currentPage,
pageSize: this.pageSize,
userName: this.formInline.userName,
nickName: this.formInline.nickName,
hasReplied: this.formInline.hasRepliedInfo == -1 ? null : this.formInline.hasRepliedInfo,
})
if (res.code === 200) {
this.total = res.result.totalElements
const userWeightMap = {}
this.hasRepliedInfo.forEach((option) => {
userWeightMap[option.type] = option.name
})
res.result.content.forEach((item) => {
item.hasRepliedName = userWeightMap[item.hasReplied]
})
this.csdnMessageList = res.result.content
}
this.loading = false
},
handleClose(done) {
this.$confirm('确认关闭？')
.then((_) => {
done()
})
.catch((_) => {
})
},
handleConfirm(addType) {
this.dialogFormVisible = false // 关闭对话框
this.dialogMutiFormVisible = false
this.addUser(addType) // 发送请求
},
async messagePage() {
this.loading = true
const {data: res} = await ApiService.messagePage(this.currentPage, this.pageSize, this.formInline)
if (res.code === 200) {
this.total = res.result.totalElements
const userWeightMap = {}
this.hasRepliedInfo.forEach((option) => {
userWeightMap[option.type] = option.name
})
res.result.content.forEach((item) => {
item.hasRepliedName = userWeightMap[item.hasReplied]
})
this.csdnMessageList = res.result.content
}
this.loading = false
},
async dealMessageOne(userName) {
this.loading = true
this.dealMessageOneVisible = false
const { data: res } = await axios.get('http://localhost:80/csdn/message/dealMessageOne?userName=' + userName)
if (res.code === 200) {
this.currentUserName = null
this.messagePage()
} else {
console.error('Received non-200 status code', res)
}
this.loading = false
},
async dealMessageOne(userName) {
this.loading = true
const {data: res} = await ApiService.dealMessageOne(userName)
if (res.code === 200) {
this.currentUserName = null
await this.messagePage()
} else {
console.error('Received non-200 status code', res)
}
this.loading = false
},
async messageDeal() {
this.loading = true
this.messageDialogVisible = false
const { data: res1 } = await axios.get('http://localhost:80/csdn/message/dealMessage')
if (res1.code === 200) {
this.messagePage()
} else {
console.error('Received non-200 status code', res1)
}
const { data: res2 } = await axios.get('http://localhost:80/csdn/likeCollect/dealLikeCollect')
if (res2.code === 200) {
this.messagePage()
} else {
console.error('Received non-200 status code', res2)
}
this.loading = false
},
async refreshMessage() {
this.loading = true
this.refreshMessageDialogVisible = false
const { data: res } = await axios.get('http://localhost:80/csdn/message/acquireMessage')
if (res.code === 200) {
this.messagePage()
} else {
console.error('Received non-200 status code', res)
}
this.loading = false
},
async onDelete(id) {
this.loading = true
const { data: res } = await axios.get('http://localhost:80/csdn/user/delete', {
params: {
id: id,
},
})
this.deleteDialogVisible = false
this.messagePage()
this.loading = false
},
refreshPage() {
//获取问题类型的枚举
this.messagePage()
location.reload()
},
handleCurrentChange(currentPage) {
this.currentPage = currentPage
this.messagePage()
},
handleSizeChange(currentSize) {
this.pageSize = currentSize
this.messagePage()
},
getTagType(hasRepliedName) {
if (hasRepliedName == '未回复') {
return 'warning'
} else {
return 'success'
}
},
},
async messageDeal() {
this.loading = true
const {data: res1} = await ApiService.dealMessage()
if (res1.code === 200) {
await this.messagePage()
} else {
console.error('Received non-200 status code', res1)
}
const {data: res2} = await ApiService.dealLikeCollect()
if (res2.code === 200) {
await this.messagePage()
} else {
console.error('Received non-200 status code', res2)
}
this.loading = false
},
async acquireMessage() {
this.loading = true
this.refreshMessageDialogVisible = false
const {data: res} = await ApiService.acquireMessage()
if (res.code === 200) {
await this.messagePage()
} else {
console.error('Received non-200 status code', res)
}
this.loading = false
},
refreshPage() {
//获取问题类型的枚举
this.messagePage()
location.reload()
},
handleCurrentChange(currentPage) {
this.currentPage = currentPage
this.messagePage()
},
handleSizeChange(currentSize) {
this.pageSize = currentSize
this.messagePage()
},
getTagType(hasRepliedName) {
if (hasRepliedName == '未回复') {
return 'warning'
} else {
return 'success'
}
},
},
}
</script>
<style lang="less" scoped>
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
color: #333;
}
.pagination {
margin-top: 16px;
text-align: right;
margin-top: 16px;
text-align: right;
}
.header-button-item {
margin-right: 15px;
font-size: 20px;
margin-right: 15px;
font-size: 20px;
}
.red-title {
line-height: 24px;
font-size: 18px;
color: red;
line-height: 24px;
font-size: 18px;
color: red;
}
.backtop {
position: fixed;
bottom: 50px;
right: 50px;
height: 40px;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 20px;
background-color: #007aff;
color: #fff;
cursor: pointer;
z-index: 999;
position: fixed;
bottom: 50px;
right: 50px;
height: 40px;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 20px;
background-color: #007aff;
color: #fff;
cursor: pointer;
z-index: 999;
}
.custom-textarea {
width: 100%;
text-align: left;
width: 100%;
text-align: left;
}
.backtop:hover {
background-color: #0050a0;
background-color: #0050a0;
}
</style>
\ No newline at end of file
src/components/menus/MyPic.vue
浏览文件 @ c222f0bb
......@@ -4,8 +4,11 @@
<el-main>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item>
<el-select size="small" v-model="picType" placeholder="请选择" @change="queryPic">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
<el-input size="small" clearable v-model="formInline.picName" placeholder="请输入图片名称" @keydown.enter.native="queryPic"></el-input>
</el-form-item>
<el-form-item>
<el-select size="small" clearable v-model="formInline.type" placeholder="请选择" @change="queryPic">
<el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item>
......@@ -14,22 +17,44 @@
<el-form-item>
<el-button size="small" type="primary" @click="prepareAddPic">新增图片</el-button>
<el-dialog title="新增图片" :visible.sync="addPicVisible" style="width: 100%">
<el-upload ref="upload" :limit="30" accept=".jpg,.gif,.png,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx" name="files" multiple action="http://localhost:80/picInfo/upload" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :on-success="handleUploadSuccess">
<el-select size="small" v-model="formInline.type" placeholder="请选择图片类型">
<el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
</el-select>
<el-upload ref="upload" :limit="30" accept=".jpg,.gif,.png,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx" name="files" multiple :action="getUploadAction()" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :on-success="handleUploadSuccess">
<el-button slot="trigger" size="small" type="primary">选择图片</el-button>
<el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
</el-upload>
</el-dialog>
</el-form-item>
</el-form>
<el-table border :data="picList" v-loading="loading">
<el-form-item>
<el-button size="small" type="primary" @click="prepareBatchUpdatePic">批量修改</el-button>
<el-dialog title="批量修改" :visible.sync="batchUpdatePicVisible" style="width: 100%">
<el-form :model="form" class="custom-form">
<el-form-item label="图片类型" :label-width="formLabelWidth" class="form-item">
<el-select size="small" v-model="form.type" placeholder="请选择图片类型">
<el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="batchUpdatePicVisible = false">取 消</el-button>
<el-button type="primary" @click="batchUpdatePic()">确 定</el-button>
</div>
</el-dialog>
</el-form-item>
</el-form>
<el-table border ref="multipleTable" v-loading="loading" :data="picList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="id" label="序号" align="center" sortable></el-table-column>
<el-table-column prop="picName" label="图片名字" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="type" label="图片类型" align="center" show-overflow-tooltip></el-table-column>
<el-table-column align="center">
<template slot-scope="props">
<img :src="props.row.picUrl" alt="图片" height="100px" @click="showImageDialog(props.row.picUrl, props.$index)" style="cursor: pointer" />
</template>
</el-table-column>
<el-table-column label="创建时间" align="center">
<template slot-scope="props">
{{ props.row.createTime | dateFormat }}
......@@ -38,18 +63,20 @@
<el-table-column prop="操作" label="操作" width="100px" align="center">
<template slot-scope="props">
<el-button size="small" type="primary" @click.prevent="prePicEdit(props.row.id, props.row.picUrl, props.row.type)">编辑</el-button>
<el-button size="small" type="primary" @click.prevent="prePicEdit(props.row.id, props.row.picName, props.row.picUrl, props.row.type)">编辑</el-button>
<el-dialog title="编辑图片信息" :visible.sync="editPicVisible">
<el-form :model="form" class="custom-form">
<el-form-item align="center" class="form-item">
<img :src="form.picUrl" alt="图片" height="100px" style="cursor: pointer" />
</el-form-item>
<el-form-item label="" class="form-item" align="middle">
<el-select v-model="form.type" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
<el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-input clearable v-model="form.picName" placeholder="请输入图片名称"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="editPicVisible = false">取 消</el-button>
......@@ -83,15 +110,19 @@ export default {
name: 'MyPic',
data() {
return {
fileUrl: 'http://localhost:80/picInfo/upload',
form: {
picName: '',
picUrl: '',
type: 0,
type: '',
},
formInline: {
picType: 0,
type: '',
picName: '',
},
//待上传的图片
fileList: [],
multipleSelection: [],
// 用户列表数据
picList: [],
loading: false,
......@@ -99,54 +130,43 @@ export default {
currentPage: 1,
pageSize: 6,
total: 0,
formLabelWidth: '120px',
imageDialogVisible: false,
batchUpdatePicVisible: false,
addPicVisible: false,
editPicVisible: false,
enlargedImageUrl: '',
currentRowId: null,
imageIndex: 0, // 当前展示的图片索引
options: [
{
value: 0,
label: '宝宝',
},
{
value: 1,
label: '学习',
},
{
value: 2,
label: '风景',
},
{
value: 3,
label: '美女',
},
{
value: 4,
label: '猫咪',
},
{
value: 5,
label: '素材',
},
{
value: 6,
label: '动漫',
},
{
value: 99,
label: '其他',
},
],
picType: 0,
options: ['全部', '宝宝', '学习', '风景', '美女', '猫咪', '素材', '动漫', '其他'],
}
},
watch: {
formInline: {
handler(newVal, oldVal) {
this.currentPage = 1
localStorage.setItem('picPage', this.currentPage)
this.queryPic()
},
deep: true,
},
// 监听currentPage的变化，将新值保存到localStorage中
currentPage(newPage) {
localStorage.setItem('picPage', newPage.toString())
},
},
created() {
// 调用请求数据的方法
this.queryPic()
},
methods: {
prepareBatchUpdatePic() {
this.form.type = ''
this.batchUpdatePicVisible = true
},
getUploadAction() {
return this.fileUrl + '?type=' + this.formInline.type
},
async submitUpload() {
this.$refs.upload.submit()
this.addPicVisible = false
......@@ -160,8 +180,9 @@ export default {
prepareAddPic() {
this.addPicVisible = true
},
prePicEdit(id, picUrl, type) {
prePicEdit(id, picName, picUrl, type) {
this.currentRowId = id
this.form.picName = picName
this.form.picUrl = picUrl
this.form.type = type
this.editPicVisible = true
......@@ -199,7 +220,7 @@ export default {
},
async queryPic() {
this.loading = true
const { data: res } = await ApiService.queryPic(this.currentPage, this.pageSize, this.picType)
const { data: res } = await ApiService.queryPic(this.currentPage, this.pageSize, this.formInline)
if (res.code === 200) {
this.picList = res.result.records
this.total = res.result.total
......@@ -210,9 +231,10 @@ export default {
try {
this.loading = true
this.editPicVisible = false
const { data: res } = await ApiService.editPicConfirm(this.currentRowId, this.form.type)
const { data: res } = await ApiService.editPicConfirm(this.currentRowId, this.form.type, this.form.picName)
if (res.code === 200) {
this.form.type = 0
this.form.picName = ''
this.form.type = ''
this.form.picUrl = null
this.currentRowId = null
this.queryPic()
......@@ -227,6 +249,26 @@ export default {
}
},
async batchUpdatePic() {
this.loading = true
this.batchUpdatePicVisible = false
if (this.multipleSelection && this.multipleSelection.length === 0) {
this.loading = false
this.errorMsg('请选择需要处理项')
} else {
let ids = this.multipleSelection.map((item) => item.id)
const { data: res } = await ApiService.batchUpdatePic(ids, this.form.type)
if (res.code === 200) {
this.multipleSelection = []
this.form.type = ''
this.queryPic()
} else {
console.error('Received non-200 status code', res)
}
}
this.loading = false
},
handleCurrentChange(currentPage) {
this.currentPage = currentPage
this.queryPic()
......@@ -235,6 +277,16 @@ export default {
this.pageSize = currentSize
this.queryPic()
},
handleSelectionChange(val) {
this.multipleSelection = val
},
errorMsg(msg) {
this.$message({
showClose: true,
message: msg,
type: 'error',
})
},
},
}
</script>
......
src/components/menus/MyTripletDayInfo.vue
浏览文件 @ c222f0bb
......@@ -32,13 +32,11 @@
{{ props.row.tripletDate | dateDayFormat }}
</template>
</el-table-column>
<el-table-column align="center" sortable prop="likeNum" label="点赞数量" show-overflow-tooltip>
<template slot-scope="scope">
<el-tag :type="isMaxValue(scope.row.likeNum, 'likeNum')">{{ scope.row.likeNum }}</el-tag>
</template>
</el-table-column>
<el-table-column align="center" sortable prop="collectNum" label="收藏数量" show-overflow-tooltip>
<template slot-scope="scope">
<el-tag :type="isMaxValue(scope.row.collectNum, 'collectNum')">{{ scope.row.collectNum }}</el-tag>
......@@ -79,7 +77,6 @@
</template>
<script>
import axios from 'axios'
import ApiService from '../../api/ApiService'
export default {
name: 'MyTripletDayInfo',
......@@ -126,6 +123,8 @@ export default {
endDate: null,
weekInfo: null,
},
form: {
},
tripletDayInfoList: [],
weekInfo: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
likeStatus: [
......@@ -174,7 +173,7 @@ export default {
{ type: 2, name: '评论已满' },
{ type: 3, name: '禁言' },
{ type: 4, name: '评论太快' },
{ type: 5, name: '评论已经到了40条' },
{ type: 5, name: '评论已到40条' },
{ type: 8, name: '其他错误' },
{ type: 9, name: '评论成功' },
],
......@@ -249,7 +248,6 @@ export default {
res.result.from.content.forEach((item) => {
item.commentStatusName = commentStatusMap[item.commentStatus]
})
this.tripletDayInfoList = res.result.from.content
}
this.loading = false
......@@ -271,7 +269,7 @@ export default {
return 'info'
} else if (statusName == '已经点过赞' || statusName == '已经收藏过' || statusName == '已经评论过') {
return 'success'
} else if (statusName == '文章状态不能点赞' || statusName == '收藏已满' || statusName == '收藏夹不存在' || statusName == '评论已满' || statusName == '禁言' || statusName == '评论已经到了40条') {
} else if (statusName == '文章状态不能点赞' || statusName == '收藏已满' || statusName == '收藏夹不存在' || statusName == '评论已满' || statusName == '禁言' || statusName == '评论已到40条') {
return 'danger'
} else if (statusName == '点赞成功' || statusName == '收藏成功' || statusName == '评论成功') {
return 'success'
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或