389 lines
10 KiB
Vue
389 lines
10 KiB
Vue
<template>
|
||
<div class="main-container">
|
||
<div class="right_side">
|
||
<div class="buttons_wrapper">
|
||
<div class="row">
|
||
<button class="button button--primary" @click="showDialog('1')">新增角色</button>
|
||
</div>
|
||
</div>
|
||
<div class="row_2">
|
||
<div class="grid_wrapper">
|
||
<table>
|
||
<tr>
|
||
<!-- <th>选中</th> -->
|
||
<th width="20%">角色名称</th>
|
||
<th width="20%">描述</th>
|
||
<th width="30%">创建日期</th>
|
||
<th width="30%">操作</th>
|
||
</tr>
|
||
<tr v-for="(e, i) in datalist" :key="i" :class="{'tr_selected': pkId === e.roleId}" @click="toCheck(e)">
|
||
<!-- <td>
|
||
<div class="radio__input icon_radio_checked"><i class="icon_radio"></i></div>
|
||
</td> -->
|
||
<td>{{ e.name }}</td>
|
||
<td>{{ e.remark }}</td>
|
||
<td>{{ e.createTime }}</td>
|
||
<td>
|
||
<div class="row">
|
||
<button class="button button--primary grid_button" @click="showDialog('2', e)">修改</button>
|
||
<button class="button button--primary grid_button" @click="showDialog('3', e)">删除</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div class="tree_wrapper">
|
||
<div class="tree_header">
|
||
<span>角色名称</span>
|
||
<button class="button button--primary grid_button button1" :class="{'button--info': pkId === '' || $refs.tree.getCheckedKeys().length === 0}" :disabled="disabled" @click="toSave">保存</button>
|
||
</div>
|
||
<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="row_2">
|
||
<div v-for="e in tree" :key="e.menuId">
|
||
<div>{{e.title+e.menuId}}</div>
|
||
<div v-for="el in e.children" :key="el.menuId">
|
||
<div>{{el.title+el.menuId}}</div>
|
||
<div v-for="ell in el.children" :key="ell.menuId">
|
||
<div>{{ell.title+ell.menuId}}</div>
|
||
</div>
|
||
</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>角色名称</div>
|
||
<div class="form_item__content">
|
||
<input type="text" class="form_item__input" v-model="rolename" @focus="show" data-layout="normal">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form">
|
||
<div class="form_item allwidth">
|
||
<div class="form_item__label">备注</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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="type === '3'" class="form_wraper">确定删除该用户吗？</div>
|
||
</jxDialog>
|
||
</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 { sysRoleQuery, sysRoleAdd, sysRoleEdit, sysRoleDelete, menuQuery, sysRoleMenu } from '@config/getData2.js'
|
||
export default {
|
||
components: {
|
||
jxDialog
|
||
},
|
||
data () {
|
||
return {
|
||
datalist: [],
|
||
active: 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()
|
||
},
|
||
mounted () {
|
||
// document.getElementById('body-conatiner').style.backgroundImage = '../../../images/new/bg.png'
|
||
document.getElementById('body-conatiner').style.marginTop = '10px'
|
||
},
|
||
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.tree.map(e => {
|
||
this.$refs.tree.setChecked(e, false, true)
|
||
})
|
||
this._sysRoleQuery()
|
||
} else {
|
||
this.toast(res.desc)
|
||
}
|
||
this.disabled = false
|
||
} catch (e) {
|
||
this.disabled = false
|
||
}
|
||
},
|
||
toSave () {
|
||
if (!this.pkId) {
|
||
return
|
||
}
|
||
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.checkedKeys = this.pkId === e.roleId ? e.menus1 : []
|
||
this.tree.map(e => {
|
||
this.$refs.tree.setChecked(e, false, true)
|
||
})
|
||
if (this.pkId === e.roleId) {
|
||
this.checkedKeys = e.menus1
|
||
} else {
|
||
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()
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
@import '~@style/mixin'
|
||
.row_2
|
||
_fj()
|
||
_wh(100%, calc(100% - 50px))
|
||
.grid_wrapper
|
||
_wh(calc(50% - 10px), 100%)
|
||
overflow-y auto
|
||
.grid_wrapper table td
|
||
white-space normal
|
||
.tree_wrapper
|
||
_wh(calc(50% - 10px), 100%)
|
||
overflow-y auto
|
||
.tree_header
|
||
position sticky
|
||
top -1px
|
||
z-index 99
|
||
background #d7d7d7
|
||
_font(14px, 23px, #323232, bold, center)
|
||
padding 12px 10px
|
||
.button1
|
||
position absolute
|
||
right 10px
|
||
top 50%
|
||
transform translateY(-50%)
|
||
.tree_body_container
|
||
height calc(100% - 47px)
|
||
padding 12px 10px
|
||
.grid_wrapper table .row .button
|
||
margin 5px
|
||
</style>
|