Update gridLayout.vue
This commit is contained in:
sakuya
parent
8ba898dffc
commit
32b9c037fe
|
|
@ -9,17 +9,16 @@
|
||||||
<el-card shadow="hover" style="margin-bottom:15px;">
|
<el-card shadow="hover" style="margin-bottom:15px;">
|
||||||
<template #header>
|
<template #header>
|
||||||
<span>{{element.title}}</span>
|
<span>{{element.title}}</span>
|
||||||
<el-dropdown>
|
<el-dropdown trigger="click">
|
||||||
<span class="el-dropdown-link">
|
<span class="el-dropdown-link">
|
||||||
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
|
<i class="el-icon-menu"></i>
|
||||||
</span>
|
</span>
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<el-dropdown-menu>
|
<el-dropdown-menu>
|
||||||
<el-dropdown-item @click="refresh(element)">刷新</el-dropdown-item>
|
<el-dropdown-item @click="push()">添加组件</el-dropdown-item>
|
||||||
<el-dropdown-item @click="remove(element)">隐藏</el-dropdown-item>
|
<el-dropdown-item @click="set()">分栏设置</el-dropdown-item>
|
||||||
<el-dropdown-item @click="push()" divided>添加组件</el-dropdown-item>
|
|
||||||
<el-dropdown-item>分栏设置</el-dropdown-item>
|
|
||||||
<el-dropdown-item @click="backDefaul()">恢复默认</el-dropdown-item>
|
<el-dropdown-item @click="backDefaul()">恢复默认</el-dropdown-item>
|
||||||
|
<el-dropdown-item @click="remove(element)" divided>移除</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
</template>
|
</template>
|
||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
|
|
@ -33,25 +32,56 @@
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-dialog title="添加组件" v-model="showPush" :width="400" destroy-on-close :append-to-body='true'>
|
<el-dialog title="添加组件" v-model="showPush" :width="400" :before-close="closePush" destroy-on-close :append-to-body='true'>
|
||||||
<el-alert title="添加的元素自动会添加至最左侧分栏的最后,请勿添加过多的组件导致系统运行缓慢" type="warning" show-icon></el-alert>
|
<el-alert title="添加的元素自动会添加至最左侧" type="warning" show-icon style="margin-bottom:20px;"></el-alert>
|
||||||
<div style="margin-top: 15px;">
|
<el-form :model="pushForm" ref="pushForm" :rules="rules" label-width="0">
|
||||||
<el-select v-model="selectComps" filterable clearable placeholder="请选择组件" style="width: 100%;">
|
<el-form-item prop="selectComps">
|
||||||
<el-option v-for="(item,key) in allComps" :key="key" :label="item.title" :value="key">
|
<el-select v-model="pushForm.selectComps" value-key="title" filterable clearable placeholder="请选择组件" style="width: 100%;">
|
||||||
<span style="float: left">{{ item.title }}</span>
|
<el-option v-for="item in allCompsList" :key="item.com" :label="item.title" :value="item" :disabled="item.disabled">
|
||||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ key }}</span>
|
<span style="float: left">{{ item.title }}</span>
|
||||||
</el-option>
|
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.com }}</span>
|
||||||
</el-select>
|
</el-option>
|
||||||
</div>
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<span class="dialog-footer">
|
<el-button @click="closePush">取 消</el-button>
|
||||||
<el-button @click="showPush = false">取 消</el-button>
|
<el-button type="primary" @click="submitPush('pushForm')">确 定</el-button>
|
||||||
<el-button type="primary" @click="submitPush()">确 定</el-button>
|
|
||||||
</span>
|
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
||||||
|
<el-dialog title="分栏设置" v-model="showSet" :width="500" destroy-on-close :append-to-body='true'>
|
||||||
|
<div class="diy-grid-layout-set">
|
||||||
|
<el-tooltip content="通栏">
|
||||||
|
<div class="col active">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="左大右小布局">
|
||||||
|
<div class="row">
|
||||||
|
<span style="width: 60%;"></span>
|
||||||
|
<span style="width: 30%;"></span>
|
||||||
|
</div>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="等分布局">
|
||||||
|
<div class="row">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="左右辅助布局">
|
||||||
|
<div class="row">
|
||||||
|
<span style="width: 25%;"></span>
|
||||||
|
<span style="width: 50%;"></span>
|
||||||
|
<span style="width: 25%;"></span>
|
||||||
|
</div>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -68,12 +98,20 @@
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
layout: [18,6], //数组总数不能大于24, [16,8]:分两列左16右8 还可以设置 [18,6] [8,8,8] [6,12,6]
|
layout: [18,6], //数组总数不能大于24, [16,8]:分两列左16右8 还可以设置 [24] [18,6] [8,8,8] [6,12,6]
|
||||||
allComps: allComps,
|
allComps: allComps,
|
||||||
|
allCompsList: [],
|
||||||
showPush: false,
|
showPush: false,
|
||||||
|
pushForm: {
|
||||||
|
selectComps: null
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
selectComps: [
|
||||||
|
{ required: true, message: '请选择添加的组件', trigger: 'blur' }
|
||||||
|
]
|
||||||
|
},
|
||||||
showSet: false,
|
showSet: false,
|
||||||
selectComps: '',
|
defaultGrid: [
|
||||||
defaultGrid:[
|
|
||||||
[
|
[
|
||||||
{ title: "模块1", com: 'C1' },
|
{ title: "模块1", com: 'C1' },
|
||||||
{ title: "模块2", com: 'C2' }
|
{ title: "模块2", com: 'C2' }
|
||||||
|
|
@ -85,7 +123,7 @@
|
||||||
|
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
grid:[]
|
grid: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created(){
|
created(){
|
||||||
|
|
@ -93,18 +131,56 @@
|
||||||
this.grid = grid || this.defaultGrid;
|
this.grid = grid || this.defaultGrid;
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
console.log(allComps);
|
//console.log(allComps);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
//输出可添加的组件
|
||||||
|
setAllCompsList(){
|
||||||
|
var allCompsList = []
|
||||||
|
for(var key in allComps){
|
||||||
|
allCompsList.push({
|
||||||
|
title: allComps[key].title,
|
||||||
|
com: key
|
||||||
|
})
|
||||||
|
}
|
||||||
|
var nowGrid_arr = this.grid.reduce(function(a, b){return a.concat(b)});
|
||||||
|
for(let comp of allCompsList){
|
||||||
|
const _item = nowGrid_arr.find((item)=>{return item.com === comp.com});
|
||||||
|
if(_item){
|
||||||
|
comp.disabled = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.allCompsList = allCompsList;
|
||||||
|
|
||||||
|
},
|
||||||
//拖动结束后
|
//拖动结束后
|
||||||
end(){
|
end(){
|
||||||
this.$TOOL.data.set("grid", this.grid);
|
this.$TOOL.data.set("grid", this.grid);
|
||||||
},
|
},
|
||||||
|
//分栏设置
|
||||||
|
set(){
|
||||||
|
this.showSet = true;
|
||||||
|
},
|
||||||
//添加组件
|
//添加组件
|
||||||
push(){
|
push(){
|
||||||
|
this.setAllCompsList()
|
||||||
this.showPush = true;
|
this.showPush = true;
|
||||||
},
|
},
|
||||||
submitPush(){
|
submitPush(formName){
|
||||||
|
this.$refs[formName].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
var formModel = this.$refs[formName].model;
|
||||||
|
this.grid[0].unshift(formModel.selectComps);
|
||||||
|
this.$TOOL.data.set("grid", this.grid);
|
||||||
|
this.$refs[formName].resetFields();
|
||||||
|
this.showPush = false;
|
||||||
|
}else{
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
closePush(){
|
||||||
|
this.$refs.pushForm.resetFields();
|
||||||
this.showPush = false;
|
this.showPush = false;
|
||||||
},
|
},
|
||||||
//刷新组件
|
//刷新组件
|
||||||
|
|
@ -128,7 +204,7 @@
|
||||||
},
|
},
|
||||||
//恢复默认
|
//恢复默认
|
||||||
backDefaul(){
|
backDefaul(){
|
||||||
this.grid = this.defaultGrid;
|
this.grid = this.$options.data().defaultGrid;
|
||||||
this.$TOOL.data.remove("grid");
|
this.$TOOL.data.remove("grid");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -140,9 +216,64 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
.diy-grid-layout .el-card__header .el-dropdown-link {
|
||||||
|
color: #999;
|
||||||
|
border-radius: 3px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding:3px 5px;
|
||||||
|
}
|
||||||
|
.diy-grid-layout .el-card__header .el-dropdown-link:hover {
|
||||||
|
color: #555;
|
||||||
|
background: #ecf5ff;
|
||||||
|
}
|
||||||
|
.diy-grid-layout .el-card__header .el-dropdown-link:focus {
|
||||||
|
color: #555;
|
||||||
|
background: #ecf5ff;
|
||||||
}
|
}
|
||||||
.diy-grid-layout .sortable-ghost {
|
.diy-grid-layout .sortable-ghost {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
background: #c8ebfb;
|
background: #c8ebfb;
|
||||||
}
|
}
|
||||||
|
.diy-grid-layout-set {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center
|
||||||
|
}
|
||||||
|
.diy-grid-layout-set div {
|
||||||
|
width:80px;
|
||||||
|
height:80px;
|
||||||
|
background: #ecf5ff;
|
||||||
|
margin:10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.diy-grid-layout-set div span{
|
||||||
|
background: #b1e0ff;
|
||||||
|
}
|
||||||
|
.diy-grid-layout-set .col {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-content: space-between;
|
||||||
|
padding:0 5px 5px 5px;
|
||||||
|
}
|
||||||
|
.diy-grid-layout-set .col span {
|
||||||
|
height:20px;
|
||||||
|
width: 100%;
|
||||||
|
margin-top:5px;
|
||||||
|
}
|
||||||
|
.diy-grid-layout-set .row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding:5px 5px 5px 0;
|
||||||
|
}
|
||||||
|
.diy-grid-layout-set .row span {
|
||||||
|
height: 70px;
|
||||||
|
width: 20px;
|
||||||
|
margin-left:5px;
|
||||||
|
}
|
||||||
|
.diy-grid-layout-set div.active {
|
||||||
|
background: #09f;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue