jiangyy
4 years ago
2 changed files with 526 additions and 0 deletions
@ -0,0 +1,403 @@ |
|||||
|
<template> |
||||
|
<div class="role-container"> |
||||
|
<el-card class="flex1"> |
||||
|
<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="center" |
||||
|
align="center" |
||||
|
width="50"></el-table-column> |
||||
|
<!-- <el-table-column prop="roleId" label="角色ID"></el-table-column> --> |
||||
|
<el-table-column prop="roleName" |
||||
|
label="角色名称" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
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" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
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.$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> |
||||
@ -0,0 +1,123 @@ |
|||||
|
<template> |
||||
|
<el-card shadow="never" |
||||
|
class="aui-card--fill"> |
||||
|
<div class="mod-sys__menu"> |
||||
|
<el-form :inline="true" |
||||
|
:model="dataForm" |
||||
|
@keyup.enter.native="getDataList()"> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" |
||||
|
@click="addOrUpdateHandle()">{{ $t('add') }}</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<el-table v-loading="dataListLoading" |
||||
|
:data="dataList" |
||||
|
row-key="id" |
||||
|
border |
||||
|
:height="tableHeight" |
||||
|
style="width: 100%;"> |
||||
|
<el-table-column prop="name" |
||||
|
:label="$t('menu.name')" |
||||
|
header-align="center" |
||||
|
min-width="150"></el-table-column> |
||||
|
<el-table-column prop="icon" |
||||
|
:label="$t('menu.icon')" |
||||
|
header-align="center" |
||||
|
align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<svg class="icon-svg" |
||||
|
aria-hidden="true"> |
||||
|
<use :xlink:href="`#${scope.row.icon}`"></use> |
||||
|
</svg> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="type" |
||||
|
:label="$t('menu.type')" |
||||
|
header-align="center" |
||||
|
align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-tag v-if="scope.row.type === 0" |
||||
|
size="small">{{ $t('menu.type0') }}</el-tag> |
||||
|
<el-tag v-else |
||||
|
size="small" |
||||
|
type="info">{{ $t('menu.type1') }}</el-tag> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="sort" |
||||
|
:label="$t('menu.sort')" |
||||
|
header-align="center" |
||||
|
align="center"></el-table-column> |
||||
|
<el-table-column prop="url" |
||||
|
:label="$t('menu.url')" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
width="150" |
||||
|
:show-overflow-tooltip="true"></el-table-column> |
||||
|
<el-table-column prop="permissions" |
||||
|
:label="$t('menu.permissions')" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
width="150" |
||||
|
:show-overflow-tooltip="true"></el-table-column> |
||||
|
<el-table-column :label="$t('handle')" |
||||
|
fixed="right" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
width="150"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button type="text" |
||||
|
size="small" |
||||
|
@click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button> |
||||
|
<el-button type="text" |
||||
|
size="small" |
||||
|
@click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button> |
||||
|
<el-button type="text" |
||||
|
size="small" |
||||
|
@click="showCustomerMenu(scope.row.id)">{{ '客户配置' }}</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!-- 弹窗, 新增 / 修改 --> |
||||
|
<add-or-update v-if="addOrUpdateVisible" |
||||
|
ref="addOrUpdate" |
||||
|
@refreshDataList="getDataList"></add-or-update> |
||||
|
<!-- 客户菜单配置 --> |
||||
|
<customer-add-or-update ref="customerForm" |
||||
|
@refreshDataList="getDataList"></customer-add-or-update> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import mixinViewModule from '@/mixins/view-module' |
||||
|
import AddOrUpdate from './menu-add-or-update' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import CustomerAddOrUpdate from './customer-add-or-update' |
||||
|
export default { |
||||
|
mixins: [mixinViewModule], |
||||
|
data () { |
||||
|
return { |
||||
|
mixinViewModuleOptions: { |
||||
|
getDataListURL: '/gov/access/menu/list', |
||||
|
deleteURL: '/gov/access/menu' |
||||
|
}, |
||||
|
customerFormVisible: false |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
AddOrUpdate, CustomerAddOrUpdate |
||||
|
}, |
||||
|
computed: { |
||||
|
tableHeight () { |
||||
|
// return this.resolution === 'small' ? this.clientHeight - 210 : this.clientHeight - 220 |
||||
|
return this.clientHeight - 210 |
||||
|
}, |
||||
|
...mapGetters(['clientHeight', 'resolution']), |
||||
|
}, |
||||
|
methods: { |
||||
|
showCustomerMenu (tableId) { |
||||
|
this.$refs['customerForm'].init(tableId) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue