<template>
|
<div style="width:100%">
|
<div class="topSelect">
|
<el-button type="primary" @click="roleAddModel">新建角色</el-button>
|
</div>
|
<div class="topTitle">
|
<el-table
|
id="exportTab"
|
height="720"
|
:data="tableData"
|
border
|
style="width: 100%"
|
:stripe="true"
|
>
|
<el-table-column
|
prop="groupName"
|
label="角色名称"
|
/>
|
<el-table-column
|
prop="updateTime"
|
label="更新时间"
|
/>
|
<el-table-column
|
fixed="right"
|
label="操作"
|
width="160"
|
>
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click="roleEditOpen(scope.row)">编辑</el-button>
|
<el-button type="text" size="small" @click="roleRoleOpen(scope.row)">分配菜单</el-button>
|
<el-popconfirm
|
:ref="`popover-${scope.$index}`"
|
confirm-button-text="确认"
|
cancel-button-text="取消"
|
icon="el-icon-info"
|
icon-color="red"
|
title="确定删除吗？"
|
@confirm="roleDel(scope.row)"
|
>
|
<el-button slot="reference" type="text" size="small">删除</el-button>
|
</el-popconfirm>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="getList" /> -->
|
</div>
|
<!-- 新建角色弹窗 -->
|
<el-dialog title="新建角色" :visible.sync="dialogAdd">
|
<el-form :model="form" :rules="rules">
|
<el-form-item label="角色名称" :label-width="formLabelWidth" prop="groupName">
|
<el-input v-model="form.groupName" autocomplete="off" />
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogAdd = false">取 消</el-button>
|
<el-button type="primary" @click="roleAdd">确 定</el-button>
|
</div>
|
</el-dialog>
|
<!-- 编辑角色弹窗 -->
|
<el-dialog title="编辑角色" :visible.sync="dialogEdit">
|
<el-form :model="formEdit" :rules="rules">
|
<el-form-item label="角色名称" :label-width="formLabelWidth" prop="groupName">
|
<el-input v-model="formEdit.groupName" autocomplete="off" />
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogEdit = false">取 消</el-button>
|
<el-button type="primary" @click="roleEdit">确 定</el-button>
|
</div>
|
</el-dialog>
|
<!-- 角色分配菜单弹窗 -->
|
<el-dialog title="分配菜单" :visible.sync="dialogRole">
|
<el-tree
|
v-if="dialogRole"
|
ref="tree"
|
:data="menuData"
|
show-checkbox
|
node-key="id"
|
:default-expand-all="true"
|
:default-checked-keys="checkedData"
|
:props="defaultProps"
|
/>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogRole = false">取 消</el-button>
|
<el-button type="primary" @click="roleRole">确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
// 例如：import《组件名称》from'《组件路径》';
|
// import Pagination from '@/components/Pagination'
|
export default {
|
// import 引入的组件需要注入到对象中才能使用
|
components: {
|
// Pagination
|
},
|
props: {},
|
data() {
|
// 这里存放数据
|
return {
|
options: [],
|
radio1: '',
|
value: '',
|
value1: '',
|
type: 'hourly',
|
monitorPointId: 0,
|
tableData: [],
|
dateDisplay: false,
|
newKey: '',
|
dialogAdd: false,
|
dialogEdit: false,
|
dialogRole: false,
|
form: {
|
groupName: ''
|
},
|
formEdit: {
|
id: 0,
|
groupName: ''
|
},
|
formLabelWidth: '120px',
|
activeName: 'first',
|
rules: {
|
groupName: [
|
{ required: true, message: '请输入名称', trigger: 'blur' },
|
{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
|
],
|
account: [
|
{ required: true, message: '请输入账号', trigger: 'blur' },
|
{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
|
],
|
password: [
|
{ required: true, validator: this.validatePassword }
|
],
|
passwordEdit: [
|
{ required: true, validator: this.validatePassword }
|
],
|
mobile: [
|
{ validator: this.validateMobile, trigger: 'blur' }
|
],
|
email: [
|
{ validator: this.validateEmail, trigger: 'blur' }
|
]
|
},
|
menuData: [],
|
checkedData: [],
|
currentGroupId: 0,
|
defaultProps: {
|
children: 'children',
|
label: 'label'
|
},
|
visibleDel: false
|
}
|
},
|
// 计算属性 类似于data概念
|
computed: {},
|
// 监控data中的数据变化
|
watch: {
|
},
|
// 生命周期 - 创建完成（可以访问当前 this 实例）
|
created() {
|
this.roleList()
|
this.menuList()
|
},
|
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
mounted() {
|
|
},
|
beforeCreate() {}, // 生命周期 - 创建之前
|
beforeMount() {}, // 生命周期 - 挂载之前
|
beforeUpdate() {}, // 生命周期 - 更新之前
|
updated() {}, // 生命周期 - 更新之后
|
beforeDestroy() {}, // 生命周期 - 销毁之前
|
destroyed() {}, // 生命周期 - 销毁完成
|
activated() {},
|
// 方法集合
|
methods: {
|
// 新建角色弹窗
|
roleAddModel() {
|
this.dialogAdd = true
|
this.form.groupName = ''
|
},
|
// 查询角色方法
|
roleList() {
|
this.$request({
|
url: '/group/select',
|
method: 'get',
|
params: {
|
page: 1,
|
size: 100
|
}
|
}).then(res => {
|
// console.log('角色列表数据')
|
// console.log(res)
|
this.tableData = res.data.items
|
})
|
},
|
// 新建角色方法
|
roleAdd() {
|
if (this.form.groupName) {
|
this.$request({
|
url: '/group/insert',
|
method: 'post',
|
data: {
|
groupName: this.form.groupName
|
}
|
}).then(res => {
|
// console.log(res)
|
this.roleList()
|
this.dialogAdd = false
|
}).catch(err => {
|
console.log(err)
|
})
|
} else {
|
this.$message({
|
message: '请填写角色名称',
|
type: 'warning'
|
})
|
}
|
},
|
// 打开及传递数据编辑弹窗
|
roleEditOpen(row) {
|
this.dialogEdit = true
|
this.formEdit.id = row.id
|
this.formEdit.groupName = row.groupName
|
this.form.id = row.id
|
this.form.groupName = row.groupName
|
},
|
// 编辑角色方法
|
roleEdit() {
|
if (this.formEdit.groupName !== this.form.groupName) {
|
this.$request({
|
url: '/group/update',
|
method: 'post',
|
data: {
|
id: this.formEdit.id,
|
groupName: this.formEdit.groupName ? this.formEdit.groupName : null
|
}
|
}).then(res => {
|
// console.log(res)
|
if (res.code === 0) {
|
this.$message.success('修改成功')
|
this.roleList()
|
this.dialogEdit = false
|
} else {
|
this.$message({
|
message: '修改失败',
|
type: 'error'
|
})
|
}
|
}).catch(err => {
|
console.log(err)
|
})
|
} else {
|
this.$message({
|
message: '未修改',
|
type: 'warning'
|
})
|
}
|
},
|
// 当前组织下的菜单列表
|
menuList() {
|
this.$request({
|
url: '/menu/select',
|
method: 'get'
|
}).then(res => {
|
// console.log('当前组织下的菜单列表')
|
// console.log(res)
|
this.menuData = res.data.menus
|
}).catch(err => {
|
console.log(err)
|
})
|
},
|
// 打开角色分配菜单弹窗
|
roleRoleOpen(row) {
|
this.checkedData = []
|
this.dialogRole = true
|
this.currentGroupId = row.id
|
this.$request({
|
url: '/menu/getMenuIds',
|
method: 'get',
|
params: {
|
groupId: row.id
|
}
|
}).then(res => {
|
// console.log('当前角色的菜单列表')
|
// console.log(res)
|
this.checkedData = res.data
|
console.log(this.checkedData)
|
}).catch(err => {
|
console.log(err)
|
})
|
},
|
// 角色分配菜单方法
|
roleRole() {
|
this.$request({
|
url: '/menu/allot',
|
method: 'post',
|
data: {
|
groupId: this.currentGroupId,
|
menuIds: this.$refs.tree.getCheckedKeys()
|
}
|
}).then(res => {
|
// console.log(res)
|
if (res.code === 0) {
|
this.$message({
|
message: '保存成功',
|
type: 'success'
|
})
|
this.dialogRole = false
|
} else {
|
this.$message({
|
message: '保存失败',
|
type: 'error'
|
})
|
}
|
}).catch(err => {
|
console.log(err)
|
})
|
},
|
// 删除角色方法
|
roleDel(row) {
|
this.visibleDel = false
|
this.$request({
|
url: '/group/delete',
|
method: 'get',
|
params: {
|
id: row.id
|
}
|
}).then(res => {
|
// console.log(res)
|
if (res.code === 0) {
|
this.roleList()
|
this.$message({
|
message: '删除成功',
|
type: 'success'
|
})
|
} else {
|
this.$message.error('删除失败')
|
}
|
}).catch(err => {
|
console.log(err)
|
})
|
},
|
// 密码验证
|
validatePassword(rule, value, callback) {
|
if (!/^[a-zA-Z][-_a-zA-Z0-9]{2,19}/.test(value)) {
|
callback(new Error(' 账户必须以字母开头, 只能包括 字母 , 下划线 , 数字, 长度必须在3 到 20 之间!'))
|
} else {
|
callback()
|
}
|
},
|
// 手机验证
|
validateMobile(rule, value, callback) {
|
if (!value) {
|
callback(new Error('请输入手机号!'))
|
} else {
|
if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(value)) {
|
callback(new Error(' 请输入正确手机号!'))
|
} else {
|
callback()
|
}
|
}
|
},
|
// 邮箱验证
|
validateEmail(rule, value, callback) {
|
if (!value) {
|
callback(new Error('请输入邮箱!'))
|
} else {
|
if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(value)) {
|
callback(new Error(' 请输入正确邮箱'))
|
} else {
|
callback()
|
}
|
}
|
}
|
} // 如果页面有keep-alive缓存功能，这个函数会触发
|
}
|
</script>
|
<style scoped lang="scss">
|
.topSelect{
|
display: flex;
|
margin-bottom: 20px;
|
padding: 20px 15px 0 15px;
|
display: flex;
|
justify-content: space-between;
|
span:first-child{
|
flex: 1;
|
}
|
// div:last-child{
|
// width: 300px;
|
// line-height: 40px;
|
// padding-left: 6px;
|
// }
|
}
|
.topTitle{
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 20px;
|
padding: 0 15px;
|
}
|
</style>
|
