全部应用菜单弹窗

src/api/mdp/sys/menuFavorite.js

@@ -4,5 +4,4 @@ import config from '@/common/config'
 let base = config.getSysBasePath();
 
 export const userMenuFavoriteList = params => { return axios.get(`${base}/menu/menuFavorite/list`, { params: params }); };
-
 export const saveMenuFavoriteList = params => { return axios.post(`${base}/menu/menuFavorite/batchSaveMenuFavorites`, params); };

src/api/mdp/sys/modules.js

@@ -0,0 +1,7 @@
+import axios from '@/utils/request'
+import config from '@/common/config'
+
+let base = config.getSysBasePath();
+
+export const getAllMenuModule = params => { return axios.get(`${base}/sys/sys/mdp/menu/menuModule/list`, {params: params }); };
+export const getBuyMenuModule = params => { return axios.get(`${base}/sys/sys/mdp/menu/menuModuleBranch/list`, {params: params }); };

src/components/ModulesMenu/allMenus.vue

@@ -0,0 +1,179 @@
+<template>
+    <el-dialog
+      top="5vh"
+      class="moduleset"
+      :visible.sync="visible"
+      width="60%"
+      append-to-body>
+      
+        <div slot="title" class="dialog-title">
+            <p>全部应用</p>
+            <el-divider style="margin: 0 !important;"></el-divider>
+        </div>
+
+        <div class="toolBox">
+            <el-input  v-model="keyWords" @change="searchMenu" placeholder="模糊搜索, enter回车键搜索">
+                <i slot="prefix" class="el-input__icon el-icon-search"></i>
+            </el-input>
+            <div class="selectItem">
+                <div class="item" :class="{active: active == 'xmgl' }" @click="active = 'xmgl'">
+                    <span>项目管理系统</span>
+                </div>
+                <div class="item" :class="{active: active == 'oa' }" @click="active = 'oa'">
+                    <span>智慧协同办公系统</span>
+                </div>
+                <div class="item" :class="{active: active == 'mall' }" @click="active = 'mall'">
+                    <span>电商定制系统</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="nav" v-loading="menuLoading">
+            <div class="nav_item"  v-for="(item, index) in (selectMenus.length > 0 ?  selectMenus : menus[active])" :key="index" @click="selectItem(item, index)">
+                <img :src="item.logoUrl" alt="">
+                <span>{{item.name}}</span>
+                <el-divider></el-divider>
+                <div class="desc">
+                   <el-button @click="goBuy(item)" v-if="!item.isBuy" style="width:70px;" type="primary" round>购买</el-button>
+                   <span class="buyAfter" v-else>（已购买）</span>
+                </div>
+            </div>
+        </div>
+        
+    </el-dialog>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import {getAllMenuModule, getBuyMenuModule} from '@/api/mdp/sys/modules'
+import {modulesOfIcon} from "./modulesOfIcon.js";
+
+export default {
+    props: ['value'],
+    computed: {
+        ...mapGetters([
+            'userInfo'
+        ]),
+        visible: {
+            get() {
+                return this.value
+            },
+            set(val) {
+                this.$emit('input', val)
+            }
+        }
+    },
+    watch: {
+        'value': {
+            handler(nval, oval) {
+               if(nval) {
+                   this.getAllModules();
+               }
+            }
+        },
+        'keyWords': 'filterModule'
+    },
+    data() {
+        return {
+            menuLoading: false,
+            selectMenus: [],
+            active: "xmgl",
+            menus: {},
+            keyWords: null,
+            filterVal: '',
+        }
+    },
+
+    methods: {
+
+        searchMenu(val) {
+            this.keyWords = val;
+        },
+
+        filterModule() {
+            if(this.keyWords == null || this.keyWords == "" || this.keyWords == undefined) {
+                this.selectMenus = [];
+                return;
+            }
+            let val = this.keyWords;
+            let tempArr = [];
+            this.menus.mall.forEach(element => {
+                if(element.name.indexOf(val) != -1) {
+                    tempArr.push(element);
+                }
+            });
+            this.menus.oa.forEach(element => {
+                if(element.name.indexOf(val) != -1) {
+                    tempArr.push(element);
+                }
+            });
+            this.menus.xmgl.forEach(element => {
+                if(element.name.indexOf(val) != -1) {
+                    tempArr.push(element);
+                }
+            });
+            this.selectMenus = tempArr;
+        },
+
+        selectItem() {},
+        goBuy(item) {
+            this.visible = false;
+            //前往购买页面
+            this.$router.push('/my/order/index')
+        },
+
+        //获取所有模块
+        getAllModules() {
+            this.menuLoading = true
+            getAllMenuModule({}).then(res => {
+                let tempData = res.data.data;
+                getBuyMenuModule({}).then(res2 => {
+                    let branchModules = res2.data.data;
+                    tempData.forEach(k => {
+                        branchModules.forEach(element => {
+                            if(k.id == element.moduleId) {
+                                k.isBuy = true;
+                            }
+                        });
+
+                        modulesOfIcon.forEach(element => {
+                            if(k.id == element.id) {
+                                k.logoUrl = element.logoUrl;
+                            }
+                        });
+                    })
+                    let xmMenus = tempData.filter(res => {return res.mcate == '2'})
+                    let oaMunus = tempData.filter(res => {return res.mcate == '1'})
+                    let mallMenus = tempData.filter(res => {return res.mcate == '3'})
+                    this.menus = {
+                        "xmgl": xmMenus,
+                        "oa" : oaMunus,
+                        "mall": mallMenus
+                    }
+                })
+            }).finally(() => this.menuLoading = false)
+        },
+
+
+    },
+
+    created() {
+        
+    }
+
+}
+</script>
+
+<style lang="scss">
+.moduleset .el-dialog__header {
+    padding: 0;
+}
+.moduleset .el-divider--horizontal {
+    margin: 0 !important;
+}
+</style>
+
+<style lang="scss" scoped>
+@import './index.scss';
+
+</style>

