|
@@ -1,123 +1,123 @@
|
|
|
-<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 {
|
|
|
- updateOperateUserRole
|
|
|
- } from '@/httpApi/space'
|
|
|
- export default {
|
|
|
- props: ['projectId', 'user'],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- roleData: [],
|
|
|
- defaultProps: {
|
|
|
- label: 'title'
|
|
|
- },
|
|
|
- checkedKeys: []
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.roleData = JSON.parse(JSON.stringify(this.$store.getters.menuData));
|
|
|
- this.$nextTick(() => {
|
|
|
- this.cssTree();
|
|
|
- })
|
|
|
- if (this.user.id) {
|
|
|
- this.checkedKeys = [];
|
|
|
- this.testCheck(this.user.resources ? JSON.parse(this.user.resources) : []);
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- 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 = {
|
|
|
- resource: JSON.stringify(this.filterArr(resultData, partId)),
|
|
|
- comment: JSON.stringify(data.filter(item => !!item.index).map(item => item.index))
|
|
|
- }
|
|
|
- updateOperateUserRole({
|
|
|
- menus: obj.comment,
|
|
|
- operateOrganizationId: this.$store.getters.organization.id,
|
|
|
- resources: obj.resource,
|
|
|
- userId: this.user.id,
|
|
|
- projectId: this.$store.getters.project.id
|
|
|
- }).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;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
+<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 {
|
|
|
+ updateUserRole
|
|
|
+ } from '@/httpApi/organization'
|
|
|
+ export default {
|
|
|
+ props: ['projectId', 'user'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ roleData: [],
|
|
|
+ defaultProps: {
|
|
|
+ label: 'title'
|
|
|
+ },
|
|
|
+ checkedKeys: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.roleData = JSON.parse(JSON.stringify(this.$store.getters.menuData));
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.cssTree();
|
|
|
+ })
|
|
|
+ if (this.user.id) {
|
|
|
+ this.checkedKeys = [];
|
|
|
+ this.testCheck(this.user.resources ? JSON.parse(this.user.resources) : []);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ 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 = {
|
|
|
+ resource: JSON.stringify(this.filterArr(resultData, partId)),
|
|
|
+ comment: JSON.stringify(data.filter(item => !!item.index).map(item => item.index))
|
|
|
+ }
|
|
|
+ updateUserRole({
|
|
|
+ menus: obj.comment,
|
|
|
+ organizationId: this.$store.getters.organization.id,
|
|
|
+ resources: obj.resource,
|
|
|
+ userId: this.user.id,
|
|
|
+ projectId: this.$store.getters.project.id
|
|
|
+ }).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>
|