版本信息前台显示

src/api/config.js

@@ -15,6 +15,8 @@ export default {
     'getSmsWithResetPassword': '/api/user/userver/getSmsWithResetPassword',
     'resetPassword': '/api/user/user/resetPassword',
     'getAccessdMenu': '/api/user/user/getUserOrgMenu',  //获取左侧菜单项
+    'getVersionInner':'api/knowledgeman/versionInfo/getVersionInfoInner',  //获取内部版本信息
+    'getVersionOuter':'api/knowledgeman/versionInfo/getVersionInfoOuter',  //获取外部版本信息
     'getUserEnumsData': '/api/user/getUserEnumsData',   //获取用户枚举数据
     'getDiagbotManEnumsData':'/api/diagbotman/getDiagbotManEnumsData',      //获取产品枚举类型
     /* 朗通后台相关接口 */

src/api/index.js

@@ -102,6 +102,12 @@ export default {
   getAccessdMenu() {
     return axios.post(urls.getAccessdMenu);
   },
+  getVersionInner(){
+    return axios.post(urls.getVersionInner);
+  },
+  getVersionOuter(){
+    return axios.post(urls.getVersionOuter);
+  },
   getUserEnumsData() {
     return axios.post(urls.getUserEnumsData);
   }

src/components/common/HomePage.vue

@@ -8,6 +8,13 @@
             </div>
                  <lt-menu v-if="menuWrappers&&menuWrappers.length" v-bind:role="getRole"
                  v-bind:data="menuWrappers"></lt-menu>
+            <div class="version">
+                <p>
+                    <span>版本信息：</span>
+                    <a href="javascript:void(0)" @click="showVersion">{{versionName}}</a>
+                    <i v-if="isNewV"><img src="../../images/new.png" alt=""/></i>
+                </p>
+            </div>
         </el-aside>
         <el-container>
             <el-header class="clearfix">
@@ -26,6 +33,13 @@
               <router-view v-if="ok" v-on:status-change="changeStatus"></router-view>
             </el-main>
         </el-container>
+        <el-dialog
+                title="版本信息"
+                :visible.sync="versionVisible"
+                width="50%"
+                class="version-info">
+            <div v-html="versionInfo"></div>
+        </el-dialog>
     </el-container>
 </template>
 
@@ -35,7 +49,7 @@
   import api from '@api/index.js';
   import userApi from '@api/user.js';
   import Console from '@components/user/Console.vue';
-
+  import newIcon from '../../images/new.png';
   export default {
     name: 'homepage',
     components: {
@@ -51,6 +65,11 @@
         authStatus: null,
         authStatusName:'',
         ok:false,           //是否已获取到菜单
+        versionName:'',
+        versionVisible:false,
+        versionInfo:'',
+        isNewV:false,
+        version:null,       //版本信息接口返回的数据
       }
     },
     computed: {
@@ -69,6 +88,7 @@
             }
             if(to.path=='/'){       // 退出时清空菜单
               this.menuWrappers=[];
+              this.isNewV = false;
             }
         }
     },
@@ -91,11 +111,50 @@
               const url = this.getRole=='user'?'/user/YH-KZT':'/admin/LT-KZT';
               this.$router.push({path:url});
             }
+            this.getVersionInfo();
           }
         }).catch((error) => {
           console.log(error);
         });
       },
+      isNewVersion(){           //判断是否为新版
+
+      },
+      getVersionInfo(){
+        const getInfo = this.getRole=='user'?api.getVersionOuter:api.getVersionInner;
+        getInfo().then((res)=>{
+          if (res.data.code == '0') {
+            const data = res.data.data;
+            this.fillVersionInfo(data);
+          }else{
+            this.$message(res.data.msg);
+          }
+        });
+      },
+      fillVersionInfo(data){
+        //进入时获取版本信息，如版本时间与localStorage中不一致或者一致但localStorage中未被点过，
+        // 则要显示更新图标
+        let htl = '<h3>当前版本：'+data.name+'<span>'+data.refreshTime.substr(0,10)+'</span></h3>';
+        let prags = data.detail||[];
+        this.versionName = data.name;
+        const versionTime = JSON.parse(localStorage.getItem('versionInfo-'+this.userLoginDTO.username));
+        if(!versionTime||(data.refreshTime===versionTime.date&&!versionTime.showed)){
+          this.isNewV = true;
+        }else{
+          this.isNewV = false
+        }
+        for(let i=0;i<prags.length;i++){
+            htl += '<p>'+prags[i].title+'</p><p>'+prags[i].description+'</p>';
+        }
+        this.versionInfo = htl;
+        this.version = {date:data.refreshTime};
+      },
+      showVersion(){
+        this.versionVisible = true;
+        this.version.showed = true;
+        this.isNewV = false;
+        localStorage.setItem('versionInfo-'+this.userLoginDTO.username,JSON.stringify(this.version));
+      },
       /*redirectPage(){
         const url = this.getRole=='user'?'/user':'/admin';
         this.$router.push({path:url});
@@ -143,9 +202,47 @@
     .admin .username{
         cursor: pointer;
     }
+    .version-info h3{
+        font-size: 14px;
+        margin-bottom: 20px;
+        span{
+            float: right;
+            font-weight: normal;
+        }
+    }
 </style>
 <style lang="less" scoped>
     @import '../../less/common.less';
+    .el-menu-vertical-demo.el-menu{
+        height: calc(100% - 120px);
+        overflow-y: auto;
+    }
+    .version{
+        position: fixed;
+        bottom: 0;
+        width: @aside-width;
+        min-width: 270px;
+        font-size: 12px;
+        /*text-indent: 50px;*/
+        text-align: center;
+        height:54px;
+        line-height: 54px;
+        background: #fff;
+        i{
+            display: inline-block;
+            width: 20px;
+            height: 16px;
+            img{
+                vertical-align: text-top;
+            }
+        }
+    }
+    .user .version a{
+        color: @userBase;
+    }
+    .admin .version a{
+        color: @adminBase;
+    }
     .user .logo {
         background: @userBase;
 

src/less/common.less

@@ -50,7 +50,7 @@
     color: #fff;
     height: @header-height;
     padding-top: 8px;
-    margin-bottom: 20px;
+    /*margin-bottom: 20px;*/
     box-sizing: border-box;
   }
 }
@@ -94,6 +94,19 @@
 } 
 
 /*element-ui 样式覆盖*/
+.el-dialog__header{
+  border-bottom: 1px #f0f0f0 solid;
+  padding: 10px 20px;
+  .el-dialog__headerbtn{
+    top: 14px;
+  }
+}
+.el-dialog__body{
+  padding: 20px 20px 30px;
+}
+.el-dialog__title{
+  font-size: 14px;
+}
 .demo-form-inline .el-input--mini .el-input__inner{
   width: 100px;
 }