13176889840
5 years ago
2 changed files with 334 additions and 70 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