manage_invoice_ui/src/views/personal/personal.vue

<template>
  <div class="personal">
    <!-- 头部细节部分 -->
      <div class="title">
        <el-row>
          <el-col :span="24">
            <div class="top">
              <div class="geren">个人中心</div>
              <div class="line"></div>
              <div class="from">
                <table v-model="formUserList">
                  <tr>
                    <td><span>用户名</span></td>
                    <td><span>{{formUserList.userName}}</span></td>
                  </tr>

                  <tr>
                    <td><span>姓名</span></td>
                    <td><span>{{formUserList.name}}</span></td>
                  </tr>

                  <tr>
                    <td><span>企业名称</span></td>
                    <td><span>{{formUserList.company}}</span></td>
                  </tr>

                  <tr>
                    <td><span>手机号</span></td>
                    <td><span>{{formUserList.phone}}</span></td>
                  </tr>

                  <tr>
                    <td><span>余额</span></td>
                     <td><span>{{formUserList.fee}}</span></td>
                  </tr>

                  <tr>
                    <td><span>密码</span></td>
                     <td><span style="color: blue; cursor:pointer;" @click="ChangeThePassword">修改密码</span></td>
                  </tr>

                </table>
               </div>
            </div>
          </el-col>
        </el-row>

      </div>
      <!-- 重置密码 -->
      <el-dialog
        @close="handleEditDialogClose"
        :visible.sync="changepassword"
        style="font-size: 0px;">
        <div class="tou">用户--重置密码</div>
        <div class="line"></div>
        <el-form
          label-position="right"
          label-width="80px"
          :model="formList">
          <el-form-item label="用户名">
            <el-input v-model="formList.userName" auto-complete="off" placeholder="请输入用户"></el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="formList.password" type="password" auto-complete="off" placeholder="请输入新密码"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="changepassword = false" type="info">取 消</el-button>
          <el-button type="primary" @click="resetPassword">修 改</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
export default{
  data() {
    return {
      formUserList: {
        "userName":"",
        "password": "",
        "price": "",
        "id":"",
        "name": "",
        "phone":"",
        "roleId": "",
        "money": "",
        "isLock":"",
        "dutyParagraph": "",
        "company": "",
        "threshold": "",
        "autoUpdate": ""
      },
      // autoUpdate: 1,
      formupdateList: {
        "id": "",
        "autoUpdate": '',
      },
      formList: {
        "id":"",
        "userName":"",
        "password": "",
      },
      formthresholdList: {
        "id": "",
        "threshold": ""
      },
      changepassword: false
    }
  },
  created() {
    this.loadData();
  },
  methods: {
    async loadData() {
      this.formUserList.userId = sessionStorage.getItem('userId');
      this.formupdateList.id = sessionStorage.getItem('userId');
      this.formthresholdList.id = sessionStorage.getItem('userId');
        const response = await this.$http.get(`user/${this.formUserList.userId}`);
        if (response.data.code === 0) {
          this.formUserList = response.data.data;
          this.formupdateList.autoUpdate = response.data.data.autoUpdate;
        };
    },
    // 打开修改密码的弹框
    ChangeThePassword() {
      this.changepassword = true;
      this.formList.userName = this.formUserList.userName;
      this.formList.id = this.formUserList.id;
    },
    // 修改是否自动更新开票中的发票信息
    async updateInvoiceMessage() {
      this.formupdateList.autoUpdate = this.formupdateList.autoUpdate;
      const response = await this.$http.put(`user/auto`, this.formupdateList);
      if(response.data.code === 0) {
        this.loadData();
        this.$message({
          type: 'success',
          message: '修改成功'
        });
      }else {
        this.$message({
          type: 'error',
          message: '修改失败'
        });
      }
    },
    // 修改密码
    async resetPassword() {
      const response = await this.$http.put(`user/restPassword`, this.formList);
      if(response.data.code === 0) {
        this.loadData();
        this.changepassword = false;
        this.$router.push('/login');
        this.$message({
          type: 'success',
          message: '修改成功'
        });
      }else {
        this.$message({
          type: 'error',
          message: '修改失败'
        });
      }
    },
    //更改阈值
    async changeThreshold() {
      this.formthresholdList.id = this.formUserList.id;
      this.formthresholdList.threshold = this.formUserList.threshold;
      const response = await this.$http.put(`user`, this.formthresholdList);
      if(response.data.code === 0) {
        this.$message({
          type: 'success',
          message: '修改成功'
        });
      }else {
        this.$message({
          type: 'error',
          message: '修改失败'
        });
      }
    },
    handleEditDialogClose() {
      for (var key in this.formList) {
        this.formList[key] = '';
      };
    },
  }
};
</script>

<style>
.personal {
  border: 1px solid #d9d9d9;
  border-radius: 10px;
}
.personal .top {
  padding: 20px;
}
.personal .geren {
  font-size: 25px;
  text-align: center;
  padding-top: 15px;
}
.personal .line {
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
  height: 2px;
  background-color: #d9d9d9;
}
.personal .tou {
  font-size: 20px;
  height: 30px;
  line-height: 30px;
  padding-top: 15px;
}
.personal .el-dialog__header, .el-dialog__body {
  padding: 0 20px;
}
.personal  table {
  width: 100%;
  border-collapse:collapse;
}
.personal table th {
  border: 1px solid #96989f;
  text-align: center;
  height: 40px;
  line-height: 40px;
}
.personal table td {
  width: 50%;
  border: 1px solid #96989f;
  text-align: left;
  margin-left: 20px;
  height: 40px;
  line-height: 40px;
}
.personal table span {
  margin-left: 30px;
  font-size: 18px;
}
.personal .el-input__inner {
  height: 30px !important;
  line-height: 30px !important;
}
</style>