个人中心页布局改动

修复PopupManager引用路径错误问题

vue/src/bizComponents/DialogForm/index.vue

@@ -1,7 +1,7 @@
 <template>
     <el-dialog
             v-drag-dialog
-            class="dialog-form"
+            custom-class="dialog-form"
             :top="top"
             :visible="value"
             :width="width"

vue/src/components/Message/index.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import Main from './main.vue'
-import {PopupManager} from 'element-ui/src/utils/popup'
-import {isVNode} from 'element-ui/src/utils/vdom'
+import {PopupManager} from 'element-ui/lib/utils/popup'
+import {isVNode} from 'element-ui/lib/utils/vdom'
 import {isEmpty} from "@/utils"
 
 let MessageConstructor = Vue.extend(Main)

vue/src/components/PuzzleVerify/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Main from './main.vue'
-import {PopupManager} from 'element-ui/src/utils/popup'
+import {PopupManager} from 'element-ui/lib/utils/popup'
 
 let Constructor = Vue.extend(Main)
 

vue/src/views/userCenter/components/Account.vue

@@ -1,23 +1,35 @@
 <template>
-    <el-form ref="form" :model="form" :rules="rules" size="small" label-position="right" label-width="100px"
-             status-icon>
+    <dialog-form :loading="loading" title="修改密码" :value="value" width="30%" @close="cancel">
+        <el-form
+                ref="form"
+                :model="form"
+                :rules="rules"
+                size="small"
+                label-position="right"
+                label-width="100px"
+                status-icon
+        >
             <el-form-item label="旧密码：" prop="old_pwd">
-            <el-input v-model.trim="form.old_pwd" autocomplete="off" maxlength="100" type="password"/>
+                <el-input v-model.trim="form.old_pwd" maxlength="100" type="password"/>
             </el-form-item>
             <el-form-item label="新密码：" prop="new_pwd">
-            <el-input v-model.trim="form.new_pwd" autocomplete="off" maxlength="100" type="password"/>
-        </el-form-item>
-        <el-form-item>
-            <el-button :loading="loading" type="primary" @click="submit">确认修改</el-button>
+                <el-input v-model.trim="form.new_pwd" maxlength="100" type="password"/>
             </el-form-item>
         </el-form>
+        <template v-slot:footer>
+            <el-button plain size="small" @click="cancel">取 消</el-button>
+            <el-button size="small" type="primary" @click="confirm">确 定</el-button>
+        </template>
+    </dialog-form>
 </template>
 
 <script>
