|
@@ -26,16 +26,36 @@
|
|
|
<div class="mb-16">
|
|
|
<auth :data="{roleid:roleid}" @onSuccess="roleMain"></auth>
|
|
|
</div>
|
|
|
- <tableLayout :layout="tablecols" :data="roleMainInfo.apps" :opwidth="200" :custom="false" @rowClick="appoptionselect">
|
|
|
+ <el-collapse>
|
|
|
+ <el-collapse-item title="筛选" name="1">
|
|
|
+ <el-row class="normal-margin">
|
|
|
+ <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
|
|
|
+ <div style="margin: 15px 0;"></div>
|
|
|
+ <el-checkbox-group v-model="checkModuleList" @change="handleCheckedCitiesChange">
|
|
|
+ <el-col style="margin-bottom:5px" :span="6" v-for="item in modulesList" :key="item.index">
|
|
|
+ <el-checkbox :label="item"></el-checkbox>
|
|
|
+ </el-col>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-row>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ <tableLayout :layout="tablecols" :data="apps" :custom="false" height="500px" @rowClick="appoptionselect">
|
|
|
</tableLayout>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-row :gutter="40">
|
|
|
<el-col :span="12">
|
|
|
<p class="title">功能</p>
|
|
|
- <div class="flex-align-center flex-between option-item" v-for="item in appoptions" :key="item.index">
|
|
|
- <p>{{item.optionname}}</p>
|
|
|
- <cancelAuth :data="{roleid:roleid,systemappid:active_systemappid,optionid:item.optionid}" @onSuccess="roleMain"></cancelAuth>
|
|
|
+ <el-row>
|
|
|
+ <el-checkbox-group v-model="checkedApps">
|
|
|
+ <el-col class="normal-margin" v-for="item in appoptions" :key="item.rowindex">
|
|
|
+ <el-checkbox :label="item.optionid">{{item.optionname}}</el-checkbox>
|
|
|
+ </el-col>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-row>
|
|
|
+ <div class="flex-align-center flex-between option-item">
|
|
|
+ <el-checkbox :indeterminate="isIndeterminate2" v-model="checkAll2" @change="handleCheckAllChange2">全选</el-checkbox>
|
|
|
+ <cancelAuth v-if="checkedApps.length > 0" :data="{roleid:roleid,systemappid:active_systemappid,optionid:checkedApps}" @onSuccess="roleMain"></cancelAuth>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
@@ -66,6 +86,10 @@ export default {
|
|
|
},
|
|
|
data () {
|
|
|
return{
|
|
|
+ isIndeterminate:false,
|
|
|
+ isIndeterminate2:false,
|
|
|
+ checkAll: true,
|
|
|
+ checkAll2: false,
|
|
|
rules:{
|
|
|
rolename: [
|
|
|
{ required: true, message: '请输入角色名称', trigger: 'blur' },
|
|
@@ -87,6 +111,10 @@ export default {
|
|
|
tablecols:[],
|
|
|
appoptions:[],
|
|
|
hiddenfields:[],
|
|
|
+ modulesList:[],
|
|
|
+ checkModuleList:[],
|
|
|
+ apps:[],
|
|
|
+ checkedApps:[],
|
|
|
roleid:0,
|
|
|
active_systemappid:''
|
|
|
}
|
|
@@ -110,6 +138,7 @@ export default {
|
|
|
|
|
|
//显示默认授权信息,一般默认信息为第一条数据
|
|
|
this.appoptionselect(res.data.apps[0])
|
|
|
+ this.filterModules()
|
|
|
},
|
|
|
async usertype () {
|
|
|
let param = {
|
|
@@ -155,7 +184,43 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
- }
|
|
|
+ },
|
|
|
+ //遍历权限模块用于筛选
|
|
|
+ filterModules () {
|
|
|
+ let arr = this.roleMainInfo.apps.map(e=>{
|
|
|
+ return e.systemmodulename
|
|
|
+ })
|
|
|
+ this.modulesList = this.checkModuleList = [...new Set(arr)]
|
|
|
+ this.filterApps()
|
|
|
+ },
|
|
|
+ handleCheckAllChange(val) {
|
|
|
+ this.checkModuleList = val ? this.modulesList : [];
|
|
|
+ this.isIndeterminate = false;
|
|
|
+ this.filterApps()
|
|
|
+ },
|
|
|
+ handleCheckedCitiesChange(value) {
|
|
|
+ let checkedCount = value.length;
|
|
|
+ this.checkAll = checkedCount === this.modulesList.length;
|
|
|
+ this.isIndeterminate = checkedCount > 0 && checkedCount < this.modulesList.length;
|
|
|
+ this.filterApps()
|
|
|
+ },
|
|
|
+ filterApps () {
|
|
|
+ let arr = []
|
|
|
+ this.roleMainInfo.apps.forEach(app => {
|
|
|
+ this.checkModuleList.filter(e=>{
|
|
|
+ if (e === app.systemmodulename) {
|
|
|
+ arr.push(app)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+
|
|
|
+ this.apps = arr
|
|
|
+ },
|
|
|
+ handleCheckAllChange2 (val) {
|
|
|
+ let arr = this.appoptions.map(e=>{return e.optionid})
|
|
|
+ this.checkedApps = val ? arr : [];
|
|
|
+ this.isIndeterminate2 = false;
|
|
|
+ },
|
|
|
},
|
|
|
mounted () {
|
|
|
// 获取应用表结构
|
|
@@ -190,6 +255,7 @@ export default {
|
|
|
.option-item{
|
|
|
color:#333333;
|
|
|
font-size: 14px;
|
|
|
- border-bottom:1px solid #f1f2f3
|
|
|
+ border-top:1px solid #f1f2f3;
|
|
|
+ padding-top:16px;
|
|
|
}
|
|
|
</style>
|