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