<template>
<div>
<el-dialog title="编辑权限" :visible.sync="dialogVisible" width="900px" center append-to-body
:close-on-click-modal="false">
<div class="itemsstyle">
<div class="test" v-for="(item, index) in drawerList" :key="index"
style="margin-top: 20px;display: flex;align-items: center;">
<div style="display: flex;align-items: center;">
<span style="font-size: 18px;">抽屉{{ index + 1 }}</span>
<div style="display: flex;align-items: center;">
<el-checkbox v-model="item.isCheckAll" :indeterminate="item.isIndeterminate" @change="(c) =>
handleCheckAllChange(
c,
item.checkIds,
item.indeterminate,
index
)
" style="margin: 0 30px 0 10px;">全选</el-checkbox>
<el-checkbox-group v-model="item.value"
@change="(c) => handleCheckedCitiesChange(c, item, index)">
<el-checkbox v-for="ce in item.darList" :label="ce.id" :key="ce.id" border>
{{ ce.displayName }}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
</div>
<div style="display: flex;align-items: center;margin-top: 20px;">
<el-button type="primary" @click="submitForm('formLabelAlign')"
style="margin-right: 10px;">提交</el-button>
<el-button @click="checkAll">全选</el-button>
<el-button @click="notCheckAll">取消全选</el-button>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
id: null,
dialogVisible: false,
drawerList: [],
allData: [],
isIndeterminate: true,
// checkAll: false,
}
},
methods: {
getAll() {
this.$interface.materialCabinet.getDrawerAll().then((res) => {
console.log(res.data)
// this.drawerList = res.data.data
res.data.data.forEach((v) => {
this.drawerList.push({
value: [],
darList: [...v],
checkIds: [...v.map((c) => c.id)],
});
});
console.log(res.data.data, 'res.data.data');
});
},
handleCheckAllChange(value, checkIds, indeterminate, index) {
const tag = this.drawerList.find((c, i) => i === index);
if (value) {
tag.value = checkIds;
tag.isIndeterminate = false;
} else tag.value = [];
},
handleCheckedCitiesChange(value, item, index) {
const tag = this.drawerList.find((c, i) => i === index);
let checkedCount = value.length;
tag.isCheckAll = checkedCount === item.checkIds.length;
tag.isIndeterminate = checkedCount > 0 && checkedCount < item.checkIds.length;
},
checkAll() {
this.drawerList.forEach((v) => {
v.value = [...v.checkIds];
v.isCheckAll = true;
v.isIndeterminate = false;
});
},
notCheckAll() {
this.drawerList.forEach((v) => {
v.value = [];
v.isCheckAll = false;
v.isIndeterminate = false;
});
},
submitForm() {
// if (this.allData.length <= 0) {
// this.$notify({
// title: '提示',
// message: '至少选中一个抽屉',
// type: 'warning'
// });
// return
// }
const checkAllIds = this.drawerList.reduce((pre, cur) => {
cur.value?.length && pre.push(...cur.value);
return pre;
}, []);
let params = {
id: this.id,
ids: [...checkAllIds]
}
this.$interface.materialCabinet.guiZiQuanXian(params).then((res) => {
if (res.data.statusCode === 200) {
this.$message({
type: "success",
message: "操作成功!",
});
this.dialogVisible = false
this.drawerList = []
this.$emit('load')
}
});
console.log(this.allData, 'allData');
}
}
}
</script>
<style>
.itemsstyle {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 100%;
/* background-color: red; */
/* margin-bottom: 30px; */
padding-bottom: 30px;
box-sizing: border-box;
}
</style>