+    import DialogForm from '@/bizComponents/DialogForm'
     import {updateUserPwd} from "@/api/system/user"
     import {elSuccess} from "@/utils/message"
 
     export default {
+        components: {DialogForm},
         data() {
             return {
                 loading: false,
@@ -30,9 +42,7 @@
                     new_pwd: [
                         {required: true, message: '请输入新密码', trigger: 'change'},
                         {
-                            validator: (r, v, c) => {
-                                v !== this.form.old_pwd ? c() : c('新密码不得与旧密码相同')
-                            },
+                            validator: (r, v, c) => v !== this.form.old_pwd ? c() : c('新密码不得与旧密码相同'),
                             trigger: 'change'
                         },
                         {
@@ -45,13 +55,16 @@
                 }
             }
         },
+        props: {
+            value: Boolean
+        },
         methods: {
             clearForm() {
                 this.form.old_pwd = null
                 this.form.new_pwd = null
                 this.$nextTick(() => this.$refs.form.clearValidate())
             },
-            submit() {
+            confirm() {
                 if (this.loading) return
                 this.$refs.form.validate(v => {
                     if (!v) return
@@ -60,9 +73,13 @@
                         .then(() => elSuccess('修改成功'))
                         .finally(() => {
                             this.loading = false
-                            this.clearForm()
+                            this.cancel()
                         })
                 })
+            },
+            cancel() {
+                this.$emit('input', false)
+                this.clearForm()
             }
         }
     }

vue/src/views/userCenter/components/Avatar.vue

@@ -1,4 +1,5 @@
 <template>
+    <dialog-form :loading="loading" title="上传头像" :value="value" width="50%" @close="cancel">
         <el-row class="avatar-cropper" type="flex">
             <div class="img-wrapper">
                 <vue-cropper
@@ -32,21 +33,28 @@
                             @change="chooseImage"
                     >
                 </el-button>
-            <el-button :loading="loading" size="small" type="primary" @click="upload">上 传</el-button>
-            <el-button plain size="small" @click="!loading&&clear()">取 消</el-button>
             </div>
         </el-row>
+        <template v-slot:footer>
+            <el-button plain size="small" @click="cancel">取 消</el-button>
+            <el-button size="small" type="primary" @click="confirm">确 定</el-button>
+        </template>
+    </dialog-form>
 </template>
 
 <script>
     import {VueCropper} from 'vue-cropper'
+    import DialogForm from '@/bizComponents/DialogForm'
     import {elError, elSuccess} from "@/utils/message"
     import {autoCompleteUrl, upload} from "@/utils/file"
     import {updateAvatar} from "@/api/system/user"
 
     export default {
         name: "Avatar",
-        components: {VueCropper},
+        components: {VueCropper, DialogForm},
+        props: {
+            value: Boolean
+        },
         data() {
             return {
                 loading: false,
@@ -74,7 +82,7 @@
                 reader.readAsArrayBuffer(file)
             },
 
-            upload() {
+            confirm() {
                 if (!this.img) return elError('请先上传图片')
                 if (this.loading) return
                 this.loading = true
@@ -86,7 +94,7 @@
                             this.$store.dispatch('user/refresh')
                             elSuccess(msg)
                         })
-                        .finally(() => this.clear())
+                        .finally(() => this.cancel())
                 })
             },
 
@@ -101,12 +109,14 @@
             scale(e) {
                 const eventDelta = e.wheelDelta || -(e.detail || 0) * 40
                 this.$refs.cropper.changeScale(eventDelta / 120)
-            }
             },
-        beforeDestroy() {
+
+            cancel() {
+                this.$emit('input', false)
                 this.clear()
             }
         }
+    }
 </script>
 
 <style lang="scss">

vue/src/views/userCenter/components/LoginHistory.vue

@@ -11,7 +11,7 @@
             </el-table-column>
             <el-table-column align="center" label="说明" width="80">
                 <template v-slot="{row}">
-                    <el-tag :type="row.type===1?'success':'danger'" effect="dark">
+                    <el-tag :type="row.type===1?'success':'danger'" size="small" effect="dark">
                         {{getInfo(row.type)}}
                     </el-tag>
                 </template>
@@ -67,9 +67,9 @@
             getInfo(type) {
                 switch (type) {
                     case 0:
-                        return '登录'
-                    case 1:
                         return '登出'
+                    case 1:
+                        return '登陆'
                 }
                 return null
             }

vue/src/views/userCenter/components/UserAction.vue

@@ -17,7 +17,7 @@
                                 <p>{{row.error}}</p>
                             </el-scrollbar>
                         </div>
-                        <el-tag :type="row.type===1?'success':'danger'" effect="dark">
+                        <el-tag :type="row.type===1?'success':'danger'" size="small" effect="dark">
                             {{getInfo(row.type)}}
                         </el-tag>
                     </el-tooltip>

vue/src/views/userCenter/components/UserCard.vue

@@ -1,28 +1,37 @@
 <template>
-    <el-card class="user-card" header="用户信息">
-        <div class="user-profile">
-            <div class="box-center">
-                <el-avatar :size="200" :src="avatar" icon="el-icon-user-solid"/>
-                <div class="user-name text-center">{{name}}</div>
-                <div class="user-role text-center text-muted">{{role_name}}</div>
-            </div>
-        </div>
+    <el-card class="user-card" header="个人信息">
+        <el-avatar :size="200" :src="avatar" icon="el-icon-user-solid" @click.native="uploadAvatarDialog=true"/>
 
