From 522a3ea6c1529ab4177201f2de9115a7cada4ec7 Mon Sep 17 00:00:00 2001
From: toesbieya <1647775459@qq.com>
Date: Sun, 24 May 2020 20:06:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83=E9=A1=B5?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E6=94=B9=E5=8A=A8=20=E4=BF=AE=E5=A4=8DPopupM?=
 =?UTF-8?q?anager=E5=BC=95=E7=94=A8=E8=B7=AF=E5=BE=84=E9=94=99=E8=AF=AF?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/src/bizComponents/DialogForm/index.vue    |  2 +-
 vue/src/components/Message/index.js           |  4 +-
 vue/src/components/PuzzleVerify/index.js      |  2 +-
 .../views/userCenter/components/Account.vue   | 51 ++++++----
 .../views/userCenter/components/Avatar.vue    | 92 +++++++++--------
 .../userCenter/components/LoginHistory.vue    |  6 +-
 .../userCenter/components/UserAction.vue      |  2 +-
 .../views/userCenter/components/UserCard.vue  | 98 +++++++++----------
 vue/src/views/userCenter/index.vue            | 16 ++-
 9 files changed, 144 insertions(+), 129 deletions(-)

diff --git a/vue/src/bizComponents/DialogForm/index.vue b/vue/src/bizComponents/DialogForm/index.vue
index 8be6223..aa3b28e 100644
--- a/vue/src/bizComponents/DialogForm/index.vue
+++ b/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"
diff --git a/vue/src/components/Message/index.js b/vue/src/components/Message/index.js
index 7605321..e7a00e2 100644
--- a/vue/src/components/Message/index.js
+++ b/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)
diff --git a/vue/src/components/PuzzleVerify/index.js b/vue/src/components/PuzzleVerify/index.js
index bcec2e7..a643332 100644
--- a/vue/src/components/PuzzleVerify/index.js
+++ b/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)
 
diff --git a/vue/src/views/userCenter/components/Account.vue b/vue/src/views/userCenter/components/Account.vue
index 20bdb64..f1fe882 100644
--- a/vue/src/views/userCenter/components/Account.vue
+++ b/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>
-        <el-form-item label="旧密码：" prop="old_pwd">
-            <el-input v-model.trim="form.old_pwd" autocomplete="off" 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-form-item>
-    </el-form>
+    <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" maxlength="100" type="password"/>
+            </el-form-item>
+            <el-form-item label="新密码：" prop="new_pwd">
+                <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()
             }
         }
     }
diff --git a/vue/src/views/userCenter/components/Avatar.vue b/vue/src/views/userCenter/components/Avatar.vue
index e94d718..070d7dc 100644
--- a/vue/src/views/userCenter/components/Avatar.vue
+++ b/vue/src/views/userCenter/components/Avatar.vue
@@ -1,52 +1,60 @@
 <template>
-    <el-row class="avatar-cropper" type="flex">
-        <div class="img-wrapper">
-            <vue-cropper
-                    ref="cropper"
-                    :img="img"
-                    :info="false"
-                    autoCrop
-                    autoCropHeight="200px"
-                    autoCropWidth="200px"
-                    centerBox
-                    fixedBox
-                    full
-                    outputType="png"
-                    @realTime="previews=$event"
-                    @wheel.native.prevent="scale"
-            />
-        </div>
-        <div class="operate-wrapper">
-            <div class="preview-container">
-                <div :style="previews.div">
-                    <img :src="previews.url" :style="previews.img">
+    <dialog-form :loading="loading" title="上传头像" :value="value" width="50%" @close="cancel">
+        <el-row class="avatar-cropper" type="flex">
+            <div class="img-wrapper">
+                <vue-cropper
+                        ref="cropper"
+                        :img="img"
+                        :info="false"
+                        autoCrop
+                        autoCropHeight="200px"
+                        autoCropWidth="200px"
+                        centerBox
+                        fixedBox
+                        full
+                        outputType="png"
+                        @realTime="previews=$event"
+                        @wheel.native.prevent="scale"
+                />
+            </div>
+            <div class="operate-wrapper">
+                <div class="preview-container">
+                    <div :style="previews.div">
+                        <img :src="previews.url" :style="previews.img">
+                    </div>
                 </div>
+                <el-button size="small" type="primary" @click="$refs.input.click()">
+                    选择图片
+                    <input
+                            ref="input"
+                            accept="image/png, image/jpeg, image/gif, image/jpg"
+                            style="display: none"
+                            type="file"
+                            @change="chooseImage"
+                    >
+                </el-button>
             </div>
-            <el-button size="small" type="primary" @click="$refs.input.click()">
-                选择图片
-                <input
-                        ref="input"
-                        accept="image/png, image/jpeg, image/gif, image/jpg"
-                        style="display: none"
-                        type="file"
-                        @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>
+        </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,10 +109,12 @@
             scale(e) {
                 const eventDelta = e.wheelDelta || -(e.detail || 0) * 40
                 this.$refs.cropper.changeScale(eventDelta / 120)
+            },
+
+            cancel() {
+                this.$emit('input', false)
+                this.clear()
             }
-        },
-        beforeDestroy() {
-            this.clear()
         }
     }
 </script>
diff --git a/vue/src/views/userCenter/components/LoginHistory.vue b/vue/src/views/userCenter/components/LoginHistory.vue
index 47349e8..a26875a 100644
--- a/vue/src/views/userCenter/components/LoginHistory.vue
+++ b/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
             }
diff --git a/vue/src/views/userCenter/components/UserAction.vue b/vue/src/views/userCenter/components/UserAction.vue
index adf1867..330247d 100644
--- a/vue/src/views/userCenter/components/UserAction.vue
+++ b/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>
diff --git a/vue/src/views/userCenter/components/UserCard.vue b/vue/src/views/userCenter/components/UserCard.vue
index 2f60422..e393a0b 100644
--- a/vue/src/views/userCenter/components/UserCard.vue
+++ b/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 {
-                margin: 0 auto;
-                display: table;
-                padding-top: 10px;
-            }
+        .el-avatar {
+            margin: 0 auto;
+            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;
                 }
             }
         }
diff --git a/vue/src/views/userCenter/index.vue b/vue/src/views/userCenter/index.vue
index 5e346a7..cb6ba48 100644
--- a/vue/src/views/userCenter/index.vue
+++ b/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天的记录'},
                 ]
             }
         }