wms / wms-cloud-ui · Files

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <div class="text-center">
              <div>
                <img
                  src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                  title="点击上传头像"
                  class="upload-avatar"
                />
              </div>
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <div>
                  <svg-icon icon-class="user" />用户名称
                </div>
                <div>{{ infoData.userName }}</div>
              </li>
              <li class="list-group-item">
                <div>
                  <svg-icon icon-class="telephone" />手机号码
                </div>
                <div class="pull-right">{{ infoData.phonenumber }}</div>
              </li>
              <li class="list-group-item">
                <div>
                  <svg-icon icon-class="mail" class="mailSvg" />用户邮箱
                </div>
                <div class="pull-right">{{ infoData.email }}</div>
              </li>
              <li class="list-group-item">
                <div>
                  <svg-icon icon-class="depart" class="departSvg" />所属部门
                </div>
                <div class="pull-right">{{ infoData.dept.deptName }}</div>
              </li>
              <li class="list-group-item">
                <div>
                  <svg-icon icon-class="role" class="roleSvg" />所属角色
                </div>
                <div class="pull-right">{{ infoData.roles[0].roleName }}</div>
              </li>
              <li class="list-group-item">
                <div>
                  <svg-icon icon-class="date" class="dateSvg" />创建日期
                </div>
                <div class="pull-right">{{ infoData.createTime }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>基本资料</span>
          </div>
          <div class="text item">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="基本资料" name="basicInfor">
                <el-form
                  ref="infoForm"
                  :label-width="labelWidth"
                  :model="infoForm"
                  :rules="infoRules"
                >
                  <el-form-item label="用户昵称" prop="nickName" size="small">
                    <el-input v-model="infoForm.nickName"></el-input>
                  </el-form-item>
                  <el-form-item label="手机号码" prop="phonenumber" size="small">
                    <el-input v-model="infoForm.phonenumber"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱" prop="email" size="small">
                    <el-input v-model="infoForm.email"></el-input>
                  </el-form-item>
                  <el-form-item label="性别" prop="sex" size="small">
                    <el-radio-group v-model="infoForm.sex">
                      <el-radio label="0">男</el-radio>
                      <el-radio label="1">女</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" size="small" @click="submitForm('infoForm')">保存</el-button>
                    <el-button type="danger" size="small" @click="resetForm('infoForm')">关闭</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="修改密码" name="changePass">
                <el-form
                  :model="passForm"
                  status-icon
                  :rules="passRules"
                  ref="passForm"
                  :label-width="labelWidth"
                  class="demo-ruleForm"
                >
                  <el-form-item label="旧密码" prop="oldPassword" size="small">
                    <el-input
                      type="password"
                      v-model="passForm.oldPassword"
                      autocomplete="off"
                      placeholder="请输入旧密码"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="新密码" prop="newPassword" size="small">
                    <el-input
                      type="password"
                      v-model="passForm.newPassword"
                      autocomplete="off"
                      placeholder="请输入新密码"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="确认密码" prop="confirmPassword" size="small">
                    <el-input
                      type="password"
                      v-model="passForm.confirmPassword"
                      autocomplete="off"
                      placeholder="请确认密码"
                    ></el-input>
                  </el-form-item>
                  <el-form-item size="small">
                    <el-button type="primary" size="small" @click="submitForm2('passForm')">保存</el-button>
                    <el-button type="danger" size="small" @click="resetForm2('passForm')">关闭</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { profile, updateProfile, updatePwd } from "@/api/system/user.js";
export default {
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.passForm.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      activeName: "basicInfor",
      labelPosition: "left",
      labelWidth: "80px",
      infoData: {},
      infoForm: {
        userId: "",
        nickName: "",
        phonenumber: "",
        email: "",
        sex: "",
      },
      infoRules: {
        nickName: [
          {
            required: true,
            message: "用户昵称不能为空",
            trigger: ["blur", "change"],
          },
        ],
        phonenumber: [
          {
            required: true,
            message: "手机号码不能为空",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: ["blur", "change"],
          },
        ],
        email: [
          {
            required: true,
            message: "邮箱地址不能为空",
            trigger: ["blur", "change"],
          },
          {
            type: "email",
            message: "'请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
      },
      passForm: {
        oldPassword: "",
        newPassword: "",
        confirmPassword: "",
      },
      passRules: {
        oldPassword: [
          {
            required: true,
            message: "旧密码不能为空",
            trigger: ["blur", "change"],
          },
        ],
        newPassword: [
          {
            required: true,
            message: "新密码不能为空",
            trigger: ["blur", "change"],
          },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: ["blur", "change"],
          },
        ],
        confirmPassword: [
          {
            required: true,
            message: "确认密码不能为空",
            trigger: ["blur", "change"],
          },
          {
            required: true,
            validator: equalToPassword,
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  methods: {
    profile() {
      profile()
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            let data = res.data;
            this.infoData = data;
            let info = {
              userId: data.userId,
              nickName: data.nickName,
              phonenumber: data.phonenumber,
              email: data.email,
              sex: data.sex,
            };
            this.infoForm = Object.assign({}, info);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          updateProfile(this.infoForm)
            .then(res => {
              console.log(res);
              if (res.code == 200) {
                this.$message.success("修改成功");
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submitForm2(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          updatePwd(this.passForm.oldPassword, this.passForm.newPassword)
            .then( res => {
              console.log(res);
              if (res.code == 200) {
                this.$message.success(res.msg);
                this.$refs[formName].resetFields();
              }else {
               this.$message.error(res.msg);
              }
            })
            .catch((err) => {
              console.log(err);
              
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm2(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created() {
    this.profile();
  },
};
</script>
<style lang="scss" scoped>
.upload-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.list-group {
  padding-left: 0;
  .list-group-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e7eaec;
    border-top: 1px solid #e7eaec;
    margin-bottom: -1px;
    padding: 11px 0;
    font-size: 14px;
    .emailSvg {
      font-size: 22px;
    }
    .departSvg {
      font-size: 16px;
    }
    .roleSvg {
      font-size: 16px;
    }
    .dateSvg {
      font-size: 14px;
    }
  }
}
</style>