1.页面结构.
<template>
<div class="container">
<div class="app-container">
<el-button class="btn-add" size="mini" type="primary">添加权限</el-button>
<el-table>
<el-table-column label="名称" />
<el-table-column label="标识" />
<el-table-column label="描述" />
<el-table-column label="操作">
<el-button size="mini" type="text">添加</el-button>
<el-button size="mini" type="text">编辑</el-button>
<el-button size="mini" type="text">删除</el-button>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: 'Permission'
}
</script>
<style>
.btn-add {
margin: 10px;
}
</style>2.api.js
import request from '@/utils/request'
/** *
* 获取权限列表
* **/
export function getPermissionList() {
return request({
url: '/permission'
})
}
3.页面调用api
<script>
import { getPermissionList } from '@/api/permission'
import { transListToTreeData } from '@/utils'
export default {
name: 'Permission',
data() {
return {
list: []
}
},
created() {
this.getPermissionList()
},
methods: {
async getPermissionList() {
this.list = transListToTreeData(await getPermissionList(), 0) // 将列表数据转化成树形结构
}
}
}
</script>4.绑定数据
<el-table default-expand-all :data="list" row-key="id">
<el-table-column prop="name" label="名称" />
<el-table-column prop="code" label="标识" />
<el-table-column prop="description" label="描述" />
<el-table-column label="操作">
<template v-slot="{ row }">
<el-button v-if="row.type === 1" size="mini" type="text">添加</el-button>
<el-button size="mini" type="text">编辑</el-button>
<el-button size="mini" type="text">删除</el-button>
</template>
</el-table-column>
</el-table>row中字段包含children是必须指定row-key
5.api.js
import request from '@/utils/request'
/** *
* 获取权限列表
* **/
export function getPermissionList() {
return request({
url: '/permission/query',
method: 'get'
})
}
/**
* 获取权限详情
*
* ***/
export function getPermissionDetail(id) {
return request({
url: `/permission/${id}`
})
}
/**
* 新增权限
* ***/
export function addPermission(data) {
return request({
method: 'post',
url: '/permission',
data
})
}
/**
* 编辑权限
* ***/
export function editPermission(data) {
return request({
method: 'put',
url: '/permission',
data
})
}
/**
* 删除权限
*
* ***/
export function delPermission(id) {
return request({
method: 'delete',
url: `/permission/${id}`
})
}
6.完整页面
add-permission
<template>
<el-dialog :title="title" :visible="showDialog" @close="close">
<!-- 放置弹层内容 -->
<el-form ref="addPermission" :model="formData" :rules="rules" label-width="120px">
<el-form-item prop="name" label="权限名称">
<el-input v-model="formData.name" placeholder="2-10个字符" style="width: 80%" size="mini" />
</el-form-item>
<el-form-item prop="code" label="权限标识">
<el-input v-model="formData.code" placeholder="2-10个字符" style="width: 80%" size="mini" />
</el-form-item>
<el-form-item prop="description" label="权限描述">
<el-input v-model="formData.description" placeholder="1-100个字符" type="textarea" size="mini" :rows="4" style="width: 80%" />
</el-form-item>
<el-form-item label="开启">
<el-switch
v-model="formData.envisible"
active-value="1"
inactive-value="0"
/>
</el-form-item>
<el-form-item>
<!-- 按钮 -->
<el-row type="flex" justify="center">
<el-col :span="12">
<el-button size="mini" type="primary" @click="btnOK">确定</el-button>
<el-button size="mini" @click="close">取消</el-button>
</el-col>
</el-row>
</el-form-item></el-form>
</el-dialog>
</template>
<script>
import { getPermissionList, addPermission, editPermission, getPermissionDetail } from '@/api/permission'
export default {
props: {
showDialog: {
type: Boolean,
default: false
},
currentNodeId: {
type: String,
default: null
},
title: {
type: String,
default: null
}
},
data() {
return {
formData: {
code: '', // 权限标识
description: '', // 权限描述
name: '', // 权限名称
pid: 0, // 父级权限的id
type: 1, // 权限层级
enVisible: '1' // 是否启用
},
rules: {
code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' },
{
min: 2, max: 10, message: '权限标识的长度为2-10个字符', trigger: 'blur'
}, {
trigger: 'blur',
// 自定义校验模式
validator: async(rule, value, callback) => {
// value就是输入的编码
let result = await getPermissionList()
// 判断是否编辑模式
if (this.formData.id) {
result = result.filter(item => item.id !== this.formData.id)
}
// result数组中是否存在 value值
if (result.some(item => item.code === value)) {
callback(new Error('权限中已经有该编码了'))
} else {
callback()
}
}
}
], // 权限编码
name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' },
{
min: 2, max: 10, message: '权限名称的长度为2-10个字符', trigger: 'blur'
}, {
trigger: 'blur',
// 自定义校验模式
validator: async(rule, value, callback) => {
// value就是输入的编码
let result = await getPermissionList()
// 判断是否编辑模式
if (this.formData.id) {
result = result.filter(item => item.id !== this.formData.id)
}
// result数组中是否存在 value值
if (result.some(item => item.name === value)) {
callback(new Error('权限中已经有该名称了'))
} else {
callback()
}
}
}] // 权限名称
// pid: '' // 父级权限的id 不需要做校验
}
}
},
methods: {
close() {
// 修改父组件的值 子传父
this.$refs.addPermission.resetFields() // 重置表单
this.$emit('update:showDialog', false)
},
// 点击确定时调用
btnOK() {
this.$refs.addPermission.validate(async isOK => {
if (isOK) {
let msg = ' '
// 通过是否获取id来标识编辑状态
if (this.formData.id) {
await editPermission({ ...this.formData })
msg = '编辑'
} else {
await addPermission({ ...this.formData, pid: this.currentNodeId })
// 提示消息
msg = '新增'
}
// 通知父组件更新
this.$emit('updatePermission')
this.$message.success(msg + '权限成功')
this.close()
}
})
},
// 获取权限的详情
async getPermissionDetail() {
this.formData = await getPermissionDetail(this.currentNodeId)
}
}
}
</script>
index.vue
<template>
<div class="container">
<div class="app-container">
<el-button class="btn-add" size="mini" type="primary" @click="showAdd(0,'add')">添加权限</el-button>
<el-table default-expand-all :data="list" row-key="id">
<el-table-column prop="name" label="名称" />
<el-table-column prop="code" label="标识" />
<el-table-column prop="description" label="描述" />
<el-table-column label="操作">
<template v-slot="{ row }">
<el-button v-if="row.type === 1" size="mini" type="text" @click="showAdd( row.id,'add' )">添加</el-button>
<el-button size="mini" type="text" @click="showAdd( row.id,'edit' )">编辑</el-button>
<el-button size="mini" type="text" @click="delPer( row.id )">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 表示会接受子组件的事件 update:showDialog, 值 => 属性 -->
<add-permission ref="addPermission" :title="title" :current-node-id="currentNodeId" :show-dialog.sync="showDialog" :showtype.sync="showtype" @updatePermission="getPermissionList" />
</div>
</template>
<script>
import { delPermission, getPermissionList } from '@/api/permission'
import { transListToTreeData } from '@/utils'
import addPermission from './components/add-permission.vue'
export default {
name: 'Permission',
components: { addPermission },
data() {
return {
currentNodeId: null, // 存储当前点击的id
showDialog: false, // 控制弹层的隐藏和显示
list: []
}
},
created() {
this.getPermissionList()
},
methods: {
async getPermissionList() {
this.list = transListToTreeData(await getPermissionList(), 0) // 将列表数据转化成树形结构
},
showAdd(id, showtype) {
this.showDialog = true
this.currentNodeId = id
console.log(id)
if (showtype === 'add') { this.title = '新增权限点' }
if (showtype === 'edit') {
this.title = '编辑权限点'
// 父组件调用子组件的方法来获取数据
this.$nextTick(() => {
this.$refs.addPermission.getPermissionDetail() // this.$refs.addDept等同于子组件的this
})
}
},
delPer(id) {
// 删除权限
this.$confirm('您确认要删除该权限吗').then(async() => {
await delPermission(id)
// 提示消息
this.$message.success('删除权限成功')
this.getPermissionList()
})
}
}
}
</script>
<style>
.btn-add {
margin: 10px;
}
</style>
本文暂时没有评论，来添加一个吧(●'◡'●)