优化

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

@@ -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>
                         </span>
+                        <span v-if="subPage=='testRpt'">
                         <el-divider direction="vertical"></el-divider>
-
+                        <el-button @click="showRptConfig">配置报告</el-button>
+                        </span>
                      </span>
                 </el-row> 
                 
@@ -37,7 +39,7 @@
                 </el-row>
                 
                 <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> 
             <xm-test-plan-mng v-else @select="onTestPlanSelect" :xm-test-casedb="xmTestCasedb"> </xm-test-plan-mng>
@@ -133,6 +135,9 @@ export default {
         onTestPlanSelect(row){
             this.activeIndex='testPlanCase'
             this.xmTestPlan=row
+        },
+        showRptConfig(){
+            this.$refs['rpt'].rptConfigVisible=true
         }
  
     },//end methods

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

@@ -1,9 +1,14 @@
 <template>
+    <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 class="my_grid" style="width: 100%; min-height: 800px; margin-top: 10px">
+                <div v-else style="width: 100%; min-height: 800px; margin-top: 10px">
                     <grid-layout
                         :layout.sync="layout"
                         :col-num="layoutColNum"
@@ -23,11 +28,19 @@
                             :h="item.h"
                             :i="item.i"
                             :key="item.i">
-                    <component :is="item.compName"></component>
+                            <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>
 
 <script>  
@@ -35,18 +48,31 @@
 import VueGridLayout from 'vue-grid-layout';
 import { mapGetters } from 'vuex'
 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 { initDicts,listXmRptConfig, delXmRptConfig, batchDelXmRptConfig,editSomeFieldsXmRptConfig } from '@/api/xm/core/xmRptConfig';
+
 export default {
     components: { 
         GridLayout: VueGridLayout.GridLayout,
         GridItem: VueGridLayout.GridItem,
         XmTestPlanMng,
         XmQuestionAgeDist,
-    },
+        CompsSet,
 
+    },
+    props:['bizId','rptConfigVisible'],
     computed: {
         ...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: {
@@ -55,6 +81,7 @@ export default {
 
     data() {
         return {
+            xmRptConfig:null,
             // 布局位置数据
             layout: [
                  { 
@@ -65,7 +92,7 @@ export default {
                     w: 12,
                     h: 4,
                     i: 0,
-                    compName:'xm-test-plan-mng', 
+                    compId:'xm-test-plan-mng', 
                 },
                 { 
                     // x: (this.layout.length * 6) % (this.layoutColNum || 12),
@@ -75,7 +102,7 @@ export default {
                     w: 12,
                     h: 4,
                     i: 1,
-                    compName:'xm-question-age-dist', 
+                    compId:'xm-question-age-dist', 
                 }
             ],
             // 布局列数
@@ -95,10 +122,18 @@ export default {
                     w: 12,
                     h: 4,
                     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>
 
 <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>

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

@@ -1,45 +1,18 @@
 <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_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="">
            <div class="desc">
-               <p>{{item.menuname}}</p>
+               <p>{{item.compName}}</p>
                <span>
-                  {{item.menudesc}}
+                  {{item.compDesc}}
                </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>
+</div>
 </template>
 
 <script>
@@ -51,73 +24,53 @@ import { mapGetters } from 'vuex'
  
 
 export default {
-    props: ['value'],
+    props: ['compIds' ],
     computed: {
         ...mapGetters(['userInfo']), 
-        visible: {
-            get: function () {
-                if(this.value) {
-                    //查询用户设置的模块
-                    
+        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 this.value;
-            },
-            set: function (val) {
-                this.menus.forEach(element => {
-                    element.isChecked = false;
-                });
-                this.$emit('input', val);
+            return comps;
         }
     },
-    },
 
     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: [
+            comps: [
                 {
-                    menuid: 'dsp',
+                    compId: 'dsp',
                     icon: img1,
-                    menuname: '待审批',
-                    menudesc: '可以直接显示全部待审批列表，也可根据审批分类详细筛选单条待审批事项',
+                    compName: '待审批',
+                    compDesc: '可以直接显示全部待审批列表，也可根据审批分类详细筛选单条待审批事项',
                     isChecked: false,
                 },
                 {
-                    menuid: 'wdrw',
+                    compId: 'wdrw',
                     icon: img2,
-                    menuname: '我的任务',
-                    menudesc: '可以直接显示全部任务列表，也可根据状态、类型详细筛选分类的任务',
+                    compName: '我的任务',
+                    compDesc: '可以直接显示全部任务列表，也可根据状态、类型详细筛选分类的任务',
                     isChecked: false,
                 },
                 {
-                    menuid: 'wdxm',
+                    compId: 'wdxm',
                     icon: img3,
-                    menuname: '我的项目',
-                    menudesc: '可以直接显示全部项目列表，也可根据项目状态产品筛选单条项目',
+                    compName: '我的项目',
+                    compDesc: '可以直接显示全部项目列表，也可根据项目状态产品筛选单条项目',
                     isChecked: false,
                 },
                 {
-                    menuid: 'wdcp',
+                    compId: 'wdcp',
                     icon: img4,
-                    menuname: '我的产品',
-                    menudesc: '可以直接显示全部产品列表，可新增我的产品',
+                    compName: '我的产品',
+                    compDesc: '可以直接显示全部产品列表，可新增我的产品',
                     isChecked: false,
                 }
             ],
@@ -126,34 +79,8 @@ export default {
     },
 
     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 { 
-        height: 350px;
         overflow: auto;
         padding:0px 10px 0 20px;
         display:flex;
@@ -219,7 +145,6 @@ export default {
             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;

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

@@ -1,13 +1,12 @@
 <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>
 
 <script>
@@ -24,19 +23,6 @@ export default {
     ...mapGetters([
       '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: {
@@ -44,26 +30,12 @@ export default {
 
   data() {
     return { 
-      compsSetVisible: false
+      rptConfigVisible:false,
     }
   },
 
   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();
-    }
-
   },