skyeyesystem/frontend/Skyeye-sys-ui/src/layout/components/header-nav/index.js

import * as DT from 'dt-sdk'
import moment from 'moment'
import { constantRoutes } from '@/router'
import { mapMutations, mapGetters, mapActions } from 'vuex'
import ChangePassword from '@/layout/components/change-password/index.vue'
import { getTreeAllItems, judgeArrayRepeat } from '@/utils'
export default {
  name: 'Header',
  components: { ChangePassword },
  data() {
    const validateUsername = (rule, value, callback) => {
      // if (!validUsername(value)) {
      //   callback(new Error("请输入正确的用户名"));
      // } else {
      //   callback();
      // }
      callback()
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error(this.$t('login.validation.passwordMin')))
      } else {
        callback()
      }
    }
    return {
      tokenKey: window.config.tokenKey,
      current: this.$route.path,
      currentRoute: '',
      permissionRoutes: [],
      blackList: ['/', '/login'], // 路由黑名单，不创建导航的路由
      activeBar: {
        pos: 0,
        width: 10
      },
      userInfo: {
        name: 'Admin',
        photo: require('@/assets/img/common/user-default.png')
      },
      currentSceneId: null, // 当前场景 ID
      roleIdsLocale: [],
      visible: {
        login: false,
        changePassword: false
      },
      // 用户登录
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          // { required: true, trigger: 'blur', validator: validateUsername }
          { required: true, message: this.$t('login.username'), trigger: 'blur' }
        ],
        password: [
          { required: true, trigger: 'blur', validator: validatePassword }
        ]
      },
      passwordType: 'password',
      capsTooltip: false,
      loading: false,
      showDialog: false,
      redirect: undefined,
      otherQuery: {},
      bjTime2: '',
      activeIndex: '1',
      menus: [
        {
          key: 'device',
          value: '2',
          show: true
        },
        {
          key: 'task',
          value: '3',
          show: true
        },
        {
          key: 'picture',
          value: '4',
          show: true
        },
        {
          key: 'user',
          value: '5',
          show: true
        },
      ]
    }
  },
  computed: {
    ...mapGetters([
      'currentTime',
      'username',
      'userId',
      'sceneList',
      'sceneId',
      'sceneInfo',
      'routerArr',
      'roleIds',
      'menusChose'
    ]),
    /**
     * 北京时间
     * @author wangxueshen
     * @date 2022-04-19
     * @returns {any}
     */
    bjTime() {
      if (this.currentTime != '') {
        return moment(this.currentTime).format('YYYY-MM-DD HH:mm:ss')
      } else {
        return moment().format('YYYY-MM-DD HH:mm:ss')
      }
    },
  },
  watch: {
    roleIds: {
      handler: function (nv) {
        this.roleIdsLocale = nv
      },
      immediate: true
    },
    menusChose: {
      handler: function (nv) {
        this.activeIndex = nv
      },
      immediate: true
    },

    /**
     * 路由地址变化赋值给 current
     * @author wangxueshen
     * @date 2020-10-12
     * @param {string} val  路由地址
     * @returns {any}
     */
    '$route.path'(val) {
      // console.log(val)
      this.current = val
    }
  },
  created() {
    this.permissionRoutes = constantRoutes.filter(el => el.name)
  },
  mounted() {
    if (this.$refs.nav) {
      this.currentRoute = [].find.call(this.$refs.nav.children, li =>
        li.children[0].className.includes('active')
      )
      let { offsetWidth, offsetLeft } = this.currentRoute.children[0]
      this.activeBar = {
        pos: offsetLeft - 20,
        width: offsetWidth
      }
    }
    setInterval(() => {
      this.bjTime2 = moment().format('YYYY-MM-DD HH:mm:ss')
    }, 1000)
    // if (!this.username) {
    //   this.SET_USER_ID(localStorage.getItem('userId'))
    //   this.SET_USERNAME(localStorage.getItem('username'))
    //   console.log('刷新自己取', localStorage.getItem('userId'), localStorage.getItem('username'))
    // }
    if (this.username !== 'admin') {
      this.menus[3].show = false
    }
  },
  methods: {
    ...mapActions('user', ['logout', 'loginByTourist']),
    ...mapActions('app', ['reload']),
    ...mapMutations('app', ['SET_SCENE_ID', 'SET_SCENE_INFO', 'SET_MENUS_CHOSE']),
    ...mapMutations('user', ['SET_ROLES', 'SET_USER_ID', 'SET_USERNAME']),
    handleSelect(key) {
      this.SET_MENUS_CHOSE(key)
    },
    changeLocale(lang) {
      this.$i18n.locale = lang
      localStorage.setItem('locale', lang)
    },
    goHome() {
      this.SET_MENUS_CHOSE('1')
    },
    /**
     * 场景 ID 改变事件
     * @author wangxueshen
     * @date 2022-05-09
     * @param {any} val
     * @returns {any}
     */
    currentSceneIdChange(val) {
      // 更新 store 中的场景 ID
      this.SET_SCENE_ID(val)
      this.SET_SCENE_INFO(undefined)
      // 刷新页面
      this.reload()
    },
    /**
     *  导航点击事件
     * @author wangxueshen
     * @date 2022-05-09
     * @param {any} e
     * @returns {any}
     */
    navClick(e, parentClass) {
      this.current = this.$route.path
      const target = parentClass ? document.getElementsByClassName(parentClass)[0] : e.target
      let { offsetWidth, offsetLeft } = target
      this.activeBar = {
        pos: offsetLeft - 20,
        width: offsetWidth
      }
    },
    /**
     * 用户相关指令操作
     * @author WZW
     * @date 2022-04-21
     * @param {any} type
     * @returns {any}
     */
    handleCommand(type) {
      switch (type) {
        case 'modifyPassword':
          this.visible.changePassword = true
          break
        case 'logout':
          this.loading = true
          this.logout({ userId: this.userId, terminal: 0 }).then(() => {
            location.reload()
            //   this.loginByTourist().then(() => {
            //   this.$router.push('/')
            // })
          })
          break
      }
    },

    /********************* 用户登录方法 *******************************/
    showLogin() {
      this.visible.login = true
    },
    checkCapslock(e) {
      const { key } = e
      this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z'
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store
            .dispatch('user/login', this.loginForm)
            .then(() => {
              // this.loading = false
              location.reload()
              // TODO 清空游客信息，这样才会拿登录菜单
              // sessionStorage.removeItem('routerArr')
              // this.SET_ROUTER_ARR([])
              // this.reload()
              // this.$router.push({
              //   path: '/',
              // })
              // this.$router.push({
              //   path: this.redirect || '/',
              //   query: this.otherQuery
              // })
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
  },
  beforeDestroy() { },

  /************************登录与修改密码************************/
  afterLoginClose() { }
}