VUE(20) : vue-element-admin[10] : 菜单权限分配

最新推荐文章于 2024-09-07 15:54:08 发布
最新推荐文章于 2024-09-07 15:54:08 发布
阅读量1.1k 收藏
点赞数
分类专栏： 前端 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lxinccode/article/details/126949357
版权

1.建表语句(mysql)

menu

CREATE TABLE `menu` (
  `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT COMMENT '主键(自增id)',
  `gmt_create` datetime DEFAULT NULL COMMENT '创建时间',
  `gmt_modify` datetime DEFAULT NULL COMMENT '更新时间',
  `name` varchar(125) DEFAULT NULL COMMENT '路径名称',
  `path` varchar(125) DEFAULT NULL COMMENT '路径',
  `parent_id` bigint(20) DEFAULT NULL COMMENT '父节点id',
  `sort` int(11) DEFAULT NULL COMMENT '排序(从小到大)',
  `icon` varchar(55) DEFAULT NULL COMMENT '菜单图标',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=60 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci ROW_FORMAT=DYNAMIC COMMENT='菜单'
;

menu_group

CREATE TABLE `menu_group` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键(自增id)',
  `gmt_create` datetime DEFAULT NULL COMMENT '创建时间',
  `gmt_modify` datetime DEFAULT NULL COMMENT '更新时间',
  `name` varchar(125) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '菜单组名称',
  `menu_ids` varchar(555) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '菜单id',
  PRIMARY KEY (`id`),
  UNIQUE KEY `u_name` (`name`)
) ENGINE=InnoDB AUTO_INCREMENT=41 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci ROW_FORMAT=DYNAMIC COMMENT='菜单组'
;

2.菜单列表(前端)

vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="listQuery.params.parentId" class="filter-item" placeholder="请选择父节点">
        <el-option v-for="item in calendarTypeOptions3" :key="item.key" :label="item.display_name" :value="item.key" />
      </el-select>
      <el-input v-model="listQuery.params.name" :placeholder="$t('caiDanGuanLiCaiDanLieBiao.name')" style="width: 200px;margin-left: 10px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.params.path" :placeholder="$t('caiDanGuanLiCaiDanLieBiao.path')" style="width: 200px;margin-left: 10px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        {{ $t('table.search') }}
      </el-button>
      <el-button v-waves class="filter-item" type="primary" @click="handleReset">
        {{ $t('common.reset') }}
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;float: right;" type="primary" icon="el-icon-edit" @click="handleCreate">
        {{ $t('table.add') }}
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column :label="$t('caiDanGuanLiCaiDanLieBiao.name')" align="center">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('caiDanGuanLiCaiDanLieBiao.path')" align="center">
        <template slot-scope="{row}">
          <span>{{ row.path }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('caiDanGuanLiCaiDanLieBiao.parentId')" align="center">
        <template slot-scope="{row}">
          <span>{{ row.parentName }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('caiDanGuanLiCaiDanLieBiao.sort')" align="center">
        <template slot-scope="{row}">
          <span>{{ row.sort }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('caiDanGuanLiCaiDanLieBiao.icon')" align="center">
        <template slot-scope="{row}">
          <svg-icon :icon-class="row.icon" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            {{ $t('table.edit') }}
          </el-button>
          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
            {{ $t('table.delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="getList" />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="rigth" autocomplete="on" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item :label="$t('caiDanGuanLiCaiDanLieBiao.name')" prop="name">
          <el-input v-model="temp.name" />
        </el-form-item>
        <el-form-item :label="$t('caiDanGuanLiCaiDanLieBiao.path')" prop="path">
          <el-input v-model="temp.path" />
        </el-form-item>
        <el-form-item :label="$t('caiDanGuanLiCaiDanLieBiao.parentId')" prop="parentId">
          <el-select v-model="temp.parentId" class="filter-item" placeholder="请选择父节点">
            <el-option v-for="item in calendarTypeOptions2" :key="item.key" :label="item.display_name" :value="item.key" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('caiDanGuanLiCaiDanLieBiao.sort')" prop="sort">
          <el-input v-model="temp.sort" />
        </el-form-item>
        <el-form-item :label="$t('caiDanGuanLiCaiDanLieBiao.icon')" prop="icon">
          <el-select v-model="temp.icon" class="filter-item" placeholder="请选择菜单图标">
            <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key">
              <svg-icon :icon-class="item.key" />
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          {{ $t('table.cancel') }}
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?create():modify()">
          {{ $t('table.confirm') }}
        </el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
      <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
        <el-table-column prop="key" label="Channel" />
        <el-table-column prop="pv" label="Pv" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogPvVisible = false">{{ $t('table.confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { pages, add, update, del, listParent } from '@/api/caiDanGuanLi/caiDanLieBiao'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'ComplexTable',
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      currentId: -2,
      switchValue: true,
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 20,
        params: {
          name: '' || undefined,
          path: '' || undefined,
          parentId: '' || undefined,
          sort: '' || undefined,
          icon: '' || undefined
        }
      },
      calendarTypeOptions: this.getIcons(),
      calendarTypeOptions2: this.getParents(),
      calendarTypeOptions3: this.getParents(),
      importanceOptions: [1, 2, 3],
      sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
      statusOptions: ['published', 'draft', 'deleted'],
      showReviewer: false,
      temp: {
        id: '' || undefined,
        name: '' || undefined,
        path: '' || undefined,
        parentId: '' || undefined,
        sort: '' || undefined,
        icon: '' || undefined
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '添加'
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        name: [{ required: true, message: '[名称]不能为空', trigger: 'change' }],
        path: [{ required: true, message: '[路径]不能为空', trigger: 'change' }],
        parentId: [{ required: true, message: '[父节点]不能为空', trigger: 'change' }],
        sort: [{ required: true, message: '[排序]不能为空', trigger: 'change' }],
        icon: [{ required: true, message: '[图标]不能为空', trigger: 'change' }]
      },
      downloadLoading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getParents() {
      var rs = []
      listParent(-2).then(response => {
        response.data.forEach(d => {
          var o = { key: d.id, display_name: d.name }
          rs.push(o)
        })
      })
      return rs
    },
    getParents2() {
      var rs = []
      listParent(this.currentId).then(response => {
        response.data.forEach(d => {
          var o = { key: d.id, display_name: d.name }
          rs.push(o)
        })
      })
      return rs
    },
    getList() {
      this.listLoading = true
      pages(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleReset() {
      this.listQuery.pageNo = 1
      this.listQuery.params.name = null
      this.listQuery.params.path = null
      this.listQuery.params.parentId = null
      this.listQuery.params.sort = null
      this.getList()
    },
    handleFilter() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    resetTemp() {
      this.temp = {
        userName: undefined,
        account: undefined,
        phone: undefined,
        roleNames: undefined,
        password: undefined
      }
    },
    handleCreate() {
      this.switchValue = false
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      this.calendarTypeOptions2 = this.getParents()
    },
    create() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          add(this.temp).then(() => {
            this.list.unshift(this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        }
      })
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      this.dialogStatus = 'update'
      this.currentId = row.id
      this.calendarTypeOptions2 = this.getParents2()
    },
    modify() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          update(tempData).then(() => {
            const index = this.list.findIndex(v => v.id === this.temp.id)
            this.list.splice(index, 1, this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        }
      })
    },
    handleDelete(row, index) {
      const req = { id: row.id }
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(req).then(() => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
          this.getList()
        })
      })
    },
    getIcons() {
      var rs = []
      var o1 = { key: 'component', display_name: 'component' }
      var o2 = { key: 'bug', display_name: 'bug' }
      var o3 = { key: 'chart', display_name: 'chart' }
      var o4 = { key: 'clipboard', display_name: 'clipboard' }
      var o5 = { key: '404', display_name: '404' }
      var o6 = { key: 'dashboard', display_name: 'dashboard' }
      var o7 = { key: 'documentation', display_name: 'documentation' }
      var o8 = { key: 'drag', display_name: 'drag' }
      var o9 = { key: 'edit', display_name: 'edit' }
      var o10 = { key: 'education', display_name: 'education' }
      var o11 = { key: 'email', display_name: 'email' }
      var o12 = { key: 'example', display_name: 'example' }
      var o13 = { key: 'excel', display_name: 'excel' }
      var o14 = { key: 'exit-fullscreen', display_name: 'exit-fullscreen' }
      var o15 = { key: 'eye-open', display_name: 'eye-open' }
      var o16 = { key: 'eye', display_name: 'eye' }
      var o17 = { key: 'form', display_name: 'form' }
      var o18 = { key: 'fullscreen', display_name: 'fullscreen' }
      var o19 = { key: 'guide', display_name: 'guide' }
      var o20 = { key: 'icon', display_name: 'icon' }
      var o21 = { key: 'international', display_name: 'international' }
      var o22 = { key: 'language', display_name: 'language' }
      var o23 = { key: 'link', display_name: 'link' }
      var o24 = { key: 'list', display_name: 'list' }
      var o25 = { key: 'lock', display_name: 'lock' }
      var o26 = { key: 'message', display_name: 'message' }
      var o27 = { key: 'money', display_name: 'money' }
      var o28 = { key: 'nested', display_name: 'nested' }
      var o29 = { key: 'password', display_name: 'password' }
      var o30 = { key: 'pdf', display_name: 'pdf' }
      var o31 = { key: 'people', display_name: 'people' }
      var o32 = { key: 'peoples', display_name: 'peoples' }
      var o33 = { key: 'qq', display_name: 'qq' }
      var o34 = { key: 'search', display_name: 'search' }
      var o35 = { key: 'shopping', display_name: 'shopping' }
      var o36 = { key: 'size', display_name: 'size' }
      var o37 = { key: 'skill', display_name: 'skill' }
      var o38 = { key: 'star', display_name: 'star' }
      var o39 = { key: 'tab', display_name: 'tab' }
      var o40 = { key: 'table', display_name: 'table' }
      var o41 = { key: 'theme', display_name: 'theme' }
      var o42 = { key: 'tree-table', display_name: 'tree-table' }
      var o43 = { key: 'tree', display_name: 'tree' }
      var o44 = { key: 'user', display_name: 'user' }
      var o45 = { key: 'wechat', display_name: 'wechat' }
      var o46 = { key: 'zip', display_name: 'zip' }
      rs.push(o1)
      rs.push(o2)
      rs.push(o3)
      rs.push(o4)
      rs.push(o5)
      rs.push(o6)
      rs.push(o7)
      rs.push(o8)
      rs.push(o9)
      rs.push(o10)
      rs.push(o11)
      rs.push(o12)
      rs.push(o13)
      rs.push(o14)
      rs.push(o15)
      rs.push(o16)
      rs.push(o17)
      rs.push(o18)
      rs.push(o19)
      rs.push(o20)
      rs.push(o21)
      rs.push(o22)
      rs.push(o23)
      rs.push(o24)
      rs.push(o25)
      rs.push(o26)
      rs.push(o27)
      rs.push(o28)
      rs.push(o29)
      rs.push(o30)
      rs.push(o31)
      rs.push(o32)
      rs.push(o33)
      rs.push(o34)
      rs.push(o35)
      rs.push(o36)
      rs.push(o37)
      rs.push(o38)
      rs.push(o39)
      rs.push(o40)
      rs.push(o41)
      rs.push(o42)
      rs.push(o43)
      rs.push(o44)
      rs.push(o45)
      rs.push(o46)
      return rs
    }
  }
}
</script>

api

import request from '@/utils/request'

export function listParent(id) {
  return request({
    url: '/qjjk-api/v1/menu/list-parent?id=' + id,
    method: 'get'
  })
}

export function pages(data) {
  return request({
    url: '/qjjk-api/v1/menu/pages',
    headers: { 'Content-Type': 'application/json' },
    method: 'post',
    data
  })
}

export function add(data) {
  return request({
    url: '/qjjk-api/v1/menu',
    headers: { 'Content-Type': 'application/json' },
    method: 'post',
    data
  })
}

export function update(data) {
  return request({
    url: '/qjjk-api/v1/menu',
    headers: { 'Content-Type': 'application/json' },
    method: 'put',
    data
  })
}

export function del(data) {
  return request({
    url: '/qjjk-api/v1/menu',
    method: 'delete',
    params: data
  })
}

3.菜单组列表        

vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.params.name" placeholder="菜单组名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />

      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        {{ $t('table.search') }}
      </el-button>
      <el-button v-waves class="filter-item" type="primary" @click="handleReset">
        {{ $t('common.reset') }}
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;float: right;" type="primary" icon="el-icon-edit" @click="handleCreate">
        {{ $t('table.add') }}
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="菜单组名称" align="center">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="菜单列表" align="center">
        <template slot-scope="{row}">
          <span>{{ row.menuNames }}</span>
        </template>
      </el-table-column>

      <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            {{ $t('table.edit') }}
          </el-button>
          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
            {{ $t('table.delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="getList" />

      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
        <el-form ref="dataForm" :rules="rules" :model="temp" label-position="rigth" autocomplete="on" label-width="100px" style="width: 400px; margin-left:50px;">
          <el-form-item label="菜单组名称" prop="name">
            <el-input v-model="temp.name" />
          </el-form-item>
          <el-form-item label="菜单数">
            <el-tree ref="tree" :check-strictly="checkStrictly" :data="routesData" :props="defaultProps" show-checkbox node-key="path" class="permission-tree" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">
            {{ $t('table.cancel') }}
          </el-button>
          <el-button type="primary" @click="dialogStatus==='create'?create():modify()">
            {{ $t('table.confirm') }}
          </el-button>
        </div>
      </el-dialog>

      <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
        <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
          <el-table-column prop="key" label="Channel" />
          <el-table-column prop="pv" label="Pv" />
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogPvVisible = false">{{ $t('table.confirm') }}</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { pages, add, update, del } from '@/api/caiDanGuanLi/caiDanZuLieBiao'
import { getListMenuTree } from '@/api/quanXianKongZhi/quanXianKongZhi'
import { Message } from 'element-ui'

const defaultRole = {
  key: '',
  name: '',
  description: '',
  routes: []
}

export default {
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      listQuery: {
        pageNo: 1,
        pageSize: 20,
        params: {
          name: '' || undefined,
          menuId: '' || undefined
        }
      },
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      temp: {
        name: '' || undefined,
        menuIds: '' || undefined
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '添加'
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        name: [{ required: true, message: '[菜单组名称]不能为空', trigger: 'change' }]
      },
      role: Object.assign({}, defaultRole),
      routes: [],
      rolesList: [],
      dialogVisible: false,
      dialogType: 'new',
      checkStrictly: false,
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  computed: {
    routesData() {
      return this.routes
    }
  },
  created() {
    this.getRoutes()
    this.getList()
  },
  methods: {
    async getRoutes() {
      // 菜单列表
      getListMenuTree().then(response => {
        this.routes = response.data
      })
    },
    getList() {
      this.listLoading = true
      pages(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleReset() {
      this.listQuery.pageNo = 1
      this.listQuery.params.name = null
      this.listQuery.params.menuId = null
      this.getList()
    },
    handleFilter() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    resetTemp() {
      this.temp = {
        name: undefined,
        menuId: undefined
      }
    },
    handleCreate() {
      this.switchValue = false
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      this.$nextTick(() => {
        this.$refs.tree.setCheckedNodes([])
        this.checkStrictly = false
      })
    },
    create() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const checkedKeys = this.$refs.tree.getCheckedKeys()
          if (checkedKeys.length === 0){
            Message({
            message: '请勾选菜单',
            type: 'error',
            duration: 1 * 1000
            })
          }
          this.temp.menuIds = JSON.stringify(checkedKeys)
          console.log(checkedKeys)
          add(this.temp).then(() => {
            this.list.unshift(this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        }
      })
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      this.dialogStatus = 'update'
      // 回显
      this.checkStrictly = true
      const checkedNodes = []
      console.log(JSON.parse(row.menuIds))
      JSON.parse(row.menuIds).forEach(id => {
        const path = { path: id}
        checkedNodes.push(path)
      })
      this.$nextTick(() => {
        this.$refs.tree.setCheckedNodes(checkedNodes)
        this.checkStrictly = false
      })
    },
    modify() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const checkedKeys = this.$refs.tree.getCheckedKeys()
          if (checkedKeys.length === 0){
            Message({
            message: '请勾选菜单',
            type: 'error',
            duration: 1 * 1000
            })
            return null
          }
          const tempData = Object.assign({}, this.temp)
          tempData.menuIds = JSON.stringify(checkedKeys)
          update(tempData).then(() => {
            const index = this.list.findIndex(v => v.id === this.temp.id)
            this.list.splice(index, 1, this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        }
      })
    },
    handleDelete(row, index) {
      const req = { id: row.id }
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(req).then(() => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
          this.getList()
        })
      })
    }
  }
}
</script>

api

import request from '@/utils/request'

export function listMenuGroups() {
  return request({
    url: '/qjjk-api/v1/menu_group/list-all',
    method: 'get'
  })
}

export function pages(data) {
  return request({
    url: '/qjjk-api/v1/menu_group/pages',
    headers: { 'Content-Type': 'application/json' },
    method: 'post',
    data
  })
}

export function add(data) {
  return request({
    url: '/qjjk-api/v1/menu_group',
    headers: { 'Content-Type': 'application/json' },
    method: 'post',
    data
  })
}

export function update(data) {
  return request({
    url: '/qjjk-api/v1/menu_group',
    headers: { 'Content-Type': 'application/json' },
    method: 'put',
    data
  })
}

export function del(data) {
  return request({
    url: '/qjjk-api/v1/menu_group',
    method: 'delete',
    params: data
  })
}

Lxinccode
关注
专栏目录
vue-element-admin-template 權限控制整理
software20121216的博客
01-10 1788
vue-element-admin是個強大的管理後台框架 https://github.com/PanJiaChen/vue-element-admin/tree/master/src/directive 經過了一些琢磨，終於知道vue-element-admin-template如何增加權限控制 首先，先把邏輯關係理清楚： 登錄後通過token獲取用戶對應的角色rol...
vue3-element-admin:vue3-element-admin后台管理系统前端解决方案
04-17
Vue3 Element Admin 中文 | 简介 Vue3 Element Admin 是一个免费开源的中后台模版。基于vue3+ElementPlus+Vite开发，是一个开箱即用的中后台前端解决方案，它可以帮助你快速搭建企业级中后台产品原型，也可用于学习...
vue-element-admin：基于vue，element-ui的后台系统，包含侧边栏权限过滤等常用组件
02-05
Vue元素管理员 vue-cli + element-ui后台开发项目本项目不适合作为后台模板使用，仅作为后台解决方案的一种本方案模板页： 本地使用 // download files git clone https: //github.com/BiYuqi/vue-element-admin.git cd vue - element - admin // install dependencies npm install // serve with hot reload at localhost:8080 npm run serve // build for production with
vue-element-admin动态路由权限、菜单
feifei9989的博客
03-17 3363
vue-element-admin动态路由权限、菜单
vue+element-ui实现动态的权限管理和菜单渲染_权限设置ui
最新发布
2401_86637638的博客
09-07 459
欢迎star, 留着也许就用到了，毕竟权限管理 还是很普遍的嘛。
基于vue实现权限控制，动态渲染菜单栏
CRMEB小程序商城的博客
07-26 1313
实现原理：用户登录，服务端返回相关权限，进行持久化存储，筛选动态路由，同时菜单栏也需动态渲染
vue-admin-template用户权限控制及按钮权限
qq_43030908的博客
04-06 3460
一、用户权限 1. 修改router/index.js文件 去掉多余的路由，只留下这两个路由。/404、{ path: “*”, redirect: “/404”, hidden: true }都注释掉。 2. 修改store/modules/user.js文件 const getDefaultState = () => { return { menus: "", // 存放路由表 }; }; const mutations = { SET_MEUN: (state, menus
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
vue-admin-beautiful-template:vue-admin-beautiful-template基础版
03-21
vue-admin-beautiful（element-ui） 地址 vue-admin-beautiful前端讨论QQ群972435319，1139183756 不论您加或不加，您都可以享受到开源的代码，感谢您的支持和信任，群内部提供vue-admin-beautifu基础版本...
vue-xuAdmin：vue + element-ui-admin后台权限管理模板演示地址：
02-06
vue + element-ui无限级菜单权限管理后台模板 :house: 作者 :bust_in_silhouette: 倪荣旭 电子邮件： 先决条件 节点> = 6.0.0 npm> = 3.0.0 更新日志 v1.2.5 增加DllPlugin优化生成速度，编译速度缩短yarn ...
vue-element-Admin-demo:vue-element-Admin框架源代码
03-23
基于最新的vue开发堆栈，它具有内置的i18n解决方案，企业应用程序的典型模板以及许多出色的功能。 它可以帮助您构建大型而复杂的单页应用程序。 我相信无论您有什么需求，该项目都将为您提供帮助。 国内用户可访问...
vue-admin-template添加权限控制.zip
11-25
https://blog.csdn.net/zouxiong122/article/details/120354319
基于vue-element-admin的后台权限验证系统
06-21
  本课程是基于vue-element-admin实现的后台权限验证系统，解决在前后端分离场景下如何实现前端与后端的动态权限，同时还会讲解基于laravel7.x的restful api接口的开发以及如何在脚手架中进行封装调用 对于前后端将要讲解的知识，分别列举如下： 前端： 1、学习如何使用后台集成框架vue-element-admin进行后台前端框架的搭建   2、学习如何在vue-element-admin中使用element-ui组件，学习到iconfont图标库的使用方法，学习到后台通用列表页面的制作方式   3、学习如何在前后端分离下，实现前端菜单的动态权限，如何进行请求的统一拦截   4、学习到前端项目的前后端联调，打包上线，如何在服务器层解决前后端分离引起的跨域问题   5、学习如何借助linux脚本实现代码自动上线部署 后端： 1、如何使用laravel编写restful api接口   2、如何使用composer进行项目依赖管理，laravel常用扩展的安装与使用，如dingo/api 以及repository   3、如何使用jwt进行实现后台用户认证机制  
elementui-admin 整合动态侧边栏和按钮权限控制
04-29
elementui-admin 整合动态侧边栏和按钮权限控制e
vue-admin-template史上最强权限按钮+动态菜单栏+SpringBoot
weixin_44406041的博客
07-15 4173
史上最强实现vue-admin-template动态菜单栏以及按钮权限实现
动态权限-基于vue-admin-template
ioncannontic的博客
04-09 798
动态路由-基于vue-admin-template
vue后台管理系统的菜单和按钮权限控制
willsoooo的博客
09-05 2929
然后这样就实现了菜单级别的权限控制，这样权限在刷新之后，由于我的菜单路由都是存放在vuex当中的，所以，我在刷新之后，通过同步请求重新请求，解决刷新之后无菜单的问题。实现后台管理系统的实现逻辑：后台登录，由后台开发返回动态路由，然后前端更具返回的动态路由实现侧边栏。最后，按钮级别的权限控制，通过全局的自定义指令实现的。一级菜单，二级菜单，三级菜单，在child遍历。直接上代码，首先登录返回后台路由形式如下。
【Vue】VUE模板vue-admin-template添加角色权限路由
See_Star的博客
06-27 6338
VUE模板vue-admin-template-4.4.0添加角色权限路由
vue实现菜单权限控制
web前端开发
12-31 7216
作者 |全能的阿豪来源 |https://www.jianshu.com/p/aede33e897a5大家在做后台管理系统时一般都会涉及到菜单的权限控制问题。当然解决问题的方法无非两...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值