end7less
/
program_xm_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化

master
陈裕财 3 years ago
parent
6b94a92f01
commit
a1f81a1ae2
4 changed files with 128 additions and 273 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      src/views/xm/core/xmTestPlan/XmTestPlanInfo.vue
  2. 183
      src/views/xm/core/xmTestPlan/rpt/CompsCard.vue
  3. 137
      src/views/xm/core/xmTestPlan/rpt/CompsSet.vue
  4. 46
      src/views/xm/core/xmTestPlan/rpt/index.vue

9
src/views/xm/core/xmTestPlan/XmTestPlanInfo.vue
View File

@ -24,8 +24,10 @@
<div style="display:inline-flex"><el-progress style="width:100px;" :stroke-width="22" :text-inside="true" :status="calcYiCeshiCases>0 && xmTestPlan.errCases<=0 ?'success':'exception'" :percentage="calcProgress"></el-progress> <div style="display:inline-flex"><el-progress style="width:100px;" :stroke-width="22" :text-inside="true" :status="calcYiCeshiCases>0 && xmTestPlan.errCases<=0 ?'success':'exception'" :percentage="calcProgress"></el-progress>
</div> </div>
</span> </span>
<span v-if="subPage=='testRpt'">
<el-divider direction="vertical"></el-divider> <el-divider direction="vertical"></el-divider>
<el-button @click="showRptConfig">配置报告</el-button>
</span>
</span> </span>
</el-row> </el-row>
@ -37,7 +39,7 @@
</el-row> </el-row>
<el-row v-if="subPage=='testRpt'"> <el-row v-if="subPage=='testRpt'">
<xm-test-plan-rpt :xm-test-plan="xmTestPlan"></xm-test-plan-rpt >
<xm-test-plan-rpt ref="rpt" :xm-test-plan="xmTestPlan"></xm-test-plan-rpt >
</el-row> </el-row>
</el-row> </el-row>
<xm-test-plan-mng v-else @select="onTestPlanSelect" :xm-test-casedb="xmTestCasedb"> </xm-test-plan-mng> <xm-test-plan-mng v-else @select="onTestPlanSelect" :xm-test-casedb="xmTestCasedb"> </xm-test-plan-mng>
@ -133,6 +135,9 @@ export default {
onTestPlanSelect(row){ onTestPlanSelect(row){
this.activeIndex='testPlanCase' this.activeIndex='testPlanCase'
this.xmTestPlan=row this.xmTestPlan=row
},
showRptConfig(){
this.$refs['rpt'].rptConfigVisible=true
} }
},//end methods },//end methods

183
src/views/xm/core/xmTestPlan/rpt/CompsCard.vue
View File