src/components/ModulesMenu/index.scss

@@ -0,0 +1,94 @@
+.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;
+        padding: 0 40px;
+
+        /deep/ .el-input--small .el-input__inner {
+            height: 40px;
+        }
+
+        .selectItem {
+            display: flex;
+            flex-direction: row;
+            height: 70px;
+            .active {
+                color: #409EFF;
+            }
+            .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;
+                    font-size: 16px;
+                }
+            }
+        }
+    }
+
+    .nav {
+        height: 400px;
+        overflow: auto;
+        display:flex;
+        flex-wrap:wrap;
+        padding: 0 20px;
+        margin-left: 20px;
+        padding-bottom: 40px;
+        .nav_item {
+            display: flex;
+            height: 210px;
+            flex-direction: column;
+            // width: calc((100% / 5) - 10px);
+            width: 170px;
+            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;
+            margin-right: 10px;
+            img { 
+                width: 94px;
+                height: 94px;
+                margin: 18px 18px 10px 18px;
+            }
+            
+            span {
+                font-size: 16px;
+                color: #7D7D7D;
+                line-height: 26px;
+                margin-bottom: 4px;
+            }
+
+            .buyAfter {
+                color: #409EFF;
+            } 
+
+            .desc{
+              margin-top: 12px;
+            }
+        }
+        .itemActive {
+            border: 2px solid #90B1F4;
+            box-shadow: 0px 3px 4px 0px rgba(186, 184, 184, 0.1);
+        }
+    }
+}

src/components/ModulesMenu/modulesOfIcon.js

@@ -0,0 +1,128 @@
+import mall from '@/assets/image/module/mall/mall_online_retailers.png'
+import mallMarketing from '@/assets/image/module/mall/mall_marketing.png'
+import mdpArc from '@/assets/image/module/oa/oa_content.png'
+import mdpSys from '@/assets/image/module/oa/oa_org.png'
+import oaAsset from '@/assets/image/module/oa/oa_assets.png'
+import oaAttendance from '@/assets/image/module/oa/oa_clock_in.png'
+import oaCar from '@/assets/image/module/oa/oa_car.png'
+import oaContract from '@/assets/image/module/oa/oa_contract.png'
+import oaCustomer from '@/assets/image/module/oa/oa_customer.png'
+import oaFile from '@/assets/image/module/oa/oa_archives.png'
+import oaFinance from '@/assets/image/module/oa/oa_finance.png'
+import oaMeeting from  '@/assets/image/module/oa/oa_meeting.png'
+import oaOffice from '@/assets/image/module/oa/oa_Office_supplies.png'
+import oaPerformance from '@/assets/image/module/oa/oa_KPI.png'
+import oaSchedule from '@/assets/image/module/oa/oa_schedule.png'
+import oaSeal from '@/assets/image/module/oa/oa_seal_center.png'
+import oaSupervision from  '@/assets/image/module/oa/oa_supervise.png'
+import xmAnalysis from '@/assets/image/module/xm/xm_Efficiency_management.png'
+import xmDevelopment from '@/assets/image/module/xm/xm_development.png'
+import xmPipeline from '@/assets/image/module/xm/xm_flow_line.png'
+import xmProduct from '@/assets/image/module/xm/xm_product_management.png'
+import xmProject from '@/assets/image/module/xm/xm_project_management.png'
+import xmTest from '@/assets/image/module/xm/xm_test.png'
+import xmCrowd from '@/assets/image/module/xm/xm_crowd-sourcing.png'
+
+
+export const modulesOfIcon = [
+    {
+        id: 'mall',
+        logoUrl: mall
+    },
+    {
+        id: 'mall-marketing',
+        logoUrl: mallMarketing
+    },  
+    {
+        id: 'mdp-arc',
+        logoUrl: mdpArc
+    },  
+    {
+        id: 'mdp-sys',
+        logoUrl: mdpSys
+    },  
+    {
+        id: 'oa-asset',
+        logoUrl: oaAsset
+    },  
+    {
+        id: 'oa-attendance',
+        logoUrl: oaAttendance
+    },  
+    {
+        id: 'oa-car',
+        logoUrl: oaCar,
+    },  
+    {
+        id: 'oa-contract',
+        logoUrl: oaContract
+    },  
+    {
+        id: 'oa-customer',
+        logoUrl: oaCustomer
+    },  
+    {
+        id: 'oa-file',
+        logoUrl: oaFile
+    },  
+    {
+        id: 'oa-finance',
+        logoUrl: oaFinance
+    },  
+    {
+        id: 'oa-meeting',
+        logoUrl: oaMeeting
+    },  
+    {
+        id: 'oa-office',
+        logoUrl: oaOffice
+    },  
+    {
+        id: 'oa-performance',
+        logoUrl: oaPerformance
+    },  
+    {
+        id: 'oa-schedule',
+        logoUrl: oaSchedule
+    },  
+    {
+        id: 'oa-seal',
+        logoUrl: oaSeal,
+    },  
+    {
+        id: 'oa-supervision',
+        logoUrl: oaSupervision
+    },  
+    {
+        id: 'xm-analysis',
+        logoUrl: xmAnalysis,
+    },  
+    {
+        id: 'xm-development',
+        logoUrl: xmDevelopment
+    },
+    {
+        id: 'xm-pipeline',
+        logoUrl: xmPipeline
+    },
+    {
+        id: 'xm-product',
+        logoUrl: xmProduct
+    },
+    {
+        id: 'xm-project',
+        logoUrl: xmProject
+    },
+    {
+        id: 'xm-test',
+        logoUrl: xmTest
+    },
+    {
+        id: 'xm-workload',
+        logoUrl: '',
+    },
+    {
+        id: 'xm-crowd',
+        logoUrl: xmCrowd,
+    }
+]

