test/Jpom
1
0
Fork 0
mirror of https://gitee.com/dromara/Jpom.git synced 2024-12-04 12:58:24 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

update role dynamic page

Browse Source
This commit is contained in:
idiotalex@163.com 2021-02-20 16:09:13 +08:00
parent 4f3453f9ee
commit d9a4c361c2
2 changed files with 100 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web-vue/src/api/role.js
View File

@ -57,4 +57,20 @@ export function getRoleDynamicList(params) {
timeout: 0,
data: params
})
}
/**
* editRoleDynamic
* @param {
* id: 角色 ID
* dynamic: dynamic
* } params
*/
export function editRoleDynamic(params) {
return axios({
url: '/user/role/saveDynamic.json',
method: 'post',
timeout: 0,
data: params
})
}

126
web-vue/src/pages/role/index.vue
View File

@ -27,22 +27,25 @@
</a-modal>
<!-- 动态区 -->
<a-modal v-model="editDynamicVisible" title="角色动态" @ok="handleEditDynamicOk" :maskClosable="false">
<a-collapse @change="changeCollapse">
<a-collapse-panel v-for="item in dynamicList.filter(ele => !ele.parent)" :key="item.id" :header="item.name">
<a-tree checkStrictly checkable defaultExpandAll :selectable="false"
:tree-data="item.dynamicList"
:replaceFields="replaceFields" @check="checkDynamicNode"/>
</a-collapse-panel>
</a-collapse>
<a-spin :spinning="spinning" :delay="500">
<a-collapse @change="changeCollapse">
<a-collapse-panel v-for="item in dynamicList.filter(ele => !ele.parent)" :key="item.id" :header="item.name">
<a-tree checkable defaultExpandAll :selectable="false"
:tree-data="item.dynamicList"
:replaceFields="replaceFields" @check="checkDynamicNode"/>
</a-collapse-panel>
</a-collapse>
</a-spin>
</a-modal>
</div>
</template>
<script>
import { getRoleList, getRoleFeature, editRole, deleteRole, getDynamicList, getRoleDynamicList } from '../../api/role';
import { getRoleList, getRoleFeature, editRole, deleteRole, getDynamicList, getRoleDynamicList, editRoleDynamic } from '../../api/role';
export default {
data() {
return {
loading: false,
spinning: false,
list: [],
// 权限列表
featureList: [],
@ -52,6 +55,7 @@ export default {
temp: {},
// tree 选中的值
checkedKeys: {},
checkedDynamicKeys: [],
replaceFields: {
children: 'children',
key: 'id',
@ -221,6 +225,7 @@ export default {
},
// 分配权限
async handlePermission(record) {
this.checkedDynamicKeys = [];
this.temp = Object.assign({}, record);
const res = await getDynamicList();
if (res.code === 200) {
@ -235,6 +240,7 @@ export default {
const index = this.dynamicList.findIndex(p => p.id === key);
// load = true 表示已经加载过了
if (!this.dynamicList[index].load) {
this.spinning = true;
const params = {
id: this.temp.id,
dynamic: key
@ -242,52 +248,88 @@ export default {
getRoleDynamicList(params).then(res => {
if (res.code === 200) {
// 禁用 id = PROJECT
res.data.forEach(p => {
if (p.children) {
p.children.forEach(ele => {
if (ele.id === 'PROJECT') {
ele.disabled = true;
}
})
}
})
// res.data.forEach(p => {
// if (p.children) {
// p.children.forEach(ele => {
// if (ele.id === 'PROJECT') {
// ele.disabled = true;
// }
// })
// }
// })
this.dynamicList[index].dynamicList = res.data;
this.dynamicList[index].load = true;
this.dynamicList = [...this.dynamicList];
this.spinning = false;
}
})
}
})
},
// 选择 dynamic
checkDynamicNode(checkedKeys, e) {
console.log(checkedKeys)
// const checked = e.checked;
const node = e.node.dataRef;
node.checkedKeys = checkedKeys;
// // 如果选中父节点，子节点默认选中
// if (checked && node.children) {
// node.children.forEach(ele => {
// if (!node.checkedKeys) {
// node.checkedKeys = {};
// }
// if (!node.checkedKeys.checked) {
// node.checkedKeys.checked = [];
// }
// node.checkedKeys.checked.push(ele.id);
// })
// }
// // 如果取消选中父节点，子节点也取消选中
// if (!checked && node.children) {
// node.children.forEach(ele => {
// const index = node.checkedKeys.checked.findIndex(id => ele.id === id);
// node.checkedKeys.checked.splice(index, 1);
// })
// }
checkDynamicNode(checkedKeys) {
this.checkedDynamicKeys = checkedKeys;
},
// 编辑 dynamic
handleEditDynamicOk() {
console.log(this.dynamicList);
let dynamic = {};
this.dynamicList.forEach(ele => {
if (!ele.parent) {
dynamic[ele.id] = [];
if (ele.dynamicList) {
ele.dynamicList.forEach(p => {
let children = this.doChildrenParam(p);
// 判断该节点是否选中
const index = this.checkedDynamicKeys.findIndex(checkedId => p.id === checkedId);
if (index > -1) {
let temp = {
id: p.id,
title: p.title
}
if (children.length > 0) {
temp.children = children;
}
dynamic[ele.id].push(temp)
}
})
}
}
})
// 组装参数
const params = {
id: this.temp.id,
dynamic: JSON.stringify(dynamic)
}
// 提交数据
editRoleDynamic(params).then(res => {
if (res.code === 200) {
this.$notification.success({
message: res.msg,
duration: 2
});
this.editDynamicVisible = false;
}
})
},
// 处理 dynamic 参数
doChildrenParam(element) {
let children = [];
// 判断 children 是否存在
if (element.children && element.children.length > 0) {
element.children.forEach(c => {
let temp = {
id: c.id,
title: c.title
}
// 判断 children 是否存在
let tempChildren = this.doChildrenParam(c);
if (tempChildren.length > 0) {
temp.children = tempChildren;
}
children.push(temp);
})
}
return children;
}
}
}