<template>
|
<div class='offical-authority'>
|
<p class="title"> 职务管理 </p>
|
|
<el-card>
|
<el-row>
|
<el-button class="create-button"
|
type="primary" @click='createAuthority'>新增职务</el-button>
|
</el-row>
|
<el-table :data="rightsList" border stripe max-height="600px">
|
<el-table-column label="权限名称" prop="Name"></el-table-column>
|
<el-table-column label="备注" prop="Comment">
|
<template slot-scope="scope">
|
<div>{{scope.row.Comment ?scope.row.Comment:'--'}}</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="IsEnabled"
|
label="状态">
|
<template slot-scope="scope">
|
<div>{{scope.row.IsEnabled ?'启用':'禁用'}}</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="operation"
|
label="操作">
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click='addAuthority(scope.row.Id)'>配置权限</el-button>
|
<el-button type="text" size="small" @click='editAuthority(scope.row)'>编辑职务</el-button>
|
<el-button type="text" size="small" @click='deleteAuthority(scope.row.Id)'>删除职务</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
<!-- 导航新增编辑弹出框 -->
|
<el-dialog
|
:visible.sync="authorityDialog"
|
:title="addTitle"
|
:before-close="cancelDialog"
|
width="40%">
|
<el-form
|
ref="authForm"
|
:model="authForm"
|
:rules="authRules"
|
label-width="80px"
|
class="login-form"
|
auto-complete="on"
|
label-position="left">
|
<el-form-item label="职务名称" prop='Name'>
|
<el-input
|
v-model="authForm.Name"
|
placeholder="请输入职务名称"/>
|
</el-form-item>
|
<el-form-item label="职务类型" prop='PositionType'>
|
<el-select v-model="authForm.PositionType" placeholder="请选择职务类型">
|
<el-option
|
v-for="item in positionOption"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="备注" prop='Comment'>
|
<el-input
|
type='textarea'
|
v-model="authForm.Comment"
|
placeholder="请输入备注"/>
|
</el-form-item>
|
<el-form-item label="启用状态" prop='IsEnabled'>
|
<el-switch v-model="authForm.IsEnabled"></el-switch>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="cancelDialog">取 消</el-button>
|
<el-button
|
type="primary"
|
@click="submitDialog('authForm')">确 定</el-button>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
<!-- 设置权限弹出框 -->
|
<el-dialog
|
:visible.sync="setAuthorityDialog"
|
:title="addTitle"
|
:before-close="cancelSetDialog"
|
width="50%">
|
<el-form
|
ref="setForm"
|
:model="setForm"
|
:rules="setRules"
|
class="set-form"
|
auto-complete="on"
|
label-position="left">
|
<el-form-item
|
v-for="(item, index) in setList"
|
:key="index"
|
:prop="item.ModuleName"
|
class="setFormItem">
|
<div
|
slot="label"
|
style="display: inline-block;">
|
<div style="margin:5px 0;font-size:16px;word-wrap:break-word;word-break:break-all;font-weight: 600;">
|
{{ item.ModuleName }}
|
</div>
|
</div>
|
<template>
|
<el-checkbox :indeterminate="item.isIndeterminate" v-model="item.isCheck" @change="handleCheckTitle(item.isCheck, index)" class='allChecked' :disabled="item.Children.length === 0">全选</el-checkbox>
|
<el-checkbox-group v-model="item.checkedData" @change="checkItem(item.checkedData, index)">
|
<el-checkbox v-for="(cu, index) in item.Children" :label="cu.Id" :key="index">{{cu.ModuleName}}</el-checkbox>
|
</el-checkbox-group>
|
</template>
|
</el-form-item>
|
</el-form>
|
<div class="handle-bar">
|
<el-button @click="cancelSetDialog" class="handle-button">取 消</el-button>
|
<el-button
|
type="primary"
|
@click="submitDialog('setForm')" class="handle-button">确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { GetPositionList, AddPosition, DeletePosition, UpdatePosition, GetPositionModules, UpdatePositionModules } from '@/api/systemManagement/officalAuthority'
|
// import { GetSysModuleList } from '@/api/moduleManage/moduleManage'
|
export default {
|
name: 'offcialAuthority',
|
data () {
|
return {
|
rightsList: [],
|
authorityDialog: false,
|
isCreate: false,
|
authForm: {
|
Name: '',
|
PositionType: 2,
|
Comment: '',
|
IsEnabled: true
|
},
|
positionOption: [
|
{id: 1, name: '总经理'},
|
{id: 2, name: '人事'},
|
{id: 3, name: '财务'},
|
{id: 4, name: '商务'},
|
{id: 5, name: '销售'},
|
{id: 6, name: '技术'},
|
{id: 7, name: '管理员'}
|
],
|
authRules: {
|
Name: [
|
{ required: true, trigger: 'blur', message: '请输入职务名称' }
|
],
|
PositionType: [
|
{ required: true, trigger: 'blur', message: '请选择职务类型' }
|
]
|
},
|
addTitle: '新增',
|
setAuthorityDialog: false,
|
setForm: {},
|
setRules: {},
|
setList: [],
|
positionId: ''
|
}
|
},
|
created () {
|
this.getRightsList()
|
},
|
methods: {
|
getSetsList (id) {
|
// GetSysModuleList()
|
GetPositionModules({Id: id}).then(res => {
|
if (res.data.ErrorCode === 200 && res.data.Result) {
|
this.setList = res.data.Result.Modules
|
let checkedModule = res.data.Result.PositionModules
|
for (let i in this.setList) {
|
this.setList[i]['isIndeterminate'] = false
|
this.setList[i]['isCheck'] = false
|
this.setList[i]['checkedData'] = []
|
if (checkedModule && checkedModule.length > 0) {
|
for (let h in checkedModule) {
|
if (this.setList[i].Id === checkedModule[h].Id) {
|
// 已选中的数组
|
let checkedArr = checkedModule[h].PositionModuleOperations
|
if (checkedArr && checkedArr.length > 0) {
|
this.setList[i]['isIndeterminate'] = checkedArr.length > 0 && checkedArr.length < this.setList[i].Children.length
|
|
this.setList[i]['isCheck'] = checkedArr.length === this.setList[i].Children.length
|
let arr = []
|
for (let j = 0; j < checkedArr.length; j++) {
|
arr[j] = checkedArr[j]['Id']
|
}
|
this.setList[i]['checkedData'] = arr
|
}
|
}
|
}
|
}
|
}
|
|
console.log(this.setList)
|
} else {
|
this.$message.error(res.data.Message)
|
}
|
})
|
},
|
checkItem (val, index) {
|
console.log(val, index)
|
let checkedCount = val.length
|
this.setList[index].isCheck =
|
checkedCount === this.setList[index].Children.length
|
|
this.setList[index].isIndeterminate =
|
checkedCount > 0 && checkedCount < this.setList[index].Children.length
|
this.$forceUpdate()
|
},
|
handleCheckTitle (val, index) {
|
console.log(val, index)
|
let arr = []
|
const re = this.setList[index].Children
|
// 全选
|
if (val) {
|
for (let i = 0; i < re.length; i++) {
|
arr[i] = re[i]['Id']
|
}
|
}
|
this.setList[index].checkedData = arr
|
this.setList[index].isIndeterminate = false
|
this.$forceUpdate()
|
},
|
createAuthority () {
|
this.isCreate = true
|
this.addTitle = '添加职务'
|
this.authorityDialog = true
|
},
|
addAuthority (id) {
|
this.isCreate = false
|
this.addTitle = '配置权限'
|
this.setAuthorityDialog = true
|
this.positionId = id
|
this.getSetsList(id)
|
},
|
deleteAuthority (id) {
|
this.$confirm('确定删除?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
DeletePosition({'Id': id}).then(res => {
|
console.log(res)
|
if (res.data.ErrorCode === 200) {
|
this.$message.success(res.data.Message)
|
this.getRightsList()
|
} else {
|
this.$message.error(res.data.Message)
|
}
|
})
|
})
|
.catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
})
|
})
|
},
|
editAuthority (row) {
|
this.isCreate = false
|
this.authForm = {
|
'Id': row.Id,
|
'Name': row.Name,
|
'PositionType': row.PositionType,
|
'Comment': row.Comment,
|
'IsEnabled': row.IsEnabled
|
}
|
this.authorityDialog = true
|
},
|
submitDialog (formName) {
|
this.$refs[formName].validate(valid => {
|
if (!valid) return
|
if (formName === 'authForm') {
|
console.log(this.authForm)
|
if (this.isCreate) {
|
AddPosition(this.authForm).then(res => {
|
console.log(res)
|
if (res.data.ErrorCode === 200) {
|
this.$message.success(res.data.Message)
|
this.getRightsList()
|
this.authorityDialog = false
|
} else {
|
this.$message.error(res.data.Message)
|
}
|
})
|
} else {
|
UpdatePosition(this.authForm).then(res => {
|
console.log(res)
|
if (res.data.ErrorCode === 200) {
|
this.$message.success(res.data.Message)
|
this.getRightsList()
|
this.authorityDialog = false
|
} else {
|
this.$message.error(res.data.Message)
|
}
|
})
|
}
|
}
|
if (formName === 'setForm') {
|
let params = {}
|
params.PositionId = this.positionId
|
let checkedArray = []
|
for (let i in this.setList) {
|
if (this.setList[i].checkedData.length > 0) {
|
let arr = this.setList[i].checkedData
|
let Ids = []
|
for (let j in arr) {
|
Ids.push({'Id': arr[j]})
|
}
|
checkedArray.push({'Id': this.setList[i].Id, 'ModuleOperations': Ids})
|
// checkedArray.push({'Id': this.setList[i].Id, 'ModuleOperations': this.setList[i].checkedData})
|
}
|
}
|
console.log(checkedArray)
|
params.ModifyModules = checkedArray
|
UpdatePositionModules(params)
|
.then(res => {
|
this.getRightsList()
|
this.$message.success('编辑成功')
|
this.setAuthorityDialog = false
|
})
|
.catch(() => {
|
})
|
}
|
})
|
},
|
// 关闭新增或编辑
|
cancelDialog () {
|
this.$refs.authForm.resetFields()
|
this.authForm = {
|
Name: '',
|
PositionType: 2,
|
Comment: '',
|
IsEnabled: true
|
}
|
this.authorityDialog = false
|
},
|
cancelSetDialog () {
|
this.setAuthorityDialog = false
|
},
|
getRightsList () {
|
this.rightsList = [{authName: 'abc', path: '', level: '0'}]
|
GetPositionList().then(res => {
|
console.log(res)
|
if (res.data.ErrorCode === 200 && res.data.Result) {
|
this.rightsList = res.data.Result
|
} else {
|
this.$message.error(res.data.Message)
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang='scss' scoped>
|
.offical-authority{}
|
|
.title {
|
font-size: 18px;
|
height: 40px;
|
line-height: 40px;
|
margin: 10px 0;
|
color: #333;
|
padding: 0 20px;
|
}
|
.nav-dialog-div {
|
margin-bottom: 12px;
|
}
|
.checkedBox{
|
display:flex;
|
flex-direction:row;
|
}
|
.allChecked{
|
margin-right:20px;
|
}
|
.dialogLabel{
|
font-size: 16px;
|
}
|
.create-button{
|
margin-bottom: 20px;
|
float: right;
|
}
|
.set-form{
|
height: 550px;
|
overflow: auto;
|
position: relative;
|
.setFormItem{
|
display: flex;
|
flex-direction: column;
|
margin-left: 20px;
|
}
|
}
|
.setFormItem.el-form-item /deep/ .el-form-item__content{
|
display: flex;
|
}
|
.setFormItem.el-form-item /deep/ .el-form-item{
|
margin-bottom: 0;
|
}
|
.setFormItem.el-form-item /deep/ .el-checkbox__label{
|
font-size: 14px;
|
}
|
.handle-bar{
|
padding-top: 20px;
|
padding-left: 40%;
|
width: 100%;
|
height: 40px;
|
.handle-button {
|
padding: 8px 12px;
|
border-radius: 3px;
|
}
|
}
|
</style>
|
