导航、车辆、系统、弹窗、登录
This commit is contained in:
@@ -1,67 +1,41 @@
|
||||
<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 class="content_wrap">
|
||||
<div class="title_wrap">
|
||||
<h2>角色管理</h2>
|
||||
</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 class="page_container">
|
||||
<div class="grid_wrapper">
|
||||
<table>
|
||||
<tr>
|
||||
<!-- <th>选中</th> -->
|
||||
<th>角色名称</th>
|
||||
<th>描述</th>
|
||||
<th>创建日期</th>
|
||||
<th width="330px">操作</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 width="330px">
|
||||
<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_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 class="buttons_wrapper">
|
||||
<button class="button_control" @click="showDialog('1')"><p>新增角色</p></button>
|
||||
</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"
|
||||
@@ -90,6 +64,38 @@
|
||||
</div>
|
||||
<div v-if="type === '3'" class="form_wraper">确定删除该用户吗？</div>
|
||||
</jxDialog>
|
||||
<div v-show="active1" class="dialog_wrapper">
|
||||
<div class="dialog dialog_1">
|
||||
<div class="dialog_header">
|
||||
<span class="dialog_title">角色名称</span>
|
||||
</div>
|
||||
<div class="dialog_body dialog_body_1">
|
||||
<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="dialog_footer">
|
||||
<button class="button_control button_control_s button_control_disabled mgr31" @click="toCancle1"><p>取消</p></button>
|
||||
<button class="button_control button_control_s" :class="{'button--info': pkId === '' || $refs.tree.getCheckedKeys().length === 0}" :disabled="disabled" @click="toSave"><p>保存</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>
|
||||
@@ -106,6 +112,7 @@ export default {
|
||||
return {
|
||||
datalist: [],
|
||||
active: false,
|
||||
active1: false,
|
||||
type: '',
|
||||
title: '',
|
||||
rolename: '',
|
||||
@@ -289,6 +296,8 @@ export default {
|
||||
if (!this.pkId) {
|
||||
return
|
||||
}
|
||||
this.active1 = false
|
||||
this.pkId = ''
|
||||
let arr1 = this.$refs.tree.getCheckedKeys()
|
||||
let arr2 = this.$refs.tree.getHalfCheckedKeys()
|
||||
arr2.map((e, i) => {
|
||||
@@ -308,6 +317,7 @@ export default {
|
||||
},
|
||||
toCheck (e) {
|
||||
this.pkId = this.pkId === e.roleId ? '' : e.roleId
|
||||
this.active1 = this.pkId === e.roleId
|
||||
this.checkedKeys = this.pkId === e.roleId ? e.menus1 : []
|
||||
this.tree.map(e => {
|
||||
this.$refs.tree.setChecked(e, false, true)
|
||||
@@ -318,6 +328,10 @@ export default {
|
||||
this.checkedKeys = []
|
||||
}
|
||||
},
|
||||
toCancle1 () {
|
||||
this.active1 = false
|
||||
this.pkId = ''
|
||||
},
|
||||
show (e) {
|
||||
this.input = e.target
|
||||
this.layout = e.target.dataset.layout
|
||||
@@ -353,32 +367,18 @@ export default {
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.row_2
|
||||
_fj()
|
||||
_wh(100%, calc(100% - 50px))
|
||||
.page_container
|
||||
padding 31px 31px 31px 45px
|
||||
.grid_wrapper
|
||||
_wh(calc(50% - 10px), 100%)
|
||||
height calc(100% - 122px)
|
||||
overflow-y auto
|
||||
.grid_wrapper table td
|
||||
white-space normal
|
||||
.dialog_1
|
||||
height 892px
|
||||
.dialog_body_1
|
||||
height 618px
|
||||
.tree_wrapper
|
||||
_wh(calc(50% - 10px), 100%)
|
||||
_wh(100%, 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
|
||||
.mgr31
|
||||
margin-right 31px
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user