jiangyy
4 years ago
5 changed files with 637 additions and 71 deletions
@ -0,0 +1,540 @@ |
|||||
|
<template> |
||||
|
<div class="role-container"> |
||||
|
<el-card class="flex1"> |
||||
|
<div class="div_btn"> |
||||
|
<span style="margin-right:20px">{{customerName}}</span> |
||||
|
<el-button type="default" |
||||
|
size="mini" |
||||
|
@click="diaCancel">取消返回</el-button> |
||||
|
|
||||
|
</div> |
||||
|
<el-tabs v-model="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> |
||||
|
</div> |
||||
|
<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"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-if="scope.row.isEdit" |
||||
|
v-model="scope.row.roleName" |
||||
|
clearable> |
||||
|
</el-input> |
||||
|
<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" |
||||
|
width="150"></el-table-column> --> |
||||
|
|
||||
|
<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> |
||||
|
<!-- <p>{{scope.row.description}}</p> --> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column width="450" |
||||
|
label="操作"> |
||||
|
<template slot-scope="scope"> |
||||
|
|
||||
|
<el-button type="primary" |
||||
|
size="mini" |
||||
|
@click="handelDefault(scope.row)">恢复默认</el-button> |
||||
|
<el-button type="primary" |
||||
|
size="mini" |
||||
|
@click="handelChangeDuty(scope.row)">修改职责</el-button> |
||||
|
<el-button type="primary" |
||||
|
size="mini" |
||||
|
@click="toOperationConfig(scope.row.roleId, 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="handelChangeName(scope.row)">保存</el-button> |
||||
|
<el-button size="small" |
||||
|
@click="scope.row.isEdit=false">取消</el-button> |
||||
|
</span> |
||||
|
<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> |
||||
|
</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="description"></el-input> |
||||
|
<div class="div_btn_dia"> |
||||
|
<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-card class="flex1"> |
||||
|
<div class="now-name">当前角色: {{roleName}}</div> |
||||
|
<div class="now-name"> |
||||
|
<el-button type="primary" |
||||
|
size="small" |
||||
|
@click="saveOperations4Role">保存功能</el-button> |
||||
|
</div> |
||||
|
<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 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" |
||||
|
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> |
||||
|
</div> |
||||
|
<div> |
||||
|
<el-row :gutter="12"> |
||||
|
<el-col 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">{{scope.scopeName}}</el-checkbox> |
||||
|
</el-checkbox-group> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Sortable from 'sortablejs' |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
|
||||
|
export default { |
||||
|
name: 'RoleList', |
||||
|
props: { |
||||
|
|
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
activeName: "work", |
||||
|
loading1: false, |
||||
|
loading2: false, |
||||
|
loading3: false, |
||||
|
selRoleId: '', |
||||
|
|
||||
|
//职责弹出框相关 |
||||
|
dutyShow: false, |
||||
|
description: '', |
||||
|
roleName: '', |
||||
|
|
||||
|
//功能权限弹出框相关 |
||||
|
funcShow: false, |
||||
|
roleShow: false, |
||||
|
roleName: '', |
||||
|
funcName: '', |
||||
|
roleList: [], |
||||
|
opeList: [], |
||||
|
roleKey: '', |
||||
|
operationKey: '', |
||||
|
scopeOptions: [], |
||||
|
settingOptions: [], |
||||
|
checkedScopes: [], |
||||
|
checkedSettings: [], |
||||
|
operateSection: [], // 功能选择列表 |
||||
|
scopeSection: [] // 范围选择列表 |
||||
|
} |
||||
|
}, |
||||
|
created () { |
||||
|
|
||||
|
}, |
||||
|
mounted () { |
||||
|
|
||||
|
}, |
||||
|
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] = [] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
tabClick () { |
||||
|
|
||||
|
}, |
||||
|
initData (customerId, customerName) { |
||||
|
this.customerId = customerId |
||||
|
this.customerName = customerName |
||||
|
this.listRolesByCustomerId() |
||||
|
this.dragRoleSort() |
||||
|
}, |
||||
|
|
||||
|
//获取角色列表 |
||||
|
listRolesByCustomerId () { |
||||
|
this.loading1 = true |
||||
|
|
||||
|
this.$http |
||||
|
.post('/epmetuser/govstaffrole/rolesbycustomer/' + this.customerId) |
||||
|
.then(({ data: res }) => { |
||||
|
|
||||
|
if (res.code === 0) { |
||||
|
this.roleList = res.data.map(item => { |
||||
|
if (!item.description) { |
||||
|
item.description = item.defDescription |
||||
|
} |
||||
|
if (!item.roleKey) { |
||||
|
item.roleKey = item.defRoleKey |
||||
|
} |
||||
|
if (!item.roleName) { |
||||
|
item.roleName = item.defRoleName |
||||
|
} |
||||
|
return { |
||||
|
...item, |
||||
|
constName: item.roleName, |
||||
|
isEdit: false, |
||||
|
descriptionList: item.description.split("\n") |
||||
|
} |
||||
|
}) |
||||
|
console.log('roleList', this.roleList) |
||||
|
} |
||||
|
setTimeout(() => { |
||||
|
this.loading1 = false |
||||
|
}, 500) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
//关闭角色职责弹出框 |
||||
|
handleDutyClosed () { |
||||
|
this.selRoleId = '' |
||||
|
this.description = '' |
||||
|
this.roleName = '' |
||||
|
this.dutyShow = false |
||||
|
}, |
||||
|
|
||||
|
//恢复默认 |
||||
|
handelDefault (row) { |
||||
|
this.selRoleId = row.roleId |
||||
|
this.description = row.defDescription |
||||
|
this.roleName = row.defRoleName |
||||
|
this.updateRole() |
||||
|
}, |
||||
|
|
||||
|
//显示角色职责弹出框 |
||||
|
handelChangeDuty (row) { |
||||
|
this.selRoleId = row.roleId |
||||
|
this.description = row.description |
||||
|
this.roleName = row.roleName |
||||
|
this.dutyShow = true |
||||
|
}, |
||||
|
|
||||
|
handleChangeName (row) { |
||||
|
row.isEdit = true |
||||
|
}, |
||||
|
|
||||
|
handelChangeName (row) { |
||||
|
this.selRoleId = row.roleId |
||||
|
this.description = row.description |
||||
|
this.roleName = row.roleName |
||||
|
this.updateRole() |
||||
|
}, |
||||
|
|
||||
|
//保存角色名称、职责 |
||||
|
async updateRole () { |
||||
|
console.log(this.description) |
||||
|
const url = "/epmetuser/govstaffrole/update-role" |
||||
|
const params = { |
||||
|
roleId: this.selRoleId, |
||||
|
roleName: this.roleName, |
||||
|
description: this.description |
||||
|
} |
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
if (code === 0) { |
||||
|
this.dutyShow = false |
||||
|
this.listRolesByCustomerId() |
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
}, |
||||
|
//关闭功能配置弹出框 |
||||
|
handleDialogClosed () { |
||||
|
this.roleName = '' |
||||
|
this.roleKey = '' |
||||
|
this.funcName = '' |
||||
|
this.operateSection = [] |
||||
|
this.scopeSection = [] |
||||
|
this.funcShow = false |
||||
|
this.roleShow = false |
||||
|
}, |
||||
|
|
||||
|
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 |
||||
|
} |
||||
|
console.log('checkedScopes', this.checkedScopes) |
||||
|
this.checkedScopes = [] |
||||
|
this.loading3 = true |
||||
|
this.$http |
||||
|
.post('/gov/access/config/configoptions', params) |
||||
|
.then(resp => { |
||||
|
console.log('scopeOptions', resp.data) |
||||
|
this.scopeOptions = resp.data.data.scopeOptions |
||||
|
resp.data.data.scopeOptions.forEach(item => { |
||||
|
if (item.assigned) this.checkedScopes.push(item.scopeKey) |
||||
|
}) |
||||
|
console.log('checkedScopes222', this.checkedScopes) |
||||
|
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, |
||||
|
customerId: this.customerId |
||||
|
} |
||||
|
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, |
||||
|
customerId: this.customerId |
||||
|
} |
||||
|
|
||||
|
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) |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
dragRoleSort () { |
||||
|
const el = this.$refs.roleTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0] |
||||
|
this.sortTable = Sortable.create(el, { |
||||
|
group: 'dragTable', |
||||
|
ghostClass: 'sortable-ghost', // Class name for the drop placeholder, |
||||
|
// setData: function(dataTransfer, dragEl) { |
||||
|
// dataTransfer.setData("Text", dragEl.textContent); |
||||
|
// }, |
||||
|
delay: 0, |
||||
|
onChange: evt => { |
||||
|
// console.log(evt) |
||||
|
}, |
||||
|
onEnd: evt => { |
||||
|
const targetRow = this.roleList.splice(evt.oldIndex, 1)[0] |
||||
|
this.roleList.splice(evt.newIndex, 0, targetRow) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
handleSaveSort () { |
||||
|
let data = { |
||||
|
roleIdList: this.roleList.map(item => { |
||||
|
return item.roleId |
||||
|
}) |
||||
|
} |
||||
|
this.$http |
||||
|
.post('/epmetuser/govstaffrole/save-sortorder', data) |
||||
|
.then(({ data: res }) => { |
||||
|
console.log('ressss', res) |
||||
|
if (res.code === 0 && res.msg === 'success') { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '保存成功' |
||||
|
}) |
||||
|
this.listRolesByCustomerId() |
||||
|
} else { |
||||
|
this.$message({ |
||||
|
type: 'error', |
||||
|
message: res.msg |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 取消 |
||||
|
diaCancel () { |
||||
|
this.$emit('cancleBack') |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.role-container, |
||||
|
.role-flex { |
||||
|
display: flex; |
||||
|
} |
||||
|
.flex1 { |
||||
|
flex: 1; |
||||
|
position: relative; |
||||
|
} |
||||
|
.now-name { |
||||
|
/* display: flex; |
||||
|
justify-content: space-between; */ |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.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_dia { |
||||
|
position: absolute; |
||||
|
bottom: 30px; |
||||
|
right: 15px; |
||||
|
} |
||||
|
.div_btn { |
||||
|
z-index: 10; |
||||
|
position: absolute; |
||||
|
right: 40px; |
||||
|
top: 25px; |
||||
|
/* margin: 0 0 20px 0; */ |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue