本文共 30461 字，大约阅读时间需要 101 分钟。

项目架构

使用到vue框架
ElementUI

技术栈

vue组件化开发
proxy跨域
API封装
路由鉴权
VUEX

首先处理跨域问题
创建一个vue.config.js文件，配置一下proxy开发环境

//处理跨域module.exports = {       publicPath: "./",    devServer: {           open: true,        proxy: {               '': {                   target: "http://39.100.7.70:81/",                changeOrigin: true,                pathRewrite: {                       '^/api': ""                }            }        }    }};

配置main.js文件

import Vue from 'vue'import App from './App.vue'import router from './router'// import './plugins/element'// axios引入配置import axios from 'axios'  //导入进度条插件  import NProgress from 'nprogress'  //导入进度条样式  // import 'nprogress/nprogress.css'    //-------      //文档提供基准接口      axios.defaults.baseURL='https://www.liulongbin.top:8888/api/private/v1/'      axios.defaults.timeout = 5000;            //当进入request拦截器，表示发送了请求，我们就开启进度条      NProgress.start()          //设置请求头          axios.interceptors.request.use(config => {               config.headers.Authorization=sessionStorage.getItem('token')            return config;            });    //--------    // TreeTableimport TreeTable from 'vue-table-with-tree-grid'Vue.component('tree-table', TreeTable)Vue.prototype.$http = axios  // 时间戳  Vue.filter('dateFormat', function (originVal) {       const dt = new Date(originVal)    const y = dt.getFullYear()    const m = (dt.getMonth() + 1 + '').padStart(2, '0')    const d = (dt.getDate() + '').padStart(2, '0')    const hh = (dt.getHours() + '').padStart(2, '0')    const mm = (dt.getMinutes() + '').padStart(2, '0')    const ss = (dt.getSeconds() + '').padStart(2, '0')    return `${     y}-${     m}-${     d} ${     hh}:${     mm}:${     ss}`  })Vue.config.productionTip = falsenew Vue({     router,  render: h => h(App)}).$mount('#app')

配置axiosApi

// 单独封装根路径 import axios from 'axios'const request = axios.create({       baseURL:'https://www.liulongbin.top:8888/api/private/v1/',    timeout : 5000,}) //设置请求头 request.interceptors.request.use(config => {       config.headers.Authorization=sessionStorage.getItem('token')    return config;    });export default request

