|
|
|
@ -1,167 +1,98 @@ |
|
|
|
<template> |
|
|
|
<div class="role-container"> |
|
|
|
<el-card class="flex1"> |
|
|
|
<el-tabs v-model.trim="activeName" |
|
|
|
@tab-click="tabClick" |
|
|
|
class="el-tabs"> |
|
|
|
<el-tab-pane label="工作端" |
|
|
|
name="work"> |
|
|
|
<el-tabs v-model.trim="activeName" @tab-click="tabClick" class="el-tabs"> |
|
|
|
<el-tab-pane label="工作端" name="work"> |
|
|
|
<div class="now-name"> |
|
|
|
上下拖动可改变角色顺序 |
|
|
|
<el-button type="primary" |
|
|
|
size="small" |
|
|
|
@click="handleSaveSort">保存顺序</el-button> |
|
|
|
<el-button type="primary" size="small" @click="handleSaveSort">保存顺序</el-button> |
|
|
|
</div> |
|
|
|
<el-table ref="roleTable" |
|
|
|
v-loading="loading1" |
|
|
|
:data="roleList" |
|
|
|
row-key="roleKey" |
|
|
|
border |
|
|
|
<el-table ref="roleTable" v-loading="loading1" :data="roleList" row-key="roleKey" border |
|
|
|
style="width: 100%"> |
|
|
|
<el-table-column type="index" |
|
|
|
header-align="left" |
|
|
|
align="left" |
|
|
|
width="50"></el-table-column> |
|
|
|
<el-table-column prop="roleName" |
|
|
|
label="角色名称" |
|
|
|
header-align="left" |
|
|
|
align="left" |
|
|
|
width="180"> |
|
|
|
<el-table-column type="index" header-align="left" align="left" width="50"></el-table-column> |
|
|
|
<el-table-column prop="roleName" label="角色名称" header-align="left" align="left" width="180"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-input v-if="scope.row.isEdit" |
|
|
|
v-model.trim="scope.row.roleName" |
|
|
|
clearable> |
|
|
|
<el-input v-if="scope.row.isEdit" v-model.trim="scope.row.roleName" clearable> |
|
|
|
</el-input> |
|
|
|
<span v-else>{{scope.row.constName}}</span> |
|
|
|
<span v-else>{{ scope.row.constName }}</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column v-if="!funcShow" |
|
|
|
prop="roleKey" |
|
|
|
header-align="left" |
|
|
|
align="left" |
|
|
|
label="角色Key" |
|
|
|
<el-table-column v-if="!funcShow" prop="roleKey" header-align="left" align="left" label="角色Key" |
|
|
|
width="150"></el-table-column> |
|
|
|
<el-table-column prop="description" |
|
|
|
label="角色职责" |
|
|
|
header-align="left" |
|
|
|
align="left"> |
|
|
|
<el-table-column prop="description" label="角色职责" header-align="left" align="left"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<p style="text-align:left;margin:3px 0" |
|
|
|
v-for="(item,index) in scope.row.descriptionList" |
|
|
|
:key="index">{{item}}</p> |
|
|
|
v-for="(item, index) in scope.row.descriptionList" :key="index">{{ item }}</p> |
|
|
|
<!-- <p>{{scope.row.description}}</p> --> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column width="450" |
|
|
|
label="操作"> |
|
|
|
<el-table-column width="450" label="操作"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-button type="primary" |
|
|
|
size="mini" |
|
|
|
<el-button type="primary" size="mini" |
|
|
|
@click="handelChangeDuty(scope.row)">修改职责</el-button> |
|
|
|
<el-button type="primary" |
|
|
|
size="mini" |
|
|
|
<el-button type="primary" size="mini" |
|
|
|
@click="toOperationConfig(scope.row.roleKey, scope.row.roleName)">功能权限</el-button> |
|
|
|
<span v-if="scope.row.isEdit" |
|
|
|
style="display: inline-block; margin-left: 10px;"> |
|
|
|
<el-button type="primary" |
|
|
|
size="small" |
|
|
|
@click="saveName(scope.row)">保存</el-button> |
|
|
|
<el-button size="small" |
|
|
|
@click="scope.row.isEdit=false">取消</el-button> |
|
|
|
<span v-if="scope.row.isEdit" style="display: inline-block; margin-left: 10px;"> |
|
|
|
<el-button type="primary" size="small" @click="saveName(scope.row)">保存</el-button> |
|
|
|
<el-button size="small" @click="scope.row.isEdit = false">取消</el-button> |
|
|
|
</span> |
|
|
|
<el-button v-else |
|
|
|
type="primary" |
|
|
|
size="mini" |
|
|
|
<el-button v-else type="primary" size="mini" |
|
|
|
@click="handleChangeName(scope.row)">修改名称</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</el-tab-pane> |
|
|
|
<el-tab-pane label="居民端" |
|
|
|
name="resi"> |
|
|
|
<el-tab-pane label="居民端" name="resi"> |
|
|
|
</el-tab-pane> |
|
|
|
</el-tabs> |
|
|
|
</el-card> |
|
|
|
<!-- 角色职责弹出框 --> |
|
|
|
<el-dialog :visible.sync="dutyShow" |
|
|
|
:close-on-click-modal="false" |
|
|
|
:close-on-press-escape="false" |
|
|
|
title="角色职责" |
|
|
|
width="30%" |
|
|
|
@closed="handleDutyClosed"> |
|
|
|
<div class="div_duty" |
|
|
|
v-if="dutyShow"> |
|
|
|
<el-input type="textarea" |
|
|
|
:rows="8" |
|
|
|
v-model.trim="description"></el-input> |
|
|
|
<el-dialog :visible.sync="dutyShow" :close-on-click-modal="false" :close-on-press-escape="false" title="角色职责" |
|
|
|
width="30%" @closed="handleDutyClosed"> |
|
|
|
<div class="div_duty" v-if="dutyShow"> |
|
|
|
<el-input type="textarea" :rows="8" v-model.trim="description"></el-input> |
|
|
|
<div class="div_btn"> |
|
|
|
<el-button type="primary" |
|
|
|
size="small" |
|
|
|
@click="updateRole()">保存</el-button> |
|
|
|
<el-button size="small" |
|
|
|
@click="dutyShow=false">取消</el-button> |
|
|
|
<el-button type="primary" size="small" @click="updateRole()">保存</el-button> |
|
|
|
<el-button size="small" @click="dutyShow = false">取消</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
<!-- 功能配置弹出框 --> |
|
|
|
<el-dialog :visible.sync="funcShow" |
|
|
|
:close-on-click-modal="false" |
|
|
|
:close-on-press-escape="false" |
|
|
|
width="70%" |
|
|
|
top="30px" |
|
|
|
title="功能列表" |
|
|
|
@closed="handleDialogClosed"> |
|
|
|
<div class="role-flex" |
|
|
|
v-if="funcShow"> |
|
|
|
<el-dialog :visible.sync="funcShow" :close-on-click-modal="false" :close-on-press-escape="false" width="70%" |
|
|
|
top="30px" title="功能列表" @closed="handleDialogClosed"> |
|
|
|
<div class="role-flex" v-if="funcShow"> |
|
|
|
<el-card class="flex1"> |
|
|
|
<div class="now-name">当前角色: {{roleName}}</div> |
|
|
|
<div class="now-name">当前角色: {{ roleName }}</div> |
|
|
|
<div class="now-name"> |
|
|
|
<el-button type="primary" |
|
|
|
size="small" |
|
|
|
@click="saveOperations4Role">保存功能</el-button> |
|
|
|
<el-button type="primary" size="small" @click="saveOperations4Role">保存功能</el-button> |
|
|
|
</div> |
|
|
|
<el-table v-loading="loading2" |
|
|
|
height="580" |
|
|
|
ref="opeTable" |
|
|
|
:data="opeList" |
|
|
|
border |
|
|
|
<el-table v-loading="loading2" height="580" ref="opeTable" :data="opeList" border |
|
|
|
@select="handleSelectionChange"> |
|
|
|
<el-table-column type="selection" |
|
|
|
width="55"></el-table-column> |
|
|
|
<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="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" |
|
|
|
<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" |
|
|
|
style="width: 250px; margin-left: 10px;"> |
|
|
|
<div class="now-name">当前功能: {{funcName}}</div> |
|
|
|
<el-card v-show="roleShow" style="width: 250px; margin-left: 10px;"> |
|
|
|
<div class="now-name">当前功能: {{ funcName }}</div> |
|
|
|
<div class="now-name"> |
|
|
|
<el-button type="primary" |
|
|
|
size="small" |
|
|
|
@click="saveSettings">保存范围</el-button> |
|
|
|
<el-button type="primary" |
|
|
|
size="small" |
|
|
|
@click="toAllClient">同步到所有客户</el-button> |
|
|
|
<el-button type="primary" size="small" @click="saveSettings">保存范围</el-button> |
|
|
|
<el-button type="primary" size="small" @click="toAllClient">同步到所有客户</el-button> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<el-row :gutter="12"> |
|
|
|
<el-col v-loading="loading3"> |
|
|
|
<el-card shadow="hover"> |
|
|
|
<el-checkbox-group class="t" |
|
|
|
v-model.trim="checkedScopes" |
|
|
|
@change="roleChange"> |
|
|
|
<el-checkbox v-for="scope in scopeOptions" |
|
|
|
:label="scope.scopeKey" |
|
|
|
:key="scope.scopeKey">{{scope.scopeName}}</el-checkbox> |
|
|
|
<el-checkbox-group class="t" v-model.trim="checkedScopes" @change="roleChange"> |
|
|
|
<el-checkbox v-for="scope in scopeOptions" :label="scope.scopeKey" |
|
|
|
:key="scope.scopeKey">{{ scope.scopeName }}</el-checkbox> |
|
|
|
</el-checkbox-group> |
|
|
|
</el-card> |
|
|
|
</el-col> |
|
|
|
@ -187,7 +118,7 @@ export default { |
|
|
|
default: '' |
|
|
|
} |
|
|
|
}, |
|
|
|
data () { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
activeName: "work", |
|
|
|
loading1: false, |
|
|
|
@ -215,13 +146,13 @@ export default { |
|
|
|
scopeSection: [] // 范围选择列表 |
|
|
|
} |
|
|
|
}, |
|
|
|
created () { |
|
|
|
created() { |
|
|
|
this.listRoles() |
|
|
|
}, |
|
|
|
mounted () { |
|
|
|
mounted() { |
|
|
|
this.dragRoleSort() |
|
|
|
}, |
|
|
|
beforeDestroy () { |
|
|
|
beforeDestroy() { |
|
|
|
let _data = this.$data |
|
|
|
for (let n in _data) { |
|
|
|
if (typeof _data[n] === 'boolean') _data[n] = false |
|
|
|
@ -230,10 +161,10 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
tabClick () { |
|
|
|
tabClick() { |
|
|
|
}, |
|
|
|
//获取角色列表 |
|
|
|
listRoles () { |
|
|
|
listRoles() { |
|
|
|
this.loading1 = true |
|
|
|
this.$http |
|
|
|
.post('/epmetuser/govstaffrole/roletemplates') |
|
|
|
@ -255,30 +186,30 @@ export default { |
|
|
|
}) |
|
|
|
}, |
|
|
|
//关闭角色职责弹出框 |
|
|
|
handleDutyClosed () { |
|
|
|
handleDutyClosed() { |
|
|
|
this.selRoleId = '' |
|
|
|
this.roleName = '' |
|
|
|
this.description = '' |
|
|
|
this.dutyShow = false |
|
|
|
}, |
|
|
|
//显示角色职责弹出框 |
|
|
|
handelChangeDuty (row) { |
|
|
|
handelChangeDuty(row) { |
|
|
|
this.selRoleId = row.id |
|
|
|
this.description = row.description |
|
|
|
this.roleName = row.roleName |
|
|
|
this.dutyShow = true |
|
|
|
}, |
|
|
|
handleChangeName (row) { |
|
|
|
handleChangeName(row) { |
|
|
|
row.isEdit = true |
|
|
|
}, |
|
|
|
saveName (row) { |
|
|
|
saveName(row) { |
|
|
|
this.selRoleId = row.id |
|
|
|
this.description = row.description |
|
|
|
this.roleName = row.roleName |
|
|
|
this.updateRole() |
|
|
|
}, |
|
|
|
//保存角色名称、职责 |
|
|
|
async updateRole () { |
|
|
|
async updateRole() { |
|
|
|
console.log(this.description) |
|
|
|
const url = "/epmetuser/govstaffrole/updatedefaultrole" |
|
|
|
const params = { |
|
|
|
@ -295,7 +226,7 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
//同步权限到所有客户 |
|
|
|
async toAllClient () { |
|
|
|
async toAllClient() { |
|
|
|
const url = "/gov/access/config/add-ope-and-scopes-4role/by-default-conf" |
|
|
|
const params = { |
|
|
|
roleKey: this.roleKey, |
|
|
|
@ -309,7 +240,7 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
//关闭功能配置弹出框 |
|
|
|
handleDialogClosed () { |
|
|
|
handleDialogClosed() { |
|
|
|
this.roleName = '' |
|
|
|
this.roleKey = '' |
|
|
|
this.funcName = '' |
|
|
|
@ -319,18 +250,18 @@ export default { |
|
|
|
this.roleShow = false |
|
|
|
}, |
|
|
|
//点击功能权限按钮 |
|
|
|
toOperationConfig (roleKey, roleName) { |
|
|
|
toOperationConfig(roleKey, roleName) { |
|
|
|
this.roleName = roleName |
|
|
|
this.funcShow = true |
|
|
|
this.opeList = [] |
|
|
|
this.listOperations4AccessConfig(roleKey) |
|
|
|
}, |
|
|
|
listOperations4AccessConfig (roleKey) { |
|
|
|
listOperations4AccessConfig(roleKey) { |
|
|
|
this.roleKey = roleKey |
|
|
|
this.loading2 = true |
|
|
|
this.$http.post('/gov/access/config/roledefaultops/' + roleKey).then((resp) => { |
|
|
|
this.opeList = resp.data.data |
|
|
|
this.$nextTick(function() { |
|
|
|
this.$nextTick(function () { |
|
|
|
this.defaultCheck() // 每次更新了数据，触发这个函数即可。 |
|
|
|
}) |
|
|
|
setTimeout(() => { |
|
|
|
@ -338,7 +269,7 @@ export default { |
|
|
|
}, 500) |
|
|
|
}) |
|
|
|
}, |
|
|
|
listSettingOptions (operationKey) { |
|
|
|
listSettingOptions(operationKey) { |
|
|
|
let params = { |
|
|
|
roleKey: this.roleKey, |
|
|
|
operationKey: operationKey |
|
|
|
@ -360,7 +291,7 @@ export default { |
|
|
|
}, 500) |
|
|
|
}) |
|
|
|
}, |
|
|
|
defaultCheck () { |
|
|
|
defaultCheck() { |
|
|
|
for (var index in this.opeList) { |
|
|
|
let role = this.opeList[index] |
|
|
|
if (role.assigned) { |
|
|
|
@ -368,14 +299,14 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
toScopeConfig (operationKey, operationName) { |
|
|
|
toScopeConfig(operationKey, operationName) { |
|
|
|
this.roleShow = true |
|
|
|
this.operationKey = operationKey |
|
|
|
this.funcName = operationName |
|
|
|
this.checkedScopes = [] |
|
|
|
this.listSettingOptions(operationKey) |
|
|
|
}, |
|
|
|
saveOperations4Role () { |
|
|
|
saveOperations4Role() { |
|
|
|
let param = { |
|
|
|
roleKey: this.roleKey, |
|
|
|
operationKeys: this.operateSection.map(item => item.operationKey) |
|
|
|
@ -398,7 +329,7 @@ export default { |
|
|
|
} |
|
|
|
) |
|
|
|
}, |
|
|
|
saveSettings () { |
|
|
|
saveSettings() { |
|
|
|
let param = { |
|
|
|
roleKey: this.roleKey, |
|
|
|
operationKey: this.operationKey, |
|
|
|
@ -422,15 +353,15 @@ export default { |
|
|
|
} |
|
|
|
) |
|
|
|
}, |
|
|
|
roleChange (val) { |
|
|
|
roleChange(val) { |
|
|
|
this.scopeSection = val |
|
|
|
// this.saveSettings(val) |
|
|
|
}, |
|
|
|
handleSelectionChange (val) { |
|
|
|
handleSelectionChange(val) { |
|
|
|
this.operateSection = val |
|
|
|
// this.saveOperations4Role(val) |
|
|
|
}, |
|
|
|
dragRoleSort () { |
|
|
|
dragRoleSort() { |
|
|
|
const el = this.$refs.roleTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0] |
|
|
|
this.sortTable = Sortable.create(el, { |
|
|
|
group: 'dragTable', |
|
|
|
@ -448,7 +379,7 @@ export default { |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
handleSaveSort () { |
|
|
|
handleSaveSort() { |
|
|
|
let data = { |
|
|
|
roleIdList: this.roleList.map(item => { |
|
|
|
return item.id |
|
|
|
@ -480,24 +411,30 @@ export default { |
|
|
|
.role-flex { |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
|
|
|
|
.flex1 { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.now-name { |
|
|
|
/* display: flex; |
|
|
|
justify-content: space-between; */ |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
.aui-wrapper .el-card + .el-card { |
|
|
|
|
|
|
|
.aui-wrapper .el-card+.el-card { |
|
|
|
margin-top: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.role-container .el-dialog__body { |
|
|
|
padding: 0 20px 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.div_duty { |
|
|
|
height: 300px; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.div_btn { |
|
|
|
position: absolute; |
|
|
|
bottom: 30px; |
|
|
|
|
luyan
1 year ago