This commit is contained in:
sc
parent
d4a27b99f2
commit
0e9f1bf06b
|
|
@ -15,5 +15,5 @@
|
|||
.el-drawer__body {overflow: auto;}
|
||||
.el-popconfirm__main {margin: 14px 0;}
|
||||
.el-card__header {border-bottom: 0}
|
||||
.el-tree-node__content {height:36px;}
|
||||
.el-tree.menu .el-tree-node__content {height:36px;}
|
||||
.el-input-number__decrease, .el-input-number__increase {top:2px;}
|
||||
|
|
@ -22,6 +22,14 @@
|
|||
data() {
|
||||
return {
|
||||
activities: [
|
||||
{
|
||||
content: [
|
||||
"[优化] 控制台自由布局开关",
|
||||
"[优化] 增加菜单管理新增和删除",
|
||||
'[优化] 角色管理增加权限配置'
|
||||
],
|
||||
timestamp: '2021-05-17'
|
||||
},
|
||||
{
|
||||
content: [
|
||||
"[新增] 组件sortablejs",
|
||||
|
|
|
|||
|
|
@ -1,14 +1,17 @@
|
|||
<template>
|
||||
<div class="diy-grid-setting" @click.stop="setting">
|
||||
<i class="el-icon-setting"></i>
|
||||
</div>
|
||||
<div class="diy-grid-layout">
|
||||
<el-row :gutter="15">
|
||||
<el-col v-for="(item, index) in grid.layout" v-bind:key="index" :md="item" :xs="24">
|
||||
<draggable v-model="grid.copmsList[index]" :disabled="false" animation="200" handle=".el-card__header" group="people" @end="end" item-key="com">
|
||||
<draggable v-model="grid.copmsList[index]" :disabled="!isDiy" animation="200" handle=".el-card__header" group="people" @end="end" item-key="com">
|
||||
<template #item="{ element }">
|
||||
<div>
|
||||
<el-card shadow="hover" style="margin-bottom:15px;">
|
||||
<el-card shadow="hover" style="margin-bottom:15px;" :class="isDiy?'move':''">
|
||||
<template #header>
|
||||
<span>{{element.title}}</span>
|
||||
<el-dropdown trigger="click">
|
||||
<el-dropdown trigger="click" v-if="isDiy">
|
||||
<span class="el-dropdown-link">
|
||||
<i class="el-icon-menu"></i>
|
||||
</span>
|
||||
|
|
@ -86,6 +89,15 @@
|
|||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-drawer title="布局设置" v-model="settingDialog" :size="300" destroy-on-close>
|
||||
<el-form ref="form" label-width="120px" label-position="left" style="padding:0 20px;">
|
||||
<el-form-item label="自由拖拽">
|
||||
<el-switch v-model="isDiy"></el-switch>
|
||||
</el-form-item>
|
||||
<el-divider></el-divider>
|
||||
</el-form>
|
||||
</el-drawer>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
|
@ -102,6 +114,8 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
settingDialog: false,
|
||||
isDiy: false,
|
||||
allComps: allComps,
|
||||
allCompsList: [],
|
||||
showPush: false,
|
||||
|
|
@ -211,17 +225,24 @@
|
|||
backDefaul(){
|
||||
this.grid = JSON.parse(JSON.stringify(this.defaultGrid));
|
||||
this.$TOOL.data.remove("grid");
|
||||
},
|
||||
//设置
|
||||
setting(){
|
||||
this.settingDialog = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.diy-grid-setting {position: fixed;width:40px;height:40px;border-radius: 3px 0 0 3px;bottom:40px;right:0px;z-index: 100;background: #409EFF;display: flex;flex-direction: column;align-items: center;justify-content: center;cursor: pointer;}
|
||||
.diy-grid-setting i {font-size: 18px;color: #fff;}
|
||||
|
||||
.diy-grid-layout .el-card.move .el-card__header {cursor: move;}
|
||||
.diy-grid-layout .el-card__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: move;
|
||||
}
|
||||
.diy-grid-layout .el-card__header .el-dropdown-link {
|
||||
color: #999;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<el-input placeholder="输入关键字进行过滤" v-model="dicFilterText" clearable></el-input>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<el-tree ref="dic" node-key="id" :data="dicList" :props="dicProps" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="dicFilterNode" @node-click="dicClick">
|
||||
<el-tree ref="dic" class="menu" node-key="id" :data="dicList" :props="dicProps" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="dicFilterNode" @node-click="dicClick">
|
||||
<template #default="{node, data}">
|
||||
<span class="custom-tree-node">
|
||||
<span class="label">{{ node.label }}</span>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<el-input placeholder="输入关键字进行过滤" v-model="menuFilterText" clearable></el-input>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<el-tree ref="menu" node-key="name" :data="menuList" :props="menuProps" highlight-current :expand-on-click-node="false" check-strictly show-checkbox :filter-node-method="menuFilterNode" @node-click="menuClick">
|
||||
<el-tree ref="menu" class="menu" node-key="name" :data="menuList" :props="menuProps" highlight-current :expand-on-click-node="false" check-strictly show-checkbox :filter-node-method="menuFilterNode" @node-click="menuClick">
|
||||
|
||||
<template #default="{node, data}">
|
||||
<span class="custom-tree-node">
|
||||
|
|
@ -19,6 +19,10 @@
|
|||
|
||||
</el-tree>
|
||||
</el-main>
|
||||
<el-footer style="height:51px;">
|
||||
<el-button type="primary" size="mini" icon="el-icon-plus" @click="add()"></el-button>
|
||||
<el-button type="danger" size="mini" plain icon="el-icon-delete" @click="delMenu"></el-button>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
|
|
@ -30,6 +34,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
let newMenuIndex = 1;
|
||||
import save from './save'
|
||||
|
||||
export default {
|
||||
|
|
@ -74,8 +79,41 @@
|
|||
return targetText.indexOf(value) !== -1;
|
||||
},
|
||||
//增加
|
||||
add(node, data){
|
||||
console.log(node, data);
|
||||
add(node){
|
||||
var newMenuName = "未命名" + newMenuIndex++;
|
||||
var newMenuData = {
|
||||
name: newMenuName,
|
||||
path: "",
|
||||
component: "",
|
||||
meta:{
|
||||
title: newMenuName,
|
||||
type: "menu"
|
||||
}
|
||||
}
|
||||
if(node){
|
||||
this.$refs.menu.append(newMenuData, node)
|
||||
var lastNode = node.childNodes[node.childNodes.length-1]
|
||||
this.$refs.menu.setCurrentKey(lastNode.data.name)
|
||||
var pid = node.data.name;
|
||||
this.$refs.save.setData(newMenuData, pid)
|
||||
}else{
|
||||
this.$refs.menu.append(newMenuData)
|
||||
var newNode = this.menuList[this.menuList.length-1]
|
||||
this.$refs.menu.setCurrentKey(newNode.name)
|
||||
this.$refs.save.setData(newMenuData)
|
||||
}
|
||||
|
||||
},
|
||||
//删除菜单
|
||||
delMenu(){
|
||||
var CheckedNodes = this.$refs.menu.getCheckedNodes()
|
||||
if(CheckedNodes.length == 0){
|
||||
this.$message.warning("请选择需要删除的项")
|
||||
return false;
|
||||
}
|
||||
CheckedNodes.forEach(item => {
|
||||
this.$refs.menu.remove(item)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -83,6 +121,8 @@
|
|||
|
||||
<style scoped>
|
||||
.custom-tree-node {display: flex;flex: 1;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 24px;height:100%;}
|
||||
.custom-tree-node .label {display: flex;align-items: center;;height: 100%;}
|
||||
.custom-tree-node .label .el-tag {margin-left: 5px;}
|
||||
.custom-tree-node .do {display: none;}
|
||||
.custom-tree-node .do i {margin-left:5px;color: #999;padding:5px;}
|
||||
.custom-tree-node .do i:hover {color: #333;}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="left-panel">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
|
||||
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
|
||||
<el-button type="primary" plain :disabled="selection.length==0">权限设置</el-button>
|
||||
<el-button type="primary" plain :disabled="selection.length!=1" @click="permission">权限设置</el-button>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<div class="right-panel-search">
|
||||
|
|
@ -43,15 +43,25 @@
|
|||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="角色权限设置" v-model="permissionDialogVisible" :width="400" destroy-on-close>
|
||||
<permission-dialog ref="permissionDialog"></permission-dialog>
|
||||
<template #footer>
|
||||
<el-button @click="permissionDialogVisible=false" >取 消</el-button>
|
||||
<el-button type="primary" @click="savePermission()" :loading="isPermissionSaveing">保 存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import saveDialog from './save'
|
||||
import permissionDialog from './permission'
|
||||
|
||||
export default {
|
||||
name: 'role',
|
||||
components: {
|
||||
saveDialog
|
||||
saveDialog,
|
||||
permissionDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -69,6 +79,9 @@
|
|||
},
|
||||
isSaveing: false,
|
||||
|
||||
//权限
|
||||
permissionDialogVisible: false,
|
||||
isPermissionSaveing: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -146,6 +159,14 @@
|
|||
selectionChange(selection){
|
||||
this.selection = selection;
|
||||
},
|
||||
//权限设置
|
||||
permission(){
|
||||
this.permissionDialogVisible = true;
|
||||
},
|
||||
savePermission(){
|
||||
this.$message.success("操作成功")
|
||||
this.permissionDialogVisible = false;
|
||||
},
|
||||
//搜索
|
||||
upsearch(){
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<el-tabs tab-position="left" style="height: 280px;">
|
||||
<el-tab-pane label="菜单权限">
|
||||
<div class="treeMain">
|
||||
<el-tree ref="menu" node-key="name" :data="menu.list" :default-checked-keys="menu.checked" :props="menu.props" show-checkbox></el-tree>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="部门权限">
|
||||
<div class="treeMain">
|
||||
<el-tree ref="group" node-key="name" :data="group.list" :default-checked-keys="group.checked" :props="group.props" show-checkbox></el-tree>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="类型权限">
|
||||
<div class="treeMain">
|
||||
<el-tree ref="type" node-key="name" :data="type.list" :default-checked-keys="type.checked" :props="type.props" show-checkbox></el-tree>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
menu: {
|
||||
list: [],
|
||||
checked: ["test", "system", "user", "role"],
|
||||
props: {
|
||||
label: (data)=>{
|
||||
return data.meta.title
|
||||
}
|
||||
}
|
||||
},
|
||||
group: {
|
||||
list: [],
|
||||
checked: [],
|
||||
props: {}
|
||||
},
|
||||
type: {
|
||||
list: [],
|
||||
checked: [],
|
||||
props: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getMenu();
|
||||
this.getGroup();
|
||||
this.getType();
|
||||
},
|
||||
methods: {
|
||||
async getMenu(){
|
||||
var res = await this.$API.menu.list.get();
|
||||
this.menu.list = res.data;
|
||||
},
|
||||
getGroup(){
|
||||
this.group.list = [
|
||||
{label: 'JL00'},
|
||||
{label: 'LP01'},
|
||||
{label: 'LP07'},
|
||||
{label: 'SL01'},
|
||||
{label: 'TL06'},
|
||||
{label: 'TL09'},
|
||||
{label: 'YP07'}
|
||||
];
|
||||
},
|
||||
getType(){
|
||||
this.type.list = [
|
||||
{label: '原料采购'},
|
||||
{label: '厂内互供'},
|
||||
{label: '炼销订单'},
|
||||
{label: '化工统销订单'},
|
||||
{label: '移库单'},
|
||||
{label: '自销订单'},
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.treeMain {height:280px;overflow: auto;border: 1px solid #dcdfe6;margin-bottom: 10px;}
|
||||
</style>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<el-tree ref="group" node-key="id" :data="group" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
|
||||
<el-tree ref="group" class="menu" node-key="id" :data="group" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
|
|
|
|||
Loading…
Reference in New Issue