web-cms/src/components/page/setting/personal.vue

<template>
  <div id="personal">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="crumbs">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 个人信息维护管理 </el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
        <el-col :span="24" class="container">
          <data-form :data="form" :fields="fields" :rules="rules" @save="turnSave"> </data-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import dataForm from '@/components/frame/form.vue';
import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
const { mapActions: user } = createNamespacedHelpers('user');
export default {
  metaInfo: { title: '个人信息维护管理' },
  name: 'personal',
  props: {},
  components: { dataForm },
  data: function() {
    return {
      form: {},
      fields: [
        { label: '名字', required: true, model: 'name', options: {} },
        { label: '手机号', required: true, model: 'tel', options: { maxlength: 11, minlength: 11, placeholder: '请谨慎修改手机，此处关联系统登录' } },
      ],
      // 验证
      rules: {
        name: [{ required: true, message: '请输入名字', trigger: 'blur' }],
        tel: [{ required: true, message: '请输入电话,请谨慎修改手机，此处关联系统登录', trigger: 'blur' }],
      },
    };
  },
  created() {
    if (this.user) {
      this.$set(this, `form`, this.user);
    }
  },
  methods: {
    ...user(['update']),
    ...mapMutations(['setUser']),
    // 修改保存个人信息
    async turnSave({ data }) {
      let res = await this.update(data);
      this.$message({
        message: '修改信息成功',
        type: 'success',
      });
      localStorage.setItem('user', JSON.stringify(res.data));
      this.setUser();
      location.reload();
    },
  },
  computed: {
    ...mapState(['user']),
  },
};
</script>

<style lang="less" scoped></style>