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>
                  <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 | rounding}}</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()
  },
  filters: {
    rounding(value) {
      return value.toFixed(2)
    }
  },
  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>