<template>
|
<el-dialog
|
v-dialogDrag
|
:close-on-click-modal="false"
|
:visible.sync="isShowDialog"
|
append-to-body
|
class="avue-dialog avue-dialog--top"
|
title="分类授权"
|
top="-45px" @close="closeDialog">
|
<el-table
|
ref="dataTable"
|
v-loading="isLoading"
|
:data="classifyAuthData"
|
:header-cell-style="{ background: '#FAFAFA', color: '#505050' }"
|
:height="tableHeight"
|
border
|
class="cus-table"
|
@select="handleSelection"
|
@row-click="handleRowClick"
|
@select-all="handleSelectionAll"
|
@selection-change="handleSelectionChange"
|
@sort-change="sortChange"
|
>
|
<el-table-column
|
type="selection"
|
width="55"
|
></el-table-column>
|
<el-table-column
|
v-for="(item, index) in classifyAuthHeader"
|
v-if="classifyAuthHeader.length !== 0"
|
:key="index"
|
:label="item.label"
|
:prop="item.prop"
|
:show-overflow-tooltip="true"
|
:width="item.width"
|
align="center"
|
>
|
<template slot-scope="{ row }">
|
<el-select
|
v-if="item.type === 'select'"
|
slot="prepend"
|
v-model="row[item.prop]"
|
@change="roleChange(row.roleData,row)"
|
>
|
<el-option
|
v-for="optionItem in roleList"
|
:key="optionItem.id"
|
:label="optionItem.roleName"
|
:value="optionItem.id"
|
>
|
</el-option>
|
</el-select>
|
<el-input
|
v-if="item.type === 'text'"
|
v-model="row[item.prop]"
|
readonly
|
type="text"
|
>
|
</el-input>
|
<el-checkbox
|
v-if="item.type === 'checkbox'"
|
v-model="row[item.prop]"
|
:disabled="row.authButton.allDisabled ? true : row.authButton[item.code]"
|
@change="checkBoxToChangeTheEvent(row[item.prop],item.code,row,item.prop)">
|
</el-checkbox>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div slot="footer" class="dialog-footer">
|
<el-button plain type="info" @click="selectAllButton">按钮全选</el-button>
|
<el-button class="el-icon-plus" plain type="success" @click="addClassifyAuth"></el-button>
|
<el-button class="el-icon-minus" plain type="warning" @click="subClassifyAuth"></el-button>
|
<el-button plain type="primary" @click="submit">提 交</el-button>
|
<el-button plain type="danger" @click="isShowDialog = false">关 闭</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import {getButtonByParentCode} from "@/api/system/menu"
|
import {getPage} from "@/api/system/role"
|
import {saveOrUpdate, getClassifyAuthList, getButtonsByRoleId} from "@/api/system/classifyAuth"
|
import {v4 as uuidv4} from 'uuid';
|
|
export default {
|
name: "dataAuthDialog.vue",
|
props: {
|
// 当前点击节点的顶层节点
|
classifyData: {
|
type: "Object",
|
default: "",
|
},
|
/**对话框显示隐藏控制*/
|
visible: {
|
type: "Boolean",
|
default: false,
|
},
|
// 当前点击的节点
|
TreeNode: {
|
type: Object
|
}
|
},
|
data() {
|
return {
|
// 对话框显示控制
|
isShowDialog: this.visible,
|
isLoading: true,
|
tableHeight: 'calc(100vh - 550px)',
|
classifyAuthData: [],
|
//列头
|
classifyAuthHeader: [],
|
//按钮数据
|
classifyAuthButton: [],
|
//角色列表
|
roleList: [],
|
//当前选中的表格行
|
selectList: [],
|
itemKey: '',
|
addIndex: Number,
|
currentRow: {}
|
};
|
},
|
watch: {
|
// 监听父组件传的窗口显示隐藏的值
|
visible() {
|
if (this.visible) {
|
this.isShowDialog = this.visible;
|
this.loadAuthPage();
|
}
|
},
|
classifyAuthData(newval) {
|
this.addIndex = newval.length <= 0 ? 0 : newval.length - 1;
|
}
|
},
|
computed: {},
|
mounted() {
|
},
|
created() {
|
},
|
methods: {
|
checkBoxToChangeTheEvent(check, code, row, id) {
|
if (code === "classify_view") {
|
row.checkTheStatus = check;
|
} else if (!row.checkTheStatus) {
|
this.$message.warning('清先勾选查看按钮！');
|
// 在条件不满足时将多选框状态设置为false
|
row[id] = false;
|
}
|
|
if (!row.checkTheStatus) {
|
this.classifyAuthButton.forEach(key => {
|
// 查看为false时将所有多选框状态设置为false
|
row[key.id] = false;
|
});
|
}
|
},
|
// 关闭对话框
|
closeDialog() {
|
this.$emit('update:visible', false);
|
this.classifyAuthData = [];
|
},
|
roleHandlerMethods(id, type, index) {
|
if (this.classifyAuthData.length === 0) {
|
return;
|
}
|
//filteredItems 未授权数组
|
getButtonsByRoleId({roleId: id, code: 'classifyTree '}).then(res => {
|
const filteredItems = this.classifyAuthButton.filter(item =>
|
!res.data.data.some(x => x.id === item.id)
|
);
|
|
//和表格列进行对比
|
this.classifyAuthHeader.forEach((item) => {
|
// if (item.code !== 'classify_view') {
|
// this.$set(this.classifyAuthData[index].authButton, "allDisabled", true);
|
// }
|
const isMatched = filteredItems.some((x) => x.id === item.prop);
|
this.$nextTick(() => {
|
if (this.classifyAuthData[index]) {
|
if (isMatched) {
|
Object.keys(this.classifyAuthData[index]).forEach((key) => {
|
this.$set(this.classifyAuthData[index].authButton, item.code, true);
|
//添加 “查看全部禁用条件”
|
if (item.code === "classify_view") {
|
this.$set(this.classifyAuthData[index].authButton, "allDisabled", true);
|
}
|
});
|
|
} else {
|
Object.keys(this.classifyAuthData[index]).forEach((key) => {
|
this.$set(this.classifyAuthData[index].authButton, item.code, false);
|
});
|
if (item.code === "classify_view") {
|
this.classifyAuthData[index].authButton.allDisabled = false;
|
}
|
}
|
}
|
});
|
});
|
// console.log(this.classifyAuthData)
|
//强制刷新表格
|
this.itemKey = uuidv4();
|
});
|
},
|
// 角色改变时
|
async roleChange(row, currentRow) {
|
try {
|
this.currentRow = currentRow;
|
const res = await getButtonsByRoleId({roleId: row, code: 'classifyTree '});
|
|
const filteredItems = this.classifyAuthButton.filter(item => {
|
return !res.data.data.find(x => x.id === item.id);
|
});
|
|
this.classifyAuthHeader.forEach(item => {
|
const isMatched = filteredItems.some(x => x.id === item.prop);
|
this.$nextTick(() => {
|
if (currentRow) {
|
if (isMatched) {
|
Object.keys(currentRow).forEach((key) => {
|
currentRow.authButton[item.code] = true;
|
if (!currentRow.authButton.classify_view) {
|
currentRow.authButton.allDisabled = false;
|
}
|
});
|
} else {
|
Object.keys(currentRow).forEach((key) => {
|
currentRow.authButton[item.code] = false;
|
if (!currentRow.authButton.classify_view) {
|
currentRow.authButton.allDisabled = false;
|
}
|
});
|
}
|
}
|
this.itemKey = uuidv4(); // 强制刷新表格
|
});
|
});
|
} catch (error) {
|
console.error(error);
|
}
|
},
|
// 增加行
|
addClassifyAuth() {
|
if (this.roleList.length <= 0) {
|
this.$message.warning("当前租户不存在角色信息！");
|
return;
|
}
|
|
let item = {
|
roleData: this.roleList[0].id,
|
classifyItem: this.classifyData.label,
|
authButton: {},
|
uuid: uuidv4(),//生成唯一的id,
|
index: this.classifyAuthData.length -1,
|
}
|
//将按钮设置进去
|
this.classifyAuthButton.forEach(data => {
|
Vue.set(item, data.id, false);
|
})
|
//console.log(item)
|
this.classifyAuthData.push(item)
|
this.roleHandlerMethods(this.roleList[0].id, 'add', this.classifyAuthData.length -1)
|
},
|
// 删除行
|
subClassifyAuth() {
|
for (let item of this.selectList) {
|
let index = this.classifyAuthData.findIndex(data => data.index === item.index);
|
if (index !== -1) {
|
this.classifyAuthData.splice(index, 1);
|
}
|
}
|
},
|
handleRowClick(row, column) {
|
this.selectList.push(row);
|
this.$refs.dataTable.toggleRowSelection(row);
|
},
|
// 多选
|
handleSelectionChange(list) {
|
this.selectList = list;
|
//console.log("多选");
|
},
|
// 选择全部
|
handleSelectionAll(list) {
|
this.selectList = list;
|
},
|
// 保存分类授权信息
|
async submit() {
|
let form = {
|
classifyAuthList: [],
|
isCLear: false, //默认是清空
|
classifyId: this.TreeNode.oid,
|
authType: 'classify_auth',
|
};
|
console.log('classifyAuthData',this.classifyAuthData);
|
let isRepeat = false;
|
if (this.classifyAuthData.length > 0) {
|
// 遍历数组，比较后面的对象的roleData是否与前面的对象相等
|
for (let i = 0; i < this.classifyAuthData.length - 1; i++) {
|
let currentRoleId = this.classifyAuthData[i].roleData;
|
for (let j = i + 1; j < this.classifyAuthData.length; j++) {
|
if (currentRoleId === this.classifyAuthData[j].roleData) {
|
isRepeat = true;
|
break;
|
}
|
}
|
if (isRepeat) {
|
break;
|
}
|
}
|
if (isRepeat) {
|
this.$message.warning("角色和分类已经存在，请重新配置！");
|
return;
|
}
|
let flag = false;
|
this.classifyAuthData.forEach(item => {
|
let itemButtonList = [];
|
//筛选出按钮勾选为true的列
|
for (let key in item) {
|
if (item[key] === true && key !== 'checkTheStatus') {
|
itemButtonList.push(key);
|
}
|
}
|
/**如果itemButtonList为空证明是，
|
添加了角色但是没勾选任何的按钮*/
|
if (itemButtonList.length <= 0) {
|
flag = true;
|
return;
|
}
|
let data = {
|
oid: item.oid,
|
roleId: item.roleData,
|
classifyId: this.TreeNode.oid,
|
buttonIds: itemButtonList.join(","),
|
authType: "classify_auth",
|
}
|
form.classifyAuthList.push(data);
|
});
|
if (flag) {
|
this.$message.warning('有未勾选操作的权限，不允许授权')
|
return;
|
}
|
// console.log(form)
|
} else {
|
// 为空证明是清空授权列表
|
form.isCLear = true;
|
}
|
// 调用保存分类授权的接口
|
await saveOrUpdate(form).then(res => {
|
this.$message({
|
type: "success",
|
message: res.data.msg,
|
});
|
// this.isShowDialog = false
|
}, (error) => {
|
window.console.log(error);
|
})
|
this.classifyAuthData = [];
|
this.loadAuthPage();
|
},
|
// 全选按钮
|
selectAllButton() {
|
if (this.selectList.length !== 1) {
|
this.$message.warning("请只选择一行需要全选的按钮的数据行！");
|
return;
|
}
|
this.classifyAuthButton.forEach(item => {
|
//console.log("item",item);
|
Vue.set(this.selectList[0], item.id, true);
|
});
|
//console.log("this.selectList",this.selectList);
|
},
|
loadAuthPage() {
|
return new Promise((resolve, reject) => {
|
this.isLoading = true;
|
getButtonByParentCode({code: 'classifyTree '}).then(res => {
|
// 记录按钮数据
|
this.classifyAuthButton = res.data.data;
|
const list = res.data.data;
|
let tempData = [];
|
// 角色列
|
tempData.push({
|
label: "角色",
|
prop: "roleData",
|
type: "select",
|
width: 150,
|
});
|
// 编码项分类授权
|
tempData.push({
|
label: "编码项数据授权",
|
prop: "classifyItem",
|
type: "text",
|
width: 180,
|
});
|
list.forEach(item => {
|
let columnItem = {
|
label: item.name,
|
prop: item.id,
|
code: item.code,
|
type: "checkbox",
|
width: 180,
|
};
|
tempData.push(columnItem);
|
})
|
this.classifyAuthHeader = tempData
|
resolve();
|
}).catch(err => {
|
reject(err)
|
});
|
// 获取角色列表
|
getPage(1, -1, null).then(res => {
|
this.roleList = res.data.data.records;
|
});
|
// 获取该分类下已授权的分类授权信息
|
getClassifyAuthList({classifyId: this.TreeNode.oid, authType: "classify_auth"}).then(res => {
|
//console.log(res.data.data);
|
let authDatas = res.data.data;
|
if (authDatas.length > 0) {
|
authDatas.forEach((authData, index) => {
|
let item = {
|
oid: authData.oid,
|
roleData: authData.roleId,
|
classifyItem: this.classifyData.label,
|
index: index,
|
authButton: {},
|
uuid: uuidv4(),//生成唯一的id
|
}
|
//将按钮设置进去
|
authData.buttonIdList.forEach(data => {
|
Vue.set(item, data, true);
|
});
|
this.classifyAuthData.push(item);
|
this.roleHandlerMethods(authData.roleId, 'create', index)
|
})
|
}
|
});
|
this.isLoading = false;
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
|
// 滚动条样式修改
|
// 滚动条的宽度
|
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
|
height: 15px; // 纵向滚动条 必写
|
background: white;
|
border: white;
|
width: 10px;
|
|
}
|
|
// 滚动条的滑块
|
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
background-color: #ececec;
|
border-radius: 20px;
|
border: #ececec;
|
}
|
|
/deep/ .el-table__body-wrapper {
|
height: calc(100% - 50px) !important;
|
}
|
|
</style>
|
