报告配置

src/views/xm/core/xmTestPlan/rpt/CompsCard.vue

@@ -56,6 +56,7 @@ import xmQuestionFuncSort from '@/views/xm/core/xmTestPlan/rpt/biz/questionFuncS
 import xmTestPlanCaseExecStatusDist from '@/views/xm/core/xmTestPlan/rpt/biz/testPlanCaseExecStatusDist'
 import xmTestPlanCaseUserDist from '@/views/xm/core/xmTestPlan/rpt/biz/testPlanCaseUserDist'
 
+import xmTestRptOverview from '@/views/xm/core/xmTestPlan/xmTestRptOverview'
 
 import { initDicts,listXmRptConfig, delXmRptConfig,editXmRptConfig,addXmRptConfig,batchDelXmRptConfig,editSomeFieldsXmRptConfig } from '@/api/xm/core/xmRptConfig';
  
@@ -70,18 +71,14 @@ export default {
         xmTestPlanCaseExecStatusDist,
         xmTestPlanCaseUserDist,
         CompsSet,
+        xmTestRptOverview,
 
     },
     props:['xmTestPlan','rptConfigVisible'],
     computed: {
         ...mapGetters(['userInfo']), 
         compIds(){
-            if(this.xmRptConfig && this.xmRptConfig.cfg){
-                var cfgJson=JSON.parse(this.xmRptConfig.cfg)
-                return cfgJson.map(k=>k.compId)
-            }else{
-                return []
-            }
+           return this.compCfgList.map(k=>k.compId)
         },
         
     },
