kpi_vue_pc/src/views/purview/postpower.vue

<template>
    <el-container>
        <!-- 行政组织级 -->
        <el-aside width="220px">
            <el-scrollbar > 
                <el-tree style="margin-top:10px"
                    :data="orglist"
                    :props="treeStruct"
                    @node-click="clickOrg"
                ></el-tree>
            </el-scrollbar>
        </el-aside>
        <el-aside width="200px">
            <el-tree style="margin-top:10px"
                :data="postList"
                :props="treeStruct"
                @node-click="clickPost"
            ></el-tree>
        </el-aside>
        <el-main>
            <!--头部系统页面-->
            <el-row>
                <el-col :span="24">
                    <div>
                        <el-radio-group v-model="choiceSystem" size="medium" @change="systemChange">
                            <el-radio-button :label="sysItem.coder" v-for="(sysItem,sysIndex) in systemList" :key="sysIndex">{{sysItem.title}}</el-radio-button>
                        </el-radio-group>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" class="xxCard">

                    <el-radio-group v-model="viewRange" size="small">
                        <el-radio-button label="1">本岗位</el-radio-button>
                        <el-radio-button label="2">本部门</el-radio-button>
                        <el-radio-button label="3">本分部</el-radio-button>
                        <el-radio-button label="4" disabled>指定行政组织</el-radio-button>
                        <el-radio-button label="5">所有</el-radio-button>
                    </el-radio-group>

                </el-col>
            </el-row>
            <el-scrollbar style="max-height:90%">

                <el-table
                    :data="systemMenuList"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="id"
                    border
                    default-expand-all
                    :tree-props="{children: 'child', hasChildren: 'hasChildren'}">
                    <el-table-column
                    label="菜单名称"
                    >
                        <template slot-scope="{ row }">
                            <el-checkbox   v-model="row.istrue" :label="row.name" @change="menuSelect(row)"></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                    >
                        <template slot-scope="{ row }">
                            <el-checkbox v-model="mItem.istrue"  v-for="(mItem,mIndex) in row.menuOperation" :label="mItem.name" :key="mIndex" @change="menuOperationSelect(row,mItem)"></el-checkbox>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="margin: 2px 0 20px 0;">
                    <el-button type="primary" :loading="buttonLoading" @click="subewport">确定授权</el-button>
                </div>
                

            </el-scrollbar>
        </el-main>
    </el-container>
</template>

