增加用户名的显示和退出登录的操作

haoxuan

2024-04-25 ce58040e3959fc8b23fce4289b170a6dbc2e71a4

增加用户名的显示和退出登录的操作

 package-lock.json

@@ -14,6 +14,7 @@
        "downloadjs": "^1.4.7",
        "element-ui": "^2.15.13",
        "faker": "^5.5.3",
        "js-cookie": "^3.0.5",
        "lodash": "^4.17.21",
        "vue": "^2.6.14",
        "vue-router": "^3.5.1",
@@ -7036,6 +7037,14 @@
        "@sideway/pinpoint": "^2.0.0"
      }
    },
    "node_modules/js-cookie": {
      "version": "3.0.5",
      "resolved": "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.5.tgz",
      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
      "engines": {
        "node": ">=14"
      }
    },
    "node_modules/js-message": {
      "version": "1.0.7",
      "resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",

 package.json

@@ -14,6 +14,7 @@
    "downloadjs": "^1.4.7",
    "element-ui": "^2.15.13",
    "faker": "^5.5.3",
    "js-cookie": "^3.0.5",
    "lodash": "^4.17.21",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
@@ -37,4 +38,4 @@
  "gitHooks": {
    "pre-commit": "lint-staged"
  }
}
}

 src/api/admin/user.js

New file
@@ -0,0 +1,20 @@
import request from "@/common/untils/request.js"

// 重置密码
export function initPassword(data) {
  return request({
    url: "/api/user/initPassword",
    method: "post",
    data,
  });
}
// 设置新密码
export function modifiedPwd(data) {
  return request({
    url: "/api/user/modifiedPwd",
    method: "post",
    data,
  });
}



 src/components/layout/components/appHeader/components/updatePassWord.vue

New file
@@ -0,0 +1,182 @@
<template>
  <div>
    <el-dialog
      title="修改密码"
      :visible.sync="editConfig.dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form :label-position="labelPosition" :model="ruleForm"  :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="旧密码:" prop="oldPass">
          <el-input type="password" clearable v-model="ruleForm.oldPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码:" prop="pass">
          <el-input type="password" clearable v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码:" prop="checkPass">
          <el-input type="password"  clearable v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')" style="margin-bottom:20px;">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { modifiedPwd } from "@/api/admin/user";
