陈裕财
3 years ago
4 changed files with 563 additions and 0 deletions
-
186src/views/xm/core/xmTestPlan/rpt/CompsCard.vue
-
269src/views/xm/core/xmTestPlan/rpt/CompsSet.vue
-
10src/views/xm/core/xmTestPlan/rpt/common.scss
-
98src/views/xm/core/xmTestPlan/rpt/index.scss
@ -0,0 +1,186 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="empty" v-if="layout.length == 0"> |
||||
|
<el-empty description="暂未选择模块"></el-empty> |
||||
|
</div> |
||||
|
<div v-else class="my_grid" style="width: 100%; min-height: 800px; margin-top: 10px"> |
||||
|
<grid-layout |
||||
|
:layout.sync="layout" |
||||
|
:col-num="layoutColNum" |
||||
|
:row-height="120" |
||||
|
:is-draggable="true" |
||||
|
:is-resizable="true" |
||||
|
:is-mirrored="false" |
||||
|
:vertical-compact="true" |
||||
|
:margin="[10, 10]" |
||||
|
:use-css-transforms="true" |
||||
|
> |
||||
|
<grid-item |
||||
|
v-for="(item) in layout" |
||||
|
:x="item.x" |
||||
|
:y="item.y" |
||||
|
:w="item.w" |
||||
|
:h="item.h" |
||||
|
:i="item.i" |
||||
|
:key="item.i"> |
||||
|
<component :is="item.compName"></component> |
||||
|
</grid-item> |
||||
|
</grid-layout> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
import VueGridLayout from 'vue-grid-layout'; |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import XmTestPlanMng from '@/views/xm/core/xmTestPlan/XmTestPlanMng' |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
GridLayout: VueGridLayout.GridLayout, |
||||
|
GridItem: VueGridLayout.GridItem, |
||||
|
XmTestPlanMng, |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
...mapGetters(['userInfo']), |
||||
|
}, |
||||
|
|
||||
|
watch: { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
// 布局位置数据 |
||||
|
layout: [ |
||||
|
{ |
||||
|
// x: (this.layout.length * 6) % (this.layoutColNum || 12), |
||||
|
x: 0, |
||||
|
// y: this.layout.length + (this.layoutColNum || 12), |
||||
|
y: 12, |
||||
|
w: 12, |
||||
|
h: 4, |
||||
|
i: index, |
||||
|
compName:'xm-test-plan-mng', |
||||
|
} |
||||
|
], |
||||
|
// 布局列数 |
||||
|
layoutColNum: 12, |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
addItem: function(element, index) { |
||||
|
this.layout.push( |
||||
|
{ |
||||
|
...element, |
||||
|
// x: (this.layout.length * 6) % (this.layoutColNum || 12), |
||||
|
x: 0, |
||||
|
// y: this.layout.length + (this.layoutColNum || 12), |
||||
|
y: 12, |
||||
|
w: 12, |
||||
|
h: 4, |
||||
|
i: index, |
||||
|
compName:'xm-test-plan-mng', |
||||
|
} |
||||
|
) |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.my_grid .vue-grid-item.vue-grid-placeholder { |
||||
|
background: rgb(214, 214, 214) !important; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import './common.scss'; |
||||
|
@import './index.scss'; |
||||
|
|
||||
|
.empty { |
||||
|
height: 500px; |
||||
|
background: #fff; |
||||
|
margin: 11px; |
||||
|
padding: 20px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.vue-grid-layout { |
||||
|
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 1%, rgba(0, 0, 0, 0) 1%) |
||||
|
,linear-gradient(0deg,rgba(0, 0, 0, 0.15) 1%, rgba(0, 0, 0, 0) 1%); |
||||
|
background-size: calc(100% / 12) calc(100% / 12); /*调节格子宽 高*/ |
||||
|
} |
||||
|
|
||||
|
.vue-grid-item:not(.vue-grid-placeholder) { |
||||
|
background: #fff; |
||||
|
} |
||||
|
|
||||
|
.vue-grid-item .resizing { |
||||
|
opacity: 0.9; |
||||
|
} |
||||
|
.vue-grid-item .static { |
||||
|
background: #cce; |
||||
|
} |
||||
|
.vue-grid-item .text { |
||||
|
font-size: 24px; |
||||
|
text-align: center; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
margin: auto; |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.vue-grid-item .no-drag { |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.vue-grid-item .minMax { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
.vue-grid-item .add { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.vue-draggable-handle { |
||||
|
position: absolute; |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat; |
||||
|
background-position: bottom right; |
||||
|
padding: 0 8px 8px 0; |
||||
|
background-repeat: no-repeat; |
||||
|
background-origin: content-box; |
||||
|
box-sizing: border-box; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.m_content_card_title { |
||||
|
height: 45px; |
||||
|
padding: 20px 20px 40px 20px; |
||||
|
span { |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
color: #7D7D7D; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,269 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
top="5vh" |
||||
|
class="moduleset" |
||||
|
:visible.sync="visible" |
||||
|
width="60%"> |
||||
|
<div slot="title" class="dialog-title"> |
||||
|
<p>模块编辑</p> |
||||
|
<el-divider style="margin: 0 !important;"></el-divider> |
||||
|
</div> |
||||
|
<div class="toolBox"> |
||||
|
<el-input v-model="searchResult" @change="searchMenu" placeholder="模糊搜索, enter回车键搜索"> |
||||
|
<i slot="prefix" class="el-input__icon el-icon-search"></i> |
||||
|
</el-input> |
||||
|
<div class="selectItem"> |
||||
|
<div class="item"> |
||||
|
<img src="../../../../myWork/img/qb.png"> |
||||
|
<span>全部</span> |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<img src="../../../../myWork/img/ty.png"> |
||||
|
<span>通用</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="nav"> |
||||
|
<div class="nav_item" :class="{itemActive: item.isChecked}" v-for="(item, index) in (tempMenu.length > 0 ? tempMenu : menus)" :key="index" @click="selectItem(item, index)"> |
||||
|
<img :src="item.icon" alt=""> |
||||
|
<div class="desc"> |
||||
|
<p>{{item.menuname}}</p> |
||||
|
<span> |
||||
|
{{item.menudesc}} |
||||
|
</span> |
||||
|
</div> |
||||
|
<i v-if="item.isChecked" class="el-icon-success"></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="visible = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="save">确 定</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import img1 from '../../../../myWork/img/dsp.png' |
||||
|
import img2 from '../../../../myWork/img/wdrw.png' |
||||
|
import img3 from '../../../../myWork/img/wdxm.png' |
||||
|
import img4 from '../../../../myWork/img/wdcp.png' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
props: ['value'], |
||||
|
computed: { |
||||
|
...mapGetters(['userInfo']), |
||||
|
visible: { |
||||
|
get: function () { |
||||
|
if(this.value) { |
||||
|
//查询用户设置的模块 |
||||
|
this.getUserModules(); |
||||
|
} |
||||
|
return this.value; |
||||
|
}, |
||||
|
set: function (val) { |
||||
|
this.menus.forEach(element => { |
||||
|
element.isChecked = false; |
||||
|
}); |
||||
|
this.$emit('input', val); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
watch: { |
||||
|
'fMenus' : { |
||||
|
handler(val, oval) { |
||||
|
if(!val || val.length < 1) return |
||||
|
this.menus.forEach(m => { |
||||
|
val.forEach(v => { |
||||
|
if(m.menuid == v.menuid) { |
||||
|
m.isChecked = true; |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
searchResult: '', |
||||
|
tempMenu: [], |
||||
|
fMenus:[], |
||||
|
menus: [ |
||||
|
{ |
||||
|
menuid: 'dsp', |
||||
|
icon: img1, |
||||
|
menuname: '待审批', |
||||
|
menudesc: '可以直接显示全部待审批列表，也可根据审批分类详细筛选单条待审批事项', |
||||
|
isChecked: false, |
||||
|
}, |
||||
|
{ |
||||
|
menuid: 'wdrw', |
||||
|
icon: img2, |
||||
|
menuname: '我的任务', |
||||
|
menudesc: '可以直接显示全部任务列表，也可根据状态、类型详细筛选分类的任务', |
||||
|
isChecked: false, |
||||
|
}, |
||||
|
{ |
||||
|
menuid: 'wdxm', |
||||
|
icon: img3, |
||||
|
menuname: '我的项目', |
||||
|
menudesc: '可以直接显示全部项目列表，也可根据项目状态产品筛选单条项目', |
||||
|
isChecked: false, |
||||
|
}, |
||||
|
{ |
||||
|
menuid: 'wdcp', |
||||
|
icon: img4, |
||||
|
menuname: '我的产品', |
||||
|
menudesc: '可以直接显示全部产品列表，可新增我的产品', |
||||
|
isChecked: false, |
||||
|
} |
||||
|
], |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
searchMenu(val) { |
||||
|
let tempArr = []; |
||||
|
this.menus.forEach(element => { |
||||
|
if(element.name.indexOf(val) != -1) { |
||||
|
tempArr.push(element); |
||||
|
} |
||||
|
}); |
||||
|
this.tempMenu = tempArr; |
||||
|
}, |
||||
|
|
||||
|
selectItem(item, index) { |
||||
|
this.$set(item, 'isChecked', !item.isChecked) |
||||
|
}, |
||||
|
|
||||
|
getUserModules() { |
||||
|
userMenuFavoriteList({}).then(res=>{ |
||||
|
localStorage.setItem('fMenus',JSON.stringify(res.data.data)); |
||||
|
this.fMenus=res.data.data; |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
save() { |
||||
|
let saveModules = []; |
||||
|
this.menus.forEach(m => { |
||||
|
if(m.isChecked) { |
||||
|
saveModules.push(m); |
||||
|
} |
||||
|
}) |
||||
|
saveMenuFavoriteList({data: saveModules, userid: this.userInfo.displayUserid}).then(() => { |
||||
|
this.visible = false |
||||
|
localStorage.removeItem('fMenus'); |
||||
|
this.$emit("submit") |
||||
|
this.$notify.success("设置成功"); |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.moduleset .el-dialog__header { |
||||
|
padding: 0; |
||||
|
} |
||||
|
.moduleset .el-divider--horizontal { |
||||
|
margin: 0 !important; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.moduleset { |
||||
|
.dialog-title { |
||||
|
font-size: 22px; |
||||
|
font-weight: bold; |
||||
|
color: #7D7D7D; |
||||
|
height: 68px; |
||||
|
p { |
||||
|
line-height: 68px; |
||||
|
margin-left: 28px; |
||||
|
} |
||||
|
} |
||||
|
.toolBox { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
.selectItem { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
height: 70px; |
||||
|
.item { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
margin-right: 120px; |
||||
|
cursor: pointer; |
||||
|
margin: 25px 50px 0 20px; |
||||
|
img { |
||||
|
width: 45px; |
||||
|
height: 45px; |
||||
|
} |
||||
|
span { |
||||
|
margin-left: 8px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.nav { |
||||
|
height: 350px; |
||||
|
overflow: auto; |
||||
|
padding:0px 10px 0 20px; |
||||
|
display:flex; |
||||
|
align-items:center; |
||||
|
justify-content: space-between; |
||||
|
flex-wrap:wrap; |
||||
|
.nav_item { |
||||
|
display: flex; |
||||
|
height: 138px; |
||||
|
flex-direction: row; |
||||
|
width: 49%; |
||||
|
border: 2px solid #EDF0F9; |
||||
|
box-shadow: 0px 3px 4px 0px rgba(186, 184, 184, 0.1); |
||||
|
border-radius: 8px; |
||||
|
align-items: center; |
||||
|
position: relative; |
||||
|
cursor: pointer; |
||||
|
margin-top: 10px; |
||||
|
img { |
||||
|
width: 94px; |
||||
|
height: 94px; |
||||
|
margin: 0 18px; |
||||
|
} |
||||
|
p { |
||||
|
font-size: 20px; |
||||
|
font-weight: bold; |
||||
|
color: #7D7D7D; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
span { |
||||
|
font-size: 14px; |
||||
|
color: #7D7D7D; |
||||
|
line-height: 26px; |
||||
|
} |
||||
|
i { |
||||
|
position: absolute; |
||||
|
top: 10px; |
||||
|
right: 20px; |
||||
|
font-size: 36px; |
||||
|
color: #90B1F4; |
||||
|
} |
||||
|
} |
||||
|
.itemActive { |
||||
|
border: 2px solid #90B1F4; |
||||
|
box-shadow: 0px 3px 4px 0px rgba(186, 184, 184, 0.1); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,10 @@ |
|||||
|
.m_container { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: rgb(238, 238, 238); |
||||
|
.m_content { |
||||
|
padding:30px 18px 18px 18px; |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,98 @@ |
|||||
|
.m_top { |
||||
|
background: #fff; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
height: 100px; |
||||
|
align-items: center; |
||||
|
border: 1px solid #ebeef5; |
||||
|
margin: 0 10px; |
||||
|
.m_avatar { |
||||
|
width: 52px; |
||||
|
height: 52px; |
||||
|
margin-left: 34px; |
||||
|
} |
||||
|
.m_msg { |
||||
|
margin-left: 22px; |
||||
|
p:nth-child(1) { |
||||
|
font-size: 20px; |
||||
|
font-weight: bold; |
||||
|
color: #7D7D7D; |
||||
|
opacity: 0.92; |
||||
|
} |
||||
|
p:nth-child(2) { |
||||
|
margin-top: 12px; |
||||
|
font-size: 14px; |
||||
|
font-weight: bold; |
||||
|
color: #7D7D7D; |
||||
|
opacity: 0.53; |
||||
|
} |
||||
|
} |
||||
|
.m_btn { |
||||
|
margin-left: auto; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.m_middle { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
margin-top: 20px; |
||||
|
height: 280px; |
||||
|
.m_left, .m_right { |
||||
|
flex: 1; |
||||
|
padding: 30px; |
||||
|
background: #fff; |
||||
|
border: 1px solid #ebeef5; |
||||
|
} |
||||
|
.m_left { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
margin-right: 10px; |
||||
|
margin-left: 10px; |
||||
|
.m_left_1 { |
||||
|
flex: 1.5; |
||||
|
p { |
||||
|
font-size: 18px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
span { |
||||
|
font-size: 15px; |
||||
|
line-height: 42px; |
||||
|
color: #7D7D7D; |
||||
|
} |
||||
|
} |
||||
|
.m_left_2 { |
||||
|
flex: 1; |
||||
|
img { |
||||
|
width: 100%; |
||||
|
margin-left: 20px; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m_right { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
flex-wrap: wrap; |
||||
|
margin-right: 10px; |
||||
|
.m_right_menu { |
||||
|
display: flex; |
||||
|
width: 33.3%; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 16px; |
||||
|
cursor: pointer; |
||||
|
img { |
||||
|
width: 58px; |
||||
|
height: 58px; |
||||
|
} |
||||
|
span { |
||||
|
margin-top: 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue