DLBWG_CK/src/views/layout/index.vue

<!--  -->
<template>
  <div class="layout">
    <div class="top" @mouseleave="isShow = 0">
      <div class="left">
        <img src="@/assets/img/logo.png" alt="" />
        <h2>馆藏管理系统</h2>
        <div
          class="box"
          @mouseenter="isShow = index"
          v-for="(item, index) in tabList"
          :key="index"
        >
          <a
            @click="toHome(index)"
            :class="{ active: $route.meta.myInd === index }"
          >
            {{ item.name }}
            <ul v-show="isShow === index" @mouseenter="isShow = index">
              <li
                v-for="(val, ind) in item.son"
                :key="ind"
                @click="skip(item, val.id,val.name)"
              >
                {{ val.name }}
              </li>
            </ul>
          </a>
        </div>

        <!-- <router-link to="/layout/holding0" :class='{active:$route.meta.myInd===1}'>馆藏管理
        <ul>
          <li>藏品登记</li>
        </ul>
        </router-link>
        <router-link to="/layout/collect0" :class='{active:$route.meta.myInd===2}'>征集品管理</router-link>
        <router-link to="/layout/statistics0" :class='{active:$route.meta.myInd===3}'>库房管理</router-link>
        <router-link to="/layout/system0" :class='{active:$route.meta.myInd===4}'>系统管理</router-link> -->
      </div>
      <div class="right">
        <div class="img">
          <img src="@/assets/img/user1.jpg" alt="" />
        </div>
        <span>{{ userData.realName }}</span>
        <span class="loginOut" @click="isShowPass=!isShowPass">修改密码</span>
        <span class="loginOut" @click="loginOut">退出登录</span>
        <!-- 修改密码 -->
        <div class="editPass" v-show="isShowPass">
          <el-form
            :model="form"
            label-width="100px"
            :rules="rules"
            ref="ruleForm"
          >
            <el-form-item label="旧密码：" prop="oldPassword">
              <el-input
                v-model="form.oldPassword"
                placeholder="请输入"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item label="新密码：" prop="newPassword">
              <el-input
                v-model="form.newPassword"
                placeholder="请输入"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item label="确定新密码：" prop="checkPass">
              <el-input
                v-model="form.checkPass"
                placeholder="请输入"
                show-password
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="button">
            <el-button size="small" type="primary" @click="editPass">确 定</el-button>
            <el-button size="small" @click="isShowPass=!isShowPass">取 消</el-button>
          </div>
        </div>
      </div>
    </div>
    <Router-view />
  </div>
</template>

<script>
import { loginOut, editPass } from '@/apis/home'
export default {
  name: 'Layout',

  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    const validatePass2 = (rule, value, callback) => {
      if (value !== this.form.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      isShowPass: false,
      // 修改密码
      form: {
        oldPassword: '',
        newPassword: '',
        checkPass: ''
      },
      // 用户信息
      userData: {},
      // 控制子菜单显示
      isShow: 0,
      tabList: [
        {
          name: '首页',
          push: '/layout/home'
        },
        {
          name: '馆藏管理',
          push: '/layout/holding',
          son: [
            { name: '藏品登记', id: 0 },
            { name: '藏品总账', id: 3 },
            { name: '入库管理', id: 1 },
            { name: '出库管理', id: 2 },
            { name: '藏品修改', id: 4 },
            { name: '藏品注销', id: 5 }
          ]
        },
        // {
        //   name: '征集管理',
        //   push: '/layout/collect',
        //   son: [
        //     { name: '征集品总账', id: 0 },
        //     { name: '征集品提用', id: 1 },
        //     { name: '征集品修改', id: 3 },
        //     { name: '征集品注销', id: 2 }
        //   ]
        // },
        {
          name: '库房管理',
          push: '/layout/statistics',
          son: [
            { name: '库房设置', id: 0 },
            { name: '统计报表', id: 1 }
          ]
        },
        {
          name: '系统管理',
          push: '/layout/system',
          son: [
            { name: '用户管理', id: 2 },
            { name: '系统日志', id: 1 }
          ]
        }
      ],
      rules: {
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        oldPassword: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 点击修改密码

    async editPass () {
      try {
        await this.$refs.ruleForm.validate()
        await editPass(this.form)
        this.$message.success('修改成功')
        // 发请求，清空数据
        await loginOut()
        localStorage.removeItem('daliCK')
        localStorage.removeItem('daliCK_token')
        this.$router.push('/login')
      } catch (error) {
        this.$message.error('旧密码错误')
      }
    },
    // 退出登录
    loginOut () {
      this.$confirm('确定退出码?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 发请求，清空数据
          await loginOut()
          localStorage.removeItem('daliCK')
          localStorage.removeItem('daliCK_token')
          this.$router.push('/login')
          this.$message({
            type: 'success',
            message: '退出成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消.'
          })
        })
    },
    skip (item, ind, name) {
      this.$router.push(item.push + ind).catch(() => {})
      this.isShow = 0
      // 如果从别的tab栏点击藏品总账，就自动刷新页面获取最新信息  location.reload(true)
      this.$nextTick(() => {
        setTimeout(() => {
          if (name === '藏品总账' || name === '征集品总账') location.reload(true)
        }, 500)
      })
    },
    toHome (index) {
      if (index === 0) this.$router.push('/layout/home').catch(() => {})
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    // 进来显示用户信息
    const userData = localStorage.getItem('daliCK')
    this.userData = JSON.parse(userData).user
    // 获取用户角色权限标识
    let temp = localStorage.getItem('daliCK')
    temp = JSON.parse(temp)
    if (temp) {
      const temp2 = temp.role[0]
      if (temp2 !== 'sys_admin') this.tabList.pop() // 不是超级管理员
    }
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.layout {
  .top {
    min-width: 1142px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 68px;
    background-color: #001529;
  }
  .left {
    .active {
      color: #fff;
    }
    display: flex;
    align-items: center;
    & > img {
      margin-left: 15px;
    }
    h2 {
      color: #fff;
      margin-right: 30px;
    }
    .active {
      color: #fff;
    }
    .box {
      position: relative;
      cursor: pointer;
      margin: 0 30px;
      ul {
        z-index: 9999;
        position: absolute;
        top: 43px;
        left: -32px;
        background-color: #001529;
        li {
          width: 130px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          color: #a5acb3;
          font-size: 14px;
        }
        li:hover {
          background-color: #1890ff;
          color: #fff;
        }
      }
    }
    .box:hover a {
      color: #fff;
    }
  }
  .right {
    position: relative;
    .editPass {
      .button{
        width: 100%;
        display: flex;
        justify-content: center;
      }
      /deep/.el-form-item__label{
        color: #fff;
      }
      padding: 20px;
      z-index: 9999;
      position: absolute;
      top: 68px;
      right: 0px;
      width: 300px;
      // background: rgba(0,0,0,.8);
      background-color: #001529;
    }
    .loginOut {
      cursor: pointer;
    }
    display: flex;
    align-items: center;
    margin-right: 50px;
    .img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    & > span {
      margin-left: 15px;
    }
  }
}
</style>