export default {
  props: {
    editCommonConfig: {
      type: Object,
      default: () => {
        return {
          dialogVisible:false,
          userId:"",
        };
      },
    },
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入旧密码'));
      }else{
        callback();
      }
    };
    var validatePass1 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      editConfig:this.editCommonConfig,
      // dialogVisible: false
      ruleForm: {
        oldPass:'',
        pass: '',
        checkPass: '',
      },
      rules: {
        oldPass: [
          { validator: validatePass, trigger: 'blur', required: true, }
        ],
        pass: [
          { validator: validatePass1, trigger: 'blur', required: true, }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur', required: true, }
        ],
      },
      labelPosition:"left",
      userId : '', 
    };
  },
  created(){
    
  },
  computed: {

  },
  mounted() {
  },
  watch: {

  },
  methods: {
    //
    environmentType(){
      let type
      if (location.href.includes('192.168.20.119')) {
        type = 'test'
      } else if (location.href.includes('192.168') || location.href.includes('localhost')) {
        type = 'dev'
      } else {
        type = 'prod'
      }
      return type
    },
    //
    getApsPage(){
      // 首页部署在各个环境的端口
      const loginPathMap = {
        prod:`//${window.location.hostname}:9080`,
        test:`//192.168.20.119:9080`,
        // 想跳到本地启动的登录页的话需要把dev改成你本地项目路径
        dev: `//192.168.8.108:8080`
      }

      return loginPathMap[this.environmentType()]
    },
    handleClose(done){
      done();
    },
    modifiedPwd(params){
      modifiedPwd(params).then((res)=>{
        if(res.code==200){
          this.editConfig.dialogVisible=false
          alert("密码修改成功,请重新登录!")
          window.location = this.getApsPage()+'/login'
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm,"看看表单")
          this.modifiedPwd({
            userId:this.editConfig.userId,
            oldPwd:this.ruleForm.oldPass,
            newPwd:this.ruleForm.pass,
          })

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

  },
  components: {

  },
};
</script>

<style scoped lang="scss">
.el-form{
  margin-top:20px;
}
::v-deep {
  .el-form-item__content{
    display: flex;
    flex-direction: row-reverse;
  }
  .el-dialog__header{
    .el-dialog__title{
      font-size:18px;

    }
  }
  .el-form{
    margin:20px;
  }

}
</style>

 src/components/layout/components/appHeader/index.vue

@@ -1,25 +1,110 @@
<template>
  <div class="sales-lead">
    <div class="header-title">{{ headerTitle }}</div>
    <div class="header-user-info"></div>
    <div class="header-user-info">
      <div class="avatar"><el-avatar icon="el-icon-user-solid"></el-avatar></div>
      <el-dropdown @command="handleCommand">
        <div class="el-dropdown-link">你好  {{ username }}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="logout">退出</el-dropdown-item>
          <!-- <el-dropdown-item @click.native="updatePwd">
            <d2-icon name="unlock" class="d2-mr-5" />
            修改密码
          </el-dropdown-item> -->
        </el-dropdown-menu>
      </el-dropdown>
      <UpdatePassWord :editCommonConfig="editConfig"></UpdatePassWord>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie"
import UpdatePassWord from "./components/updatePassWord"
export default {
  name: "SalesLead",
  name: "SalesLeads",
  props: {
    headerTitle: String
    headerTitle: {
      type:String,
      default:''
    }
  },
  components:{
    UpdatePassWord,
  },
  data() {
    return {}
    return {
      username: "",
      editConfig:{
        dialogVisible:false,
        userId:"",
      }
    }
  },
  created(){
    const userObj = Cookies.get('userObj');  
    if (userObj) {   
      let userInfo = JSON.parse(userObj); 
      this.editConfig.userId=userInfo.id
      this.username=userInfo.nickName
    } else {  
      console.log('Object not found in cookie');  
    }  
  },
  mounted() {
    // this.username = document.cookie.replace(/(?:(?:^|.*;\s*)username\s*=\s*([^;]*).*$)|^.*$/, "$1")
  },
  methods: {
    handleCommand(command) {
      console.log(command)
      if (command === "logout") {
        this.$router.push({ path: "/login" })
    environmentType() {
      let type
      if (location.href.includes("192.168.20.119")) {
        type = "test"
      } else if (location.href.includes("192.168") || location.href.includes("localhost")) {
        type = "dev"
      } else {
        type = "prod"
      }

      return type
    },
    getApsPage() {
      // 首页部署在各个环境的端口
      const loginPathMap = {
        prod: `//${window.location.hostname}:9080`,
        test: `//192.168.20.119:9080`,
        // 想跳到本地启动的登录页的话需要把dev改成你本地项目路径
        dev: `//192.168.8.113:8080`
      }
      return loginPathMap[this.environmentType()]
    },
    handleCommand(command) {
      if (command === "logout") {
        // this.$router.push({ path: "/login" })
        document.cookie = "cookieName=; path=/;"
        this.$confirm("确定要注销当前用户吗?", "注销用户", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            Cookies.remove("token")
            // window.location.href = 'http://localhost:8080/login'; //本地的智慧工厂-登录页
            window.location.href = "http:" + this.getApsPage() + "/login"
            this.$message({
              type: "success",
              message: "注销成功!"
            })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消注销"
            })
          })
      }
    },
    updatePwd(){
      this.editConfig.dialogVisible=true
    }
  }
}
@@ -29,24 +114,23 @@
<style lang="scss" scoped>
.sales-lead {
  display: flex;
  height: 66px;
  height: 50px;
  box-sizing: border-box;
  line-height: 66px;
  background-color: #fff;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.0588235294117647);
  line-height: 50px;
  background-color: $color-bg;
  border: 1px solid #ccc;
  .header-title {
    padding-left: 30px;
    padding-left: 16px;
    font-size: 18px;
    font-family: "Arial Negreta", "Arial Normal", "Arial";
    font-weight: 700;
    color: #227bde;
    font-weight: bold;
    color: #171718;
  }
  .header-user-info {
    margin-left: auto;
    margin-right: 20px;
    display: flex;
    .avatar {
      margin-top: 8px;
      margin-top: 4px;
      margin-right: 10px;
    }
  }