@@ -112,6 +109,8 @@ export default {
             maxTableHeight:300,
             // 布局位置数据
             initCompCfg: [
+                
+                 { i:0, x: 0,  y: 12,  w: 12, h: 6,  id:'xmTestRptOverview',name:'测试计划总览',compId:'xmTestRptOverview', params:{} }, 
                  { i:1, x: 0,  y: 12,  w: 12, h: 6,  id:'xmQuestionAgeDist',name:'缺陷年龄分布',compId:'xmQuestionAgeDist', params:{} }, 
                  { i: 2, x: 0,  y: 12,  w: 12, h: 6, id:'xmQuestionAttDist',name:'缺陷属性分布',compId:'xmQuestionAttDist',  },
                  { i: 3, x: 0,  y: 12,  w: 12, h: 6,   id:'xmQuestionHandlerUserSort',name:'缺陷负责人排行榜',compId:'xmQuestionHandlerUserSort',  }, 

src/views/xm/core/xmTestPlan/xmTestRptOverview.vue

@@ -0,0 +1,375 @@
+<template>
+	<section  class="padding"> 
+		<el-row class="padding-bottom">
+			<span>报告概览</span>
+		</el-row>
+		<el-row ref="table">
+			<el-row class="box">
+				<el-col :span="6" class="box-red">
+					<div class="box-info">  
+							<div class="num">1000</div>
+							<div class="label">用例数</div>   
+					</div>
+				</el-col>
+				<el-col :span="6" class="box-blue">
+					<div class="box-info">  
+							<div class="num">100%</div>
+							<div class="label">用例覆盖率</div>   
+					</div>
+				</el-col>
+				<el-col :span="6" class="box-green">
+					<div class="box-info">  
+							<div class="num">100%</div>
+							<div class="label">用例通过率</div>   
+					</div>
+				</el-col>
+				<el-col :span="6" class="box-orange">
+					<div class="box-info">  
+							<div class="num">20</div>
+							<div class="label">缺陷数</div>   
+					</div>
+				</el-col>
+			</el-row>
+		<!--编辑界面 XmTestPlan 测试计划--> 
+			<el-form :model="editForm"  label-width="120px" :rules="editFormRules" ref="editFormRef" label-position="left"> 
+				 <el-form-item prop="name" label-width="0px">
+				  <el-row class="padding-bottom">
+					<my-input v-model="editForm.name" placeholder="计划名称" :maxlength="255" @change="editSomeFields(editForm,'name',$event)"></my-input>
+ 				  </el-row>
+				  </el-form-item>
+				<el-row class="padding">
+					<el-col :span="8">
+						<mdp-select-user-xm label="负责人" userid-key="cuserid" username-key="cusername" v-model="editForm" @change="editSomeFields(editForm,'cuserid',$event)"></mdp-select-user-xm>
+					</el-col>
+					<el-col :span="8">
+						<mdp-select-dict-x label="状态" :dict="dicts['testPlanStatus']" v-model="editForm.status"  @change="editSomeFields(editForm,'status',$event)"></mdp-select-dict-x>
+					</el-col>
+					
+					<el-col :span="8">
+						<mdp-select-dict-x label="测试结果" :dict="dicts['testPlanTcode']" v-model="editForm.tcode"  @change="editSomeFields(editForm,'tcode',$event)"></mdp-select-dict-x>
+					</el-col>
+				</el-row>   
+ 				<el-form-item label="归属测试库" prop="casedbName">
+					{{editForm.casedbName}}
+				</el-form-item>  
+				<el-form-item label="归属项目" prop="projectId">
+					 
+					<span v-if="opType=='add'">
+					 	<xm-project-select v-if="!selProject || !selProject.id" ref="xmProjectSelect" :link-product-id="xmTestCasedb? xmTestCasedb.productId:null"  @row-click="onPorjectConfirm" :auto-select="false">
+							<span slot="title">选择项目</span>
+						</xm-project-select>
+						<div v-else>{{editForm.projectName}}</div>
+					</span> 
+ 					<div v-else>{{editForm.projectName}}</div>
+				</el-form-item>  
+				<el-form-item label="归属产品" prop="productName">
+					{{editForm.productName}}
+				</el-form-item>  
+				 
+				<el-form-item label="起止时间" prop="stime">
+					<mdp-date-range :auto-default="false" placeholder="选择日期" v-model="editForm" start-key="stime" end-key="etime"  value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" @change="editSomeFields(editForm,'stime',editForm)"></mdp-date-range>
+				</el-form-item>   
+			</el-form>
+		</el-row>
+
+		<el-row v-if="opType=='add'" >
+			<span style="float:right;">
+		    <el-button @click.native="handleCancel">取消</el-button>
+            <el-button v-loading="load.edit" type="primary" @click.native="saveSubmit" :disabled="load.edit==true">提交</el-button>
+			</span>
+		</el-row>
+	</section>
+</template>
+
+<script>
+	import util from '@/common/js/util';//全局公共库
+	import config from "@/common/config"; //全局公共库import
+ 	import { initDicts, addXmTestPlan,editXmTestPlan,editSomeFieldsXmTestPlan } from '@/api/xm/core/xmTestPlan';
+	import { mapGetters } from 'vuex'
+	import XmProjectSelect from '@/views/xm/core/components/XmProjectSelect';
+	
+import  MdpSelectUserXm from '@/views/xm/core/components/MdpSelectUserXm';//修改界面
+	export default {
+	    name:'xmTestPlanEdit',
+	    components: {
+			XmProjectSelect,MdpSelectUserXm,
+        },
+		computed: {
+		    ...mapGetters([ 'userInfo'  ]),
+
+		},
+		props:['xmTestPlan','visible','opType','selProject','xmTestCasedb'],
+
+		watch: {
+	      'xmTestPlan':function( xmTestPlan ) {
+	        if(xmTestPlan){
+	            this.editForm = {...xmTestPlan};
+	        }
+
+	      },
+	      'visible':function(visible) { 
+	      	if(visible==true){
+ 	      		this.initData()
+	      	}
+	      } 
+	    },
+		data() {
+			return {
+			    currOpType:'add',//add/edit
+ 				load:{ list: false, edit: false, del: false, add: false },//查询中...
+				dicts:{
+					testPlanStatus:[],
+					testPlanTcode:[],
+
+				},//下拉选择框的所有静态数据 params={categoryId:'all',itemCodes:['sex']} 返回结果 {sex: [{id:'1',name:'男'},{id:'2',name:'女'}]}
+				editFormRules: {
+					 
+				},
+				editForm: {
+					id:'',name:'',casedbId:'',casedbName:'',projectId:'',projectName:'',cuserid:'',cusername:'',ctime:'',stime:'',etime:'',status:'',tcode:'',totalCases:'',okCases:'',errCases:'',igCases:'',blCases:'',productId:'',productName:'',flowState:''
+				},
+                maxTableHeight:300,
+			}//end return
+		},//end data
+		methods: {
+
+		    ...util,
+
+			// 取消按钮点击 父组件监听@cancel="editFormVisible=false" 监听
+			handleCancel:function(){
+				this.$refs['editFormRef'].resetFields();
+				this.$emit('cancel');
+			},
+			//新增、编辑提交XmTestPlan 测试计划父组件监听@submit="afterEditSubmit"
+			saveSubmit: function () {
+				this.$refs.editFormRef.validate((valid) => {
+					if (valid) {
+						this.$confirm('确认提交吗？', '提示', {}).then(() => { 
+							this.load.edit=true
+							let params = Object.assign({}, this.editForm);
+							var func=addXmTestPlan
+							if(this.currOpType=='edit'){
+							    func=editXmTestPlan
+							}
+							func(params).then((res) => {
+                                this.load.edit=false
+                                var tips=res.data.tips;
+                                if(tips.isOk){
+                                    this.editForm=res.data.data
+                                    this.initData()
+                                    this.currOpType="edit";
+                                    this.$emit('submit');//  @submit="afterAddSubmit"
+                                }
+                                this.$notify({ position:'bottom-left',showClose:true, message: tips.msg, type: tips.isOk?'success':'error' });
+                            }).catch( err =>this.load.edit=false);
+						});
+					}else{
+					    this.$notify({ showClose:true, message: "表单验证不通过，请修改表单数据再提交", type: 'error' });
+					}
+				});
+			},
+			initData: function(){
+			    this.currOpType=this.opType
+			    if(this.xmTestPlan){
+                    this.editForm = Object.assign({},this.xmTestPlan);
+                }
+
+                if(this.opType=='edit'){
+
+                }else{
+
+                }
+                this.editFormBak={...this.editForm}
+            },
+
+            editSomeFields(row,fieldName,$event){
+                if(this.opType=='add'){
+                    return;
+                }
+                let params={};
+                params['ids']=[row].map(i=>i.id)
+                
+				if(fieldName=='stime'){
+					params[fieldName]=$event.stime
+					params.etime=$event.etime
+				}else if(fieldName=='cuserid'){
+					params[fieldName]=$event[0].userid
+					params.cusername=$event[0].username
+				}else{
+					params[fieldName]=$event
+				}
+                var func = editSomeFieldsXmTestPlan
+                func(params).then(res=>{
+                  let tips = res.data.tips;
+                  if(tips.isOk){
+                    this.editFormBak=[...this.editForm]
+					this.$emit('edit-fields',params)
+                  }else{
+                    Object.assign(this.editForm,this.editFormBak)
+                    this.$notify({position:'bottom-left',showClose:true,message:tips.msg,type:tips.isOk?'success':'error'})
+                  }
+                }).catch((e)=>Object.assign(this.editForm,this.editFormBak))
+            },
+			onPorjectConfirm(row){
+				this.editForm.projectId=row.id
+				this.editForm.projectName=row.name
+				this.editForm.name=this.editForm.projectName+'-测试计划-V1.0'
+			}
+		},//end method
+		mounted() {
+		    this.$nextTick(() => {
+                initDicts(this);
+                this.initData()
+                this.maxTableHeight = util.calcTableMaxHeight(this.$refs.table.$el)
+            });
+		}
+	}
+
+</script>
+
+<style lang="scss" scoped>
+ .box{
+
+
+	.box-red{ 
+
+		background-color: #ff75750d;
+		height: 100px;
+		border-left-width: 2px;
+		border-left-color: red;
+		border-left-style: solid;  
+		align-items: center; 
+		line-height: 100px; 
+		text-align: center;
+		display:flex; 
+    	flex-direction: column;
+		.box-info{ 
+			display:flex; 
+			flex-direction: column;
+			margin-top: 20px;
+			height: 100px; 
+			line-height: 100px; 
+			.label{
+				color: #999;
+				height: 30px;
+				line-height: 30px;
+				font-size: 0.875rem;
+			}
+			.num{
+				
+				height: 30px;
+				line-height: 30px;
+				color:red ;
+				font-size: 30px;
+			}
+		}
+		
+	}
+	.box-green{ 
+		
+		background-color: #73d8970d;;
+		height: 100px;
+		border-left-width: 2px;
+		border-left-color: green;
+		border-left-style: solid; 
+		
+		align-items: center; 
+		line-height: 100px; 
+		text-align: center;
+		display:flex; 
+    	flex-direction: column;
+		.box-info{ 
+			display:flex; 
+			flex-direction: column;
+			margin-top: 20px;
+			height: 100px; 
+			line-height: 100px; 
+			.label{
+				color: #999;
+				height: 30px;
+				line-height: 30px;
+				font-size: 0.875rem;
+			}
+			.num{
+				
+				height: 30px;
+				line-height: 30px;
+				color:green ;
+				font-size: 30px;
+			}
+		}
+	}
+	.box-blue{ 
+
+		background-color: #5dcfff0d;
+		height: 100px;
+		border-left-width: 2px;
+		border-left-color: blue;
+		border-left-style: solid; 
+
+		align-items: center; 
+		line-height: 100px; 
+		text-align: center;
+		display:flex; 
+    	flex-direction: column;
+		.box-info{ 
+			display:flex; 
+			flex-direction: column;
+			margin-top: 20px;
+			height: 100px; 
+			line-height: 100px; 
+			.label{
+				color: #999;
+				height: 30px;
+				line-height: 30px;
+				font-size: 0.875rem;
+			}
+			.num{
+				
+				height: 30px;
+				line-height: 30px;
+				color:blue ;
+				font-size: 30px;
+			}
+		}
+	}
+
+	.box-orange{ 
+
+		background-color: #ffcd5d0d;
+		height: 100px;
+		border-left-width: 2px;
+		border-left-color: orange;
+		border-left-style: solid; 
+
+		align-items: center; 
+		line-height: 100px; 
+		text-align: center;
+		display:flex; 
+    	flex-direction: column;
+		.box-info{ 
+			display:flex; 
+			flex-direction: column;
+			margin-top: 20px;
+			height: 100px; 
+			line-height: 100px; 
+			.label{
+				color: #999;
+				height: 30px;
+				line-height: 30px;
+				font-size: 0.875rem;
+			}
+			.num{
+				
+				height: 30px;
+				line-height: 30px;
+				color:orange ;
+				font-size: 30px;
+			}
+		}
+	}
+	box-font{
+		font-size: 0.875rem;
+	}
+ }
+</style>