DLBWG_CK/src/views/layout/index.vue

<!--  -->
<template>
  <div class="layout">
    <div class="top">
      <div class="left">
        <img src="../../assets/img/logo.png" alt="" />
        <h2>馆藏管理系统</h2>
        <div
          class="box"
          v-for="(item, index) in tabList"
          :key="index"
        >
          <a
            @click="toHome(index)"
            :class="{ active: $route.meta.myInd === index }"
          >
            {{ item.name }}
            <!-- v-show="isShow === index" -->
            <!-- <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" @click="pulldownShow=!pulldownShow">
        <div class="img">
          <img src="@/assets/img/user1.jpg" alt="" />
        </div>
        <span>{{ userData.realName }}</span>
        <i class="el-icon-caret-top" v-if="pulldownShow"></i>
        <i class="el-icon-caret-bottom" v-else></i>
        <!-- 点击箭头的显示和隐藏 -->
        <ul class="pulldown" v-show="pulldownShow">
          <li @click="isShow = true">修改密码</li>
          <li @click="loginOut">退出登录</li>
        </ul>
      </div>
    </div>
    <Router-view />

        <!-- 点击修改密码出现弹窗 -->
    <el-dialog title="修改密码" :visible.sync="isShow"  @close="btnX()">
      <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 slot="footer" class="dialog-footer">
        <el-button @click="btnX">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </div>
    </el-dialog>
  </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 {
      isShow: false,
      pulldownShow: false,
      // 修改密码
      form: {
        oldPassword: '',
        newPassword: '',
        checkPass: ''
      },
      // 用户信息
      userData: {},
      // 控制子菜单显示
      // isShow: 0,
      tabList: [
        {
          name: '首页',
          push: '/layout/home'
        },
        {
          name: '馆藏管理',
          push: '/layout/holding',
          son: [
            { name: '藏品登记', id: 0, ip: 100 },
            { name: '藏品总账', id: 3, ip: 200 },
            { name: '入库管理', id: 1, ip: 300 },
            { name: '出库管理', id: 2, ip: 400 },
            { name: '藏品修改', id: 4, ip: 500 },
            { name: '藏品注销', id: 5, ip: 600 }
          ]
        },
        // {
        //   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, ip: 700 },
            { name: '统计报表', id: 1, ip: 99999 },
            { name: '藏品移库', id: 2, ip: 800 }
          ]
        }
        // {
        //   name: '系统管理',
        //   push: '/layout/system',
        //   son: [
        //     { name: '用户管理', id: 2 },
        //     { name: '角色管理', id: 3 },
        //     { 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: {
  // 修改密码点击取消
    btnX () {
      this.$refs.ruleForm.resetFields()
      this.cut = false
      this.isShow = false
      this.form = {
        oldPassword: '',
        newPassword: '',
        checkPass: ''
      }
    },
    // 修改密码点击确定
    async btnOk () {
      await this.$refs.ruleForm.validate()
      try {
        await editPass(this.form)
        this.$message.success('修改成功')
        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(() => {})
      if (index === 1) this.$router.push('/layout/holding0').catch(() => {})
      if (index === 2) this.$router.push('/layout/statistics0').catch(() => {})
      if (index === 3) this.$router.push('/layout/system2').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' || temp2 === 'sys_user') {
        this.tabList.push(
          {
            name: '系统管理',
            push: '/layout/system',
            son: [
              { name: '用户管理', id: 2 },
              { name: '角色管理', id: 3 },
              { name: '系统日志', id: 1 }
            ]
          }
        )
      } // 不是超级管理员和系统管理员
    }
    // 获取用户权限数据
    // let temp2 = localStorage.getItem('daliCK_limits')
    // temp2 = JSON.parse(temp2)
    // // console.log(666, this.tabList[1].son, this.tabList[2].son)
    // const tempList1 = []
    // const tempList2 = []
    // temp2.forEach(v => {
    //   if (v.authority) {
    //     if ((this.tabList[1].son.filter(p => p.ip === v.id))[0]) tempList1.push((this.tabList[1].son.filter(p => p.ip === v.id))[0])
    //     if ((this.tabList[2].son.filter(p => p.ip === v.id))[0]) tempList2.push((this.tabList[2].son.filter(p => p.ip === v.id))[0])
    //   }
    // })
    // this.tabList[1].son = tempList1
    // tempList2.push({ name: '统计报表', id: 1, ip: 99999 })
    // this.tabList[2].son = tempList2
    // console.log(999, temp2)
  },
  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 {
      background-color: #3E5EB3;
      font-weight: 700;
    }
    .box {
      position: relative;
      cursor: pointer;
      margin: 0 10px;
      a{
        text-align: center;
        width: 94px;
        color: #fff;
        display: block;
        height: 68px;
        line-height: 68px;
      }
      ul {
        z-index: 9999;
        position: absolute;
        top: 66px;
        left: -18px;
        background-color: #001529;
        li {
          width: 130px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          color: #a5acb3;
          font-size: 14px;
        }
        li:hover {
          background-color: #3E5EB3;
          color: #fff;
        }
      }
    }
    .box:hover a {
      background-color: #3E5EB3;
    }
  }
  .right {
    cursor: pointer;
    color: #fff;
    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;
    }
    i {
      margin-top: 5px;
      margin-left: 5px;
    }
    .pulldown{
      z-index: 999;
      background-color: #fff;
      position: absolute;
      bottom: -74px;
      right: 0px;
      li {
        padding:10px 20px;
        height: 40px;
        color: #3E5EB3;
      }
      li:hover{
        background-color:#3E5EB3;
        color: #fff;
      }
    }
  }
}
</style>