<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>
选择子级,向上设置父级的勾选状态 -记录一下
最新推荐文章于 2023-10-20 10:21:44 发布