@ -1,33 +1,46 @@
<template> <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>
<el-row v-if="rptConfigVisible">
<el-col :span="6">
<comps-set :comp-ids="compIds"></comps-set>
</el-col>
<el-col :span="18">
<div>
<div class="empty" v-if="layout.length == 0">
<el-empty description="暂未选择模块"></el-empty>
</div>
<div v-else 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.compId"></component>
</grid-item>
</grid-layout>
</div>
</div>
</el-col>
</el-row>
<el-row v-else class="page-center border">
<el-row v-for="(item,index) in layout" :key="index">
<component :is="item.compId"></component>
</el-row>
</el-row>
</template> </template>
<script> <script>
@ -35,18 +48,31 @@
import VueGridLayout from 'vue-grid-layout'; import VueGridLayout from 'vue-grid-layout';
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import XmTestPlanMng from '@/views/xm/core/xmTestPlan/XmTestPlanMng' import XmTestPlanMng from '@/views/xm/core/xmTestPlan/XmTestPlanMng'
import CompsSet from '@/views/xm/core/xmTestPlan/rpt/CompsSet'
import XmQuestionAgeDist from '@/views/xm/core/xmTestPlan/rpt/biz/questionAgeDist' import XmQuestionAgeDist from '@/views/xm/core/xmTestPlan/rpt/biz/questionAgeDist'
import { initDicts,listXmRptConfig, delXmRptConfig, batchDelXmRptConfig,editSomeFieldsXmRptConfig } from '@/api/xm/core/xmRptConfig';
export default { export default {
components: { components: {
GridLayout: VueGridLayout.GridLayout, GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem, GridItem: VueGridLayout.GridItem,
XmTestPlanMng, XmTestPlanMng,
XmQuestionAgeDist, XmQuestionAgeDist,
},
CompsSet,
},
props:['bizId','rptConfigVisible'],
computed: { computed: {
...mapGetters(['userInfo']), ...mapGetters(['userInfo']),
compIds(){
if(this.xmRptConfig && this.xmRptConfig.cfg){
var cfgJson=JSON.parse(this.xmRptConfig.cfg)
return cfgJson.map(k=>k.id)
}else{
return []
}
}
}, },
watch: { watch: {
@ -55,6 +81,7 @@ export default {
data() { data() {
return { return {
xmRptConfig:null,
// 布局位置数据 // 布局位置数据
layout: [ layout: [
{ {
@ -65,7 +92,7 @@ export default {
w: 12, w: 12,
h: 4, h: 4,
i: 0, i: 0,
compName:'xm-test-plan-mng',
compId:'xm-test-plan-mng',
}, },
{ {
// x: (this.layout.length * 6) % (this.layoutColNum || 12), // x: (this.layout.length * 6) % (this.layoutColNum || 12),
@ -75,7 +102,7 @@ export default {
w: 12, w: 12,
h: 4, h: 4,
i: 1, i: 1,
compName:'xm-question-age-dist',
compId:'xm-question-age-dist',
} }
], ],
// 布局列数 // 布局列数
@ -95,10 +122,18 @@ export default {
w: 12, w: 12,
h: 4, h: 4,
i: index, i: index,
compName:'xm-test-plan-mng',
compId:'xm-test-plan-mng',
} }
) )
}, },
getXmRptConfig(){
if(!this.bizId){
return;
}
listXmRptConfig({bizId:this.bizId}).then(res=>{
this.xmRptConfig=res.data.data[0]
})
}
}, },
@ -112,87 +147,5 @@ export default {
</script> </script>
<style> <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> </style>

137
src/views/xm/core/xmTestPlan/rpt/CompsSet.vue
View File

@ -1,45 +1,18 @@
<template> <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="moduleset">
<div class="nav"> <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)">
<div class="nav_item" :class="{itemActive: item.isChecked}" v-for="(item, index) in compsCpd" :key="index" @click="selectItem(item, index)">
<img :src="item.icon" alt=""> <img :src="item.icon" alt="">
<div class="desc"> <div class="desc">
<p>{{item.menuname}}</p>
<p>{{item.compName}}</p>
<span> <span>
{{item.menudesc}}
{{item.compDesc}}
</span> </span>
</div> </div>
<i v-if="item.isChecked" class="el-icon-success"></i> <i v-if="item.isChecked" class="el-icon-success"></i>
</div> </div>
</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>
</div>
</template> </template>
<script> <script>
@ -51,73 +24,53 @@ import { mapGetters } from 'vuex'
export default { export default {
props: ['value'],
props: ['compIds' ],
computed: { computed: {
...mapGetters(['userInfo']), ...mapGetters(['userInfo']),
visible: {
get: function () {
if(this.value) {
//查询用户设置的模块
}
return this.value;
},
set: function (val) {
this.menus.forEach(element => {
element.isChecked = false;
});
this.$emit('input', val);
compsCpd(){
var comps=this.comps;
if(this.compIds && this.compIds.length>0){
comps.forEach(i=>{
i.isChecked=this.compIds.some(k=>k==i.compId)
})
} }
},
return comps;
}
}, },
watch: { 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() { data() {
return { return {
searchResult: '',
tempMenu: [],
fMenus:[],
menus: [
comps: [
{ {
menuid: 'dsp',
compId: 'dsp',
icon: img1, icon: img1,
menuname: '待审批',
menudesc: '可以直接显示全部待审批列表，也可根据审批分类详细筛选单条待审批事项',
compName: '待审批',
compDesc: '可以直接显示全部待审批列表，也可根据审批分类详细筛选单条待审批事项',
isChecked: false, isChecked: false,
}, },
{ {
menuid: 'wdrw',
compId: 'wdrw',
icon: img2, icon: img2,
menuname: '我的任务',
menudesc: '可以直接显示全部任务列表，也可根据状态、类型详细筛选分类的任务',
compName: '我的任务',
compDesc: '可以直接显示全部任务列表，也可根据状态、类型详细筛选分类的任务',
isChecked: false, isChecked: false,
}, },
{ {
menuid: 'wdxm',
compId: 'wdxm',
icon: img3, icon: img3,
menuname: '我的项目',
menudesc: '可以直接显示全部项目列表，也可根据项目状态产品筛选单条项目',
compName: '我的项目',
compDesc: '可以直接显示全部项目列表，也可根据项目状态产品筛选单条项目',
isChecked: false, isChecked: false,
}, },
{ {
menuid: 'wdcp',
compId: 'wdcp',
icon: img4, icon: img4,
menuname: '我的产品',
menudesc: '可以直接显示全部产品列表，可新增我的产品',
compName: '我的产品',
compDesc: '可以直接显示全部产品列表，可新增我的产品',
isChecked: false, isChecked: false,
} }
], ],
@ -126,35 +79,9 @@ export default {
}, },
methods: { 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)
},
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("设置成功");
})
}
selectItem(item){
item.isChecked=!item.isChecked
}
} }
@ -208,7 +135,6 @@ export default {
} }
.nav { .nav {
height: 350px;
overflow: auto; overflow: auto;
padding:0px 10px 0 20px; padding:0px 10px 0 20px;
display:flex; display:flex;
@ -219,7 +145,6 @@ export default {
display: flex; display: flex;
height: 138px; height: 138px;
flex-direction: row; flex-direction: row;
width: 49%;
border: 2px solid #EDF0F9; border: 2px solid #EDF0F9;
box-shadow: 0px 3px 4px 0px rgba(186, 184, 184, 0.1); box-shadow: 0px 3px 4px 0px rgba(186, 184, 184, 0.1);
border-radius: 8px; border-radius: 8px;

46
src/views/xm/core/xmTestPlan/rpt/index.vue
View File

@ -1,13 +1,12 @@
<template> <template>
<div class="m_container">
<div class="m_content">
<div class="m_top">
<el-button class="m_btn" type="primary" @click="compsSetVisible = true">模块编辑</el-button>
</div>
<comps-card ref="compsCard" />
</div>
<comps-set v-model="compsSetVisible" @submit="onCompsSet"/>
</div>
<section>
<el-row v-if="rptConfigVisible">
<span style="float:right;"> <el-button @click="rptConfigVisible=false">取消配置</el-button><el-button @click="rptConfigVisible=true" type="primary">保存配置</el-button></span>
</el-row>
<el-row>
<comps-card ref="compsCard" :rpt-config-visible="rptConfigVisible"/>
</el-row>
</section>
</template> </template>
<script> <script>
@ -24,19 +23,6 @@ export default {
...mapGetters([ ...mapGetters([
'userInfo' 'userInfo'
]), ]),
getDate() {
return dayjs().format('YYYY/M/D');
},
getTimeStatus() {
let hour = dayjs().hour();
let msg = '早上好';
if(hour >= 13 || hour <= 18) {
msg = '下午好';
}else if (hour >= 19 || hour <= 24){
msg = '晚上好';
}
return msg;
}
}, },
watch: { watch: {
@ -44,26 +30,12 @@ export default {
data() { data() {
return { return {
compsSetVisible: false
rptConfigVisible:false,
} }
}, },
methods: { methods: {
gotolink(context,path) {
if(context==process.env.CONTEXT){
this.$router.push({path:path});
}else{
var prefixUrl=window.location.protocol+"//"+window.location.host+"/"+context+"/"+process.env.VERSION+"/#"; // 返回https://mp.csdn.net
window.open(prefixUrl+path)
NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
}
},
onCompsSet(){
this.$refs.compsCard.getFMenus();
}
}, },

Write Preview
Loading…
Cancel
Save