You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
397 lines
12 KiB
397 lines
12 KiB
4 years ago
|
<template>
|
||
|
|
<div class="role-container">
|
||
|
|
<el-card class="flex1">
|
||
|
|
<!-- <div class="now-name">
|
||
|
|
当前客户: {{customerName}}
|
||
|
|
<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"
|
||
|
|
width="50"></el-table-column>
|
||
|
|
<!-- <el-table-column prop="roleId" label="角色ID"></el-table-column> -->
|
||
|
|
<el-table-column prop="roleName"
|
||
|
|
label="角色名称"
|
||
|
|
width="160">
|
||
|
|
<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"
|
||
|
|
label="角色Key"></el-table-column>
|
||
|
|
<el-table-column label="操作">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<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="handleSaveChange(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-card>
|
||
|
|
<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'
|
||
|
|
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: [],
|
||
|
|
operateSection: [], // 功能选择列表
|
||
|
|
scopeSection: [] // 范围选择列表
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created () {
|
||
|
|
this.listRolesByCustomerId()
|
||
|
|
},
|
||
|
|
mounted () {
|
||
|
|
this.dragRoleSort()
|
||
|
|
},
|
||
|
|
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: {
|
||
|
|
handleDialogClosed () {
|
||
|
|
this.roleName = ''
|
||
|
|
this.roleKey = ''
|
||
|
|
this.funcName = ''
|
||
|
|
this.operateSection = []
|
||
|
|
this.scopeSection = []
|
||
|
|
this.funcShow = false
|
||
|
|
this.roleShow = false
|
||
|
|
},
|
||
|
|
listRolesByCustomerId (customerId) {
|
||
|
|
this.loading1 = true
|
||
|
|
this.$http
|
||
|
|
.post('/epmetuser/govstaffrole/roletemplates')
|
||
|
|
.then(({ data: res }) => {
|
||
|
|
console.log('ressss', res)
|
||
|
|
if (res.code === 0) {
|
||
|
|
this.roleList = res.data.map(item => {
|
||
|
|
return {
|
||
|
|
...item,
|
||
|
|
constName: item.roleName,
|
||
|
|
isEdit: false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
setTimeout(() => {
|
||
|
|
this.loading1 = false
|
||
|
|
}, 500)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
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.defaultCheck() // 每次更新了数据，触发这个函数即可。
|
||
|
|
})
|
||
|
|
setTimeout(() => {
|
||
|
|
this.loading2 = false
|
||
|
|
}, 500)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
listSettingOptions (operationKey) {
|
||
|
|
let params = {
|
||
|
|
roleKey: this.roleKey,
|
||
|
|
operationKey: operationKey
|
||
|
|
}
|
||
|
|
console.log('checkedScopes', this.checkedScopes)
|
||
|
|
this.loading3 = true
|
||
|
|
this.checkedScopes = []
|
||
|
|
this.$http
|
||
|
|
.post('/gov/access/config/opedefaultscopes/list', params)
|
||
|
|
.then(resp => {
|
||
|
|
console.log('scopeOptions', resp.data)
|
||
|
|
this.scopeOptions = resp.data.data
|
||
|
|
resp.data.data.forEach(item => {
|
||
|
|
if (item.assigned) this.checkedScopes.push(item.scopeKey)
|
||
|
|
})
|
||
|
|
console.log('checkedScopes222', this.checkedScopes)
|
||
|
|
this.settingOptions = resp.data.data
|
||
|
|
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 (roleKey, roleName) {
|
||
|
|
this.roleName = roleName
|
||
|
|
this.funcShow = true
|
||
|
|
this.opeList = []
|
||
|
|
this.listOperations4AccessConfig(roleKey)
|
||
|
|
},
|
||
|
|
toScopeConfig (operationKey, operationName) {
|
||
|
|
this.roleShow = true
|
||
|
|
this.operationKey = operationKey
|
||
|
|
this.funcName = operationName
|
||
|
|
this.checkedScopes = []
|
||
|
|
this.listSettingOptions(operationKey)
|
||
|
|
},
|
||
|
|
saveOperations4Role () {
|
||
|
|
let param = {
|
||
|
|
roleKey: this.roleKey,
|
||
|
|
operationKeys: this.operateSection.map(item => item.operationKey)
|
||
|
|
}
|
||
|
|
this.$http.post('/gov/access/config/roledefaultopes/save', param).then(
|
||
|
|
resp => {
|
||
|
|
const { code, msg } = resp.data
|
||
|
|
if (code === 0 && msg === 'success') {
|
||
|
|
this.$message({
|
||
|
|
message: '操作成功',
|
||
|
|
type: 'success'
|
||
|
|
})
|
||
|
|
this.listOperations4AccessConfig(this.roleKey)
|
||
|
|
} else {
|
||
|
|
this.$message({
|
||
|
|
message: msg,
|
||
|
|
type: 'error'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
)
|
||
|
|
},
|
||
|
|
saveSettings () {
|
||
|
|
let param = {
|
||
|
|
roleKey: this.roleKey,
|
||
|
|
operationKey: this.operationKey,
|
||
|
|
scopeKeys: this.scopeSection
|
||
|
|
}
|
||
|
|
|
||
|
|
this.$http.post('/gov/access/config/opedefaultscopes/save', param).then(
|
||
|
|
resp => {
|
||
|
|
const { code, msg } = resp.data
|
||
|
|
if (code === 0 && msg === 'success') {
|
||
|
|
this.$message({
|
||
|
|
type: 'success',
|
||
|
|
message: '保存成功'
|
||
|
|
})
|
||
|
|
this.listSettingOptions(this.operationKey)
|
||
|
|
} else {
|
||
|
|
this.$message({
|
||
|
|
message: msg,
|
||
|
|
type: 'error'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
)
|
||
|
|
},
|
||
|
|
roleChange (val) {
|
||
|
|
console.log('valooo', val)
|
||
|
|
this.scopeSection = val
|
||
|
|
// this.saveSettings(val)
|
||
|
|
},
|
||
|
|
handleSelectionChange (val) {
|
||
|
|
// console.log('val', val)
|
||
|
|
this.operateSection = val
|
||
|
|
// this.saveOperations4Role(val)
|
||
|
|
},
|
||
|
|
handleChangeName (row) {
|
||
|
|
row.isEdit = true
|
||
|
|
},
|
||
|
|
handleSaveChange (row) {
|
||
|
|
let data = {
|
||
|
|
roleKey: row.roleKey,
|
||
|
|
roleName: row.roleName
|
||
|
|
}
|
||
|
|
this.$http
|
||
|
|
.post('/epmetuser/govstaffrole/update-role', data)
|
||
|
|
.then(({ data: res }) => {
|
||
|
|
console.log('ressss', res)
|
||
|
|
if (res.code === 0 && res.msg === 'success') {
|
||
|
|
this.$message({
|
||
|
|
type: 'success',
|
||
|
|
message: '保存成功'
|
||
|
|
})
|
||
|
|
this.listRolesByCustomerId(this.customerId)
|
||
|
|
} else {
|
||
|
|
this.$message({
|
||
|
|
type: 'error',
|
||
|
|
message: res.msg
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
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.roleKey
|
||
|
|
})
|
||
|
|
}
|
||
|
|
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(this.customerId)
|
||
|
|
} else {
|
||
|
|
this.$message({
|
||
|
|
type: 'error',
|
||
|
|
message: res.msg
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.role-container,
|
||
|
|
.role-flex {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.flex1 {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
</style>
|