zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UP

This commit is contained in:
sc 2021-04-27 09:48:08 +08:00
parent 32b9c037fe
commit 00c727d9f1
3 changed files with 57 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/layout/components/side.vue
View File

@ -2,7 +2,8 @@
<div class="aminui-side-split"> <div class="aminui-side-split">
<div class="adminui-side-split-scroll"> <div class="adminui-side-split-scroll">
<ul> <ul>
<li v-for="item in menu" v-bind:key="item" :class="pmenu.path==item.path?'active':''" @click="showMenu(item)"><i :class="item.meta.icon || 'el-icon-menu'"></i> <li v-for="item in menu" v-bind:key="item" :class="pmenu.path==item.path?'active':''" @click="showMenu(item)">
<i :class="item.meta.icon || 'el-icon-menu'"></i>
<p>{{ item.meta.title }}</p> <p>{{ item.meta.title }}</p>
</li> </li>
</ul> </ul>

89
src/views/home/gridLayout.vue
View File

@ -1,9 +1,8 @@
<template> <template>
<div class="diy-grid-layout"> <div class="diy-grid-layout">
<el-row :gutter="15"> <el-row :gutter="15">
<el-col v-for="(item, index) in grid.layout" v-bind:key="index" :span="item">
<el-col v-for="(item, index) in layout" v-bind:key="item" :span="item"> <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[index]" :disabled="false" animation="200" handle=".el-card__header" group="people" @end="end" item-key="com">
<template #item="{ element }"> <template #item="{ element }">
<div> <div>
<el-card shadow="hover" style="margin-bottom:15px;"> <el-card shadow="hover" style="margin-bottom:15px;">
@ -33,7 +32,7 @@
</div> </div>
<el-dialog title="添加组件" v-model="showPush" :width="400" :before-close="closePush" 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 style="margin-bottom:20px;"></el-alert> <el-alert title="添加的元素自动会添加至最左侧" type="info" show-icon style="margin-bottom:20px;"></el-alert>
<el-form :model="pushForm" ref="pushForm" :rules="rules" label-width="0"> <el-form :model="pushForm" ref="pushForm" :rules="rules" label-width="0">
<el-form-item prop="selectComps"> <el-form-item prop="selectComps">
<el-select v-model="pushForm.selectComps" value-key="title" filterable clearable placeholder="请选择组件" style="width: 100%;"> <el-select v-model="pushForm.selectComps" value-key="title" filterable clearable placeholder="请选择组件" style="width: 100%;">
@ -51,35 +50,40 @@
</el-dialog> </el-dialog>
<el-dialog title="分栏设置" v-model="showSet" :width="500" destroy-on-close :append-to-body='true'> <el-dialog title="分栏设置" v-model="showSet" :width="500" destroy-on-close :append-to-body='true'>
<el-alert title="当出现设置的分栏数比现有少的情况,系统将自动移除多出的组件" type="info" show-icon style="margin-bottom:20px;"></el-alert>
<div class="diy-grid-layout-set"> <div class="diy-grid-layout-set">
<el-tooltip content="通栏"> <el-tooltip content="通栏">
<div class="col active"> <div :class="selectLayout.toString()==[24].toString()?'active col':'col'" @click="setLayout([24])">
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip content="左大右小布局"> <el-tooltip content="左大右小布局">
<div class="row"> <div :class="selectLayout.toString()==[18, 6].toString()?'active row':'row'" @click="setLayout([18, 6])">
<span style="width: 60%;"></span> <span style="width: 60%;"></span>
<span style="width: 30%;"></span> <span style="width: 30%;"></span>
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip content="等分布局"> <el-tooltip content="等分布局">
<div class="row"> <div :class="selectLayout.toString()==[8, 8, 8].toString()?'active row':'row'" @click="setLayout([8, 8, 8])">
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip content="左右辅助布局"> <el-tooltip content="左右辅助布局">
<div class="row"> <div :class="selectLayout.toString()==[6, 12, 6].toString()?'active row':'row'" @click="setLayout([6, 12, 6])">
<span style="width: 25%;"></span> <span style="width: 25%;"></span>
<span style="width: 50%;"></span> <span style="width: 50%;"></span>
<span style="width: 25%;"></span> <span style="width: 25%;"></span>
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<template #footer>
<el-button @click="showSet=false">取 消</el-button>
<el-button type="primary" @click="submitSet()">确 定</el-button>
</template>
</el-dialog> </el-dialog>
</template> </template>
@ -98,7 +102,6 @@
}, },
data() { data() {
return { return {
layout: [18,6], //数组总数不能大于24, [16,8]:分两列左16右8 还可以设置 [24] [18,6] [8,8,8] [6,12,6]
allComps: allComps, allComps: allComps,
allCompsList: [], allCompsList: [],
showPush: false, showPush: false,
@ -111,19 +114,23 @@
] ]
}, },
showSet: false, showSet: false,
defaultGrid: [ selectLayout: [],
[ defaultGrid: {
{ title: "模块1", com: 'C1' }, layout: [18, 6], //数组总数不能大于24, [16,8]:分两列左16右8 还可以设置 [24] [18,6] [8,8,8] [6,12,6]
{ title: "模块2", com: 'C2' } copmsList: [
], [
[ { title: "模块1", com: 'C1' },
{ title: "模块3", com: 'C3' } { title: "模块2", com: 'C2' }
], ],
[ [
{ title: "模块3", com: 'C3' }
],
[
]
] ]
], },
grid: [] grid: [],
} }
}, },
created(){ created(){
@ -131,7 +138,7 @@
this.grid = grid || this.defaultGrid; this.grid = grid || this.defaultGrid;
}, },
mounted(){ mounted(){
//console.log(allComps);
}, },
methods: { methods: {
//输出可添加的组件 //输出可添加的组件
@ -143,15 +150,14 @@
com: key com: key
}) })
} }
var nowGrid_arr = this.grid.reduce(function(a, b){return a.concat(b)}); var nowCopmsList_arr = this.grid.copmsList.reduce(function(a, b){return a.concat(b)});
for(let comp of allCompsList){ for(let comp of allCompsList){
const _item = nowGrid_arr.find((item)=>{return item.com === comp.com}); const _item = nowCopmsList_arr.find((item)=>{return item.com === comp.com});
if(_item){ if(_item){
comp.disabled = true comp.disabled = true
} }
} }
this.allCompsList = allCompsList; this.allCompsList = allCompsList;
}, },
//拖动结束后 //拖动结束后
end(){ end(){
@ -160,6 +166,7 @@
//分栏设置 //分栏设置
set(){ set(){
this.showSet = true; this.showSet = true;
this.selectLayout = this.grid.layout;
}, },
//添加组件 //添加组件
push(){ push(){
@ -170,7 +177,7 @@
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
var formModel = this.$refs[formName].model; var formModel = this.$refs[formName].model;
this.grid[0].unshift(formModel.selectComps); this.grid.copmsList[0].unshift(formModel.selectComps);
this.$TOOL.data.set("grid", this.grid); this.$TOOL.data.set("grid", this.grid);
this.$refs[formName].resetFields(); this.$refs[formName].resetFields();
this.showPush = false; this.showPush = false;
@ -183,24 +190,36 @@
this.$refs.pushForm.resetFields(); this.$refs.pushForm.resetFields();
this.showPush = false; this.showPush = false;
}, },
//刷新组件 setLayout(value){
refresh(item){ this.selectLayout = value;
console.log("刷新",item); },
submitSet(){
//处理更改分栏后删除被隐藏的组件
if(this.selectLayout.length == 1){
this.grid.copmsList[1] = []
this.grid.copmsList[2] = []
}
if(this.selectLayout.length == 2){
this.grid.copmsList[2] = []
}
this.showSet = false;
this.grid.layout = this.selectLayout;
this.$TOOL.data.set("grid", this.grid);
}, },
//隐藏组件 //隐藏组件
remove(item){ remove(item){
var newGrid = [...this.grid]; var newCopmsList = [...this.grid.copmsList];
newGrid.forEach((obj, index) => { newCopmsList.forEach((obj, index) => {
var newObj = obj.filter(o=>o.com!=item.com); var newObj = obj.filter(o=>o.com!=item.com);
newGrid[index] = newObj; newCopmsList[index] = newObj;
}) })
var newGrid_arr = newGrid.reduce(function(a, b){return a.concat(b)}); var newCopmsList_arr = newCopmsList.reduce(function(a, b){return a.concat(b)});
if(newGrid_arr.length <= 0){ if(newCopmsList_arr.length <= 0){
alert("至少留一个崽~") alert("至少留一个崽~")
return false; return false;
} }
this.grid = newGrid; this.grid.copmsList = newCopmsList;
this.$TOOL.data.set("grid", newGrid); this.$TOOL.data.set("grid", this.grid);
}, },
//恢复默认 //恢复默认
backDefaul(){ backDefaul(){

2
src/views/home/index.vue
View File

@ -59,7 +59,7 @@
return {} return {}
}, },
mounted(){ mounted(){
console.log("home.vue mounted #57");
}, },
methods: { methods: {