|
@@ -0,0 +1,145 @@
|
|
|
+<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="classNode(node)? '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="small" @click="$emit('callback')">取 消</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="updateMenu">保 存</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ updateMenu
|
|
|
+ } from '@/api/system'
|
|
|
+ export default {
|
|
|
+ props: ['menuData', 'type'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ roleData: [],
|
|
|
+ defaultProps: {
|
|
|
+ label: 'title'
|
|
|
+ },
|
|
|
+ checkedKeys: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.roleData = JSON.parse(this.menuData.data);
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.cssTree();
|
|
|
+ })
|
|
|
+ this.checkedKeys = [];
|
|
|
+ let data = this.type === 2 ? this.menuData.enterpriseData : this.menuData.providerData;
|
|
|
+ this.testCheck(data ? JSON.parse(data) : []);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ classNode(node) {
|
|
|
+ return node.data.isMenu === '2';
|
|
|
+ },
|
|
|
+ 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 roleData = JSON.parse(JSON.stringify(this.roleData))
|
|
|
+ let data = this.$refs.tree.getCheckedNodes(false, true);
|
|
|
+ let partId = data.map(node => node.id);
|
|
|
+ let obj = {}
|
|
|
+ let postData = this.type === 2 ? {
|
|
|
+ enterpriseData: JSON.stringify(this.filterArr(roleData, partId)),
|
|
|
+ enterpriseComment: JSON.stringify(data.filter(item => !!item.index).map(item => item.index))
|
|
|
+ } : {
|
|
|
+ providerData: JSON.stringify(this.filterArr(roleData, partId)),
|
|
|
+ providerComment: JSON.stringify(data.filter(item => !!item.index).map(item => item.index))
|
|
|
+ };
|
|
|
+ postData['id'] = this.menuData.id;
|
|
|
+ updateMenu(postData).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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tree-children-list {
|
|
|
+ .el-tree-node {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tree-node__content {
|
|
|
+ padding: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tree-node__expand-icon.el-icon-caret-right {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .especially {
|
|
|
+ padding-right: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tree-node__content:hover,
|
|
|
+ .el-tree .el-tree-node:focus>.el-tree-node__content {
|
|
|
+ background: transparent !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|