|
|
|
@ -1,20 +1,34 @@ |
|
|
|
<template> |
|
|
|
<div class="role-container"> |
|
|
|
<el-card class="flex1"> |
|
|
|
<div class="now-name">当前客户: {{customerName}}</div> |
|
|
|
<el-table v-loading="loading1" :data="roleList" border style="width: 100%"> |
|
|
|
<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="roleId" 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="角色名称"></el-table-column> |
|
|
|
<el-table-column prop="roleKey" label="角色Key"></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="small" @click="toOperationConfig(scope.row.roleId, scope.row.roleName)">功能权限</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="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-card v-show="funcShow" class="flex1" style="margin: 0 10px;"> |
|
|
|
<el-card v-show="funcShow" style="flex: 1; margin: 0 10px;"> |
|
|
|
<div class="now-name">当前角色: {{roleName}}</div> |
|
|
|
<el-table |
|
|
|
v-loading="loading2" |
|
|
|
@ -36,11 +50,11 @@ |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</el-card> |
|
|
|
<el-card v-show="roleShow" class="flex1"> |
|
|
|
<el-card v-show="roleShow" style="width: 250px;"> |
|
|
|
<div class="now-name">当前功能: {{funcName}}</div> |
|
|
|
<div> |
|
|
|
<el-row :gutter="12"> |
|
|
|
<el-col :span="12" v-loading="loading3"> |
|
|
|
<el-col v-loading="loading3"> |
|
|
|
<el-card shadow="hover"> |
|
|
|
<el-checkbox-group class="t" v-model="checkedScopes" @change="roleChange"> |
|
|
|
<el-checkbox |
|
|
|
@ -70,6 +84,7 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import Sortable from 'sortablejs' |
|
|
|
export default { |
|
|
|
name: 'RoleList', |
|
|
|
props: { |
|
|
|
@ -105,6 +120,9 @@ export default { |
|
|
|
created () { |
|
|
|
this.listRolesByCustomerId(this.customerId) |
|
|
|
}, |
|
|
|
mounted () { |
|
|
|
this.dragRoleSort() |
|
|
|
}, |
|
|
|
beforeDestroy () { |
|
|
|
let _data = this.$data |
|
|
|
for (let n in _data) { |
|
|
|
@ -121,7 +139,13 @@ export default { |
|
|
|
.then(({ data: res }) => { |
|
|
|
console.log('ressss', res) |
|
|
|
if (res.code === 0) { |
|
|
|
this.roleList = res.data |
|
|
|
this.roleList = res.data.map(item => { |
|
|
|
return { |
|
|
|
...item, |
|
|
|
constName: item.roleName, |
|
|
|
isEdit: false |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
setTimeout(() => { |
|
|
|
this.loading1 = false |
|
|
|
@ -223,6 +247,74 @@ export default { |
|
|
|
}, |
|
|
|
handleSelectionChange (val) { |
|
|
|
this.saveOperations4Role(val) |
|
|
|
}, |
|
|
|
handleChangeName (row) { |
|
|
|
row.isEdit = true |
|
|
|
}, |
|
|
|
handleSaveChange (row) { |
|
|
|
let data = { |
|
|
|
roleId: row.roleId, |
|
|
|
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.internalMsg |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
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(this.customerId) |
|
|
|
} else { |
|
|
|
this.$message({ |
|
|
|
type: 'error', |
|
|
|
message: res.internalMsg |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -236,6 +328,8 @@ export default { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
.now-name { |
|
|
|
/* display: flex; |
|
|
|
justify-content: space-between; */ |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
.aui-wrapper .el-card + .el-card { |
|
|
|
|
13176889840
5 years ago