fdzcxy212206277
/
SRuml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

zxl

Browse Source
zxl
zxl 8 months ago
commit 275f19998a
14 changed files with 2054 additions and 0 deletions
Show Stats Download Patch File Download Diff File

107
Manager.vue
Unescape View File

@ -0,0 +1,107 @@
<template>
<div class="manager-container">
<!-- 头部 -->
<div class="manager-header">
<div class="manager-header-left">
<img src="@/assets/imgs/logo.png" style="border-radius: 10px" />
<div class="title">后台管理系统</div>
</div>
<div class="manager-header-center">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: $route.path }">{{ $route.meta.name }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="manager-header-right">
<el-dropdown placement="bottom">
<div class="avatar">
<img :src="user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
<div>{{ user.name || '管理员' }}</div>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="goToPerson">个人信息</el-dropdown-item>
<el-dropdown-item @click.native="$router.push('/password')">修改密码</el-dropdown-item>
<el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<!-- 主体 -->
<div class="manager-main">
<!-- 侧边栏 -->
<div class="manager-main-left">
<el-menu :default-openeds="['info', 'user']" router style="border: none" :default-active="$route.path">
<el-menu-item index="/home">
<i class="el-icon-s-home"></i>
<span slot="title">系统首页</span>
</el-menu-item>
<el-submenu index="info">
<template slot="title">
<i class="el-icon-menu"></i><span>信息管理</span>
</template>
<el-menu-item v-if="user.role === 'ADMIN'" index="/notice">公告信息</el-menu-item>
<el-menu-item v-if="user.role === 'ADMIN'" index="/type">分类信息</el-menu-item>
<el-menu-item index="/goods">商品信息</el-menu-item>
<el-menu-item index="/orders">订单管理</el-menu-item>
<el-menu-item index="/comment">评论管理</el-menu-item>
</el-submenu>
<el-submenu v-if="user.role === 'ADMIN'" index="user">
<template slot="title">
<i class="el-icon-menu"></i><span>用户管理</span>
</template>
<el-menu-item index="/admin">管理员信息</el-menu-item>
<el-menu-item index="/business">商家信息</el-menu-item>
<el-menu-item index="/user">用户信息</el-menu-item>
</el-submenu>
</el-menu>
</div>
<!-- 数据表格 -->
<div class="manager-main-right">
<router-view @update:user="updateUser" />
</div>
</div>
</div>
</template>
<script>
export default {
name: "Manager",
data() {
return {
user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
}
},
created() {
if (!this.user.id) {
this.$router.push('/login')
}
},
methods: {
updateUser() {
this.user = JSON.parse(localStorage.getItem('xm-user') || '{}') // 重新获取下用户的最新信息
},
goToPerson() {
if (this.user.role === 'ADMIN') {
this.$router.push('/adminPerson')
}
if (this.user.role === 'BUSINESS') {
this.$router.push('/businessPerson')
}
},
logout() {
localStorage.removeItem('xm-user')
this.$router.push('/login')
}
}
}
</script>
<style scoped>
@import "@/assets/css/manager.css";
</style>

24
manager/403.vue
Unescape View File

@ -0,0 +1,24 @@
<template>
<div>
<div style="height: calc(100vh - 80px); overflow: hidden; display: flex; align-items: center; justify-content: center">
<div style="font-size: 40px">无权访问 <router-link to="/">返回首页</router-link></div>
</div>
</div>
</template>
<script>
export default {
name: "Auth",
data() {
return {}
},
created() {
},
methods: {}
}
</script>
<style scoped>
</style>

205
manager/Admin.vue
Unescape View File

