<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]"
|
>
|
<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]">
|
</el-checkbox>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div slot="footer" class="dialog-footer">
|
<el-button class="el-icon-plus" type="success" @click="addClassifyAuth"></el-button>
|
<el-button class="el-icon-minus" type="warning" @click="subClassifyAuth"></el-button>
|
<el-button type="primary" @click="submit">提 交</el-button>
|
<el-button 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} from "@/api/system/classifyAuth"
|
import {v4 as uuidv4} from 'uuid';
|
|
export default {
|
name: "classifyAuthDialog.vue",
|
props: {
|
classifyData: {
|
type: "Object",
|
default: "",
|
},
|
/**对话框显示隐藏控制*/
|
visible: {
|
type: "Boolean",
|
default: false,
|
},
|
},
|
data() {
|
return {
|
// 对话框显示控制
|
isShowDialog: this.visible,
|
isLoading: false,
|
tableHeight: '520px',
|
classifyAuthData: [],
|
//列头
|
classifyAuthHeader: [],
|
//按钮数据
|
classifyAuthButton: [],
|
//角色列表
|
roleList: [],
|
//当前选中的表格行
|
selectList: [],
|
};
|
},
|
watch: {
|
// 监听父组件传的窗口显示隐藏的值
|
visible() {
|
if (this.visible) {
|
this.isShowDialog = this.visible;
|
return new Promise((resolve, reject) => {
|
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,
|
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.classifyData.oid}).then(res => {
|
//console.log(res.data.data);
|
let authDatas = res.data.data;
|
if (authDatas.length > 0) {
|
authDatas.forEach(authData => {
|
let item = {
|
oid: authData.oid,
|
roleData: authData.roleId,
|
classifyItem: this.classifyData.text,
|
uuid: uuidv4(),//生成唯一的id
|
}
|
//将按钮设置进去
|
authData.buttonIdList.forEach(data => {
|
Vue.set(item, data, true);
|
});
|
//console.log(item)
|
this.classifyAuthData.push(item);
|
})
|
}
|
});
|
});
|
}
|
},
|
},
|
computed: {},
|
mounted() {
|
},
|
created() {
|
},
|
methods: {
|
// 关闭对话框
|
closeDialog() {
|
this.$emit('update:visible', false);
|
this.classifyAuthData = [];
|
},
|
// 增加行
|
addClassifyAuth() {
|
let item = {
|
roleData: this.roleList[0].id,
|
classifyItem: this.classifyData.text,
|
uuid: uuidv4(),//生成唯一的id
|
}
|
//将按钮设置进去
|
this.classifyAuthButton.forEach(data => {
|
Vue.set(item, data.id, false);
|
})
|
//console.log(item)
|
this.classifyAuthData.push(item)
|
// console.log(this.classifyAuthData);
|
},
|
// 删除行
|
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;
|
},
|
// 保存分类授权信息
|
submit() {
|
if (this.classifyAuthData.length <= 0) {
|
this.$message.warning('授权列表为空！')
|
return;
|
}
|
let isRepeat = false;
|
// 遍历数组，比较后面的对象的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 form = [];
|
let flag = false;
|
this.classifyAuthData.forEach(item => {
|
let itemButtonList = [];
|
//筛选出按钮勾选为true的列
|
for (let key in item) {
|
if (item[key] === true) {
|
itemButtonList.push(key);
|
}
|
}
|
/**如果itemButtonList为空证明是，
|
添加了角色但是没勾选任何的按钮*/
|
if (itemButtonList.length <= 0) {
|
flag = true;
|
return;
|
}
|
let data = {
|
oid: item.oid,
|
roleId: item.roleData,
|
classifyId: this.classifyData.oid,
|
buttonIds: itemButtonList.join(","),
|
}
|
form.push(data);
|
});
|
if (flag) {
|
this.$message.warning('有未勾选操作的权限，不允许授权')
|
return;
|
}
|
// console.log(form)
|
// 调用保存分类授权的接口
|
saveOrUpdate(form).then(res => {
|
this.$message({
|
type: "success",
|
message: res.data.msg,
|
});
|
// this.isShowDialog = false
|
}, (error) => {
|
window.console.log(error);
|
})
|
},
|
},
|
};
|
</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>
|
