item-management-web/src/views/home/index.vue

<template>
  <div class="home">
    <div class="menu-box"></div>
    <el-dialog :visible.sync="dialogFormVisible" :close-on-click-modal="false" :show-close="false" width="600px" custom-class="customClass">
      <div slot="title" class="dialog-title">
        <el-row>
          <el-icon class="el-icon-message-solid"></el-icon>
          <span>请先修改密码,再登录系统</span>
        </el-row>
      </div>
      <el-form :model="dialogForm" :rules="rules" ref="dialogForm" label-position="right"
               label-width="110px"
               style="width: 400px; margin-left:50px;">
        <el-form-item label="原密码" prop="originalPassword" :rules="{required: true, message: '请输入原密码', trigger: 'blur'}">
          <el-input v-model="dialogForm.originalPassword" type="password" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="新密码" prop="currentPassword" :rules="{required: true, message: '请输入新密码', trigger: 'blur'}">
          <el-input v-model="dialogForm.currentPassword" type="password" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="确认密码" prop="repeatPassword" :rules="{required: true, message: '请输入确认密码', trigger: 'blur'}">
          <el-input v-model="dialogForm.repeatPassword" type="password" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="notChagePsw()">暂不修改</el-button>
        <el-button type="primary" @click="savePass('dialogForm')">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'Home',
    components: {},
    data() {
      return {
        activeItem: {},
        dialogFormVisible:false,
        dialogForm:{},
        rules:{},
      }
    },
    computed: {
      ...mapGetters([
        'permission_menus'
      ]),
    },
    watch: {
      permission_menus: {
        immediate: true, // immediate选项可以开启首次赋值监听
        deep: true,
        handler(newv) {
          if (newv && newv.length) {
            const pswState = this.$store.getters.userInfo.passwordState;
            this.dialogFormVisible = pswState;
            this.activeItem = newv[0];
            if (!this.dialogFormVisible){
              this.jumpMenu(this.activeItem)
            }
          }
        }
      },
    },
    created() {
    },
    methods: {
      menusClick(item) {
        this.activeItem = item
      },
      jumpMenu(mn) {
        // 跳转涉及到 menuTree.vue   PermissionButton.vue    login

        let jumpItem = null

        function tree(data) {
          if (jumpItem) {
            return
          }
          if (data.menuType === '菜单' && data.pcUrl) {
            jumpItem = data
          } else {
            if (data.children && data.children.length > 0) {
              data.children.forEach(item => {
                tree(item)
              })
            }
          }
        }

        tree(mn)
        // console.log(jumpItem, 'jumpItem')

        if (jumpItem && jumpItem.pcUrl) {
          if (jumpItem.external) {
            if (jumpItem.ifNewTag === false) { // 当前页面
              this.$router.push({
                path: jumpItem.pcUrl,
                query: {
                  link: jumpItem.outerUrl?encodeURIComponent(jumpItem.outerUrl):''
                }
              })
            } else { // true 或未设置（兼容以前未设置的情况） 新开页面
              window.open(jumpItem.outerUrl)
            }
          } else {
            if (jumpItem.ifNewTag) { // 必须设为新开才新开，其他都是在当前页面。和上面相反
              this.$targetNewPage({
                path: jumpItem.pcUrl,
                query: {}
              })
            } else {
              this.$router.push({
                path: jumpItem.pcUrl,
                query: {}
              })
            }
          }
        } else {
          console.error(new Error('一级未找到菜单'))
        }
      },
      savePass(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.dialogForm.currentPassword.length!=8){
              this.$notify({
                title: '错误',
                message: '新密码必须是8位字符',
                type: 'error',
                duration: 3000
              });
              return
            }
            if (this.dialogForm.currentPassword != this.dialogForm.repeatPassword){
              this.$notify({
                title: '错误',
                message: '两次输入的密码不一致，请检查。',
                type: 'error',
                duration: 3000
              });
              return
            }
            this.$api.user.modifyPass(this.dialogForm).then(res => {
              if (res.code === 200) {
                this.$notify({
                  title: '成功',
                  message: '密码修改成功,请重新登录.',
                  type: 'success',
                  duration: 10000
                });
                this.dialogFormVisible = false;
                setTimeout(() => {
                    this.logout();
                }, 3000);
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      async logout() {
        await this.$store.dispatch('user/logout');
        // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
        this.$router.push(`/login`);
      },
      notChagePsw(){
        this.dialogFormVisible = false;
        this.jumpMenu(this.activeItem)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .home {
    background-color: #f5f5f5;
    min-height: calc(100vh - 60px);
    min-width: 1200px;

    .menu-box {
      display: flex;
      background-color: #ffffff;
      margin: 0 50px 20px 50px;
      padding: 20px 0;

      .left {
        width: 240px;

        .menu-1-item {
          display: flex;
          align-items: center;
          color: #666666;
          width: 190px;
          height: 45px;
          font-weight: 500;
          color: rgba(101, 101, 101, 1);
          padding-left: 25px;
          font-size: 16px;
          cursor: pointer;
          padding-right: 10px;

          &.active {
            color: #ffffff;
            background: linear-gradient(90deg, rgba(0, 108, 255, 1), rgba(0, 168, 255, 1));
            border-radius: 0 10px 10px 0;
          }

          .text {
            margin-left: 10px;
          }
        }
      }

      .right {
        flex: 1;

        .title {
          font-size: 16px;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          line-height: 35px;
          margin-bottom: 8px;

          &::before {
            content: '';
            display: inline-block;
            width: 5px;
            height: 16px;
            background: rgba(1, 141, 237, 1);
            margin-right: 10px;
            position: relative;
            top: 2px;
          }
        }

        .menu-2-box {
          display: flex;
          flex-wrap: wrap;
        }

        .menu-2-item {
          display: flex;
          align-items: center;
          color: #656565;
          font-size: 16px;
          width: 230px;
          height: 101px;
          background: rgba(255, 255, 255, 1);
          border-radius: 3px;
          padding-left: 20px;
          margin-right: 10px;
          margin-bottom: 10px;
          cursor: pointer;
          box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

          .text {
            margin-left: 16px;
          }
        }
      }
    }
  }
  /deep/.customClass{
    border-radius: 20px;
  }
  .dialog-title{
    .el-icon-message-solid{
      font-size: 30px;
      color: red;
    }
    span{
      margin-left: 10px;
      color: red;
      font-size: 20px;
    }
  }
</style>