|
@@ -0,0 +1,144 @@
|
|
|
+<template>
|
|
|
+ <div class="hui-flex hui-dialog role-box">
|
|
|
+ <div class="hui-flex-box hui-dialog-content">
|
|
|
+ <el-tree :data="roleData" :props="defaultProps" show-checkbox node-key="id"
|
|
|
+ :default-checked-keys="checkedKeys" ref="tree" :render-after-expand="false">
|
|
|
+ <div :class="(node.childNodes.length == 0 && node.level == 4)? 'tree-node especially' : 'tree-node'"
|
|
|
+ slot-scope="{ node, data }">
|
|
|
+ <div class="tree-node-label">
|
|
|
+ <span>{{ node.label }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ <div class="hui-dialog-submit">
|
|
|
+ <el-button size="medium" @click="$emit('callback')">取 消</el-button>
|
|
|
+ <el-button size="medium" type="primary" @click="updateMenu">保 存</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getIdentityResource,
|
|
|
+ insertIdentityResource,
|
|
|
+ updateIdentityResource
|
|
|
+ } from '@/httpApi/system'
|
|
|
+ export default {
|
|
|
+ props: ['identityId', 'projectType'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ roleData: [],
|
|
|
+ defaultProps: {
|
|
|
+ label: 'title'
|
|
|
+ },
|
|
|
+ checkedKeys: [],
|
|
|
+ resourceData: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.roleData = JSON.parse(JSON.stringify(this.$store.getters.menuData));
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.cssTree();
|
|
|
+ })
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ getIdentityResource({
|
|
|
+ identityId: this.identityId,
|
|
|
+ type: this.projectType
|
|
|
+ }).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ if (res.data.length > 0) {
|
|
|
+ this.resourceData = res.data[0];
|
|
|
+ this.checkedKeys = [];
|
|
|
+ this.testCheck(this.resourceData.resource ? JSON.parse(this.resourceData.resource) :
|
|
|
+ []);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ cssTree() {
|
|
|
+ let classDomList = document.getElementsByClassName('especially')
|
|
|
+ // 改变这几个样式
|
|
|
+ if (classDomList.length == 0) return;
|
|
|
+ let paddingleft = parseInt(classDomList[0].parentNode.style.paddingLeft);
|
|
|
+ for (let i = 0; i < classDomList.length; i++) {
|
|
|
+ let node = classDomList[i].parentNode.parentNode;
|
|
|
+ node.parentNode.style.paddingLeft = (paddingleft + 24) + 'px';
|
|
|
+ node.parentNode.classList.add('tree-children-list')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filterArr(opArr, partId) {
|
|
|
+ function circle(opArr) {
|
|
|
+ for (let i = 0; i < opArr.length; i++) {
|
|
|
+ const isAccord = partId.find(r => r === opArr[i].id)
|
|
|
+ if (!isAccord) {
|
|
|
+ opArr.splice(i, 1)
|
|
|
+ i--
|
|
|
+ } else if (opArr[i].children && opArr[i].children.length) {
|
|
|
+ circle(opArr[i].children)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ circle(opArr)
|
|
|
+ return opArr
|
|
|
+ },
|
|
|
+ testCheck(data) {
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ if (data[i].children && data[i].children.length > 0) {
|
|
|
+ this.testCheck(data[i].children);
|
|
|
+ } else {
|
|
|
+ this.checkedKeys.push(data[i].id);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ updateMenu() {
|
|
|
+ let resultData = JSON.parse(JSON.stringify(this.$store.getters.menuData));
|
|
|
+ let data = this.$refs.tree.getCheckedNodes(false, true);
|
|
|
+ let partId = data.map(node => node.id);
|
|
|
+ let obj = {
|
|
|
+ identityId: this.identityId,
|
|
|
+ type: this.projectType,
|
|
|
+ resource: JSON.stringify(this.filterArr(resultData, partId)),
|
|
|
+ menus: JSON.stringify(data.filter(item => !!item.index).map(item => item.index))
|
|
|
+ }
|
|
|
+ if (this.resourceData.id) {
|
|
|
+ obj['id'] = this.resourceData.id;
|
|
|
+ updateIdentityResource(obj).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.$emit('callback', 'init');
|
|
|
+ this.$message.success('操作成功')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ insertIdentityResource(obj).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.$emit('callback', 'init');
|
|
|
+ this.$message.success('操作成功')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .role-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .el-tree {
|
|
|
+ .tree-node {
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tree-node__content>.el-tree-node__expand-icon {
|
|
|
+ padding: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|