industrial-alliance-website/src/views/login/userInfo.vue

<template>
  <div class="app-container">
    <div class="app-main">
      <el-form :model="form" :rules="rules" ref="userInfo" class="el-form-new">
        <el-form-item label="用户类型：" :label-width="formLabelWidth">
          <span>{{ userType[1]}}</span>
        </el-form-item>
        <el-form-item label="用户名：" :label-width="formLabelWidth" prop="userName">
          <span>{{ param.userName }}</span>
        </el-form-item>
        <el-form-item label="姓名：" :label-width="formLabelWidth" prop="realName">
          <span v-if="!isEdit">{{ param.realName }}</span>
          <el-input v-else v-model="form.realName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证件号码：" :label-width="formLabelWidth">
          <span v-if="!isEdit">{{ param.idNumber }}</span>
          <el-input v-else v-model="form.idNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：" :label-width="formLabelWidth" prop="email">
          <span v-if="!isEdit">{{ param.email }}</span>
          <el-input v-else v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号：" :label-width="formLabelWidth" prop="phone">
          <span v-if="!isEdit">{{ param.phone }}</span>
          <el-input v-else v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <div class="form-footer">
          <el-button type="danger" size="mini" v-if="!isEdit" @click="editInfo">编辑</el-button>
          <div v-else>
            <el-button type="danger" size="mini" @click="submitForm('userInfo')">确定</el-button>
            <el-button type="info" size="mini" @click="resetForm('userInfo')">取消</el-button>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {getUserDetail, updateUserInfo, editPersonalCenter} from "@/api/user"

export default {
  name: 'userInfo',
  data() {
    return {
      isEdit: false,
      id: this.$store.getters.id || '',
      formLabelWidth: '150px',
      param: {},
      form: {
        id:"",
        userName: '',
        realName: '',
        idNumber: '',
        email: '',
        phone: ''
      },
      rules: {
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        realName: [
          {required: true, message: '请输入姓名', trigger: 'blur'}
        ],
        idNumber: [
          {message: '请输入身份证件号码', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入手机号', trigger: 'blur'}
        ]
      },
      userType: {//用户类型
        1: '系统用户',
        /*2: '公众用户',
        3: '企业用户',
        4: '政府用户',*/
      },
      /*userLevel: new Map([                 //角色键值对
        [1, '系统用户'],
        [2, '公众用户'],
        [3, '企业用户'],
        [4, '政府用户']
      ]),*/
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      getUserDetail({'id': this.id}).then(res => {
        this.param = res.data
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = {
            userType: 1,
            id: this.form.id,
            userName:this.form.userName,
            phone: this.form.phone,
            idNumber: this.form.idNumber,
            name: this.form.realName,
            email: this.form.email,
            version: this.form.version
          }
          updateUserInfo(param).then(res => {
            this.$message({
              message: res.msg,
              type: res.code == 200 ? 'success' : 'error'
            });
            let _obj = JSON.stringify(this.form)
            this.param = JSON.parse(_obj);
            this.isEdit = false
            this.initData()
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    editInfo() {
      let _obj = JSON.stringify(this.param)
      this.form = JSON.parse(_obj);
      this.isEdit = true
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.isEdit = false
    }
  }
}
</script>
<style lang="scss" scoped>
.form-footer {
  text-align: center;
}

.el-form-new {
  width: 400px;
  margin: 0 auto;
}
</style>