搜索框：
<div>
<el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"
v-model="name"></el-input>
<el-button style="margin: 5px; color: cadetblue" @click="load">搜索</el-button>
<el-button style="margin-left: 0px; color: #c5b8a5" @click="reset">重置</el-button>
</div>load、reset函数：
load() {
// 请求分页查询
request.get("http://localhost:9090/role/findPageByRolename", {
params: {
PageNum: this.pageNum,
PageSize: this.pageSize,
name: this.name,
}
}).then(res => {
console.log(res)
if (res.data !== null) {
this.tableData = res.data.list
this.total = res.data.total
} else {
this.$message.warning("没有搜索结果！")
}
})
}reset() {
this.name = ""
this.load()
}操作按钮：
<div style="margin: 10px 0">
<el-button style="color: cadetblue" @click="handleAdd">新增<i class="el-icon-circle-plus-outline"></i></el-button>
<el-popconfirm
style="margin-left: 10px"
confirm-button-text='确定'
cancel-button-text='取消'
icon="el-icon-info"
icon-color="#a27e7e"
title="您确定批量删除这些数据吗？"
@confirm="handleDeleteBatch"
>
<el-button style="color: #cd5c5c" slot="reference" >批量删除<i class="el-icon-remove-outline"></i></el-button>
</el-popconfirm>
</div>handleDeleteBatch函数：
handleDeleteBatch(){
let ids = this.multipleSelection.map(v => v.id)
if(ids.length === 0){
this.$message.error("请选择要删除的数据!")
}else {
request.post("/role/del/batch", ids).then(res => {
if (res) {
this.$message.success("批量删除成功!")
this.load()
} else {
this.$message.error("批量删除失败!")
}
})
}
}列表：
<el-table :data="tableData" border stripe :header-cell-style="{backgroundColor: '#F2F2E6'}" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="id" label="ID" ></el-table-column>
<el-table-column prop="name" label="用户名"></el-table-column>
<el-table-column prop="flag" label="标识"></el-table-column>
<el-table-column prop="description" label="描述"></el-table-column>
<el-table-column label="操作" width="280px">
<template slot-scope="scope">
<el-button style="color: cornflowerblue" @click="selectMenu(scope.row.id)">分配菜单 <i class = "el-icon-thumb"></i></el-button>
<el-button style="color: cornflowerblue" @click="handleEdit(scope.row)">编辑<i class="el-icon-edit"></i></el-button>
<el-popconfirm
style="margin-left: 8px"
confirm-button-text='确定'
cancel-button-text='取消'
icon="el-icon-info"
icon-color="#a27e7e"
title="您确定删除吗？"
@confirm="handleDelete(scope.row.id)"
>
<el-button style="color: indianred" slot="reference">删除 <i class = "el-icon-delete"></i></el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>函数：
selectMenu(roleId){
this.menuDialogVis = true
this.roleId = roleId
//请求菜单数据
request.get("http://localhost:9090/menu").then(res => {
this.menuData = res.data
//把后台返回的菜单数据处理成id数组
this.expends = this.menuData.map(v => v.id)
})
request.get("http://localhost:9090/role/getRoleMenu/" + this.roleId).then(res => {
this.checks = res.data
})
}handleEdit(row){
this.form = row
this.dialogFormVisible = true
}handleDelete(id){
request.delete("/role/" + id).then(res => {
if (res) {
this.$message.success("删除成功!")
this.load()
} else {
this.$message.error("删除失败!")
}
})
}编辑框和菜单分配框：
<el-dialog title="角色信息" :visible.sync="dialogFormVisible" width="30%">
<el-form label-width="60px" size="small">
<el-form-item label="用户名:">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="标识">
<el-input v-model="form.flag" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input v-model="form.description" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button style="color: lightcoral" @click="save">确 定</el-button>
</div>
</el-dialog>
<el-dialog title="菜单分配" :visible.sync="menuDialogVis" width="25%">
<el-tree
:props="props"
:data="menuData"
show-checkbox
node-key="id"
ref="tree"
:default-expanded-keys="expends"
:default-checked-keys="checks">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span><i :class="data.icon"></i> {{ data.name }}</span>
</span>
</el-tree>
<div slot="footer" class="dialog-footer">
<el-button @click="menuDialogVis = false">取 消</el-button>
<el-button style="color: lightcoral" @click="saveRoleMenu">确 定</el-button>
</div>
</el-dialog>函数：
save() {
request.post("http://localhost:9090/role", this.form).then(res => {
if (res) {
this.$message.success("保存成功!")
this.dialogFormVisible = false
this.load()
} else {
this.$message.error("保存失败!")
}
})
}saveRoleMenu(){
this.roleMenuId ={
"roleId": this.roleId,
"menuIds": this.getKeys(this.$refs.tree.getCheckedNodes())
}
request.post("http://localhost:9090/role/roleMenu", this.roleMenuId).then(res => {
console.log(res)
if(res){
this.$message.success("菜单分配成功!")
this.menuDialogVis = false
}else{
this.$message.error("菜单分配失败!")
}
})
}getKeys(list){
let tmp = []
for(let i = 0; i < list.length; i++)
tmp.push(list[i].id)
return tmp
}
