From 8ac4200b7e9d66c8e52b6554c1f4d948d2d38e69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E8=A3=95=E8=B4=A2?= <cyc58469@163.com>
Date: Mon, 1 Aug 2022 10:06:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=B5=8B=E8=AF=95=E6=8A=A5?=
 =?UTF-8?q?=E5=91=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../xm/core/xmTestPlan/rpt/CompsCard.vue      | 186 ++++++++++++
 src/views/xm/core/xmTestPlan/rpt/CompsSet.vue | 269 ++++++++++++++++++
 src/views/xm/core/xmTestPlan/rpt/common.scss  |  10 +
 src/views/xm/core/xmTestPlan/rpt/index.scss   |  98 +++++++
 4 files changed, 563 insertions(+)
 create mode 100644 src/views/xm/core/xmTestPlan/rpt/CompsCard.vue
 create mode 100644 src/views/xm/core/xmTestPlan/rpt/CompsSet.vue
 create mode 100644 src/views/xm/core/xmTestPlan/rpt/common.scss
 create mode 100644 src/views/xm/core/xmTestPlan/rpt/index.scss

diff --git a/src/views/xm/core/xmTestPlan/rpt/CompsCard.vue b/src/views/xm/core/xmTestPlan/rpt/CompsCard.vue
new file mode 100644
index 00000000..c88f7e7b
--- /dev/null
+++ b/src/views/xm/core/xmTestPlan/rpt/CompsCard.vue
@@ -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>
diff --git a/src/views/xm/core/xmTestPlan/rpt/CompsSet.vue b/src/views/xm/core/xmTestPlan/rpt/CompsSet.vue
new file mode 100644
index 00000000..1f7fdd53
--- /dev/null
+++ b/src/views/xm/core/xmTestPlan/rpt/CompsSet.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/xm/core/xmTestPlan/rpt/common.scss b/src/views/xm/core/xmTestPlan/rpt/common.scss
new file mode 100644
index 00000000..0f8c598f
--- /dev/null
+++ b/src/views/xm/core/xmTestPlan/rpt/common.scss
@@ -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;
+    }
+}
\ No newline at end of file
diff --git a/src/views/xm/core/xmTestPlan/rpt/index.scss b/src/views/xm/core/xmTestPlan/rpt/index.scss
new file mode 100644
index 00000000..6af3f521
--- /dev/null
+++ b/src/views/xm/core/xmTestPlan/rpt/index.scss
@@ -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;
+            }
+        }
+    }
+}
+