|
|
@ -1,7 +1,7 @@ |
|
|
<template> |
|
|
<template> |
|
|
<el-dialog |
|
|
<el-dialog |
|
|
class="sl-menu-item" |
|
|
class="sl-menu-item" |
|
|
width="349px" |
|
|
|
|
|
|
|
|
width="500px" |
|
|
:title="!dataForm.id ? '新增' : '修改'" |
|
|
:title="!dataForm.id ? '新增' : '修改'" |
|
|
:close-on-click-modal="false" |
|
|
:close-on-click-modal="false" |
|
|
:visible.sync="visible"> |
|
|
:visible.sync="visible"> |
|
|
@ -14,14 +14,56 @@ |
|
|
<el-input style="width: 150px" v-model="dataForm.remark" placeholder="备注"></el-input> |
|
|
<el-input style="width: 150px" v-model="dataForm.remark" placeholder="备注"></el-input> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
<el-form-item size="mini" label="授权"> |
|
|
<el-form-item size="mini" label="授权"> |
|
|
<el-tree |
|
|
|
|
|
:data="menuList" |
|
|
|
|
|
:props="menuListTreeProps" |
|
|
|
|
|
node-key="menuId" |
|
|
|
|
|
ref="menuListTree" |
|
|
|
|
|
:default-expand-all="false" |
|
|
|
|
|
show-checkbox> |
|
|
|
|
|
</el-tree> |
|
|
|
|
|
|
|
|
<el-row> |
|
|
|
|
|
<el-col class="down-tree" :span="14"> |
|
|
|
|
|
<!-- @node-click="getMenuInfo"--> |
|
|
|
|
|
<!-- @check-change="getMenuInfo"--> |
|
|
|
|
|
<el-tree |
|
|
|
|
|
:data="menuList" |
|
|
|
|
|
:props="menuListTreeProps" |
|
|
|
|
|
node-key="menuId" |
|
|
|
|
|
ref="menuListTree" |
|
|
|
|
|
:default-expand-all="false" |
|
|
|
|
|
show-checkbox> |
|
|
|
|
|
<!-- <span class="custom-tree-node" slot-scope="{ node, data }">--> |
|
|
|
|
|
<!-- <span>{{ node.label }}</span>--> |
|
|
|
|
|
<!-- <span v-if="data.type ==1">--> |
|
|
|
|
|
<!-- <el-checkbox type="text" size="mini">只读</el-checkbox>--> |
|
|
|
|
|
<!-- <el-checkbox type="text" size="mini">删除</el-checkbox>--> |
|
|
|
|
|
<!-- <el-checkbox type="text" size="mini">修改</el-checkbox>--> |
|
|
|
|
|
<!-- <el-checkbox type="text" size="mini">完全控制</el-checkbox>--> |
|
|
|
|
|
<!-- </span>--> |
|
|
|
|
|
<!-- </span>--> |
|
|
|
|
|
</el-tree> |
|
|
|
|
|
</el-col> |
|
|
|
|
|
<!-- <el-col style="margin-top: 50px;margin-left: 10px" :span="8">--> |
|
|
|
|
|
<!-- <el-form :inline="true" label-position="top" label-width="95px" style="padding: 5px;">--> |
|
|
|
|
|
<!-- <el-form-item label="功能编号" prop="menuId">--> |
|
|
|
|
|
<!-- <el-input style="width: 150px" v-model="menuInfo.menuId"></el-input>--> |
|
|
|
|
|
<!-- </el-form-item>--> |
|
|
|
|
|
<!-- <el-form-item label="功能名称" prop="name">--> |
|
|
|
|
|
<!-- <el-input style="width: 150px" v-model="menuInfo.name"></el-input>--> |
|
|
|
|
|
<!-- </el-form-item>--> |
|
|
|
|
|
|
|
|
|
|
|
<!-- <fieldset class="customer-field" style="width: 100%;">--> |
|
|
|
|
|
<!-- <legend>权限</legend>--> |
|
|
|
|
|
<!-- <el-form-item>--> |
|
|
|
|
|
<!-- <el-checkbox v-model="menuInfo.readOnly" label="只读"></el-checkbox>--> |
|
|
|
|
|
<!-- </el-form-item>--> |
|
|
|
|
|
<!-- <el-form-item>--> |
|
|
|
|
|
<!-- <el-checkbox v-model="menuInfo.canModified" label="修改"></el-checkbox>--> |
|
|
|
|
|
<!-- </el-form-item>--> |
|
|
|
|
|
<!-- <el-form-item>--> |
|
|
|
|
|
<!-- <el-checkbox v-model="menuInfo.canDelete" label="删除"></el-checkbox>--> |
|
|
|
|
|
<!-- </el-form-item>--> |
|
|
|
|
|
<!-- <el-form-item>--> |
|
|
|
|
|
<!-- <el-checkbox v-model="menuInfo.fullControl" label="完全控制"></el-checkbox>--> |
|
|
|
|
|
<!-- </el-form-item>--> |
|
|
|
|
|
<!-- </fieldset>--> |
|
|
|
|
|
<!-- </el-form>--> |
|
|
|
|
|
<!-- </el-col>--> |
|
|
|
|
|
</el-row> |
|
|
|
|
|
|
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
</el-form> |
|
|
</el-form> |
|
|
<span slot="footer" class="dialog-footer"> |
|
|
<span slot="footer" class="dialog-footer"> |
|
|
@ -32,100 +74,133 @@ |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import {treeDataTranslate} from '@/utils' |
|
|
|
|
|
|
|
|
import {treeDataTranslate} from '@/utils' |
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
|
data() { |
|
|
|
|
|
return { |
|
|
|
|
|
visible: false, |
|
|
|
|
|
menuList: [], |
|
|
|
|
|
menuListTreeProps: { |
|
|
|
|
|
label: 'name', |
|
|
|
|
|
children: 'children' |
|
|
|
|
|
}, |
|
|
|
|
|
dataForm: { |
|
|
|
|
|
id: 0, |
|
|
|
|
|
roleName: '', |
|
|
|
|
|
remark: '' |
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
|
data() { |
|
|
|
|
|
return { |
|
|
|
|
|
visible: false, |
|
|
|
|
|
menuList: [], |
|
|
|
|
|
menuListTreeProps: { |
|
|
|
|
|
label: 'name', |
|
|
|
|
|
children: 'children' |
|
|
|
|
|
}, |
|
|
|
|
|
menuInfo: { |
|
|
|
|
|
menuId: null, |
|
|
|
|
|
name: '', |
|
|
|
|
|
readOnly: 'N', |
|
|
|
|
|
canDelete: 'N', |
|
|
|
|
|
canModified: 'N', |
|
|
|
|
|
fullControl: 'N' |
|
|
|
|
|
}, |
|
|
|
|
|
dataForm: { |
|
|
|
|
|
id: 0, |
|
|
|
|
|
roleName: '', |
|
|
|
|
|
remark: '' |
|
|
|
|
|
}, |
|
|
|
|
|
dataRule: { |
|
|
|
|
|
roleName: [ |
|
|
|
|
|
{required: true, message: '角色名称不能为空', trigger: 'blur'} |
|
|
|
|
|
] |
|
|
|
|
|
}, |
|
|
|
|
|
tempKey: -666666 // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化 |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
methods: { |
|
|
|
|
|
init(id) { |
|
|
|
|
|
this.dataForm.id = id || 0 |
|
|
|
|
|
this.$http({ |
|
|
|
|
|
url: this.$http.adornUrl('/sys/menu/list'), |
|
|
|
|
|
method: 'get', |
|
|
|
|
|
params: this.$http.adornParams() |
|
|
|
|
|
}).then(({data}) => { |
|
|
|
|
|
this.menuList = treeDataTranslate(data, 'menuId') |
|
|
|
|
|
}).then(() => { |
|
|
|
|
|
this.visible = true |
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
|
this.$refs['dataForm'].resetFields() |
|
|
|
|
|
this.$refs.menuListTree.setCheckedKeys([]) |
|
|
|
|
|
}) |
|
|
|
|
|
}).then(() => { |
|
|
|
|
|
if (this.dataForm.id) { |
|
|
|
|
|
this.$http({ |
|
|
|
|
|
url: this.$http.adornUrl(`/sys/role/info/${this.dataForm.id}`), |
|
|
|
|
|
method: 'get', |
|
|
|
|
|
params: this.$http.adornParams() |
|
|
|
|
|
}).then(({data}) => { |
|
|
|
|
|
if (data && data.code === 0) { |
|
|
|
|
|
this.dataForm.roleName = data.role.roleName |
|
|
|
|
|
this.dataForm.remark = data.role.remark |
|
|
|
|
|
var idx = data.role.menuIdList.indexOf(this.tempKey) |
|
|
|
|
|
if (idx !== -1) { |
|
|
|
|
|
data.role.menuIdList.splice(idx, data.role.menuIdList.length - idx) |
|
|
|
|
|
} |
|
|
|
|
|
console.log(data.role.menuIdList) |
|
|
|
|
|
let x1 = data.role.menuIdList.map(Number) |
|
|
|
|
|
console.log(x1) |
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
|
for (let x1Element of x1) { |
|
|
|
|
|
this.$refs.menuListTree.setChecked(x1Element, true, false) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
}, |
|
|
}, |
|
|
dataRule: { |
|
|
|
|
|
roleName: [ |
|
|
|
|
|
{required: true, message: '角色名称不能为空', trigger: 'blur'} |
|
|
|
|
|
] |
|
|
|
|
|
|
|
|
// 点击获取角色权限 , |
|
|
|
|
|
getMenuInfo(node, data, value) { |
|
|
|
|
|
this.menuInfo.menuId = data.data.menuId |
|
|
|
|
|
this.menuInfo.name = data.data.name |
|
|
|
|
|
data.readOnly = 'Y' |
|
|
}, |
|
|
}, |
|
|
tempKey: -666666 // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化 |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
methods: { |
|
|
|
|
|
init(id) { |
|
|
|
|
|
this.dataForm.id = id || 0 |
|
|
|
|
|
this.$http({ |
|
|
|
|
|
url: this.$http.adornUrl('/sys/menu/list'), |
|
|
|
|
|
method: 'get', |
|
|
|
|
|
params: this.$http.adornParams() |
|
|
|
|
|
}).then(({data}) => { |
|
|
|
|
|
this.menuList = treeDataTranslate(data, 'menuId') |
|
|
|
|
|
}).then(() => { |
|
|
|
|
|
this.visible = true |
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
|
this.$refs['dataForm'].resetFields() |
|
|
|
|
|
this.$refs.menuListTree.setCheckedKeys([]) |
|
|
|
|
|
}) |
|
|
|
|
|
}).then(() => { |
|
|
|
|
|
if (this.dataForm.id) { |
|
|
|
|
|
this.$http({ |
|
|
|
|
|
url: this.$http.adornUrl(`/sys/role/info/${this.dataForm.id}`), |
|
|
|
|
|
method: 'get', |
|
|
|
|
|
params: this.$http.adornParams() |
|
|
|
|
|
}).then(({data}) => { |
|
|
|
|
|
if (data && data.code === 0) { |
|
|
|
|
|
this.dataForm.roleName = data.role.roleName |
|
|
|
|
|
this.dataForm.remark = data.role.remark |
|
|
|
|
|
var idx = data.role.menuIdList.indexOf(this.tempKey) |
|
|
|
|
|
if (idx !== -1) { |
|
|
|
|
|
data.role.menuIdList.splice(idx, data.role.menuIdList.length - idx) |
|
|
|
|
|
} |
|
|
|
|
|
console.log(data.role.menuIdList) |
|
|
|
|
|
let x1 = data.role.menuIdList.map(Number) |
|
|
|
|
|
console.log(x1) |
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
|
for (let x1Element of x1) { |
|
|
|
|
|
this.$refs.menuListTree.setChecked(x1Element,true,false) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
// 表单提交 |
|
|
|
|
|
dataFormSubmit() { |
|
|
|
|
|
this.$refs['dataForm'].validate((valid) => { |
|
|
|
|
|
if (valid) { |
|
|
|
|
|
// let temp = { |
|
|
|
|
|
// readOnly: 'N', |
|
|
|
|
|
// canDelete: 'N', |
|
|
|
|
|
// canModified: 'N', |
|
|
|
|
|
// fullControl: 'N', |
|
|
|
|
|
// menuId: this.tempKey |
|
|
|
|
|
// } |
|
|
|
|
|
// let menusList = [].concat(this.$refs.menuListTree.getCheckedNodes(), [temp], this.$refs.menuListTree.getHalfCheckedNodes()) |
|
|
|
|
|
this.$http({ |
|
|
|
|
|
url: this.$http.adornUrl(`/sys/role/${!this.dataForm.id ? 'save' : 'update'}`), |
|
|
|
|
|
method: 'post', |
|
|
|
|
|
data: this.$http.adornData({ |
|
|
|
|
|
'roleId': this.dataForm.id || undefined, |
|
|
|
|
|
'roleName': this.dataForm.roleName, |
|
|
|
|
|
'remark': this.dataForm.remark, |
|
|
|
|
|
'menuIdList': [].concat(this.$refs.menuListTree.getCheckedKeys(), [this.tempKey], this.$refs.menuListTree.getHalfCheckedKeys()) |
|
|
|
|
|
// 'menuIdList': menusList |
|
|
}) |
|
|
}) |
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
// 表单提交 |
|
|
|
|
|
dataFormSubmit() { |
|
|
|
|
|
this.$refs['dataForm'].validate((valid) => { |
|
|
|
|
|
if (valid) { |
|
|
|
|
|
this.$http({ |
|
|
|
|
|
url: this.$http.adornUrl(`/sys/role/${!this.dataForm.id ? 'save' : 'update'}`), |
|
|
|
|
|
method: 'post', |
|
|
|
|
|
data: this.$http.adornData({ |
|
|
|
|
|
'roleId': this.dataForm.id || undefined, |
|
|
|
|
|
'roleName': this.dataForm.roleName, |
|
|
|
|
|
'remark': this.dataForm.remark, |
|
|
|
|
|
'menuIdList': [].concat(this.$refs.menuListTree.getCheckedKeys(), [this.tempKey], this.$refs.menuListTree.getHalfCheckedKeys()) |
|
|
|
|
|
|
|
|
}).then(({data}) => { |
|
|
|
|
|
if (data && data.code === 0) { |
|
|
|
|
|
this.$message.success('操作成功') |
|
|
|
|
|
this.visible = false |
|
|
|
|
|
this.$emit('refreshDataList') |
|
|
|
|
|
} else { |
|
|
|
|
|
this.$message.error(data.msg) |
|
|
|
|
|
} |
|
|
}) |
|
|
}) |
|
|
}).then(({data}) => { |
|
|
|
|
|
if (data && data.code === 0) { |
|
|
|
|
|
this.$message.success('操作成功') |
|
|
|
|
|
this.visible = false |
|
|
|
|
|
this.$emit('refreshDataList') |
|
|
|
|
|
} else { |
|
|
|
|
|
this.$message.error(data.msg) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
</script> |
|
|
</script> |
|
|
<style lang="scss"> |
|
|
<style lang="scss"> |
|
|
|
|
|
|
|
|
|
|
|
.down-tree { |
|
|
|
|
|
|
|
|
|
|
|
height: 300px; |
|
|
|
|
|
|
|
|
|
|
|
display: block; |
|
|
|
|
|
|
|
|
|
|
|
overflow-y: scroll; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |