目录结构
router.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue'
import Home from './components/Home.vue'
import Welcome from './components/Welcome.vue'
import Users from './components/user/Users.vue'
import Right from './components/power/Right.vue'
import Roles from './components/power/Roles.vue'
import Cate from './components/goods/Cate.vue'
Vue.use(Router)
const router = new Router({
routes: [{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: Login
},
{
path: '/home',
component: Home,
redirect: '/welcome',
children: [{
path: '/welcome',
component: Welcome
}, {
path: '/users',
component: Users
},
{
path: '/rights',
component: Right
},
{
path: '/roles',
component: Roles
},
{
path: '/categories',
component: Cate
}]
}
]
});
//挂载路由导航守卫
router.beforeEach((to, from, next) => {
if (to.path === '/login') return next();
//获取token
const tokenStr = window.sessionStorage.getItem('token')
if (!tokenStr) return next('/login')
next();
})
export default routerlogin.vue
<template>
<div class="login_container">
<div class="login_box">
<div class="avatar_box">
<img src="../assets/logo.png">
</div>
<!-- 表单区域-->
<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
<!-- 登录区域-->
<el-form-item prop="username">
<el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input>
</el-form-item>
<el-form-item class="btns">
<el-button type="primary" @click="login">登录</el-button>
<el-button type="info" @click="resetLoginForm">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default{
data(){
return{
//这是登录表单的数据
loginForm:{
username:'geyao',
password:'12345678'
},
// 表单验证
loginFormRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入用户密码', trigger: 'blur' },
{ min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
]
}
}
},
methods:{
resetLoginForm(){
// console.log(this)
this.$refs.loginFormRef.resetFields();
},
login(){
this.$refs.loginFormRef.validate(async valid =>{
if(!valid) return;
const {data:res}=await this.$http.post('login',this.loginForm);
if(res.meta.status!==200) return this.$message.error('登录失败');
this.$message.success('登录成功');
// 1、将登陆成功之后的token, 保存到客户端的sessionStorage中;
// 1.1 项目中出现了登录之外的其他API接口，必须在登陆之后才能访问
// 1.2 token 只应在当前网站打开期间生效，所以将token保存在
window.sessionStorage.setItem('token', res.data.token)
// 2、通过编程式导航跳转到后台主页, 路由地址为：/home
this.$router.push('/home')
});
}
}
}
</script>
<style lang="less" scoped>
.login_container {
background-color: #2b4b6b;
height: 100%;
}
.login_box {
width: 450px;
height: 360px;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
background-color: #fff;
}
.avatar_box {
width: 130px;
height: 130px;
border: 1px solid #eee;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 10px #ddd;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
img {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #eee;
}
}
.login_form {
position: absolute;
bottom: 60px;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
.btns {
display: flex;
justify-content: center;
}
</style>main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
//导入字体图标
import './assets/fonts/iconfont.css'
Vue.config.productionTip = false
//导入全局样式
import './assets/css/global.css'
import axios from 'axios'
Vue.prototype.$http=axios
axios.defaults.baseURL="http://127.0.0.1:8888/api/private/v1/"
// 请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config => {
// console.log(config)
// 为请求头对象，添加token验证的Authorization字段
config.headers.Authorization = window.sessionStorage.getItem('token')
// 在最后必须 return config
return config
})
Vue.config.productionTip=false;
new Vue({
router,
render: h => h(App)
}).$mount('#app')global.css
/* 全局样式 */
html,
body,
#app {
height: 100%;
margin: 0;
padding: 0;
}
.el-breadcrumb {
margin-bottom: 15px;
font-size: 12px;
}
.el-card {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}
.el-table {
margin-top: 15px;
font-size: 12px;
}
.el-pagination {
margin-top: 15px;
}element.js
import Vue from 'vue'
//弹框提示
import {
Message,
Button,
Form,
FormItem,
Input,
Container,
Header,
Aside,
Main,
Menu,
Submenu,
MenuItemGroup,
MenuItem,
Breadcrumb,
BreadcrumbItem,
Card,
Row,
Col,
Table,
TableColumn,
Switch,
Tooltip,
Pagination,
Dialog,
MessageBox,
Tag,
Tree
} from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(MenuItem)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Card)
Vue.use(Row)
Vue.use(Col)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Switch)
Vue.use(Tooltip)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Tag)
Vue.use(Tree)
Vue.prototype.$confirm=MessageBox
Vue.prototype.$message = MessageHome.vue
import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue'
import Home from './components/Home.vue'
import Welcome from './components/Welcome.vue'
import Users from './components/user/Users.vue'
Vue.use(Router)
const router = new Router({
routes: [{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: Login
},
{
path: '/home',
component: Home,
redirect: '/welcome',
children: [{
path: '/welcome',
component: Welcome
}, {
path: '/users',
component: Users
}]
}
]
});
//挂载路由导航守卫
router.beforeEach((to, from, next) => {
if (to.path === '/login') return next();
//获取token
const tokenStr = window.sessionStorage.getItem('token')
if (!tokenStr) return next('/login')
next();
})
export default router.prettierrc
{
"semi":false,
"singleQuote":true
}eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential',
'@vue/standard'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'space-before-function-paren':0
}
}welcome.vue
<template>
<div>
<h3>欢迎</h3>
</div>
</template>Users.vue
<template>
<div>
<!-- 面包屑导航区 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
<el-card>
<el-row :gutter="20">
<el-col :span="7">
<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList">
<el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>
</el-col>
</el-row>
<el-table border stripe :data="userlist">
<el-table-column type="index" label="#"></el-table-column>
<el-table-column prop="username" label="姓名"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column prop="mobile" label="电话"></el-table-column>
<el-table-column prop="role_name" label="角色"></el-table-column>
<el-table-column label="状态">
<template slot-scope="scope">
<el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="180px">
<template slot-scope="scope">
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
circle
@click="showEditDialog(scope.row.id)"
></el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" circle
@click="removeUserById(scope.row.id)"></el-button>
<el-tooltip
class="item"
effect="dark"
content="角色分配"
:enterable="false"
placement="top"
>
<el-button type="warning" icon="el-icon-setting" size="mini" circle
@click="showSetRole(scope.row)"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[2, 5, 10, 15]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</el-card>
<!-- 添加用户的对话框 -->
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
<!-- 内容主体 -->
<el-form :model="addForm" ref="addFormRef" :rules="addFormRules" label-width="70px">
<el-form-item label="用户名" prop="username">
<el-input v-model="addForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="addForm.password"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<el-form-item label="手机" prop="mobile">
<el-input v-model="addForm.mobile"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addUser">确 定</el-button>
</span>
</el-dialog>
<!-- 修改用户的对话框 -->
<el-dialog
title="修改用户信息"
:visible.sync="editDialogVisible"
width="50%"
@close="editDialogClosed"
>
<el-form :model="editForm" ref="editUserFormRef" :rules="editFormRules" label-width="70px">
<el-form-item label="用户名">
<el-input v-model="editForm.username" disabled></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="editForm.email"></el-input>
</el-form-item>
<el-form-item label="手机" prop="mobile">
<el-input v-model="editForm.mobile"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editUserInfo">确 定</el-button>
</span>
</el-dialog>
<!-- 分配角色对话框 -->
<el-dialog title="分配角色" :visible.sync="setRoleDialogVisible" width="50%" >
<div>
<p>当前用户：{{userInfo.username}}</p>
<p>当前角色：{{userInfo.role_name}}</p>
</div>
<p>
分配角色：
<el-select
v-model="selectRoleId"
filterable
allow-create
default-first-option
placeholder="请选择文章标签"
>
<el-option
v-for="item in rolelist"
:key="item.id"
:label="item.roleName"
:value="item.id"
></el-option>
</el-select>
</p>
<span slot="footer" class="dialog-footer">
<el-button @click="setRoleDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveRoleInfo">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<style scoped="less" scoped>
</style>
<script>
export default {
data() {
// 自定义邮箱规则
var checkEmail = (rule, value, callback) => {
const regEmail = /^\w+@\w+(\.\w+)+$/
if (regEmail.test(value)) {
// 合法邮箱
return callback()
}
callback(new Error('请输入合法邮箱'))
}
// 自定义手机号规则
var checkMobile = (rule, value, callback) => {
const regMobile = /^1[34578]\d{9}$/
if (regMobile.test(value)) {
return callback()
}
// 返回一个错误提示
callback(new Error('请输入合法的手机号码'))
}
return {
queryInfo: {
query: '',
pagenum: 1,
pagesize: 2,
},
userlist: [],
total: 0,
addDialogVisible: false,
addForm: {
username: '',
password: '',
email: '',
mobile: '',
},
addFormRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{
min: 2,
max: 10,
message: '用户名的长度在2～10个字',
trigger: 'blur',
},
],
password: [
{ required: true, message: '请输入用户密码', trigger: 'blur' },
{
min: 6,
max: 18,
message: '用户密码的长度在6～18个字',
trigger: 'blur',
},
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ validator: checkEmail, trigger: 'blur' },
],
mobile: [
{ required: true, message: '请输入手机号码', trigger: 'blur' },
{ validator: checkMobile, trigger: 'blur' },
],
},
editFormRules: {
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ validator: checkEmail, trigger: 'blur' },
],
mobile: [
{ required: true, message: '请输入手机号码', trigger: 'blur' },
{ validator: checkMobile, trigger: 'blur' },
],
},
editDialogVisible: false,
editForm: {},
setRoleDialogVisible:false,
userInfo:{},
rolelist:[],
selectRoleId:''
}
},
created() {
this.getUserList()
},
methods: {
async getUserList() {
const { data: res } = await this.$http.get('users', {
params: this.queryInfo,
})
if (res.meta.status !== 200) {
return this.$message.error('获取用户列表失败！')
}
this.userlist = res.data.users
this.total = res.data.total
console.log(res)
},
// 监听修改用户对话框的关闭事件
editDialogClosed() {
this.$refs.editUserFormRef.resetFields()
},
// 监听 pagesize改变的事件
handleSizeChange(newSize) {
// console.log(newSize)
this.queryInfo.pagesize = newSize
this.getUserList()
},
// 监听 页码值 改变事件
handleCurrentChange(newSize) {
// console.log(newSize)
this.queryInfo.pagenum = newSize
this.getUserList()
},
async userStateChanged(userInfo) {
// console.log(userInfo)
const { data: res } = await this.$http.put(
`users/${userInfo.id}/state/${userInfo.mg_state}`
)
if (res.meta.status !== 200) {
userInfo.mg_state = !userInfo.mg_state
return this.$message.error('更新用户状态失败')
}
this.$message.success('更新用户状态成功！')
},
// 监听 添加用户对话框的关闭事件
addDialogClosed() {
this.$refs.addFormRef.resetFields()
},
editUserInfo() {
this.$refs.editUserFormRef.validate(async (valid) => {
if (!valid) return
const { data: res } = await this.$http.put(
'users/' + this.editForm.id,
{
email: this.editForm.email,
mobile: this.editForm.mobile,
}
)
if (res.meta.status !== 200) {
this.$message.error('更新用户信息失败！')
}
// 隐藏添加用户对话框
this.editDialogVisible = false
this.$message.success('更新用户信息成功！')
this.getUserList()
})
},
// 编辑用户信息
async showEditDialog(id) {
const { data: res } = await this.$http.get('users/' + id)
if (res.meta.status !== 200) {
return this.$message.error('查询用户信息失败！')
}
this.editForm = res.data
this.editDialogVisible = true
},
// 添加用户
addUser() {
// 提交请求前，表单预验证
this.$refs.addFormRef.validate(async (valid) => {
// console.log(valid)
// 表单预校验失败
if (!valid) return
const { data: res } = await this.$http.post('users', this.addForm)
if (res.meta.status !== 201) {
this.$message.error('添加用户失败！')
}
this.$message.success('添加用户成功！')
// 隐藏添加用户对话框
this.addDialogVisible = false
this.getUserList()
})
},
// 删除用户
async removeUserById (id) {
const confirmResult = await this.$confirm(
'此操作将永久删除该用户, 是否继续?',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).catch(err => err)
// 点击确定 返回值为：confirm
// 点击取消 返回值为： cancel
if (confirmResult !== 'confirm') {
return this.$message.info('已取消删除')
}
const { data: res } = await this.$http.delete('users/' + id)
if (res.meta.status !== 200) return this.$message.error('删除用户失败！')
this.$message.success('删除用户成功！')
this.getUserList()
},async showSetRole (userInfo) {
this.userInfo = userInfo
// 展示对话框之前，获取所有角色列表
const { data: res } = await this.$http.get('roles')
if (res.meta.status !== 200) {
return this.$message.error('获取角色列表失败！')
}
this.rolelist = res.data
this.setRoleDialogVisible = true
} , // 分配角色
async saveRoleInfo () {
if (!this.selectRoleId) {
return this.$message.error('请选择要分配的角色')
}
const { data: res } = await this.$http.put(`users/${this.userInfo.id}/role`, { rid: this.selectRoleId })
if (res.meta.status !== 200) {
return this.$message.error('更新用户角色失败！')
}
this.$message.success('更新角色成功！')
this.getUserList()
this.setRoleDialogVisible = false
},
},
}
</script>Right.vue
<template>
<div>
<!-- 面包屑导航区 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>权限管理</el-breadcrumb-item>
<el-breadcrumb-item>权限列表</el-breadcrumb-item>
</el-breadcrumb>
<el-card>
<el-table :data="rightsList">
<el-table-column type="index" label="#"></el-table-column>
<el-table-column label="权限名称" prop="authName"></el-table-column>
<el-table-column label="路径" prop="path"></el-table-column>
<el-table-column label="权限等级" prop="level">
<template slot-scope="scope">
<el-tag v-if="scope.row.level === '0'">一级</el-tag>
<el-tag type="success" v-else-if="scope.row.level === '1'">二级</el-tag>
<el-tag type="danger" v-else>三级</el-tag>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<style lang="less" scoped>
</style>
<script>
export default {
data(){
return{
//权限列表
rightsList:[]
}
},
created(){
this.getRightList()
},
methods:{
//获取权限列表
async getRightList(){
const {data:res}= await this.$http.get('rights/list')
if(res.meta.status!==200){
return this.$message.console.error("获取权限列表失败");
}
this.rightsList=res.data
}
}
}
</script>Roles.vue
<template>
<div>
<!-- 面包屑导航区 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>权限管理</el-breadcrumb-item>
<el-breadcrumb-item>角色列表</el-breadcrumb-item>
</el-breadcrumb>
<el-card>
<el-row>
<el-col>
<el-button type="primary">添加角色</el-button>
</el-col>
</el-row>
<el-table :data="roleslist" border stripe>
<el-table-column type="expand">
<template slot-scope="scope">
<el-row
:class="['bdbottom', i1 === 0 ? 'bdtop' : '', 'vcenter']"
v-for="(item1, i1) in scope.row.children"
:key="item1.id">
<!-- 一级权限 -->
<el-col :span="5">
<el-tag closable @close="removeRightById(scope.row, item1.id)">{{ item1.authName}}</el-tag>
<i class="el-icon-caret-right"></i>
</el-col>
<el-col :span="19">
<el-row :class="[i2 === 0 ? '' : 'bdtop','vcenter']"
v-for="(item2, i2) in item1.children"
:key="item2.id">
<el-col :span="6 ">
<el-tag
type="success"
closable
@close="removeRightById(scope.row, item2.id)"
>{{ item2.authName }}</el-tag>
<i class="el-icon-caret-right"></i>
</el-col>
<el-col :span="18">
<el-tag
type="warning"
v-for="(item3) in item2.children"
:key="item3.id"
closable
@close="removeRightById(scope.row,item3.id)"
>{{ item3.authName}}</el-tag>
</el-col>
</el-row>
</el-col>
</el-row>
<!--<pre>
{{scope.row}}
</pre>-->
</template>
</el-table-column>
<!-- 索引列 -->
<el-table-column type="index" label="#"></el-table-column>
<el-table-column label="角色名称" prop="roleName"></el-table-column>
<el-table-column label="角色描述" prop="roleDesc"></el-table-column>
<el-table-column label="操作" width="300px">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" size="mini" >编辑</el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" >删除</el-button>
<el-button
type="warning"
icon="el-icon-setting"
size="mini"
@click="showSetRightDialog(scope.row)"
>分配权限</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<!-- 分配权限 -->
<el-dialog
title="分配权限"
:visible.sync="setRightDialogVisible"
width="50%"
@close="setRightDialogClosede"
>
<el-tree
:data="rightslist"
:props="treeProps"
ref="treeRef"
show-checkbox
node-key="id"
default-expand-all
:default-checked-keys="defKeys"
></el-tree>
<span slot="footer" class="dialog-footer">
<el-button @click="setRightDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="allotRights">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data(){
return{
//所有角色列表数据
roleslist:[],
setRightDialogVisible:false,
rightslist:[],
treeProps:{
label:'authName',
children:'children'
},
defKeys:[],
roleId:''
}
},
created(){
this.getRolesList()
},
methods:{
async getRolesList (role,rightId) {
const { data: res } = await this.$http.get('roles')
if (res.meta.status !== 200) {
return this.$message.error('获取角色列表失败！')
}
this.roleslist = res.data
console.log(this.roleslist)
},
async removeRightById () {
// 弹框提示 删除
const confirmResult = await this.$confirm(
'此操作将永久删除该权限, 是否继续?',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).catch(err => err)
// 点击确定 返回值为：confirm
// 点击取消 返回值为： cancel
if (confirmResult !== 'confirm') {
return this.$message.info('已取消权限删除')
}
const { data: res } = await this.$http.delete(
`roles/${role.id}/rights/${rightId}`
)
if (res.meta.status !== 200) {
return this.$message.error('删除权限失败！')
}
this.roleslist = res.data
// 不建议使用
//this.getRolesList()
role.children=res.data
},async showSetRightDialog(role){
this.roleId=role.id
// 获取角色的所有权限
const { data: res } = await this.$http.get('rights/tree')
if (res.meta.status !== 200) {
return this.$message.error('获取权限数据失败！')
}
// 获取权限树
this.rightslist = res.data
// console.log(res)
// 递归获取三级节点的id
//this.getLeafkeys(role, this.defKeys)
this.getLeafkeys(role,this.defKeys)
this.setRightDialogVisible = true
console.log(this.rightslist)
},// 通过递归 获取角色下三级权限的 id, 并保存到defKeys数组
getLeafkeys (node, arr) {
// 没有children属性，则是三级节点
if (!node.children) {
return arr.push(node.id)
}
node.children.forEach(item => this.getLeafkeys(item, arr))
},
// 权限对话框关闭事件
setRightDialogClosed () {
this.rightslist = []
},
// 添加角色对话框的关闭
addRoleDialogClosed () {
this.$refs.addRoleFormRef.resetFields()
},setRightDialogClosede(){
this.defKeys=[];
},
// 分配权限
async allotRights (roleId) {
// 获得当前选中和半选中的Id
const keys = [
...this.$refs.treeRef.getCheckedKeys(),
...this.$refs.treeRef.getHalfCheckedKeys()
]
// join() 方法用于把数组中的所有元素放入一个字符串
const idStr = keys.join(',')
const { data: res } = await this.$http.post(`roles/${this.roleId}/rights`, { rids: idStr })
if (res.meta.status !== 200) { return this.$message.error('分配权限失败！') }
this.$message.success('分配权限成功!')
this.getRolesList()
this.setRightDialogVisible = false
}
}
}
</script>
<style lang="less" scoped>
.el-tag {
margin: 7px;
}
.bdtop {
border-top: 1px solid #eee;
}
.bdbottom {
border-bottom: 1px solid #eee;
}
.vcenter {
display: flex;
align-items: center;
}
</style>Cate.vue
<template>
<div>
<!-- 面包屑导航区 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
<el-breadcrumb-item>商品分类</el-breadcrumb-item>
</el-breadcrumb>
<el-card>
<el-row>
<el-col>
<el-button type="primary">添加分类</el-button>
</el-col>
</el-row>
</el-card>
</div>
</template>
<style scoped>
</style>
<script>
export default {
data(){
return{
querInfo:{
type:3,
pagenum:1,
pagesize:5
},
cateList:[],
total:0
}
},
created(){
this.getCateList()
},
methods:{
async getCateList(){
const { data: res } = await this.$http.get('categories', {
params: this.queryInfo
})
if (res.meta.status !== 200) {
return this.$message.error('获取商品分类失败！')
}
// 给数据列表赋值
this.cateList = res.data.result
// 总数据条数
this.total = res.data.total
}
}
}
</script>运行结果
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
