陈裕财
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