403 lines
11 KiB
Vue
403 lines
11 KiB
Vue
<template>
|
|
<div class="main-container">
|
|
<div class="right_side">
|
|
<div class="content_wrap">
|
|
<div class="title_wrap">
|
|
<h2>{{ $t('role.rolemanagement') }}</h2>
|
|
</div>
|
|
<div class="page_container">
|
|
<div class="grid_wrapper">
|
|
<table>
|
|
<tr>
|
|
<!-- <th>选中</th> -->
|
|
<th>{{ $t('role.rolename') }}</th>
|
|
<th>{{ $t('role.describe') }}</th>
|
|
<th>{{ $t('role.creationdate') }}</th>
|
|
<th width="330px">{{ $t('common.operate') }}</th>
|
|
</tr>
|
|
<tr v-for="(e, i) in datalist" :key="i" :class="{'tr_selected': pkId === e.roleId}">
|
|
<!-- <td>
|
|
<div class="radio__input icon_radio_checked"><i class="icon_radio"></i></div>
|
|
</td> -->
|
|
<td @click="toCheck(e)">{{ e.name }}</td>
|
|
<td @click="toCheck(e)">{{ e.remark }}</td>
|
|
<td @click="toCheck(e)">{{ e.createTime }}</td>
|
|
<td width="330px">
|
|
<div class="row">
|
|
<button class="button button--primary grid_button" @click="showDialog('2', e)">{{ $t('button.modify') }}</button>
|
|
<button class="button button--primary grid_button" @click="showDialog('3', e)">{{ $t('button.delete') }}</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="buttons_wrapper">
|
|
<button class="button_control" @click="showDialog('1')"><p>{{ $t('role.addrole') }}</p></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<jxDialog
|
|
ref="child"
|
|
:title="title"
|
|
:type="type"
|
|
:unclick="unclick"
|
|
@toSure="toSureDialog"
|
|
@toCancle="toCancle"
|
|
>
|
|
<div v-if="type === '1' || type === '2'" class="form_wraper">
|
|
<div class="form">
|
|
<div class="form_item">
|
|
<div class="form_item__label"><i>*</i>{{ $t('role.rolename') }}</div>
|
|
<div class="form_item__content">
|
|
<!-- <input type="text" class="form_item__input" v-model="rolename" @focus="show" data-layout="normal"> -->
|
|
<keyboard-input
|
|
inputClass="form_item__input"
|
|
keyboardClass="rolename"
|
|
:value="rolename"
|
|
@inputChange="inputChange1"
|
|
@inputFocus="inputFocus"
|
|
></keyboard-input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form">
|
|
<div class="form_item allwidth">
|
|
<div class="form_item__label">{{ $t('common.remark') }}</div>
|
|
<div class="form_item__content">
|
|
<!-- <textarea v-model="remark" style="resize:none;" class="form_item__input form_item__textarea" @focus="show" data-layout="normal"></textarea> -->
|
|
<keyboard-input
|
|
inputClass="form_item__input"
|
|
keyboardClass="remark"
|
|
:value="remark"
|
|
@inputChange="inputChange2"
|
|
@inputFocus="inputFocus"
|
|
></keyboard-input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="type === '3'" class="form_wraper">{{ $t('user.question2') }}</div>
|
|
</jxDialog>
|
|
<div v-show="active1" class="dialog_wrapper">
|
|
<div class="dialog dialog_1">
|
|
<div class="dialog_header">
|
|
<span class="dialog_title">{{ pkObj.name }}</span>
|
|
</div>
|
|
<div class="dialog_body dialog_body_1">
|
|
<div class="tree_wrapper">
|
|
<div class="tree_body_container">
|
|
<el-tree
|
|
:data="tree"
|
|
show-checkbox
|
|
default-expand-all
|
|
node-key="menuId"
|
|
:default-checked-keys=checkedKeys
|
|
ref="tree"
|
|
highlight-current
|
|
:props="defaultProps">
|
|
</el-tree>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dialog_footer">
|
|
<button class="button_control button_control_s button_control_disabled mgr31" @click="toCancle1"><p>{{ $t('button.cancel') }}</p></button>
|
|
<button class="button_control button_control_s" :class="{'button--info': pkId === '' || $refs.tree.getCheckedKeys().length === 0}" :disabled="disabled" @click="toSave"><p>{{ $t('button.save') }}</p></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-show="active1" class="modal"></div>
|
|
</div>
|
|
<vue-touch-keyboard id="keyboard" :options="keyoptions" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import jxDialog from '@components/dialog.vue'
|
|
import KeyboardInput from '@components/keyboard-input'
|
|
import { sysRoleQuery, sysRoleAdd, sysRoleEdit, sysRoleDelete, menuQuery, sysRoleMenu } from '@config/getData2.js'
|
|
export default {
|
|
components: {
|
|
jxDialog,
|
|
KeyboardInput
|
|
},
|
|
data () {
|
|
return {
|
|
datalist: [],
|
|
active: false,
|
|
active1: false,
|
|
type: '',
|
|
title: '',
|
|
rolename: '',
|
|
remark: '',
|
|
tree: [],
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'title'
|
|
},
|
|
checkedKeys: [],
|
|
pkObj: {},
|
|
pkId: '',
|
|
unclick: false,
|
|
disabled: false,
|
|
visible: false,
|
|
layout: 'normal',
|
|
input: null,
|
|
keyoptions: {
|
|
useKbEvents: false,
|
|
preventClickEvent: false
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
type (val) {
|
|
switch (val) {
|
|
case '1':
|
|
this.title = '添加角色'
|
|
break
|
|
case '2':
|
|
this.title = '修改角色'
|
|
break
|
|
case '3':
|
|
this.title = ''
|
|
break
|
|
default:
|
|
this.title = ''
|
|
}
|
|
},
|
|
rolename (val) {
|
|
if ((this.type === '1' || this.type === '2') && val === '') {
|
|
this.unclick = true
|
|
} else {
|
|
this.unclick = false
|
|
}
|
|
}
|
|
},
|
|
created () {
|
|
this._sysRoleQuery()
|
|
this._menuQuery()
|
|
},
|
|
methods: {
|
|
async _sysRoleQuery () {
|
|
let res = await sysRoleQuery('0', '100')
|
|
this.pkId = ''
|
|
this.pkObj = {}
|
|
this.datalist = [...res]
|
|
},
|
|
async _menuQuery () {
|
|
let res = await menuQuery()
|
|
this.tree = [...res]
|
|
},
|
|
showDialog (type, e) {
|
|
this.type = type
|
|
this.$refs.child.active = true
|
|
switch (type) {
|
|
case '1':
|
|
this.rolename = ''
|
|
this.remark = ''
|
|
this.unclick = true
|
|
break
|
|
case '2':
|
|
this.pkObj = e
|
|
this.rolename = e.name
|
|
this.remark = e.remark
|
|
if (this.rolename === '') {
|
|
this.unclick = true
|
|
} else {
|
|
this.unclick = false
|
|
}
|
|
break
|
|
case '3':
|
|
this.pkObj = e
|
|
this.unclick = false
|
|
break
|
|
}
|
|
},
|
|
toSureDialog (type) {
|
|
switch (type) {
|
|
case '1':
|
|
this._sysRoleAdd()
|
|
break
|
|
case '2':
|
|
this._sysRoleEdit()
|
|
break
|
|
case '3':
|
|
this._sysRoleDelete()
|
|
break
|
|
}
|
|
this.hide()
|
|
},
|
|
toCancle () {
|
|
this.hide()
|
|
},
|
|
async _sysRoleAdd () {
|
|
this.$refs.child.disabled = true
|
|
if (!this.rolename) {
|
|
this.toast('角色名称不能为空')
|
|
this.$refs.child.disabled = false
|
|
return
|
|
}
|
|
try {
|
|
let res = await sysRoleAdd(this.rolename, this.remark)
|
|
if (res.code === '1') {
|
|
this._sysRoleQuery()
|
|
}
|
|
this.toast(res.desc)
|
|
this.$refs.child.active = false
|
|
this.$refs.child.disabled = false
|
|
} catch (e) {
|
|
this.$refs.child.active = false
|
|
this.$refs.child.disabled = false
|
|
}
|
|
},
|
|
async _sysRoleEdit () {
|
|
this.$refs.child.disabled = true
|
|
if (!this.rolename) {
|
|
this.toast('角色名称不能为空')
|
|
this.$refs.child.disabled = false
|
|
return
|
|
}
|
|
try {
|
|
let res = await sysRoleEdit(this.pkObj.roleId, this.rolename, this.remark)
|
|
if (res.code === '1') {
|
|
this._sysRoleQuery()
|
|
}
|
|
this.toast(res.desc)
|
|
this.$refs.child.active = false
|
|
this.$refs.child.disabled = false
|
|
} catch (e) {
|
|
this.$refs.child.active = false
|
|
this.$refs.child.disabled = false
|
|
}
|
|
},
|
|
async _sysRoleDelete () {
|
|
this.$refs.child.disabled = true
|
|
try {
|
|
let res = await sysRoleDelete([this.pkObj.roleId])
|
|
if (res.code === '1') {
|
|
this._sysRoleQuery()
|
|
}
|
|
this.toast(res.desc)
|
|
this.$refs.child.active = false
|
|
this.$refs.child.disabled = false
|
|
} catch (e) {
|
|
this.$refs.child.active = false
|
|
this.$refs.child.disabled = false
|
|
}
|
|
},
|
|
async _sysRoleMenu (arr, arr1) {
|
|
this.disabled = true
|
|
try {
|
|
let res = await sysRoleMenu(this.pkId, arr, arr1)
|
|
if (res.code === '1') {
|
|
this.toast(res.desc)
|
|
this.pkId = ''
|
|
this.checkedKeys = []
|
|
this._sysRoleQuery()
|
|
} else {
|
|
this.toast(res.desc)
|
|
this.pkId = ''
|
|
this.checkedKeys = []
|
|
}
|
|
this.disabled = false
|
|
} catch (e) {
|
|
this.disabled = false
|
|
this.pkId = ''
|
|
this.checkedKeys = []
|
|
}
|
|
},
|
|
toSave () {
|
|
if (!this.pkId) {
|
|
return
|
|
}
|
|
this.active1 = false
|
|
let arr1 = this.$refs.tree.getCheckedKeys()
|
|
let arr2 = this.$refs.tree.getHalfCheckedKeys()
|
|
arr2.map((e, i) => {
|
|
if (e === this.tree[0].menuId) {
|
|
arr2.splice(i, 1)
|
|
}
|
|
})
|
|
if (arr1.length === 0) {
|
|
return
|
|
}
|
|
let arr3 = arr2.concat(arr1)
|
|
let arr4 = []
|
|
arr3.map(el => {
|
|
arr4.push({menuId: el})
|
|
})
|
|
this._sysRoleMenu(arr4, arr1)
|
|
},
|
|
toCheck (e) {
|
|
this.pkId = this.pkId === e.roleId ? '' : e.roleId
|
|
this.pkObj = this.pkId === e.roleId ? e : []
|
|
this.active1 = this.pkId === e.roleId
|
|
this.checkedKeys = [...e.menus1]
|
|
this.$nextTick(() => {
|
|
this.$refs.tree.setCheckedKeys(this.checkedKeys)
|
|
})
|
|
},
|
|
toCancle1 () {
|
|
this.active1 = false
|
|
this.pkId = ''
|
|
this.checkedKeys = []
|
|
},
|
|
show (e) {
|
|
this.input = e.target
|
|
this.layout = e.target.dataset.layout
|
|
if (!this.visible) {
|
|
this.visible = true
|
|
}
|
|
},
|
|
hide () {
|
|
this.visible = false
|
|
},
|
|
accept () {
|
|
this.hide()
|
|
},
|
|
next () {
|
|
let inputs = document.querySelectorAll('input')
|
|
let found = false;
|
|
[].forEach.call(inputs, (item, i) => {
|
|
if (!found && item === this.input && i < inputs.length - 1) {
|
|
found = true
|
|
this.$nextTick(() => {
|
|
inputs[i + 1].focus()
|
|
})
|
|
}
|
|
})
|
|
if (!found) {
|
|
this.input.blur()
|
|
this.hide()
|
|
}
|
|
},
|
|
inputChange1 (val) {
|
|
this.rolename = val
|
|
},
|
|
inputChange2 (val) {
|
|
this.remark = val
|
|
},
|
|
inputFocus () {
|
|
this.visible = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import '~@style/mixin'
|
|
.page_container
|
|
padding 31px 31px 31px 45px
|
|
.grid_wrapper
|
|
height calc(100% - 122px)
|
|
overflow-y auto
|
|
.dialog_1
|
|
height 892px
|
|
.dialog_body_1
|
|
height 618px
|
|
.tree_wrapper
|
|
_wh(100%, 100%)
|
|
overflow-y auto
|
|
.mgr31
|
|
margin-right 31px
|
|
</style>
|