settlement/src/views/page/personalCenter/index.vue

<template>
  <div>
    <!-- 我的信息 -->
    <div class="content">
      <el-tabs v-model="activeInfoName">
        <!-- 个人信息 -->
        <el-tab-pane label="个人信息" name="info">
          <el-form  ref="dataForm" :rules="rules" :model="temp1" label-width="100px">
            <el-form-item label="用户编码：" prop="loginId">
              <el-input style="width: 40%; margin-right: 40px"
              v-model.trim="temp1.loginId" readonly></el-input>
            </el-form-item>
            <el-form-item label="用户名：" prop="userName">
              <el-input style="width: 40%; margin-right: 40px" 
              placeholder="请输入用户名"
              v-model.trim="temp1.userName"></el-input>
            </el-form-item>
            <!-- <el-form-item label="机构：" prop="orgName">
              <el-input style="width: 40%; margin-right: 40px" 
              v-model="temp1.orgName"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="年龄：" prop="age">
              <el-input style="width: 40%; margin-right: 40px" 
              v-model.trim="temp1.age"
              placeholder="请输入"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="性别：" prop="gend">
              <el-select 
              style="width: 40%; margin-right: 40px" 
              v-model="temp1.gend"
              placeholder="请选择性别"
              >
                <el-option
                  v-for="item in shiOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="联系方式：" prop="coninfo">
              <el-input style="width: 40%; margin-right: 40px" 
              v-model.trim="temp1.coninfo"
              placeholder="请输入联系方式"></el-input>
            </el-form-item>
            <!-- <el-form-item label="身份证号：" prop="idCard">
              <el-input style="width: 40%; margin-right: 40px" 
              v-model.trim="temp1.idCard"
              placeholder="请输入身份证号"></el-input>
            </el-form-item> -->
            <el-form-item label="邮箱号：" prop="email">
              <el-input style="width: 40%; margin-right: 40px" 
              v-model.trim="temp1.email"
              maxlength="40"
              placeholder="请输入邮箱号"></el-input>
            </el-form-item>
            <!-- <el-form-item label="部门：" prop="dept">
              <el-input style="width: 40%; margin-right: 40px" 
              v-model.trim="temp1.dept"
              placeholder="请输入部门"></el-input>
            </el-form-item>
            <el-form-item label="所学专业：" prop="proftech">
              <el-input style="width: 40%; margin-right: 40px" 
              v-model.trim="temp1.proftech"
              placeholder="请输入所学专业"></el-input>
            </el-form-item>
            <el-form-item label="职称：" prop="profttl">
              <el-input style="width: 40%; margin-right: 40px" 
              v-model.trim="temp1.profttl"
              placeholder="请输入职称"></el-input>
            </el-form-item> -->
          </el-form>
        
          <div style="margin-top:40px;margin-left:10%">
            <el-button type="primary" @click="handleClick()"
            style="width: 10%;">提交</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getInfo,QueryUserInfo,UserCentUpdt } from "@/api/user";
export default {
  data() {
    return {
      // 个人信息的状态
      activeInfoName: "info",
      // 个人信息
      temp1: {
        userName:"",
        loginId:"",
        age:"",
        gend:"",
        coninfo:"",
        email:"",
      },
      shiOptions: [
        { value: "0", label: "男" },
        { value: "1", label: "女" },
      ],
      rules: {
        userName: [
          {
            required: true,
            message: "用户名称不能为空",
            trigger: "blur",
          },
          {
            min: 2,
            max: 20,
            message: "用户名称长度必须介于 2 和 20 之间",
            trigger: "blur",
          },
        ],
        age: [
          {
            required: true,
            message: "年龄不能为空",
            trigger: "blur",
          },
          {
            pattern: /^(?:[1-9][0-9]?|1[01][0-9]|120)$/,
            message: "请输入正确的格式",
            trigger: "blur",
          },
        ],
        idCard: [
          {
            required: true,
            message: "身份证号不能为空",
            trigger: "blur",
          },
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "请输入正确的身份证格式",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "邮箱不能为空",
            trigger: "blur",
          },
          {
            pattern: /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,
            message: "请输入正确的邮箱格式",
            trigger: "blur",
          },
        ],
        gend: [
          {
            required: false,
            message: "性别不能为空",
            trigger: "change",
          },
        ],
        coninfo: [
          {
            required: true,
            message: "联系方式不能为空",
            trigger: "blur",
          },
          {
            pattern: /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/,
            message: "请输入正确的格式",
            trigger: "blur",
          },
        ],
        dept: [
          {
            required: false,
            message: "部门不能为空",
            trigger: "blur",
          },
        ],
        proftech: [
          {
            required: false,
            message: "所学专业不能为空",
            trigger: "blur",
          },
        ],
        profttl: [
          {
            required: false,
            message: "职称不能为空",
            trigger: "blur",
          },
        ],
      },
      loginId:"",
    };
  },

  created() {
    this.getInfoList();
  },

  methods: {
    // 获取个人信息列表
    getInfoList() {
      getInfo().then((response) => {
        let data = response.data.userContext;
        this.temp1.loginId = data.loginId;
        QueryUserInfo({id:data.loginId}).then((res) => {
          this.temp1.userName = res.data.userName
          // this.temp1.age = res.data.age
          this.temp1.gend = res.data.gend
          this.temp1.coninfo = res.data.coninfo
          this.temp1.email = res.data.email
        });
      });
    },
    // 提交
    handleClick(){
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$confirm("确认提交", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            UserCentUpdt(this.temp1).then((res)=>{
              this.$message.success("修改成功");
              localStorage.clear();
              this.$store.dispatch('user/resetToken');
              this.$router.push(`/login`);
              // let aa = this.$store.getters.visitedViews;
              // let bb = this.$route.path;
              // let view = aa.filter(function (obj) {
              //   return obj.path == bb;
              // });
              // this.$store.dispatch("tagsView/delView", view[0]);
              // this.$router.push("/homePage/dashboard");
            }).catch((e)=>{
            })
          });
        }
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100vh;
  background: #fff no-repeat;
  background-attachment: fixed;
  box-sizing: border-box;
  background-size: 100% 100%;
}
::v-deep .el-tabs{
  margin: 20px;
}
::v-deep .el-textarea__inner{
  max-height: 150px;
}
</style>