vue-template-base/library/layouts/VabLayoutColumn/index.vue

<!--
 * @Author: xvying 1615026511@qq.com
 * @Date: 2022-10-31 11:55:17
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-02-03 16:10:34
 * @FilePath: index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--分栏布局 -->
<script lang="ts" setup>
  import { useSettingsStore } from '@/store/modules/settings'
  import { getSetting, getDictList, getFactory } from './api/index'
  import { settingKeys, dictsKey } from '@/config/key.config'
  import { logger } from '@/utils/index'
  defineProps({
    collapse: {
      type: Boolean,
      default() {
        return false
      },
    },
    fixedHeader: {
      type: Boolean,
      default() {
        return true
      },
    },
    showTabs: {
      type: Boolean,
      default() {
        return true
      },
    },
  })
  //获取工厂列表
  getFactory({ status: 1 })
  //定时suoping
  const settingsStore = useSettingsStore()
  const { theme } = storeToRefs(settingsStore)
  const { handleLock: _handleLock, handleUnLock: _handleUnLock } = settingsStore
  let lastTime: any
  let nowTime: any
  let countTime = 0
  let lockTime = 600000
  let setIntervalTime: any //定时器
  const setting: any = getSetting({
    keys: settingKeys,
  }).then((res) => {
    const configs = res.data.configs
    const mintu = configs ? Number(configs.system_auto_lock_minutes) : 0
    lockTime = mintu ? 1000 * 60 * mintu : 600000 //锁屏时间
    //设置定时器--并重新计算定时锁屏倒计时
    lastTime = Number(localStorage.getItem('lastTime')) //记录最后操作的时间
    nowTime = new Date().getTime() //当前时间
    countTime = lockTime - (nowTime - lastTime) //倒计时剩余时间---锁屏时间--无操作时间差
    logger('缓存锁屏剩余时间', countTime)
    if (countTime <= 0) {
      //上次操作时间大于定时时间显示锁屏窗口
      _handleLock()
    }
  })
  //默认加载参数配置项
  getDictList({ keys: dictsKey }).then((res) => {
    localStorage.setItem('dictsSetting', JSON.stringify(res.data.dicts))
  })
  //鼠标点击事件
  document.onmouseup = () => {
    //每次鼠标点击时先清除定时器
    logger('鼠标点击事件')
    clearInterval(setIntervalTime)
    if (settingsStore.getLock) {
      logger('锁屏中')
      return
    }
    const data = new Date().getTime() //当前时间
    localStorage.setItem('lastTime', data.toString())
    //设置定时器--并重新计算定时锁屏倒计时
    lastTime = Number(localStorage.getItem('lastTime')) //记录最后操作的时间
    nowTime = data //当前时间
    countTime = lockTime - (nowTime - lastTime) //倒计时剩余时间---锁屏时间--无操作时间
    logger('锁屏剩余时间', countTime)
    setIntervalTime = setInterval(() => {
      logger('执行锁屏操作')
      _handleLock()
    }, countTime)
  }
</script>

<template>
  <div
    class="vab-layout-column"
    :class="{
      fixed: fixedHeader,
      'no-tabs-bar': !showTabs,
    }"
  >
    <vab-column-bar />
    <div
      class="vab-main"
      :class="{
        ['vab-main-' + theme.columnStyle]: true,
        'is-collapse-main': collapse,
      }"
    >
      <div
        class="vab-layout-header"
        :class="{
          'fixed-header': fixedHeader,
        }"
      >
        <vab-nav />
        <vab-tabs v-show="showTabs" />
      </div>
      <vab-app-main />
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .vab-layout-column {
    .vab-main {
      &.is-collapse-main {
        &.vab-main-horizontal {
          margin-left: $base-left-menu-width-min * 1.3;

          :deep() {
            .fixed-header {
              width: calc(100% - #{$base-left-menu-width-min} * 1.3);
            }
          }
        }
      }
    }
  }
  :deep() {
    .el-button__text--expand {
      letter-spacing: 0;
    }
  }
</style>