apt-nl/src/pages/shells/index/index.vue

<template>
  <div class="index-container">
    <div class="header-container">
      <div class="title-container">
        <span class="company-logo"></span>
      </div>
      <div class="horizontal-menu-container">
        <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
          <el-menu-item :index="menu.index" v-for="menu in menus" :key="menu.index">{{menu.label}}</el-menu-item>
        </el-menu>
      </div>
      <div class="state-container">
        <div class="state-item">运行</div>
        <div class="state-line"></div>
        <div class="state-item">自动</div>
        <div class="state-line"></div>
        <div class="state-item">中文<i class="icon_dropdown"></i></div>
      </div>
      <div class="user-container">
        <div class="elec-qty-wrap">
          <div class="elec-qty"></div>
        </div>
        <div class="elec-txt">90%</div>
        <div class="header_user_wraper">
          <div class="header_user_wraper_inn" @click="showDropdown">
            <div class="iconfont icon_admin"></div>
            <div class="elec-txt">{{ username }}</div>
          </div>
          <div v-show="dropdown" class="header_dropdown_wraper">
            <ul>
              <li @click="showDialog">修改密码</li>
              <li @click="toEixt">退出</li>
            </ul>
            <div class="popper__arrow"></div>
          </div>
        </div>
      </div>
      <div class="time-container">
        <jxTime></jxTime>
      </div>
    </div>
    <router-view></router-view>
    <jxDialog
    ref="child"
    title="修改密码"
    :unclick="unclick"
    @toSure="toSureDialog"
    >
      <div class="form_wraper">
        <div class="form">
          <div class="form_item">
            <div class="form_item__label"><i>*</i>旧的密码</div>
            <div class="form_item__content">
              <input type="password" class="form_item__input" v-model="oldpassword">
            </div>
          </div>
        </div>
        <div class="form">
          <div class="form_item">
            <div class="form_item__label"><i>*</i>新的密码</div>
            <div class="form_item__content">
              <input type="password" class="form_item__input" v-model="newpassword1">
            </div>
          </div>
        </div>
        <div class="form">
          <div class="form_item">
            <div class="form_item__label"><i>*</i>新的密码</div>
            <div class="form_item__content">
              <input type="password" class="form_item__input" v-model="newpassword2">
            </div>
          </div>
        </div>
      </div>
    </jxDialog>
  </div>
</template>

<script>
import jxTime from '@components/time.vue'
import jxDialog from '@components/dialog.vue'
import { updatePass } from '@config/getData2.js'
export default {
  components: {
    jxTime,
    jxDialog
  },
  data () {
    return {
      username: this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).user.username : '',
      activeIndex: this.$store.getters.defaultActive,
      menus: [{
        label: '首页',
        index: '1',
        router: '/homehome'
      }, {
        label: '任务管理',
        index: '2',
        router: '/CarryPoint'
      }, {
        label: '故障管理',
        index: '3',
        router: '/ErrorDeal'
      }, {
        label: '车辆信息',
        index: '4',
        router: '/vehiclestatus'
      }, {
        label: '示教',
        index: '5',
        router: '/teach'
      }, {
        label: '地图',
        index: '6',
        router: ''
      }, {
        label: '系统管理',
        index: '7',
        router: '/user'
      }],
      dropdown: false,
      oldpassword: '',
      newpassword1: '',
      newpassword2: '',
      unclick: false
    }
  },
  watch: {
    oldpassword (val) {
      if (val === '' || this.newpassword1 === '' || this.newpassword2 === '') {
        this.unclick = true
      } else {
        this.unclick = false
      }
    },
    newpassword1 (val) {
      if (val === '' || this.oldpassword === '' || this.newpassword2 === '') {
        this.unclick = true
      } else {
        this.unclick = false
      }
    },
    newpassword2 (val) {
      if (val === '' || this.oldpassword === '' || this.newpassword1 === '') {
        this.unclick = true
      } else {
        this.unclick = false
      }
    }
  },
  methods: {
    handleSelect (key) {
      this.activeIndex = key
      this.$store.dispatch('getDefaultActive', key)
      this.dropdown = false
      this.$router.push({
        path: this.menus[Number(key) - 1].router
      })
    },
    showDropdown () {
      this.dropdown = !this.dropdown
    },
    showDialog () {
      this.dropdown = false
      this.$refs.child.active = true
      this.oldpassword = ''
      this.newpassword1 = ''
      this.newpassword2 = ''
      this.unclick = true
    },
    toSureDialog () {
      this._updatePass()
    },
    async _updatePass () {
      this.$refs.child.disabled = true
      if (!this.oldpassword) {
        this.toast('旧密码不能为空')
        this.$refs.child.disabled = false
        return
      }
      if (!this.newpassword1) {
        this.toast('新密码不能为空')
        this.$refs.child.disabled = false
        return
      }
      if (!this.newpassword2) {
        this.toast('输入新密码')
        this.$refs.child.disabled = false
        return
      }
      if (this.newpassword1 !== this.newpassword2) {
        this.toast('新密码输入不一致，请重新输入')
        this.$refs.child.disabled = false
        return
      }
      try {
        let res = await updatePass(this.newpassword1, this.oldpassword)
        this.toast(res.desc)
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      } catch (e) {
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      }
    },
    toEixt () {
      this.$store.dispatch('setSignOut')
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.index-container
  _wh(100%, 100%)
.header-container
  _fj()
  _wh(100%, 61px)
  padding 0 10px
  border-bottom 2px solid #f1f1f1
.title-container
  _fj(center)
  _wh(130px, 61px)
.company-logo
  display block
  _wh(100%, 100%)
  background url(../../../images/aio/logo_1.png) left center / 100% auto no-repeat
.horizontal-menu-container
  height 61px
>>>.el-menu-item
  padding 0 7px
.state-container
  _fj()
.user-container
  _fj()
.time-container
  _fj()
.state-item
  border 1px solid #54C0B3
  border-radius 4px
  _font(15px,25px,#54C0B3,,center)
  padding 0 7px
.state-line
  _wh(2px,20px)
  opacity 0.3
  background #8991A6
  margin 0 10px
.elec-qty-wrap
  position relative
  width 15px
  height 25px
  border 1px solid #dddddd
  margin-right 2px
.elec-qty
  position absolute
  width 100%
  height 90%
  left 0
  bottom 0
  background-color #54C0B3
  // background-color #fa6400
.elec-txt
  _font(15px, 25px, #909399,,left)
.icon_admin
  _font(20px, 25px, #54C0B3,,left)
  margin-right 2px
>>>.el-menu
  border-right none
.header_user_wraper
  padding 0 10px
  height 59px
  margin 0 10px
  position relative
  &:hover
    background-color #f0f0f0
.header_user_wraper_inn
  _fj()
  _wh(100%, 100%)
.header_dropdown_wraper
  position absolute
  top 52px
  left 0
  z-index 1000
  width 100%
  background-color #fff
  border 1px solid #ebeef5
  border-radius 4px
  box-shadow 0 2px 12px 0 rgba(0,0,0,.1)
  padding 10px 0
  ul
    width 100%
    li
      width 100%
      _font(14px, 36px, #909399,,center)
      padding 0 10px
      &:hover
        background-color #ffc3a7
        color #fd6a35
.popper__arrow
  position absolute
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 6px;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.03))
  top: -6px;
  left: 32px;
  margin-right: 3px;
  border-top-width: 0;
  border-bottom-color: #ebeef5;
  &:after
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    content: " ";
    border-width: 6px;
    top: 1px;
    margin-left: -6px;
    border-top-width: 0;
    border-bottom-color: #fff;
</style>