配置路由

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({     routes: [    {         //登录      path: '/',      name: 'login',      component: () => import(/* webpackChunkName:"login_home_welcome" */ './views/Login.vue'),    },    {         path: '/home',      name: 'Home',      component: () => import(/* webpackChunkName:"login_home_welcome" */ './views/Home.vue'),      children:[{           path: '/',        redirect:'/home/welcome'      },{   //默认展示welcome页         path:'welcome',         name: 'Welcome',         component: () => import(/* webpackChunkName:"login_home_welcome" */ './components/Welcome.vue'),      },      {   //用户列表        path:'Users',        name: 'Users',        component: () => import(/* webpackChunkName:"users" */ './components/user/Users.vue'),      },      {   //角色列表        path:'roles',        name: 'roles',        component: () => import(/* webpackChunkName:"roles" */ './components/roles/Roles.vue'),      },{   //所有角色列表        path:'rights',        name: 'rights',        component: () => import(/* webpackChunkName:"roles" */ './components/roles/Right.vue'),      },{           path:'Categories',        name: 'Categories',        component: () => import(/* webpackChunkName:"goods" */ './components/goods/Categories.vue'),      },{           path:'params',        name: 'params',        component: () => import(/* webpackChunkName:"goods" */ './components/goods/parm.vue'),      },{           path:'goods',        name: 'goods',        component: () => import(/* webpackChunkName:"goods" */ './components/goods/ProductList.vue'),        children: [          {               path: 'add',            name: 'Add',            component: () => import(/* webpackChunkName:"goods" */ './components/goods/Add.vue'),          }        ]      },{           path:'orders',        name: 'orders',        component: () => import(/* webpackChunkName:"orders" */ './components/orders/Orders.vue'),      },{           path:'reports',        name: 'reports',        component: () => import(/* webpackChunkName:"reports" */ './components/report/Report.vue'),      }      ]    }      ]})

封装面包屑导航

<template>  <div>    <el-breadcrumb separator-class="el-icon-arrow-right">        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>        <el-breadcrumb-item v-for="(item,index) in obj" :key="index">{   {   item}}</el-breadcrumb-item>    </el-breadcrumb>  </div></template><script>export default {   data(){       return{           obj:{   },    }},created(){       this.obj=JSON.parse(window.sessionStorage.getItem('breadName'));}}</script>

登录login

<template>  <div class="home">    <div class="box">      <div class="pic">        <img src="../assets/logo.png" alt />      </div>      <!-- 用户账号 -->      <el-form        :model="ruleForm"        status-icon        :rules="rules"        ref="ruleForm"        label-width="100px"        class="demo-ruleForm"      >        <el-form-item label="账号" prop="username">          <el-input  v-model="ruleForm.username"></el-input>        </el-form-item>        <el-form-item label="密码" prop="password">          <el-input type="password" v-model="ruleForm.password"></el-input>        </el-form-item>               <el-form-item>          <el-button type="primary" @click="submit">提交</el-button>        </el-form-item>      </el-form>    </div>  </div></template><script>  import loginApi from './loginApi'export default {     data(){        return {           ruleForm: {             username: 'admin',          password: '123456',                  },        rules: {             username: [            {    required: true, message: '请输入登录名', trigger: 'blur' },            {    min: 3,max: 10, message: '登录名长度在 3 到 6 个字符',trigger: 'blur'}          ],          password: [            {    required: true, message: '请输入密码', trigger: 'blur' },            {    min: 3,max: 10, message: '密码长度在 3 到 6 个字符', trigger: 'blur'}          ],                  }      }    },    methods:{         //登录      submit(){           this.$refs.ruleForm.validate(async valid=>{             console.log(this.ruleForm);          //判断用户舒输入账号是否有误          if(!valid) return           //发送请求          const {   data:res}=await loginApi.login(this.ruleForm)          console.log(res);          //根据请求到的状态 给用户对应的响应          if(res.meta.status!==200){               //请求失败            this.$message.error(res.meta.msg);          }          window.sessionStorage.setItem('token',res.data.token)          this.$router.push('/home')        })              },    }}</script>

用户管理模块

封装请求接口

import axios from '@/axiosApi/axios'export default{       //获取所有数据    users(queryInfo){           return axios.get('users',{    params: queryInfo })    },    //修改用户状态    userStateChange(id,msg){           return axios.put(`users/${     id}/state/${     msg}}`)    },    //添加用户    addUserState(ruleForm){           return axios.post('users',ruleForm)    },    //修改用户信息    showUserState(id){           return axios.get('users/'+id)    },    //修改用户信息    showUserStates(id,email){           return axios.put(`users/${     id}`, email)    },    //权限分配    settingUsers(){           return axios.get('roles')    },    powerUsers(){           return axios.get(`users/${     id}/role`,rid)    },}

用户管理页面布局+逻辑

<template>  <div>    <!-- 面包屑 -->    <Bread></Bread>    <!-- 功能区域 -->    <el-card>      <!-- 搜索 -->      <el-row>        <el-col :span="13">          <div style="margin-top: 15px;" class="searCh">            <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUser">              <el-button slot="append" icon="el-icon-search" @click="getUser"></el-button>            </el-input>            <el-button type="primary" class="addUser" @click="addDialog = true">添加用户</el-button>          </div>        </el-col>      </el-row>      <!-- 用户列表 -->      <el-table :data="getuse" border style="width: 100%">        <el-table-column type="index" label="#" width="60px"></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="状态" width="80px">          <template slot-scope="scope">            <el-switch v-model="scope.row.mg_state" @change="userChange(scope.row)"></el-switch>          </template>        </el-table-column>        <el-table-column label="操作" width="210px">          <template slot-scope="scope">            <!-- 修改 -->            <el-button              type="primary"              icon="el-icon-edit"              size="mini"              @click="showDialogUser(scope.row.id)"            ></el-button>            <!-- 删除 -->            <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>            <!-- 分配权限 -->            <el-tooltip class="item" effect="dark" content="分配权限" placement="top">              <el-button                type="warning"                icon="el-icon-setting"                size="mini"                @click="settingUser(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="[1, 3, 6, 9]"        :page-size="queryInfo.pagesize"        layout="total, sizes, prev, pager, next, jumper"        :total="total"      ></el-pagination>      <!-- 添加用户--弹出框 -->      <el-dialog title="提示" :visible.sync="addDialog" width="50%" @close="resetDialog">        <el-form          :model="ruleForm"          :rules="rules"          ref="ruleForm"          label-width="100px"          class="demo-ruleForm"        >          <el-form-item label="用户名称" prop="username">            <el-input v-model="ruleForm.username"></el-input>          </el-form-item>          <el-form-item label="用户密码" prop="password">            <el-input v-model="ruleForm.password"></el-input>          </el-form-item>          <el-form-item label="邮箱" prop="email">            <el-input v-model="ruleForm.email"></el-input>          </el-form-item>          <el-form-item label="手机号" prop="moblie">            <el-input v-model="ruleForm.moblie"></el-input>          </el-form-item>        </el-form>        <span slot="footer" class="dialog-footer">          <el-button @click="addDialog = false">取 消</el-button>          <el-button type="primary" @click="addDialogUser">确 定</el-button>        </span>      </el-dialog>      <!-- 修改用户--弹出框 -->      <el-dialog title="修改" :visible.sync="showDialog" width="50%" @close="resetShowDialog">        <el-form :model="showForm" :rules="rules" ref="showForm" label-width="100px">          <el-form-item label="用户名称">            <el-input v-model="showForm.username" disabled></el-input>          </el-form-item>          <el-form-item label="邮箱" prop="email">            <el-input v-model="showForm.email"></el-input>          </el-form-item>          <el-form-item label="手机" prop="mobile">            <el-input v-model="showForm.mobile"></el-input>          </el-form-item>        </el-form>        <span slot="footer" class="dialog-footer">          <el-button @click="showDialog = false">取 消</el-button>          <el-button type="primary" @click="showDialogUsers">确 定</el-button>        </span>      </el-dialog>      <!-- 分配权限--弹出框 -->       <el-dialog title="分配权限" :visible.sync="powerDialog" width="50%">        <p class="powerStyle">当前的用户:{   {    userInfo.username }}</p>        <p class="powerStyle">当前的角色:{   {    userInfo.role_name }}</p>        <el-form>          <el-form-item label="分配新角色">            <el-select  placeholder="请选择" v-model="selectedRoledId">              <el-option                 v-for="item in powerList"                 :key="item.id"                 :label="item.roleName"                 :value="item.id">                </el-option>            </el-select>          </el-form-item>        </el-form>        <div slot="footer" class="dialog-footer">          <el-button @click="powerDialog = false">取 消</el-button>          <el-button type="primary" @click="powerUser">确 定</el-button>        </div>      </el-dialog>    </el-card>  </div></template><script>import Bread from '../Bread.vue'import userApi from './userApi'export default {     components: {    Bread },  data() {       const ckeEmail = (value, callback) => {         const cb = /^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\.)+[a-z]{2,}$/;      if (!cb.test(value)) {           callback(new Error("请输入正确的邮箱规则"));      } else {           callback();      }    }    const ckeMoabile = (value, callback) => {         const hua = /^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/;      if (!hua.test(value)) {           callback(new Error("请输入正确的电话格式"));      } else {           callback();      }    };    return {         // 搜索      input3: '',      //用户数据      getuse: [],      queryInfo: {           query: '',        pagenum: 1,        pagesize: 3      },      total: 0,      addDialog: false,//控制添加用户对话框      showDialog: false,//控制修改用户对话框      powerDialog: false,//控制分配权限对话框      //已选择用户id      selectedRoledId:'',      userInfo: {   },//需要分配权限      showForm: {   },      powerList:{   },      showFormRules: {           email: [          {    required: true, message: '请输入用户email', trigger: 'blur' },          {    validator: ckeEmail, trigger: 'blur' }        ],        mobile: [          {    required: true, message: '请输入用户mobile', trigger: 'blur' },          {    validate: ckeMoabile, trigger: 'blur' }        ]      },      value:true,      //添加用户      ruleForm: {           username: '',        password: '',        email: '',        mobile: ''      },      rules: {           username: [          {    required: true, message: '请输入用户名称', trigger: 'blur' },          {    min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }        ],        password: [          {    required: true, message: '请输入用户密码', trigger: 'blur' },          {    min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }        ],        email: [          {    required: true, message: '请输入email', trigger: 'blur' },          {    validate: ckeEmail, trigger: 'blur' }        ],        mobile: [          {    required: true, message: '请输入mobile', trigger: 'blur' },          {    validate: ckeMoabile, trigger: 'blur' }        ],      }    }  },  methods: {       //获取用户数据    async getUser() {         const {    data: res } = await userApi.users(this.queryInfo)      // console.log(res);      //如果数据获取失败      if (res.meta.status !== 200) {    return this.$message.error('用户获取失败') }      this.getuse = res.data.users      // console.log(this.getuse);      this.total = res.data.total      console.log(res);    },    //监听pagesize改变的事件    handleSizeChange(val) {         console.log(`每页 ${     val} 条`);      this.queryInfo.pagesize = val      this.getUser()    },    //监听页码    handleCurrentChange(val) {         console.log(`当前页: ${     val}`);      this.queryInfo.pagenum = val      this.getUser()    },    //可控制修改用户状态    async userChange(userStatus) {         // console.log(userStatus);      const {    data: res } = await userApi.userStateChange(userStatus.id,userStatus.mg_state)      if (res.meta.status !== 200) {           //如果用户状态修改失败要保持操作前的原有状态（所以要做一次取反操作）        userStatus.mg_state = !userStatus.mg_state        return this.$message.error('用户状态修改失败')      }      this.$message.success('用户状态修改成功')    },    //关闭对话框时重置input内容    resetDialog() {         this.$refs.ruleForm.resetFields()    },    //点击确定，添加新用户    addDialogUser() {         this.$refs.ruleForm.validate(async valid => {           // console.log(valid);        if (!valid) return        //通过就发起添加用户请求        const {    data: res } = await userApi.addUserState(this.ruleForm)        if (res.meta.status !== 200) {             this.$message.success('添加用户成功')          //隐藏添加用户的对话框          this.addDialog = false          //刷新用户列表          this.getUser()        }      })    },    //修改用户信息    async showDialogUser(id) {         // console.log(id);      const {    data: res } = await userApi.showUserState(id)      if (res.meta.status !== 200) {           return this.$message.error('查询用户信息失败')      }      this.showForm = res.data      //展示修改框      this.showDialog = true    },    //关闭对话框时重置修改input内容    resetShowDialog() {         this.$refs.showForm.resetFields()    },    // 提交修改内容    showDialogUsers() {         this.$refs.showForm.validate(async val => {           console.log(val);        if (!val) return        //请求修改        const {    data: res } = await userApi.showUserStates(this.showForm.id, {    email: this.showForm.email, mobile: this.showForm.mobile })        console.log(res);        if (res.meta.status !== 200) {             return this.$message.error('更新修改失败')        }        this.showDialog = false        this.getUser()        this.$message.success('更新修改成功')      })    },    //权限分配    async settingUser(data) {         this.userInfo = data      console.log(this.userInfo);      const {    data: res } = await userApi.settingUsers('roles');      if (res.meta.status !==200) return this.$message.error("获取角色列表失败");      this.powerList=res.data      this.powerDialog = true    },    async powerUser(){         this.powerUser = true      if(!this.selectedRoledId){           return this.$message.error("选择要分配的角色")      }      const {   data:res}=await userApi.powerUsers(this.userInfo.id,      {           rid:this.selectedRoledId      })      if(res.meta.status !==200){           return this.$message.error('更新角色失败')      }      this.$message.success("更新角色成功");      this.getUser();      this.powerDialog = false;    }  },  //确定分配权限  mounted(){       this.getUser();  }}</script>

权限管理模块

<template>    <div>        <!-- 面包屑导航 -->        <Bread></Bread>        <!-- 角色列表 -->        <el-card>            <el-row>                <el-col>                    <el-button type="primary" @click="addRolesDialogVisible = true">添加角色</el-button>                </el-col>            </el-row>            <el-table :data="rolelist" 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>{   {    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">{   {    item2.authName }}</el-tag>                                        <i class="el-icon-caret-right"></i>                                    </el-col>                                    <el-col :span="18">                                        <el-tag                                            v-for="item3 in item2.children"                                            :key="item3.id"                                            type="warning"                                            closable                                            @close="removeRolesById(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" prop="#"></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="操作">                    <template slot-scope="scope">                        <el-button                            type="primary"                            icon="el-icon-edit"                            size="mini"                            @click="showEditRolesDialog(scope.row.id)"                        >编辑</el-button>                        <el-button                            type="danger"                            icon="el-icon-delete"                            size="mini"                            @click="removeRoles(scope.row.id)"                        >删除</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="addRolesDialogVisible"            width="50%"            @close="addRolesDialogClosed"        >            <!-- :rules="addFormRules" -->            <!-- :model="addForm" -->            <el-form ref="addRolesRef" label-width="70px">                <!-- <el-form-item label="角色名" prop="Rolesname">          <el-input v-model="addForm.Rolesname"></el-input>                </el-form-item> --->            </el-form>            <!-- 底部 -->            <span slot="footer" class="dialog-footer">                <el-button @click="addRolesDialogVisible = false">取 消</el-button>                <el-button type="primary" @click="addRoles">确 定</el-button>            </span>        </el-dialog>        <!-- 编辑角色的对话框 -->        <el-dialog            title="修改角色"            :visible.sync="editRolesDialogVisible"            width="50%"            @close="editRolesDialogVisible"        >            <!-- 内容主体 -->            <!-- :model="editRolesForm" -->            <!-- :rules="editRolesFormRules" -->            <el-form ref="editRolesFormRef" label-width="70px">                <!-- <el-form-item label="角色名">          <el-input v-model="editRolesForm.Rolesname" disabled></el-input>                </el-form-item>-->            </el-form>            <!-- 底部 -->            <span slot="footer" class="dialog-footer">                <el-button @click="editRolesDialogVisible = false">取 消</el-button>                <el-button type="primary" @click="editRolesInfo">确 定</el-button>            </span>        </el-dialog>        <!-- 分配权限的对话框 -->        <el-dialog            title="分配权限"            :visible.sync="setRightDialogVisible"            width="50%"            @close="setRightDialogClosed"        >            <el-tree                :data="rightslist"                :props="treeProps"                show-checkbox                node-key="id"                default-expand-all                :default-checked-keys="defKeys"                ref="treeRef"            ></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>import Bread from '../Bread.vue';import rolesApi from './rolesApi'export default {       components: {    Bread },    // 组件状态值    data() {           return {               // 所有角色列表数据            rolelist: [],            // 添加角色的对话框的显示隐藏            addRolesDialogVisible: false,            // 编辑对话框的显示隐藏            editRolesDialogVisible: false,            //   控制分配权限对话框的显示和隐藏            setRightDialogVisible: false,            //   所有权限的数据            rightslist: [],            //   树形控件的属性绑定对象            treeProps: {                   label: "authName",                children: "children",            },            // 默认选中的节点id值数组            defKeys: [],            //  当前即将分配权限的角色id            roleId: "",        };    },    // 计算属性    computed: {   },    // 侦听器    watch: {   },    // 组件方法    methods: {           // 获取所有的角色列表        async getRolesList() {               const {    data: res } = await rolesApi.getRoles();            if (res.meta.status !== 200) {                   return this.$message.error("获取角色列表失败");            }            this.rolelist = res.data;            console.log(this.rolelist);        },        // 添加角色        addRoles() {               this.$refs.addRolesRef.validate(async (valid) => {                   if (!valid) return;                // 添加                const {    data: res } = await rolesApi.addRole(this.addRolesForm);                if (res.meta.status !== 200) {                       this.$message.error("添加角色失败");                }                this.$message.success("添加角色成功");                // 隐藏对话框                this.addRolesDialogVisible = false;                // 刷新角色列表                this.getRolesList();            });        },        // 关闭对话框        addRolesDialogClosed() {               this.$refs.addRolesRef.resetFields();        },        // 编辑角色        async showEditRolesDialog(id) {               console.log(id);            this.editRolesDialogVisible = true;            const {    data: res } = await rolesApi.showEditRoles(id);            if (res.meta.status !== 200) {                   return this.$message.error("查询角色失败");            }            //   this.editRolesForm = res.data;        },        // 关闭对话框        editRolesDialogClosed() {               this.$refs.editRolesFormRef.resetFields();        },        editRolesInfo() {               this.$refs.editRolesFormRef.validate(async (valid) => {                   console.log(valid);                if (!valid) return;                // 发起修改角色的数据请求                const {    data: res } = await rolesApi.editRoles(this.editRolesForm.id                    //   {                       //     email: this.editRolesForm.email,                    //     mobile: this.editRolesForm.mobile,                    //   }                );                if (res.meta.status !== 200) {                       return this.$message.error("更新角色失败");                }                // 关闭对话框                this.editRolesDialogVisible = false;                // 刷新数据列表                this.getRolesList();                // 提示修改成功                this.$message.success("更新角色成功");            });        },        // 删除角色        async removeRoles(id) {               console.log(id);            // 确认删除弹框？            const confirmResult = await this.$confirm("确定删除此角色吗？", "提示", {                   confirmButtonText: "确定",                cancelButtonText: "取消",                type: "warning",            }).catch((err) => err);            // 角色确认删除返回confirm 取消删除返回cancel            console.log(confirmResult);            if (confirmResult !== "confirm") {                   return this.$message.info("已取消删除");            }            const {    data: res } = await rolesApi.removeRol(id);            console.log(res);            if (res.meta.status !== 200) {                   this.$message.error("删除角色失败");            }            this.$message.success("删除角色成功");            // 更新角色列表            this.getRolesList();        },        // 根据id删除对应的权限        async removeRolesById(role, rightId) {               const confirmResult = await this.$confirm("确定删除此角色吗？", "提示", {                   confirmButtonText: "确定",                cancelButtonText: "取消",                type: "warning",            }).catch((err) => err);            if (confirmResult !== "confirm") {                   return this.$message.info("取消删除");            }            //   console.log('确认删除')            const {    data: res } = await rolesApi.removeRolesByIds(role.id,rightId);            //   console.log(res)            if (res.meta.status !== 200) {                   return this.$message.error("删除权限失败");            }            // this.getRolesList()            role.children = res.data;        },        // 分配权限        async showSetRightDialog(role) {               //下一个函数的操作            this.roleId = role.id;            // 获取所有权限的数据            const {    data: res } = await rolesApi.SetRightDialog();            if (res.meta.status !== 200) {                   return this.$message.error("获取权限数据失败");            }            // 把获取到的权限数据保存到data中            this.rightslist = res.data;            this.getLeafKeys(role, this.defKeys);            this.setRightDialogVisible = true;        },        // 获取三级权限        getLeafKeys(node, arr) {               if (!node.children) {                   return arr.push(node.id);            }            node.children.forEach((item) => {                   this.getLeafKeys(item, arr);            });        },        // 监听分配权限对话框的关闭事件        setRightDialogClosed() {               this.defKeys = [];        },        // 分配权限        async allotRights() {               const keys = [                ...this.$refs.treeRef.getCheckedKeys(),                ...this.$refs.treeRef.getHalfCheckedKeys(),            ];            //   console.log(keys)            const idStr = keys.join(",");            const {    data: res } = await rolesApi.allotRight(this.roleId,idStr);            if (res.meta.status !== 200) {                   return this.$message.error('分配权限失败')            }            this.$message.success('分配权限成功')            this.getRolesList()            this.setRightDialogVisible = false        },    },    // 以下是生命周期钩子 注：没用到的钩子请自行删除    beforeCreate() {    },    created() {           this.getRolesList();    },    beforeMount() {    },    mounted() {    },    beforeUpdate() {    },    updated() {    },    activated() {    },    deactivated() {    },    beforeDestroy() {    },    destroyed() {    },};</script>