elink-star
/
epmet-work-pc-chengyang
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

组织增加人员检索功能；

dev
luyan 1 year ago
parent
d5e6c74939
commit
dba0556a3b
6 changed files with 4462 additions and 5036 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5366
      src/views/modules/base/organization/organization.vue
  2. 615
      src/views/modules/customer/customize/roleList.vue
  3. 669
      src/views/modules/customer/role.vue
  4. 1478
      src/views/modules/home/index.vue
  5. 869
      src/views/modules/productConfig/workRoleAuth.vue
  6. 501
      src/views/modules/workSys/role/role.vue

5366
src/views/modules/base/organization/organization.vue
View File

File diff suppressed because it is too large

615
src/views/modules/customer/customize/roleList.vue
View File

@ -1,98 +1,64 @@
<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="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="角色名称"
width="160">
<template slot-scope="scope">
<el-input v-if="scope.row.isEdit"
v-model.trim="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.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"
style="flex: 1; margin: 0 10px;">
<div class="now-name">当前角色: {{roleName}}</div>
<el-table v-loading="loading2"
max-height="580"
ref="opeTable"
:data="opeList"
border
style="width: 100%"
<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="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="角色名称" width="160">
<template slot-scope="scope">
<el-input v-if="scope.row.isEdit" v-model.trim="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.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" style="flex: 1; margin: 0 10px;">
<div class="now-name">当前角色: {{ roleName }}</div>
<el-table v-loading="loading2" max-height="580" ref="opeTable" :data="opeList" border style="width: 100%"
@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;">
<div class="now-name">当前功能: {{funcName}}</div>
<div>
<el-row :gutter="12">
<el-col v-loading="loading3">
<el-card shadow="hover">
<el-checkbox-group class="t"
v-model.trim="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-col :span="8">
<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;">
<div class="now-name">当前功能: {{ funcName }}</div>
<div>
<el-row :gutter="12">
<el-col v-loading="loading3">
<el-card shadow="hover">
<el-checkbox-group class="t" v-model.trim="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-col :span="8">
<el-card shadow="hover">
<el-checkbox-group class="t" v-model.trim="checkedSettings">
<el-checkbox
@ -104,261 +70,264 @@
</el-checkbox-group>
</el-card>
</el-col> -->
</el-row>
</div>
</el-card>
</div>
</el-row>
</div>
</el-card>
</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: [],
roleId: ''
}
},
created () {
this.listRolesByCustomerId(this.customerId)
},
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: {
listRolesByCustomerId (customerId) {
this.loading1 = true
this.$http
.post('/epmetuser/govstaffrole/rolesbycustomer/' + customerId)
.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 (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)
name: 'RoleList',
props: {
customerId: {
type: String,
default: ''
},
customerName: {
type: String,
default: ''
}
)
},
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)
data() {
return {
loading1: false,
loading2: false,
loading3: false,
funcShow: false,
roleShow: false,
roleName: '',
funcName: '',
roleList: [],
opeList: [],
roleKey: '',
operationKey: '',
scopeOptions: [],
settingOptions: [],
checkedScopes: [],
checkedSettings: [],
roleId: ''
}
)
},
roleChange (val) {
this.saveSettings(val)
created() {
this.listRolesByCustomerId(this.customerId)
},
handleSelectionChange (val) {
this.saveOperations4Role(val)
mounted() {
this.dragRoleSort()
},
handleChangeName (row) {
row.isEdit = true
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] = []
}
},
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: '保存成功'
methods: {
listRolesByCustomerId(customerId) {
this.loading1 = true
this.$http
.post('/epmetuser/govstaffrole/rolesbycustomer/' + customerId)
.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(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)
})
this.listRolesByCustomerId(this.customerId)
} else {
this.$message({
type: 'error',
message: res.msg
},
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) {
this.saveSettings(val)
},
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.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)
}
})
}
})
},
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.msg
})
}
})
}
})
},
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.msg
})
}
})
}
}
}
</script>
<style>
.role-container {
display: flex;
display: flex;
}
.flex1 {
flex: 1;
flex: 1;
}
.now-name {
/* display: flex;
/* display: flex;
justify-content: space-between; */
margin-bottom: 10px;
margin-bottom: 10px;
}
.aui-wrapper .el-card + .el-card {
margin-top: 0;
.aui-wrapper .el-card+.el-card {
margin-top: 0;
}
</style>

669
src/views/modules/customer/role.vue
View File

@ -1,391 +1,362 @@
<template>
<div class="role-container">
<el-card class="flex1">
<!-- <div class="now-name">
<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
<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.trim="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-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.trim="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>
</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.trim="checkedScopes"
@change="roleChange">
<el-checkbox v-for="scope in scopeOptions"
:label="scope.scopeKey"
:key="scope.scopeKey">{{scope.scopeName}}</el-checkbox>
</el-checkbox-group>
<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-col>
</el-row>
</div>
</el-card>
</div>
</el-dialog>
</div>
<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.trim="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'
})
}
name: 'RoleList',
props: {
customerId: {
type: String,
default: ''
},
customerName: {
type: String,
default: ''
}
)
},
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'
})
}
data() {
return {
loading1: false,
loading2: false,
loading3: false,
funcShow: false,
roleShow: false,
roleName: '',
funcName: '',
roleList: [],
opeList: [],
roleKey: '',
operationKey: '',
scopeOptions: [],
settingOptions: [],
checkedScopes: [],
checkedSettings: [],
operateSection: [], // 功能选择列表
scopeSection: [] // 范围选择列表
}
)
},
roleChange (val) {
this.scopeSection = val
// this.saveSettings(val)
created() {
this.listRolesByCustomerId()
},
handleSelectionChange (val) {
this.operateSection = val
// this.saveOperations4Role(val)
mounted() {
this.dragRoleSort()
},
handleChangeName (row) {
row.isEdit = true
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] = []
}
},
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: '保存成功'
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)
})
this.listRolesByCustomerId(this.customerId)
} else {
this.$message({
type: 'error',
message: res.msg
},
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) {
this.scopeSection = val
// this.saveSettings(val)
},
handleSelectionChange(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)
}
})
}
})
},
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
})
}
})
}
})
},
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;
display: flex;
}
.flex1 {
flex: 1;
flex: 1;
}
.now-name {
/* display: flex;
/* display: flex;
justify-content: space-between; */
margin-bottom: 10px;
margin-bottom: 10px;
}
.aui-wrapper .el-card + .el-card {
margin-top: 0;
.aui-wrapper .el-card+.el-card {
margin-top: 0;
}
.role-container .el-dialog__body {
padding: 0 20px 20px;
padding: 0 20px 20px;
}
</style>

1478
src/views/modules/home/index.vue
View File

File diff suppressed because it is too large

869
src/views/modules/productConfig/workRoleAuth.vue
View File

@ -1,506 +1,443 @@
<template>
<div class="role-container">
<el-card class="flex1">
<el-tabs v-model.trim="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.trim="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="handelChangeDuty(scope.row)">修改职责</el-button>
<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="saveName(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.trim="description"></el-input>
<div class="div_btn">
<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">
<div class="role-container">
<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-tabs v-model.trim="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.trim="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="handelChangeDuty(scope.row)">修改职责</el-button>
<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="saveName(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-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>
<el-button type="primary"
size="small"
@click="toAllClient">同步到所有客户</el-button>
</div>
<div>
<el-row :gutter="12">
<el-col v-loading="loading3">
<el-card shadow="hover">
<el-checkbox-group class="t"
v-model.trim="checkedScopes"
@change="roleChange">
<el-checkbox v-for="scope in scopeOptions"
:label="scope.scopeKey"
:key="scope.scopeKey">{{scope.scopeName}}</el-checkbox>
</el-checkbox-group>
<!-- 角色职责弹出框 -->
<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.trim="description"></el-input>
<div class="div_btn">
<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-col>
</el-row>
</div>
</el-card>
</div>
</el-dialog>
</div>
<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>
<el-button type="primary" size="small" @click="toAllClient">同步到所有客户</el-button>
</div>
<div>
<el-row :gutter="12">
<el-col v-loading="loading3">
<el-card shadow="hover">
<el-checkbox-group class="t" v-model.trim="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: {
customerId: {
type: String,
default: ''
},
customerName: {
type: String,
default: ''
}
},
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 () {
this.listRoles()
},
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: {
tabClick () {
},
//获取角色列表
listRoles () {
this.loading1 = true
this.$http
.post('/epmetuser/govstaffrole/roletemplates')
.then(({ data: res }) => {
if (res.code === 0) {
this.roleList = res.data.map(item => {
return {
...item,
constName: item.roleName,
isEdit: false,
descriptionList: item.description ? item.description.split("\n") : ""
}
})
console.log('roleList', this.roleList)
}
setTimeout(() => {
this.loading1 = false
}, 500)
})
},
//关闭角色职责弹出框
handleDutyClosed () {
this.selRoleId = ''
this.roleName = ''
this.description = ''
this.dutyShow = false
},
//显示角色职责弹出框
handelChangeDuty (row) {
this.selRoleId = row.id
this.description = row.description
this.roleName = row.roleName
this.dutyShow = true
},
handleChangeName (row) {
row.isEdit = true
name: 'RoleList',
props: {
customerId: {
type: String,
default: ''
},
customerName: {
type: String,
default: ''
}
},
saveName (row) {
this.selRoleId = row.id
this.description = row.description
this.roleName = row.roleName
this.updateRole()
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: [] // 范围选择列表
}
},
//保存角色名称、职责
async updateRole () {
console.log(this.description)
const url = "/epmetuser/govstaffrole/updatedefaultrole"
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
created() {
this.listRoles()
} else {
this.$message.error(msg)
}
},
//同步权限到所有客户
async toAllClient () {
const url = "/gov/access/config/add-ope-and-scopes-4role/by-default-conf"
const params = {
roleKey: this.roleKey,
operationKey: this.operationKey,
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.$message.success('同步成功')
} else {
this.$message.error(msg)
}
},
//关闭功能配置弹出框
handleDialogClosed () {
this.roleName = ''
this.roleKey = ''
this.funcName = ''
this.operateSection = []
this.scopeSection = []
this.funcShow = false
this.roleShow = false
},
//点击功能权限按钮
toOperationConfig (roleKey, roleName) {
this.roleName = roleName
this.funcShow = true
this.opeList = []
this.listOperations4AccessConfig(roleKey)
},
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)
})
mounted() {
this.dragRoleSort()
},
defaultCheck () {
for (var index in this.opeList) {
let role = this.opeList[index]
if (role.assigned) {
this.$refs.opeTable.toggleRowSelection(role, true)
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] = []
}
}
},
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: '保存成功'
methods: {
tabClick() {
},
//获取角色列表
listRoles() {
this.loading1 = true
this.$http
.post('/epmetuser/govstaffrole/roletemplates')
.then(({ data: res }) => {
if (res.code === 0) {
this.roleList = res.data.map(item => {
return {
...item,
constName: item.roleName,
isEdit: false,
descriptionList: item.description ? item.description.split("\n") : ""
}
})
console.log('roleList', this.roleList)
}
setTimeout(() => {
this.loading1 = false
}, 500)
})
},
//关闭角色职责弹出框
handleDutyClosed() {
this.selRoleId = ''
this.roleName = ''
this.description = ''
this.dutyShow = false
},
//显示角色职责弹出框
handelChangeDuty(row) {
this.selRoleId = row.id
this.description = row.description
this.roleName = row.roleName
this.dutyShow = true
},
handleChangeName(row) {
row.isEdit = true
},
saveName(row) {
this.selRoleId = row.id
this.description = row.description
this.roleName = row.roleName
this.updateRole()
},
//保存角色名称、职责
async updateRole() {
console.log(this.description)
const url = "/epmetuser/govstaffrole/updatedefaultrole"
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.listRoles()
} else {
this.$message.error(msg)
}
},
//同步权限到所有客户
async toAllClient() {
const url = "/gov/access/config/add-ope-and-scopes-4role/by-default-conf"
const params = {
roleKey: this.roleKey,
operationKey: this.operationKey,
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.$message.success('同步成功')
} else {
this.$message.error(msg)
}
},
//关闭功能配置弹出框
handleDialogClosed() {
this.roleName = ''
this.roleKey = ''
this.funcName = ''
this.operateSection = []
this.scopeSection = []
this.funcShow = false
this.roleShow = false
},
//点击功能权限按钮
toOperationConfig(roleKey, roleName) {
this.roleName = roleName
this.funcShow = true
this.opeList = []
this.listOperations4AccessConfig(roleKey)
},
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)
})
this.listSettingOptions(this.operationKey)
} else {
this.$message({
message: msg,
type: 'error'
},
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)
}
}
},
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) {
this.scopeSection = val
// this.saveSettings(val)
},
handleSelectionChange(val) {
this.operateSection = 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)
}
})
}
}
)
},
roleChange (val) {
this.scopeSection = val
// this.saveSettings(val)
},
handleSelectionChange (val) {
this.operateSection = 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.id
})
}
this.$http
.post('/epmetuser/govstaffrole/savedefaultsort', data)
.then(({ data: res }) => {
console.log('ressss', res)
if (res.code === 0 && res.msg === 'success') {
this.$message({
type: 'success',
message: '保存成功'
})
this.listRoles()
} else {
this.$message({
type: 'error',
message: res.msg
})
}
})
}
})
},
handleSaveSort () {
let data = {
roleIdList: this.roleList.map(item => {
return item.id
})
}
this.$http
.post('/epmetuser/govstaffrole/savedefaultsort', data)
.then(({ data: res }) => {
console.log('ressss', res)
if (res.code === 0 && res.msg === 'success') {
this.$message({
type: 'success',
message: '保存成功'
})
this.listRoles()
} else {
this.$message({
type: 'error',
message: res.msg
})
}
})
}
}
}
</script>
<style scoped>
.role-container,
.role-flex {
display: flex;
display: flex;
}
.flex1 {
flex: 1;
flex: 1;
}
.now-name {
/* display: flex;
/* display: flex;
justify-content: space-between; */
margin-bottom: 10px;
margin-bottom: 10px;
}
.aui-wrapper .el-card + .el-card {
margin-top: 0;
.aui-wrapper .el-card+.el-card {
margin-top: 0;
}
.role-container .el-dialog__body {
padding: 0 20px 20px;
padding: 0 20px 20px;
}
.div_duty {
height: 300px;
position: relative;
height: 300px;
position: relative;
}
.div_btn {
position: absolute;
bottom: 30px;
right: 15px;
position: absolute;
bottom: 30px;
right: 15px;
}
</style>

501
src/views/modules/workSys/role/role.vue
View File

@ -1,20 +1,13 @@
<template>
<div class="g-main">
<div class="m-search">
<el-form :inline="true"
:model="formData"
ref="ref_searchform"
:label-width="'110px'">
<el-form-item label="角色名称"
prop="name">
<el-input v-model.trim="formData.name"
size="small"
class="list_item_width_1"
clearable
placeholder="请输入角色名称">
</el-input>
</el-form-item>
<!-- <el-form-item label="创建时间"
<div class="g-main">
<div class="m-search">
<el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'110px'">
<el-form-item label="角色名称" prop="name">
<el-input v-model.trim="formData.name" size="small" class="list_item_width_1" clearable
placeholder="请输入角色名称">
</el-input>
</el-form-item>
<!-- <el-form-item label="创建时间"
label-width="110px"
prop="createdTime">
<el-date-picker v-model.trim="formData.createdTime"
@ -26,116 +19,58 @@
placeholder="创建时间">
</el-date-picker>
</el-form-item> -->
<el-button style="margin-left:10px"
size="small"
class="diy-button--add"
@click="handleSearch">查询</el-button>
<el-button style="margin-left:30px"
size="small"
class="diy-button--white"
@click="resetSearch">重置</el-button>
</el-form>
<el-button style="margin-left:10px" size="small" class="diy-button--add"
@click="handleSearch">查询</el-button>
<el-button style="margin-left:30px" size="small" class="diy-button--white"
@click="resetSearch">重置</el-button>
</el-form>
</div>
<div class="m-table">
<div class="div_btn">
<el-button class="diy-button--add" size="small" @click="handleAdd">新增</el-button>
</div>
<el-table class="table" ref="ref_table" :data="tableData" border :height="tableHeight"
v-loading="tableLoading" style="width: 100%">
<el-table-column label="序号" header-align="center" align="center" type="index"
width="50"></el-table-column>
<el-table-column prop="name" header-align="center" align="center" label="角色名称" min-width="100">
</el-table-column>
<el-table-column prop="defaultRole" header-align="center" align="center" label="默认角色" in-width="30">
<template slot-scope="scope">
{{ scope.row.defaultRole == '0' ? 'X' : '√' }}
</template>
</el-table-column>
<el-table-column prop="levelName" header-align="center" align="center" label="级别" in-width="30">
</el-table-column>
<el-table-column prop="remark" header-align="center" align="center" label="备注" min-width="110">
</el-table-column>
<el-table-column prop="createdTime" header-align="center" align="center" label="创建时间" min-width="170">
</el-table-column>
<el-table-column label="操作" fixed="right" width="140" header-align="center" align="center"
class="operate">
<template slot-scope="scope">
<el-button v-if="true" type="text" class="div-table-button--detail" size="small"
@click="handleDetail(scope.row)">查看</el-button>
<el-button type="text" class="div-table-button--edit" size="small"
@click="handleEdit(scope.row)">修改</el-button>
<el-button v-if="scope.row.defaultRole !== '1'" type="text" class="div-table-button--delete "
size="small" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page.sync="pageNo" :page-sizes="[20, 50, 100, 200]" :page-size="pageSize"
layout="sizes, prev, pager, next, total" :total="total">
</el-pagination>
</div>
</div>
<!-- 修改弹出框 -->
<el-dialog :visible.sync="formShow" :close-on-click-modal="false" :close-on-press-escape="false"
:title="formTitle" width="850px" top="5vh" class="dialog-h" @closed="diaClose">
<role-form ref="ref_form" @dialogCancle="diaClose" @dialogOk="addFormOk"></role-form>
</el-dialog>
</div>
<div class="m-table">
<div class="div_btn">
<el-button class="diy-button--add"
size="small"
@click="handleAdd">新增</el-button>
</div>
<el-table class="table"
ref="ref_table"
:data="tableData"
border
:height="tableHeight"
v-loading="tableLoading"
style="width: 100%">
<el-table-column label="序号"
header-align="center"
align="center"
type="index"
width="50"></el-table-column>
<el-table-column prop="name"
header-align="center"
align="center"
label="角色名称"
min-width="100">
</el-table-column>
<el-table-column prop="defaultRole"
header-align="center"
align="center"
label="默认角色"
in-width="30">
<template slot-scope="scope">
{{ scope.row.defaultRole == '0' ? 'X' : '√' }}
</template>
</el-table-column>
<el-table-column prop="levelName"
header-align="center"
align="center"
label="级别"
in-width="30">
</el-table-column>
<el-table-column prop="remark"
header-align="center"
align="center"
label="备注"
min-width="110">
</el-table-column>
<el-table-column prop="createdTime"
header-align="center"
align="center"
label="创建时间"
min-width="170">
</el-table-column>
<el-table-column label="操作"
fixed="right"
width="140"
header-align="center"
align="center"
class="operate">
<template slot-scope="scope">
<el-button v-if="true"
type="text"
class="div-table-button--detail"
size="small"
@click="handleDetail(scope.row)">查看</el-button>
<el-button type="text"
class="div-table-button--edit"
size="small"
@click="handleEdit(scope.row)">修改</el-button>
<el-button v-if="scope.row.defaultRole!=='1'"
type="text"
class="div-table-button--delete "
size="small"
@click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div>
<el-pagination @size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="pageNo"
:page-sizes="[20, 50, 100, 200]"
:page-size="pageSize"
layout="sizes, prev, pager, next, total"
:total="total">
</el-pagination>
</div>
</div>
<!-- 修改弹出框 -->
<el-dialog :visible.sync="formShow"
:close-on-click-modal="false"
:close-on-press-escape="false"
:title="formTitle"
width="850px"
top="5vh"
class="dialog-h"
@closed="diaClose">
<role-form ref="ref_form"
@dialogCancle="diaClose"
@dialogOk="addFormOk"></role-form>
</el-dialog>
</div>
</template>
<script>
import roleForm from './roleForm'
@ -144,174 +79,174 @@ import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
let loading // 加载动画
export default {
data () {
return {
loading: false,
total: 0,
pageSize:window.localStorage.getItem('pageSize') || 20,
pageNo: 0,
tableLoading: false,
isResiUser: true,
agencyId: '',
timeRange: [],
formData: {
name: '',//名称
// createdTime: '',//时间
},
tableData: [],
//form相关
formShow: false,
formTitle: '新增',
}
},
components: {
roleForm
},
async created () {
},
async mounted () {
const { user } = this.$store.state
this.agencyId = user.agencyId
await this.loadTable()
},
activated () {
this.$refs['ref_table'].doLayout()
},
methods: {
async handleSearch () {
this.isResiUser = this.formData.orgType === 'current'
await this.loadTable()
this.$nextTick(() => {
this.$refs.ref_table.doLayout() // 解决表格错位
})
},
async loadTable () {
this.tableLoading = true
const url = "/gov/access/govrole/page"
let params = {
pageSize: this.pageSize,
pageNo: this.pageNo,
...this.formData
}
const { data, code, msg } = await requestGet(url, params)
if (code === 0) {
this.total = data.total
this.tableData = data.list
} else {
this.$message.error(msg)
}
this.tableLoading = false
},
handleTimeChange (time) {
if (time) {
this.formData.startTime = time[0]
this.formData.endTime = time[1]
} else {
this.formData.startTime = ''
this.formData.endTime = ''
}
},
diaClose () {
this.$refs.ref_form.resetData()
this.formShow = false
data() {
return {
loading: false,
total: 0,
pageSize: window.localStorage.getItem('pageSize') || 20,
pageNo: 0,
tableLoading: false,
isResiUser: true,
agencyId: '',
timeRange: [],
formData: {
name: '',//名称
// createdTime: '',//时间
},
tableData: [],
//form相关
formShow: false,
formTitle: '新增',
}
},
handleAdd () {
this.formTitle = '新增'
this.formShow = true
this.$nextTick(() => {
this.$refs.ref_form.initForm('add', null)
})
components: {
roleForm
},
handleEdit (row) {
this.formTitle = '修改'
this.formShow = true
this.$nextTick(() => {
this.$refs.ref_form.initForm('edit', row.id, row.defaultRole)
})
async created() {
},
handleDetail (row) {
this.formTitle = '详情'
this.formShow = true
this.$nextTick(() => {
this.$refs.ref_form.initForm('detail', row.id)
})
async mounted() {
const { user } = this.$store.state
this.agencyId = user.agencyId
await this.loadTable()
},
addFormOk () {
this.formShow = false
this.loadTable()
activated() {
this.$refs['ref_table'].doLayout()
},
async handleDelete (row) {
let message = '确认删除?'
this.$confirm(message, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
this.deleteRole(row)
})
.catch(err => {
});
methods: {
async handleSearch() {
this.isResiUser = this.formData.orgType === 'current'
await this.loadTable()
this.$nextTick(() => {
this.$refs.ref_table.doLayout() // 解决表格错位
})
},
async loadTable() {
this.tableLoading = true
const url = "/gov/access/govrole/page"
let params = {
pageSize: this.pageSize,
pageNo: this.pageNo,
...this.formData
}
const { data, code, msg } = await requestGet(url, params)
if (code === 0) {
this.total = data.total
this.tableData = data.list
} else {
this.$message.error(msg)
}
this.tableLoading = false
},
handleTimeChange(time) {
if (time) {
this.formData.startTime = time[0]
this.formData.endTime = time[1]
} else {
this.formData.startTime = ''
this.formData.endTime = ''
}
},
diaClose() {
this.$refs.ref_form.resetData()
this.formShow = false
},
handleAdd() {
this.formTitle = '新增'
this.formShow = true
this.$nextTick(() => {
this.$refs.ref_form.initForm('add', null)
})
},
handleEdit(row) {
this.formTitle = '修改'
this.formShow = true
this.$nextTick(() => {
this.$refs.ref_form.initForm('edit', row.id, row.defaultRole)
})
},
handleDetail(row) {
this.formTitle = '详情'
this.formShow = true
this.$nextTick(() => {
this.$refs.ref_form.initForm('detail', row.id)
})
},
addFormOk() {
this.formShow = false
this.loadTable()
},
async handleDelete(row) {
let message = '确认删除?'
this.$confirm(message, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
this.deleteRole(row)
})
.catch(err => {
});
},
async deleteRole(row) {
const url = "/gov/access/govrole/del"
let params = [row.id]
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.$message({
type: "success",
message: "操作成功"
});
this.loadTable()
} else {
this.$message.error(msg)
}
},
//重置搜索条件
resetSearch() {
this.formData = {
name: '',//姓名
}
this.pageNo = 0
this.loadTable()
},
handleSizeChange(val) {
this.pageSize = val
this.pageNo = 1
this.loadTable()
},
handleCurrentChange(val) {
this.pageNo = val
this.loadTable()
},
// 开启加载动画
startLoading() {
loading = Loading.service({
lock: true, // 是否锁定
text: '正在加载……', // 加载中需要显示的文字
background: 'rgba(0,0,0,.7)' // 背景颜色
})
},
// 结束加载动画
endLoading() {
// clearTimeout(timer);
if (loading) {
loading.close()
}
}
},
async deleteRole (row) {
const url = "/gov/access/govrole/del"
let params = [row.id]
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.$message({
type: "success",
message: "操作成功"
});
this.loadTable()
} else {
this.$message.error(msg)
}
computed: {
tableHeight() {
return this.$store.state.inIframe ? this.clientHeight - 360 + this.iframeHeight : this.clientHeight - 360
},
...mapGetters(['clientHeight', 'iframeHeight'])
},
//重置搜索条件
resetSearch () {
this.formData = {
name: '',//姓名
}
this.pageNo = 0
this.loadTable()
watch: {
},
handleSizeChange (val) {
this.pageSize = val
this.pageNo = 1
this.loadTable()
},
handleCurrentChange (val) {
this.pageNo = val
this.loadTable()
},
// 开启加载动画
startLoading () {
loading = Loading.service({
lock: true, // 是否锁定
text: '正在加载……', // 加载中需要显示的文字
background: 'rgba(0,0,0,.7)' // 背景颜色
})
},
// 结束加载动画
endLoading () {
// clearTimeout(timer);
if (loading) {
loading.close()
}
props: {
}
},
computed: {
tableHeight () {
return this.$store.state.inIframe ? this.clientHeight - 360 + this.iframeHeight : this.clientHeight - 360
},
...mapGetters(['clientHeight', 'iframeHeight'])
},
watch: {
},
props: {
}
}
</script>
<style lang="scss" scoped >
<style lang="scss" scoped>
@import "@/assets/scss/modules/management/epidemic.scss";
</style>

Write Preview
Loading…
Cancel
Save