jiangyy
5 years ago
7 changed files with 372 additions and 92 deletions
@ -0,0 +1,241 @@ |
|||
<template> |
|||
<div class="role-container"> |
|||
<el-card class="flex1"> |
|||
<div class="now-name">当前客户: {{customerName}}</div> |
|||
<el-table v-loading="loading1" :data="roleList" border style="width: 100%"> |
|||
<el-table-column type="index" width="50"></el-table-column> |
|||
<!-- <el-table-column prop="roleId" label="角色ID"></el-table-column> --> |
|||
<el-table-column prop="roleName" label="角色名称"></el-table-column> |
|||
<el-table-column prop="roleKey" label="角色Key"></el-table-column> |
|||
<el-table-column label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="primary" size="small" @click="toOperationConfig(scope.row.roleId, scope.row.roleName)">功能权限</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-card> |
|||
<el-card v-show="funcShow" class="flex1" style="margin: 0 10px;"> |
|||
<div class="now-name">当前角色: {{roleName}}</div> |
|||
<el-table |
|||
v-loading="loading2" |
|||
max-height="580" |
|||
ref="opeTable" |
|||
:data="opeList" |
|||
border |
|||
style="width: 100%" |
|||
@select="handleSelectionChange" |
|||
> |
|||
<el-table-column type="selection" width="55"></el-table-column> |
|||
<!-- <el-table-column prop="operationKey" label="操作Key"></el-table-column> --> |
|||
<el-table-column prop="operationName" label="操作名称"></el-table-column> |
|||
<!-- <el-table-column prop="brief" label="简介"></el-table-column> --> |
|||
<el-table-column label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="primary" size="small" @click="toScopeConfig(scope.row.operationKey, scope.row.operationName)">权限配置</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-card> |
|||
<el-card v-show="roleShow" class="flex1"> |
|||
<div class="now-name">当前功能: {{funcName}}</div> |
|||
<div> |
|||
<el-row :gutter="12"> |
|||
<el-col :span="12" v-loading="loading3"> |
|||
<el-card shadow="hover"> |
|||
<el-checkbox-group class="t" v-model="checkedScopes" @change="roleChange"> |
|||
<el-checkbox |
|||
v-for="scope in scopeOptions" |
|||
:label="scope.scopeKey" |
|||
:key="scope.scopeKey" |
|||
:checked="scope.assigned" |
|||
>{{scope.scopeName}}</el-checkbox> |
|||
</el-checkbox-group> |
|||
</el-card> |
|||
</el-col> |
|||
<!-- <el-col :span="8"> |
|||
<el-card shadow="hover"> |
|||
<el-checkbox-group class="t" v-model="checkedSettings"> |
|||
<el-checkbox |
|||
v-for="setting in settingOptions" |
|||
:label="setting.settingKey" |
|||
:key="setting.settingKey" |
|||
:checked="setting.assigned" |
|||
>{{setting.settingName}}</el-checkbox> |
|||
</el-checkbox-group> |
|||
</el-card> |
|||
</el-col> --> |
|||
</el-row> |
|||
</div> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'RoleList', |
|||
props: { |
|||
customerId: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
customerName: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
loading1: false, |
|||
loading2: false, |
|||
loading3: false, |
|||
funcShow: false, |
|||
roleShow: false, |
|||
roleName: '', |
|||
funcName: '', |
|||
roleList: [], |
|||
opeList: [], |
|||
roleKey: '', |
|||
operationKey: '', |
|||
scopeOptions: [], |
|||
settingOptions: [], |
|||
checkedScopes: [], |
|||
checkedSettings: [], |
|||
roleId: '' |
|||
} |
|||
}, |
|||
created () { |
|||
this.listRolesByCustomerId(this.customerId) |
|||
}, |
|||
beforeDestroy () { |
|||
let _data = this.$data |
|||
for (let n in _data) { |
|||
if (typeof _data[n] === 'boolean') _data[n] = false |
|||
if (typeof _data[n] === 'string') _data[n] = '' |
|||
if (typeof _data[n] === 'object') _data[n] = [] |
|||
console.log(n, _data[n]) |
|||
} |
|||
}, |
|||
methods: { |
|||
listRolesByCustomerId (customerId) { |
|||
this.loading1 = true |
|||
this.$http |
|||
.post('/epmetuser/govstaffrole/rolesbycustomer/' + customerId) |
|||
.then(({ data: res }) => { |
|||
console.log('ressss', res) |
|||
if (res.code === 0) { |
|||
this.roleList = res.data |
|||
} |
|||
setTimeout(() => { |
|||
this.loading1 = false |
|||
}, 500) |
|||
}) |
|||
}, |
|||
listOperations4AccessConfig (roleId) { |
|||
this.roleId = roleId |
|||
this.loading2 = true |
|||
this.$http.post('/gov/access/config/roleopes/' + roleId).then((resp) => { |
|||
this.opeList = resp.data.data |
|||
this.$nextTick(function () { |
|||
this.defaultCheck() // 每次更新了数据，触发这个函数即可。 |
|||
}) |
|||
setTimeout(() => { |
|||
this.loading2 = false |
|||
}, 500) |
|||
}) |
|||
}, |
|||
listSettingOptions (operationKey) { |
|||
let params = { |
|||
roleId: this.roleId, |
|||
operationKey: operationKey |
|||
} |
|||
this.loading3 = true |
|||
this.$http |
|||
.post('/gov/access/config/configoptions', params) |
|||
.then(resp => { |
|||
console.log('scopeOptions', resp.data) |
|||
this.scopeOptions = resp.data.data.scopeOptions |
|||
this.settingOptions = resp.data.data.settingOptions |
|||
setTimeout(() => { |
|||
this.loading3 = false |
|||
}, 500) |
|||
}) |
|||
}, |
|||
defaultCheck () { |
|||
for (var index in this.opeList) { |
|||
let role = this.opeList[index] |
|||
if (role.assigned) { |
|||
this.$refs.opeTable.toggleRowSelection(role, true) |
|||
} |
|||
} |
|||
}, |
|||
toOperationConfig (roleId, roleName) { |
|||
this.roleName = roleName |
|||
this.funcShow = true |
|||
this.opeList = [] |
|||
this.listOperations4AccessConfig(roleId) |
|||
}, |
|||
toScopeConfig (operationKey, operationName) { |
|||
this.roleShow = true |
|||
this.operationKey = operationKey |
|||
this.funcName = operationName |
|||
this.checkedScopes = [] |
|||
this.listSettingOptions(operationKey) |
|||
}, |
|||
saveOperations4Role (val) { |
|||
let param = { |
|||
roleId: this.roleId, |
|||
opes: val |
|||
} |
|||
this.$http.post('/gov/access/config/saveroleopes', param).then( |
|||
resp => { |
|||
this.$message({ |
|||
message: '操作成功', |
|||
type: 'success' |
|||
}) |
|||
this.listOperations4AccessConfig(this.roleId) |
|||
} |
|||
) |
|||
}, |
|||
saveSettings (val) { |
|||
let param = { |
|||
roleId: this.roleId, |
|||
operationKey: this.operationKey, |
|||
scopeKeys: val, |
|||
settingKeys: this.checkedSettings |
|||
} |
|||
|
|||
this.$http.post('/gov/access/config/saveconfig', param).then( |
|||
resp => { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '保存成功' |
|||
}) |
|||
this.listSettingOptions(this.operationKey) |
|||
} |
|||
) |
|||
}, |
|||
roleChange (val) { |
|||
console.log('valooo', val) |
|||
this.saveSettings(val) |
|||
}, |
|||
handleSelectionChange (val) { |
|||
this.saveOperations4Role(val) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.role-container { |
|||
display: flex; |
|||
} |
|||
.flex1 { |
|||
flex: 1; |
|||
} |
|||
.now-name { |
|||
margin-bottom: 10px; |
|||
} |
|||
.aui-wrapper .el-card + .el-card { |
|||
margin-top: 0; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue