选择子级,向上设置父级的勾选状态 -记录一下

<template>
   <sapi-form-panel
        :dialog="true"
        :dialog-options="{
            width: '1000px',
            maxHeight: '620px',
            height:'620px',
            top: '12%'
        }"
        v-model="visible" @on-open="open" @on-close="close">
         <template slot="title">
		    <span v-text="title"></span>
        </template>
        <div class="form-content">
            <el-table
                class="sapi-list-layout-table set-org"
                ref="table"
                :data="tableData"
                style="width: 100%"
                :row-key="rowKey"
                :tree-props="treeProps"
            >
                <el-table-column label="公司列表" prop="name" show-overflow-tooltip></el-table-column>
                <el-table-column  width="100px" >
                    <template slot="header" slot-scope="scope">
                        <el-checkbox v-model="checkAll" @change="checkboxAll">选中</el-checkbox>
                    </template>
                    <template slot-scope="props">
                        <el-checkbox v-model="props.row.auth"  @change="checkOne(props.row)"></el-checkbox>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <template slot="footer">
            <el-button size="small" class="default-button" @click="close" v-text="$t('cancel')"></el-button>
            <el-button size="small" type="primary" @click="submit" v-text="$t('submit')"></el-button>
        </template>
   </sapi-form-panel>
</template>

<script>
export default {
    
    props: ["value", "option"],
    data() {
        return {
            title:'',
            visible: false, 
            permissions: {},
            checkAll: false, // 判断当前是否全选
            tableAllData: [], // 储存所有的表格数据
            tableData: [],
            rowKey: 'id',
            treeProps: {
                children: 'childList',
            },
            params:{
                id:null,
                permissionType:null
            },
            dataMap:{}
        };
    },
    components:{

    },
    computed: {
    },
    watch: {
        value(val) {
            this.visible = val;
        }
    },
    methods: {
        // 遍历所有数据
        forEachItem (list, callback) {
            for (const item of list) {
                const stack = [item]
                while (stack.length) {
                    const temp = stack.pop()
                    if (callback(temp)) {
                        return
                    }
                    if (!temp.childList) continue
                    const { length } = temp.childList
                    if (!length) continue
                    for (let i = length - 1; i >= 0; i--) {
                        stack.push(temp.childList[i])
                    }
                }
            }
        },
        // 全选
        checkboxAll(){
            this.forEachItem(this.tableData, temp => {
                    temp.auth = this.checkAll
            })
        },
        // 单选 获取所有一级数组  若flag为ture则表示 子集有没有选中的 
        checkOne(data){
            console.log(data,'data')
            // if(data.childList===null){
            //     this.changeSelect(data)
            // }else{
            //     this.forEachItem(data.childList, temp => {
            //         temp.auth = data.auth // 把修改的是否完结赋值给所有子级
            //     })
            //     this.$refs.table.toggleRowExpansion(data,true)
            //     this.forEachItem(data.childList,temp => {
            //         if(temp.childList && temp.childList.length){
            //             this.$refs.table.toggleRowExpansion(temp,true)
            //         }
            //     })
            // }
            if(data.childList !== null){
                this.forEachItem(data.childList, temp => {
                    temp.auth = data.auth // 把修改的是否完结赋值给所有子级
                })
                this.$refs.table.toggleRowExpansion(data,true)
                this.forEachItem(data.childList,temp => {
                    if(temp.childList && temp.childList.length){
                        this.$refs.table.toggleRowExpansion(temp,true)
                    }
                })
            } 
            this.checkAllFlag()
        },
        // 选择子级,向上设置父级的勾选状态
        changeSelect(item) {
             let parent = this.dataMap[item.pid]
             while (parent) {
                if(!item.auth){
                    if(parent.auth){
                        this.$set(parent, 'auth', false)
                    }
                }
                if(item.auth) {
                    const list = []
                    this.forEachItem(this.tableData,temp => {
                        if (temp.pid === parent.corpId) {
                            list.push(temp)
                        }
                    })
                    let flag = list.every((item) => {
                        return item.auth
                    })
                    if(flag){
                        this.$set(parent, 'auth', true)
                    }
                }
                parent = parent.pid ? this.dataMap[parent.pid] : null
            }
        },
        // 验证是否全部选中
        checkAllFlag(){
            this.getAllItems()
            let flag = this.tableAllData.some(item=>{
                return item.auth ===false
            })
            if(flag){
                this.checkAll =false
            }else{
                this.checkAll = true
            }
        },
        // 获取所有数据,转化为一级数组
        getAllItems () {
            this.tableAllData = this.searchData(this.tableData);
        },
        // 平铺所有数据
        transDataMap () {
            this.$nextTick(() => {
                this.dataMap = {}
                this.forEachItem(this.tableData,item => {
                    this.dataMap[item['corpId']] = item
                })
            })
        },
        // 转换一级数组,获取父级及所有子级数据,放入数组使其同级
        searchData (data) {
            if (!data) return [];
            let searchArray = [];
            data.forEach(item => {
                searchArray.push(item);
                if (item.childList && item.childList.length > 0) {
                    let arr = this.searchData(item.childList);
                    searchArray = [
                        ...searchArray,
                        ...arr
                    ];
                }
            });
            return searchArray;
        },
        checkSelectable(row){
            return row.childList !== null 
        },
        handleSelectionChange(val){
            this.selectedRows = val 
        },
        loadData(){
            this.$get(`${this.$projectServerUrl}/permissions/getPermission`,this.params,res=>{
                if(res && res.length){
                    this.tableData = res
                    this.$nextTick(()=>{
                        this.$refs.table.toggleRowExpansion(this.tableData[0], true)
                    })
                    this.checkAllFlag()
                    this.transDataMap()
                }
            })
        },
        submit(){
            this.getAllItems()
            let params ={
                id:this.params.id,
                permissionList:[],
                permissionType:this.params.permissionType
            }
            // 筛选出选中的
            let checkList=this.tableAllData.filter(item=> {return item.auth===true})
            checkList.forEach(item=>{
                params.permissionList.push(item.corpId)
            })
             this.$post(`${this.$projectServerUrl}/permissions/updatePermission`,params,function (res) {
                if(res){
                    Vue.successMsg('提交成功', {
                        callback: () => {
                            this.close()
                        }
                    })
                }
            })
        },
        open() {
            // 重新设置permissions的值
            let option = this.option
            this.params.permissionType = this.option.permissionType
            switch(option.type){
                case "user":
                    this.title = `组织授权-用户[${this.option.row.name}]`
                    break;
                case 'group':
                    this.title = `组织授权-工作组[${this.option.row.name}]`
                    this.params.id = this.option.row.id
                    break;
            }
            var str = this.$utils.sessionStorage.get('permissions');
            this.permissions = JSON.parse(str || '{}');
            this.loadData()
        },
        // 初始化数据
        initData(){
            this.title=''
            this.visible=false,
            this.permissions= {}
            this.checkAll= false // 判断当前是否全选
            this.tableAllData= [] // 储存所有的表格数据
            this.tableData= []
            this.params={
                id:null,
                permissionType:null
            }
        },
        close() {
            this.initData()
            this.$closeWaringTips('.form-error-tips');
            this.$emit('input', false);
        },
    },
    created() {
        
    },
    mounted() {
        this.visible = this.value;
    },
};
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值