[feat][V]：新增个人中心进本信息组件

element-vue/src/components/personalMessage.vue

@@ -0,0 +1,110 @@
+<template>
+    <div>
+        <h1>个人基本信息
+            <el-link type="primary" @click="editClick"><b><span v-if="edit">取消</span>编辑</b></el-link>
+            </h2></h1>
+        <div class="personal-message">
+            <!--            未编辑状态-->
+            <el-table v-if="!edit" :data="tableData" stripe>
+                <el-table-column prop="name" width="200"></el-table-column>
+                <el-table-column prop="data"></el-table-column>
+            </el-table>
+            <!--            编辑状态-->
+            <div v-if="edit">
+                <el-form :model="data" label-width="100px" class="demo-ruleForm">
+                    <el-form-item label="工号" prop="name">
+                        <el-input v-model="data.id" disabled></el-input>
+                    </el-form-item>
+                    <el-form-item label="姓名" prop="name">
+                        <el-input v-model="data.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="联系电话" prop="name">
+                        <el-input v-model="data.tel"></el-input>
+                    </el-form-item>
+                    <el-form-item label="办公室" prop="name">
+                        <el-input v-model="data.office"></el-input>
+                    </el-form-item>
+                    <el-form-item label="邮箱" prop="name">
+                        <el-input v-model="data.email"></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="submit">修改</el-button>
+                        <el-button @click="editClick">取消</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {get, post} from "~/utils";
+    import axios from "axios"
+    import {showDialog, showSuccess} from "~/utils/dialog";
+
+    export default {
+        data() {
+            return {
+                edit: false,
+                tableData: [{
+                    name: '工号',
+                    data: '12345',
+                }, {
+                    name: '姓名',
+                    data: '王小虎',
+                }, {
+                    name: '联系电话',
+                    data: '13123456789',
+                }, {
+                    name: '办公室',
+                    data: '5#101',
+                }, {
+                    name: '邮箱',
+                    data: '123456789@hzu.com',
+                }],
+                data: {
+                    id: '12345',
+                    name: '王小虎',
+                    tel: '13123456789',
+                    office: '5#101',
+                    email: '123456789@hzu.com'
+                }
+            }
+        },
+        methods: {
+            editClick() {
+                // 切换编辑状态
+                this.edit = !this.edit
+            },
+            async load() {
+                // 获取用户数据
+                this.data = await get('lb/user/getInfo', {
+                    TOKEN: 1
+                })
+
+            },
+            async submit() {
+                await showDialog('确定要修改吗？',this)
+                console.log(this.data)
+                // 提交表单，修改用户信息
+                await post('lb/user/updateInfo', {
+                    data: this.data
+                })
+                // 修改后重载用户数据
+                this.load()
+                this.edit = false
+                showSuccess('修改成功')
+            }
+        },
+        async mounted() {
+            // 进入时加载用户数据
+            this.load()
+        }
+    }
+</script>
+
+<style scoped>
+    .personal-message {
+        margin: 200px 20% 0 20%;
+    }
+</style>