-        <!--<div class="user-bio">
-            <div class="user-bio-section">
-                <div class="user-bio-section-header">
-                    <i class="el-icon-lock"/>
-                    <span>修改锁屏密码</span>
-                </div>
-            </div>
-        </div>-->
+        <ul class="user-info">
+            <li>登录账号
+                <div class="user-right">{{ name }}</div>
+            </li>
+            <li>用户角色
+                <div class="user-right">{{ role_name }}</div>
+            </li>
+            <li>安全设置
+                <div class="user-right"><a @click="modifyPasswordDialog=true">修改密码</a></div>
+            </li>
+        </ul>
+
+        <user-account v-model="modifyPasswordDialog"/>
+        <upload-avatar v-model="uploadAvatarDialog"/>
     </el-card>
 </template>
 
 <script>
+    import UserAccount from './Account'
+    import UploadAvatar from './Avatar'
     import {mapState} from 'vuex'
 
     export default {
+        components: {UserAccount, UploadAvatar},
+        data() {
+            return {
+                modifyPasswordDialog: false,
+                uploadAvatarDialog: false
+            }
+        },
         computed: {
             ...mapState('user', {
                 name: state => state.name,
@@ -30,56 +39,39 @@
                 role_name: state => state.role_name,
                 admin: state => state.admin
             })
-        }
+        },
+        methods: {}
     }
 </script>
 
 <style lang="scss">
     .user-card {
-        .el-avatar i {
-            line-height: 180px;
-            font-size: 150px;
-        }
-
-        .text-muted {
-            color: #777;
-        }
-
-        .user-profile {
-            .user-name {
-                font-weight: bold;
-            }
-
-            .box-center {
+        .el-avatar {
             margin: 0 auto;
-                display: table;
-                padding-top: 10px;
-            }
+            display: block;
+            cursor: pointer;
 
-            .user-role {
-                padding-top: 10px;
-                font-weight: 400;
-                font-size: 14px;
+            i {
+                line-height: 180px;
+                font-size: 150px;
             }
         }
 
-        .user-bio {
-            margin-top: 20px;
-            color: #606266;
+        .user-info {
+            padding-left: 0;
+            list-style: none;
 
-            span {
-                padding-left: 4px;
+            li {
+                border-bottom: 1px solid #F0F3F4;
+                padding: 11px 0;
+                font-size: 13px;
             }
 
-            .user-bio-section {
-                font-size: 14px;
-                padding: 15px 0;
+            .user-right {
+                float: right;
 
-                .user-bio-section-header {
-                    border-bottom: 1px solid #dfe6ec;
-                    padding-bottom: 10px;
-                    margin-bottom: 10px;
-                    font-weight: bold;
+                a {
+                    color: #317EF3;
                 }
             }
         }

vue/src/views/userCenter/index.vue

@@ -1,9 +1,9 @@
 <template>
     <el-row :gutter="20">
-        <el-col :span="6">
+        <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="5" style="margin-bottom: 10px">
             <user-card/>
         </el-col>
-        <el-col :span="18">
+        <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="19">
             <el-card>
                 <el-tabs v-model="activeTab">
                     <el-tab-pane v-for="i in tabs" v-once :key="i.label" :name="i.name">
@@ -27,22 +27,18 @@
 
 <script>
     import UserCard from './components/UserCard'
-    import UserAvatar from "@/views/userCenter/components/Avatar"
-    import UserAccount from './components/Account'
     import LoginHistory from './components/LoginHistory'
     import UserAction from './components/UserAction'
 
     export default {
         name: 'userCenter',
-        components: {UserCard, UserAvatar, UserAccount, LoginHistory, UserAction},
+        components: {UserCard, LoginHistory, UserAction},
         data() {
             return {
-                activeTab: 'user-avatar',
+                activeTab: 'login-history',
                 tabs: [
-                    {label: '上传头像', name: 'user-avatar'},
-                    {label: '修改密码', name: 'user-account'},
-                    {label: '登录历史', name: 'login-history', intro: '只保留最近7天的记录，想查询全部请联系管理员'},
-                    {label: '操作记录', name: 'user-action', intro: '只保留最近7天的记录，想查询全部请联系管理员'},
+                    {label: '登录历史', name: 'login-history', intro: '只保留最近7天的记录'},
+                    {label: '操作记录', name: 'user-action', intro: '只保留最近7天的记录'},
                 ]
             }
         }