intellioa
/
super-fusion-platform
mirror of http://10.10.14.221/feiliming/oa-project-vue.git
6
0
Fork 0
Code Issues Projects Releases Wiki Activity

朱思禹提交：提交模块相关代码

Browse Source
init
Administrator 4 years ago
parent 27174a3e2e
commit cfb0aa3d4f
3 changed files with 166 additions and 14 deletions
Show Stats Download Patch File Download Diff File

13
src/views/superFusionPlatform/mainPlatform/moduleAndLayout/ModuleAndLaySetting.vue
Unescape View File

@ -0,0 +1,13 @@
<template>
<div>111111</div>
</template>
<script>
export default {
name: "ModuleAndLaySetting"
}
</script>
<style scoped>
</style>

163
src/views/superFusionPlatform/mainPlatform/moduleAndLayout/ModuleMain.vue
Unescape View File

@ -1,40 +1,145 @@
<template>
<div class="module-main-style">
<template v-if="module-style && moduleDataList.length > 0">
<template v-if="moduleDataList && moduleDataList.length > 0">
<div v-for="moduleType in moduleDataList" :key="moduleType.module_type_id" class="module-type-class">
<a-divider class="divider-style">
● <span class="type-name-style">{{moduleType.module_type_name}}</span> ●
</a-divider>
<draggable :value="moduleType.module_list" class="clearfix module-draggable-style">
<!-- <div v-for="module,index in moduleType.module_list" :key="module" class="module-style"-->
<!-- :style="{width:getWidth(index),margin:">-->
<!-- </div>-->
<draggable v-model="moduleType.module_list" class="clearfix module-draggable-style" :sort="true" handle=".move">
<div v-for="item,index in moduleType.module_list" :key="item" class="module-style"
:style="{width:getWidth(index),margin:getMarginStyle(moduleType.module_list.length,index)}">
<div class="module-title-style">
<span>{{getModuleName(moduleType.module_type_id,item)}}</span>
<div class="icon-container-style">
<my-icon type="icon-yincang" title="隐藏" class="icon-style"></my-icon>
<my-icon type="icon-tuozhuai" title="按住拖动" class="icon-style move"></my-icon>
<my-icon type="icon-gengduo" title="更多" class="icon-style"></my-icon>
</div>
</div>
<template v-if="getModuleUrl(moduleType.module_type_id,item) !== ''">
<component :is="getCom(moduleType.module_type_id,item)"></component>
</template>
<div v-else class="no-module-tip-style">模块暂未开放，敬请期待！</div>
</div>
</draggable>
</div>9
</div>
</template>
<div class="module-tips-class"></div>
<div v-else class="module-tips-class">暂未选择任何模块展示</div>
</div>
</template>
<script>
import {defaultShowModule} from './moduleAndLaySettingConfig'
import {moduleData,defaultShowModule} from './moduleAndLaySettingConfig'
import {Divider} from 'ant-design-vue'
import draggable from 'vuedraggable'
export default {
name: "ModuleMain",
props:["moduleData"],
props:{
moduleData:{
type:Array,
},
layoutType:{
type:Number,
default:0
}
},
data:function () {
return{
moduleDataList:this.moduleData?this.moduleData:defaultShowModule
moduleDataList:this.moduleData?this.moduleData:defaultShowModule,
layout:this.layoutType
}
},
components:{
ADivider:Divider,
draggable
},
methods:{
getCom: function (type_id,item){
return () => import(`@/views/superFusionPlatform/mainPlatform/moduleAndLayout/${this.getModuleUrl(type_id,item)}`)
},
getModuleUrl:function(type_id,item){
return (moduleData.filter((type)=>{return type.module_type_id === type_id})[0]).
module_list.filter((module)=>{return module.module_id === item})[0].module_url
},
getModuleName:function(type_id,item){
return (moduleData.filter((type)=>{return type.module_type_id === type_id})[0]).
module_list.filter((module)=>{return module.module_id === item})[0].module_name
},
getWidth:function(index){
let num = 0;
if (this.layout <= 2){
num = index % 3;
}else if (this.layout === 3){
num = index % 2;
}else{
num = index % 4;
}
switch (num) {
case 0:
if (this.layout <= 1 || this.layout === 4){
return 'calc((100% - 44px) * 0.25)'
}else{
return 'calc((100% - 44px) * 0.5)'
}
case 1:
if (this.layout === 1 || this.layout === 2 || this.layout === 4){
return 'calc((100% - 44px) * 0.25)'
}else{
return 'calc((100% - 44px) * 0.5)'
}
case 2:
if(this.layout === 1){
return 'calc((100% - 44px) * 0.5)'
}else{
return 'calc((100% - 44px) * 0.25)'
}
case 3:
return 'calc((100% - 44px) * 0.25)'
}
},
getMarginStyle:function (length,index) {
let margin = "";
if ((this.layout <= 2 && index % 3 < 2) || (this.layout === 3 && index % 2 === 0)
|| (this.layout === 4 && index % 4 < 3)){
margin = "0 22px";
} else{
margin = "0 0"
}
let row = 0
if (this.layout <= 2){//3列
row = Math.ceil(length / 3)
if (index < (row-1) * 3){
margin += " 14px 0"
}else{
margin += " 0 0"
}
}else if(this.layout === 3){//2列
row = Math.ceil(length / 2)
if (index < (row-1) * 2){
margin += " 14px 0"
}else{
margin += " 0 0"
}
}else{//4列
row = Math.ceil(length / 4)
if (index < (row-1) * 4){
margin += " 14px 0"
}else{
margin += " 0 0"
}
}
return margin;
}
},
watch:{
moduleData:function (newData) {
this.moduleDataList = newData?newData:defaultShowModule
},
layoutType:function (newData) {
this.layout = newData;
}
}
}
@ -68,7 +173,41 @@
.module-draggable-style{
.module-style{
float: left;
min-height: 5rem;
min-height: 10rem;
background-color: white;
.module-title-style{
display: flex;
width: 100%;
height: 40px;
padding: 0 25px;
align-content: center;
align-items: center;
justify-content: space-between;
font-size: 16px;
color:white;
/*justify-items: space-around;*/
background:linear-gradient(to bottom right,#038aff,#3ea0ff);
background:-moz-linear-gradient(to bottom right,#038aff,#3ea0ff);
background:-webkit-linear-gradient(to bottom right,#038aff,#3ea0ff);
.icon-style{
font-size: 18px;
margin-right: 20px;
cursor: pointer;
&:nth-last-of-type(1){
margin-right: 0;
}
}
}
.no-module-tip-style{
display: flex;
width: 100%;
height:120px;
align-items: center;
align-content: center;
justify-items: center;
justify-content: center;
font-size: 16px;
}
}
}
}
@ -77,7 +216,7 @@
height: 5rem;
line-height: 5rem;
text-align: center;
font-size: 14px;
font-size: 16px;
}
}
</style>

4
src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleAndLaySettingConfig.js
Unescape View File

@ -77,8 +77,8 @@ export const moduleData=[{
]
export const layoutData={
layout_one:"3列（1:1:2）",
layout_two:"3列（1:2:1）",
layout_one:"3列（1:2:1）",
layout_two:"3列（1:1:2）",
layout_three:"3列（2:1:1）",
layout_four:"2列（2:2）",
layout_five:"4列（1:1:1:1）",

Write Preview
Loading…
Cancel
Save