锁屏

src/app-register.ts

@@ -82,6 +82,7 @@ import AppGroupSelect from './components/app-group-select/app-group-select.vue'
 import UpdatePwd from './components/app-update-password/app-update-password.vue'
 import AppMenuItem from './components/app-menu-item/app-menu-item.vue'
 import AppFullScren from './components/app-full-scren/app-full-scren.vue'
+import AppLockScren from './components/app-lock-scren/app-lock-scren.vue'
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
 // 全局挂载实体权限服务注册中心
@@ -107,6 +108,7 @@ export const AppComponents = {
         v.prototype.$viewTool = ViewTool;
         v.prototype.$uiActionTool = UIActionTool;
         v.component('app-full-scren',AppFullScren);
+        v.component('app-lock-scren',AppLockScren);
         v.component('input-box', InputBox);
         v.component('app-keep-alive',AppKeepAlive);
         v.component('tab-page-exp',TabPageExp);

src/components/app-lock-scren/app-lock-scren.vue

+<template>
+    <div class="lockscren">
+        <span>
+            <Icon type="md-lock" size="22" color="#aaa" @click="handleLock"/>
+            <el-dialog :title="this.$t('components.lockScren.title')"
+                :visible.sync="box"
+                width="30%"
+                append-to-body>
+            <el-form :model="form"
+                ref="form"
+                label-width="82px">
+            <el-form-item :label="this.$t('components.lockScren.label')"
+                prop="passwd"
+                :rules="[{ required: true, message: this.$t('components.lockScren.message')}]">
+            <el-input v-model="form.passwd"
+                :placeholder="this.$t('components.lockScren.placeholder')"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer"
+            class="dialog-footer">
+        <el-button type="primary" @click="handleSetLock">{{this.$t('components.lockScren.confirmButtonText')}}</el-button>
+      </span>
+    </el-dialog>
+        </span>
+    </div>
+</template>
+<script lang = 'ts'>
+import { Vue, Component, Prop, Model, Watch } from 'vue-property-decorator';
+import router from '@/pages/common/app-index-view/router';
+
+@Component({})
+export default class AppLockScren extends Vue{
+    
+    /**
+     * 对话框状态
+     */
+    public box: boolean = false;
+
+    /**
+     * 锁屏密码
+     */
+    public form: any = {passwd: ''};
+
+    /**
+     * 用户名
+     */
+    public user: any = {name: ''};
+
+    /**
+     * 点击锁屏图表展示对话框
+     */
+    public handleLock(){
+        this.box = true;
+    }
+
+    /**
+     * 锁屏确认
+     */
+    public handleSetLock(){
+        (this.$refs["form"] as any).validate((valid: any )=> {
+            if (valid) {
+                const username = this.user.name == '' ? 'visitor' : this.user.name;
+                const password = window.btoa(this.form.passwd);
+                const routerPath = window.btoa(this.$route.path);
+                sessionStorage.setItem('lockPassword',password);
+                sessionStorage.setItem('lockState','true');
+                sessionStorage.setItem('userName',username);
+                sessionStorage.setItem('routerPath',routerPath);
+                this.$router.push({ path: "/lock" });
+            }
+        });
+    }
+
+    /**
+     * 获取当前用户名
+     *
+     * @memberof AppUser
+     */
+    public mounted() {
+        let _user:any = {};
+        if(this.$store.getters.getAppData() && this.$store.getters.getAppData().context && this.$store.getters.getAppData().context.srfusername){
+            _user.name = this.$store.getters.getAppData().context.srfusername;
+        }
+        if(localStorage.getItem("user")){
+            let user:any = JSON.parse(localStorage.getItem("user") as string);
+            if(user && user.personname){
+                _user.name = user.personname;
+            }
+        }
+        Object.assign(this.user,_user);
+    }
+}
+
+</script>
+<style lang='less'>
+.lockscren{
+    cursor:pointer;
+    padding: 0 5px;
+}
+</style>
\ No newline at end of file

src/components/app-lock/app-lock.less

+.lock-container {
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    .title {
+      margin-bottom: 8px;
+      color: #333;
+    }
+    .el-icon-unlock{
+      font-size: 20px;
+    }
+    .el-icon-switch-button{
+      font-size: 20px;
+    }
+}
+.lock-container::before {
+    z-index: -999;
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url("/assets/img/lock_login.png");
+    background-size: cover;
+}
+.lock-form {
+    width: 300px;
+}
\ No newline at end of file

src/components/app-lock/app-lock.vue

+<template>
+  <div class="lock-container">
+    <div class="lock-form animated bounceInDown">
+      <div class="animated">
+        <h3 class="title">{{username}}</h3>
+        <el-input :placeholder="this.$t('components.lockScren.placeholder1')"
+                  type="password"
+                  class="input-with-select animated"
+                  v-model="passwd">
+          <el-button slot="append"
+                     icon="el-icon-unlock"
+                     size="25px"
+                     @click="handleLogin"></el-button>
+          <el-button slot="append"
+                     icon="el-icon-switch-button"
+                     size="25px"
+                     @click="handleLogout"></el-button>
+        </el-input>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang = 'ts'>
+import { Vue, Component, Prop, Model, Watch } from 'vue-property-decorator';
+
+@Component({})
+export default class AppLockIndex extends Vue{
+
+    /**
+     * 输入密码
+     */
+    public passwd: string = '';
+
+    /**
+     * 保存的密码
+     */
+    public lockpasswd: string = '';
+
+    /**
+     * 用户名
+     */
+    public username: string = '';
+
+    /**
+     * 锁屏前的页面路由
+     */
+    public path: string = '';
+
+    /**
+     * 获取锁屏相关信息
+     *
+     * @memberof AppLockIndex
+     */
+    public mounted() {
+      this.username = (sessionStorage.getItem('userName') as string);
+      this.lockpasswd = window.atob(sessionStorage.getItem('lockPassword') as string);
+      this.path = window.atob(sessionStorage.getItem('routerPath') as string);
+    }
+
+    /**
+     * 解除锁屏
+     * 
+     * @memberof AppLockIndex
+     */
+    public handleLogin(){
+        if(this.lockpasswd != this.passwd){
+            this.passwd = '';
+            this.$message({
+                message: (this.$t('components.lockScren.message1') as string),
+                type: "error"
+            });
+            return;
+        }
+        this.clearSession();
+        this.$router.push({ path: this.path});
+    }
+
+    /**
+     * 登出
+     * 
+     * @memberof AppLockIndex
+     */
+    public handleLogout(){
+        this.$confirm((this.$t('components.lockScren.promptInformation') as string), (this.$t('components.lockScren.prompt') as string), {
+            confirmButtonText: (this.$t('components.lockScren.confirmButtonText') as string),
+            cancelButtonText: (this.$t('components.lockScren.cancelButtonText') as string),
+            type: "warning"
+        }).then(() => {
+            this.clearSession();
+            const get: Promise<any> = this.$http.get('/v7/logout');
+            get.then((response:any) =>{
+                if (response && response.status === 200) {
+                    localStorage.removeItem('user');
+                    localStorage.removeItem('token');
+                    let leftTime = new Date();
+                    leftTime.setTime(leftTime.getSeconds() - 1);
+                    document.cookie = "ibzuaa-token=;expires=" + leftTime.toUTCString();
+                    this.$router.push({ name: 'login' });
+                }
+            }).catch((error: any) =>{
+                console.error(error);
+            })
+        });  
+    }
+
+    /**
+     * 清除锁屏时生成的session
+     */
+    public clearSession(){
+      sessionStorage.removeItem('lockPassword');
+      sessionStorage.removeItem('lockState');
+      sessionStorage.removeItem('userName');
+      sessionStorage.removeItem('routerPath');
+    }
+}
+
+</script>
+<style lang='less'>
+@import './app-lock.less';
+</style>
\ No newline at end of file