kmt/src/components/UserInfoView.vue

<template>
  <!-- <el-popover
                ref="userInfoView"
                placement="right"
                trigger="click" style="padding:0px"> -->
                <div class="userInfoViewCom" style="width: 100%;">
                    <div class="userImg" style="margin-left:43%">
                          <div style="height:4.6vw;width:4.6vw;border-radius: 50%;    border: 2px solid #00c1de;">
                            <img :src="userInfo.imagePath" style="width: 100%;height: 100%;border-radius: 50%">
                          </div>
                          <el-upload
                            class="upload-demo"
                            ref="upload"
                            :action="$dao.sysDao.uploadUserImg()"
                            :http-request="httpRequest"
                            :show-file-list="false"
                            :with-credentials="true"
                            :auto-upload="true">
                            <el-button slot="trigger" size="small" type="primary">更换头像</el-button>
                          </el-upload>
                          <div class="userInfoTitle">
                            <!-- <span style="color:#00c1de;font-size:16px">更换头像</span> -->
                            <span style="color:#eeeeee">|</span>
                            <i class="iconfont icon-bianji1" @click="editUserInfo"></i>
                          </div>
                    </div>
                  <hr style="margin:20px -12px 10px -12px;border: solid 1px #eeeeee;">
                  <div class="userInfoView">
                    <el-form ref="userInfo" :model="userInfo" label-width="60px" size="mini" label-position="left">
                      <i class="iconfont icon-dengluming"></i>
                      <el-form-item label="登陆名">
                        <el-input readonly v-model="userInfo.loginName"></el-input>
                      </el-form-item>
                      <i class="iconfont icon-xingming"></i>
                      <el-form-item label="姓名">
                        <el-input readonly v-model="userInfo.name"></el-input>
                      </el-form-item>
                      <i class="iconfont icon-youxiang"></i>
                      <el-form-item label="邮箱">
                        <el-input @blur="userInfo.email=userInfo.email.trim()" :class="{editUserInput: isUserInfoEdit === false}" :readonly="isUserInfoEdit"
                        v-model="userInfo.email"></el-input>
                      </el-form-item>
                      <i class="iconfont icon-dianhua"></i>
                      <el-form-item label="手机号">
                        <el-input @blur="userInfo.phone=userInfo.phone.trim()" :class="{editUserInput: isUserInfoEdit === false}" :readonly="isUserInfoEdit"
                        v-model="userInfo.phone"></el-input>
                      </el-form-item>
                    </el-form>
                  </div>
                  <div v-if="isUserInfoEdit===false">
                    <hr style="margin: -10px -12px 0px -12px;border: solid 1px #eeeeee;">
                    <div style="text-align:right;margin:10px 0px;">
                      <el-button @click="cancelEditUserInfo"  size="small">取消</el-button>
                      <el-button @click="saveUserInfo"  type="primary" size="small">保存</el-button>
                    </div>
                  </div>
                   <hr style="margin: 0px -12px 20px -12px;border: solid 1px #eeeeee;">
                  <!-- <i class="iconfont icon-tuichu"></i> -->
                  <div @click="handleCommand('logDown')" class="iconfont icon-tuichu" style="display: inline;cursor:pointer;padding-left: 15px;">
                    <span style="margin-left:10px">退出登录</span>
                  </div>
                </div>
              <!-- </el-popover> -->
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "model",
  props: {
    handleCommand: Function
  },
  data() {
    return {
      isUserInfoEdit: true,
      userInfo: {
        loginName: "",
        name: "",
        email: "",
        phone: "",
        imagePath: ""
      }
    };
  },
  watch: {},
  computed: {
    ...mapGetters(["getUser"])
  },
  methods: {
    ...mapActions(["setUser"]),
    // 编辑
    editUserInfo() {
      this.isUserInfoEdit = false;
    },
    // 取消
    cancelEditUserInfo() {
      this.isUserInfoEdit = true;
    },
    // 保存
    async saveUserInfo() {
      let self = this;
      let { success } = await self.$dao.sysDao.userInfoEdit(this.userInfo);
      if (success) {
        self.$util.messageMethod("success", "保存用户信息成功！");
        let u = self.getUser;
        u.email = self.userInfo.email;
        u.phone = self.userInfo.phone;
        self.setUser(u);
        this.$nextTick(() => {
          self.isUserInfoEdit = true;
        });
      }
    },
    httpRequest(file) {
      let self = this;
      // var fileObj = document.getElementByIdx_x_x("file").files[0]
      var FileController = file.action;
      // FormData 对象
      var form = new FormData();
      // form.append("__sid", this.$dao.getCookie('session.id'))
      form.append("file", file.file);
      // XMLHttpRequest 对象
      var xhr = new XMLHttpRequest();
      xhr.open("post", FileController, true);
      xhr.setRequestHeader(this.$dao.getHeadName(), this.$dao.getHeadValue());
      xhr.send(form);
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          // console.log('5555555')
          self.uploadSuccess(xhr.responseText);
        }
      };
    },
    uploadSuccess(data) {
      data = JSON.parse(data);
      // data = data.parseJSON()
      this.userInfo.imagePath = data.imagePath;
      console.log(this.userInfo.imagePath);
      let u = this.getUser;
      u.imagePath = this.userInfo.imagePath;
      this.setUser(u);
      // this.$emit('click', {
      //   img: this.userInfo.imagePath
      // })
    }
  },
  mounted() {
    this.userInfo.loginName = this.getUser.loginName;
    this.userInfo.name = this.getUser.name;
    this.userInfo.email = this.getUser.email;
    this.userInfo.phone = this.getUser.phone;
    this.userInfo.imagePath = this.getUser.imagePath;
    this.userInfo.id = this.getUser.id;
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.userInfoTitle {
  /* margin-left: 43%; */
  margin-top: 10px;
  display: inline-block;
}
.userInfoTitle span {
  margin: 0px 30px;
}
.userInfoTitle i {
  font-size: 16px;
  color: #00c1de;
  cursor: pointer;
}
.userInfoView {
  padding: 0px 15px;
}
.userInfoView i {
  position: absolute;
}
.el-popover {
  padding: 0px;
}
</style>