toAllocate.vue

<template>
    <div>
        <el-dialog
          :title="$t('button.permiss')"
          :visible.sync="isShow"
          v-loading.body="loading"
          :close-on-click-modal="false"
          class="manage-dialog menu-dialog"
          :before-close="closeDialog"
          @close="resetData">
            <div class="page-wrapper">
                <span class="menu-title">{{$t('dialog.menuList')}}</span>
                <el-scrollbar wrap-class="list-scrollbar" :native="false" style="height:500px;max-height: 320px;">
                <el-tree
                    :data="treeData"
                    show-checkbox
                    node-key="id"
                    ref="tree"
                    highlight-current
                    default-expand-all
                    class="menu-tree">
                </el-tree>
                </el-scrollbar>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitAllocate" class="dialog-btn dialog-confirm-btn">{{$t('dialog.confirm')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import defaultImg from '@/assets/img/behavior/default.png'
export default {
    data() {
        return {
            isShow: false,
            loading: true,
            mallVal: '',
            mallOpt: [],
            monitoryVal: '',
            monitoryOpt: [],
            cameraVal: '',
            cameraOpt: [],
            timeVal: [],
            total: 0,
			pageSize: 50,
            currentPage: 1,
            imgList: [],
            defaultImg: defaultImg,
            staffId: '',
            roleunid: '',
            appunid: '',
            checkedNum: 0,
            hasAddImg: [],
            noImgText: '',
            curMallId: null,
            treeData: [],
            checkedNode: [],
        }
    },
    created() {
    },
    mounted() {
    },
    methods: {
        getNode(){
			this.$api.management.menuAppList()
			.then(res => {
                var result = res.data.list_data
                result.forEach((item,index) => {
                    if(item.name == this.$Project){
                        this.appunid = item.unid
                    }
                })
                this.getMeun(this.appunid)
                this.getRloeMenu(this.appunid)
			})
			.catch(err => {
			})
		},
        getMeun(unid){
            this.treeData = [];
            this.treeData.push(JSON.parse(window.localStorage.getItem('menu')));
            // this.$api.management.menuChildNode(unid)
            // .then(res => {
            //     var menuArray = [];
            //     if(res.data.menu_tree.length >= 2){
            //         menuArray.push(res.data.menu_tree[1])
            //     }else{
            //         menuArray.push(res.data.menu_tree[0])
            //     }
            //    var rootArr= [],arr = [];
            //    menuArray.forEach((menu,index) => {
            //         this.rootTemp = {};
            //         var rootTemp = {};
            //         rootTemp.unid = menu.unid
            //         rootTemp.id = menu.perm_unid
            //         this.rootTemp.unid = menu.unid
            //         this.rootTemp.id = menu.perm_unid
            //         if(this.$Project == 'mall'){
            //             rootTemp.label = '智慧商业客流分析平台'
            //         }else{
            //             rootTemp.label = '智慧连锁客流分析平台'
            //         }
            //         rootArr.push(rootTemp)
            //         menu.children.forEach((parent,index) => {
            //             // console.log('parent',parent)
            //             var children = [],temp={};
            //             temp.unid = parent.unid;
            //             temp.id = parent.perm_unid;
            //             temp.label = parent.note;
            //             temp.parentId = menu.unid
            //             temp.parentPermId = menu.perm_unid
            //             arr.push(temp)
            //             if(parent.children && parent.children.length > 0) {
            //                 parent.children.forEach((child,index) => {
            //                     var childTemp = {};
            //                     if(parent.unid == child.parent){
            //                         childTemp.unid = child.unid;
            //                         childTemp.id = child.perm_unid;
            //                         childTemp.label = child.note;
            //                         childTemp.parentId = parent.unid;
            //                         childTemp.parentPermId = parent.perm_unid
            //                     }
            //                     children.push(childTemp)
            //                 })
            //                 arr[index]['children'] = children
            //             }
            //         })
            //         rootArr[index]['children'] = arr
            //     })
            //     this.treeData = rootArr
            // })
            // .catch(err => {

            // })
        },
        getRloeMenu(appunid){
            this.$api.management.menuChildNode(appunid, {
                role: this.roleunid,
            })
            .then(res => {
                var result = res.data.menu_tree[0], hasMenu = [];
                this.dealHasMenu(result,hasMenu)
            })
            .catch(err => {
            })
        },
        dealHasMenu(menu,hasMenu) {
            menu.children.forEach(item => {
                if(!item.children) {
                    hasMenu.push(item.perm_unid)
                }else if(item.children && item.children.length > 0){
                    this.dealHasMenu(item,hasMenu)
                }
            })
            this.$refs.tree.setCheckedKeys(hasMenu);
        },
        dialogInit(role_unid,mark) {
            this.isShow = true;
            this.roleunid = role_unid;
            this.getNode();
        },
        submitAllocate() {
            var list_data = [];
            var menuTree = this.$refs.tree.getCheckedNodes();
            var halfMenu = this.$refs.tree.getHalfCheckedNodes();
            halfMenu.forEach(item => {
                this.checkedNode.push({
                    'unid': item.unid,
                    'perm_unid': item.id
                })
            })
            menuTree.forEach(item => {
                this.checkedNode.push({
                    'unid': item.unid,
                    'perm_unid': item.id
                })
            })
            // menuTree.forEach((item,index) => {
            //     if(item.unid != this.rootTemp.unid){
            //         this.checkedNode.push({
            //             'unid': item.unid,
            //             'perm_unid': item.id
            //         })
            //     }
            //     if(item.parentId && !this.checkedNode.some(items => item.parentId == items.unid)) {
            //         this.checkedNode.push({
            //             'unid': item.parentId,
            //             'perm_unid': item.parentPermId
            //         })
            //     }
            // })
            this.$api.management.editMenu(this.roleunid, this.appunid, {
                list_size: this.checkedNode.length,
                list_data: this.checkedNode
            })
            .then(res => {
                this.checkedNode = []
                if(res.data.ecode == 200){
                    this.$message({
					showClose: true,
					message: this.$t('message.allocate'),
					type: 'success'
                })
                }
            })
            .catch(err => {
                this.checkedNode = []
                this.$message({
					showClose: true,
					message: this.$t('message.allocateFailed'),
					type: 'error'
                })
            })
            this.isShow = false
        },
        closeDialog() {
            this.checkedNode = []
            this.isShow = false;
        },
        resetData() {
            this.$refs.tree.setCheckedKeys([]);
        }
    }
}
</script>

<style scoped>
.menu-title{
    font-size: 16px;
}
.img-dialog-header {
    padding-bottom: 20px;
}
.page-wrapper {
    /* text-align: center; */
    padding-bottom: 10px;
}

.img-row {

}  

.img-row:after,
.img-row:before {
    content: '';
    display: table;
}

.img-row:after {
    clear: both;
} 

.img-col {
    float: left;
    text-align: center;
    width: 20%;
    margin-bottom: 20px;
}

.img-col:last-child {
    margin-bottom: 0;
}

.clerk-img-box {
    border: 1px solid #dcdcdc;
    margin: 0px auto;
} 

.clerk-img-box,
.clerk-img {
     width: 150px;
     height: 150px;
}

.custom-checkbox__input.checked::after {
    content: none;
}

.custom-checkbox__input.checked .custom-checkbox__inner {
    background-color: #409eff;
    border-color: #409eff;
}

.custom-checkbox__input.checked .custom-checkbox__inner:after {
    transform: rotate(45deg) scaleY(1);
}

</style>