chore: remove useless code

Vben

2021-02-25 8a9ca498d70a0a4f66c073fe869fc6d8a3e79a55

 src/views/sys/lock/index.vue

@@ -1,154 +1,24 @@
<template>
  <div class="lock-page">
    <div class="lock-page__entry">
      <div class="lock-page__header">
        <img src="../../../assets/images/header.jpg" class="lock-page__header-img" />
        <p class="lock-page__header-name">{{ realName }}</p>
      </div>
      <BasicForm @register="register" v-if="!getIsNotPwd" />
      <Alert v-if="errMsgRef" type="error" :message="t('alert')" banner />
      <div class="lock-page__footer">
        <a-button type="default" class="mt-2 mr-2" @click="goLogin" v-if="!getIsNotPwd">
          {{ t('sys.lock.backToLogin') }}
        </a-button>
        <a-button type="primary" class="mt-2" @click="unLock(!getIsNotPwd)" :loading="loadingRef">
          {{ t('sys.lock.entry') }}
        </a-button>
      </div>
    </div>
  </div>
  <transition name="fade-bottom" mode="out-in">
    <LockPage v-if="getIsLock" />
  </transition>
</template>
<script lang="ts">
  import { defineComponent, ref, computed } from 'vue';
  import { Alert } from 'ant-design-vue';
  import { defineComponent, computed } from 'vue';
  import LockPage from './LockPage.vue';

  import { BasicForm, useForm } from '/@/components/Form';

  import { userStore } from '/@/store/modules/user';
  import { appStore } from '/@/store/modules/app';
  import { useI18n } from '/@/hooks/web/useI18n';

  import { lockStore } from '/@/store/modules/lock';
  export default defineComponent({
    name: 'LockPage',
    components: { Alert, BasicForm },

    name: 'Lock',
    components: { LockPage },
    setup() {
      const loadingRef = ref(false);
      const errMsgRef = ref(false);

      const { t } = useI18n('sys.lock');
      const [register, { validateFields }] = useForm({
        showActionButtonGroup: false,
        schemas: [
          {
            field: 'password',
            label: '',
            component: 'InputPassword',
            componentProps: {
              style: { width: '100%' },
              placeholder: t('placeholder'),
            },
            rules: [{ required: true }],
          },
        ],
      });
      const realName = computed(() => {
        const { realName } = userStore.getUserInfoState || {};
        return realName;
      const getIsLock = computed(() => {
        const { getLockInfo } = lockStore;
        const { isLock } = getLockInfo;
        return isLock;
      });

      const getIsNotPwd = computed(() => {
        if (!appStore.getLockInfo) {
          return true;
        }
        return appStore.getLockInfo.pwd === undefined;
      });

      /**
       * @description: unLock
       */
      async function unLock(valid = true) {
        let password = '';
        if (valid) {
          try {
            const values = (await validateFields()) as any;
            password = values.password;
          } catch (error) {
            return;
          }
        }
        try {
          loadingRef.value = true;
          const res = await appStore.unLockAction({ password, valid });
          errMsgRef.value = !res;
        } finally {
          loadingRef.value = false;
        }
      }

      function goLogin() {
        userStore.loginOut(true);
        appStore.resetLockInfo();
      }

      return {
        register,
        getIsNotPwd,
        goLogin,
        realName,
        unLock,
        errMsgRef,
        loadingRef,
        t,
      };
      return { getIsLock };
    },
  });
</script>
<style lang="less" scoped>
  @import (reference) '../../../design/index.less';

  .lock-page {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    display: flex;
    width: 100vw;
    height: 100vh;
    background: url(../../../assets/images/lock-page.jpg) no-repeat;
    background-size: 100% 100%;
    align-items: center;
    justify-content: flex-end;

    &__entry {
      position: relative;
      width: 400px;
      // height: 260px;
      padding: 80px 50px 50px 50px;
      margin-right: 50px;
      background: #fff;
      border-radius: 6px;
    }

    &__header {
      position: absolute;
      top: -35px;
      left: calc(50% - 45px);
      width: auto;
      text-align: center;

      &-img {
        width: 70px;
        border-radius: 50%;
      }

      &-name {
        margin-top: 5px;
      }
    }

    &__footer {
      text-align: center;
    }
  }
</style>