examcloud-admin-web/src/modules/portal/views/home/Home.vue

<template>
  <el-container>
    <el-header style="padding: 0"
      ><el-menu class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1">
          <router-link to="/home/overview"> 云平台 </router-link></el-menu-item
        >
        <el-submenu index="2" style="float: right" class="fr">
          <template slot="title">{{ user.rootOrgName }}</template>
          <el-menu-item index="2-1" style="width: 100px">
            <a href="javascript:void(0)" @click="openUserDialog">
              {{ user.displayName }}
            </a></el-menu-item
          >
          <el-menu-item index="2-2" style="width: 100px"
            ><a href="javascript:void(0)" @click="logout">
              <span>退出</span>
            </a></el-menu-item
          >
        </el-submenu>
      </el-menu>
    </el-header>

    <el-container>
      <HomeSide :key="$route.path" />
      <el-container>
        <router-view></router-view>
        <el-footer>&copy; 启明泰和 2018</el-footer>
      </el-container>
    </el-container>

    <!-- 添加用户信息弹出框 -->
    <el-dialog title="个人信息" :visible.sync="userDialog">
      <el-tabs>
        <el-tab-pane label="用户权限" name="first">
          <el-form :inline="true" label-position="right" label-width="90px">
            <el-row :gutter="10">
              <el-col>
                <el-tag
                  v-for="role in user.roleList"
                  :key="role.roleId"
                  type="primary"
                  style="margin-left:10px;margin-top:10px;"
                >
                  {{ role.roleName }}
                </el-tag>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="second">
          <el-form
            :inline="true"
            :model="passForm"
            ref="passForm"
            :rules="passRules"
            label-position="right"
            label-width="90px"
          >
            <el-row>
              <el-form-item label="密码" label-width="120px" prop="pass">
                <el-input
                  type="password"
                  class="pull_length"
                  v-model="passForm.pass"
                  auto-complete="off"
                  placeholder="请输入密码"
                ></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item
                label="确认密码"
                label-width="120px"
                prop="checkPass"
              >
                <el-input
                  type="password"
                  class="pull_length"
                  v-model="passForm.checkPass"
                  auto-complete="off"
                  placeholder="请输入确认密码"
                ></el-input>
              </el-form-item>
            </el-row>
            <el-row style="margin-left:100px">
              <el-button type="primary" @click="submitForm">保 存</el-button>
              <el-button @click="userDialog = false;">取 消</el-button>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </el-container>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { USER_SIGNOUT } from "../../store/user";
import { core_api } from "../../constants/constants";
import HomeSide from "./HomeSide.vue";

export default {
  name: "Home",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.passForm.checkPass !== "") {
          this.$refs.passForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入确认密码"));
      } else if (value !== this.passForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      userDialog: false,
      passForm: { pass: "", checkPass: "" },
      passRules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }]
      }
    };
  },
  components: { HomeSide },
  computed: {
    ...mapState({ user: state => state.user })
  },
  methods: {
    ...mapActions([USER_SIGNOUT]),
    openUserDialog() {
      this.passForm = { pass: "", checkPass: "" };
      this.userDialog = true;
    },
    //保存密码
    submitForm() {
      this.$refs.passForm.validate(valid => {
        if (valid) {
          var userId = this.user.userId;
          var password = encodeURIComponent(this.passForm.pass);
          var url =
            core_api +
            "/user/password?userId=" +
            userId +
            "&password=" +
            password;
          this.$http.put(url).then(() => {
            this.$notify({
              type: "success",
              message: "修改密码成功！"
            });
            this.resetForm();
            this.userDialog = false;
          });
        } else {
          console.log("error submit!");
          return false;
        }
      });
    },
    //重置
    resetForm() {
      this.$refs.passForm.resetFields();
    },
    isSuperAdmin() {
      if (!this.user.roleList) {
        return false;
      }
      for (let role of this.user.roleList) {
        if (role.roleCode == "SUPER_ADMIN") {
          return true;
        }
      }
      return false;
    },
    logout() {
      this.$http
        .post(core_api + "/auth/logout")
        .then(() => {
          const orgId = this.user.rootOrgId;
          this.USER_SIGNOUT();
          window.name = "";
          this.$router.replace({
            path: "/login" + "?orgId=" + orgId
          });
        })
        .catch(response => {
          const orgId = this.user.rootOrgId;
          if (response.status == 500) {
            this.$notify({
              showClose: true,
              message: response.data.desc,
              type: "error"
            });
          }
          this.USER_SIGNOUT();
          window.name = "";
          this.$router.replace({
            path: "/login" + "?orgId=" + orgId
          });
        });
    }
  }
};
</script>

<style lang="css" scoped>
.fr {
  float: right;
}
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
body > .el-container {
  margin-bottom: 40px;
}
</style>