commit
275f19998a
@ -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>
|
@ -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>
|
@ -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>
|
@ -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>
|
@ -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>
|
@ -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>
|
@ -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>
|
@ -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>
|
@ -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>
|
@ -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>
|
@ -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>
|
@ -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>
|
@ -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>
|
Loading…
Reference in new issue