@ -0,0 +1,205 @@
<template>
<div>
<div class="search">
<el-input placeholder="请输入账号查询" style="width: 200px" v-model="username"></el-input>
<el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
<el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
</div>
<div class="operation">
<el-button type="primary" plain @click="handleAdd">新增</el-button>
<el-button type="danger" plain @click="delBatch">批量删除</el-button>
</div>
<div class="table">
<el-table :data="tableData" strip @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column prop="id" label="序号" width="70" align="center" sortable></el-table-column>
<el-table-column prop="username" label="账号"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="phone" label="电话"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column label="头像">
<template v-slot="scope">
<div style="display: flex; align-items: center">
<el-image style="width: 40px; height: 40px; border-radius: 50%" v-if="scope.row.avatar"
:src="scope.row.avatar" :preview-src-list="[scope.row.avatar]"></el-image>
</div>
</template>
</el-table-column>
<el-table-column prop="role" label="角色"></el-table-column>
<el-table-column label="操作" align="center" width="180">
<template v-slot="scope">
<el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 10, 20]"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="total">
</el-pagination>
</div>
</div>
<el-dialog title="管理员" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
<el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="form.phone" placeholder="电话"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="邮箱"></el-input>
</el-form-item>
<el-form-item label="头像">
<el-upload
class="avatar-uploader"
:action="$baseUrl + '/files/upload'"
:headers="{ token: user.token }"
list-type="picture"
:on-success="handleAvatarSuccess"
>
<el-button type="primary">上传头像</el-button>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="fromVisible = false">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "Admin",
data() {
return {
tableData: [], // 所有的数据
pageNum: 1, // 当前的页码
pageSize: 10, // 每页显示的个数
total: 0,
username: null,
fromVisible: false,
form: {},
user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
rules: {
username: [
{required: true, message: '请输入账号', trigger: 'blur'},
]
},
ids: []
}
},
created() {
this.load(1)
},
methods: {
handleAdd() { // 新增数据
this.form = {} // 新增数据的时候清空数据
this.fromVisible = true // 打开弹窗
},
handleEdit(row) { // 编辑数据
this.form = JSON.parse(JSON.stringify(row)) // 给form对象赋值 注意要深拷贝数据
this.fromVisible = true // 打开弹窗
},
save() { // 保存按钮触发的逻辑 它会触发新增或者更新
this.$refs.formRef.validate((valid) => {
if (valid) {
this.$request({
url: this.form.id ? '/admin/update' : '/admin/add',
method: this.form.id ? 'PUT' : 'POST',
data: this.form
}).then(res => {
if (res.code === '200') { // 表示成功保存
this.$message.success('保存成功')
this.load(1)
this.fromVisible = false
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
}
})
},
del(id) { // 单个删除
this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
this.$request.delete('/admin/delete/' + id).then(res => {
if (res.code === '200') { // 表示操作成功
this.$message.success('操作成功')
this.load(1)
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
}).catch(() => {
})
},
handleSelectionChange(rows) { // 当前选中的所有的行数据
this.ids = rows.map(v => v.id)
},
delBatch() { // 批量删除
if (!this.ids.length) {
this.$message.warning('请选择数据')
return
}
this.$confirm('您确定批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
this.$request.delete('/admin/delete/batch', {data: this.ids}).then(res => {
if (res.code === '200') { // 表示操作成功
this.$message.success('操作成功')
this.load(1)
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
}).catch(() => {
})
},
load(pageNum) { // 分页查询
if (pageNum) this.pageNum = pageNum
this.$request.get('/admin/selectPage', {
params: {
pageNum: this.pageNum,
pageSize: this.pageSize,
username: this.username,
}
}).then(res => {
this.tableData = res.data?.list
this.total = res.data?.total
})
},
reset() {
this.username = null
this.load(1)
},
handleCurrentChange(pageNum) {
this.load(pageNum)
},
handleAvatarSuccess(response, file, fileList) {
// 把头像属性换成上传的图片的链接
this.form.avatar = response.data
},
}
}
</script>
<style scoped>
</style>

105
manager/AdminPerson.vue
Unescape View File

@ -0,0 +1,105 @@
<template>
<div>
<el-card style="width: 50%">
<el-form :model="user" label-width="100px" style="padding-right: 50px">
<div style="margin: 15px; text-align: center">
<el-upload
class="avatar-uploader"
:action="$baseUrl + '/files/upload'"
:show-file-list="false"
:on-success="handleAvatarSuccess"
>
<img v-if="user.avatar" :src="user.avatar" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
<el-form-item label="用户名" prop="username">
<el-input v-model="user.username" placeholder="用户名" disabled></el-input>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="user.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="user.phone" placeholder="电话"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="user.email" placeholder="邮箱"></el-input>
</el-form-item>
<div style="text-align: center; margin-bottom: 20px">
<el-button type="primary" @click="update">保 存</el-button>
</div>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
name: "AdminPerson",
data() {
return {
user: JSON.parse(localStorage.getItem('xm-user') || '{}')
}
},
created() {
},
methods: {
update() {
// 保存当前的用户信息到数据库
this.$request.put('/admin/update', this.user).then(res => {
if (res.code === '200') {
// 成功更新
this.$message.success('保存成功')
// 更新浏览器缓存里的用户信息
localStorage.setItem('xm-user', JSON.stringify(this.user))
// 触发父级的数据更新
this.$emit('update:user')
} else {
this.$message.error(res.msg)
}
})
},
handleAvatarSuccess(response, file, fileList) {
// 把user的头像属性换成上传的图片的链接
this.$set(this.user, 'avatar', response.data)
},
}
}
</script>
<style scoped>
/deep/.el-form-item__label {
font-weight: bold;
}
/deep/.el-upload {
border-radius: 50%;
}
/deep/.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
cursor: pointer;
position: relative;
overflow: hidden;
border-radius: 50%;
}
/deep/.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
border-radius: 50%;
}
.avatar {
width: 120px;
height: 120px;
display: block;
border-radius: 50%;
}
</style>

217
manager/Business.vue
Unescape View File

@ -0,0 +1,217 @@
<template>
<div>
<div class="search">
<el-input placeholder="请输入账号查询" style="width: 200px" v-model="username"></el-input>
<el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
<el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
</div>
<div class="operation">
<el-button type="primary" plain @click="handleAdd">新增</el-button>
<el-button type="danger" plain @click="delBatch">批量删除</el-button>
</div>
<div class="table">
<el-table :data="tableData" strip @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column prop="id" label="序号" width="70" align="center" sortable></el-table-column>
<el-table-column prop="username" label="账号"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="phone" label="电话"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column label="头像">
<template v-slot="scope">
<div style="display: flex; align-items: center">
<el-image style="width: 40px; height: 40px; border-radius: 50%" v-if="scope.row.avatar"
:src="scope.row.avatar" :preview-src-list="[scope.row.avatar]"></el-image>
</div>
</template>
</el-table-column>
<el-table-column prop="role" label="角色"></el-table-column>
<el-table-column prop="description" label="商家介绍" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="status" label="审核状态"></el-table-column>
<el-table-column label="操作" align="center" width="180">
<template v-slot="scope">
<el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 10, 20]"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="total">
</el-pagination>
</div>
</div>
<el-dialog title="管理员" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
<el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item label="店铺名" prop="name">
<el-input v-model="form.name" placeholder="店铺名"></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="form.phone" placeholder="电话"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="birth">
<el-input v-model="form.email" placeholder="邮箱"></el-input>
</el-form-item>
<el-form-item label="头像">
<el-upload
class="avatar-uploader"
:action="$baseUrl + '/files/upload'"
:headers="{ token: user.token }"
list-type="picture"
:on-success="handleAvatarSuccess"
>
<el-button type="primary">上传头像</el-button>
</el-upload>
</el-form-item>
<el-form-item label="商家介绍" prop="description">
<el-input v-model="form.description" placeholder="商家介绍"></el-input>
</el-form-item>
<el-form-item label="审核状态" prop="status">
<el-select v-model="form.status" placeholder="请选择" style="width: 100%">
<el-option label="审核中" value="审核中"></el-option>
<el-option label="审核通过" value="审核通过"></el-option>
<el-option label="审核不通过" value="审核不通过"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="fromVisible = false">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "Admin",
data() {
return {
tableData: [], // 所有的数据
pageNum: 1, // 当前的页码
pageSize: 10, // 每页显示的个数
total: 0,
username: null,
fromVisible: false,
form: {},
user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
rules: {
username: [
{required: true, message: '请输入账号', trigger: 'blur'},
]
},
ids: []
}
},
created() {
this.load(1)
},
methods: {
handleAdd() { // 新增数据
this.form = {} // 新增数据的时候清空数据
this.fromVisible = true // 打开弹窗
},
handleEdit(row) { // 编辑数据
this.form = JSON.parse(JSON.stringify(row)) // 给form对象赋值 注意要深拷贝数据
this.fromVisible = true // 打开弹窗
},
save() { // 保存按钮触发的逻辑 它会触发新增或者更新
this.$refs.formRef.validate((valid) => {
if (valid) {
this.$request({
url: this.form.id ? '/business/update' : '/business/add',
method: this.form.id ? 'PUT' : 'POST',
data: this.form
}).then(res => {
if (res.code === '200') { // 表示成功保存
this.$message.success('保存成功')
this.load(1)
this.fromVisible = false
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
}
})
},
del(id) { // 单个删除
this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
this.$request.delete('/business/delete/' + id).then(res => {
if (res.code === '200') { // 表示操作成功
this.$message.success('操作成功')
this.load(1)
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
}).catch(() => {
})
},
handleSelectionChange(rows) { // 当前选中的所有的行数据
this.ids = rows.map(v => v.id)
},
delBatch() { // 批量删除
if (!this.ids.length) {
this.$message.warning('请选择数据')
return
}
this.$confirm('您确定批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
this.$request.delete('/business/delete/batch', {data: this.ids}).then(res => {
if (res.code === '200') { // 表示操作成功
this.$message.success('操作成功')
this.load(1)
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
}).catch(() => {
})
},
load(pageNum) { // 分页查询
if (pageNum) this.pageNum = pageNum
this.$request.get('/business/selectPage', {
params: {
pageNum: this.pageNum,
pageSize: this.pageSize,
username: this.username,
}
}).then(res => {
this.tableData = res.data?.list
this.total = res.data?.total
})
},
reset() {
this.username = null
this.load(1)
},
handleCurrentChange(pageNum) {
this.load(pageNum)
},
handleAvatarSuccess(response, file, fileList) {
// 把头像属性换成上传的图片的链接
this.form.avatar = response.data
},
}
}
</script>
<style scoped>
</style>

111
manager/BusinessPerson.vue
Unescape View File

@ -0,0 +1,111 @@
<template>
<div>
<el-card style="width: 50%">
<el-form :model="user" label-width="100px" style="padding-right: 50px">
<div style="margin: 15px; text-align: center">
<el-upload
class="avatar-uploader"
:action="$baseUrl + '/files/upload'"
:show-file-list="false"
:on-success="handleAvatarSuccess"
>
<img v-if="user.avatar" :src="user.avatar" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
<el-form-item label="用户名" prop="username">
<el-input v-model="user.username" placeholder="用户名" disabled></el-input>
</el-form-item>
<el-form-item label="店铺名" prop="name">
<el-input v-model="user.name" placeholder="店铺名"></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="user.phone" placeholder="电话"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="user.email" placeholder="邮箱"></el-input>
</el-form-item>
<el-form-item label="介绍" prop="description">
<el-input type="textarea" v-model="user.description" placeholder="店铺介绍"></el-input>
</el-form-item>
<el-form-item label="审核状态" prop="status">
<el-input v-model="user.status" placeholder="审核状态" disabled></el-input>
</el-form-item>
<div style="text-align: center; margin-bottom: 20px">
<el-button type="primary" @click="update">保 存</el-button>
</div>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
name: "AdminPerson",
data() {
return {
user: JSON.parse(localStorage.getItem('xm-user') || '{}')
}
},
created() {
},
methods: {
update() {
// 保存当前的用户信息到数据库
this.$request.put('/business/update', this.user).then(res => {
if (res.code === '200') {
// 成功更新
this.$message.success('保存成功')
// 更新浏览器缓存里的用户信息
localStorage.setItem('xm-user', JSON.stringify(this.user))
// 触发父级的数据更新
this.$emit('update:user')
} else {
this.$message.error(res.msg)
}
})
},
handleAvatarSuccess(response, file, fileList) {
// 把user的头像属性换成上传的图片的链接
this.$set(this.user, 'avatar', response.data)
},
}
}
</script>
<style scoped>
/deep/.el-form-item__label {
font-weight: bold;
}
/deep/.el-upload {
border-radius: 50%;
}
/deep/.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
cursor: pointer;
position: relative;
overflow: hidden;
border-radius: 50%;
}
/deep/.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
border-radius: 50%;
}
.avatar {
width: 120px;
height: 120px;
display: block;
border-radius: 50%;
}
</style>

151
manager/Comment.vue
Unescape View File

@ -0,0 +1,151 @@
<template>
<div>
<div class="search">
<el-input placeholder="请输入评论内容" style="width: 200px" v-model="content"></el-input>
<el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
<el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
</div>
<div class="operation">
<el-button type="danger" plain @click="delBatch">批量删除</el-button>
</div>
<div class="table">
<el-table :data="tableData" stripe @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column prop="id" label="序号" width="80" align="center" sortable></el-table-column>
<el-table-column prop="goodsName" label="商品名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="content" label="评论内容" show-overflow-tooltip></el-table-column>
<el-table-column prop="userName" label="评论用户" show-overflow-tooltip></el-table-column>
<el-table-column prop="time" label="评论时间" show-overflow-tooltip></el-table-column>
<el-table-column prop="businessName" label="商户" show-overflow-tooltip></el-table-column>
<el-table-column prop="goodsName" label="商品" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="180" align="center">
<template v-slot="scope">
<el-button plain type="primary" size="mini" v-if="scope.row.status === '待发货'" @click="updateStatus(scope.row, '待收货')">发货</el-button>
<el-button plain type="danger" size="mini" @click=del(scope.row.id)>删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 10, 20]"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="total">
</el-pagination>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Notice",
data() {
return {
tableData: [], // 所有的数据
pageNum: 1, // 当前的页码
pageSize: 10, // 每页显示的个数
total: 0,
content: null,
form: {},
user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
ids: []
}
},
created() {
this.load(1)
},
methods: {
save() { // 保存按钮触发的逻辑 它会触发新增或者更新
this.$request({
url: this.form.id ? '/comment/update' : '/comment/add',
method: this.form.id ? 'PUT' : 'POST',
data: this.form
}).then(res => {
if (res.code === '200') { // 表示成功保存
this.$message.success('保存成功')
this.load(1)
this.fromVisible = false
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
},
del(id) { // 单个删除
this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
this.$request.delete('/comment/delete/' + id).then(res => {
if (res.code === '200') { // 表示操作成功
this.$message.success('操作成功')
this.load(1)
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
}).catch(() => {
})
},
handleSelectionChange(rows) { // 当前选中的所有的行数据
this.ids = rows.map(v => v.id) // [1,2]
},
delBatch() { // 批量删除
if (!this.ids.length) {
this.$message.warning('请选择数据')
return
}
this.$confirm('您确定批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
this.$request.delete('/comment/delete/batch', {data: this.ids}).then(res => {
if (res.code === '200') { // 表示操作成功
this.$message.success('操作成功')
this.load(1)
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
}).catch(() => {
})
},
load(pageNum) { // 分页查询
if (pageNum) this.pageNum = pageNum
this.$request.get('/comment/selectPage', {
params: {
pageNum: this.pageNum,
pageSize: this.pageSize,
content: this.content,
}
}).then(res => {
if (res.code === '200') {
this.tableData = res.data?.list
this.total = res.data?.total
} else {
this.$message.error(res.msg)
}
})
},
reset() {
this.content = null
this.load(1)
},
handleCurrentChange(pageNum) {
this.load(pageNum)
},
handleAvatarSuccess(response, file, fileList) {
this.form.img = response.data
},
updateStatus(row, status) {
this.form = row;
this.form.status = status
this.save()
}
}
}
</script>
<style scoped>
</style>

264
manager/Goods.vue
Unescape View File

@ -0,0 +1,264 @@
<template>
<div>
<div class="search">
<el-input placeholder="请输入商品名称查询" style="width: 200px" v-model="name"></el-input>
<el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
<el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
</div>
<div class="operation">
<el-button v-if="user.role === 'BUSINESS'" type="primary" plain @click="handleAdd" >发布商品</el-button>
<el-button type="danger" plain @click="delBatch">批量删除</el-button>
</div>
<div class="table">
<el-table :data="tableData" stripe @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column prop="id" label="序号" width="80" align="center" sortable></el-table-column>
<el-table-column label="商品主图">
<template v-slot="scope">
<div style="display: flex; align-items: center">
<el-image style="width: 40px; height: 40px; " v-if="scope.row.img"
:src="scope.row.img" :preview-src-list="[scope.row.img]"></el-image>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="商品名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="description" label="商品描述">
<template slot-scope="scope">
<el-button type="success" @click="viewEditor(scope.row.description)">点击查看</el-button>
</template>
</el-table-column>
<el-table-column prop="price" label="商品价格" show-overflow-tooltip></el-table-column>
<el-table-column prop="unit" label="计件单位" show-overflow-tooltip></el-table-column>
<el-table-column prop="typeName" label="商品分类" show-overflow-tooltip></el-table-column>
<el-table-column prop="businessName" label="所属商家" show-overflow-tooltip></el-table-column>
<el-table-column prop="count" label="商品销量" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="180" align="center">
<template v-slot="scope">
<el-button plain type="primary" @click="handleEdit(scope.row)" size="mini">编辑</el-button>
<el-button plain type="danger" size="mini" @click=del(scope.row.id)>删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 10, 20]"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="total">
</el-pagination>
</div>
</div>
<el-dialog title="信息" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close @close="cancel">
<el-form label-width="100px" style="padding-right: 50px" :model="form" :rules="rules" ref="formRef">
<el-form-item label="商品主图">
<el-upload
class="avatar-uploader"
:action="$baseUrl + '/files/upload'"
:headers="{ token: user.token }"
list-type="picture"
:on-success="handleAvatarSuccess"
>
<el-button type="primary">上传图片</el-button>
</el-upload>
</el-form-item>
<el-form-item prop="name" label="商品名称">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item prop="name" label="商品价格">
<el-input v-model="form.price" autocomplete="off"></el-input>
</el-form-item>
<el-form-item prop="typeId" label="商品分类">
<el-select v-model="form.typeId" placeholder="请选择分类" style="width: 100%">
<el-option v-for="item in typeData" :label="item.name" :value="item.id" :key="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="unit" label="计件单位">
<el-input v-model="form.unit" autocomplete="off"></el-input>
</el-form-item>
<el-form-item prop="description" label="商品介绍">
<div id="editor" style="width: 100%"></div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</div>
</el-dialog>
<el-dialog title="商品介绍" :visible.sync="editorVisible" width="50%">
<div v-html="this.viewData" class="w-e-text"></div>
</el-dialog>
</div>
</template>
<script>
import E from 'wangeditor'
let editor
function initWangEditor(content) { setTimeout(() => {
if (!editor) {
editor = new E('#editor')
editor.config.placeholder = '请输入内容'
editor.config.uploadFileName = 'file'
editor.config.uploadImgServer = 'http://localhost:9090/files/wang/upload'
editor.create()
}
editor.txt.html(content)
}, 0)
}
export default {
name: "Notice",
data() {
return {
tableData: [], // 所有的数据
pageNum: 1, // 当前的页码
pageSize: 10, // 每页显示的个数
total: 0,
name: null,
fromVisible: false,
editorVisible: false,
form: {},
user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
rules: {
title: [
{required: true, name: '请输入商品名称', trigger: 'blur'},
],
content: [
{required: true, img: '请输上传商品主图', trigger: 'blur'},
]
},
ids: [],
typeData: [],
viewData: null,
}
},
created() {
this.load(1)
this.loadType()
},
methods: {
loadType() {
this.$request.get('/type/selectAll').then(res => {
if (res.code === '200') {
this.typeData = res.data
} else {
this.$message.error(res.msg)
}
})
},
handleAdd() { // 新增数据
if ('审核通过' !== this.user.status) {
this.$message.warning('您的店铺信息还未审核通过，暂时不允许发布商品')
return
}
this.form = {} // 新增数据的时候清空数据
initWangEditor( '')
this.fromVisible = true // 打开弹窗
},
handleEdit(row) { // 编辑数据
this.form = JSON.parse(JSON.stringify(row)) // 给form对象赋值 注意要深拷贝数据
initWangEditor(this.form.description || '')
this.fromVisible = true // 打开弹窗
},
viewEditor(content) {
this.viewData = content
this.editorVisible = true
},
cancel() {
this.fromVisible = false
location.href = '/goods'
},
save() { // 保存按钮触发的逻辑 它会触发新增或者更新
this.$refs.formRef.validate((valid) => {
if (valid) {
this.form.description = editor.txt.html()
this.$request({
url: this.form.id ? '/goods/update' : '/goods/add',
method: this.form.id ? 'PUT' : 'POST',
data: this.form
}).then(res => {
if (res.code === '200') { // 表示成功保存
this.$message.success('保存成功')
// this.load(1)
this.fromVisible = false
location.href = '/goods'
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
}
})
},
del(id) { // 单个删除
this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
this.$request.delete('/goods/delete/' + id).then(res => {
if (res.code === '200') { // 表示操作成功
this.$message.success('操作成功')
this.load(1)
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
}).catch(() => {
})
},
handleSelectionChange(rows) { // 当前选中的所有的行数据
this.ids = rows.map(v => v.id) // [1,2]
},
delBatch() { // 批量删除
if (!this.ids.length) {
this.$message.warning('请选择数据')
return
}
this.$confirm('您确定批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
this.$request.delete('/goods/delete/batch', {data: this.ids}).then(res => {
if (res.code === '200') { // 表示操作成功
this.$message.success('操作成功')
this.load(1)
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
}).catch(() => {
})
},
load(pageNum) { // 分页查询
if (pageNum) this.pageNum = pageNum
this.$request.get('/goods/selectPage', {
params: {
pageNum: this.pageNum,
pageSize: this.pageSize,
name: this.name,
}
}).then(res => {
this.tableData = res.data?.list
this.total = res.data?.total
})
},
reset() {
this.name = null
this.load(1)
},
handleCurrentChange(pageNum) {
this.load(pageNum)
},
handleAvatarSuccess(response, file, fileList) {
this.form.img = response.data
},
}
}
</script>
<style scoped>
</style>

44
manager/Home.vue
Unescape View File

@ -0,0 +1,44 @@
<template>
<div>
<div class="card" style="padding: 15px">
您好，{{ user?.name }}！欢迎使用本系统
</div>
<div style="display: flex; margin: 10px 0">
<div style="width: 50%;" class="card">
<div style="margin-bottom: 30px; font-size: 20px; font-weight: bold">公告列表</div>
<div >
<el-timeline reverse slot="reference">
<el-timeline-item v-for="item in notices" :key="item.id" :timestamp="item.time">
<el-popover
placement="right"
width="200"
trigger="hover"
:content="item.content">
<span slot="reference">{{ item.title }}</span>
</el-popover>
</el-timeline-item>
</el-timeline>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
notices: []
}
},
created() {
this.$request.get('/notice/selectAll').then(res => {
this.notices = res.data || []
})
}
}
</script>

178
manager/Notice.vue
Unescape View File

@ -0,0 +1,178 @@
<template>
<div>
<div class="search">
<el-input placeholder="请输入标题查询" style="width: 200px" v-model="title"></el-input>
<el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
<el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
</div>
<div class="operation">
<el-button type="primary" plain @click="handleAdd">新增</el-button>
<el-button type="danger" plain @click="delBatch">批量删除</el-button>
</div>
<div class="table">
<el-table :data="tableData" stripe @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column prop="id" label="序号" width="80" align="center" sortable></el-table-column>
<el-table-column prop="title" label="标题" show-overflow-tooltip></el-table-column>
<el-table-column prop="content" label="内容" show-overflow-tooltip></el-table-column>
<el-table-column prop="time" label="创建时间"></el-table-column>
<el-table-column prop="user" label="创建人"></el-table-column>
<el-table-column label="操作" width="180" align="center">
<template v-slot="scope">
<el-button plain type="primary" @click="handleEdit(scope.row)" size="mini">编辑</el-button>
<el-button plain type="danger" size="mini" @click=del(scope.row.id)>删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 10, 20]"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="total">
</el-pagination>
</div>
</div>
<el-dialog title="信息" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
<el-form label-width="100px" style="padding-right: 50px" :model="form" :rules="rules" ref="formRef">
<el-form-item prop="title" label="标题">
<el-input v-model="form.title" autocomplete="off"></el-input>
</el-form-item>
<el-form-item prop="content" label="内容">
<el-input type="textarea" :rows="5" v-model="form.content" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="fromVisible = false">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "Notice",
data() {
return {
tableData: [], // 所有的数据
pageNum: 1, // 当前的页码
pageSize: 10, // 每页显示的个数
total: 0,
title: null,
fromVisible: false,
form: {},
user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
rules: {
title: [
{required: true, message: '请输入标题', trigger: 'blur'},
],
content: [
{required: true, message: '请输入内容', trigger: 'blur'},
]
},
ids: []
}
},
created() {
this.load(1)
},
methods: {
handleAdd() { // 新增数据
this.form = {} // 新增数据的时候清空数据
this.fromVisible = true // 打开弹窗
},
handleEdit(row) { // 编辑数据
this.form = JSON.parse(JSON.stringify(row)) // 给form对象赋值 注意要深拷贝数据
this.fromVisible = true // 打开弹窗
},
save() { // 保存按钮触发的逻辑 它会触发新增或者更新
this.$refs.formRef.validate((valid) => {
if (valid) {
this.$request({
url: this.form.id ? '/notice/update' : '/notice/add',
method: this.form.id ? 'PUT' : 'POST',
data: this.form
}).then(res => {
if (res.code === '200') { // 表示成功保存
this.$message.success('保存成功')
this.load(1)
this.fromVisible = false
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
}
})
},
del(id) { // 单个删除
this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
this.$request.delete('/notice/delete/' + id).then(res => {
if (res.code === '200') { // 表示操作成功
this.$message.success('操作成功')
this.load(1)
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
}).catch(() => {
})
},
handleSelectionChange(rows) { // 当前选中的所有的行数据
this.ids = rows.map(v => v.id) // [1,2]
},
delBatch() { // 批量删除
if (!this.ids.length) {
this.$message.warning('请选择数据')
return
}
this.$confirm('您确定批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
this.$request.delete('/notice/delete/batch', {data: this.ids}).then(res => {
if (res.code === '200') { // 表示操作成功
this.$message.success('操作成功')
this.load(1)
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
}).catch(() => {
})
},
load(pageNum) { // 分页查询
if (pageNum) this.pageNum = pageNum
this.$request.get('/notice/selectPage', {
params: {
pageNum: this.pageNum,
pageSize: this.pageSize,
title: this.title,
}
}).then(res => {
this.tableData = res.data?.list
this.total = res.data?.total
})
},
reset() {
this.title = null
this.load(1)
},
handleCurrentChange(pageNum) {
this.load(pageNum)
},
}
}
</script>
<style scoped>
</style>

167
manager/Orders.vue
Unescape View File

@ -0,0 +1,167 @@
<template>
<div>
<div class="search">
<el-input placeholder="请输入订单编号" style="width: 200px" v-model="orderId"></el-input>
<el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
<el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
</div>
<div class="operation">
<el-button type="danger" plain @click="delBatch">批量删除</el-button>
</div>
<div class="table">
<el-table :data="tableData" stripe @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column prop="id" label="序号" width="80" align="center" sortable></el-table-column>
<el-table-column label="商品图片">
<template v-slot="scope">
<div style="display: flex; align-items: center">
<el-image style="width: 40px; height: 40px; " v-if="scope.row.goodsImg"
:src="scope.row.goodsImg" :preview-src-list="[scope.row.goodsImg]"></el-image>
</div>
</template>
</el-table-column>
<el-table-column prop="orderId" label="订单编号"></el-table-column>
<el-table-column prop="goodsName" label="商品名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="goodsPrice" label="商品单价" show-overflow-tooltip>
<template v-slot="scope">
{{scope.row.goodsPrice}} / {{scope.row.goodsUnit}}
</template>
</el-table-column>
<el-table-column prop="num" label="商品数量" show-overflow-tooltip></el-table-column>
<el-table-column prop="price" label="订单总价" show-overflow-tooltip></el-table-column>
<el-table-column prop="businessName" label="所属店铺" show-overflow-tooltip></el-table-column>
<el-table-column prop="username" label="收货人" show-overflow-tooltip></el-table-column>
<el-table-column prop="useraddress" label="收货地址" show-overflow-tooltip></el-table-column>
<el-table-column prop="phone" label="联系电话" show-overflow-tooltip></el-table-column>
<el-table-column prop="status" label="订单状态" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="180" align="center">
<template v-slot="scope">
<el-button plain type="primary" size="mini" v-if="scope.row.status === '待发货'" @click="updateStatus(scope.row, '待收货')">发货</el-button>
<el-button plain type="danger" size="mini" @click=del(scope.row.id)>删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 10, 20]"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="total">
</el-pagination>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Notice",
data() {
return {
tableData: [], // 所有的数据
pageNum: 1, // 当前的页码
pageSize: 10, // 每页显示的个数
total: 0,
orderId: null,
form: {},
user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
ids: []
}
},
created() {
this.load(1)
},
methods: {
save() { // 保存按钮触发的逻辑 它会触发新增或者更新
this.$request({
url: this.form.id ? '/orders/update' : '/orders/add',
method: this.form.id ? 'PUT' : 'POST',
data: this.form
}).then(res => {
if (res.code === '200') { // 表示成功保存
this.$message.success('保存成功')
this.load(1)
this.fromVisible = false
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
},
del(id) { // 单个删除
this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
this.$request.delete('/orders/delete/' + id).then(res => {
if (res.code === '200') { // 表示操作成功
this.$message.success('操作成功')
this.load(1)
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
}).catch(() => {
})
},
handleSelectionChange(rows) { // 当前选中的所有的行数据
this.ids = rows.map(v => v.id) // [1,2]
},
delBatch() { // 批量删除
if (!this.ids.length) {
this.$message.warning('请选择数据')
return
}
this.$confirm('您确定批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
this.$request.delete('/orders/delete/batch', {data: this.ids}).then(res => {
if (res.code === '200') { // 表示操作成功
this.$message.success('操作成功')
this.load(1)
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
}).catch(() => {
})
},
load(pageNum) { // 分页查询
if (pageNum) this.pageNum = pageNum
this.$request.get('/orders/selectPage', {
params: {
pageNum: this.pageNum,
pageSize: this.pageSize,
orderId: this.orderId,
}
}).then(res => {
if (res.code === '200') {
this.tableData = res.data?.list
this.total = res.data?.total
} else {
this.$message.error(res.msg)
}
})
},
reset() {
this.orderId = null
this.load(1)
},
handleCurrentChange(pageNum) {
this.load(pageNum)
},
handleAvatarSuccess(response, file, fileList) {
this.form.img = response.data
},
updateStatus(row, status) {
this.form = row;
this.form.status = status
this.save()
}
}
}
</script>
<style scoped>
</style>

79
manager/Password.vue
Unescape View File

@ -0,0 +1,79 @@
<template>
<div>
<el-card style="width: 50%">
<el-form ref="formRef" :model="user" :rules="rules" label-width="100px" style="padding-right: 50px">
<el-form-item label="原始密码" prop="password">
<el-input show-password v-model="user.password" placeholder="原始密码"></el-input>
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input show-password v-model="user.newPassword" placeholder="新密码"></el-input>
</el-form-item>
<el-form-item label="确认新密码" prop="confirmPassword">
<el-input show-password v-model="user.confirmPassword" placeholder="确认密码"></el-input>
</el-form-item>
<div style="text-align: center; margin-bottom: 20px">
<el-button type="primary" @click="update">确认修改</el-button>
</div>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
name: "Password",
data() {
const validatePassword = (rule, value, callback) => {
if (value === '') {
callback(new Error('请确认密码'))
} else if (value !== this.user.newPassword) {
callback(new Error('确认密码错误'))
} else {
callback()
}
}
return {
user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
rules: {
password: [
{ required: true, message: '请输入原始密码', trigger: 'blur' },
],
newPassword: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
],
confirmPassword: [
{ validator: validatePassword, required: true, trigger: 'blur' },
],
}
}
},
created() {
},
methods: {
update() {
this.$refs.formRef.validate((valid) => {
if (valid) {
this.$request.put('/updatePassword', this.user).then(res => {
if (res.code === '200') {
// 成功更新
localStorage.removeItem('xm-user') // 清除缓存的用户信息
this.$message.success('修改密码成功')
this.$router.push('/login')
} else {
this.$message.error(res.msg)
}
})
}
})
},
}
}
</script>
<style scoped>
/deep/.el-form-item__label {
font-weight: bold;
}
</style>

197
manager/Type.vue
Unescape View File

@ -0,0 +1,197 @@
<template>
<div>
<div class="search">
<el-input placeholder="请输入分类名称查询" style="width: 200px" v-model="name"></el-input>
<el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
<el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
</div>
<div class="operation">
<el-button type="primary" plain @click="handleAdd">新增</el-button>
<el-button type="danger" plain @click="delBatch">批量删除</el-button>
</div>
<div class="table">
<el-table :data="tableData" stripe @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column prop="id" label="序号" width="80" align="center" sortable></el-table-column>
<el-table-column prop="name" label="分类名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="description" label="分类描述" show-overflow-tooltip></el-table-column>
<el-table-column label="分类图标">
<template v-slot="scope">
<div style="display: flex; align-items: center">
<el-image style="width: 40px; height: 40px; " v-if="scope.row.img"
:src="scope.row.img" :preview-src-list="[scope.row.img]"></el-image>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center">
<template v-slot="scope">
<el-button plain type="primary" @click="handleEdit(scope.row)" size="mini">编辑</el-button>
<el-button plain type="danger" size="mini" @click=del(scope.row.id)>删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 10, 20]"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="total">
</el-pagination>
</div>
</div>
<el-dialog title="信息" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
<el-form label-width="100px" style="padding-right: 50px" :model="form" :rules="rules" ref="formRef">
<el-form-item prop="name" label="分类名称">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item prop="description" label="分类描述">
<el-input v-model="form.description" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="分类图标">
<el-upload
class="avatar-uploader"
:action="$baseUrl + '/files/upload'"
:headers="{ token: user.token }"
list-type="picture"
:on-success="handleAvatarSuccess"
>
<el-button type="primary">上传图标</el-button>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="fromVisible = false">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "Notice",
data() {
return {
tableData: [], // 所有的数据
pageNum: 1, // 当前的页码
pageSize: 10, // 每页显示的个数
total: 0,
name: null,
fromVisible: false,
form: {},
user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
rules: {
title: [
{required: true, name: '请输入分类名称', trigger: 'blur'},
],
content: [
{required: true, img: '请输上传分类图标', trigger: 'blur'},
]
},
ids: []
}
},
created() {
this.load(1)
},
methods: {
handleAdd() { // 新增数据
this.form = {} // 新增数据的时候清空数据
this.fromVisible = true // 打开弹窗
},
handleEdit(row) { // 编辑数据
this.form = JSON.parse(JSON.stringify(row)) // 给form对象赋值 注意要深拷贝数据
this.fromVisible = true // 打开弹窗
},
save() { // 保存按钮触发的逻辑 它会触发新增或者更新
this.$refs.formRef.validate((valid) => {
if (valid) {
this.$request({
url: this.form.id ? '/type/update' : '/type/add',
method: this.form.id ? 'PUT' : 'POST',
data: this.form
}).then(res => {
if (res.code === '200') { // 表示成功保存
this.$message.success('保存成功')
this.load(1)
this.fromVisible = false
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
}
})
},
del(id) { // 单个删除
this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
this.$request.delete('/type/delete/' + id).then(res => {
if (res.code === '200') { // 表示操作成功
this.$message.success('操作成功')
this.load(1)
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
}).catch(() => {
})
},
handleSelectionChange(rows) { // 当前选中的所有的行数据
this.ids = rows.map(v => v.id) // [1,2]
},
delBatch() { // 批量删除
if (!this.ids.length) {
this.$message.warning('请选择数据')
return
}
this.$confirm('您确定批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
this.$request.delete('/type/delete/batch', {data: this.ids}).then(res => {
if (res.code === '200') { // 表示操作成功
this.$message.success('操作成功')
this.load(1)
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
}).catch(() => {
})
},
load(pageNum) { // 分页查询
if (pageNum) this.pageNum = pageNum
this.$request.get('/type/selectPage', {
params: {
pageNum: this.pageNum,
pageSize: this.pageSize,
name: this.name,
}
}).then(res => {
this.tableData = res.data?.list
this.total = res.data?.total
})
},
reset() {
this.name = null
this.load(1)
},
handleCurrentChange(pageNum) {
this.load(pageNum)
},
handleAvatarSuccess(response, file, fileList) {
this.form.img = response.data
},
}
}
</script>
<style scoped>
</style>

205
manager/User.vue
Unescape View File

@ -0,0 +1,205 @@
<template>
<div>
<div class="search">
<el-input placeholder="请输入账号查询" style="width: 200px" v-model="username"></el-input>
<el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
<el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
</div>
<div class="operation">
<el-button type="primary" plain @click="handleAdd">新增</el-button>
<el-button type="danger" plain @click="delBatch">批量删除</el-button>
</div>
<div class="table">
<el-table :data="tableData" strip @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column prop="id" label="序号" width="70" align="center" sortable></el-table-column>
<el-table-column prop="username" label="账号"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="phone" label="电话"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column label="头像">
<template v-slot="scope">
<div style="display: flex; align-items: center">
<el-image style="width: 40px; height: 40px; border-radius: 50%" v-if="scope.row.avatar"
:src="scope.row.avatar" :preview-src-list="[scope.row.avatar]"></el-image>
</div>
</template>
</el-table-column>
<el-table-column prop="role" label="角色"></el-table-column>
<el-table-column label="操作" align="center" width="180">
<template v-slot="scope">
<el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 10, 20]"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="total">
</el-pagination>
</div>
</div>
<el-dialog title="管理员" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
<el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item label="昵称" prop="name">
<el-input v-model="form.name" placeholder="昵称"></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="form.phone" placeholder="电话"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="birth">
<el-input v-model="form.email" placeholder="邮箱"></el-input>
</el-form-item>
<el-form-item label="头像">
<el-upload
class="avatar-uploader"
:action="$baseUrl + '/files/upload'"
:headers="{ token: user.token }"
list-type="picture"
:on-success="handleAvatarSuccess"
>
<el-button type="primary">上传头像</el-button>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="fromVisible = false">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "Admin",
data() {
return {
tableData: [], // 所有的数据
pageNum: 1, // 当前的页码
pageSize: 10, // 每页显示的个数
total: 0,
username: null,
fromVisible: false,
form: {},
user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
rules: {
username: [
{required: true, message: '请输入账号', trigger: 'blur'},
]
},
ids: []
}
},
created() {
this.load(1)
},
methods: {
handleAdd() { // 新增数据
this.form = {} // 新增数据的时候清空数据
this.fromVisible = true // 打开弹窗
},
handleEdit(row) { // 编辑数据
this.form = JSON.parse(JSON.stringify(row)) // 给form对象赋值 注意要深拷贝数据
this.fromVisible = true // 打开弹窗
},
save() { // 保存按钮触发的逻辑 它会触发新增或者更新
this.$refs.formRef.validate((valid) => {
if (valid) {
this.$request({
url: this.form.id ? '/user/update' : '/user/add',
method: this.form.id ? 'PUT' : 'POST',
data: this.form
}).then(res => {
if (res.code === '200') { // 表示成功保存
this.$message.success('保存成功')
this.load(1)
this.fromVisible = false
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
}
})
},
del(id) { // 单个删除
this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
this.$request.delete('/user/delete/' + id).then(res => {
if (res.code === '200') { // 表示操作成功
this.$message.success('操作成功')
this.load(1)
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
}).catch(() => {
})
},
handleSelectionChange(rows) { // 当前选中的所有的行数据
this.ids = rows.map(v => v.id)
},
delBatch() { // 批量删除
if (!this.ids.length) {
this.$message.warning('请选择数据')
return
}
this.$confirm('您确定批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
this.$request.delete('/user/delete/batch', {data: this.ids}).then(res => {
if (res.code === '200') { // 表示操作成功
this.$message.success('操作成功')
this.load(1)
} else {
this.$message.error(res.msg) // 弹出错误的信息
}
})
}).catch(() => {
})
},
load(pageNum) { // 分页查询
if (pageNum) this.pageNum = pageNum
this.$request.get('/user/selectPage', {
params: {
pageNum: this.pageNum,
pageSize: this.pageSize,
username: this.username,
}
}).then(res => {
this.tableData = res.data?.list
this.total = res.data?.total
})
},
reset() {
this.username = null
this.load(1)
},
handleCurrentChange(pageNum) {
this.load(pageNum)
},
handleAvatarSuccess(response, file, fileList) {
// 把头像属性换成上传的图片的链接
this.form.avatar = response.data
},
}
}
</script>
<style scoped>
</style>
Write Preview
Loading…
Cancel
Save