physical_examination_front/src/views/system/userinfo.vue

<template>
  <div>
    <basic-container>
      <avue-tabs :option="tabOption" @change="handleTabClick"></avue-tabs>
      <div v-if="index === 0">
        <avue-form :option="userInfoOption" v-model="form" @submit="handleSubmit"></avue-form>
      </div>
      <div v-else-if="index === 1"><avue-form ref="pwdForm" :option="userPwdOption" v-model="pwdform" @submit="handleSubmit2">
        </avue-form>
      </div>
    </basic-container>
  </div>
</template>

<script>
import { userInfoOption } from "@/option/user/info";
import { getUserInfo, updateInfo, updatePassword } from "@/api/system/user";
import md5 from 'js-md5';
import func from "@/util/func";


export default {
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.pwdform.newPassword1) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      index: 0,
      tabOption: {
        column: [{
          label: '个人信息',
          prop: '0',
        }, {
          label: '修改密码',
          prop: '1',
        },]
      },
      userInfoOption: userInfoOption,
      userPwdOption: {
        column: [{
          label: '原密码',
          span: 12,
          row: true,
          type: 'password',
          prop: 'oldPassword',
          rules: [{
            required: true,
            message: "请输入原密码",
            trigger: "blur"
          }]
        }, {
          label: '新密码',
          span: 12,
          row: true,
          type: 'password',
          prop: 'newPassword',
          rules: [{
            required: true,
            message: "请输入新密码",
            trigger: "blur"
          }]
        }, {
          label: '确认密码',
          span: 12,
          row: true,
          type: 'password',
          prop: 'newPassword1',
          rules: [{ validator: validatePass2, trigger: 'blur' }]
        }]
      },
      form: {},
      pwdform: {}
    };
  },
  created() {
    this.handleWitch();
  },
  methods: {
    handleSubmit(form, done) {
      updateInfo(form).then(res => {
        if (res.data.success) {
          this.$message({
            type: "success",
            message: "修改信息成功!"
          });
        } else {
          this.$message({
            type: "error",
            message: res.data.msg
          });
        }
        done();
      }, error => {
        window.console.log(error);
        done();
      })
    },
    handleSubmit2(form, done) {
      updatePassword(md5(form.oldPassword), md5(form.newPassword), md5(form.newPassword1)).then(res => {
        if (res.data.success) {
          this.$message({
            type: "success",
            message: "修改密码成功!"
          });
        } else {
          this.$message({
            type: "error",
            message: res.data.msg
          });
        }
        done();
      }, error => {
        window.console.log(error);
        done();
      })
    },
    handleWitch() {
      if (this.index === 0) {
        getUserInfo().then(res => {
          const user = res.data.data;
          this.form = {
            id: user.id,
            avatar: user.avatar,
            name: user.name,
            realName: user.realName,
            phone: user.phone,
            email: user.email,
          }
        });
      }
    },
    handleTabClick(tabs) {
      if(tabs.prop != '1'){
        this.$refs.pwdForm.resetForm();
      }
      this.index = func.toInt(tabs.prop);
      this.handleWitch();
    }
  }
};
</script>

<style></style>