src/components/TopModules/index.vue

@@ -9,7 +9,7 @@
         </div>
       </div> -->
       <div class="module-item"> 
-        <div class="module-text" @click="drawer = true"  >
+        <div class="module-text" @click="menuVisible = true"  >
           <div class="box-info">全部应用</div> 
         </div>
       </div> 
@@ -21,18 +21,13 @@
       </div> 
       
       <div class="drawer-box">
-          <el-drawer  
+        <all-menus v-model="menuVisible"></all-menus>
+        <!-- <el-drawer  
           :visible.sync="drawer"
           :modal-append-to-body="false"
           :direction="direction">
           <div class="drawer">
             <div class="drawer-content">
-              <!--
-              <div class="drawer-content-input">
-                <el-input placeholder="请输入中文" v-model.trim="key" clearable prefix-icon = "el-icon-search" size="small" style="width:60%">
-                </el-input>
-              </div>
-              -->
               <div class="drawer-content-category" v-for="(item,index) in categorys" :key="index">
                 <div class="category-name" v-text="item.moduleName"></div>
                 <div class="category-list">
@@ -51,8 +46,10 @@
               </div>
             </div>
           </div>
-        </el-drawer>
+        </el-drawer> -->
       </div>
+
+
     </section>
 </template>
 
@@ -61,8 +58,10 @@
 import NProgress from 'nprogress' // progress bar  
 const topModulesData = require("./top_modules_"+process.env.CONTEXT+".js") 
 const allModulesData = require("./all_modules.js") 
+import allMenus from '../ModulesMenu/allMenus'
 
 export default {
+  components: {allMenus},
   created() {
   },
   data() { 
@@ -74,6 +73,7 @@ export default {
       topModules: topModulesData.default,
       //模块分类
       categorys:allModulesData.default,
+      menuVisible: false,
     }
   },
   watch: { 

src/views/order/index.vue

@@ -174,19 +174,17 @@
 </template>
 
 <script>
-import xmgl from '@/assets/image/module/xm/xm_project management.png'
+import xmgl from '@/assets/image/module/xm/xm_project_management.png'
 import csgl from '@/assets/image/module/xm/xm_test.png'
-import cpgh from '@/assets/image/module/xm/xm_product management.png'
-import xngl from '@/assets/image/module/xm/xm_Efficiency management.png'
-import lsx  from '@/assets/image/module/xm/xm_flow line.png'
+import cpgh from '@/assets/image/module/xm/xm_product_management.png'
+import xngl from '@/assets/image/module/xm/xm_Efficiency_management.png'
+import lsx  from '@/assets/image/module/xm/xm_flow_line.png'
 import zzjg from '@/assets/image/module/xm/mo_org.png'
 import zb   from '@/assets/image/module/xm/xm_crowd-sourcing.png'
 import kfpt from '@/assets/image/module/xm/xm_development.png'
 
 
 
-
-
 export default {
   data() {
     return {