<script>//systemaccredit
import { govthree, positionlist } from "@/api/personnel/post";  //行政组织相关
import { getsystemlist,getSystemMenuThree,editPower } from "@/api/systemaccredit/systemapi";  //行政组织相关
import { MessageBox, Message } from 'element-ui'
//岗位配权
export default {
    data () {
        return {
            viewRange:2,    //查看范围
            buttonLoading:false,
            choiceSystem:'kpi',
            systemList:[],
            //已选择的行政组织及岗位
            orgAndPost:{
                orgId:0,
                postId:0
            },
            //数据树结构体
            treeStruct: {
                children: "child",
                label: "name",
            },
            orglist:[],             //行政组织
            postList:[],            //岗位
            systemMenuList:[], //系统菜单
        }
    },
    created() {
        // 页面渲染时获取初始数据
        this.getOrgThree();     //行政组织
        this.systemInit();      //系统初始化

    },
    methods: {
        //初始话要授权的系统
        async systemInit(){
            const from = {
                page: 1,
                pagesize: 100000,
            };
            const res = await getsystemlist(from);
            console.log("初始话要授权的系统----》",res.data)
            this.systemList = res.data.list
            if(res.data.list.length > 0){
                this.choiceSystem = res.data.list[0].coder
            }
            this.getAboutSystemMenu();      //系统菜单初始化
        },

        //获取行政组织树
        async getOrgThree(){
            const res = await govthree();
            this.orglist = res.data
        },
        //根据行政组织获取岗位
        clickOrg(val){
            this.getPost(val.id);
            this.orgAndPost.orgId = val.id;
        },
        // 获取岗位
        async getPost(val) {
            const from = {
                organization: val.toString(),
                page: 1,
                pagesize: 10,
            };
            const res = await positionlist(from);
            this.postList = res.data.list;
        },
        //点击岗位列表
        clickPost(val){
            console.log("选择职务-----》",val)
            this.orgAndPost.postId = val.id;
            this.getAboutSystemMenu()
        },
        //
        //选择系统
        systemChange(val){
            console.log("选择系统-----》",val)
            this.orgAndPost.choiceSystem = val
            this.getAboutSystemMenu()
        },
        //获取相关系统菜单
        async getAboutSystemMenu(){
            const from = {
                name: this.choiceSystem,
                ordid:this.orgAndPost.orgId.toString(),
                postid:this.orgAndPost.postId.toString(),
            };
            const res = await getSystemMenuThree(from);
            console.log("系统菜单树-----》",res)
            res.data.forEach(item =>{
                // console.log("系统菜单树-----》",item)
            })
            this.systemMenuList = res.data;
        },
        //提交授权
        async subewport(){
            this.buttonLoading = true
            console.log("提交授权-----》",this.systemMenuList)
            const from = {
                systemname: this.choiceSystem,
                ordid:this.orgAndPost.orgId.toString(),
                postid:this.orgAndPost.postId.toString(),
                level:this.viewRange,
                power:this.systemMenuList
            };
            const res = await editPower(from);
            console.log("系统菜单树-----》",res)
            if (res.code != 0){
                this.buttonLoading = false
            }else{
                Message({
                    message: res.msg || 'success',
                    type: 'success',
                    duration: 5 * 1000
                })
                this.buttonLoading = false
                this.orgAndPost.orgId = ""
                this.orgAndPost.postId = ""
                this.viewRange = 2
                this.postList = []
                this.systemInit();      //系统初始化
            }
        },

        //菜单级操作
        menuSelect(val){
            // console.log("菜单级操作-----》",val)
            if(val.menuOperation){
                val.menuOperation.forEach(item =>{
                    item.istrue = val.istrue
                })
            }
            if(val.child){
                this.menuSunDigui(val.child,val.istrue)
            }
            if(val.parentid != "0"){
                this.menuParentDigui(val.parentid,val.istrue)
            }
        },
        //菜单子递归
        menuSunDigui(childList,enterClick){
            if(childList){
                childList.forEach(cItem=>{
                    cItem.istrue = enterClick
                    if(cItem.menuOperation){
                        cItem.menuOperation.forEach(cmitem =>{
                            cmitem.istrue = enterClick
                        })
                    }
                    this.menuSunDigui(cItem.child,enterClick)
                })
            }else{
                return
            }
        },
        //菜单上级递归
        menuParentDigui(parentId,enterClick){
            // console.log("菜单上级递归===>",parentId,enterClick);
            if (parentId == "0") return;
            if(enterClick == true){

            }
            let listAry = this.getParentId(this.systemMenuList,parentId,enterClick)
            // console.log("菜单上级递归==list==>",listAry);
        },
        
        getParentId(list,id,enterClick) {
            for (let i in list) {
                // console.log("菜单上级递归==1==>",list[i].id,id);
                if(list[i].id===id){
                    if(enterClick == true){
                        list[i].istrue = enterClick
                    }else{
                            if(list[i].child){
                                let falseNum = 0
                                list[i].child.forEach(lcItem =>{
                                    if(lcItem.istrue){
                                        falseNum++
                                    }
                                })
                                if(falseNum <=0){
                                    list[i].istrue = enterClick
                                }
                            }else{
                                list[i].istrue = enterClick
                            }
                        }
                    // console.log("菜单上级递归==2==>",list[i],id);
                    return [list[i]]
                }
                if(list[i].child!=null){
                    let node = this.getParentId(list[i].child,id,enterClick);
                    if(node!==undefined){
                        if(enterClick == true){
                            list[i].istrue = enterClick
                        }else{
                            if(list[i].child){
                                let falseNum = 0
                                list[i].child.forEach(lcItem =>{
                                    if(lcItem.istrue){
                                        falseNum++
                                    }
                                })
                                if(falseNum <=0){
                                    list[i].istrue = enterClick
                                }
                            }else{
                                list[i].istrue = enterClick
                            }
                        }
                        
                        // console.log("菜单上级递归==3==>",list[i],id);
                        return node.concat(list[i])
                    }
                }
            }
        },
        

        //按钮级操作
        menuOperationSelect(val,mation){
            if (mation.istrue){
                val.istrue = mation.istrue
            }else{
                var jiBuqian = 0
                val.menuOperation.forEach(item =>{
                    if(!item.istrue){
                        jiBuqian++;
                    }
                })
                if(jiBuqian == val.menuOperation.length){
                    val.istrue = false
                }
            }
            let listAry = this.getParentId(this.systemMenuList,val.parentid,mation.istrue)
        }




    },
}
</script>
<style>
    .el-aside {
        text-align: center;
        height: calc(103% - 2px);
        overflow: hidden;
        overflow-y: auto;
        overflow-x: hidden;
        border-right: 1px solid rgb(220, 223, 230);
        margin: 2px 0 0 0;
        padding-bottom: 10px;
    }
    .el-main{
        height: 105%;
    }
    .el-container {
        height:calc(100% - 50px);
        overflow: hidden;
    }
    .el-scrollbar {
        height: 100%;
    }
    .el-scrollbar__wrap {
        overflow: hidden;
        overflow-y: auto;
        overflow: scroll;
    }
    .xxCard{
        padding: 10px 0;
    }
</style>